@innovaccer/design-system 2.6.0 → 2.7.0-0

package/.eslintrc.json

@@ -1,7 +1,7 @@
 {
   "root": true,
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint", "jsx-a11y"],
+  "plugins": ["@typescript-eslint", "jsx-a11y", "prettier"],
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
@@ -11,8 +11,9 @@
   "settings": { "react": { "version": "detect" } },
   "globals": { "_": "readonly", "__": "readonly" },
   "rules": {
+    "prettier/prettier": "error",
+    "no-unused-vars": "off",
     "prefer-conditional-expression": "off",
-    "max-line-length": "off",
     "object-literal-sort-keys": "off",
     "no-submodule-imports": "off",
     "member-ordering": "off",
@@ -38,16 +39,16 @@
     "jsx-wrap-multiline": "off",
     "no-prototype-builtins": "off",
     "react/prop-types": "off",
-    "react/no-unknown-property": "off",
+    "react/no-unknown-property": "error",
     "react/no-unescaped-entities": "off",
-    "react/no-children-prop": "off",
-    "react/no-find-dom-node": "off",
+    "react/no-children-prop": "error",
+    "react/no-find-dom-node": "error",
     "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/ban-ts-comment": "off",
-    "@typescript-eslint/ban-types": "off",
-    "@typescript-eslint/no-inferrable-types": "off",
+    "@typescript-eslint/ban-ts-comment": "error",
+    "@typescript-eslint/ban-types": "error",
+    "@typescript-eslint/no-inferrable-types": "error",
     "@typescript-eslint/no-empty-function": "off",
-    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": ["error", { "ignoreRestSiblings": true }],
     "@typescript-eslint/no-non-null-assertion": "off"
   }
 }

package/.github/workflows/chromatic.yml

@@ -12,6 +12,11 @@ jobs:
     # Job steps
     steps:
       - uses: actions/checkout@v1
+      
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '14.x'
+      
       - name: Install dependencies
         run: npm install
 

package/.github/workflows/pull_request.yml

@@ -17,7 +17,7 @@ jobs:
         run: npm install
       
       - name: lint
-        run: npm run lint
+        run: npm run lint:check
 
       - name: test
         run: npm run test

package/.storybook/main.js

@@ -42,6 +42,10 @@ module.exports = {
     'rich-text-editor': {
       title: "Rich Text Editor",
       url: "https://innovaccer.github.io/mds-rich-text-editor/"
+    },
+    'mds-helpers': {
+      title: "MDS Helpers",
+      url: "https://innovaccer.github.io/mds-helpers/"
     }
    }
 }

package/.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+  ],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true,
+  },
+}

package/CHANGELOG.md

@@ -1,4 +1,40 @@
 
+## 2.7.0-0  (2021-12-09)
+### Highlights
+
+### Breaking changes
+NA
+
+### Migration guide
+NA
+
+### Deprecations
+* Button: appearance "success" is deprecated, please use "primary" (375c9aef)
+* Fileuploader component is deprecated, please use Dropzone type="tight" (c5d8ef43)
+* Toast: appearance "default" is deprecated, please use "info" (d589cf6f)
+* Message: appearance "default" is deprecated, please use "info" (3cd54421)
+
+
+### Features
+* Option to use custom search placeholder in Dropdown search input (9fcb2b65)
+
+### Fixes
+* fix: updates docpage for stories without components exported (d5138109)
+* fix(storybook): update package json file to fix storybook docs page (149f8ec8)
+* fix(InputMask): fixes issue with fast input (4d1f8330)
+* fix(switch): add styling for hover and active state (3a54a934)
+
+### Improvements
+*  Added transitions to fullscreenModal component (98cac857)
+*  Selected state for a disabled chips is now visible (c619c571)
+
+### Documentation
+* Example for custom header in sidesheet added (edc300cc)
+* Input examples (stories) are interactive now (ead16746)
+
+
+-------------------
+
 ## 2.6.0  (2021-12-09)
 ### Highlights
 * Calender exposes onHover events on date month and year values (bcaa4aed)

package/CONTRIBUTING.md

@@ -718,7 +718,13 @@ For formating prettier issues:
 npm run prettier
 ```
 
-For lint:
+For checking lint issues:
+
+```bash
+npm run lint:check
+```
+
+For formating lint issues:
 
 ```bash
 npm run lint

