@innovaccer/design-system 2.5.0-2 → 2.5.1

package/core/components/molecules/modal/Modal.tsx

@@ -144,21 +144,21 @@ class Modal extends React.Component<ModalProps, ModalState> {
 
   onCloseHandler = (event: KeyboardEvent) => {
     const isTopOverlay = OverlayManager.isTopOverlay(this.modalRef.current);
-    closeOnEscapeKeypress(event, isTopOverlay, this.onOutsideClickHandler)
-  }
+    closeOnEscapeKeypress(event, isTopOverlay, this.onOutsideClickHandler);
+  };
 
   componentDidMount() {
     if (this.props.closeOnEscape) {
       if (this.state.open) {
         OverlayManager.add(this.modalRef.current);
       }
-      document.addEventListener('keydown', this.onCloseHandler)
+      document.addEventListener('keydown', this.onCloseHandler);
     }
   }
 
   componentWillUnmount() {
     if (this.props.closeOnEscape) {
-      document.removeEventListener('keydown', this.onCloseHandler)
+      document.removeEventListener('keydown', this.onCloseHandler);
     }
   }
 
@@ -178,20 +178,21 @@ class Modal extends React.Component<ModalProps, ModalState> {
         });
 
         if (this.props.closeOnEscape) OverlayManager.add(this.modalRef.current);
-
       } else {
-        this.setState({
-          animate: false,
-        }, () => {
-          window.setTimeout(() => {
-            this.setState({
-              open: false
-            });
-          }, 120);
-        });
+        this.setState(
+          {
+            animate: false,
+          },
+          () => {
+            window.setTimeout(() => {
+              this.setState({
+                open: false,
+              });
+            }, 120);
+          }
+        );
 
         if (this.props.closeOnEscape) OverlayManager.remove(this.modalRef.current);
-
       }
     }
   }
@@ -251,12 +252,12 @@ class Modal extends React.Component<ModalProps, ModalState> {
       ['Overlay-container--open']: open,
     });
 
