@innovaccer/design-system 2.5.0-4 → 2.6.0

package/core/components/organisms/grid/__stories__/_common_/fetchData.ts

@@ -1,6 +1,6 @@
-import { fetchDataFunction, Schema, RowData } from '../../Grid';
+import { fetchDataFunction, RowData } from '../../Grid';
 import data from './data';
-const schema: Schema = require('./schema').default;
+import schema from './schema';
 import { filterData, sortData } from '../../utility';
 
 export const fetchData: fetchDataFunction = (options) => {

package/core/components/organisms/horizontalNav/HorizontalNav.tsx

@@ -69,6 +69,8 @@ export const HorizontalNav = (props: HorizontalNavProps) => {
     });
 
     return (
+      // TODO(a11y)
+      // eslint-disable-next-line
       <div data-test="DesignSystem-HorizontalNav" key={index} className={menuClasses} onClick={onClickHandler(menu)}>
         {renderIcon(menu, isActive)}
         <Text

package/core/components/organisms/inlineMessage/InlineMessage.tsx

@@ -53,11 +53,9 @@ export const InlineMessage = (props: InlineMessageProps) => {
           className={IconClass}
         />
       )}
-      <div>
-        <Text data-test="DesignSystem-InlineMessage--Description" className={DescriptionClass}>
-          {description}
-        </Text>
-      </div>
+      <Text data-test="DesignSystem-InlineMessage--Description" className={DescriptionClass}>
+        {description}
+      </Text>
     </div>
   );
 };

package/core/components/organisms/inlineMessage/__tests__/__snapshots__/InlineMessage.test.tsx.snap

