@innovaccer/design-system 2.3.0-0 → 2.4.0-0

package/.github/workflows/main.yml

@@ -31,7 +31,7 @@ jobs:
       
       - name: bump module version
         if: steps.is_release_commit.outputs.result == 1
-        run: npm version $(git log -1 --pretty=format:%s) -m "Released %s"
+        run: RELEASE_COMMIT=true npm version --no-commit-hooks $(git log -1 --pretty=format:%s) -m "Released %s"
 
       - name: gnerate .npmrc
         if: steps.is_release_commit.outputs.result == 1

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run pre-commit

package/.husky/prepare-commit-msg

@@ -0,0 +1,6 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+if [[ -z "${RELEASE_COMMIT}" ]]; then
+	exec < /dev/tty && npm run commit -- --hook || true
+fi

package/.prettierrc

@@ -1,6 +1,6 @@
 {
   "singleQuote": true,
-  "trailingComma": "none",
+  "trailingComma": 'es5',
   "printWidth": 120,
   "tabWidth": 2,
-}
+}

package/.storybook/main.js

@@ -38,4 +38,10 @@ module.exports = {
     // Return the altered config
     return config;
   },
+  refs: {
+    'rich-text-editor': {
+      title: "Rich Text Editor",
+      url: "https://innovaccer.github.io/mds-rich-text-editor/"
+    }
+   }
 }

package/CHANGELOG.md

@@ -1,3 +1,159 @@
+## 2.4.0-0  (2021-09-17) 
+
+### Highlights
+NA
+
+### Breaking changes
+NA
+
+### Migration guide
+NA
+
+### Deprecations
+NA
+
+### Features
+* Automated the process of types bundling (21f435b0)
+* A new InlineMessage Component has been added (f852b2a8)
+* Added the events indicator on given date in Calendar Component (4714efa2)
+* A Chip has been added to Datepicker Component to select today's date (ee9e47e0)
+* Tooltip in Icon Button Component has been added (f9f14233)
+### Fixes
+* Removes the events type Array from Calendar Component (41abf4ef)
+* zIndex for Backdrop Component has been fixed (055edb09)
+* Border radius of Card Component has been fixed (c113a568)
+* New Stories has been added to EmptyState Component and updated the existing story (af83ea74)
+* Height of the Input field has been fixed when focus in EditableChipInput Component (bbb4f256)
+### Improvements
+* Added test cases for InputMask Component (e0f37b99)
+* Added test cases for FileList Component (b36a44f1)
+* Added test cases for Dropdown Component options and loading state (1cb98e93)
+### Documentation
+NA
+
+-------------------
+
+## 2.3.0  (2021-09-10) 
+
+### Highlights
+NA
+
+### Breaking changes
+NA
+
+### Migration guide
+NA
+
+### Deprecations
+NA
+
+### Features
+NA
+
+### Fixes
+* Improve padding of close button in overlays header  (4d4965b9) 
+* Fixes nested rows losing their open state in grid (aed5b032)
+### Improvements
+* Adds test cases for FileUploaderComponent (5604656c)
+* Adds test cases for TimePicker component (4e776a46)
+* Adds test cases for ChatMessage Component (0443446c)
+* Adds test cases for slider component (fa82992a)
+* Adds test cases for DateRangePicker component (8c5abb26)
+### Documentation
+* Embeds rich text editor storybook (f3a469da)
+
+-------------------
+
+## 2.3.0-2  (2021-25-10) 
+
+### Highlights
+NA
+
+### Breaking changes
+NA
+
+### Migration guide
+NA
+
+### Deprecations
+NA
+
+### Features
+* Adds Close on Escape Keypress feature in Overlays (c2904387)
+
+### Fixes
+* Fixes arrow click event argument in MetricInput (e4cf0bc5)
+* Adds default state delete functionality in EditableChipInput (3a8415f7)
+* Fixes done button and adds support for uncontrolled EditableChipInput (16a844be)
+* Fixes done button and adds support for uncontrolled EditableInput (f0de36cd)
+* Fixes onChange callback in InputMask (I18e111ce)
+* Removes margin bottom from modal body when there is no footer (7470a273)
+* Fixes nested row card border in Grid (132d0903)
+### Improvements
+* feat(Checkbox): Adds helptext in checkbox (1d41c6cc)
+* feat(Radio): Adds helptext in radio (fc886989)
+* Test(MetaList): Adds test cases for MetaList component (5023743f)
+### Documentation
+* Adds more content to scrolling modal story (c43c8fea)
+
+-------------------
+## 2.3.0-1  (2021-08-10) 
+
+### Highlights
+NA
+
+### Breaking changes
+NA
+
+### Migration guide
+NA
+
+### Deprecations
+NA
+
+### Features
+* Improves Tabs API for custom tab (8018e724)
+
+### Fixes
+* Adds type `button` to all components using Button component (7be54df8)
+* Removes action Icon when input field is disabled (deeb1e1c)
+
+### Improvements
+* Adds not-allowed cursor in stepper for disabled step (a11a3dce)
+
+### Documentation
+NA
+
+-------------------
+
+## 2.3.0-0  (2021-08-10) 
+
+### Highlights
+NA
+
+### Breaking changes
+NA
+
+### Migration guide
+NA
+
+### Deprecations
+NA
+
+### Features
+NA
+
+### Fixes
+* Fixes missing file icon in FileList (920e5c42)
+* Fixes disabled state in DatePicker (1826c560)
+
+### Improvements
+* Adds radio's css for hover and active state (a025c7d4)
+
+### Documentation
+* Adds stepper stories (7274e111)
+
+-------------------
 ## 2.2.0-2  (2021-07-14) 
 
 ### Highlights

