@innovaccer/design-system 2.5.0-4 → 2.6.0

package/core/components/atoms/button/__stories__/variants/state/Primary.story.tsx

@@ -10,7 +10,7 @@ export const primary = () => {
   const expanded = false;
   const loading = false;
 
-  const children = text('children', 'Button');
+  const children = text('children', 'Login');
 
   const style = {
     justifyContent: 'space-between',
@@ -27,6 +27,7 @@ export const primary = () => {
           expanded={expanded}
           disabled={disabled}
           loading={loading}
+          aria-label="Login"
         >
           {children}
         </Button>
@@ -43,6 +44,7 @@ export const primary = () => {
           expanded={expanded}
           disabled={true}
           loading={loading}
+          aria-label="Login"
         >
           {children}
         </Button>
@@ -59,28 +61,13 @@ export const primary = () => {
           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={'primary'}
-          size={'regular'}
-          expanded={expanded}
-          disabled={disabled}
-          loading={true}
-        >
-          {children}
-        </Button>
-        <br />
-        <Text weight="strong">Loading with Text</Text>
-      </div>
     </div>
   );
 };
@@ -92,6 +79,9 @@ export default {
     docs: {
       docPage: {
         title: 'Button',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Login'\` to describe the action of button 
+         `,
       },
     },
   },

package/core/components/atoms/button/__stories__/variants/state/Success.story.tsx

@@ -10,7 +10,7 @@ export const success = () => {
   const expanded = false;
   const loading = false;
 
-  const children = text('children', 'Button');
+  const children = text('children', 'Submit');
 
   const style = {
     justifyContent: 'space-between',
@@ -28,6 +28,7 @@ export const success = () => {
           expanded={expanded}
           disabled={disabled}
           loading={loading}
+          aria-label="Submit form"
         >
           {children}
         </Button>
@@ -44,6 +45,7 @@ export const success = () => {
           expanded={expanded}
           disabled={true}
           loading={loading}
+          aria-label="Submit form"
         >
           {children}
         </Button>
@@ -60,28 +62,13 @@ export const success = () => {
           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={'success'}
-          size={'regular'}
-          expanded={expanded}
-          disabled={disabled}
-          loading={true}
-        >
-          {children}
-        </Button>
-        <br />
-        <Text weight="strong">Loading with Text</Text>
-      </div>
     </div>
   );
 };
@@ -93,6 +80,9 @@ export default {
     docs: {
       docPage: {
         title: 'Button',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Submit form'\` to describe the action of button 
+         `,
       },
     },
   },

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

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

@@ -54,7 +54,9 @@ exports[`ChipGroup component
           <i
             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;"
+            tabindex="0"
           >
             clear_round
           </i>
@@ -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>
@@ -112,7 +116,9 @@ exports[`ChipGroup component
           <i
             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;"
+            tabindex="0"
           >
             clear_round
           </i>

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

@@ -12,7 +12,7 @@ export const all = () => {
     <div className="d-flex">
       <Collapsible expanded={expanded} hoverable={hoverable} height="100vh" onToggle={setExpanded}>
         <div className="d-flex pt-4">
-          <Icon name="events" className="d-flex align-items-center px-5" />
+          <Icon name="events" className="d-flex align-items-center px-5 Text--regular" />
           {expanded && <Text className="mr-6">Collapsible</Text>}
         </div>
       </Collapsible>
@@ -31,7 +31,7 @@ const customCode = `() => {
         onToggle={setExpanded}
       >
         <div className="d-flex pt-4">
-          <Icon name="events" className="d-flex align-items-center px-5" />
+          <Icon name="events" className="d-flex align-items-center px-5 Text--regular" />
           {expanded && (
             <Text className="mr-6">Collapsible</Text>
           )}

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

@@ -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

@@ -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

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

package/core/components/atoms/divider/__stories__/HeaderDividerInCard.story.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { Divider, Row, Column, Card, CardBody, Radio, Heading } from '@/index';
+
+export const HeaderDividerInCard = () => {
+  return (
+    <Row>
+      <Column size="6">
+        <Card className="pb-6" shadow="none">
+          <CardBody className="p-0">
+            <Row className="p-4">
+              <Heading size="s">Section 1</Heading>
+            </Row>
+
+            <Divider appearance="header" />
+
+            <div className="px-4 pt-4">
+              <Heading size="s">1. Little interest or pleasure in doing things.</Heading>
+              <br />
+              <Column className="px-4">
+                <Radio defaultChecked={true} label="Not at all" name="section" size="regular" value="Not at all" />
+                <Radio label="Several Days" name="section" size="regular" value="Several Days" />
+                <Radio label="More than half the days" name="section" size="regular" value="More than half days" />
+              </Column>
+            </div>
+          </CardBody>
+        </Card>
+      </Column>
+    </Row>
+  );
+};
+
+export default {
+  title: 'Components/Divider/Header Divider In Card',
+  component: Divider,
+};

package/core/components/atoms/divider/__stories__/IndentedDivider.story.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Divider, Row, Column, Card, CardBody, Heading, Input, Text } from '@/index';
+
+export const IndentedDivider = () => {
+  return (
+    <Row>
+      <Column size="6">
+        <Heading size="m">Select assessment</Heading>
+        <Card>
+          <CardBody className="p-0">
+            <Row className="p-6">
+              <Column size={8}>
+                <Input className="w-25" icon="search" name="input" placeholder="Search" />
+              </Column>
+            </Row>
+
+            <Divider appearance="header" />
+
+            <div className="pl-6">
+              <div className="py-6">
+                <Text>Functional Assessment - Initial</Text>
+              </div>
+              <Divider />
+
+              <div className="py-6">
+                <Text>Functional Assessment - Discharge</Text>
+              </div>
+              <Divider />
+
+              <div className="py-6">
+                <Text>Social Influence of Health</Text>
+              </div>
+              <Divider />
+
+              <div className="py-6">
+                <Text>Social Determinants of Health</Text>
+              </div>
+            </div>
+          </CardBody>
+        </Card>
+      </Column>
+    </Row>
+  );
+};
+
+export default {
+  title: 'Components/Divider/Indented Divider',
+  component: Divider,
+};

package/core/components/atoms/divider/__stories__/Vertical.story.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { Divider, Row, Column, Card, CardBody, Text, Heading, Radio } from '@/index';
+
+export const VerticalDivider = () => {
+  return (
+    <Row>
+      <Column size="8">
+        <Card shadow="none">
+          <CardBody className="p-0">
+            <Row>
+              <Column className="p-6">
+                <Text appearance="disabled">MSSP - Track 3</Text>
+                <br />
+                <Text small={true}>Medicare</Text>
+                <br />
+                <div className="pt-6">
+                  <Text appearance="disabled" small={true}>
+                    Subscriber
+                  </Text>
+                  <br />
+                  <Text appearance="disabled">LAWSON, JOY (Self)</Text>
+                  <br />
+                  <Text weight="medium">ZGP123456789</Text>
+                </div>
+              </Column>
+
+              <Divider vertical={true} />
+
+              <Column className="p-6">
+                <div>
+                  <Heading size="s">1. Little interest or pleasure in doing things.</Heading>
+                  <br />
+                  <Column className="px-4">
+                    <Radio defaultChecked={true} label="Not at all" name="section" size="regular" value="Not at all" />
+                    <Radio label="Several Days" name="section" size="regular" value="Several Days" />
+                    <Radio label="More than half the days" name="section" size="regular" value="More than half days" />
+                  </Column>
+                </div>
+              </Column>
+            </Row>
+          </CardBody>
+        </Card>
+      </Column>
+    </Row>
+  );
+};
+
+export default {
+  title: 'Components/Divider/Vertical Divider',
+  component: Divider,
+};

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

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { Divider, Row, Column, Card, CardBody, Text, Heading } from '@/index';
+
+export const All = () => {
+  return (
+    <Row>
+      <Column size="10">
+        <Card shadow="none">
+          <CardBody className="p-0">
+            <Row className="py-4 px-6">
+              <Heading>Assessment Report</Heading>
+            </Row>
+
+            <Divider appearance="header" />
+            <Row>
+              <Column>
+                <div className="p-6">
+                  <Heading size="s">Select Assessment</Heading>
+                </div>
+                <Divider />
+                <div className="pl-6">
+                  <div className="py-4">
+                    <Text>Functional Assessment - Initial</Text>
+                  </div>
+                  <Divider />
+
+                  <div className="py-4">
+                    <Text>Social Influence of Health</Text>
+                  </div>
+                  <Divider />
+
+                  <div className="py-4">
+                    <Text>Social Determinants of Health</Text>
+                  </div>
+                  <Divider />
+
+                  <div className="py-4">
+                    <Text>Functional Assessment - Discharge</Text>
+                  </div>
+                </div>
+              </Column>
+              <Divider vertical={true} />
+
+              <Column>
+                <div className="p-6">
+                  <Text appearance="disabled">MSSP - Track 3</Text>
+                  <br />
+                  <Text small={true}>Medicare</Text>
+                  <br />
+                  <div className="pt-6">
+                    <Text appearance="disabled" small={true}>
+                      Subscriber
+                    </Text>
+                    <br />
+                    <Text appearance="disabled">LAWSON, JOY (Self)</Text>
+                    <br />
+                    <Text weight="medium">ZGP123456789</Text>
+                  </div>
+                </div>
+                <Divider />
+                <Row className="p-6">
+                  <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>
+                </Row>
+              </Column>
+            </Row>
+          </CardBody>
+        </Card>
+      </Column>
+    </Row>
+  );
+};
+
+export default {
+  title: 'Components/Divider/All',
+  component: Divider,
+};

package/core/components/atoms/divider/__stories__/variants/HorizontalDivider.story.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Divider, Row, Column, Text } from '@/index';
+
+export const HorizontalDivider = () => {
+  return (
+    <div>
+      <Row>
+        <Column className="p-6">
+          <Divider />
+          <br />
+          <Text weight="strong">Default Divider</Text>
+        </Column>
+
+        <Column className="p-6">
+          <Divider appearance="header" />
+          <br />
+          <Text weight="strong">Header Divider</Text>
+        </Column>
+      </Row>
+    </div>
+  );
+};
+
+export default {
+  title: 'Components/Divider/variants/Horizontal Divider',
+  component: Divider,
+};