From 1046aa5cb3eb81c5b438855a865b51a6ad202e8d Mon Sep 17 00:00:00 2001
From: "k.sidorov" <k.sidorov@qiwi.com>
Date: Wed, 31 Jul 2019 17:30:42 +0300
Subject: [PATCH] =?UTF-8?q?[NF]=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20@role=20=D0=BA=20=D1=8D=D0=BB=D0=B5=D0=BC=D0=B5=D0=BD?=
 =?UTF-8?q?=D1=82=D0=B0=D0=BC=20p.1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/core/src/field/OptionField.tsx           |  6 ++++--
 packages/core/src/field/OptionFieldItem.tsx       |  9 +++++++--
 packages/desktop/src/button/Button.tsx            | 15 +++------------
 .../desktop/src/checkbox-field/CheckboxField.tsx  | 10 ++--------
 packages/desktop/src/header-menu/HeaderMenu.tsx   |  2 +-
 .../desktop/src/header-menu/HeaderMenuItem.tsx    |  3 ++-
 packages/desktop/src/link/BlockLink.tsx           |  4 +++-
 packages/desktop/src/link/FileLink.tsx            |  4 +++-
 packages/desktop/src/link/Link.tsx                |  1 +
 packages/desktop/src/list/List.tsx                |  4 ++--
 packages/desktop/src/nav-link/NavLink.tsx         |  2 ++
 packages/desktop/src/notice/Notice.tsx            |  2 +-
 packages/desktop/src/pagination/Pagination.tsx    |  4 +++-
 .../desktop/src/pagination/PaginationLink.tsx     |  4 +++-
 packages/desktop/src/text-field/TextField.tsx     | 13 ++-----------
 packages/mobile/src/button/Button.tsx             | 15 +++------------
 packages/mobile/src/link/BlockLink.tsx            |  4 +++-
 packages/mobile/src/link/FileLink.tsx             |  4 +++-
 packages/mobile/src/link/Link.tsx                 |  1 +
 packages/mobile/src/list/List.tsx                 |  4 ++--
 packages/mobile/src/nav-link/NavLink.tsx          |  2 ++
 packages/mobile/src/notice/Notice.tsx             |  2 +-
 packages/mobile/src/pagination/Pagination.tsx     |  4 +++-
 packages/mobile/src/pagination/PaginationLink.tsx |  4 +++-
 24 files changed, 60 insertions(+), 63 deletions(-)

diff --git a/packages/core/src/field/OptionField.tsx b/packages/core/src/field/OptionField.tsx
index 05fe07453..838950ae4 100644
--- a/packages/core/src/field/OptionField.tsx
+++ b/packages/core/src/field/OptionField.tsx
@@ -1,7 +1,7 @@
-import React, {ReactNode, FocusEventHandler, KeyboardEventHandler} from 'react'
+import React, {FocusEventHandler, KeyboardEventHandler, ReactNode} from 'react'
 
 import styled from '../styled'
