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

package/.storybook/preview-head.html

@@ -1,8 +1,10 @@
 <link
   href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&display=swap"
   rel="stylesheet">
+<link href="https://unpkg.com/@innovaccer/design-system@2.12.0-0/css/dist/index.css" rel="stylesheet" />
 
 <script src="https://cdn.jsdelivr.net/npm/css-vars-ponyfill@2"></script>
+
 <script>
   cssVars({
     onlyLegacy: true

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.jsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import Avatar from '../../Avatar';
+import Text from '@/components/atoms/text';
+
+// CSF format story
+export const appearance = () => {
+  const weight = 'strong';
+
+  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">
+            <Text weight={weight}>{appear.charAt(0).toUpperCase() + appear.slice(1)}</Text>
+            <br />
+            <br />
+            <Avatar firstName="John" lastName="Doe" appearance={appear} />
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default {
+  title: 'Components/Avatar/Variants/Appearance',
+  component: Avatar,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Avatar',
+      },
+    },
+  },
+};

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

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { AvatarGroup } from '../AvatarGroup';
+import { list } from './AvatarList';
+
+export const all = () => {
+  const position = 'bottom-end';
+  const on = 'hover';
+  const dark = true;
+  const max = 2;
+  const options = {
+    max,
+    popoverOptions: {
+      on,
+      position,
+      dark,
+    },
+    list: list.slice(0, 4),
+  };
+
+  return <AvatarGroup {...options} />;
+};
+
+const customCode = `() => {
+  const list = [
+    {
+      firstName: 'John',
+      lastName: 'Doe',
+    },
+    {
+      firstName: 'Steven',
+      lastName: 'Packton',
+    },
+    {
+      firstName: 'Nancy',
+      lastName: 'Wheeler'
+    },
+    {
+      firstName: 'Monica',
+      lastName: 'Geller'
+    },
+    {
+      firstName: 'Arya',
+      lastName: 'Stark',
+    },
+    {
+      firstName: 'Rachel',
+      lastName: 'Green',
+    },
+    {
+      firstName: 'Walter',
+      lastName: 'Wheeler'
+    },
+  ];
+  return <AvatarGroup list={list} popoverOptions={{ dark: true, on: 'hover', position: 'bottom'}}/>;
+}`;
+
+export default {
+  title: 'Components/AvatarGroup/All',
+  component: AvatarGroup,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+      },
+    },
+  },
+};

package/core/components/atoms/avatarGroup/__stories__/variants/CustomPopper.story.jsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { AvatarGroup, Avatar, Text } from '@/index';
+import { list } from '../AvatarList';
+
+export const customPopper = () => {
+  const popperRenderer = (names) => {
+    const AvatarList = names.map((avatar, index) => {
+      const { firstName, lastName, appearance } = avatar;
+
+      return (
+        <div className="d-flex align-items-center mr-4 mb-4" key={index}>
+          <Avatar
+            firstName={firstName}
+            lastName={lastName}
+            appearance={appearance}
+            className="mr-4"
+            withTooltip={false}
+          />
+          <Text>{`${firstName} ${lastName}`}</Text>
+        </div>
+      );
+    });
+
+    return (
+      <div className="overflow-auto py-4 px-6" style={{ maxHeight: '150px' }}>
+        {AvatarList}
+      </div>
+    );
+  };
+
+  return <AvatarGroup list={list} popoverOptions={{ popperRenderer, dark: false, on: 'click' }} />;
+};
+
+const customCode = `() => {
+  const list = [
+    {
+      firstName: 'John',
+      lastName: 'Doe',
+    },
+    {
+      firstName: 'Steven',
+      lastName: 'Packton',
+    },
+    {
+      firstName: 'Nancy',
+      lastName: 'Wheeler'
+    },
+    {
+      firstName: 'Monica',
+      lastName: 'Geller'
+    },
+    {
+      firstName: 'Arya',
+      lastName: 'Stark',
+    },
+    {
+      firstName: 'Rachel',
+      lastName: 'Green',
+    },
+    {
+      firstName: 'Walter',
+      lastName: 'Wheeler'
+    },
+  ];
+
+  const popperRenderer = (list) => {
+    const AvatarList = list.map((avatar, index) => {
+      const { firstName, lastName, appearance } = avatar;
+
+      return (
+        <div className="d-flex align-items-center mr-4 mb-4" key={index}>
+          <Avatar
+            firstName={firstName}
+            lastName={lastName}
+            appearance={appearance}
+            className="mr-4"
+            withTooltip={false}
+          />
+          <Text>{\`\${firstName} \${lastName}\`}</Text>
+        </div>
+      )
+    });
+
+    return (
+      <div className="overflow-auto py-4 px-6" style={{ maxHeight: '150px' }}>
+        {AvatarList}
+      </div>
+    )
+  };
+
+  return (
+    <AvatarGroup
+      list={list}
+      popoverOptions={{ dark: false, on: 'click', popperRenderer }}
+    />
+  );
+}`;
+
+export default {
+  title: 'Components/AvatarGroup/Variants/Custom Popper',
+  component: AvatarGroup,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+      },
+    },
+  },
+};

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

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import Backdrop from '../Backdrop';
+import { Paragraph } from '@/index';
+
+export const all = () => {
+  const open = true;
+
+  const options = {
+    open,
+  };
+
+  return (
+    <div>
+      <Paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua.
+        <br />
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        <br />
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br />
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        <br />
+      </Paragraph>
+      <Backdrop {...options} />
+    </div>
+  );
+};
+
+const customCode = `() => (
+  <div>
+    <Paragraph>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br />
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br />
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br />
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br />
+    </Paragraph>
+    <Backdrop open={false} />
+  </div>
+)`;
+
+export default {
+  title: 'Components/Backdrop/All',
+  component: Backdrop,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        noHtml: true,
+      },
+    },
+  },
+};

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',
+      },
+    },
+  },
+};