npm - @innovaccer/design-system - Versions diffs - 2.5.0 → 2.7.0-0 - Mend

@innovaccer/design-system 2.5.0 → 2.7.0-0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (462) hide show

package/core/components/atoms/button/__stories__/variants/state/Transparent.story.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ export const transparent = () => {
   const expanded = false;
   const loading = false;
-  const children = text('children', 'Button');
+  const children = text('children', 'Open');
   const style = {
     justifyContent: 'space-between',
@@ -27,6 +27,7 @@ export const transparent = () => {
           expanded={expanded}
           disabled={disabled}
           loading={loading}
+          aria-label="Open"
         >
           {children}
         </Button>
@@ -43,6 +44,7 @@ export const transparent = () => {
           expanded={expanded}
           disabled={true}
           loading={loading}
+          aria-label="Open"
         >
           {children}
         </Button>
@@ -59,28 +61,13 @@ export const transparent = () => {
           expanded={expanded}
           disabled={disabled}
           loading={true}
+          aria-label="loading"
         >
           {''}
         </Button>
         <br />
         <Text weight="strong">Loading</Text>
       </div>
-      <div className="mr-9">
-        <Button
-          onClick={action('button-clicked')}
-          onMouseEnter={action('mouse-enter')}
-          onMouseLeave={action('mouse-leave')}
-          appearance={'transparent'}
-          size={'regular'}
-          expanded={expanded}
-          disabled={disabled}
-          loading={true}
-        >
-          {children}
-        </Button>
-        <br />
-        <Text weight="strong">Loading with Text</Text>
-      </div>
       <div className="mr-9">
         <Button
           onClick={action('button-clicked')}
@@ -89,6 +76,7 @@ export const transparent = () => {
           appearance={'transparent'}
           size={'regular'}
           selected={true}
+          aria-label="Open"
         >
           {children}
         </Button>
@@ -104,6 +92,7 @@ export const transparent = () => {
           size={'regular'}
           selected={true}
           icon="events"
+          aria-label="Events"
         />
         <br />
         <Text weight="strong">Selected Icon</Text>
@@ -119,6 +108,13 @@ export default {
     docs: {
       docPage: {
         title: 'Button',
+        a11yProps: `
+        **aria-label:**
+        <br/>
+        - Add \`aria-label='Open'\` to describe the action of button.
+        <br/>
+        - Add \`aria-label='Events'\` on button with *event* icon to define its purpose.
+         `,
       },
     },
   },

package/core/components/atoms/button/__tests__/Button.test.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ const buttonType = ['button', 'submit', 'reset'];
 const icon = 'events';
 const iconAlign = ['left', 'right'];
 const sizes: Props['size'][] = ['tiny', 'regular', 'large'];
-const appearance = ['basic', 'primary', 'success', 'alert', 'transparent'];
+const appearance = ['basic', 'primary', 'alert', 'transparent'];
 const sizeMapping: Record<MakeRequired<Props['size']>, number> = {
   tiny: 12,
   regular: 16,

package/core/components/atoms/button/__tests__/__snapshots__/Button.test.tsx.snap CHANGED Viewed

@@ -306,108 +306,6 @@ exports[`Button component
 </body>
 `;
-exports[`Button component
-  appearance: "success", disabled: true
- 1`] = `
-<body>
-  <div>
-    <button
-      class="Button Button--regular Button--success Button--iconAlign-left"
-      data-test="DesignSystem-Button"
-      disabled=""
-      tabindex="0"
-    >
-      Button
-    </button>
-  </div>
-</body>
-`;
-exports[`Button component
-  appearance: "success", expanded: false
- 1`] = `
-<body>
-  <div>
-    <button
-      class="Button Button--regular Button--success Button--iconAlign-left"
-      data-test="DesignSystem-Button"
-      tabindex="0"
-    >
-      Button
-    </button>
-  </div>
-</body>
-`;
-exports[`Button component
-  appearance: "success", expanded: true
- 1`] = `
-<body>
-  <div>
-    <button
-      class="Button Button--expanded Button--regular Button--success Button--iconAlign-left"
-      data-test="DesignSystem-Button"
-      tabindex="0"
-    >
-      Button
-    </button>
-  </div>
-</body>
-`;
-exports[`Button component
-  appearance: "success", loading: true
- 1`] = `
-<body>
-  <div>
-    <button
-      class="Button Button--regular Button--success Button--iconAlign-left"
-      data-test="DesignSystem-Button"
-      disabled=""
-      tabindex="0"
-    >
-      <svg
-        class="Spinner Spinner--small Button-spinner"
-        data-test="DesignSystem-Button--Spinner"
-        viewBox="0 0 50 50"
-      >
-        <circle
-          class="Circle Circle--white"
-          cx="25"
-          cy="25"
-          fill="none"
-          r="20"
-          stroke-miterlimit="10"
-          stroke-width="4"
-        />
-      </svg>
-      <span
-        class="Text Text--default Text--regular Button-text Button-text--hidden"
-        data-test="DesignSystem-Text"
-      >
-        Button
-      </span>
-    </button>
-  </div>
-</body>
-`;
-exports[`Button component
-  appearance: "success", selected: true
- 1`] = `
-<body>
-  <div>
-    <button
-      class="Button Button--regular Button--success Button--iconAlign-left"
-      data-test="DesignSystem-Button"
-      tabindex="0"
-    >
-      Button
-    </button>
-  </div>
-</body>
-`;
 exports[`Button component
   appearance: "transparent", disabled: true
  1`] = `
@@ -957,41 +855,6 @@ exports[`Button component with no children
 </body>
 `;
-exports[`Button component with no children
-  appearance: "success", loading: true
- 1`] = `
-<body>
-  <div>
-    <button
-      class="Button Button--regular Button--regularSquare Button--success"
-      data-test="DesignSystem-Button"
-      disabled=""
-      tabindex="0"
-    >
-      <svg
-        class="Spinner Spinner--small Button-spinner"
-        data-test="DesignSystem-Button--Spinner"
-        viewBox="0 0 50 50"
-      >
-        <circle
-          class="Circle Circle--white"
-          cx="25"
-          cy="25"
-          fill="none"
-          r="20"
-          stroke-miterlimit="10"
-          stroke-width="4"
-        />
-      </svg>
-      <span
-        class="Text Text--default Text--regular Button-text Button-text--hidden"
-        data-test="DesignSystem-Text"
-      />
-    </button>
-  </div>
-</body>
-`;
 exports[`Button component with no children
   appearance: "transparent", loading: true
  1`] = `

package/core/components/atoms/card/__stories__/empty.story.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Card, CardBody, CardHeader, Heading, Row, Column, Paragraph, Button, EmptyState } from '@/index';
+import { Card, CardBody, CardHeader, Heading, Row, Column, Button, EmptyState } from '@/index';
 import image from './assets/empty.png';
 // CSF format story

package/core/components/atoms/card/__stories__/nested.story.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Card, Row, Column, CardHeader, CardBody, Heading, Text, Badge } from '@/index';
 export const CardWithinACard = () => {

package/core/components/atoms/card/__stories__/scroll.story.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Card, Text, List, CardHeader, Heading, Paragraph } from '@/index';
 import { data } from './data';

package/core/components/atoms/checkbox/Checkbox.tsx CHANGED Viewed

@@ -4,16 +4,15 @@ import Text from '@/components/atoms/text';
 import Icon from '@/components/atoms/icon';
 import { BaseProps, OmitNativeProps } from '@/utils/types';
 import uidGenerator from '@/utils/uidGenerator';
-export type Size = 'regular' | 'tiny';
-type ChangeEvent = React.ChangeEvent<HTMLInputElement>;
+import { ChangeEvent } from '@/common.type';
+export type CheckBoxSize = 'regular' | 'tiny';
 export interface CheckboxProps extends BaseProps, OmitNativeProps<HTMLInputElement, 'onChange'> {
   /**
    * Size of the `Checkbox`
    * @default "regular"
    */
-  size?: Size;
+  size?: CheckBoxSize;
   /**
    * Default value of checked (Used in case of uncontrolled `Checkbox`)
    */
@@ -85,17 +84,17 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>((props
     return ref.current as HTMLInputElement;
   });
-  const [checked, setChecked] = React.useState(props.checked === undefined ? defaultChecked : props.checked);
+  const [checked, setChecked] = React.useState(checkedProp === undefined ? defaultChecked : checkedProp);
   React.useEffect(() => {
     setIndeterminate(indeterminate);
   }, [indeterminate]);
   React.useEffect(() => {
-    if (props.checked !== undefined) {
-      setChecked(props.checked);
+    if (checkedProp !== undefined) {
+      setChecked(checkedProp);
     }
-  }, [props.checked]);
+  }, [checkedProp]);
   const CheckboxClass = classNames(
     {
@@ -129,7 +128,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>((props
   };
   const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (props.checked === undefined) {
+    if (checkedProp === undefined) {
       setChecked(e.target.checked);
       setIndeterminate(e.target.indeterminate);
     }

package/core/components/atoms/checkbox/__stories__/variants/Size.story.tsx CHANGED Viewed

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { text } from '@storybook/addon-knobs';
 import Checkbox from '../../index';
-import { Size } from '../../Checkbox';
+import { CheckBoxSize } from '../../Checkbox';
 import Text from '@/components/atoms/text';
 // CSF format story
 export const size = () => {
-  const sizes: Size[] = ['tiny', 'regular'];
+  const sizes: CheckBoxSize[] = ['tiny', 'regular'];
   const label = text('label', 'Checkbox');
   return (
     <div className="d-flex">

package/core/components/atoms/chip/Chip.tsx CHANGED Viewed

@@ -3,7 +3,7 @@ import GenericChip from '../_chip';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
-export type Type = 'action' | 'selection' | 'input';
+export type ChipType = 'action' | 'selection' | 'input';
 export type Name = number | string;
 export interface ChipProps extends BaseProps {
@@ -30,7 +30,7 @@ export interface ChipProps extends BaseProps {
   /**
    * Type of chip
    */
-  type: Type;
+  type: ChipType;
   /**
    * Handler to be called when Chip is closed
    */
@@ -60,6 +60,7 @@ export const Chip = (props: ChipProps) => {
       [`Chip-${type}--disabled`]: disabled,
       [`Chip--${type}`]: type && !disabled,
       [`Chip-${type}--selected`]: selected && !disabled,
+      [`Chip-selection--selectedDisabled`]: type === 'selection' && selected && disabled,
     },
     className
   );

package/core/components/atoms/chip/__stories__/variants/Selection.story.tsx CHANGED Viewed

@@ -42,6 +42,23 @@ export const Selection = () => {
         <br />
         <Text weight="strong">Selected: true</Text>
       </div>
+      <div className="mr-9">
+        <Chip
+          icon={icon}
+          label={label}
+          clearButton={true}
+          type="selection"
+          onClose={action(`onClose: ${name}`)}
+          onClick={action(`onClick: ${name}`)}
+          selected={true}
+          disabled={true}
+          name={'chip'}
+        />
+        <br />
+        <Text weight="strong">Selected: true</Text>
+        <br></br>
+        <Text weight="strong">Disabled: true</Text>
+      </div>
     </div>
   );
 };

package/core/components/atoms/chip/__stories__/variants/Type.story.tsx CHANGED Viewed

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { boolean, text } from '@storybook/addon-knobs';
-import Chip, { Type } from '../../Chip';
+import Chip, { ChipType } from '../../Chip';
 import { action } from '@storybook/addon-actions';
 import Text from '@/components/atoms/text';
 export const Types = () => {
-  const types: Type[] = ['action', 'selection', 'input'];
+  const types: ChipType[] = ['action', 'selection', 'input'];
   const icon = text('icon', 'assessment');
   const label = text('label', 'ChipLabel');
   const clearButton = boolean('clearButton', true);

package/core/components/atoms/chip/__tests__/Chip.test.tsx CHANGED Viewed

@@ -131,4 +131,11 @@ describe('Chip component', () => {
     fireEvent.click(onClose);
     expect(FunctionValue).toHaveBeenCalled();
   });
+  it('renders chip component with prop: selected, disabled and type selection', () => {
+    const { queryByTestId } = render(
+      <Chip label="Chip" name="Chip" type="selection" disabled={true} selected={true} />
+    );
+    expect(queryByTestId('DesignSystem-Chip--GenericChip')).toHaveClass('Chip-selection--selectedDisabled');
+  });
 });

package/core/components/atoms/chipGroup/__tests__/__snapshots__/chipGroup.test.tsx.snap CHANGED Viewed

@@ -39,7 +39,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 Chip-icon Chip-icon--left"
             data-test="DesignSystem-GenericChip--Icon"
             style="font-size: 16px; width: 16px;"
           >
@@ -52,9 +52,11 @@ exports[`ChipGroup component
             Input
           </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;"
+            tabindex="0"
           >
             clear_round
           </i>
@@ -75,7 +77,7 @@ exports[`ChipGroup component
             assessment_round
           </i>
           <span
-            class="Text Text--default Text--regular"
+            class="Text Text--link Text--regular"
             data-test="DesignSystem-GenericChip--Text"
           >
             Selection
@@ -83,7 +85,9 @@ exports[`ChipGroup component
           <i
             class="material-icons material-icons-round Icon Icon--info Chip-icon Chip-icon--right cursor-pointer"
             data-test="DesignSystem-GenericChip--clearButton"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             clear_round
           </i>
@@ -97,7 +101,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 Chip-icon Chip-icon--left"
             data-test="DesignSystem-GenericChip--Icon"
             style="font-size: 16px; width: 16px;"
           >
@@ -110,9 +114,11 @@ exports[`ChipGroup component
             Selection
           </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;"
+            tabindex="0"
           >
             clear_round
           </i>

package/core/components/atoms/chipGroup/__tests__/chipGroup.test.tsx CHANGED Viewed

@@ -3,9 +3,9 @@ import { render, fireEvent } from '@testing-library/react';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
 import { ChipGroup } from '@/index';
 import { ChipGroupProps as Props } from '@/index.type';
-import { Type } from '../../chip/Chip';
+import { ChipType } from '../../chip/Chip';
-const type: Type[] = ['action', 'input', 'selection'];
+const type: ChipType[] = ['action', 'input', 'selection'];
 const FunctionValue = jest.fn();
 const onClick = jest.fn();
 const onClose = jest.fn();

package/core/components/atoms/chipGroup/_stories_/index.story.tsx CHANGED Viewed

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { Type } from '../../chip/Chip';
+import { ChipType } from '../../chip/Chip';
 import { action } from '@storybook/addon-actions';
 import { ChipGroup } from '../ChipGroup';
 export const all = () => {
-  const type: Type[] = ['action', 'input', 'selection'];
+  const type: ChipType[] = ['action', 'input', 'selection'];
   const list = [
     {
       label: 'Action',

package/core/components/atoms/collapsible/__tests__/__snapshots__/Collapsible.test.tsx.snap CHANGED Viewed

@@ -30,7 +30,9 @@ exports[`Collapsible component
           <i
             class="material-icons material-icons-round Icon px-5 py-4 my-2 cursor-pointer"
             data-test="DesignSystem-Collapsible--FooterIcon"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             keyboard_arrow_right_round
           </i>
@@ -71,7 +73,9 @@ exports[`Collapsible component
           <i
             class="material-icons material-icons-round Icon px-5 py-4 my-2 cursor-pointer"
             data-test="DesignSystem-Collapsible--FooterIcon"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             keyboard_arrow_right_round
           </i>
@@ -112,7 +116,9 @@ exports[`Collapsible component
           <i
             class="material-icons material-icons-round Icon px-5 py-4 my-2 cursor-pointer"
             data-test="DesignSystem-Collapsible--FooterIcon"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             keyboard_arrow_left_round
           </i>
@@ -154,7 +160,9 @@ exports[`Collapsible component
           <i
             class="material-icons material-icons-round Icon px-5 py-4 my-2 cursor-pointer"
             data-test="DesignSystem-Collapsible--FooterIcon"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             keyboard_arrow_left_round
           </i>

package/core/components/atoms/divider/Divider.tsx ADDED Viewed

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { BaseProps, extractBaseProps } from '@/utils/types';
+type DividerType = 'basic' | 'header';
+export interface DividerProps extends BaseProps {
+  /**
+   * Determines if orientation of `Divider` is vertical
+   */
+  vertical: boolean;
+  /**
+   * Types of `Divider`
+   * @default "basic"
+   */
+  appearance: DividerType;
+}
+export const Divider = (props: DividerProps) => {
+  const { vertical, appearance, className } = props;
+  const baseProps = extractBaseProps(props);
+  const DividerClass = classNames(
+    {
+      ['Divider']: true,
+      ['Divider--horizontal']: !vertical,
+      ['Divider--vertical']: vertical,
+      ['Divider--basic']: appearance !== 'header',
+      ['Divider--header']: !vertical && appearance === 'header',
+    },
+    className
+  );
+  return <hr data-test="DesignSystem-Divider" {...baseProps} className={DividerClass} />;
+};
+Divider.displayName = 'Divider';
+Divider.defaultProps = {
+  appearance: 'basic',
+  vertical: false,
+};
+export default Divider;

package/core/components/atoms/divider/__stories__/BasicDividerInCard.story.tsx ADDED Viewed

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { Divider, Row, Column, Card, CardBody, Text, Badge } from '@/index';
+export const BasicDividerInCard = () => {
+  return (
+    <Row>
+      <Column size="5">
+        <Card className="pt-6" shadow="none">
+          <CardBody>
+            <Row>
+              <Column size={10}>
+                <Text appearance="disabled">MSSP - Track 3</Text>
+              </Column>
+              <Column size={2}>
+                <Badge appearance="success" subtle={true}>
+                  ACTIVE
+                </Badge>
+              </Column>
+            </Row>
+            <br />
+            <Text small={true}>Medicare</Text>
+            <br />
+            <div className="py-6">
+              <Text appearance="disabled" small={true}>
+                Subscriber
+              </Text>
+              <br />
+              <Text appearance="disabled">LAWSON, JOY (Self)</Text>
+              <br />
+              <Text weight="medium">ZGP123456789</Text>
+            </div>
+          </CardBody>
+          {/* Horizontal Divider */}
+          <Divider />
+          <CardBody className="pt-4">
+            <Row>
+              <Column>
+                <Text appearance="disabled" small={true}>
+                  Last attr:
+                </Text>
+                <Text className="ml-3" small={true}>
+                  04/19
+                </Text>
+              </Column>
+              <Column>
+                <Text appearance="disabled" small={true}>
+                  Plan ID:
+                </Text>
+                <Text className="ml-3" small={true}>
+                  040
+                </Text>
+              </Column>
+              <Column>
+                <Text appearance="disabled" small={true}>
+                  Payer ID:
+                </Text>
+                <Text className="ml-3" small={true}>
+                  001
+                </Text>
+              </Column>
+            </Row>
+          </CardBody>
+        </Card>
+      </Column>
+    </Row>
+  );
+};
+export default {
+  title: 'Components/Divider/Basic Divider In Card',
+  component: Divider,
+};