@innovaccer/design-system 2.13.2 → 2.13.4-1

package/core/components/atoms/checkbox/__stories__/Alignment.story.jsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Checkbox, Label, Row, Column, Text } from '@/index';
+import { Checkbox, Label, Row, Column, Text, Heading } from '@/index';
 
 const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
 
@@ -7,15 +7,7 @@ export const AlignmentOfCheckboxGroup = () => (
   <div>
     <Row>
       <Column>
-        <Label>Days</Label>
-        {days.map((day, index) => {
-          return <Checkbox key={index} label={day} defaultChecked={index < 2} className={index !== 0 ? 'mt-4' : ''} />;
-        })}
-        <div className="pt-5">
-          <Text>Vertical Alignment</Text>
-        </div>
-      </Column>
-      <Column>
+        <Heading size="s">Horizontal Alignment</Heading>
         <Label>Days</Label>
         <div className="d-flex">
           {days.map((day, index) => {
@@ -24,9 +16,15 @@ export const AlignmentOfCheckboxGroup = () => (
             );
           })}
         </div>
-        <div className="pt-5">
-          <Text>Horizontal Alignment</Text>
-        </div>
+      </Column>
+    </Row>
+    <Row>
+      <Column className="pt-5 mt-8">
+        <Heading size="s">Vertical Alignment</Heading>
+        <Label>Days</Label>
+        {days.map((day, index) => {
+          return <Checkbox key={index} label={day} defaultChecked={index < 2} className={index !== 0 ? 'mt-4' : ''} />;
+        })}
       </Column>
     </Row>
   </div>

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

@@ -10,6 +10,7 @@ import {
   _showSelectedItems,
   _isOpenControlled,
   _isSelectAllPresent,
+  scrollToOptionIndex,
 } from './utility';
 import { BaseProps } from '@/utils/types';
 import { ChangeEvent } from '@/common.type';
@@ -192,6 +193,10 @@ interface SharedDropdownProps extends DropdownListProps, BaseProps {
    * Callback function called when dropdown is closed
    */
   onClose?: (selected: any[], name?: string | number) => void;
+  /**
+   * Specify the option index which needs to be focused
+   */
+  tabIndex?: number;
 }
 
 type SyncDropdownProps = SyncProps & SharedDropdownProps;
@@ -219,6 +224,7 @@ interface DropdownState {
   selected: OptionSchema[];
   tempSelected: OptionSchema[];
   previousSelected: OptionSchema[];
+  scrollIndex?: number;
 }
 
 /**
@@ -383,6 +389,11 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
 
     fetchFunction(searchTerm).then((res: any) => {
       const { options, count } = res;
+      if (res.scrollToIndex) {
+        setTimeout(() => {
+          scrollToOptionIndex(res.scrollToIndex, options);
+        }, 0);
+      }
       if (!res.searchTerm || (res.searchTerm && res.searchTerm === this.state.searchTerm)) {
         updatedAsync = searchTerm === '' ? count > this.staticLimit : updatedAsync;
 
@@ -395,6 +406,7 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
 
         this.setState({
           ...this.state,
+          scrollIndex: res.scrollToIndex || 0,
           optionsLength,
           loading: false,
           async: updatedAsync,
@@ -716,14 +728,17 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
       selectAll,
       triggerLabel,
       previousSelected,
+      scrollIndex,
     } = this.state;
 
     const { withSelectAll = true, withCheckbox } = this.props;
 
-    const { triggerOptions = {}, selected, ...rest } = this.props;
+    const { triggerOptions = {}, selected, tabIndex, ...rest } = this.props;
     const remainingOptionsLen = searchedOptionsLength - options.length;
 
-    const firstEnabledOption = _isSelectAllPresent(searchTerm, remainingOptionsLen, withSelectAll, withCheckbox)
+    const firstEnabledOption = tabIndex
+      ? tabIndex
+      : _isSelectAllPresent(searchTerm, remainingOptionsLen, withSelectAll, withCheckbox)
       ? 0
       : options.findIndex((option) => !option.disabled);
 
@@ -752,6 +767,7 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
         onOptionSelect={this.onOptionSelect}
         onSelectAll={this.onSelectAll}
         customTrigger={triggerOptions.customTrigger}
+        scrollIndex={scrollIndex}
         {...rest}
       />
     );

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { scrollIntoView, _isEqual, _isSelectAllPresent } from './utility';
+import { scrollIntoView, _isEqual, _isSelectAllPresent, scrollToOptionIndex } from './utility';
 import { Popover, Checkbox, Button, Text, Input } from '@/index';
 import { PopoverProps } from '@/index.type';
 import DropdownButton, { TriggerProps } from './DropdownButton';
@@ -145,6 +145,11 @@ export interface DropdownListProps extends TriggerAndOptionProps {
    * Adds custom placeholder to searchBar
    */
   searchPlaceholder?: string;
+  /**
+   * Specify index of option where cursor should scroll
+   * @ignore
+   */
+  scrollIndex?: number;
 }
 
 interface OptionsProps extends DropdownListProps, BaseProps {
@@ -212,6 +217,7 @@ const DropdownList = (props: OptionsProps) => {
     toggleDropdown,
     className,
     searchPlaceholder = 'Search..',
+    scrollIndex,
   } = props;
 
   const baseProps = extractBaseProps(props);
@@ -225,10 +231,8 @@ const DropdownList = (props: OptionsProps) => {
   const [popoverStyle, setPopoverStyle] = React.useState<PopoverProps['customStyle']>();
   const [cursor, setCursor] = React.useState(firstEnabledOption);
 
-  // Re-initializes its value to 0 on every re-render
-  let animateOrder = 0;
-
   React.useEffect(() => {
+    let timer: any;
     if (dropdownOpen) {
       const { width, minWidth, maxWidth } = props;
       const popperWidth = triggerRef.current?.clientWidth;
@@ -241,7 +245,18 @@ const DropdownList = (props: OptionsProps) => {
       };
 
       setPopoverStyle(popperWrapperStyle);
+
+      // scrolls to current time
+      if (scrollIndex && tempSelected.length === 0) {
+        timer = setTimeout(() => {
+          scrollToOptionIndex(scrollIndex, listOptions);
+        }, 100);
+      }
     }
+
+    return () => {
+      clearTimeout(timer);
+    };
   }, [dropdownOpen]);
 
   React.useEffect(() => {
@@ -285,27 +300,11 @@ const DropdownList = (props: OptionsProps) => {
     return Dropdown;
   };
 
-  const animateClass = classNames({
-    ['fade-in']: dropdownOpen,
-    ['opacity-0']: dropdownOpen,
-    ['Dropdown-items']: true,
-  });
-
-  const getAnimateOrderStyle = (order: number) => {
-    const animateStyle: React.CSSProperties = {
-      animationDelay: dropdownOpen ? order * 20 + 'ms' : '',
-    };
-    return animateStyle;
-  };
-
   const getDropdownSectionClass = (showClearButton?: boolean) => {
-    return classNames(
-      {
-        ['Dropdown-section']: true,
-        ['Dropdown-section--withClear']: showClearButton,
-      },
-      animateClass
-    );
+    return classNames({
+      ['Dropdown-section']: true,
+      ['Dropdown-section--withClear']: showClearButton,
+    });
   };
 
   const dropdownClass = classNames(
@@ -320,14 +319,11 @@ const DropdownList = (props: OptionsProps) => {
     ['Dropdown-wrapper--wrap']: !truncateOption,
   });
 
-  const SelectAllClass = classNames(
-    {
-      ['Option-checkbox']: true,
-      ['Option-checkbox--active']: cursor === 0,
-      ['OptionWrapper']: true,
-    },
-    animateClass
-  );
+  const SelectAllClass = classNames({
+    ['Option-checkbox']: true,
+    ['Option-checkbox--active']: cursor === 0,
+    ['OptionWrapper']: true,
+  });
 
   const onToggleDropdown = (open: boolean, type?: string) => {
     toggleDropdown(open, type);
@@ -369,7 +365,7 @@ const DropdownList = (props: OptionsProps) => {
   const renderFooter = () => {
     const { footerLabel = 'Search for more options' } = props;
     return (
-      <div className={`Dropdown-footer ${animateClass}`} style={getAnimateOrderStyle(++animateOrder)}>
+      <div className="Dropdown-footer">
         <Text size="small" appearance={'subtle'}>
           {footerLabel}
         </Text>
@@ -382,7 +378,7 @@ const DropdownList = (props: OptionsProps) => {
     const isClearDisabled = selected.every((option) => option.disabled);
 
     return (
-      <div className={getDropdownSectionClass(selectedGroup)} style={getAnimateOrderStyle(++animateOrder)}>
+      <div className={getDropdownSectionClass(selectedGroup)}>
         <Text size="small" appearance={'subtle'}>
           {group}
         </Text>
@@ -404,7 +400,7 @@ const DropdownList = (props: OptionsProps) => {
   const renderApplyButton = () => {
     const disable = _isEqual(previousSelected, tempSelected);
     return (
-      <div className={`Dropdown-buttonWrapper ${animateClass}`} style={getAnimateOrderStyle(++animateOrder)}>
+      <div className="Dropdown-buttonWrapper">
         <Button
           ref={dropdownCancelButtonRef}
           className="mr-4"
@@ -432,7 +428,7 @@ const DropdownList = (props: OptionsProps) => {
 
   const renderSearch = () => {
     return (
-      <div className={`Dropdown-inputWrapper ${animateClass}`} style={getAnimateOrderStyle(++animateOrder)}>
+      <div className="Dropdown-inputWrapper">
         <Input
           name="Dropdown-search"
           icon={'search'}
@@ -469,11 +465,7 @@ const DropdownList = (props: OptionsProps) => {
     const label = selectAllLabel.trim() ? selectAllLabel.trim() : 'Select All';
 
     return (
-      <div
-        style={getAnimateOrderStyle(++animateOrder)}
-        className={SelectAllClass}
-        onMouseEnter={() => updateActiveOption(0, true)}
-      >
+      <div className={SelectAllClass} onMouseEnter={() => updateActiveOption(0, true)}>
         <Checkbox
           label={label}
           onChange={onSelectAll}
@@ -497,22 +489,20 @@ const DropdownList = (props: OptionsProps) => {
     const active = selectAllPresent ? index + 1 === cursor : index === cursor;
     const optionIsSelected = tempSelected.findIndex((option) => option.value === item.value) !== -1;
     return (
-      <div style={getAnimateOrderStyle(++animateOrder)} className={animateClass}>
-        <Option
-          optionData={item}
-          truncateOption={truncateOption}
-          selected={optionIsSelected}
-          index={index}
-          updateActiveOption={updateActiveOption}
-          optionRenderer={optionRenderer}
-          active={active}
-          checkboxes={withCheckbox}
-          menu={menu}
-          onClick={() => optionClickHandler(item)}
-          onChange={(e) => props.onSelect(item, e.target.checked)}
-          optionType={props.optionType}
-        />
-      </div>
+      <Option
+        optionData={item}
+        truncateOption={truncateOption}
+        selected={optionIsSelected}
+        index={index}
+        updateActiveOption={updateActiveOption}
+        optionRenderer={optionRenderer}
+        active={active}
+        checkboxes={withCheckbox}
+        menu={menu}
+        onClick={() => optionClickHandler(item)}
+        onChange={(e) => props.onSelect(item, e.target.checked)}
+        optionType={props.optionType}
+      />
     );
   };
 

package/core/components/atoms/dropdown/__stories__/LabelInline.story.jsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { Dropdown } from '@/index';
+import { Uncontrolled, Controlled } from './_common_/types';
+
+// CSF format story
+export const LabelInline = () => {
+  const options = [
+    {
+      label: 'All',
+      value: 'all',
+      selected: true,
+    },
+    {
+      label: 'Draft',
+      value: 'draft',
+    },
+    {
+      label: 'In Progress',
+      value: 'in_progress',
+    },
+    {
+      label: 'Sent',
+      value: 'sent',
+    },
+    {
+      label: 'Scheduled',
+      value: 'scheduled',
+    },
+    {
+      label: 'Partially Failed',
+      value: 'partially_failed',
+    },
+    {
+      label: 'Completely Failed',
+      value: 'completely_failed',
+    },
+  ];
+  return (
+    <div>
+      <Dropdown options={options} className="w-25" inlineLabel="Status" withCheckbox={true} />
+    </div>
+  );
+};
+
+export default {
+  title: 'Components/Dropdown/Label Inline',
+  component: Dropdown,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Dropdown',
+        props: {
+          components: { Uncontrolled, Controlled },
+        },
+      },
+    },
+  },
+};

package/core/components/atoms/dropdown/__stories__/{LabelPositionInDropdown.story.jsx → LabelOnTop.story.jsx}

@@ -4,7 +4,7 @@ import { Uncontrolled, Controlled } from './_common_/types';
 import Label from '../../label';
 
 // CSF format story
-export const labelPositionInDropdown = () =>{
+export const LabelOnTop = () => {
   const options = [
     {
       label: 'All',
@@ -37,18 +37,17 @@ export const labelPositionInDropdown = () =>{
     },
   ];
   return (
-  <div>
-    <div className="w-25 mb-9">
-      <Label withInput={true}>Status</Label>
-      <Dropdown options={options} className="w-100" withCheckbox={true} />
+    <div>
+      <div className="w-25 mb-9">
+        <Label withInput={true}>Status</Label>
+        <Dropdown options={options} className="w-100" withCheckbox={true} />
+      </div>
     </div>
-    <Dropdown options={options} className="w-25" inlineLabel="Status" withCheckbox={true} />
-  </div>
   );
-}
+};
 
 export default {
-  title: 'Components/Dropdown/Label Position In Dropdown',
+  title: 'Components/Dropdown/Label On Top',
   component: Dropdown,
   parameters: {
     docs: {

package/core/components/atoms/dropdown/option/DefaultOption.tsx

@@ -19,7 +19,7 @@ const DefaultOption = (props: OptionTypeProps) => {
     >
       {/* eslint-enable  */}
       <div className={'Option-label'}>
-        <Text className={textClassName} appearance={appearance}>
+        <Text className={textClassName} appearance={appearance} id={optionData.optionID}>
           {label}
         </Text>
       </div>

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

@@ -51,3 +51,9 @@ export const getSelectAll = (selected: Option[], optionsLength: number, disabled
   }
   return { indeterminate: false, checked: false };
 };
+
+export const scrollToOptionIndex = (scrollIndex: number, listOptions: any) => {
+  const optionID = listOptions && listOptions[scrollIndex]?.optionID;
+  const targetOption = document.getElementById(optionID);
+  targetOption && targetOption.scrollIntoView && targetOption.scrollIntoView({ block: 'center' });
+};

package/core/components/atoms/icon/__stories__/variants/Image.story.jsx

@@ -6,9 +6,9 @@ export const image = () => {
     <Icon size={50}>
       <img
         alt="Innovaccer logo"
-        src="https://innovaccer.com/static/image/site-logo/innovaccer-logo-black.svg"
-        width="150"
-        height="150"
+        src="https://design.innovaccer.com/images/withoutType.png"
+        width="50"
+        height="50"
       />
     </Icon>
   );

package/core/components/css-utilities/Miscellaneous/Miscellaneous.story.tsx

@@ -24,6 +24,10 @@ export const miscellaneous = () => {
       className: 'cursor-pointer',
       properties: 'cursor: pointer;',
     },
+    {
+      className: 'text-decoration--none',
+      properties: 'text-decoration: none;',
+    },
   ];
   return (
     <div className="mt-8 mb-8">

package/core/components/molecules/dropzone/FileSelectorUtils.tsx

@@ -12,6 +12,9 @@ export const COMMON_MIME_TYPES = new Map([
   ['zip', 'application/zip'],
   ['doc', 'application/msword'],
   ['docx', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'],
+  ['csv', 'text/csv'],
+  ['xlss', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],
+  ['xls', 'application/vnd.ms-excel'],
 ]);
 
 const FILES_TO_IGNORE = ['.DS_Store', 'Thumbs.db'];

package/core/components/molecules/sidesheet/__stories__/variants/twoSteps.story.jsx

@@ -3,7 +3,7 @@ import { action } from '@/utils/action';
 import { Heading, Text, Sidesheet, ModalDescription, Button } from '@/index';
 
 export const twoSteps = () => {
-  const [page, setPage] = React.useState(2);
+  const [page, setPage] = React.useState(1);
   const [animate, setAnimate] = React.useState(true);
   const [open, setOpen] = React.useState(false);
   const seperator = false;
@@ -77,7 +77,9 @@ export const twoSteps = () => {
 
   return (
     <div>
-      <Button appearance="primary" onClick={() => setOpen(true)}>Open Sidesheet</Button>
+      <Button appearance="primary" onClick={() => setOpen(true)}>
+        Open Sidesheet
+      </Button>
       <Sidesheet {...options}>
         <div className={animate ? 'fade-in' : ''} onAnimationEnd={() => setAnimate(false)}>
           <Heading size="s">{`Page ${page}`}</Heading>
@@ -92,11 +94,11 @@ export const twoSteps = () => {
 
 const customCode = `() => {
   const [open, setOpen] = React.useState(false);
-  const [page, setPage] = React.useState(2);
+  const [page, setPage] = React.useState(1);
   const [animate, setAnimate] = React.useState(true);
 
   const onClose = () => {
-    setOpen(!open);
+    setOpen(false);
   };
 
   React.useEffect(() => {

package/core/components/organisms/calendar/__stories__/index.story.jsx

@@ -13,7 +13,7 @@ export const all = () => {
 
   const endDate = new Date('Jan 20 2021');
 
-  const view = 'year';
+  const view = 'date';
 
   const rangePicker = false;
 
@@ -37,13 +37,11 @@ export const all = () => {
   if (rangeLimit) attr.rangeLimit = rangeLimit;
   if (yearNav !== -1) attr.yearNav = yearNav;
   if (monthNav !== -1) attr.monthNav = monthNav;
-  
+
   // we redefine this function here because in storybook.json we donot get imported functions.
-  const convertToDate = (
-    d, format, validators
-  ) => {
+  const convertToDate = (d, format, validators) => {
     let dateVal;
-  
+
     if (d) {
       if (typeof d === 'number') {
         dateVal = new Date(d);

package/core/components/organisms/dateRangePicker/__stories__/variants/withSingleInput.story.jsx

@@ -28,6 +28,8 @@ export const withSingleInput = () => {
 
   const monthNav = -1;
 
+  const open = false;
+
   const attr = {};
   if (disabledBefore) attr.disabledBefore = disabledBefore;
   if (disabledAfter) attr.disabledAfter = disabledAfter;
@@ -55,6 +57,7 @@ export const withSingleInput = () => {
           label: 'Date',
         }}
         {...attr}
+        open={open}
       />
     </div>
   );

package/core/components/organisms/horizontalNav/__stories__/leftAlign.story.jsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { action } from '@/utils/action';
-import { Modal, Button, Paragraph, HorizontalNav, Dropdown, Label } from '@/index';
+import { Modal, Button, Paragraph, HorizontalNav, Dropdown, Label, Heading } from '@/index';
 
 export const leftAlignedNavigationTabs = () => {
   const options = [];
@@ -44,6 +44,17 @@ export const leftAlignedNavigationTabs = () => {
     setActive(menu);
   };
 
+  const subHeading = (
+    <HorizontalNav align="left" menus={data} active={active} onClick={onClickHandler} className="ml-5 mt-4" />
+  );
+
+  const header = (
+    <div>
+      <Heading className="ml-7 mb-3">Medication</Heading>
+      {subHeading}
+    </div>
+  );
+
   return (
     <div>
       <Paragraph>
@@ -69,9 +80,7 @@ export const leftAlignedNavigationTabs = () => {
         open={open}
         dimension="large"
         onClose={onClose}
-        headerOptions={{
-          heading: 'Medication',
-        }}
+        header={header}
         footer={
           <>
             <Button appearance="basic">Discard</Button>
@@ -80,11 +89,9 @@ export const leftAlignedNavigationTabs = () => {
             </Button>
           </>
         }
+        seperator={true}
       >
-        <div className="pb-4" style={{ borderBottom: 'var(--border)' }}>
-          <HorizontalNav menus={data} active={active} onClick={onClickHandler} />
-        </div>
-        <div className="pt-5 w-50">
+        <div className="py-5 w-50">
           <Label withInput={true} required={true}>
             Type
           </Label>
@@ -144,6 +151,23 @@ const customCode = `() => {
     setActive(menu);
   };
 
+  const subHeading = (
+    <HorizontalNav
+      align="left"
+      menus={data}
+      active={active}
+      onClick={onClickHandler}
+      className="ml-5 mt-4"
+    />
+  );
+
+  const header = (
+    <div>
+      <Heading className="ml-7 mb-3">Medication</Heading>
+      {subHeading}
+    </div>
+  );
+
   return (
     <div>
       <Paragraph>
@@ -160,24 +184,16 @@ const customCode = `() => {
         open={open}
         dimension="large"
         onClose={onClose}
-        headerOptions={{
-          heading: 'Medication',
-        }}
+        header={header}
         footer={(
           <>
             <Button appearance="basic">Discard</Button>
             <Button appearance="primary" className="ml-4">Create</Button>
           </>
         )}
+        seperator={true}
       >
-        <div className="pb-4" style={{ borderBottom: 'var(--border)' }}>
-          <HorizontalNav
-            menus={data}
-            active={active}
-            onClick={onClickHandler}
-          />
-        </div>
-        <div className="pt-5 w-50">
+        <div className="py-5 w-50">
           <Label withInput={true} required={true}>Type</Label>
           <Dropdown
             options={options}

package/core/components/organisms/pageHeader/__stories__/Responsiveness.story.jsx

@@ -75,7 +75,7 @@ export const Responsiveness = () => {
   const navigation = <Navigation menus={navigationData} onClick={onClickHandler} active={active} />;
 
   return (
-    <div className="w-100 p-6 bg-secondary-lightest">
+    <div className="w-100 py-6 bg-secondary-lightest">
       <PageHeader
         navigationPosition="bottom"
         title="Pac Follow-Up Protocol"
@@ -174,7 +174,7 @@ const customCode = `() => {
   );
 
   return (
-    <div className="p-6 bg-secondary-lightest">
+    <div className="py-6 bg-secondary-lightest">
       <PageHeader
         navigationPosition="bottom"
         title="Pac Follow-Up Protocol"

package/core/components/organisms/pageHeader/__stories__/variants/withNavigation.story.jsx

@@ -39,7 +39,7 @@ export const withNavigation = () => {
   };
 
   return (
-    <div className="w-100 p-6 bg-secondary-lightest">
+    <div className="w-100 py-6 bg-secondary-lightest">
       <PageHeader {...options} />
     </div>
   );
@@ -77,7 +77,7 @@ const customCode = `() => {
   };
 
   return (
-    <div className="w-100 p-6 bg-secondary-lightest">
+    <div className="w-100 py-6 bg-secondary-lightest">
       <PageHeader {...options} />
     </div>
   );