@innovaccer/design-system 2.10.0 → 2.11.0-2

package/. npmignore

@@ -1,2 +1,3 @@
 node_modules
-.npmrc
+.npmrc
+docs/

package/.github/workflows/develop.yml

@@ -0,0 +1,66 @@
+name: "Dev deployments"
+on:
+  push:
+    branches:
+      - develop
+jobs:
+  storybook_deploy:
+    name: Deploy storybook
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          ref: develop
+            
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '14.x'
+      
+      - name: npm install
+        run: npm ci
+      
+      - name: build css
+        run: npm run build-css
+      
+      - name: deploy storybook
+        run: npm run deploy-storybook -- --bucket-path=webui-mds-sb-dev --aws-profile=NONE --ci
+        env:
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.DOCS_KEY }}
+          AWS_ACCESS_KEY_ID: ${{ secrets.DOCS_KEY_ID }}
+          AWS_REGION: ${{ secrets.DOCS_REGION }}
+
+  site_deploy:
+    name: Deploy docs site
+    needs: storybook_deploy
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./docs
+    env:
+      DOCS_BUCKET: webui-mds-docs-dev
+    steps:
+      - uses: actions/checkout@v2
+            
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '14.x'
+      
+      - name: npm install
+        run: npm i
+            
+      - name: extract stories
+        run: npm run extract
+        env:
+          STORYBOOK_HOST: "https://mds-dev.innovaccer.com/iframe.html?id=components-avatargroup-all--all&args=&viewMode=story"
+            
+      - name: build
+        run: npm run build
+        env:
+          DOCS_BUCKET: webui-mds-docs-dev
+      
+      - name: deploy
+        run: npm run deploy
+        env:
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.DOCS_KEY }}
+          AWS_ACCESS_KEY_ID: ${{ secrets.DOCS_KEY_ID }}
+          AWS_REGION: ${{ secrets.DOCS_REGION }}

package/.github/workflows/docs_pull_request.yml

@@ -1,4 +1,4 @@
-name: Pull request
+name: Docs pull request
 
 on: pull_request
 
@@ -6,6 +6,9 @@ jobs:
   lint_test_build:
     name: lint, test and build
     runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./docs
     steps:
       - uses: actions/checkout@v1
 
@@ -13,8 +16,8 @@ jobs:
         with:
           node-version: '14.x'
 
-      - name: yarn install
-        run: cd docs && yarn install
+      - name: npm install
+        run: npm install
 
       - name: build
-        run: cd docs && yarn build
+        run: npm run build

package/.github/workflows/main.yml

@@ -1,4 +1,4 @@
-name: "Test build release"
+name: 'Release new version'
 on:
   push:
     branches:
@@ -6,29 +6,29 @@ on:
 jobs:
   release:
     # uncomment next line as soon as visual tesing starts working
-    # needs: visual_test 
+    # needs: visual_test
     name: Release tag
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      
+
       - name: Check for release commit
         id: 'is_release_commit'
         uses: /innovaccer/design-system/actions/check-release-commit@master
-      
+
       - uses: actions/setup-node@v1
         if: steps.is_release_commit.outputs.result == 1
         with:
           node-version: '14.x'
-      
+
       - name: npm install
         if: steps.is_release_commit.outputs.result == 1
         run: npm ci
-        
+
       - name: setup git
         if: steps.is_release_commit.outputs.result == 1
         run: git checkout -b preparing-module-for-npm-publish && git config --global user.email "release-bot@innovaccer.com" && git config --global user.name "release-bot"
-      
+
       - name: bump module version
         if: steps.is_release_commit.outputs.result == 1
         run: RELEASE_COMMIT=true npm version --no-commit-hooks $(git log -1 --pretty=format:%s) -m "Released %s"
@@ -46,7 +46,7 @@ jobs:
       - name: remove .npmrc
         if: steps.is_release_commit.outputs.result == 1
         run: rm -rf .npmrc
