@innovaccer/design-system 2.5.0 → 2.7.0-0

package/core/components/atoms/button/__stories__/IconTransparent.story.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Button from '../Button';
 
-export const transparentIconButton = () => <Button appearance="transparent" icon="more_horiz" />;
+export const transparentIconButton = () => <Button appearance="transparent" icon="more_horiz" aria-label="Menu" />;
 
 export default {
   title: 'Components/Button/Transparent Icon Button',
@@ -11,6 +11,9 @@ export default {
       docPage: {
         title: 'Button',
         description: 'Transparent button with icon.',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Menu'\` to describe the action of button. 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/LabelButtonGroup.story.tsx

@@ -3,13 +3,15 @@ import Button from '@/components/atoms/button';
 
 export const labelButtonGroup = () => (
   <div className="d-flex">
-    <Button size="tiny" className="mr-2">
+    <Button size="tiny" className="mr-4" aria-label="Copy">
       Copy
     </Button>
-    <Button size="tiny" className="mr-2">
+    <Button size="tiny" className="mr-4" aria-label="Paste">
       Paste
     </Button>
-    <Button size="tiny">Delete</Button>
+    <Button size="tiny" aria-label="Delete">
+      Delete
+    </Button>
   </div>
 );
 
@@ -21,6 +23,15 @@ export default {
       docPage: {
         title: 'Button',
         description: 'A pattern using buttons in a group.',
+        a11yProps: ` 
+        **aria-label:**
+        <br/> 
+        - Add \`aria-label='Copy'\` on button with *copy* icon to describe the action of button.
+        <br/>
+        - Add \`aria-label='Paste'\` on button with *paste* icon to describe the action of button.
+        <br/>
+        - Add \`aria-label='Delete'\` on button with *delete* icon to describe the action of button.
+        `,
       },
     },
   },

package/core/components/atoms/button/__stories__/LargeIconExpanded.story.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Button from '../Button';
 
 export const ExpandedButton = () => (
-  <Button appearance="primary" size="large" expanded={true}>
+  <Button appearance="primary" size="large" expanded={true} aria-label="Login">
     Login
   </Button>
 );
@@ -15,6 +15,9 @@ export default {
       docPage: {
         title: 'Button',
         description: 'Large expanded button.',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Login'\` to describe the action of button 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/LoadingPrimary.story.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Button from '../Button';
 
-export const LoaderInButton = () => <Button appearance="primary" loading={true} />;
+export const LoaderInButton = () => <Button appearance="primary" loading={true} aria-label="loading" />;
 
 export default {
   title: 'Components/Button/Loader In Button',
@@ -11,6 +11,9 @@ export default {
       docPage: {
         title: 'Button',
         description: 'Primary button in loading state.',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='loading'\` to describe the action of button. 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/Primary.story.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import Button from '../Button';
 
 export const PrimaryButton = () => (
-  <Button appearance="primary" size="regular">
-    Submit
+  <Button appearance="primary" size="regular" aria-label="Submit your response">
+    Submit your response
   </Button>
 );
 
@@ -15,6 +15,9 @@ export default {
       docPage: {
         title: 'Button',
         description: 'Primary button',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Submit your response'\` to describe the action of button 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/SplitButton.story.tsx

@@ -15,7 +15,9 @@ const options = [
 
 export const splitButton = () => (
   <div className="d-flex">
-    <Button className="mr-2">Request review</Button>
+    <Button className="mr-2" aria-label="Request review">
+      Request review
+    </Button>
     <div className="mb-10" style={{ width: '150px' }}>
       <Dropdown menu={true} icon="expand_more" options={options} />
     </div>
@@ -30,6 +32,9 @@ export default {
       docPage: {
         title: 'Button',
         description: 'Split button.',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Request review'\` to describe the action of button 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/Transparent.story.tsx

@@ -1,7 +1,11 @@
 import * as React from 'react';
 import Button from '../Button';
 
-export const transparentButton = () => <Button appearance="transparent">Re-evaluate</Button>;
+export const transparentButton = () => (
+  <Button appearance="transparent" aria-label="Re-evaluate">
+    Re-evaluate
+  </Button>
+);
 
 export default {
   title: 'Components/Button/Transparent Button',
@@ -11,6 +15,9 @@ export default {
       docPage: {
         title: 'Button',
         description: 'Transparent button.',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Re-evaluate'\` to describe the action of button 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/index.story.tsx

@@ -7,7 +7,7 @@ import Button from '../Button';
 export const all = () => {
   const type = select('type', ['button', 'submit', 'reset'], undefined);
 
-  const appearance = select('appearance', ['basic', 'primary', 'success', 'alert', 'transparent'], undefined);
+  const appearance = select('appearance', ['basic', 'primary', 'alert', 'transparent'], undefined);
 
   const size = select('size', ['tiny', 'regular', 'large'], undefined);
 
@@ -21,7 +21,7 @@ export const all = () => {
 
   const iconAlign = select('iconAlign', ['left', 'right'], undefined);
 
-  const children = text('children', 'Button');
+  const children = text('children', 'Open');
 
   return (
     <Button
@@ -36,6 +36,7 @@ export const all = () => {
       loading={loading}
       icon={icon}
       iconAlign={iconAlign}
+      aria-label="Open"
     >
       {children}
     </Button>
@@ -45,4 +46,13 @@ export const all = () => {
 export default {
   title: 'Components/Button/All',
   component: Button,
+  parameters: {
+    docs: {
+      docPage: {
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Open'\` to describe the action of button 
+         `,
+      },
+    },
+  },
 };

package/core/components/atoms/button/__stories__/variants/Appearance.story.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { text } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
-import Button, { Appearance } from '../../Button';
+import Button, { ButtonAppearance } from '../../Button';
 import Text from '@/components/atoms/text';
 
 // CSF format story
@@ -10,7 +10,7 @@ export const appearance = () => {
   const expanded = false;
   const loading = false;
 
-  const appearances: Appearance[] = ['basic', 'primary', 'success', 'alert', 'transparent'];
+  const appearances: ButtonAppearance[] = ['basic', 'primary', 'alert', 'transparent'];
 
   const children = text('children', 'Button');
 
@@ -28,6 +28,7 @@ export const appearance = () => {
               expanded={expanded}
               disabled={disabled}
               loading={loading}
+              aria-label={`${appear}`}
             >
               {children}
             </Button>
@@ -47,6 +48,9 @@ export default {
     docs: {
       docPage: {
         title: 'Button',
+        a11yProps: ` 
+        **aria-label:** name accordingly which describe the action of button 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/variants/Expanded.story.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { text } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
-import Button, { Appearance } from '../../Button';
+import Button, { ButtonAppearance } from '../../Button';
 import Text from '@/components/atoms/text';
 
 // CSF format story
@@ -10,7 +10,7 @@ export const expanded = () => {
   const ButtonExpanded = true;
   const loading = false;
 
-  const appearances: Appearance[] = ['basic', 'primary', 'success', 'alert'];
+  const appearances: ButtonAppearance[] = ['basic', 'primary', 'alert'];
 
   const children = text('children', 'Button');
 
@@ -28,6 +28,7 @@ export const expanded = () => {
               expanded={ButtonExpanded}
               disabled={disabled}
               loading={loading}
+              aria-label={`${appear}`}
             >
               {children}
             </Button>
@@ -47,6 +48,9 @@ export default {
     docs: {
       docPage: {
         title: 'Button',
+        a11yProps: ` 
+        **aria-label:** name accordingly which describe the action of button 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/variants/Size.story.tsx

@@ -29,6 +29,7 @@ export const size = () => {
                 expanded={expanded}
                 disabled={disabled}
                 loading={loading}
+                aria-label={`${ButtonSize}`}
               >
                 {children}
               </Button>
@@ -49,6 +50,9 @@ export default {
     docs: {
       docPage: {
         title: 'Button',
+        a11yProps: ` 
+        **aria-label:** name accordingly which describe the action of button 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/variants/icon/Icon.story.tsx

@@ -19,6 +19,7 @@ export const icon = () => {
             icon="add"
             size="tiny"
             largeIcon={false}
+            aria-label="Add document"
           />
           <Button
             onClick={action('button-clicked')}
@@ -28,6 +29,7 @@ export const icon = () => {
             icon="add"
             size="tiny"
             largeIcon={true}
+            aria-label="Add document"
           />
         </div>
       </div>
@@ -44,6 +46,7 @@ export const icon = () => {
             icon="print"
             size="regular"
             largeIcon={false}
+            aria-label="Print"
           />
           <Button
             onClick={action('button-clicked')}
@@ -53,6 +56,7 @@ export const icon = () => {
             icon="print"
             size="regular"
             largeIcon={true}
+            aria-label="Print"
           />
         </div>
       </div>
@@ -69,6 +73,7 @@ export const icon = () => {
             icon="more_horiz"
             size="large"
             largeIcon={false}
+            aria-label="Menu"
           />
           <Button
             onClick={action('button-clicked')}
@@ -78,6 +83,7 @@ export const icon = () => {
             icon="more_horiz"
             size="large"
             largeIcon={true}
+            aria-label="Menu"
           />
         </div>
       </div>
@@ -92,6 +98,15 @@ export default {
     docs: {
       docPage: {
         title: 'Button',
+        a11yProps: ` 
+        **aria-label:** 
+        <br/> 
+        - Add \`aria-label='Add document'\` on button with *add* icon to indicate its purpose.
+        <br/> 
+        - Add \`aria-label='Print'\` on button with *print* icon to indicate its purpose.
+        <br/> 
+        - Add \`aria-label='Menu'\` on button with *menu* icon to indicate its purpose.
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/variants/icon/IconLeft.story.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { text } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
-import Button, { Size } from '../../../Button';
+import Button, { ButtonSize } from '../../../Button';
 import Text from '@/components/atoms/text';
 
 // CSF format story
@@ -11,7 +11,7 @@ export const iconLeft = () => {
   const loading = false;
   const iconAlign = 'left';
 
-  const size: Size[] = ['tiny', 'regular', 'large'];
+  const size: ButtonSize[] = ['tiny', 'regular', 'large'];
 
   const icon = text('icon', 'refresh');
   const children = text('children', 'Button');
@@ -32,6 +32,7 @@ export const iconLeft = () => {
                 loading={loading}
                 icon={icon}
                 iconAlign={iconAlign}
+                aria-label="Refresh"
               >
                 {children}
               </Button>
@@ -52,6 +53,9 @@ export default {
     docs: {
       docPage: {
         title: 'Button',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Refresh'\` to describe the action of button 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/variants/icon/IconRight.story.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { text } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
-import Button, { Size } from '../../../Button';
+import Button, { ButtonSize } from '../../../Button';
 import Text from '@/components/atoms/text';
 
 // CSF format story
@@ -11,7 +11,7 @@ export const iconRight = () => {
   const loading = false;
   const iconAlign = 'right';
 
-  const size: Size[] = ['tiny', 'regular', 'large'];
+  const size: ButtonSize[] = ['tiny', 'regular', 'large'];
 
   const icon = text('icon', 'refresh');
   const children = text('children', 'Button');
@@ -32,6 +32,7 @@ export const iconRight = () => {
                 loading={loading}
                 icon={icon}
                 iconAlign={iconAlign}
+                aria-label="Refresh"
               >
                 {children}
               </Button>
@@ -52,6 +53,9 @@ export default {
     docs: {
       docPage: {
         title: 'Button',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Refresh'\` to describe the action of button 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/variants/state/Alert.story.tsx

@@ -10,7 +10,7 @@ export const alert = () => {
   const expanded = false;
   const loading = false;
 
-  const children = text('children', 'Button');
+  const children = text('children', 'Delete');
 
   const style = {
     justifyContent: 'space-between',
@@ -28,6 +28,7 @@ export const alert = () => {
           expanded={expanded}
           disabled={disabled}
           loading={loading}
+          aria-label="Delete"
         >
           {children}
         </Button>
@@ -44,6 +45,7 @@ export const alert = () => {
           expanded={expanded}
           disabled={true}
           loading={loading}
+          aria-label="Delete"
         >
           {children}
         </Button>
@@ -60,28 +62,13 @@ export const alert = () => {
           expanded={expanded}
           disabled={disabled}
           loading={true}
+          aria-label="Loading"
         >
           {''}
         </Button>
         <br />
         <Text weight="strong">Loading</Text>
       </div>
-      <div className="mr-9">
-        <Button
-          onClick={action('button-clicked')}
-          onMouseEnter={action('mouse-enter')}
-          onMouseLeave={action('mouse-leave')}
-          appearance={'alert'}
-          size={'regular'}
-          expanded={expanded}
-          disabled={disabled}
-          loading={true}
-        >
-          {children}
-        </Button>
-        <br />
-        <Text weight="strong">Loading with Text</Text>
-      </div>
     </div>
   );
 };
@@ -93,6 +80,9 @@ export default {
     docs: {
       docPage: {
         title: 'Button',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Delete'\` to describe the action of button 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/variants/state/Basic.story.tsx

@@ -10,7 +10,7 @@ export const basic = () => {
   const expanded = false;
   const loading = false;
 
-  const children = text('children', 'Button');
+  const children = text('children', 'Open');
 
   const style = {
     justifyContent: 'space-between',
@@ -28,6 +28,7 @@ export const basic = () => {
           expanded={expanded}
           disabled={disabled}
           loading={loading}
+          aria-label="Open"
         >
           {children}
         </Button>
@@ -44,6 +45,7 @@ export const basic = () => {
           expanded={expanded}
           disabled={true}
           loading={loading}
+          aria-label="Open"
         >
           {children}
         </Button>
@@ -60,28 +62,13 @@ export const basic = () => {
           expanded={expanded}
           disabled={disabled}
           loading={true}
+          aria-label="Loading"
         >
           {''}
         </Button>
         <br />
         <Text weight="strong">Loading</Text>
       </div>
-      <div className="mr-9">
-        <Button
-          onClick={action('button-clicked')}
-          onMouseEnter={action('mouse-enter')}
-          onMouseLeave={action('mouse-leave')}
-          appearance={'basic'}
-          size={'regular'}
-          expanded={expanded}
-          disabled={disabled}
-          loading={true}
-        >
-          {children}
-        </Button>
-        <br />
-        <Text weight="strong">Loading with Text</Text>
-      </div>
       <div className="mr-9">
         <Button
           onClick={action('button-clicked')}
@@ -90,6 +77,7 @@ export const basic = () => {
           appearance={'basic'}
           size={'regular'}
           selected={true}
+          aria-label="Selected"
         >
           {children}
         </Button>
@@ -105,6 +93,7 @@ export const basic = () => {
           size={'regular'}
           selected={true}
           icon="events"
+          aria-label="Selected"
         />
         <br />
         <Text weight="strong">Selected Icon</Text>
@@ -120,6 +109,9 @@ export default {
     docs: {
       docPage: {
         title: 'Button',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Open'\` to describe the action of button 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/variants/state/Primary.story.tsx

@@ -10,7 +10,7 @@ export const primary = () => {
   const expanded = false;
   const loading = false;
 
-  const children = text('children', 'Button');
+  const children = text('children', 'Login');
 
   const style = {
     justifyContent: 'space-between',
@@ -27,6 +27,7 @@ export const primary = () => {
           expanded={expanded}
           disabled={disabled}
           loading={loading}
+          aria-label="Login"
         >
           {children}
         </Button>
@@ -43,6 +44,7 @@ export const primary = () => {
           expanded={expanded}
           disabled={true}
           loading={loading}
+          aria-label="Login"
         >
           {children}
         </Button>
@@ -59,28 +61,13 @@ export const primary = () => {
           expanded={expanded}
           disabled={disabled}
           loading={true}
+          aria-label="Loading"
         >
           {''}
         </Button>
         <br />
         <Text weight="strong">Loading</Text>
       </div>
-      <div className="mr-9">
-        <Button
-          onClick={action('button-clicked')}
-          onMouseEnter={action('mouse-enter')}
-          onMouseLeave={action('mouse-leave')}
-          appearance={'primary'}
-          size={'regular'}
-          expanded={expanded}
-          disabled={disabled}
-          loading={true}
-        >
-          {children}
-        </Button>
-        <br />
-        <Text weight="strong">Loading with Text</Text>
-      </div>
     </div>
   );
 };
@@ -92,6 +79,9 @@ export default {
     docs: {
       docPage: {
         title: 'Button',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Login'\` to describe the action of button 
+         `,
       },
     },
   },