@@ -16,14 +16,12 @@ exports[`InlineMessage component
       >
         error_round
       </i>
-      <div>
-        <span
-          class="Text Text--default Text--regular InlineMessage-text--alert"
-          data-test="DesignSystem-InlineMessage--Description"
-        >
-          Inline Message here.
-        </span>
-      </div>
+      <span
+        class="Text Text--default Text--regular InlineMessage-text--alert"
+        data-test="DesignSystem-InlineMessage--Description"
+      >
+        Inline Message here.
+      </span>
     </div>
   </div>
 </body>
@@ -38,14 +36,12 @@ exports[`InlineMessage component
       class="InlineMessage"
       data-test="DesignSystem-InlineMessage"
     >
-      <div>
-        <span
-          class="Text Text--default Text--regular InlineMessage-text--default"
-          data-test="DesignSystem-InlineMessage--Description"
-        >
-          Inline Message here.
-        </span>
-      </div>
+      <span
+        class="Text Text--default Text--regular InlineMessage-text--default"
+        data-test="DesignSystem-InlineMessage--Description"
+      >
+        Inline Message here.
+      </span>
     </div>
   </div>
 </body>
@@ -67,14 +63,12 @@ exports[`InlineMessage component
       >
         info_round
       </i>
-      <div>
-        <span
-          class="Text Text--default Text--regular InlineMessage-text--info"
-          data-test="DesignSystem-InlineMessage--Description"
-        >
-          Inline Message here.
-        </span>
-      </div>
+      <span
+        class="Text Text--default Text--regular InlineMessage-text--info"
+        data-test="DesignSystem-InlineMessage--Description"
+      >
+        Inline Message here.
+      </span>
     </div>
   </div>
 </body>
@@ -96,14 +90,12 @@ exports[`InlineMessage component
       >
         check_circle_round
       </i>
-      <div>
-        <span
-          class="Text Text--default Text--regular InlineMessage-text--success"
-          data-test="DesignSystem-InlineMessage--Description"
-        >
-          Inline Message here.
-        </span>
-      </div>
+      <span
+        class="Text Text--default Text--regular InlineMessage-text--success"
+        data-test="DesignSystem-InlineMessage--Description"
+      >
+        Inline Message here.
+      </span>
     </div>
   </div>
 </body>
@@ -125,14 +117,12 @@ exports[`InlineMessage component
       >
         warning_round
       </i>
-      <div>
-        <span
-          class="Text Text--default Text--regular InlineMessage-text--warning"
-          data-test="DesignSystem-InlineMessage--Description"
-        >
-          Inline Message here.
-        </span>
-      </div>
+      <span
+        class="Text Text--default Text--regular InlineMessage-text--warning"
+        data-test="DesignSystem-InlineMessage--Description"
+      >
+        Inline Message here.
+      </span>
     </div>
   </div>
 </body>

package/core/components/organisms/navigation/VerticalNavigation.tsx

@@ -137,6 +137,8 @@ export const VerticalNavigation = (props: VerticalNavigationProps) => {
 
     return (
       <div key={index} data-test="DesignSystem-Navigation-VerticalNavigation--menuWrapper">
+        {/* TODO(a11y) */}
+        {/* eslint-disable-next-line */}
         <div
           data-test="DesignSystem-Navigation-VerticalNavigation--menuItem"
           className={menuClasses}
@@ -179,6 +181,8 @@ export const VerticalNavigation = (props: VerticalNavigationProps) => {
               });
 
               return (
+                // TODO(a11y)
+                // eslint-disable-next-line
                 <div
                   data-test="DesignSystem-Navigation-VerticalNavigation--subMenu"
                   key={ind}

package/core/components/organisms/table/Table.tsx

@@ -718,6 +718,7 @@ export class Table extends React.Component<TableProps, TableState> {
         <div className="Table-grid">
           <Grid
             {...this.state}
+            key={this.state.searchTerm}
             updateData={this.updateData}
             updateSchema={this.updateSchema}
             updateSortingList={this.updateSortingList}

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

@@ -233,8 +233,11 @@ const customCode = `() => {
   const nestedRowRenderer = (props) => {
     const {
       data,
+      rowIndex
     } = props;
-
+    if(rowIndex % 2){
+      return false;
+    }
     return (
       <CardSubdued className="ml-7">
         <div className="d-flex flex-row">

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

@@ -268,6 +268,7 @@ const customCode = `
                   { label: 'Edit', value: 'Edit' },
                   { label: 'Delete', value: 'Delete' }
                 ]}
+                popoverOptions={{appendToBody:false}}
               />
             </div>
           </div>
@@ -286,7 +287,7 @@ const customCode = `
         withHeader={true}
         filterPosition="HEADER"
         onSelect={(rowIndex, selected, selectedList, selectAll) =>
-          console.log(\`\on-select:- rowIndex: \${rowIndex} selected: \${selected} selectedList: \${JSON.stringify(selectedList)} selectAll: \${selectAll}\`)
+          console.log(\`on-select:- rowIndex: \${rowIndex} selected: \${selected} selectedList: \${JSON.stringify(selectedList)} selectAll: \${selectAll}\`)
         }
         headerOptions={{
           withSearch: true
@@ -304,7 +305,7 @@ const customCode = `
         withPagination={true}
         paginationType="basic"
         pageSize={4}
-        onPageChange={newPage => console.log(\`\on-page-change:- \${newPage}\`)}
+        onPageChange={newPage => console.log(\`on-page-change:- \${newPage}\`)}
       />
     </Card>
   );

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

@@ -239,7 +239,7 @@ const customCode = `
           withHeader={true}
           withCheckbox={true}
           onSelect={(rowIndex, selected, selectedList, selectAll) =>
-            console.log(\`\on-select:- rowIndex: \${rowIndex} selected: \${selected} selectedList: \${JSON.stringify(selectedList)} selectAll: \${selectAll}\`)
+            console.log(\`on-select:- rowIndex: \${rowIndex} selected: \${selected} selectedList: \${JSON.stringify(selectedList)} selectAll: \${selectAll}\`)
           }
           headerOptions={{
             withSearch: true
@@ -252,7 +252,7 @@ const customCode = `
           }}
           withPagination={true}
           pageSize={5}
-          onPageChange={newPage => console.log(\`\on-page-change:- \${newPage}\`)}
+          onPageChange={newPage => console.log(\`on-page-change:- \${newPage}\`)}
         />
       </Card>
   );

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

@@ -162,7 +162,7 @@ const customCode = `() => {
                 appearance="transparent"
                 onClick={e => e.stopPropagation()}
               >
-                {\`\can \${rights}\`}
+                {\`can \${rights}\`}
               </Button>
             );
           }

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

@@ -109,7 +109,7 @@ const customCode = `() => {
             );
           }}
           onRowClick={(rowData, rowIndex) =>
-            console.log(\`\on-row-click:- rowIndex: \${rowIndex} data: \${JSON.stringify(rowData)}\`)
+            console.log(\`on-row-click:- rowIndex: \${rowIndex} data: \${JSON.stringify(rowData)}\`)
           }
         />
       </Card>

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/nestedRows.story.tsx

@@ -136,9 +136,12 @@ const customCode = `
     const {
       schema,
       data,
-      loading
+      loading,
+      rowIndex
     } = props;
-
+    if (rowIndex % 2) {
+      return false;
+    }
     return (
       <List
         loading={loading}

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/timePicker/TimePicker.tsx

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

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/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 = {