-        
+
       - name: push module tags to github
         if: steps.is_release_commit.outputs.result == 1
         run: git push https://${{ secrets.GH_TOKEN }}@github.com/$GITHUB_REPOSITORY.git $(git log -2 --pretty=format:%B | tail -n1)
@@ -60,16 +60,64 @@ jobs:
 
       - name: push version to github
         if: steps.is_release_commit.outputs.result == 1
-        run: git push https://${{ secrets.GH_TOKEN }}@github.com/$GITHUB_REPOSITORY.git HEAD:master 
-    
+        run: git push https://${{ secrets.GH_TOKEN }}@github.com/$GITHUB_REPOSITORY.git HEAD:master
+
       - name: deploy storybook
-        env:
-          GH_TOKEN: ${{ secrets.GH_TOKEN }}
         if: steps.is_release_commit.outputs.result == 1
-        run: npm run deploy-storybook -- --ci
-      
+        run: npm run deploy-storybook -- --bucket-path=webui-mds-sb-prod --aws-profile=NONE --ci
+        env:
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.DOCS_KEY }}
+          AWS_ACCESS_KEY_ID: ${{ secrets.DOCS_KEY_ID }}
+          AWS_REGION: ${{ secrets.DOCS_REGION }}
+
       - name: notify release
         if: steps.is_release_commit.outputs.result == 1
         uses: /innovaccer/design-system/actions/notify-release@master
         env:
           GCHAT_PATH: ${{ secrets.GCHAT_PATH }}
+
+  site_deploy:
+    name: Deploy docs site
+    needs: release
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./docs
+    env:
+      DOCS_BUCKET: webui-mds-docs-prod
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Check for release commit
+        id: 'is_release_commit'
+        uses: /innovaccer/design-system/actions/check-release-commit@master
+
+      - uses: actions/setup-node@v1
+        if: steps.is_release_commit.outputs.result == 1
+        with:
+          node-version: '14.x'
+
+      - name: npm install
+        if: steps.is_release_commit.outputs.result == 1
+        run: npm i
+
+      - name: extract stories
+        if: steps.is_release_commit.outputs.result == 1
+        run: npm run extract
+        env:
+          STORYBOOK_HOST: 'https://mds.innovaccer.com/iframe.html?id=components-avatargroup-all--all&args=&viewMode=story'
+
+      - name: build
+        if: steps.is_release_commit.outputs.result == 1
+        run: npm run build
+        env:
+          DOCS_BUCKET: webui-mds-docs-prod
+
+      - name: deploy
+        if: steps.is_release_commit.outputs.result == 1
+        run: npm run deploy
+        env:
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.DOCS_KEY }}
+          AWS_ACCESS_KEY_ID: ${{ secrets.DOCS_KEY_ID }}
+          AWS_REGION: ${{ secrets.DOCS_REGION }}
+          DOCS_BUCKET: webui-mds-docs-prod

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/chipGroup/__tests__/__snapshots__/chipGroup.test.tsx.snap