package/core/accessibility/utils/useAccessibilityProps.ts

@@ -5,15 +5,17 @@ interface IProps {
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
   onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
   role?: React.AriaRole;
+  'aria-label'?: React.AriaAttributes['aria-label'];
 }
 
-const useAccessibilityProps = ({ onClick, onKeyDown, role }: IProps) => {
+const useAccessibilityProps = ({ onClick, onKeyDown, role, ...rest }: IProps) => {
   return {
     ...(onClick
       ? {
           onClick: onClick,
           role: role || 'button',
           tabIndex: 0,
+          'aria-label': rest['aria-label'],
           onKeyDown: (e: React.SyntheticEvent<HTMLElement>) => {
             if (onKeyDown) {
               onKeyDown(e as React.KeyboardEvent<HTMLElement>);
@@ -24,7 +26,7 @@ const useAccessibilityProps = ({ onClick, onKeyDown, role }: IProps) => {
             }
           },
         }
-      : { role }),
+      : { role, 'aria-label': rest['aria-label'] }),
   };
 };
 

package/core/common.type.tsx

@@ -0,0 +1,22 @@
+import { OverlayFooterProps } from '@/components/molecules/overlayFooter';
+
+export type AccentAppearance =
+  | 'primary'
+  | 'secondary'
+  | 'alert'
+  | 'warning'
+  | 'success'
+  | 'accent1'
+  | 'accent2'
+  | 'accent3'
+  | 'accent4';
+
+export type HeadingAppearance = 'default' | 'subtle' | 'disabled' | 'white';
+export type MessageAppearance = 'default' | 'alert' | 'info' | 'success' | 'warning';
+export type FileStatus = 'uploading' | 'completed' | 'error';
+export type FooterOptions = {
+  actions: OverlayFooterProps['actions'];
+};
+export type AutoComplete = 'on' | 'off';
+export type NumberRange = [number, number];
+export type ChangeEvent = React.ChangeEvent<HTMLInputElement>;

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

@@ -44,7 +44,7 @@ exports[`Chip component
         events_round
       </i>
       <span
-        class="Text Text--default Text--regular"
+        class="Text Text--link Text--regular"
         data-test="DesignSystem-GenericChip--Text"
       >
         ChipLabel
@@ -91,14 +91,14 @@ exports[`Chip component
       data-test="DesignSystem-GenericChip--GenericChipWrapper"
     >
       <i
-        class="material-icons material-icons-round Icon Icon--disabled Chip-icon Chip-icon--left"
+        class="material-icons material-icons-round Icon Icon--info Chip-icon Chip-icon--left"
         data-test="DesignSystem-GenericChip--Icon"
         style="font-size: 16px; width: 16px;"
       >
         events_round
       </i>
       <span
-        class="Text Text--disabled Text--regular"
+        class="Text Text--link Text--regular"
         data-test="DesignSystem-GenericChip--Text"
       >
         ChipLabel
@@ -118,7 +118,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 Chip-icon Chip-icon--left"
         data-test="DesignSystem-GenericChip--Icon"
         style="font-size: 16px; width: 16px;"
       >
@@ -131,7 +131,7 @@ exports[`Chip component
         ChipLabel
       </span>
       <i
-        class="material-icons material-icons-round Icon Icon--subtle Chip-icon Chip-icon--right cursor-pointer"
+        class="material-icons material-icons-round Icon Chip-icon Chip-icon--right cursor-pointer"
         data-test="DesignSystem-GenericChip--clearButton"
         role="button"
         style="font-size: 16px; width: 16px;"
@@ -161,7 +161,7 @@ exports[`Chip component
         events_round
       </i>
       <span
-        class="Text Text--default Text--regular"
+        class="Text Text--link Text--regular"
         data-test="DesignSystem-GenericChip--Text"
       >
         ChipLabel
@@ -226,20 +226,20 @@ exports[`Chip component
       data-test="DesignSystem-GenericChip--GenericChipWrapper"
     >
       <i
-        class="material-icons material-icons-round Icon Icon--disabled Chip-icon Chip-icon--left"
+        class="material-icons material-icons-round Icon Icon--info Chip-icon Chip-icon--left"
         data-test="DesignSystem-GenericChip--Icon"
         style="font-size: 16px; width: 16px;"
       >
         events_round
       </i>
       <span
-        class="Text Text--disabled Text--regular"
+        class="Text Text--link Text--regular"
         data-test="DesignSystem-GenericChip--Text"
       >
         ChipLabel
       </span>
       <i
-        class="material-icons material-icons-round Icon Icon--disabled Chip-icon Chip-icon--right"
+        class="material-icons material-icons-round Icon Icon--info 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

@@ -4,6 +4,7 @@ import Icon from '@/components/atoms/icon';
 import Text from '@/components/atoms/text';
 import { Name } from '../chip/Chip';
 import { BaseProps, extractBaseProps } from '@/utils/types';
+import { IconProps, TextProps } from '@/index.type';
 
 export interface GenericChipProps extends BaseProps {
   label: string;
@@ -37,6 +38,19 @@ 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 textAppearance = classNames({
+    ['disabled']: disabled && !selected,
+    ['link']: selected,
+    ['default']: !disabled && !selected,
+  }) as TextProps['appearance'];
+
   return (
     // TODO(a11y)
     // eslint-disable-next-line
@@ -50,18 +64,18 @@ export const GenericChip = (props: GenericChipProps) => {
         <Icon
           data-test="DesignSystem-GenericChip--Icon"
           name={icon}
-          appearance={disabled ? 'disabled' : selected ? 'info' : 'default'}
+          appearance={iconAppearance}
           className={iconClass('left')}
         />
       )}
-      <Text data-test="DesignSystem-GenericChip--Text" appearance={disabled ? 'disabled' : 'default'}>
+      <Text data-test="DesignSystem-GenericChip--Text" appearance={textAppearance}>
         {label}
       </Text>
       {clearButton && (
         <Icon
           data-test="DesignSystem-GenericChip--clearButton"
           name="clear"
-          appearance={disabled ? 'disabled' : selected ? 'info' : 'subtle'}
+          appearance={iconAppearance}
           className={iconClass('right')}
           onClick={onCloseHandler}
         />

package/core/components/atoms/avatar/Avatar.tsx

@@ -3,25 +3,15 @@ import classNames from 'classnames';
 import { Text, Tooltip, Icon } from '@/index';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 import { TooltipProps } from '@/index.type';
+import { AccentAppearance } from '@/common.type';
 
-export type Appearance =
-  | 'primary'
-  | 'secondary'
-  | 'alert'
-  | 'warning'
-  | 'success'
-  | 'accent1'
-  | 'accent2'
-  | 'accent3'
-  | 'accent4';
-
-export type Size = 'regular' | 'tiny';
+export type AvatarSize = 'regular' | 'tiny';
 
 export interface AvatarProps extends BaseProps {
   /**
    * Color of the `Avatar`
    */
-  appearance?: Appearance;
+  appearance?: AccentAppearance;
   /**
    * **Only first 2 characters are rendered (SOON TO BE DEPRECATED)**
    */
@@ -45,7 +35,7 @@ export interface AvatarProps extends BaseProps {
   /**
    * Determines size of `Avatar`
    */
-  size: Size;
+  size: AvatarSize;
 }
 
 const initialsLength = 2;

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

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import Avatar, { Appearance } from '../../Avatar';
+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: Appearance[] = [
+  const appearances: AccentAppearance[] = [
     'primary',
     'secondary',
     'alert',

package/core/components/atoms/avatar/__tests__/Avatar.test.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import Avatar, { AvatarProps as Props, Appearance, Size } from '../Avatar';
+import Avatar, { AvatarProps as Props, AvatarSize } from '../Avatar';
+import { AccentAppearance } from '@/common.type';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
 
-const appearances: Appearance[] = [
+const appearances: AccentAppearance[] = [
   'primary',
   'alert',
   'warning',
@@ -14,7 +15,7 @@ const appearances: Appearance[] = [
   'accent4',
 ];
 
-const sizes: Size[] = ['regular', 'tiny'];
+const sizes: AvatarSize[] = ['regular', 'tiny'];
 
 describe('Avatar component', () => {
   const mapper = {
@@ -52,7 +53,11 @@ describe('Avatar component', () => {
 
 describe('Avatar component', () => {
   it('renders initials when firstName,lastName,children are given', () => {
-    const { getByTestId } = render(<Avatar firstName="Design" lastName="System" children="Hey" />);
+    const { getByTestId } = render(
+      <Avatar firstName="Design" lastName="System">
+        Hey
+      </Avatar>
+    );
     expect(getByTestId('DesignSystem-Avatar').textContent).toMatch('He');
   });
 
@@ -67,7 +72,7 @@ describe('Avatar component', () => {
   });
 
   it('renders initials when only children is given', () => {
-    const { getByTestId } = render(<Avatar children="Design System" />);
+    const { getByTestId } = render(<Avatar>Design System</Avatar>);
     expect(getByTestId('DesignSystem-Avatar').textContent).toMatch('De');
   });
 
@@ -84,7 +89,7 @@ describe('Avatar component', () => {
 
 describe('Avatar component tagName', () => {
   it('renders tagName', () => {
-    const { getByTestId } = render(<Avatar children="Design System" />);
+    const { getByTestId } = render(<Avatar>Design System</Avatar>);
     expect(getByTestId('DesignSystem-Avatar').tagName).toMatch('SPAN');
   });
 });
@@ -99,7 +104,7 @@ describe('Avatar Component with overwrite class', () => {
 describe('Avatar component with prop:appearance', () => {
   appearances.forEach((color) => {
     it(`should have the Avatar--${color} class when appearance=${color} `, () => {
-      const { getByTestId } = render(<Avatar children="Design" appearance={color} />);
+      const { getByTestId } = render(<Avatar appearance={color}>Design</Avatar>);
       expect(getByTestId('DesignSystem-Avatar')).toHaveClass(`Avatar--${color}`);
     });
   });
@@ -107,12 +112,12 @@ describe('Avatar component with prop:appearance', () => {
 
 describe('Avatar component with prop:size', () => {
   it('should have the Avatar--regular class when size is regular', () => {
-    const { getByTestId } = render(<Avatar children="Design" />);
+    const { getByTestId } = render(<Avatar>Design</Avatar>);
     expect(getByTestId('DesignSystem-Avatar')).toHaveClass('Avatar--regular');
   });
 
   it('should have the Avatar--tiny class when size is tiny', () => {
-    const { getByTestId } = render(<Avatar children="Design" size={'tiny'} />);
+    const { getByTestId } = render(<Avatar size={'tiny'}>Design</Avatar>);
     expect(getByTestId('DesignSystem-Avatar')).toHaveClass('Avatar--tiny');
   });
 });

package/core/components/atoms/avatarGroup/AvatarGroup.tsx

@@ -4,15 +4,13 @@ import { BaseProps, extractBaseProps } from '@/utils/types';
 import { Avatar, Popover, Text } from '@/index';
 import { AvatarProps, PopoverProps } from '@/index.type';
 
-export type Size = 'regular' | 'tiny';
-
 interface AvatarData extends Record<string, any> {
   firstName?: string;
   lastName?: string;
   appearance?: AvatarProps['appearance'];
 }
 
-interface PopperProps {
+interface AvatarPopperProps {
   popperRenderer?: (names: AvatarData[]) => JSX.Element;
   appendToBody?: PopoverProps['appendToBody'];
   dark?: PopoverProps['dark'];
@@ -48,7 +46,7 @@ export interface AvatarGroupProps extends BaseProps {
    * **Popover for +x avatar**
    *
    * <pre className="DocPage-codeBlock">
-   * PopperProps: {
+   * AvatarPopperProps: {
    *   popperRenderer?: (names: AvatarData[]) => JSX.Element;
    *   appendToBody?: boolean;
    *   dark?: boolean;
@@ -70,7 +68,7 @@ export interface AvatarGroupProps extends BaseProps {
    * </pre>
    *
    */
-  popoverOptions: PopperProps;
+  popoverOptions: AvatarPopperProps;
   /**
    * Position to place the tooltip on `Avatars` shown before +x
    */

package/core/components/atoms/badge/Badge.tsx

@@ -1,23 +1,13 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
-
-export type Appearance =
-  | 'primary'
-  | 'secondary'
-  | 'alert'
-  | 'warning'
-  | 'success'
-  | 'accent1'
-  | 'accent2'
-  | 'accent3'
-  | 'accent4';
+import { AccentAppearance } from '@/common.type';
 
 export interface BadgeProps extends BaseProps {
   /*
    * Color of the `Badge`
    */
-  appearance: Appearance;
+  appearance: AccentAppearance;
   /**
    * Makes `Badge` appearance subtle
    */

package/core/components/atoms/badge/__tests__/Badge.test.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import Badge, { BadgeProps as Props, Appearance } from '../Badge';
+import Badge, { BadgeProps as Props } from '../Badge';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
+import { AccentAppearance } from '@/common.type';
 
-const appearances: Appearance[] = [
+const appearances: AccentAppearance[] = [
   'primary',
   'alert',
   'warning',
@@ -35,14 +36,20 @@ describe('Badge component', () => {
 
 describe('Badge component', () => {
   it('renders children', () => {
-    const { getByTestId } = render(<Badge children="Badge" subtle={true} appearance="secondary" />);
+    const { getByTestId } = render(
+      <Badge subtle={true} appearance="secondary">
+        Badge
+      </Badge>
+    );
     expect(getByTestId('DesignSystem-Badge').textContent).toMatch('Badge');
   });
 
   describe('Badge Component with overwrite class', () => {
     it('overwrite badge class', () => {
       const { getByTestId } = render(
-        <Badge className="BadgeClass" children="Design" subtle={true} appearance="secondary" />
+        <Badge className="BadgeClass" subtle={true} appearance="secondary">
+          Design
+        </Badge>
       );
       expect(getByTestId('DesignSystem-Badge')).toHaveClass('Badge BadgeClass');
     });
@@ -50,7 +57,11 @@ describe('Badge component', () => {
 
   describe('Badge component tagName', () => {
     it('should have span element', () => {
-      const { getByTestId } = render(<Badge children="Design" subtle={true} appearance="secondary" />);
+      const { getByTestId } = render(
+        <Badge subtle={true} appearance="secondary">
+          Design
+        </Badge>
+      );
       expect(getByTestId('DesignSystem-Badge').tagName).toMatch('SPAN');
     });
   });
@@ -58,7 +69,7 @@ describe('Badge component', () => {
   describe('Badge component with prop:appearance', () => {
     appearances.forEach((appearance) => {
       it(`should have the Badge--${appearance} class when appearance=${appearance} `, () => {
-        const { getByTestId } = render(<Badge children="Design" appearance={appearance} />);
+        const { getByTestId } = render(<Badge appearance={appearance}>Design</Badge>);
         expect(getByTestId('DesignSystem-Badge')).toHaveClass(`Badge--${appearance}`);
       });
     });
@@ -67,7 +78,11 @@ describe('Badge component', () => {
   describe('Badge component with prop:subtle', () => {
     appearances.forEach((appearance) => {
       it(`should have the Badge--subtle-${appearance} class when appearance=${appearance} `, () => {
-        const { getByTestId } = render(<Badge children="Design" appearance={appearance} subtle={true} />);
+        const { getByTestId } = render(
+          <Badge appearance={appearance} subtle={true}>
+            Design
+          </Badge>
+        );
         expect(getByTestId('DesignSystem-Badge')).toHaveClass(`Badge--subtle-${appearance}`);
       });
     });

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { text } from '@storybook/addon-knobs';
-import Badge, { Appearance } from '../../Badge';
+import Badge from '../../Badge';
 import Text from '@/components/atoms/text';
+import { AccentAppearance } from '@/common.type';
 
 // CSF format story
 export const appearance = () => {
@@ -10,7 +11,7 @@ export const appearance = () => {
 
   const children = text('children', 'Badge');
 
-  const appearances: Appearance[] = [
+  const appearances: AccentAppearance[] = [
     'primary',
     'secondary',
     'alert',

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { text } from '@storybook/addon-knobs';
-import Badge, { Appearance } from '../../Badge';
+import Badge from '../../Badge';
 import Text from '@/components/atoms/text';
+import { AccentAppearance } from '@/common.type';
 
 // CSF format story
 export const subtle = () => {
@@ -10,7 +11,7 @@ export const subtle = () => {
 
   const children = text('children', 'Badge');
 
-  const appearances: Appearance[] = [
+  const appearances: AccentAppearance[] = [
     'primary',
     'secondary',
     'alert',