@innovaccer/design-system 2.5.0 → 2.7.0-0

package/core/components/organisms/table/__stories__/syncTable.story.tsx

@@ -10,13 +10,15 @@ export const syncTable = () => {
   return (
     <div
       style={{
-        height: '350px',
+        height: '550px',
       }}
     >
       <Card className="h-100 overflow-hidden">
         <Table
           loaderSchema={loaderSchema}
-          data={data}
+          data={[...Array(100)].map((_, index) => {
+            return data[index % 10];
+          })}
           schema={schema}
           withHeader={true}
           withCheckbox={true}
@@ -38,7 +40,7 @@ export const syncTable = () => {
             );
           }}
           withPagination={true}
-          pageSize={5}
+          pageSize={50}
           onPageChange={(newPage) => action(`on-page-change:- ${newPage}`)()}
         />
       </Card>
@@ -48,7 +50,13 @@ export const syncTable = () => {
 
 const customCode = `
 () => {
-  const data = ${JSON.stringify(data.slice(0, 10), null, 4)};
+  const data = ${JSON.stringify(
+    [...Array(100)].map((_, index) => {
+      return data[index % 10];
+    }),
+    null,
+    4
+  )};
 
   const schema = [
     {
@@ -155,7 +163,7 @@ const customCode = `
   return (
     <div
       style={{
-        height: '350px',
+        height: '550px',
       }}
     >
       <Card className="h-100 overflow-hidden">
@@ -176,7 +184,7 @@ const customCode = `
           withCheckbox={true}
           onSelect={(rowIndex, selected, selectedList, selectAll) => console.log(\`on-select:- rowIndex: \${rowIndex} selected: \${selected} selectedList: \${JSON.stringify(selectedList)} selectAll: \${selectAll}\`)}
           withPagination={true}
-          pageSize={5}
+          pageSize={50}
           onPageChange={newPage => console.log(\`on-page-change:- \${newPage}\`)}
         />
       </Card>

package/core/components/organisms/table/__stories__/variants/showHead.story.tsx

@@ -12,10 +12,10 @@ export const showHead = () => {
   const style = {
     display: 'flex',
     flexWrap: 'wrap',
-  };
+  } as const;
+  // to freeze the object for typescript
 
   return (
-    // @ts-ignore
     <div style={style}>
       {values.map((v, index) => (
         <div

package/core/components/organisms/table/__stories__/variants/showMenu.story.tsx

@@ -12,10 +12,10 @@ export const showMenu = () => {
   const style = {
     display: 'flex',
     flexWrap: 'wrap',
-  };
+  } as const;
+  // to freeze the object for typescript
 
   return (
-    // @ts-ignore
     <div style={style}>
       {values.map((v, index) => (
         <div

package/core/components/organisms/table/__stories__/variants/size.story.tsx

@@ -12,10 +12,10 @@ export const size = () => {
   const style = {
     display: 'flex',
     flexWrap: 'wrap',
-  };
+  } as const;
+  // to freeze the object for typescript
 
   return (
-    // @ts-ignore
     <div style={style}>
       {values.map((v, index) => (
         <div

package/core/components/organisms/table/__stories__/variants/type.story.tsx

@@ -13,10 +13,10 @@ export const type = () => {
   const style = {
     display: 'flex',
     flexWrap: 'wrap',
-  };
+  } as const;
+  // to freeze the object for typescript
 
   return (
-    // @ts-ignore
     <div style={style}>
       {values.map((v, index) => (
         <div

package/core/components/organisms/table/__stories__/variants/withCheckbox.story.tsx

@@ -13,10 +13,10 @@ export const withCheckbox = () => {
   const style = {
     display: 'flex',
     flexWrap: 'wrap',
-  };
+  } as const;
+  // to freeze the object for typescript
 
   return (
-    // @ts-ignore
     <div style={style}>
       {values.map((v, index) => (
         <div

package/core/components/organisms/table/__stories__/variants/withHeader.story.tsx

@@ -3,7 +3,6 @@ import { Card, Table } from '@/index';
 import data from '@/components/organisms/grid/__stories__/_common_/data';
 import schema from '@/components/organisms/grid/__stories__/_common_/schema';
 import { action } from '@storybook/addon-actions';
-import { AsyncTable, SyncTable } from '@/components/organisms/table/__stories__/_common_/types';
 
 export const withHeader = () => {
   return (
@@ -29,7 +28,6 @@ export const withHeader = () => {
             )()
           }
           onPageChange={(newPage) => action(`on-page-change:- ${newPage}`)()}
-          withHeader={true}
           headerOptions={{
             withSearch: true,
           }}

package/core/components/organisms/table/__stories__/variants/withPagination.story.tsx

@@ -13,10 +13,10 @@ export const withPagination = () => {
   const style = {
     display: 'flex',
     flexWrap: 'wrap',
-  };
+  } as const;
+  // to freeze the object for typescript
 
   return (
-    // @ts-ignore
     <div style={style}>
       {values.map((v, index) => (
         <div

package/core/components/organisms/timePicker/TimePicker.tsx

@@ -57,7 +57,7 @@ export const TimePicker = (props: TimePickerProps) => {
     setTime(updatedTime);
   }, [timeProp]);
 
-  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>, val: string = '') => {
+  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>, val = '') => {
     const updatedTime = val?.toUpperCase();
     setTime(updatedTime);
 
@@ -66,7 +66,7 @@ export const TimePicker = (props: TimePickerProps) => {
     }
   };
 
-  const onBlurHandler = (e: React.ChangeEvent<HTMLInputElement>, val: string = '') => {
+  const onBlurHandler = (e: React.ChangeEvent<HTMLInputElement>, val = '') => {
     const updatedTime = translateToTime(inputFormat, time);
     setInit(true);
 
@@ -82,7 +82,7 @@ export const TimePicker = (props: TimePickerProps) => {
     if (inputOptions.onBlur) inputOptions.onBlur(e, val);
   };
 
-  const onClearHandler = (e: React.MouseEvent<HTMLElement>) => {
+  const onClearHandler = (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => {
     const updatedTime = '';
     setInit(true);
 
@@ -102,11 +102,7 @@ export const TimePicker = (props: TimePickerProps) => {
       {...inputOptions}
       mask={mask}
       value={
-        time
-          ? translateToTime(inputFormat, time)
-          : init // @ts-ignore
-          ? InputMask.utils.getDefaultValue(mask, placeholderChar)
-          : ''
+        time ? translateToTime(inputFormat, time) : init ? InputMask.utils.getDefaultValue(mask, placeholderChar) : ''
       }
       validators={inputValidator}
       onChange={onChangeHandler}

package/core/components/organisms/timePicker/__tests__/__snapshots__/TimePicker.test.tsx.snap

@@ -12,6 +12,7 @@ exports[`TimePicker component prop:inputFormat snapshot
       <div
         class="Input Input--regular"
         data-test="DesignSystem-InputWrapper"
+        role="presentation"
         style="min-width: 256px;"
       >
         <input
@@ -51,6 +52,7 @@ exports[`TimePicker component prop:inputFormat snapshot
       <div
         class="Input Input--regular"
         data-test="DesignSystem-InputWrapper"
+        role="presentation"
         style="min-width: 256px;"
       >
         <input
@@ -90,6 +92,7 @@ exports[`TimePicker component prop:outputFormat snapshot
       <div
         class="Input Input--regular"
         data-test="DesignSystem-InputWrapper"
+        role="presentation"
         style="min-width: 256px;"
       >
         <input
@@ -129,6 +132,7 @@ exports[`TimePicker component prop:outputFormat snapshot
       <div
         class="Input Input--regular"
         data-test="DesignSystem-InputWrapper"
+        role="presentation"
         style="min-width: 256px;"
       >
         <input
@@ -168,6 +172,7 @@ exports[`TimePicker component prop:time snapshot
       <div
         class="Input Input--regular"
         data-test="DesignSystem-InputWrapper"
+        role="presentation"
         style="min-width: 256px;"
       >
         <input
@@ -180,11 +185,13 @@ exports[`TimePicker component prop:time snapshot
         />
         <div
           class="Input-icon Input-icon--right"
-          data-test="DesignSystem-Input--closeIcon"
         >
           <i
             class="material-icons material-icons-round Icon"
+            data-test="DesignSystem-Input--closeIcon"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             close_round
           </i>
@@ -218,6 +225,7 @@ exports[`TimePicker component prop:time snapshot
       <div
         class="Input Input--regular"
         data-test="DesignSystem-InputWrapper"
+        role="presentation"
         style="min-width: 256px;"
       >
         <input
@@ -230,11 +238,13 @@ exports[`TimePicker component prop:time snapshot
         />
         <div
           class="Input-icon Input-icon--right"
-          data-test="DesignSystem-Input--closeIcon"
         >
           <i
             class="material-icons material-icons-round Icon"
+            data-test="DesignSystem-Input--closeIcon"
+            role="button"
             style="font-size: 16px; width: 16px;"
+            tabindex="0"
           >
             close_round
           </i>
@@ -268,6 +278,7 @@ exports[`TimePicker component prop:validators snapshot
       <div
         class="Input Input--regular"
         data-test="DesignSystem-InputWrapper"
+        role="presentation"
         style="min-width: 256px;"
       >
         <input
@@ -307,6 +318,7 @@ exports[`TimePicker component prop:validators snapshot
       <div
         class="Input Input--regular"
         data-test="DesignSystem-InputWrapper"
+        role="presentation"
         style="min-width: 256px;"
       >
         <input

package/core/components/organisms/verticalNav/MenuItem.tsx

@@ -71,6 +71,8 @@ export const MenuItem = (props: MenuItemProps) => {
   if (!expanded && !menu.icon) return null;
 
   return (
+    // TODO(a11y)
+    // eslint-disable-next-line
     <div className={ItemClass} {...baseProps} onClick={onClickHandler}>
       <div className="d-flex align-items-center overflow-hidden">
         {menu.icon && (

package/core/components/organisms/verticalNav/__stories__/schema.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import { Schema } from '@/components/organisms/grid';
-// @ts-ignore
-import iconImg from './image.png';
 import { Icon, GridCell } from '@/index';
 
 const schema: Schema = [

package/core/components/organisms/verticalNav/__tests__/VerticalNav.test.tsx

@@ -240,7 +240,6 @@ describe('Vertical Navigation component prop: onClick', () => {
     const activeMenu = getAllByTestId('DesignSystem-VerticalNav--Item')[menuClicked];
     fireEvent.click(activeMenu);
     expect(onClick).toHaveBeenCalled();
-    // @ts-ignore
-    expect(onClick).toHaveBeenCalledWith(menus[menuClicked].subMenu[0]);
+    expect(onClick).toHaveBeenCalledWith(menus[menuClicked].subMenu![0]);
   });
 });

package/core/components/patterns/datePicker/datePickerWithPresets.story.tsx

@@ -0,0 +1,126 @@
+import * as React from 'react';
+import { DatePicker } from '@/index';
+
+const customCode = `() => {
+
+  const setDate = (jumpDateIndex) => {
+    const d = new Date();
+    return d.setDate(d.getDate() + jumpDateIndex);
+  };
+
+  const getTomorrowDate = setDate.bind(null, 1);
+  const getThreeDaysLaterDate = setDate.bind(null, 3);
+  const getOneWeekLaterDate = setDate.bind(null, 7);
+  const getThirtyDaysLaterDate = setDate.bind(null, 30);
+
+  
+  const DatePickerPreset = ({ size, withInput=false }) => {
+    
+    const [date, setDate] = React.useState(new Date());
+    const [selectedChip, setSelectedChip] = React.useState('today');
+    
+    const classNames = size === 'small' ? 'd-block mb-4' : 'd-block mb-5';
+    return (
+      <DatePicker date={date} showTodayChip={false} size={size} withInput={withInput}>
+        <div className="pt-6 px-5">
+          <div className="d-flex align-items-center justify-content-between">
+            <Subheading size="s" appearance="subtle">
+              Date
+            </Subheading>
+          </div>
+          <div className="pt-4">
+            <Chip
+              label="Today"
+              clearButton={false}
+              type="selection"
+              className={classNames}
+              selected={selectedChip === 'today'}
+              name="rangePicker"
+              onClick={() => {
+                setDate(new Date)
+                setSelectedChip('today')
+              }}
+            />
+            <Chip
+              label="Tomorrow"
+              clearButton={false}
+              type="selection"
+              className={classNames}
+              selected={selectedChip === 'tomorrow'}
+              name={'chip'}
+              onClick={() => {
+                setDate(getTomorrowDate())
+                setSelectedChip('tomorrow')
+              }}
+            />
+            <Chip
+              label="3 Days later"
+              clearButton={false}
+              type="selection"
+              className={classNames}
+              selected={selectedChip === 'threeDaysLater'}
+              name="rangePicker"
+              onClick={() => {
+                setDate(getThreeDaysLaterDate())
+                setSelectedChip('threeDaysLater')
+              }}
+            />
+            <Chip
+              label="1 Week later"
+              clearButton={false}
+              type="selection"
+              className={classNames}
+              selected={selectedChip === 'oneWeekLater'}
+              name="rangePicker"
+              onClick={() => {
+                setDate(getOneWeekLaterDate())
+                setSelectedChip('oneWeekLater')
+              }}
+            />
+            <Chip
+              label="30 Days later"
+              clearButton={false}
+              type="selection"
+              className={classNames}
+              selected={selectedChip === 'thirtyDaysLater'}
+              name="rangePicker"
+              onClick={() => {
+                setDate(getThirtyDaysLaterDate())
+                setSelectedChip('thirtyDaysLater')
+              }}
+            />
+          </div>
+        </div>
+        <Divider vertical={true} />
+      </DatePicker>
+    );
+  };
+  return (
+    <>
+      <Card className="d-inline-flex" shadow="light">
+        <DatePickerPreset />
+      </Card>
+      <Card className="d-inline-flex ml-5" shadow="light">
+        <DatePickerPreset size="small" />
+      </Card>
+      <Card className="w-50 my-5 p-5">
+        <Label>Set an appointment date:</Label>
+        <DatePickerPreset withInput={true} />
+      </Card>
+    </>
+  );
+};`;
+export const WithPresets = () => <></>;
+
+export default {
+  title: 'Patterns/DatePicker/With Presets',
+  component: DatePicker,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        title: 'DatePicker',
+      },
+    },
+  },
+};

package/core/components/patterns/dateRangePicker/withCustomPopover.story.tsx

@@ -7,7 +7,6 @@ const customCode = `
    class CustomPopover extends React.Component {
     constructor(props) {
       super(props);
-      console.log(DateRangePicker.utils);
       const { startDate, endDate } = DateRangePicker.utils.getCurrentWeek();
 
       this.state = {
@@ -40,9 +39,9 @@ const customCode = `
       const { startDate, endDate, selected } = this.state;
 
       return (
-        <div className="pt-5 px-6" style={{ borderRight: 'var(--border)' }}>
+        <div className="pt-6 px-5">
           <div className="d-flex align-items-center justify-content-between">
-           <Heading size="s" className="py-3">Range</Heading>
+           <Subheading size="s" className="py-3" appearance="subtle">Range</Subheading>
             <Icon name="refresh" onClick={this.onReset} />
           </div>
           <div className="pt-5">
@@ -50,7 +49,7 @@ const customCode = `
               label="This week"
               clearButton={false}
               type="selection"
-              className="mb-6 d-block"
+              className="mb-5 d-block"
               selected={selected === "currWeek"}
               name="rangePicker"
               onClick={() => {
@@ -65,7 +64,7 @@ const customCode = `
               label="Last week"
               clearButton={false}
               type="selection"
-              className="mb-6 d-block"
+              className="mb-5 d-block"
               selected={selected === 'prevWeek'}
               name={"chip"}
               onClick={() => {
@@ -80,7 +79,7 @@ const customCode = `
               label="Last month"
               clearButton={false}
               type="selection"
-              className="mb-6  d-block"
+              className="mb-5  d-block"
               selected={selected === 'prevMonth'}
               name="rangePicker"
               onClick={() => {
@@ -95,7 +94,7 @@ const customCode = `
               label="Last 90 days"
               clearButton={false}
               type="selection"
-              className="mb-6  d-block"
+              className="mb-5  d-block"
               selected={selected === 'prev90Days'}
               name="rangePicker"
               onClick={() => {
@@ -110,7 +109,7 @@ const customCode = `
               label="Custom"
               clearButton={false}
               type="selection"
-              className="mb-6  d-block"
+              className="mb-5  d-block"
               selected={selected === 'custom'}
               name="rangePicker"
               onClick={() => {
@@ -143,6 +142,7 @@ const customCode = `
             monthNav={monthNav}
           >
             {this.renderChildren()}
+            <Divider vertical={true} />
           </DateRangePicker>
         </div>
       )

package/core/components/patterns/forms/CreatePassword.story.tsx

@@ -10,7 +10,7 @@ const customCode = `
     { key: 'uppercaseChar', validation: 'At least one (1) uppercase character'},
     { key: 'lowercaseChar', validation: 'At least one (1) lowercase character'},
     { key: 'numericChar', validation: 'At least one (1) numeric character' },
-    { key: 'specialChar', validation: 'At least one (1) special character (! @ # $ \ _)'},
+    { key: 'specialChar', validation: 'At least one (1) special character (! @ # $ \\ _)'},
   ];
 
   const regex = {

package/core/components/patterns/forms/VerificationCodeInput.story.tsx

@@ -75,7 +75,7 @@ const customCode = `() => {
         <div>
           <div className="mb-5">
             <Text weight="strong">Note: </Text>
-            <Text weight="medium">{\`\Verified value of Verification Code Input is \${this.correctValue} in this example.\`}</Text>
+            <Text weight="medium">{\`Verified value of Verification Code Input is \${this.correctValue} in this example.\`}</Text>
           </div>
           <div className="w-50">
             {(value || error) && (
@@ -103,7 +103,7 @@ const customCode = `() => {
               </div>
               {isTimerStarted ? (
                 <Text className="mt-7 d-flex" weight="medium">
-                  {\`\Haven't recieved the code? Resend code in 0:\${time}\`}
+                  {\`Haven't recieved the code? Resend code in 0:\${time}\`}
                 </Text>
               ) : (
                   <Text

package/core/components/patterns/table/Table with Header/tableWithHeader.story.jsx

@@ -4,7 +4,7 @@ import data from '@/components/organisms/grid/__stories__/_common_/data';
 import './style.css';
 
 export const tableWithHeader = () => {
-  return (<></>);
+  return <></>;
 };
 
 const customCode = `/*
@@ -988,7 +988,7 @@ import './style.css';
       />
     </div>
   );
-}`
+}`;
 
 export default {
   title: 'Patterns/Table/Table With Header',
@@ -998,14 +998,14 @@ export default {
         title: 'Table with header',
         customCode,
         imports: {
-          debounce: debounce
+          debounce: debounce,
         },
         props: {
           exclude: ['showHead'],
         },
         noProps: true,
-        noSandbox: true
-      }
-    }
-  }
+        noSandbox: true,
+      },
+    },
+  },
 };

package/core/global.d.ts

@@ -0,0 +1,9 @@
+declare module '@' {
+  const x: any;
+  export = x;
+}
+
+declare module '*.json';
+declare module 'react-dynamic-virtual-scroll';
+
+declare const __STORYBOOK_STORY_STORE__: any;

package/core/index.tsx

@@ -81,5 +81,6 @@ export { FileList } from './components/molecules/fileList';
 export { VerificationCodeInput } from './components/molecules/verificationCodeInput';
 export { InlineMessage } from './components/organisms/inlineMessage';
 export { ChoiceList } from './components/organisms/choiceList';
-// @ts-ignore
+export { Divider } from './components/atoms/divider';
+
 export { version } from '../package.json';

package/core/index.type.tsx

@@ -79,3 +79,4 @@ export { FileListProps } from './components/molecules/fileList';
 export { VerificationCodeInputProps } from './components/molecules/verificationCodeInput';
 export { InlineMessageProps } from './components/organisms/inlineMessage';
 export { ChoiceListProps } from './components/organisms/choiceList';
+export { DividerProps } from './components/atoms/divider';

package/core/utils/Keys.ts

@@ -1,3 +1,7 @@
+/**
+ * Key codes are deprecated, soon major browser support will end.
+ */
+
 export const BACKSPACE = 8;
 export const TAB = 9;
 export const ENTER = 13;