@@ -17,7 +17,7 @@ exports[`ChipGroup component
           data-test="DesignSystem-ChipGroup--Chip"
         >
           <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;"
@@ -40,7 +40,7 @@ exports[`ChipGroup component
           data-test="DesignSystem-ChipGroup--Chip"
         >
           <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;"
@@ -54,7 +54,7 @@ exports[`ChipGroup component
             Input
           </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;"
@@ -72,7 +72,7 @@ exports[`ChipGroup component
           data-test="DesignSystem-ChipGroup--Chip"
         >
           <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;"
@@ -86,7 +86,7 @@ exports[`ChipGroup component
             Selection
           </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;"
@@ -104,7 +104,7 @@ exports[`ChipGroup component
           data-test="DesignSystem-ChipGroup--Chip"
         >
           <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;"
@@ -118,7 +118,7 @@ exports[`ChipGroup component
             Selection
           </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;"

package/core/components/atoms/collapsible/Collapsible.tsx

@@ -28,10 +28,14 @@ export interface CollapsibleProps extends BaseProps {
    * Components to render inside `Collapsible`
    */
   children: React.ReactChild;
+  /**
+   * Determines whether to show trigger at bottom of `Collapsible`
+   */
+  withTrigger: boolean;
 }
 
 export const Collapsible = (props: CollapsibleProps) => {
-  const { expanded, hoverable, expandedWidth, height, children, className, onToggle } = props;
+  const { expanded, hoverable, expandedWidth, height, children, className, onToggle, withTrigger } = props;
 
   const [isClicked, setIsClicked] = React.useState(true);
   const [seperator, setSeperator] = React.useState(false);
@@ -96,15 +100,17 @@ export const Collapsible = (props: CollapsibleProps) => {
         >
           {children}
         </div>
-        <div data-test="DesignSystem-Collapsible--Footer" className={FooterClass}>
-          <Icon
-            name={expanded ? 'keyboard_arrow_left' : 'keyboard_arrow_right'}
-            data-test="DesignSystem-Collapsible--FooterIcon"
-            className="px-5 py-4 my-2 cursor-pointer"
-            onClick={onToggleHandler(!expanded, 'click')}
-            size={16}
-          />
-        </div>
+        {withTrigger && (
+          <div data-test="DesignSystem-Collapsible--Footer" className={FooterClass}>
+            <Icon
+              name={expanded ? 'keyboard_arrow_left' : 'keyboard_arrow_right'}
+              data-test="DesignSystem-Collapsible--FooterIcon"
+              className="px-5 py-4 my-2 cursor-pointer"
+              onClick={onToggleHandler(!expanded, 'click')}
+              size={16}
+            />
+          </div>
+        )}
       </div>
     </div>
   );
@@ -117,6 +123,7 @@ Collapsible.defaultProps = {
   hoverable: true,
   height: '100%',
   expandedWidth: 'var(--spacing-9)',
+  withTrigger: true,
 };
 
 export default Collapsible;

package/core/components/atoms/collapsible/__stories__/CustomTrigger.story.jsx

@@ -0,0 +1,123 @@
+import * as React from 'react';
+import Collapsible from '@/components/atoms/collapsible';
+import { Icon, VerticalNav, Heading } from '@/index';
+
+// CSF format story
+export const CustomTrigger = () => {
+  const [expanded, setExpanded] = React.useState(false);
+  const [active, setActive] = React.useState({
+    name: 'To-do\'s.Due',
+  });
+
+  const data = [
+    {
+      name: 'To-do\'s',
+      label: 'To-do\'s',
+      icon: 'assignment_ind',
+      count: 31,
+      subMenu: [
+        {
+          name: 'To-do\'s.Due',
+          label: 'Due',
+          count: 31
+        },
+        {
+          name: 'To-do\'s.Completed',
+          label: 'Completed',
+          count: 0
+        },
+      ],
+    },
+    {
+      name: 'Received',
+      label: 'Received',
+      count: 0
+    },
+    {
+      name: 'Sent',
+      label: 'Sent',
+      count: 5
+    },
+  ];
+
+  return (
+    <div>
+      <div className='d-flex align-items-center mb-3'>
+        <Icon name="menu" className="cursor-pointer" onClick={() => setExpanded(!expanded)}></Icon>
+        <Heading size='s' className="ml-4">Click to Open</Heading>
+      </div>
+      <Collapsible withTrigger={false} expanded={expanded} height="100vh">
+        <div className="d-flex pt-4">
+          <Icon name="events" className="d-flex align-items-center px-5 Text--regular" />
+          {expanded && <Text className="mr-6">Collapsible</Text>}
+        </div>
+      </Collapsible>
+    </div>
+  );
+};
+
+const customCode = `() => {
+  const [expanded, setExpanded] = React.useState(false);
+  const [active, setActive] = React.useState({
+    name: 'TODOs.Due',
+  });
+
+  const data = [
+    {
+      name: 'TODOs',
+      label: 'TODOs',
+      icon: 'assignment_ind',
+      count: 31,
+      subMenu: [
+        {
+          name: 'TODOs.Due',
+          label: 'Due',
+          count: 31
+        },
+        {
+          name: 'TODOs.Completed',
+          label: 'Completed',
+          count: 0
+        },
+      ],
+    },
+    {
+      name: 'Received',
+      label: 'Received',
+      count: 0
+    },
+    {
+      name: 'Sent',
+      label: 'Sent',
+      count: 5
+    },
+  ];
+
+  return (
+    <div>
+      <div className='d-flex align-items-center mb-3'>
+        <Icon name="menu" className="cursor-pointer" onClick={() => setExpanded(!expanded) }></Icon>
+        <Heading size='s' className="ml-4">Click to Open</Heading>
+      </div>
+      <Collapsible withTrigger={false} expanded={expanded} height="100vh">
+        <div className="d-flex pt-4">
+          <Icon name="events" className="d-flex align-items-center px-5 Text--regular" />
+          {expanded && <Text className="mr-6">Collapsible</Text>}
+        </div>
+        </Collapsible>
+    </div>
+  );
+}`;
+
+export default {
+  title: 'Components/Collapsible/Custom Trigger',
+  component: Collapsible,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        imports: { collapsible: Collapsible },
+      },
+    },
+  },
+};

package/core/components/atoms/dropdown/__stories__/CustomSearchPlaceholder.story.jsx

@@ -2,32 +2,33 @@ import * as React from 'react';
 import Dropdown from '../Dropdown';
 import Label from '@/components/atoms/label';
 
-const options = [
-  {
-    label: 'Male',
-    value: 'Male',
-  },
-  {
-    label: 'Female',
-    value: 'Female',
-  },
-  {
-    label: 'Transgender',
-    value: 'Transgender',
-  },
-  {
-    label: 'Others',
-    value: 'Others',
-  },
-];
-
 // CSF format story
-export const customSearchPlaceholder = () => (
+export const customSearchPlaceholder = () => {
+  const options = [
+    {
+      label: 'Male',
+      value: 'Male',
+    },
+    {
+      label: 'Female',
+      value: 'Female',
+    },
+    {
+      label: 'Transgender',
+      value: 'Transgender',
+    },
+    {
+      label: 'Others',
+      value: 'Others',
+    },
+  ];
+  return (
   <div className="mb-10 w-25">
     <Label withInput={true}>Gender</Label>
     <Dropdown options={options} searchPlaceholder="Search Gender" withSearch={true} />
   </div>
-);
+  );
+};
 
 export default {
   title: 'Components/Dropdown/Custom Search Placeholder',

package/core/components/atoms/dropdown/__stories__/DropdownItemsWithCheckbox.story.jsx

@@ -2,29 +2,30 @@ import * as React from 'react';
 import { Dropdown } from '@/index';
 import { Uncontrolled, Controlled } from './_common_/types';
 
-const options = [
-  {
-    label: 'Below 18',
-    value: 'below_18',
-  },
-  {
-    label: '19 - 35',
-    value: '19-35',
-  },
-  {
-    label: '36 - 55',
-    value: '36-55',
-  },
-  {
-    label: '56 and above',
-    value: '56_above',
-  },
-];
-
 // CSF format story
-export const dropdownItemsWithCheckbox = () => (
+export const dropdownItemsWithCheckbox = () => {
+  const options = [
+    {
+      label: 'Below 18',
+      value: 'below_18',
+    },
+    {
+      label: '19 - 35',
+      value: '19-35',
+    },
+    {
+      label: '36 - 55',
+      value: '36-55',
+    },
+    {
+      label: '56 and above',
+      value: '56_above',
+    },
+  ];
+   return (
   <Dropdown options={options} withCheckbox={true} className="w-25" placeholder="Select" />
-);
+  );
+};
 
 export default {
   title: 'Components/Dropdown/Dropdown Items With Checkbox',