@innovaccer/design-system 2.5.0 → 2.7.0-0

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

package/core/components/atoms/divider/__tests__/Divider.test.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
+import { Divider } from '@/index';
+import { DividerProps as Props } from '@/index.type';
+
+const appearance = ['basic', 'header'];
+const booleanValue = [true, false];
+
+const testFunc = (props: Record<string, any>): void => {
+  const attr = filterUndefined(props) as Props;
+
+  it(testMessageHelper(attr), () => {
+    const { baseElement } = render(<Divider {...attr} />);
+    expect(baseElement).toMatchSnapshot();
+  });
+};
+
+describe('Divider component snapshots', () => {
+  const mapper: Record<string, any> = {
+    vertical: valueHelper(booleanValue, { required: true, iterate: true }),
+    appearance: valueHelper(appearance, { required: true, iterate: true }),
+  };
+
+  testHelper(mapper, testFunc);
+});
+
+describe('Divider component with orientation:horizontal', () => {
+  it('test for horizontal divider type:Basic', () => {
+    const { getByTestId } = render(<Divider />);
+    expect(getByTestId('DesignSystem-Divider')).toHaveClass('Divider');
+    expect(getByTestId('DesignSystem-Divider')).toHaveClass('Divider--horizontal');
+    expect(getByTestId('DesignSystem-Divider')).toHaveClass('Divider--basic');
+  });
+
+  it('test for horizontal divider type:Header', () => {
+    const { getByTestId } = render(<Divider appearance="header" />);
+    expect(getByTestId('DesignSystem-Divider')).toHaveClass('Divider');
+    expect(getByTestId('DesignSystem-Divider')).toHaveClass('Divider--horizontal');
+    expect(getByTestId('DesignSystem-Divider')).toHaveClass('Divider--header');
+  });
+});
+
+describe('Divider component with orientation:vertical', () => {
+  it('test for Vertical divider', () => {
+    const { getByTestId } = render(<Divider vertical={true} />);
+    expect(getByTestId('DesignSystem-Divider')).toHaveClass('Divider--vertical');
+    expect(getByTestId('DesignSystem-Divider')).toHaveClass('Divider');
+  });
+});