package/CONTRIBUTING.md

@@ -637,10 +637,22 @@ information on [rebasing](https://git-scm.com/book/en/v2/Git-Branching-Rebasing)
 
 #### Before Commit
 
-Before committing, **you must ensure there are no linting errors and all tests pass.**
+Before committing, **you must ensure there are no linting, formatting errors and all tests pass.**
 
 To ensure the above conditions, run:
 
+
+For checking prettier issues:
+
+```bash
+npm run prettier:check
+```
+
+For formating prettier issues:
+
+```bash
+npm run prettier
+```
 For lint:
 
 ```bash

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

@@ -23,11 +23,7 @@ describe('Chip component', () => {
     const attr = filterUndefined(props) as Props;
 
     it(testMessageHelper(attr), () => {
-      const { baseElement } = render(
-        <GenericChip
-          {...attr}
-        />
-      );
+      const { baseElement } = render(<GenericChip {...attr} />);
       expect(baseElement).toMatchSnapshot();
     });
   };
@@ -36,59 +32,44 @@ describe('Chip component', () => {
 });
 
 describe('Chip component', () => {
-
   it('renders chip component', () => {
-    const { getByTestId } = render(
-      <GenericChip label="ChipLabel" name="Chip" icon="events" clearButton={true}/>
-    );
+    const { getByTestId } = render(<GenericChip label="ChipLabel" name="Chip" icon="events" clearButton={true} />);
     expect(getByTestId('DesignSystem-GenericChip--GenericChipWrapper')).toBeInTheDocument();
     expect(getByTestId('DesignSystem-GenericChip--Icon')).toBeInTheDocument();
     expect(getByTestId('DesignSystem-GenericChip--Text')).toBeInTheDocument();
     expect(getByTestId('DesignSystem-GenericChip--clearButton')).toBeInTheDocument();
     expect(getByTestId('DesignSystem-GenericChip--Icon').textContent).toMatch('events_round');
     expect(getByTestId('DesignSystem-GenericChip--Text').textContent).toMatch('ChipLabel');
-
   });
 
   it('renders chip component with minimum props', () => {
-    const { getByTestId, queryByTestId } = render(
-      <GenericChip label="ChipLabel" name="Chip"/>
-    );
+    const { getByTestId, queryByTestId } = render(<GenericChip label="ChipLabel" name="Chip" />);
     expect(getByTestId('DesignSystem-GenericChip--GenericChipWrapper')).toBeInTheDocument();
     expect(queryByTestId('DesignSystem-GenericChip--Icon')).not.toBeInTheDocument();
     expect(getByTestId('DesignSystem-GenericChip--Text')).toBeInTheDocument();
     expect(queryByTestId('DesignSystem-GenericChip--clearButton')).not.toBeInTheDocument();
-
   });
 
   it('renders chip component with classes', () => {
-    const { getByTestId } = render(
-        <GenericChip label="ChipLabel" name="Chip" icon="events" clearButton={true}/>
-    );
+    const { getByTestId } = render(<GenericChip label="ChipLabel" name="Chip" icon="events" clearButton={true} />);
     expect(getByTestId('DesignSystem-GenericChip--Icon')).toHaveClass('Chip-icon--left');
     expect(getByTestId('DesignSystem-GenericChip--clearButton')).toHaveClass('Chip-icon--right cursor-pointer');
-
   });
 
   it('renders chip component with prop onClick', () => {
-    const { getByTestId } = render(
-      <GenericChip label="ChipLabel" name="Chip" onClick={FunctionValue}/>
-    );
+    const { getByTestId } = render(<GenericChip label="ChipLabel" name="Chip" onClick={FunctionValue} />);
     const onClick = getByTestId('DesignSystem-GenericChip--GenericChipWrapper');
     fireEvent.click(onClick);
     expect(FunctionValue).toHaveBeenCalled();
-
   });
 
   it('renders chip component with prop onClose', () => {
     const { getByTestId } = render(
-      <GenericChip label="ChipLabel" name="Chip" onClick={FunctionValue} clearButton={true} onClose={onClose}/>
+      <GenericChip label="ChipLabel" name="Chip" onClick={FunctionValue} clearButton={true} onClose={onClose} />
     );
     const onCloseButton = getByTestId('DesignSystem-GenericChip--clearButton');
     fireEvent.click(onCloseButton);
     expect(FunctionValue).toHaveBeenCalled();
     expect(onClose).toHaveBeenCalled();
-
   });
-
 });

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

@@ -17,24 +17,16 @@ export interface GenericChipProps extends BaseProps {
 }
 
 export const GenericChip = (props: GenericChipProps) => {
-  const {
-    label,
-    icon,
-    clearButton,
-    disabled,
-    className,
-    selected,
-    onClose,
-    onClick,
-  } = props;
+  const { label, icon, clearButton, disabled, className, selected, onClose, onClick } = props;
 
   const baseProps = extractBaseProps(props);
 
-  const iconClass = (align: string) => classNames({
-    ['Chip-icon']: true,
-    [`Chip-icon--${align}`]: align,
-    ['cursor-pointer']: align === 'right' && !disabled
-  });
+  const iconClass = (align: string) =>
+    classNames({
+      ['Chip-icon']: true,
+      [`Chip-icon--${align}`]: align,
+      ['cursor-pointer']: align === 'right' && !disabled,
+    });
 
   const onCloseHandler = (e: React.MouseEvent) => {
     e.stopPropagation();
@@ -56,21 +48,18 @@ export const GenericChip = (props: GenericChipProps) => {
         <Icon
           data-test="DesignSystem-GenericChip--Icon"
           name={icon}
-          appearance={(disabled ? 'disabled' : (selected ? 'info' : 'default'))}
+          appearance={disabled ? 'disabled' : selected ? 'info' : 'default'}
           className={iconClass('left')}
         />
       )}
-      <Text
-        data-test="DesignSystem-GenericChip--Text"
-        appearance={(disabled ? 'disabled' : 'default')}
-      >
+      <Text data-test="DesignSystem-GenericChip--Text" appearance={disabled ? 'disabled' : 'default'}>
         {label}
       </Text>
       {clearButton && (
         <Icon
           data-test="DesignSystem-GenericChip--clearButton"
           name="clear"
-          appearance={disabled ? 'disabled' : (selected ? 'info' : 'subtle')}
+          appearance={disabled ? 'disabled' : selected ? 'info' : 'subtle'}
           className={iconClass('right')}
           onClick={onCloseHandler}
         />

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

@@ -5,15 +5,15 @@ import { BaseProps, extractBaseProps } from '@/utils/types';
 import { TooltipProps } from '@/index.type';
 
 export type Appearance =
-  'primary' |
-  'secondary' |
-  'alert' |
-  'warning' |
-  'success' |
-  'accent1' |
-  'accent2' |
-  'accent3' |
-  'accent4';
+  | 'primary'
+  | 'secondary'
+  | 'alert'
+  | 'warning'
+  | 'success'
+  | 'accent1'
+  | 'accent2'
+  | 'accent3'
+  | 'accent4';
 
 export type Size = 'regular' | 'tiny';
 
@@ -51,16 +51,7 @@ export interface AvatarProps extends BaseProps {
 const initialsLength = 2;
 
 export const Avatar = (props: AvatarProps) => {
-  const {
-    withTooltip,
-    tooltipPosition,
-    size,
-    children,
-    firstName,
-    lastName,
-    className,
-    appearance,
-  } = props;
+  const { withTooltip, tooltipPosition, size, children, firstName, lastName, className, appearance } = props;
 
   const baseProps = extractBaseProps(props);
 
@@ -71,47 +62,35 @@ export const Avatar = (props: AvatarProps) => {
   const tooltip = children || `${firstName || ''} ${lastName || ''}` || '';
   const DefaultAppearance = 'secondary';
 
-  const colors = [
-    'accent4',
-    'primary',
-    'accent3',
-    'alert',
-    'accent2',
-    'warning',
-    'accent1',
-    'success'
-  ];
+  const colors = ['accent4', 'primary', 'accent3', 'alert', 'accent2', 'warning', 'accent1', 'success'];
 
   const AvatarAppearance =
-    appearance ||
-    colors[(initials.charCodeAt(0) + (initials.charCodeAt(1) || 0)) % 8] ||
-    DefaultAppearance;
-
-  const classes = classNames({
-    Avatar: true,
-    [`Avatar--${size}`]: size,
-    [`Avatar--${AvatarAppearance}`]: AvatarAppearance,
-    ['Avatar--disabled']: !initials || !withTooltip,
-  }, className);
+    appearance || colors[(initials.charCodeAt(0) + (initials.charCodeAt(1) || 0)) % 8] || DefaultAppearance;
+
+  const classes = classNames(
+    {
+      Avatar: true,
+      [`Avatar--${size}`]: size,
+      [`Avatar--${AvatarAppearance}`]: AvatarAppearance,
+      ['Avatar--disabled']: !initials || !withTooltip,
+    },
+    className
+  );
 
   const ContentClass = classNames({
     [`Avatar-content--${size}`]: size,
-    [`Avatar-content--${AvatarAppearance}`]: AvatarAppearance
+    [`Avatar-content--${AvatarAppearance}`]: AvatarAppearance,
   });
 
   const IconClass = classNames({
-    [`Avatar-content--${AvatarAppearance}`]: AvatarAppearance
+    [`Avatar-content--${AvatarAppearance}`]: AvatarAppearance,
   });
 
   const renderAvatar = () => {
     return (
-      <span data-test="DesignSystem-Avatar" {...baseProps} className={classes} >
+      <span data-test="DesignSystem-Avatar" {...baseProps} className={classes}>
         {initials && (
-          <Text
-            weight="medium"
-            appearance={'white'}
-            className={ContentClass}
-          >
+          <Text weight="medium" appearance={'white'} className={ContentClass}>
             {initials}
           </Text>
         )}
@@ -147,7 +126,7 @@ Avatar.displayName = 'Avatar';
 Avatar.defaultProps = {
   tooltipPosition: 'bottom',
   withTooltip: true,
-  size: 'regular'
+  size: 'regular',
 };
 
 export default Avatar;

package/core/components/atoms/avatar/__stories__/defaultAvatar.story.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import Avatar from '../Avatar';
 
-export const defaultAvatar = () => (
-  <Avatar firstName="John" lastName="Doe" appearance="primary" />
-);
+export const defaultAvatar = () => <Avatar firstName="John" lastName="Doe" appearance="primary" />;
 
 export default {
   title: 'Components/Avatar/Default Avatar',
@@ -11,8 +9,8 @@ export default {
   parameters: {
     docs: {
       docPage: {
-        title: 'Avatar'
-      }
-    }
-  }
+        title: 'Avatar',
+      },
+    },
+  },
 };

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

@@ -22,19 +22,13 @@ export const all = () => {
     withTooltip,
     size,
     firstName,
-    lastName
+    lastName,
   };
 
-  return (
-    <Avatar
-      {...options}
-    >
-      {children}
-    </Avatar>
-  );
+  return <Avatar {...options}>{children}</Avatar>;
 };
 
 export default {
   title: 'Components/Avatar/All',
-  component: Avatar
+  component: Avatar,
 };

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

@@ -15,7 +15,7 @@ export const appearance = () => {
     'accent1',
     'accent2',
     'accent3',
-    'accent4'
+    'accent4',
   ];
 
   return (
@@ -23,7 +23,9 @@ export const appearance = () => {
       {appearances.map((appear, ind) => {
         return (
           <div key={ind} className="mr-9">
-            <Text weight={weight}>{appear.charAt(0).toUpperCase() + appear.slice(1)}</Text><br /><br />
+            <Text weight={weight}>{appear.charAt(0).toUpperCase() + appear.slice(1)}</Text>
+            <br />
+            <br />
             <Avatar firstName="John" lastName="Doe" appearance={appear} />
           </div>
         );
@@ -38,8 +40,8 @@ export default {
   parameters: {
     docs: {
       docPage: {
-        title: 'Avatar'
-      }
-    }
-  }
+        title: 'Avatar',
+      },
+    },
+  },
 };

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

@@ -14,7 +14,7 @@ export const size = () => {
       </div>
       <div className="mr-9  d-flex flex-column">
         <Text weight={weight}>Tiny</Text> <br />
-        <Avatar firstName="John" lastName="Doe" size="tiny"/>
+        <Avatar firstName="John" lastName="Doe" size="tiny" />
       </div>
     </div>
   );
@@ -26,8 +26,8 @@ export default {
   parameters: {
     docs: {
       docPage: {
-        title: 'Avatar'
-      }
-    }
-  }
+        title: 'Avatar',
+      },
+    },
+  },
 };

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

@@ -11,7 +11,7 @@ const appearances: Appearance[] = [
   'accent1',
   'accent2',
   'accent3',
-  'accent4'
+  'accent4',
 ];
 
 const sizes: Size[] = ['regular', 'tiny'];
@@ -25,13 +25,7 @@ describe('Avatar component', () => {
     const attr = filterUndefined(props) as Props;
 
     it(testMessageHelper(attr), () => {
-      const tree = render(
-        <Avatar
-          {...attr}
-        >
-          JD
-        </Avatar>
-      );
+      const tree = render(<Avatar {...attr}>JD</Avatar>);
       expect(tree).toMatchSnapshot();
     });
   };
@@ -48,13 +42,7 @@ describe('Avatar component', () => {
     const attr = filterUndefined(props) as Props;
 
     it(testMessageHelper(attr), () => {
-      const tree = render(
-        <Avatar
-          {...attr}
-        >
-          JD
-        </Avatar>
-      );
+      const tree = render(<Avatar {...attr}>JD</Avatar>);
       expect(tree).toMatchSnapshot();
     });
   };
@@ -63,7 +51,6 @@ 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" />);
     expect(getByTestId('DesignSystem-Avatar').textContent).toMatch('He');
@@ -93,40 +80,32 @@ describe('Avatar component', () => {
     const { getByTestId } = render(<Avatar />);
     expect(getByTestId('DesignSystem-Avatar--Icon')).toBeInTheDocument();
   });
-
 });
 
 describe('Avatar component tagName', () => {
-
   it('renders tagName', () => {
     const { getByTestId } = render(<Avatar children="Design System" />);
     expect(getByTestId('DesignSystem-Avatar').tagName).toMatch('SPAN');
   });
-
 });
 
 describe('Avatar Component with overwrite class', () => {
-
   it('overwrite Avatar class', () => {
     const { getByTestId } = render(<Avatar className="AvatarClass">{'Avatar'}</Avatar>);
     expect(getByTestId('DesignSystem-Avatar')).toHaveClass('AvatarClass');
   });
-
 });
 
 describe('Avatar component with prop:appearance', () => {
-
-  appearances.forEach(color => {
+  appearances.forEach((color) => {
     it(`should have the Avatar--${color} class when appearance=${color} `, () => {
       const { getByTestId } = render(<Avatar children="Design" appearance={color} />);
       expect(getByTestId('DesignSystem-Avatar')).toHaveClass(`Avatar--${color}`);
     });
   });
-
 });
 
 describe('Avatar component with prop:size', () => {
-
   it('should have the Avatar--regular class when size is regular', () => {
     const { getByTestId } = render(<Avatar children="Design" />);
     expect(getByTestId('DesignSystem-Avatar')).toHaveClass('Avatar--regular');
@@ -136,5 +115,4 @@ describe('Avatar component with prop:size', () => {
     const { getByTestId } = render(<Avatar children="Design" size={'tiny'} />);
     expect(getByTestId('DesignSystem-Avatar')).toHaveClass('Avatar--tiny');
   });
-
 });