@innovaccer/design-system 2.13.4-1 → 2.13.4-4

package/core/components/atoms/button/__stories__/SplitButton.story.jsx

@@ -3,7 +3,6 @@ import Button from '@/components/atoms/button';
 import Dropdown from '@/components/atoms/dropdown';
 
 export const splitButton = () => {
-
   const options = [
     {
       label: 'Download All',
@@ -24,7 +23,7 @@ export const splitButton = () => {
         <Dropdown menu={true} icon="expand_more" options={options} />
       </div>
     </div>
-  )
+  );
 };
 
 export default {

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

@@ -1,34 +1,38 @@
 import * as React from 'react';
-import { Checkbox, Label, Row, Column, Text, Heading } from '@/index';
+import { Checkbox, Label, Row, Column, Heading } from '@/index';
 
-const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+export const AlignmentOfCheckboxGroup = () => {
+  const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
 
-export const AlignmentOfCheckboxGroup = () => (
-  <div>
-    <Row>
-      <Column>
-        <Heading size="s">Horizontal Alignment</Heading>
-        <Label>Days</Label>
-        <div className="d-flex">
+  return (
+    <div>
+      <Row>
+        <Column>
+          <Heading size="s">Horizontal Alignment</Heading>
+          <Label>Days</Label>
+          <div className="d-flex">
+            {days.map((day, index) => {
+              return (
+                <Checkbox className={index !== 0 ? 'ml-7' : ''} key={index} label={day} defaultChecked={index < 2} />
+              );
+            })}
+          </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 className={index !== 0 ? 'ml-7' : ''} key={index} label={day} defaultChecked={index < 2} />
+              <Checkbox key={index} label={day} defaultChecked={index < 2} className={index !== 0 ? 'mt-4' : ''} />
             );
           })}
-        </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>
-);
+        </Column>
+      </Row>
+    </div>
+  );
+};
 
 export default {
   title: 'Components/Checkbox/Alignment Of Checkbox Group',

package/core/components/atoms/checkbox/__stories__/variants/Controlled.story.jsx

@@ -7,7 +7,7 @@ export const controlledCheckbox = () => {
 
   const handleParentChange = (event) => {
     const updatedChecked = event.target.checked;
-    window.setTimeout(() => {
+    this.window.setTimeout(() => {
       setChecked(updatedChecked);
     }, 2000);
   };
@@ -20,7 +20,7 @@ const customCode = `() => {
 
   const handleParentChange = (event) => {
     const updatedChecked = event.target.checked;
-    window.setTimeout(() => {
+    this.window.setTimeout(() => {
       setChecked(updatedChecked);
     }, 2000);
   };

package/core/components/atoms/chip/__stories__/index.story.jsx

@@ -27,8 +27,8 @@ export const all = () => {
       clearButton={clearButton}
       disabled={disabled}
       type={type}
-      onClose={action(`onClose: ${name}`)}
-      onClick={action(`onClick: ${name}`)}
+      onClose={action(`onClose: ${label}`)}
+      onClick={action(`onClick: ${label}`)}
       selected={selected}
       name={'chip'}
     />

package/core/components/atoms/chip/__stories__/variants/Action.story.jsx

@@ -16,8 +16,8 @@ export const Action = () => {
               icon={icon}
               label={label}
               disabled={booleanvalue}
-              onClose={action(`onClose: ${name}`)}
-              onClick={action(`onClick: ${name}`)}
+              onClose={action(`onClose: ${label}`)}
+              onClick={action(`onClick: ${label}`)}
               type="action"
               name={'chip'}
             />

package/core/components/atoms/chip/__stories__/variants/Input.story.jsx

@@ -17,8 +17,8 @@ export const Input = () => {
               clearButton={true}
               disabled={booleanvalue}
               type="input"
-              onClose={action(`onClose: ${name}`)}
-              onClick={action(`onClick: ${name}`)}
+              onClose={action(`onClose: ${label}`)}
+              onClick={action(`onClick: ${label}`)}
               name={'chip'}
             />
             <br />

package/core/components/atoms/chip/__stories__/variants/Selection.story.jsx

@@ -17,8 +17,8 @@ export const Selection = () => {
               clearButton={true}
               disabled={booleanvalue}
               type="selection"
-              onClose={action(`onClose: ${name}`)}
-              onClick={action(`onClick: ${name}`)}
+              onClose={action(`onClose: ${label}`)}
+              onClick={action(`onClick: ${label}`)}
               selected={false}
               name={'chip'}
             />
@@ -33,8 +33,8 @@ export const Selection = () => {
           label={label}
           clearButton={true}
           type="selection"
-          onClose={action(`onClose: ${name}`)}
-          onClick={action(`onClick: ${name}`)}
+          onClose={action(`onClose: ${label}`)}
+          onClick={action(`onClick: ${label}`)}
           selected={true}
           name={'chip'}
         />
@@ -47,8 +47,8 @@ export const Selection = () => {
           label={label}
           clearButton={true}
           type="selection"
-          onClose={action(`onClose: ${name}`)}
-          onClick={action(`onClick: ${name}`)}
+          onClose={action(`onClose: ${label}`)}
+          onClick={action(`onClick: ${label}`)}
           selected={true}
           disabled={true}
           name={'chip'}

package/core/components/atoms/chip/__stories__/variants/Type.story.jsx

@@ -20,8 +20,8 @@ export const Types = () => {
               clearButton={clearButton}
               disabled={disabled}
               type={type}
-              onClose={action(`onClose: ${name}`)}
-              onClick={action(`onClick: ${name}`)}
+              onClose={action(`onClose: ${label}`)}
+              onClick={action(`onClick: ${label}`)}
               selected={selected}
               name={'chip'}
             />

package/core/components/atoms/chipGroup/_stories_/index.story.jsx

@@ -38,7 +38,7 @@ export const all = () => {
     },
   ];
 
-  return <ChipGroup onClose={action(`onClose: ${name}`)} onClick={action(`onClick: ${name}`)} list={list} />;
+  return <ChipGroup onClose={action(`onClose event`)} onClick={action(`onClick event`)} list={list} />;
 };
 export default {
   title: 'Components/ChipGroup/All',

package/core/components/atoms/collapsible/__stories__/CustomTrigger.story.jsx

@@ -1,50 +1,18 @@
 import * as React from 'react';
 import Collapsible from '@/components/atoms/collapsible';
-import { Icon, VerticalNav, Heading } from '@/index';
+import { Icon, Text, Heading } from '@/index';
 
 // CSF format story
 export const CustomTrigger = () => {
   const [expanded, setExpanded] = React.useState(false);
-  const [active, setActive] = React.useState({
-    name: 'To-do\'s.Due',
-  });
-
-  const data = [
-    {
-      name: 'To-do\'s',
-      label: 'To-do\'s',
-      icon: 'assignment_ind',
-      count: 31,
-      subMenu: [
-        {
-          name: 'To-do\'s.Due',
-          label: 'Due',
-          count: 31
-        },
-        {
-          name: 'To-do\'s.Completed',
-          label: 'Completed',
-          count: 0
-        },
-      ],
-    },
-    {
-      name: 'Received',
-      label: 'Received',
-      count: 0
-    },
-    {
-      name: 'Sent',
-      label: 'Sent',
-      count: 5
-    },
-  ];
 
   return (
     <div>
-      <div className='d-flex align-items-center mb-3'>
+      <div className="d-flex align-items-center mb-3">
         <Icon name="menu" className="cursor-pointer" onClick={() => setExpanded(!expanded)}></Icon>
-        <Heading size='s' className="ml-4">Click to Open</Heading>
+        <Heading size="s" className="ml-4">
+          Click to Open
+        </Heading>
       </div>
       <Collapsible withTrigger={false} expanded={expanded} height="100vh">
         <div className="d-flex pt-4">
@@ -58,40 +26,6 @@ export const CustomTrigger = () => {
 
 const customCode = `() => {
   const [expanded, setExpanded] = React.useState(false);
-  const [active, setActive] = React.useState({
-    name: 'TODOs.Due',
-  });
-
-  const data = [
-    {
-      name: 'TODOs',
-      label: 'TODOs',
-      icon: 'assignment_ind',
-      count: 31,
-      subMenu: [
-        {
-          name: 'TODOs.Due',
-          label: 'Due',
-          count: 31
-        },
-        {
-          name: 'TODOs.Completed',
-          label: 'Completed',
-          count: 0
-        },
-      ],
-    },
-    {
-      name: 'Received',
-      label: 'Received',
-      count: 0
-    },
-    {
-      name: 'Sent',
-      label: 'Sent',
-      count: 5
-    },
-  ];
 
   return (
     <div>

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

@@ -23,10 +23,10 @@ export const customSearchPlaceholder = () => {
     },
   ];
   return (
-  <div className="mb-10 w-25">
-    <Label withInput={true}>Gender</Label>
-    <Dropdown options={options} searchPlaceholder="Search Gender" withSearch={true} />
-  </div>
+    <div className="mb-10 w-25">
+      <Label withInput={true}>Gender</Label>
+      <Dropdown options={options} searchPlaceholder="Search Gender" withSearch={true} />
+    </div>
   );
 };
 

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

@@ -22,9 +22,7 @@ export const dropdownItemsWithCheckbox = () => {
       value: '56_above',
     },
   ];
-   return (
-  <Dropdown options={options} withCheckbox={true} className="w-25" placeholder="Select" />
-  );
+  return <Dropdown options={options} withCheckbox={true} className="w-25" placeholder="Select" />;
 };
 
 export default {

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

@@ -26,10 +26,8 @@ export const dropdownItemsWithIcon = () => {
       icon: 'check',
     },
   ];
-   return (
-  <Dropdown options={options} optionType="WITH_ICON" className="w-25" placeholder="Select status" />
-  );
-}
+  return <Dropdown options={options} optionType="WITH_ICON" className="w-25" placeholder="Select status" />;
+};
 
 export default {
   title: 'Components/Dropdown/Dropdown Items With Icon',

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

@@ -3,8 +3,7 @@ import { Dropdown } from '@/index';
 import { Uncontrolled, Controlled } from './_common_/types';
 
 // CSF format story
-export const dropdownItemsWithSubInfo = () =>{
-
+export const dropdownItemsWithSubInfo = () => {
   const options = [
     {
       label: 'Lawson, Joy',
@@ -23,9 +22,7 @@ export const dropdownItemsWithSubInfo = () =>{
     },
   ];
 
-  return (
-  <Dropdown options={options} optionType="WITH_META" className="w-25" placeholder="Select Recipient" />
-  );
+  return <Dropdown options={options} optionType="WITH_META" className="w-25" placeholder="Select Recipient" />;
 };
 
 export default {

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

@@ -2,9 +2,8 @@ import * as React from 'react';
 import { Dropdown } from '@/index';
 import { Uncontrolled, Controlled } from './_common_/types';
 
-
 // CSF format story
-export const dropdownWithIcon = () =>{
+export const dropdownWithIcon = () => {
   const options = [
     {
       label: 'Alabama',
@@ -204,9 +203,9 @@ export const dropdownWithIcon = () =>{
     },
   ];
   return (
-  <Dropdown options={options} icon="location_on" className="w-25" placeholder="Select state" staticLimit={100} />
+    <Dropdown options={options} icon="location_on" className="w-25" placeholder="Select state" staticLimit={100} />
   );
-}
+};
 
 export default {
   title: 'Components/Dropdown/Dropdown With Icon',

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

@@ -47,16 +47,16 @@ export const dropdownWithActionButtons = () => {
     },
   ];
   return (
-  <Dropdown
-    options={options}
-    withSearch={true}
-    className="w-25"
-    placeholder="Select problem"
-    withCheckbox={true}
-    showApplyButton={true}
-  />
+    <Dropdown
+      options={options}
+      withSearch={true}
+      className="w-25"
+      placeholder="Select problem"
+      withCheckbox={true}
+      showApplyButton={true}
+    />
   );
-}
+};
 
 export default {
   title: 'Components/Dropdown/Dropdown With Action Buttons',

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

@@ -5,7 +5,7 @@ import Label from '../../label';
 import Caption from '../../caption';
 
 // CSF format story
-export const dropdownWithCaption = () =>{
+export const dropdownWithCaption = () => {
   const options = [
     {
       label: 'Alabama (205)',
@@ -49,13 +49,13 @@ export const dropdownWithCaption = () =>{
     },
   ];
   return (
-  <>
-    <Label withInput={true}>Area code</Label>
-    <Dropdown options={options} withSearch={true} className="w-25" placeholder="Select an area code" />
-    <Caption withInput={true}>If the number with this code is not available, we will use the next best match</Caption>
-  </>
+    <>
+      <Label withInput={true}>Area code</Label>
+      <Dropdown options={options} withSearch={true} className="w-25" placeholder="Select an area code" />
+      <Caption withInput={true}>If the number with this code is not available, we will use the next best match</Caption>
+    </>
   );
-}
+};
 
 export default {
   title: 'Components/Dropdown/Dropdown With Caption',

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

@@ -4,7 +4,7 @@ import Label from '@/components/atoms/label';
 import { Uncontrolled, Controlled } from './_common_/types';
 
 // CSF format story
-export const gender = () =>{
+export const gender = () => {
   const options = [
     {
       label: 'Male',
@@ -17,12 +17,12 @@ export const gender = () =>{
     },
   ];
   return (
-  <div className="mb-10 w-25">
-    <Label withInput={true}>Gender</Label>
-    <Dropdown options={options} />
-  </div>
+    <div className="mb-10 w-25">
+      <Label withInput={true}>Gender</Label>
+      <Dropdown options={options} />
+    </div>
   );
-}
+};
 
 export default {
   title: 'Components/Dropdown/Gender',

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

@@ -4,7 +4,7 @@ import Label from '@/components/atoms/label';
 import { Uncontrolled, Controlled } from './_common_/types';
 
 // CSF format story
-export const languages = () =>{
+export const languages = () => {
   const options = [
     {
       label: 'Hindi',
@@ -20,12 +20,12 @@ export const languages = () =>{
     },
   ];
   return (
-  <div className="mb-11 w-25">
-    <Label withInput={true}>Select Language</Label>
-    <Dropdown options={options} />
-  </div>
+    <div className="mb-11 w-25">
+      <Label withInput={true}>Select Language</Label>
+      <Dropdown options={options} />
+    </div>
   );
-}
+};
 
 export default {
   title: 'Components/Dropdown/Languages',

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

@@ -4,7 +4,6 @@ import { Uncontrolled, Controlled } from './_common_/types';
 
 // CSF format story
 export const dropdownAsMenu = () => {
-
   const options = [
     {
       label: 'Edit',
@@ -18,13 +17,13 @@ export const dropdownAsMenu = () => {
       label: 'Delete',
       value: 'delete',
     },
-  ]
+  ];
   return (
     <div className="d-flex w-50">
-    <Dropdown options={options} menu={true} className="mr-5" align="right" maxWidth={130} />
-    <Dropdown options={options} menu={true} align="left" className="mr-5" maxWidth={130} />
-  </div>
-  )
+      <Dropdown options={options} menu={true} className="mr-5" align="right" maxWidth={130} />
+      <Dropdown options={options} menu={true} align="left" className="mr-5" maxWidth={130} />
+    </div>
+  );
 };
 
 export default {

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import Dropdown from '../Dropdown';
+import { Uncontrolled, Controlled } from './_common_/types';
+
+// CSF format story
+export const dropdownAsMenuWithSubinfo = () => {
+  const options = [
+    { label: 'Below 18', subInfo: 'People below 18 years old', value: 'below_18', optionType: 'WITH_META' },
+    { label: '19 - 35', subInfo: 'People 19-35 years old', value: '19-35', optionType: 'WITH_META' },
+    { label: '36 - 55', subInfo: 'People 36-55 years old', value: '36-55', optionType: 'WITH_META' },
+    { label: '56 and above', subInfo: 'People above 56 years old', value: '56_above', optionType: 'WITH_META' },
+  ];
+  return (
+    <div className="d-flex w-50">
+      <Dropdown options={options} menu={true} className="mr-5" align="right" />
+      <Dropdown options={options} menu={true} className="mr-5" align="right" />
+    </div>
+  );
+};
+
+export default {
+  title: 'Components/Dropdown/Dropdown As Menu With Subinfo',
+  component: Dropdown,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Dropdown',
+        props: {
+          components: { Uncontrolled, Controlled },
+          exclude: ['showHead'],
+        },
+      },
+    },
+  },
+};

package/core/components/atoms/dropdown/__stories__/Options.tsx

@@ -1,12 +1,37 @@
 import { getSearchedOptions } from '../utility';
 
-export const dropdownOptions = [];
-export const preSelectedOptions = [];
-export const storyOptions = [];
-export const disabledStoryOptions = [];
-export const iconOptions = [];
-export const subInfoOptions = [];
-export const iconWithSubinfoOptions = [];
+type OptionType = 'DEFAULT' | 'WITH_ICON' | 'WITH_META' | 'ICON_WITH_META';
+
+interface OptionSchema extends Record<string, any> {
+  label: string;
+  value: React.ReactText;
+  icon: string;
+  subInfo: string;
+  optionType?: OptionType;
+  selected?: boolean;
+  disabled?: boolean;
+  group?: string;
+}
+
+interface SelectedOptionSchema extends Record<string, any> {
+  label: string;
+  value: React.ReactText;
+  selected?: boolean;
+}
+
+interface fetchOptionSchema {
+  searchTerm?: string | undefined;
+  count: number;
+  options: OptionSchema[];
+}
+
+export const dropdownOptions: OptionSchema[] = [];
+export const preSelectedOptions: SelectedOptionSchema[] = [];
+export const storyOptions: OptionSchema[] = [];
+export const disabledStoryOptions: OptionSchema[] = [];
+export const iconOptions: OptionSchema[] = [];
+export const subInfoOptions: OptionSchema[] = [];
+export const iconWithSubinfoOptions: OptionSchema[] = [];
 
 for (let i = 1; i <= 10; i++) {
   storyOptions.push({
@@ -84,7 +109,7 @@ for (let i = 41; i <= 100; i++) {
   });
 }
 
-export const selectedStoryOptions = [];
+export const selectedStoryOptions: SelectedOptionSchema[] = [];
 
 for (let i = 1; i <= 10; i++) {
   selectedStoryOptions.push({
@@ -94,7 +119,7 @@ for (let i = 1; i <= 10; i++) {
   });
 }
 
-export const multiSelectedStoryOptions = [];
+export const multiSelectedStoryOptions: SelectedOptionSchema[] = [];
 
 for (let i = 1; i <= 10; i++) {
   multiSelectedStoryOptions.push({
@@ -155,9 +180,9 @@ export const iconItems = [
   },
 ];
 
-export const fetchOptions = (searchTerm) => {
+export const fetchOptions = (searchTerm: string) => {
   const searchedOptions = searchTerm ? getSearchedOptions(dropdownOptions, searchTerm) : dropdownOptions;
-  return new Promise((resolve) => {
+  return new Promise<fetchOptionSchema>((resolve) => {
     window.setTimeout(() => {
       resolve({
         searchTerm,

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

@@ -2,10 +2,8 @@ import * as React from 'react';
 import { Dropdown } from '@/index';
 import { Uncontrolled, Controlled } from './_common_/types';
 
-
-
 // CSF format story
-export const dropdownOptionsLessThan50 = () =>{
+export const dropdownOptionsLessThan50 = () => {
   const options = [];
   for (let i = 1; i <= 50; i++) {
     options.push({
@@ -13,10 +11,8 @@ export const dropdownOptionsLessThan50 = () =>{
       value: `Option${i}`,
     });
   }
-  return (
-  <Dropdown options={options} withCheckbox={true} withSearch={true} className="w-25" placeholder="Select" />
-  );
-}
+  return <Dropdown options={options} withCheckbox={true} withSearch={true} className="w-25" placeholder="Select" />;
+};
 
 const customCode = `() => {
   const options = [];