package/core/components/atoms/divider/__tests__/__snapshots__/Divider.test.tsx.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Divider component snapshots 
+  vertical: false, appearance: "basic"
+ 1`] = `
+<body>
+  <div>
+    <hr
+      class="Divider Divider--horizontal Divider--basic"
+      data-test="DesignSystem-Divider"
+    />
+  </div>
+</body>
+`;
+
+exports[`Divider component snapshots 
+  vertical: false, appearance: "header"
+ 1`] = `
+<body>
+  <div>
+    <hr
+      class="Divider Divider--horizontal Divider--header"
+      data-test="DesignSystem-Divider"
+    />
+  </div>
+</body>
+`;
+
+exports[`Divider component snapshots 
+  vertical: true, appearance: "basic"
+ 1`] = `
+<body>
+  <div>
+    <hr
+      class="Divider Divider--vertical Divider--basic"
+      data-test="DesignSystem-Divider"
+    />
+  </div>
+</body>
+`;
+
+exports[`Divider component snapshots 
+  vertical: true, appearance: "header"
+ 1`] = `
+<body>
+  <div>
+    <hr
+      class="Divider Divider--vertical"
+      data-test="DesignSystem-Divider"
+    />
+  </div>
+</body>
+`;

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

@@ -0,0 +1,2 @@
+export { default } from './Divider';
+export * from './Divider';

package/core/components/atoms/dropdown/Dropdown.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { debounce } from 'throttle-debounce';
-import DropdownList, { DropdownListProps, SelectAll, Selected, ChangeEvent } from './DropdownList';
-import { OptionSchema as Option } from './option';
+import DropdownList, { DropdownListProps, SelectAll, Selected } from './DropdownList';
+import { OptionSchema } from './option';
 import {
   getSearchedOptions,
   getSelectAll,
@@ -12,11 +12,12 @@ import {
   _isSelectAllPresent,
 } from './utility';
 import { BaseProps } from '@/utils/types';
+import { ChangeEvent } from '@/common.type';
 
 type fetchOptionsFunction = (searchTerm: string) => Promise<{
   searchTerm?: string;
   count: number;
-  options: Option[];
+  options: OptionSchema[];
 }>;
 
 export type EventType =
@@ -33,7 +34,7 @@ interface ControlledProps {
    * Array of selected options <br/>
    *  **Denotes `Controlled Dropdown`**
    */
-  selected?: Option[];
+  selected?: OptionSchema[];
   /**
    * Callback function to handle different event types in controlled dropdown <br/>
    * **Event type here refers to `clicking on option` / `clicking on Clear, Cancel or Apply button`** <br/>
@@ -49,7 +50,7 @@ interface ControlledProps {
    * | 'apply-selected' | Array of previously selected options | Array of recently selected options |
    * | 'cancel-selected' | Array of previously selected options | Array of recently selected options |
    */
-  onUpdate?: (type: EventType, options?: Option | Option[], recentSelected?: Option[]) => void;
+  onUpdate?: (type: EventType, options?: OptionSchema | OptionSchema[], recentSelected?: OptionSchema[]) => void;
 }
 
 interface SyncProps {
@@ -79,7 +80,7 @@ interface SyncProps {
    * | disabled | Disables the option, making it unable to be pressed | |
    * | group | Defines group to which the option belongs | |
    */
-  options: Option[];
+  options: OptionSchema[];
   /**
    * <pre style="font-family: monospace; font-size: 13px; background: #f8f8f8">
    * Adds loaders inside `Dropdown` when waiting for an action to complete.
@@ -114,7 +115,7 @@ interface TriggerProps {
   /**
    * Callback function to change the label of trigger when options are selected
    */
-  customLabel?: (selected: number, totalOptions?: number, selectedOptions?: Option[]) => string;
+  customLabel?: (selected: number, totalOptions?: number, selectedOptions?: OptionSchema[]) => string;
   /**
    * Adds custom trigger
    */
@@ -206,7 +207,7 @@ export type DropdownProps = ControlledDropdownProps & UncontrolledDropdownProps;
 interface DropdownState {
   async: boolean;
   searchInit: boolean;
-  options: Option[];
+  options: OptionSchema[];
   loading?: boolean;
   optionsApplied: boolean;
   open?: boolean;
@@ -215,9 +216,9 @@ interface DropdownState {
   searchedOptionsLength: number;
   triggerLabel: string;
   selectAll: SelectAll;
-  selected: Option[];
-  tempSelected: Option[];
-  previousSelected: Option[];
+  selected: OptionSchema[];
+  tempSelected: OptionSchema[];
+  previousSelected: OptionSchema[];
 }
 
 /**
@@ -326,7 +327,7 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
     }
   }
 
-  getDisabledOptions = (options: Option[] = []) => {
+  getDisabledOptions = (options: OptionSchema[] = []) => {
     return options.filter((option) => option.disabled);
   };
 
@@ -342,7 +343,7 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
     });
   };
 
-  getUnSelectedOptions = (options: Option[], init: boolean) => {
+  getUnSelectedOptions = (options: OptionSchema[], init: boolean) => {
     if (options.length) {
       if (!init) {
         return options.filter(
@@ -362,7 +363,7 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
     return options;
   };
 
-  getSelectedOptions = (options: Option[], init: boolean) => {
+  getSelectedOptions = (options: OptionSchema[], init: boolean) => {
     const { selected = [] } = this.props;
     if (options.length) {
       if (!init) return this.state.tempSelected;
@@ -493,7 +494,7 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
     return label;
   };
 
-  updateSelectedOptions = (selectedArray: Option[], isSingleSelect: boolean, isControlled?: boolean) => {
+  updateSelectedOptions = (selectedArray: OptionSchema[], isSingleSelect: boolean, isControlled?: boolean) => {
     const { optionsLength, previousSelected, selected, loading, open } = this.state;
 
     const { onChange, withCheckbox, showApplyButton, closeOnSelect, name, onPopperToggle } = this.props;
@@ -528,7 +529,7 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
     }
   };
 
-  onOptionSelect = (option: Option) => {
+  onOptionSelect = (option: OptionSchema) => {
     const { onUpdate, selected } = this.props;
 
     if (_isControlled(selected)) {
@@ -539,7 +540,7 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
     this.updateSelectedOptions([option], true);
   };
 
-  onSelect = (option: Option, checked: boolean) => {
+  onSelect = (option: OptionSchema, checked: boolean) => {
     const { onUpdate, selected, showApplyButton } = this.props;
 
     if (_isControlled(selected) && !showApplyButton) {

package/core/components/atoms/dropdown/DropdownButton.tsx

@@ -2,14 +2,14 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { Icon, Text } from '@/index';
 
-export type Size = 'tiny' | 'regular';
+export type DropDownButtonSize = 'tiny' | 'regular';
 
 export interface TriggerProps {
   /**
    * Size of `Dropdown` trigger button
    * @default "regular"
    */
-  triggerSize?: Size;
+  triggerSize?: DropDownButtonSize;
   /**
    * Material icon name
    */

package/core/components/atoms/dropdown/DropdownList.tsx

@@ -7,8 +7,8 @@ import Option, { OptionRendererProps, OptionSchema } from './option';
 import classNames from 'classnames';
 import Loading from './Loading';
 import { BaseProps, extractBaseProps } from '@/utils/types';
+import { ChangeEvent } from '@/common.type';
 
-export type ChangeEvent = React.ChangeEvent<HTMLInputElement>;
 export type DropdownAlign = 'left' | 'right';
 export type OptionType = 'DEFAULT' | 'WITH_ICON' | 'WITH_META' | 'ICON_WITH_META';
 
@@ -33,9 +33,9 @@ interface PopoverOptions {
   boundaryElement?: PopoverProps['boundaryElement'];
 }
 
-type ListProps = TriggerProps & OptionRendererProps;
+type TriggerAndOptionProps = TriggerProps & OptionRendererProps;
 
-export interface DropdownListProps extends ListProps {
+export interface DropdownListProps extends TriggerAndOptionProps {
   /**
    * Aligns the `Dropdown` left/right
    * @default "right"
@@ -141,6 +141,10 @@ export interface DropdownListProps extends ListProps {
    * </pre>
    */
   popoverOptions?: PopoverOptions;
+  /**
+   * Adds custom placeholder to searchBar
+   */
+  searchPlaceholder?: string;
 }
 
 interface OptionsProps extends DropdownListProps, BaseProps {
@@ -207,6 +211,7 @@ const DropdownList = (props: OptionsProps) => {
     cancelOptions,
     toggleDropdown,
     className,
+    searchPlaceholder = 'Search..',
   } = props;
 
   const baseProps = extractBaseProps(props);
@@ -410,7 +415,9 @@ const DropdownList = (props: OptionsProps) => {
           name="Dropdown-search"
           icon={'search'}
           value={searchTerm}
-          placeholder={'Search..'}
+          placeholder={searchPlaceholder}
+          // TODO(a11y): research more on this.
+          // eslint-disable-next-line jsx-a11y/no-autofocus
           autoFocus={true}
           onChange={searchHandler}
           onClear={searchClearHandler}
@@ -440,7 +447,7 @@ const DropdownList = (props: OptionsProps) => {
     const label = selectAllLabel.trim() ? selectAllLabel.trim() : 'Select All';
 
     return (
-      <div className={SelectAllClass} onMouseEnter={(_e) => updateActiveOption(0, true)}>
+      <div className={SelectAllClass} onMouseEnter={() => updateActiveOption(0, true)}>
         <Checkbox
           label={label}
           onChange={onSelectAll}
@@ -567,7 +574,7 @@ const DropdownList = (props: OptionsProps) => {
         event.preventDefault();
         dropdownOpen ? focusOption('up', optionClass) : onToggleDropdown(!dropdownOpen);
         break;
-      case 'Enter':
+      case 'Enter': {
         const activeElement = document.activeElement;
         if (dropdownOpen && (inputRef.current === activeElement || dropdownTriggerRef.current === activeElement)) {
           event.preventDefault();
@@ -578,7 +585,8 @@ const DropdownList = (props: OptionsProps) => {
         }
         if (!dropdownOpen) onToggleDropdown(!dropdownOpen);
         break;
-      case 'Tab':
+      }
+      case 'Tab': {
         if (!showApplyButton && dropdownOpen) {
           event.preventDefault();
           onToggleDropdown(false, 'onClick');
@@ -608,12 +616,15 @@ const DropdownList = (props: OptionsProps) => {
         }
 
         break;
+      }
       default:
         break;
     }
   };
 
   return (
+    //TODO(a11y)
+    //eslint-disable-next-line
     <div {...baseProps} className={dropdownClass} ref={triggerRef} onKeyDown={onkeydown}>
       <Popover
         onToggle={onToggleDropdown}

package/core/components/atoms/dropdown/Loading.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import PlaceholderParagraph from '@/components/atoms/placeholderParagraph';
 import Placeholder from '@/components/molecules/placeholder';
 

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

@@ -0,0 +1,45 @@
+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 = () => (
+  <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',
+  component: Dropdown,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Dropdown',
+        props: {
+          exclude: ['showHead'],
+        },
+      },
+    },
+  },
+};

package/core/components/atoms/dropdown/__stories__/_common_/types.tsx

@@ -1,4 +1,7 @@
 import { UncontrolledDropdownProps, ControlledDropdownProps } from '@/components/atoms/dropdown';
 
+// TODO(eslint): Fix this
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const Controlled = (_props: ControlledDropdownProps) => {};
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const Uncontrolled = (_props: UncontrolledDropdownProps) => {};