-import {Typo, Box, Flex, FlexItem, BoxProps} from '../primitive'
+import {Box, BoxProps, Flex, FlexItem, Typo} from '../primitive'
 import {Spacer} from '../spacer'
 
 export interface OptionFieldProps {
@@ -33,6 +33,8 @@ export const OptionField: React.FunctionComponent<OptionFieldProps> = (props) =>
       <Input
         tabIndex={props.tabIndex}
         autoFocus={props.autoFocus}
+        role="checkbox"
+        aria-label={typeof props.title === 'string' ? props.title : undefined}
         onFocus={props.onFocus}
         onBlur={props.onBlur}
         onKeyDown={props.onKeyDown}
diff --git a/packages/core/src/field/OptionFieldItem.tsx b/packages/core/src/field/OptionFieldItem.tsx
index f4031556e..d4808397f 100644
--- a/packages/core/src/field/OptionFieldItem.tsx
+++ b/packages/core/src/field/OptionFieldItem.tsx
@@ -1,8 +1,9 @@
-import React, {ReactNode, MouseEventHandler} from 'react'
+import React, {MouseEventHandler, ReactNode} from 'react'
 
-import {Box, Pos, Typo, Flex} from '../primitive'
+import {Box, Flex, Pos, Typo} from '../primitive'
 
 export interface OptionFieldItemProps {
+  checked?: boolean
   disabled?: boolean
   reverse?: boolean
   icon: ReactNode
@@ -14,6 +15,7 @@ export interface OptionFieldItemProps {
 }
 
 export const OptionFieldItem: React.FunctionComponent<OptionFieldItemProps> = ({
+  checked,
   disabled,
   icon,
   label,
@@ -24,6 +26,9 @@ export const OptionFieldItem: React.FunctionComponent<OptionFieldItemProps> = ({
   reverse,
 }) => (
   <Pos
+    role="menuitemcheckbox"
+    aria-checked={checked ? 'true' : 'false'}
+    aria-label={typeof label === 'string' ? label : undefined}
     type="relative"
     cursor={disabled ? 'not-allowed' : 'pointer'}
     onClick={onClick}
diff --git a/packages/desktop/src/button/Button.tsx b/packages/desktop/src/button/Button.tsx
index 0cd1dd097..a243df06b 100644
--- a/packages/desktop/src/button/Button.tsx
+++ b/packages/desktop/src/button/Button.tsx
@@ -1,16 +1,6 @@
-import React, {FunctionComponent, ReactNode, Fragment} from 'react'
+import React, {Fragment, FunctionComponent, ReactNode} from 'react'
 
-import {
-  ButtonControl,
-  Spinner,
-  Card,
-  Pos,
-  Flex,
-  FlexItem,
-  Typo,
-  Btn,
-  Stub,
-} from '@qiwi/pijma-core'
+import {Btn, ButtonControl, Card, Flex, FlexItem, Pos, Spinner, Stub, Typo} from '@qiwi/pijma-core'
 
 export interface ButtonProps {
   onClick?: () => void
@@ -165,6 +155,7 @@ export const Button: FunctionComponent<ButtonProps> = (props) => (
       onBlur={props.onBlur}
       children={(renderProps) => (
         <Btn
+          role="button"
           disabled={props.disabled}
           type={props.type}
           width={!props.icon || props.text ? 1 : buttonSize[props.size]}
diff --git a/packages/desktop/src/checkbox-field/CheckboxField.tsx b/packages/desktop/src/checkbox-field/CheckboxField.tsx
index eae509b45..ba927b13e 100644
--- a/packages/desktop/src/checkbox-field/CheckboxField.tsx
+++ b/packages/desktop/src/checkbox-field/CheckboxField.tsx
@@ -1,13 +1,6 @@
 import React, {FunctionComponent} from 'react'
 
-import {
-  CheckboxControl,
-  OptionControl,
-  Check,
-  OptionField,
-  OptionFieldItem,
-  Box,
-} from '@qiwi/pijma-core'
+import {Box, Check, CheckboxControl, OptionControl, OptionField, OptionFieldItem} from '@qiwi/pijma-core'
 
 import CheckboxFieldProps from './CheckboxFieldProps'
 import CheckboxFieldOptionModel from './CheckboxFieldOptionModel'
@@ -43,6 +36,7 @@ const CheckboxField: FunctionComponent<
             onMouseLeave={renderProps.onMouseLeave}
             children={(renderOptionProps) => (
               <OptionFieldItem
+                checked={option.checked}
                 disabled={option.disabled}
                 icon={(
                   <Box width={6}>
diff --git a/packages/desktop/src/header-menu/HeaderMenu.tsx b/packages/desktop/src/header-menu/HeaderMenu.tsx
index 1c8d15768..14b3b0f1d 100644
--- a/packages/desktop/src/header-menu/HeaderMenu.tsx
+++ b/packages/desktop/src/header-menu/HeaderMenu.tsx
@@ -8,7 +8,7 @@ export interface HeaderMenuProps {
 }
 
 export const HeaderMenu: FC<HeaderMenuProps> = (props) => (
-  <Flex height={1} width={1} justify="flex-start">
+  <Flex height={1} width={1} justify="flex-start" role="menubar">
     {props.children.map((item, i) => (
       <FlexItem key={i} ml={i > 0 ? 6 : 0}>
         <HeaderMenuItem
diff --git a/packages/desktop/src/header-menu/HeaderMenuItem.tsx b/packages/desktop/src/header-menu/HeaderMenuItem.tsx
index d1014a0b0..60be8e2bd 100644
--- a/packages/desktop/src/header-menu/HeaderMenuItem.tsx
+++ b/packages/desktop/src/header-menu/HeaderMenuItem.tsx
@@ -1,6 +1,6 @@
 import React, {FC} from 'react'
 
-import {LinkControl, Lnk, Flex, Pos, Card} from '@qiwi/pijma-core'
+import {Card, Flex, LinkControl, Lnk, Pos} from '@qiwi/pijma-core'
 import {Text} from '../typography/Text'
 
 export interface HeaderMenuItemProps {
@@ -35,6 +35,7 @@ export const HeaderMenuItem: FC<HeaderMenuItemProps> = (props) => (
         cursor="pointer"
         tabIndex={props.tabIndex}
         href={props.href}
+        role="menuitem"
         target={props.target}
         download={props.download}
         rel={props.rel}
diff --git a/packages/desktop/src/link/BlockLink.tsx b/packages/desktop/src/link/BlockLink.tsx
index 519b3c8c2..8cf2f1283 100644
--- a/packages/desktop/src/link/BlockLink.tsx
+++ b/packages/desktop/src/link/BlockLink.tsx
@@ -1,6 +1,6 @@
 import React, {FC} from 'react'
 
-import {LinkControl, RenderChild, Lnk, Card} from '@qiwi/pijma-core'
+import {Card, LinkControl, Lnk, RenderChild} from '@qiwi/pijma-core'
 
 export interface BlockLinkProps {
   onClick?: (href?: string, target?: string, download?: string | boolean, rel?: string) => void
@@ -33,6 +33,8 @@ export const BlockLink: FC<BlockLinkProps> = (props) => (
     rel={props.rel}
     children={(renderProps) => (
       <CardLink
+        role="link"
+        aria-label="blockLink"
         display="block"
         overflow="hidden"
         bg="#fff"
diff --git a/packages/desktop/src/link/FileLink.tsx b/packages/desktop/src/link/FileLink.tsx
index b8bc527a9..bd63f6ae2 100644
--- a/packages/desktop/src/link/FileLink.tsx
+++ b/packages/desktop/src/link/FileLink.tsx
@@ -1,6 +1,6 @@
 import React, {FC} from 'react'
 
-import {LinkControl, Lnk, FlexItem, Flex, IconWrapper} from '@qiwi/pijma-core'
+import {Flex, FlexItem, IconWrapper, LinkControl, Lnk} from '@qiwi/pijma-core'
 import {Icon} from '@qiwi/pijma-media'
 import {Text} from '../typography'
 
@@ -36,6 +36,8 @@ export const FileLink: FC<FileLinkProps> = (props) => (
       <FlexLink
         tabIndex={props.tabIndex}
         href={props.href}
+        role="link"
+        aria-label="file"
         target={props.target}
         download={props.download}
         rel={props.rel}
diff --git a/packages/desktop/src/link/Link.tsx b/packages/desktop/src/link/Link.tsx
index 81ab43473..054b61e4d 100644
--- a/packages/desktop/src/link/Link.tsx
+++ b/packages/desktop/src/link/Link.tsx
@@ -49,6 +49,7 @@ export const Link: FC<LinkProps> = (props) => (
       <TypoLink
         tabIndex={props.tabIndex}
         href={props.href}
+        role="link"
         onClick={renderProps.onClick}
         onFocus={renderProps.onFocus}
         onBlur={renderProps.onBlur}
diff --git a/packages/desktop/src/list/List.tsx b/packages/desktop/src/list/List.tsx
index e3a68d094..a444b9729 100644
--- a/packages/desktop/src/list/List.tsx
+++ b/packages/desktop/src/list/List.tsx
@@ -28,9 +28,9 @@ const ItemIndent: {[type in NonNullable<ListProps['type']>]: number} = {
 }
 
 export const List: FunctionComponent<ListProps> = props => (
-  <Box as={ListType[props.type]}>
+  <Box as={ListType[props.type]} role="list">
     {props.children.map((item, index) => (
-      <Flex key={index} as="li" mt={index > 0 ? ItemIndent[props.type] : 0}>
+      <Flex key={index} as="li" mt={index > 0 ? ItemIndent[props.type] : 0} role="listitem">
         {props.type === 'number' ? (
           <FlexItem width={String(props.children.length).length * 2 + 3} shrink={0}>
             <Text size="m" bold={false}>{index + 1}.</Text>
diff --git a/packages/desktop/src/nav-link/NavLink.tsx b/packages/desktop/src/nav-link/NavLink.tsx
index d3b2d5fda..658f5c0e3 100644
--- a/packages/desktop/src/nav-link/NavLink.tsx
+++ b/packages/desktop/src/nav-link/NavLink.tsx
@@ -29,6 +29,8 @@ export const NavLink: FC<NavLinkProps> = (props) => (
       <TypoLink
         tabIndex={props.tabIndex}
         href={props.href}
+        role="link"
+        aria-label="navigation"
         onClick={renderProps.onClick}
         onFocus={renderProps.onFocus}
         onBlur={renderProps.onBlur}
diff --git a/packages/desktop/src/notice/Notice.tsx b/packages/desktop/src/notice/Notice.tsx
index 217b10ddd..863d1d5e5 100644
--- a/packages/desktop/src/notice/Notice.tsx
+++ b/packages/desktop/src/notice/Notice.tsx
@@ -8,7 +8,7 @@ export interface NoticeProps {
 }
 
 export const Notice: FC<NoticeProps> = ({icon, title, children}) => (
-  <Flex>
+  <Flex role="alertdialog" aria-label="notice">
     <FlexItem
       shrink={0}
       basis={6}
diff --git a/packages/desktop/src/pagination/Pagination.tsx b/packages/desktop/src/pagination/Pagination.tsx
index b2b02842a..5e42fcf5a 100644
--- a/packages/desktop/src/pagination/Pagination.tsx
+++ b/packages/desktop/src/pagination/Pagination.tsx
@@ -1,6 +1,6 @@
 import React, {FunctionComponent} from 'react'
 
-import {PaginationControl, Card, IconWrapper, Box} from '@qiwi/pijma-core'
+import {Box, Card, IconWrapper, PaginationControl} from '@qiwi/pijma-core'
 import {Icon} from '@qiwi/pijma-media'
 import {Text} from '../typography'
 import {PaginationLink} from './PaginationLink'
@@ -30,6 +30,8 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
     onChange={onChange}
     children={renderProps => (
       <Card
+        role="toolbar"
+        aria-label="pagination"
         bg="#fff"
         s={shadowed ? '0 1px 2px 0 rgba(0,0,0,0.12)' : '0 0 0 1px #e6e6e6'}
         height={12}
diff --git a/packages/desktop/src/pagination/PaginationLink.tsx b/packages/desktop/src/pagination/PaginationLink.tsx
index 709aaabc6..1bdca310e 100644
--- a/packages/desktop/src/pagination/PaginationLink.tsx
+++ b/packages/desktop/src/pagination/PaginationLink.tsx
@@ -1,6 +1,6 @@
 import React, {FC} from 'react'
 
-import {LinkControl, Lnk, Card, Value, RenderChild, Flex} from '@qiwi/pijma-core'
+import {Card, Flex, LinkControl, Lnk, RenderChild, Value} from '@qiwi/pijma-core'
 
 export interface PaginationLinkProps {
   page: number
@@ -24,6 +24,8 @@ export const PaginationLink: FC<PaginationLinkProps> = props => (
     onClick={props.onClick}
     children={renderProps => (
       <CardLink
+        role="link"
+        aria-label="pagination"
         transition="all 100ms cubic-bezier(0.4, 0.0, 0.2, 1)"
         height={12}
         width={props.width}
diff --git a/packages/desktop/src/text-field/TextField.tsx b/packages/desktop/src/text-field/TextField.tsx
index 783136f41..d14e96f31 100644
--- a/packages/desktop/src/text-field/TextField.tsx
+++ b/packages/desktop/src/text-field/TextField.tsx
@@ -1,21 +1,12 @@
 import React, {FunctionComponent} from 'react'
 
-import {
-  TextFieldControl,
-  InputField,
-  BasicInput,
-  Stub,
-  Box,
-  Card,
-  Flex,
-  FlexItem,
-} from '@qiwi/pijma-core'
+import {BasicInput, Box, Card, Flex, FlexItem, InputField, Stub, TextFieldControl} from '@qiwi/pijma-core'
 
 import TextFieldProps from './TextFieldProps'
 
 const TextField: FunctionComponent<TextFieldProps> = (props) => (
   props.stub ? (
-    <Box>
+    <Box role="textbox">
       {props.title ? (
         <Stub width={15} height={2} top={1} bottom={1}/>
       ) : (
diff --git a/packages/mobile/src/button/Button.tsx b/packages/mobile/src/button/Button.tsx
index 7f9319d82..2c5257b7c 100644
--- a/packages/mobile/src/button/Button.tsx
+++ b/packages/mobile/src/button/Button.tsx
@@ -1,16 +1,6 @@
-import React, {FunctionComponent, ReactNode, Fragment} from 'react'
+import React, {Fragment, FunctionComponent, ReactNode} from 'react'
 
-import {
-  ButtonControl,
-  Spinner,
-  Card,
-  Pos,
-  Flex,
-  FlexItem,
-  Typo,
-  Btn,
-  Stub,
-} from '@qiwi/pijma-core'
+import {Btn, ButtonControl, Card, Flex, FlexItem, Pos, Spinner, Stub, Typo} from '@qiwi/pijma-core'
 
 export interface ButtonProps {
   onClick?: () => void
@@ -155,6 +145,7 @@ export const Button: FunctionComponent<ButtonProps> = (props) => (
       onBlur={props.onBlur}
       children={(renderProps) => (
         <Btn
+          role="button"
           disabled={props.disabled}
           type={props.type}
           width={!props.icon || props.text ? 1 : buttonSize[props.size]}
diff --git a/packages/mobile/src/link/BlockLink.tsx b/packages/mobile/src/link/BlockLink.tsx
index 519b3c8c2..8cf2f1283 100644
--- a/packages/mobile/src/link/BlockLink.tsx
+++ b/packages/mobile/src/link/BlockLink.tsx
@@ -1,6 +1,6 @@
 import React, {FC} from 'react'
 
-import {LinkControl, RenderChild, Lnk, Card} from '@qiwi/pijma-core'
+import {Card, LinkControl, Lnk, RenderChild} from '@qiwi/pijma-core'
 
 export interface BlockLinkProps {
   onClick?: (href?: string, target?: string, download?: string | boolean, rel?: string) => void
@@ -33,6 +33,8 @@ export const BlockLink: FC<BlockLinkProps> = (props) => (
     rel={props.rel}
     children={(renderProps) => (
       <CardLink
+        role="link"
+        aria-label="blockLink"
         display="block"
         overflow="hidden"
         bg="#fff"
diff --git a/packages/mobile/src/link/FileLink.tsx b/packages/mobile/src/link/FileLink.tsx
index 27a623333..01f8f7ca7 100644
--- a/packages/mobile/src/link/FileLink.tsx
+++ b/packages/mobile/src/link/FileLink.tsx
@@ -1,6 +1,6 @@
 import React, {FC} from 'react'
 
-import {LinkControl, Lnk, FlexItem, Flex, IconWrapper} from '@qiwi/pijma-core'
+import {Flex, FlexItem, IconWrapper, LinkControl, Lnk} from '@qiwi/pijma-core'
 import {Icon} from '@qiwi/pijma-media'
 import {Text} from '../typography'
 
@@ -36,6 +36,8 @@ export const FileLink: FC<FileLinkProps> = (props) => (
       <FlexLink
         tabIndex={props.tabIndex}
         href={props.href}
+        role="link"
+        aria-label="file"
         target={props.target}
         download={props.download}
         rel={props.rel}
diff --git a/packages/mobile/src/link/Link.tsx b/packages/mobile/src/link/Link.tsx
index 81ab43473..054b61e4d 100644
--- a/packages/mobile/src/link/Link.tsx
+++ b/packages/mobile/src/link/Link.tsx
@@ -49,6 +49,7 @@ export const Link: FC<LinkProps> = (props) => (
       <TypoLink
         tabIndex={props.tabIndex}
         href={props.href}
+        role="link"
         onClick={renderProps.onClick}
         onFocus={renderProps.onFocus}
         onBlur={renderProps.onBlur}
diff --git a/packages/mobile/src/list/List.tsx b/packages/mobile/src/list/List.tsx
index e6ea085a3..3835b630d 100644
--- a/packages/mobile/src/list/List.tsx
+++ b/packages/mobile/src/list/List.tsx
@@ -28,9 +28,9 @@ const ItemIndent: {[type in NonNullable<ListProps['type']>]: number} = {
 }
 
 export const List: FunctionComponent<ListProps> = props => (
-  <Box as={ListType[props.type]}>
+  <Box as={ListType[props.type]} role="list">
     {props.children.map((item, index) => (
-      <Flex key={index} as="li" mt={index > 0 ? ItemIndent[props.type] : 0}>
+      <Flex key={index} as="li" mt={index > 0 ? ItemIndent[props.type] : 0} role="listitem">
         {props.type === 'number' ? (
           <FlexItem width={String(props.children.length).length * 2 + 3} shrink={0}>
             <Text size="m" bold={false}>{index + 1}.</Text>
diff --git a/packages/mobile/src/nav-link/NavLink.tsx b/packages/mobile/src/nav-link/NavLink.tsx
index 4318b736b..d7935434b 100644
--- a/packages/mobile/src/nav-link/NavLink.tsx
+++ b/packages/mobile/src/nav-link/NavLink.tsx
@@ -28,6 +28,8 @@ export const NavLink: FC<NavLinkProps> = (props) => (
       <TypoLink
         tabIndex={props.tabIndex}
         href={props.href}
+        role="link"
+        aria-label="navigation"
         onClick={renderProps.onClick}
         onFocus={renderProps.onFocus}
         onBlur={renderProps.onBlur}
diff --git a/packages/mobile/src/notice/Notice.tsx b/packages/mobile/src/notice/Notice.tsx
index 085762562..1cd487daf 100644
--- a/packages/mobile/src/notice/Notice.tsx
+++ b/packages/mobile/src/notice/Notice.tsx
@@ -8,7 +8,7 @@ export interface NoticeProps {
 }
 
 export const Notice: FC<NoticeProps> = ({icon, title, children}) => (
-  <Flex>
+  <Flex role="alertdialog" aria-label="notice">>
     <FlexItem
       shrink={0}
       basis={6}
diff --git a/packages/mobile/src/pagination/Pagination.tsx b/packages/mobile/src/pagination/Pagination.tsx
index e0c602de4..81f653322 100644
--- a/packages/mobile/src/pagination/Pagination.tsx
+++ b/packages/mobile/src/pagination/Pagination.tsx
@@ -1,6 +1,6 @@
 import React, {FunctionComponent} from 'react'
 
-import {PaginationControl, Card, IconWrapper, Box} from '@qiwi/pijma-core'
+import {Box, Card, IconWrapper, PaginationControl} from '@qiwi/pijma-core'
 import {Icon} from '@qiwi/pijma-media'
 import {Text} from '../typography'
 import {PaginationLink} from './PaginationLink'
@@ -30,6 +30,8 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
     onChange={onChange}
     children={renderProps => (
       <Card
+        role="toolbar"
+        aria-label="pagination"
         bg="#fff"
         s={shadowed ? '0 1px 2px 0 rgba(0,0,0,0.12)' : '0 0 0 1px #e6e6e6'}
         height={12}
diff --git a/packages/mobile/src/pagination/PaginationLink.tsx b/packages/mobile/src/pagination/PaginationLink.tsx
index b1e0e6ffa..1e60382c6 100644
--- a/packages/mobile/src/pagination/PaginationLink.tsx
+++ b/packages/mobile/src/pagination/PaginationLink.tsx
@@ -1,6 +1,6 @@
 import React, {FC} from 'react'
 
-import {LinkControl, Lnk, Card, Value, RenderChild, Flex} from '@qiwi/pijma-core'
+import {Card, Flex, LinkControl, Lnk, RenderChild, Value} from '@qiwi/pijma-core'
 
 export interface PaginationLinkProps {
   page: number
@@ -23,6 +23,8 @@ export const PaginationLink: FC<PaginationLinkProps> = props => (
     onClick={props.onClick}
     children={renderProps => (
       <CardLink
+        role="link"
+        aria-label="pagination"
         transition="all 100ms cubic-bezier(0.4, 0.0, 0.2, 1)"
         height={12}
         width={props.width}