@innovaccer/design-system 3.0.0-15 → 3.0.0-16

package/core/components/atoms/_chip/__tests__/__snapshots__/_chip.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`Chip component
       data-test="DesignSystem-GenericChip--GenericChipWrapper"
     >
       <i
-        class="material-icons material-icons-round Icon Icon--default Chip-icon Chip-icon--left"
+        class="material-icons material-icons-round Icon Icon--inverse Chip-icon Chip-icon--left"
         data-test="DesignSystem-GenericChip--Icon"
         role="button"
         style="font-size: 16px; width: 16px;"
@@ -38,7 +38,7 @@ exports[`Chip component
       data-test="DesignSystem-GenericChip--GenericChipWrapper"
     >
       <i
-        class="material-icons material-icons-round Icon Icon--info Chip-icon Chip-icon--left"
+        class="material-icons material-icons-round Icon Icon--primary Chip-icon Chip-icon--left"
         data-test="DesignSystem-GenericChip--Icon"
         role="button"
         style="font-size: 16px; width: 16px;"
@@ -94,7 +94,7 @@ exports[`Chip component
       data-test="DesignSystem-GenericChip--GenericChipWrapper"
     >
       <i
-        class="material-icons material-icons-round Icon Icon--info Chip-icon Chip-icon--left"
+        class="material-icons material-icons-round Icon Icon--primaryLighter Chip-icon Chip-icon--left"
         data-test="DesignSystem-GenericChip--Icon"
         role="button"
         style="font-size: 16px; width: 16px;"
@@ -122,7 +122,7 @@ exports[`Chip component
       data-test="DesignSystem-GenericChip--GenericChipWrapper"
     >
       <i
-        class="material-icons material-icons-round Icon Chip-icon Chip-icon--left"
+        class="material-icons material-icons-round Icon Icon--inverse Chip-icon Chip-icon--left"
         data-test="DesignSystem-GenericChip--Icon"
         role="button"
         style="font-size: 16px; width: 16px;"
@@ -136,7 +136,7 @@ exports[`Chip component
         ChipLabel
       </span>
       <i
-        class="material-icons material-icons-round Icon Chip-icon Chip-icon--right cursor-pointer"
+        class="material-icons material-icons-round Icon Icon--subtle Chip-icon Chip-icon--right cursor-pointer"
         data-test="DesignSystem-GenericChip--clearButton"
         role="button"
         style="font-size: 16px; width: 16px;"
@@ -159,7 +159,7 @@ exports[`Chip component
       data-test="DesignSystem-GenericChip--GenericChipWrapper"
     >
       <i
-        class="material-icons material-icons-round Icon Icon--info Chip-icon Chip-icon--left"
+        class="material-icons material-icons-round Icon Icon--primary Chip-icon Chip-icon--left"
         data-test="DesignSystem-GenericChip--Icon"
         role="button"
         style="font-size: 16px; width: 16px;"
@@ -173,7 +173,7 @@ exports[`Chip component
         ChipLabel
       </span>
       <i
-        class="material-icons material-icons-round Icon Icon--info Chip-icon Chip-icon--right cursor-pointer"
+        class="material-icons material-icons-round Icon Icon--primary Chip-icon Chip-icon--right cursor-pointer"
         data-test="DesignSystem-GenericChip--clearButton"
         role="button"
         style="font-size: 16px; width: 16px;"
@@ -233,7 +233,7 @@ exports[`Chip component
       data-test="DesignSystem-GenericChip--GenericChipWrapper"
     >
       <i
-        class="material-icons material-icons-round Icon Icon--info Chip-icon Chip-icon--left"
+        class="material-icons material-icons-round Icon Icon--primaryLighter Chip-icon Chip-icon--left"
         data-test="DesignSystem-GenericChip--Icon"
         role="button"
         style="font-size: 16px; width: 16px;"
@@ -247,7 +247,7 @@ exports[`Chip component
         ChipLabel
       </span>
       <i
-        class="material-icons material-icons-round Icon Icon--info Chip-icon Chip-icon--right"
+        class="material-icons material-icons-round Icon Icon--primaryLighter Chip-icon Chip-icon--right"
         data-test="DesignSystem-GenericChip--clearButton"
         role="button"
         style="font-size: 16px; width: 16px;"

package/core/components/atoms/_chip/index.tsx

@@ -38,12 +38,14 @@ export const GenericChip = (props: GenericChipProps) => {
     if (onClick) onClick();
   };
 
-  const iconAppearance = classNames({
-    ['disabled']: disabled && !selected,
-    ['info']: selected,
-    ['subtle']: !disabled && !selected && !clearButton && !icon,
-    ['default']: !disabled && !selected && !clearButton && icon,
-  }) as IconProps['appearance'];
+  const iconAppearance = (align: string) =>
+    classNames({
+      ['disabled']: disabled && !selected,
+      ['primary']: !disabled && selected,
+      ['primary_lighter']: disabled && selected,
+      ['subtle']: !disabled && !selected && align === 'right',
+      ['inverse']: !disabled && !selected && align === 'left',
+    }) as IconProps['appearance'];
 
   const textAppearance = classNames({
     ['disabled']: disabled && !selected,
@@ -64,7 +66,7 @@ export const GenericChip = (props: GenericChipProps) => {
         <Icon
           data-test="DesignSystem-GenericChip--Icon"
           name={icon}
-          appearance={iconAppearance}
+          appearance={iconAppearance('left')}
           className={iconClass('left')}
         />
       )}
@@ -75,7 +77,7 @@ export const GenericChip = (props: GenericChipProps) => {
         <Icon
           data-test="DesignSystem-GenericChip--clearButton"
           name="clear"
-          appearance={iconAppearance}
+          appearance={iconAppearance('right')}
           className={iconClass('right')}
           onClick={onCloseHandler}
         />

package/core/components/atoms/avatar/__stories__/index.story.jsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import Avatar from '../Avatar';
+
+// CSF format story
+export const all = () => {
+  const appearance = 'primary';
+  const size = 'tiny';
+  const withTooltip = true;
+  const children = '';
+  const firstName = 'John';
+  const lastName = 'Doe';
+
+  const options = {
+    appearance,
+    withTooltip,
+    size,
+    firstName,
+    lastName,
+  };
+
+  return <Avatar {...options}>{children}</Avatar>;
+};
+
+export default {
+  title: 'Components/Avatar/All',
+  component: Avatar,
+};

package/core/components/atoms/avatar/__stories__/variants/{Appearance.story.tsx → Appearance.story.jsx}

@@ -1,13 +1,12 @@
 import * as React from 'react';
 import Avatar from '../../Avatar';
 import Text from '@/components/atoms/text';
-import { AccentAppearance } from '@/common.type';
 
 // CSF format story
 export const appearance = () => {
   const weight = 'strong';
 
-  const appearances: AccentAppearance[] = [
+  const appearances = [
     'primary',
     'secondary',
     'alert',

package/core/components/atoms/avatarGroup/__stories__/{index.story.tsx → index.story.jsx}

@@ -1,21 +1,12 @@
 import * as React from 'react';
 import { AvatarGroup } from '../AvatarGroup';
-import { number, select, boolean } from '@storybook/addon-knobs';
 import { list } from './AvatarList';
 
 export const all = () => {
-  const position = select(
-    'position',
-    ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'],
-    'bottom-end'
-  );
-
-  const on = select('on', ['click', 'hover'], 'hover');
-
-  const dark = boolean('dark', true);
-
-  const max = number('max', 2);
-
+  const position = 'bottom-end';
+  const on = 'hover';
+  const dark = true;
+  const max = 2;
   const options = {
     max,
     popoverOptions: {

package/core/components/atoms/avatarGroup/__stories__/variants/{CustomPopper.story.tsx → CustomPopper.story.jsx}

@@ -3,8 +3,8 @@ import { AvatarGroup, Avatar, Text } from '@/index';
 import { list } from '../AvatarList';
 
 export const customPopper = () => {
-  const popperRenderer = (names: any) => {
-    const AvatarList = names.map((avatar: any, index: number) => {
+  const popperRenderer = (names) => {
+    const AvatarList = names.map((avatar, index) => {
       const { firstName, lastName, appearance } = avatar;
 
       return (

package/core/components/atoms/backdrop/__stories__/{index.story.tsx → index.story.jsx}

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { boolean } from '@storybook/addon-knobs';
 import Backdrop from '../Backdrop';
 import { Paragraph } from '@/index';
 
 export const all = () => {
-  const open = boolean('open', true);
+  const open = true;
 
   const options = {
     open,

package/core/components/atoms/badge/_stories_/SolidAlert.story.jsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import Badge from '../Badge';
+
+export const solidAlert = () => (
+  <Badge appearance="alert" subtle={false}>
+    {'Failed'}
+  </Badge>
+);
+
+export default {
+  title: 'Components/Badge/Solid Alert',
+  component: Badge,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Badge',
+      },
+    },
+  },
+};

package/core/components/atoms/badge/_stories_/SolidSecondary.story.jsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import Badge from '../Badge';
+
+export const solidSecondary = () => (
+  <Badge appearance="secondary" subtle={false}>
+    {'Closed'}
+  </Badge>
+);
+
+export default {
+  title: 'Components/Badge',
+  component: Badge,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Badge',
+      },
+    },
+  },
+};

package/core/components/atoms/badge/_stories_/SolidWarning.story.jsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import Badge from '../Badge';
+
+export const solidWarning = () => (
+  <Badge appearance="warning" subtle={false}>
+    {'Disapproved'}
+  </Badge>
+);
+
+export default {
+  title: 'Components/Badge/Solid Warning',
+  component: Badge,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Badge',
+      },
+    },
+  },
+};

package/core/components/atoms/badge/_stories_/SubtleAlert.story.jsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import Badge from '../Badge';
+
+export const subtleAlert = () => (
+  <Badge appearance="alert" subtle={true}>
+    {'1.41'}
+  </Badge>
+);
+
+export default {
+  title: 'Components/Badge/Subtle Alert',
+  component: Badge,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Badge',
+      },
+    },
+  },
+};

package/core/components/atoms/badge/_stories_/SubtleSecondary.story.jsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import Badge from '../Badge';
+
+export const subtleSecondary = () => (
+  <Badge appearance="secondary" subtle={true}>
+    {'Closed'}
+  </Badge>
+);
+
+export default {
+  title: 'Components/Badge/Subtle Secondary',
+  component: Badge,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Badge',
+      },
+    },
+  },
+};

package/core/components/atoms/badge/_stories_/SubtleWarning.story.jsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import Badge from '../Badge';
+
+export const subtleWarning = () => (
+  <Badge appearance="warning" subtle={true}>
+    {'Pending'}
+  </Badge>
+);
+
+export default {
+  title: 'Components/Badge/Subtle Warning',
+  component: Badge,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Badge',
+      },
+    },
+  },
+};

package/core/components/atoms/badge/_stories_/Success.story.jsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import Badge from '../Badge';
+
+export const success = () => (
+  <Badge appearance="success" subtle={false}>
+    {'Badge'}
+  </Badge>
+);
+
+export default {
+  title: 'Components/Badge/Success',
+  component: Badge,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Badge',
+      },
+    },
+  },
+};

package/core/components/atoms/badge/_stories_/index.story.jsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import Badge from '../Badge';
+
+// CSF format story
+export const all = () => {
+  const appearance = 'primary';
+  const subtle = false;
+  const children = 'Badge';
+
+  return (
+    <Badge appearance={appearance} subtle={subtle}>
+      {children}
+    </Badge>
+  );
+};
+
+export default {
+  title: 'Components/Badge/All',
+  component: Badge,
+};

package/core/components/atoms/badge/_stories_/variants/Appearance.story.jsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import Badge from '../../Badge';
+import Text from '@/components/atoms/text';
+
+// CSF format story
+export const appearance = () => {
+  const subtle = false;
+  const weight = 'strong';
+  const children = 'Badge';
+  const appearances = [
+    'primary',
+    'secondary',
+    'alert',
+    'warning',
+    'success',
+    'accent1',
+    'accent2',
+    'accent3',
+    'accent4',
+  ];
+
+  return (
+    <div className="d-flex">
+      {appearances.map((appear, ind) => {
+        return (
+          <div key={ind} className="mr-9">
+            <Badge appearance={appear} subtle={subtle}>
+              {children}
+            </Badge>
+            <br />
+            <Text weight={weight}>{appear.charAt(0).toUpperCase() + appear.slice(1)}</Text>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default {
+  title: 'Components/Badge/Variants/Appearance',
+  component: Badge,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Badge',
+      },
+    },
+  },
+};

package/core/components/atoms/badge/_stories_/variants/Subtle.story.jsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import Badge from '../../Badge';
+import Text from '@/components/atoms/text';
+
+// CSF format story
+export const subtle = () => {
+  const ButtonSubtle = true;
+  const weight = 'strong';
+  const children = 'Badge';
+  const appearances = [
+    'primary',
+    'secondary',
+    'alert',
+    'warning',
+    'success',
+    'accent1',
+    'accent2',
+    'accent3',
+    'accent4',
+  ];
+
+  return (
+    <div className="d-flex">
+      {appearances.map((appear, ind) => {
+        return (
+          <div key={ind} className="mr-9">
+            <Badge appearance={appear} subtle={ButtonSubtle}>
+              {children}
+            </Badge>
+            <br />
+            <Text weight={weight}>{appear.charAt(0).toUpperCase() + appear.slice(1)}</Text>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default {
+  title: 'Components/Badge/Variants/Subtle',
+  component: Badge,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Badge',
+      },
+    },
+  },
+};

package/core/components/atoms/breadcrumbs/__stories__/variants/{lessThan4Levels.story.tsx → lessThan4Levels.story.jsx}

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Breadcrumbs } from '@/index';
-import { action } from '@storybook/addon-actions';
+import { action } from '@/utils/action';
 
 // CSF format story
 export const lessThan4Levels = () => {

package/core/components/atoms/breadcrumbs/__stories__/variants/{moreThan4Levels.story.tsx → moreThan4Levels.story.jsx}

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Breadcrumbs } from '@/index';
-import { action } from '@storybook/addon-actions';
+import { action } from '@/utils/action';
 
 // CSF format story
 export const moreThan4Levels = () => {

package/core/components/atoms/button/Button.tsx

@@ -97,6 +97,7 @@ const sizeMapping: Record<ButtonSize, number> = {
   large: 20,
 };
 
+// eslint-disable-next-line react/display-name
 const ButtonElement = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const {
     size = 'regular',
@@ -179,8 +180,6 @@ const ButtonElement = React.forwardRef<HTMLButtonElement, ButtonProps>((props, r
   );
 });
 
-ButtonElement.displayName = 'ButtonElement';
-
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const { icon, tooltip, children } = props;
 

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

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import Button from '@/components/atoms/button';
+import Dropdown from '@/components/atoms/dropdown';
+
+export const splitButton = () => {
+
+  const options = [
+    {
+      label: 'Download All',
+      value: 'Download All',
+    },
+    {
+      label: 'Download Selected',
+      value: 'Download Selected',
+    },
+  ];
+
+  return (
+    <div className="d-flex">
+      <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>
+    </div>
+  )
+};
+
+export default {
+  title: 'Components/Button/Split Button',
+  component: Button,
+  parameters: {
+    docs: {
+      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__/{index.story.tsx → index.story.jsx}

@@ -1,27 +1,26 @@
 import * as React from 'react';
-import { select, text, boolean } from '@storybook/addon-knobs';
-import { action } from '@storybook/addon-actions';
+import { action } from '@/utils/action';
 import Button from '../Button';
 
 // CSF format story
 export const all = () => {
-  const type = select('type', ['button', 'submit', 'reset'], undefined);
+  const type = 'button';
 
-  const appearance = select('appearance', ['basic', 'primary', 'alert', 'transparent'], undefined);
+  const appearance = 'basic';
 
-  const size = select('size', ['tiny', 'regular', 'large'], undefined);
+  const size = 'large';
 
-  const disabled = boolean('disabled', false);
+  const disabled = false;
 
-  const expanded = boolean('expanded', false);
+  const expanded = false;
 
-  const loading = boolean('loading', false);
+  const loading = false;
 
-  const icon = text('icon', '');
+  const icon = '';
 
-  const iconAlign = select('iconAlign', ['left', 'right'], undefined);
+  const iconAlign = 'right';
 
-  const children = text('children', 'Open');
+  const children = 'Open';
 
   return (
     <Button