-    const isAPINew = (headerOptions || footerOptions || footer || header);
+    const isAPINew = headerOptions || footerOptions || footer || header;
     const bodyClass = classNames({
       ['Modal-body']: true,
       ['Modal-body--withMargin']: isAPINew ? !!footer : true,
       ['Modal-body--withPadding']: isAPINew ? !footer : true,
-    })
+    });
 
     const baseProps = extractBaseProps(this.props);
     const sizeMap: Record<ModalProps['dimension'], Partial<ColumnProps>> = {

package/core/components/molecules/modal/ModalBody.tsx

@@ -17,7 +17,7 @@ export const ModalBody = (props: ModalBodyProps) => {
   const classes = classNames(
     {
       'Modal-body': true,
-      'Modal-body--withMargin': true
+      'Modal-body--withMargin': true,
     },
     className
   );

package/core/components/molecules/modal/__stories__/Layering.story.tsx

@@ -18,7 +18,7 @@ export const layering = () => {
   const onCloseSecondOverlay = () => {
     updateKnob('openSecondOverlay', false);
     action('on close triggered')();
-  }
+  };
 
   return (
     <div>

package/core/components/molecules/modal/__stories__/NoFooter.story.tsx

@@ -35,7 +35,6 @@ export const noFooter = () => {
           heading: 'Heading',
           subHeading: 'Subheading',
         }}
-
       >
         <Text>Modal Body</Text>
         <ModalDescription

package/core/components/molecules/modal/__stories__/Scrolling.story.tsx

@@ -31,50 +31,36 @@ export const scrolling = () => {
     },
     {
       question:
-      'Moving or speaking so slowly that other people could have noticed? Or the opposite - being so fidgety or restless that you have been moving around a lot more than usual',
+        'Moving or speaking so slowly that other people could have noticed? Or the opposite - being so fidgety or restless that you have been moving around a lot more than usual',
       options: ['Not at all', 'Several Days', 'More than half the days', 'Nearly every day'],
     },
     {
-      question: 'Feeling tired or having little energy?', options: ['Yes', 'No']
+      question: 'Feeling tired or having little energy?',
+      options: ['Yes', 'No'],
     },
     {
-      question: 'Which of the following refers to a programme that aims to enable patients to make better use of information and communication technology for health and health care?',
-      options: [
-        'Patient informatics',
-        'ICT health',
-        'Health-tech',
-        'None of these',
-      ],
+      question:
+        'Which of the following refers to a programme that aims to enable patients to make better use of information and communication technology for health and health care?',
+      options: ['Patient informatics', 'ICT health', 'Health-tech', 'None of these'],
     },
     {
-      question: 'The way messages are framed influences people’s intentions and willingness to change their behaviour. Which of the following refers to the type of message framing that gives information about a health behaviour that emphasizes the costs of failing to take action?',
-      options: [
-        'Gain-framed messages',
-        'Loss-framed messages',
-        'Neutrally-framed messages',
-        'None of these',
-      ],
+      question:
+        'The way messages are framed influences people’s intentions and willingness to change their behaviour. Which of the following refers to the type of message framing that gives information about a health behaviour that emphasizes the costs of failing to take action?',
+      options: ['Gain-framed messages', 'Loss-framed messages', 'Neutrally-framed messages', 'None of these'],
     },
     {
-      question: 'Which of the following refers to the capacity to access, understand, appraise and apply health information and services, and to make appropriate health decisions to promote and maintain health?',
-      options: [
-        'health accessibility',
-        'health appraisal',
-        'health literacy',
-        'health promotion',
-      ],
+      question:
+        'Which of the following refers to the capacity to access, understand, appraise and apply health information and services, and to make appropriate health decisions to promote and maintain health?',
+      options: ['health accessibility', 'health appraisal', 'health literacy', 'health promotion'],
     },
     {
-      question: 'Frederich Engels’ book entitled The Condition of the Working Class in England in 1844 provided a detailed description of the appalling living and working conditions and the limited health care of working-class residents in which of the following English cities?',
-      options: [
-        'London',
-        'Manchester',
-        'Liverpool',
-        'None of these',
-      ],
+      question:
+        'Frederich Engels’ book entitled The Condition of the Working Class in England in 1844 provided a detailed description of the appalling living and working conditions and the limited health care of working-class residents in which of the following English cities?',
+      options: ['London', 'Manchester', 'Liverpool', 'None of these'],
     },
     {
-      question: 'Which of the following explanations for health inequalities focus on the individual as the unit of analysis, emphasizing unthinking, reckless or irresponsible behaviour or incautious lifestyle as the moving determinant?',
+      question:
+        'Which of the following explanations for health inequalities focus on the individual as the unit of analysis, emphasizing unthinking, reckless or irresponsible behaviour or incautious lifestyle as the moving determinant?',
       options: [
         'Individualist explanations',
         'Natural and social selection',
@@ -83,13 +69,9 @@ export const scrolling = () => {
       ],
     },
     {
-      question: 'This approach to health promotion is based on the assumption that humans are rational decision-makers, this approach relies heavily upon the provision of information about risks and benefits of certain behaviours.',
-      options: [
-        'Behaviour change approach',
-        'Community development approach',
-        'Biomedical approach',
-        'None of these',
-      ],
+      question:
+        'This approach to health promotion is based on the assumption that humans are rational decision-makers, this approach relies heavily upon the provision of information about risks and benefits of certain behaviours.',
+      options: ['Behaviour change approach', 'Community development approach', 'Biomedical approach', 'None of these'],
     },
   ];
 

package/core/components/molecules/modal/__tests__/Modal.test.tsx

@@ -169,7 +169,7 @@ describe('Modal component with props', () => {
   });
 
   it('renders children without footer props', () => {
-    const { getByTestId, queryByTestId } = render(<Modal backdropClose={FunctionValue} open={true} header={header}/>);
+    const { getByTestId, queryByTestId } = render(<Modal backdropClose={FunctionValue} open={true} header={header} />);
     expect(getByTestId('DesignSystem-ModalContainer')).toBeInTheDocument();
     expect(getByTestId('DesignSystem-Modal')).toBeInTheDocument();
     expect(queryByTestId('Modal-body--withMargin')).not.toBeInTheDocument();

package/core/components/molecules/sidesheet/Sidesheet.tsx

@@ -138,27 +138,26 @@ class Sidesheet extends React.Component<SidesheetProps, SidesheetState> {
 
   onCloseHandler = (event: KeyboardEvent) => {
     const isTopOverlay = OverlayManager.isTopOverlay(this.sidesheetRef.current);
-    closeOnEscapeKeypress(event, isTopOverlay, this.onOutsideClickHandler)
-  }
+    closeOnEscapeKeypress(event, isTopOverlay, this.onOutsideClickHandler);
+  };
 
   componentDidMount() {
     if (this.props.closeOnEscape) {
       if (this.state.open) {
         OverlayManager.add(this.sidesheetRef.current);
       }
-      document.addEventListener('keydown', this.onCloseHandler)
+      document.addEventListener('keydown', this.onCloseHandler);
     }
   }
 
   componentWillUnmount() {
     if (this.props.closeOnEscape) {
-      document.removeEventListener('keydown', this.onCloseHandler)
+      document.removeEventListener('keydown', this.onCloseHandler);
     }
   }
 
   componentDidUpdate(prevProps: SidesheetProps) {
     if (prevProps.open !== this.props.open) {
-
       if (this.props.open) {
         const zIndex = getUpdatedZIndex({
           element: this.element,
@@ -173,21 +172,21 @@ class Sidesheet extends React.Component<SidesheetProps, SidesheetState> {
         });
 
         if (this.props.closeOnEscape) OverlayManager.add(this.sidesheetRef.current);
-
       } else {
-
-        this.setState({
-          animate: false,
-        }, () => {
-          window.setTimeout(() => {
-            this.setState({
-              open: false
-            });
-          }, 120);
-        });
+        this.setState(
+          {
+            animate: false,
+          },
+          () => {
+            window.setTimeout(() => {
+              this.setState({
+                open: false,
+              });
+            }, 120);
+          }
+        );
 
         if (this.props.closeOnEscape) OverlayManager.remove(this.sidesheetRef.current);
-
       }
     }
   }

package/core/components/organisms/choiceList/ChoiceList.tsx

@@ -0,0 +1,212 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Checkbox, Radio, Label } from '@/index';
+import { BaseProps } from '@/utils/types';
+
+export type Alignment = 'horizontal' | 'vertical';
+export type Size = 'regular' | 'tiny';
+type ChangeEvent = React.ChangeEvent<HTMLInputElement>;
+type noop = (ev: ChangeEvent) => void;
+
+export interface Choice {
+  /**
+   * Value of the choice
+   */
+  value: string;
+  /**
+   * Label for the choice
+   */
+  label?: string;
+  /**
+   * Disable choice
+   */
+  disabled?: boolean;
+  /**
+   * Additional text
+   */
+  helpText?: string;
+  /**
+   * Adds name to the choice
+   */
+  name: string;
+}
+export interface ChoiceListProps extends BaseProps {
+  /**
+   * Describes title of the `ChoiceList`
+   */
+  title?: string;
+  /**
+   * Describes Collection of choices
+   */
+  choices: Choice[];
+  /**
+   * Alignment in which the coices will be rendered
+   * @default "vertical"
+   */
+  alignment?: Alignment;
+  /**
+   * Size of the `ChoiceList`
+   * @default "regular"
+   */
+  size?: Size;
+  /**
+   * renders `checkbox` if `true` and renders `radio` if `false` of the `ChoiceList`
+   * @default false
+   */
+  allowMultiple?: boolean;
+  /**
+   * Disable the `ChoiceList`
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Collection of selected choices
+   */
+  selected?: string[];
+  /**
+   * Callback when the selected choices change
+   */
+  onChange?(event: ChangeEvent, selected: string[]): void;
+}
+
+const renderCheckbox = (
+  list: Choice[],
+  handleOnChange: noop,
+  ChoiceListDisabled: boolean,
+  size: Size,
+  alignment: Alignment,
+  selected: string[]
+) => {
+  return list.map((item: Choice, checkboxIndex: number) => {
+    const { name, value, helpText, disabled, label } = item;
+    return (
+      <Checkbox
+        key={checkboxIndex}
+        label={label}
+        onChange={handleOnChange}
+        disabled={disabled || ChoiceListDisabled}
+        helpText={helpText}
+        size={size}
+        name={name}
+        value={value}
+        defaultChecked={selected.length !== 0 && selected.includes(value)}
+        className={getCheckboxClassName(alignment, checkboxIndex)}
+      />
+    );
+  });
+};
+
+const renderRadio = (
+  list: Choice[],
+  handleOnChange: noop,
+  ChoiceListDisabled: boolean,
+  size: Size,
+  alignment: Alignment,
+  selected: string[]
+) => {
+  return list.map((item: Choice, radioIndex: number) => {
+    const { name, value, helpText, disabled, label } = item;
+    return (
+      <Radio
+        key={radioIndex}
+        label={label}
+        onChange={handleOnChange}
+        disabled={disabled || ChoiceListDisabled}
+        helpText={helpText}
+        size={size}
+        name={name}
+        value={value}
+        defaultChecked={selected.length !== 0 && selected.includes(value)}
+        className={getRadioClassName(alignment, radioIndex)}
+      />
+    );
+  });
+};
+
+const getCheckboxClassName = (alignment: Alignment, index: number) => {
+  const ChoiceListCheckboxClass = classNames({
+    [`ChoiceList-checkbox--${alignment}`]: true,
+    ['ml-0']: index === 0 && alignment === 'horizontal',
+    ['mt-0']: index === 0 && alignment === 'vertical',
+  });
+  return ChoiceListCheckboxClass;
+};
+
+const getRadioClassName = (alignment: Alignment, index: number) => {
+  const ChoiceListRadioClass = classNames({
+    [`ChoiceList-radio--${alignment}`]: true,
+    ['ml-0']: index === 0 && alignment === 'horizontal',
+    ['mt-0']: index === 0 && alignment === 'vertical',
+  });
+  return ChoiceListRadioClass;
+};
+
+export const ChoiceList = (props: ChoiceListProps) => {
+  const {
+    title,
+    choices,
+    alignment = 'vertical',
+    allowMultiple = false,
+    onChange,
+    disabled = false,
+    size = 'regular',
+  } = props;
+
+  const { selected = [] } = props;
+  let selectedChoiceValue = (selected && selected) || [];
+  const ChoiceListClass = classNames({
+    ['ChoiceList']: true,
+  });
+
+  const ChoiceListVerticalClass = classNames({
+    ['ChoiceList--alignVertical']: true,
+  });
+
+  const ChoiceHorizontalClass = classNames({
+    ['ChoiceList--alignHorizontal']: true,
+  });
+
+  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.checked && allowMultiple) {
+      if (!selectedChoiceValue.includes(e.target.value)) {
+        selectedChoiceValue = [...selectedChoiceValue, e.target.value];
+      }
+    } else if (!e.target.checked && allowMultiple) {
+      selectedChoiceValue = selectedChoiceValue.filter((el) => el !== e.target.value);
+    }
+    if (!allowMultiple) {
+      if (!selectedChoiceValue.includes(e.target.value)) {
+        selectedChoiceValue = [];
+        selectedChoiceValue = [...selectedChoiceValue, e.target.value];
+      }
+    }
+    if (onChange) onChange(e, selectedChoiceValue);
+  };
+
+  return (
+    <>
+      <fieldset className={ChoiceListClass} data-test="DesignSystem-ChoiceList-Wrapper">
+        {title && title.trim() && <Label>{title.trim()}</Label>}
+        {!!allowMultiple ? (
+          <div className={`${alignment === 'horizontal' ? ChoiceHorizontalClass : ChoiceListVerticalClass}`}>
+            {renderCheckbox(choices, handleOnChange, disabled, size, alignment, selected)}
+          </div>
+        ) : (
+          <div className={`${alignment === 'horizontal' ? ChoiceHorizontalClass : ChoiceListVerticalClass}`}>
+            {renderRadio(choices, handleOnChange, disabled, size, alignment, selected)}
+          </div>
+        )}
+      </fieldset>
+    </>
+  );
+};
+
+ChoiceList.displayName = 'ChoiceList';
+ChoiceList.defaultProps = {
+  alignment: 'vertical',
+  size: 'regular',
+  allowMultiple: false,
+  disabled: false,
+};
+
+export default ChoiceList;

package/core/components/organisms/choiceList/__stories__/Alignment.story.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import ChoiceList from '../ChoiceList';
+
+export const alignment = () => {
+  const label = 'Gender';
+  const alignmentHorizontal = 'horizontal';
+  const gender = [
+    { label: 'Male', name: 'gender', value: 'Male' },
+    { label: 'Female', name: 'gender', value: 'Female' },
+    { label: 'Other', name: 'gender', value: 'Other' },
+  ];
+  const alignmentVertical = 'vertical';
+  const allGender = [
+    { label: 'Male', name: 'allGender', value: 'Male' },
+    { label: 'Female', name: 'allGender', value: 'Female' },
+    { label: 'Other', name: 'allGender', value: 'Other' },
+  ];
+
+  return (
+    <>
+      <ChoiceList choices={gender} title={label} alignment={alignmentHorizontal} onChange={() => {}} />
+      <div className="mt-8">
+        <ChoiceList choices={allGender} title={label} alignment={alignmentVertical} onChange={() => {}} />
+      </div>
+    </>
+  );
+};
+
+export default {
+  title: 'Components/ChoiceList/Alignment',
+  component: ChoiceList,
+};

package/core/components/organisms/choiceList/__stories__/AllowMultiple.story.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ChoiceList from '../ChoiceList';
+
+export const allowMultiple = () => {
+  const label = 'Days';
+  const alignment = 'horizontal';
+  const days = [
+    { label: 'Mon', name: 'days', value: 'mon' },
+    { label: 'Tue', name: 'days', value: 'tue' },
+    { label: 'Wed', name: 'days', value: 'wed' },
+    { label: 'Thu', name: 'days', value: 'thu' },
+    { label: 'Fri', name: 'days', value: 'fri' },
+    { label: 'Sat', name: 'days', value: 'sat' },
+    { label: 'Sun', name: 'days', value: 'sun' },
+  ];
+
+  return <ChoiceList choices={days} title={label} alignment={alignment} allowMultiple={true} onChange={() => {}} />;
+};
+
+export default {
+  title: 'Components/ChoiceList/Allow Multiple',
+  component: ChoiceList,
+};

package/core/components/organisms/choiceList/__stories__/Controlled.story.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import ChoiceList from '../ChoiceList';
+
+export const Controlled = () => {
+  const label = 'Gender';
+  const alignmentHorizontal = 'horizontal';
+  const days = [
+    { label: 'Mon', name: 'days', value: 'mon' },
+    { label: 'Tue', name: 'days', value: 'tue' },
+    { label: 'Wed', name: 'days', value: 'wed' },
+    { label: 'Thu', name: 'days', value: 'thu' },
+    { label: 'Fri', name: 'days', value: 'fri' },
+    { label: 'Sat', name: 'days', value: 'sat' },
+    { label: 'Sun', name: 'days', value: 'sun' },
+  ];
+
+  return (
+    <>
+      <ChoiceList
+        selected={['mon', 'wed', 'sat']}
+        choices={days}
+        allowMultiple={true}
+        title={label}
+        alignment={alignmentHorizontal}
+        onChange={() => {}}
+      />
+    </>
+  );
+};
+
+export default {
+  title: 'Components/ChoiceList/Controlled',
+  component: ChoiceList,
+};

package/core/components/organisms/choiceList/__stories__/index.story.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import ChoiceList from '../ChoiceList';
+
+export const all = () => {
+  const label = 'Gender';
+  const gender = [
+    { label: 'Male', name: 'gender', value: 'Male' },
+    { label: 'Female', name: 'gender', value: 'Female' },
+    { label: 'Other', name: 'gender', value: 'Other' },
+  ];
+
+  return <ChoiceList choices={gender} title={label} onChange={() => {}} />;
+};
+
+export default {
+  title: 'Components/ChoiceList/All',
+  component: ChoiceList,
+};