@innovaccer/design-system 2.13.3 → 2.13.4-2

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__/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/__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__/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 = [];

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

@@ -20,7 +20,7 @@ export const dropdownOptionsMoreThan50 = () => {
   const fetchOptions = (searchTerm) => {
     const searchedOptions = searchTerm ? getSearchedOptions(options, searchTerm) : options;
     return new Promise((resolve) => {
-      window.setTimeout(() => {
+      this.window.setTimeout(() => {
         resolve({
           searchTerm,
           options: searchedOptions,
@@ -50,7 +50,7 @@ const customCode = `() => {
   const fetchOptions = (searchTerm) => {
     const searchedOptions = searchTerm ? getSearchedOptions(options, searchTerm) : options;
     return new Promise(resolve => {
-      window.setTimeout(() => {
+      this.window.setTimeout(() => {
         resolve({
           searchTerm,
           options: searchedOptions,

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

@@ -3,7 +3,7 @@ import { Dropdown } from '@/index';
 import { Uncontrolled, Controlled } from './_common_/types';
 
 // CSF format story
-export const searchInDropdown = () =>{
+export const searchInDropdown = () => {
   const options = [
     {
       label: 'Financial',
@@ -26,10 +26,8 @@ export const searchInDropdown = () =>{
       value: 'lack_of_understanding',
     },
   ];
-  return (
-  <Dropdown options={options} withSearch={true} className="w-25" placeholder="Select barriers" />
-  );
-}
+  return <Dropdown options={options} withSearch={true} className="w-25" placeholder="Select barriers" />;
+};
 
 export default {
   title: 'Components/Dropdown/Search In Dropdown',

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

@@ -3,7 +3,7 @@ import { Dropdown } from '@/index';
 import { Uncontrolled, Controlled } from './_common_/types';
 
 // CSF format story
-export const standardDropdown = () =>{
+export const standardDropdown = () => {
   const options = [
     {
       label: 'Draft',
@@ -30,7 +30,7 @@ export const standardDropdown = () =>{
       value: 'completely_failed',
     },
   ];
-   return (<Dropdown options={options} className="w-25" placeholder="Status" />)
+  return <Dropdown options={options} className="w-25" placeholder="Status" />;
 };
 
 export default {

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

@@ -19,9 +19,9 @@ export const statusWithoutLabel = () => {
     },
   ];
   return (
-  <div className="mb-11 w-25">
-    <Dropdown options={options} placeholder="All Categories" />
-  </div>
+    <div className="mb-11 w-25">
+      <Dropdown options={options} placeholder="All Categories" />
+    </div>
   );
 };
 

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

@@ -3,7 +3,7 @@ import { Dropdown } from '@/index';
 import { Uncontrolled, Controlled } from './_common_/types';
 
 // CSF format story
-export const dropdownItemsWithCheckboxAndSubinfo = () =>{
+export const dropdownItemsWithCheckboxAndSubinfo = () => {
   const options = [
     {
       label: 'Below 18',
@@ -26,9 +26,7 @@ export const dropdownItemsWithCheckboxAndSubinfo = () =>{
       subInfo: 'People above 56 years old',
     },
   ];
-  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__/index.story.jsx

@@ -48,7 +48,7 @@ export const all = () => {
   const fetchOptions = (searchTerm) => {
     const searchedOptions = searchTerm ? getSearchedOptions(dropdownOptions, searchTerm) : dropdownOptions;
     return new Promise((resolve) => {
-      window.setTimeout(() => {
+      this.window.setTimeout(() => {
         resolve({
           searchTerm,
           options: searchedOptions,
@@ -124,7 +124,7 @@ const customCode = `() => {
   const fetchOptions = (searchTerm) => {
     const searchedOptions = searchTerm ? getSearchedOptions(dropdownOptions, searchTerm) : dropdownOptions;
     return new Promise(resolve => {
-      window.setTimeout(() => {
+      this.window.setTimeout(() => {
         resolve({
           searchTerm,
           options: searchedOptions,

package/core/components/atoms/dropdown/__stories__/variants/LoadingType.story.jsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import Dropdown from '../../Dropdown';
 import Text from '@/components/atoms/text';
 import { storyOptions } from '../Options';
-import { OptionType } from '../../DropdownList';
 import { Uncontrolled, Controlled } from '../_common_/types';
 
 const labelMapping = {

package/core/components/atoms/dropdown/__stories__/variants/PreSelection.story.jsx

@@ -16,7 +16,7 @@ export const preSelection = () => {
   const fetchOptions = (searchTerm) => {
     const searchedOptions = searchTerm ? getSearchedOptions(preSelectedOptions, searchTerm) : preSelectedOptions;
     return new Promise((resolve) => {
-      window.setTimeout(() => {
+      this.window.setTimeout(() => {
         resolve({
           searchTerm,
           options: searchedOptions,
@@ -64,7 +64,7 @@ const customCode = `() => {
   const fetchOptions = (searchTerm, limit) => {
     const searchedOptions = searchTerm ? getSearchedOptions(dropdownOptions, searchTerm) : dropdownOptions;
     return new Promise(resolve => {
-      window.setTimeout(() => {
+      this.window.setTimeout(() => {
         resolve({
           options: searchedOptions.slice(0, limit),
           count: searchedOptions.length,

package/core/components/atoms/dropdown/__stories__/variants/StaticLimit.story.jsx

@@ -16,7 +16,7 @@ export const staticLimit = () => {
   const fetchOptions = (searchTerm) => {
     const searchedOptions = searchTerm ? getSearchedOptions(dropdownOptions, searchTerm) : dropdownOptions;
     return new Promise((resolve) => {
-      window.setTimeout(() => {
+      this.window.setTimeout(() => {
         resolve({
           searchTerm,
           options: searchedOptions,
@@ -63,7 +63,7 @@ const customCode = `() => {
   const fetchOptions = (searchTerm) => {
     const searchedOptions = searchTerm ? getSearchedOptions(dropdownOptions, searchTerm) : dropdownOptions;
     return new Promise(resolve => {
-      window.setTimeout(() => {
+      this.window.setTimeout(() => {
         resolve({
           searchTerm,
           options: searchedOptions,

package/core/components/atoms/dropdown/__stories__/variants/controlledDropdown/BulkMultiSelectWithApply.story.jsx

@@ -18,7 +18,7 @@ export const bulkMultiSelectWithApplyButton = () => {
   const fetchOptions = (searchTerm) => {
     const searchedOptions = searchTerm ? getSearchedOptions(dropdownOptions, searchTerm) : dropdownOptions;
     return new Promise((resolve) => {
-      window.setTimeout(() => {
+      this.window.setTimeout(() => {
         resolve({
           searchTerm,
           options: searchedOptions,
@@ -90,7 +90,7 @@ const customCode = `() => {
   const fetchOptions = (searchTerm) => {
     const searchedOptions = searchTerm ? getSearchedOptions(dropdownOptions, searchTerm) : dropdownOptions;
     return new Promise(resolve => {
-      window.setTimeout(() => {
+      this.window.setTimeout(() => {
         resolve({
           searchTerm,
           options: searchedOptions,

package/core/components/atoms/dropdown/__stories__/variants/controlledDropdown/MultiSelect.story.jsx

@@ -18,7 +18,7 @@ export const multiSelect = () => {
   const fetchOptions = (searchTerm) => {
     const searchedOptions = searchTerm ? getSearchedOptions(dropdownOptions, searchTerm) : dropdownOptions;
     return new Promise((resolve) => {
-      window.setTimeout(() => {
+      this.window.setTimeout(() => {
         resolve({
           searchTerm,
           options: searchedOptions,
@@ -148,7 +148,7 @@ const customCode = `() => {
   const fetchOptions = (searchTerm) => {
     const searchedOptions = searchTerm ? getSearchedOptions(dropdownOptions, searchTerm) : dropdownOptions;
     return new Promise(resolve => {
-      window.setTimeout(() => {
+      this.window.setTimeout(() => {
         resolve({
           searchTerm,
           options: searchedOptions,

package/core/components/atoms/dropdown/__stories__/variants/controlledDropdown/SingleSelect.story.jsx

@@ -17,7 +17,7 @@ export const singleSelect = () => {
   const fetchOptions = (searchTerm) => {
     const searchedOptions = searchTerm ? getSearchedOptions(dropdownOptions, searchTerm) : dropdownOptions;
     return new Promise((resolve) => {
-      window.setTimeout(() => {
+      this.window.setTimeout(() => {
         resolve({
           searchTerm,
           options: searchedOptions,
@@ -32,7 +32,7 @@ export const singleSelect = () => {
   };
 
   const onUpdate = (_type, option) => {
-    window.setTimeout(() => {
+    this.window.setTimeout(() => {
       setSelected([option]);
     }, 2000);
   };
@@ -78,7 +78,7 @@ const customCode = `() => {
   const fetchOptions = (searchTerm) => {
     const searchedOptions = searchTerm ? getSearchedOptions(dropdownOptions, searchTerm) : dropdownOptions;
     return new Promise(resolve => {
-      window.setTimeout(() => {
+      this.window.setTimeout(() => {
         resolve({
           searchTerm,
           options: searchedOptions,
@@ -93,7 +93,7 @@ const customCode = `() => {
   };
 
   const onUpdate = (_type, option) => {
-    window.setTimeout(() => {
+    this.window.setTimeout(() => {
       setSelected([option]);
     }, 2000);
   };

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

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

package/core/components/atoms/input/__stories__/variants/Size.story.jsx

@@ -16,15 +16,15 @@ export const size = () => {
         return (
           <div key={ind} className="mr-9 mb-8 w-25">
             <Text weight="strong">{InputSize.charAt(0).toUpperCase() + InputSize.slice(1)}</Text>
-              <Input
-                name="input"
-                value={value}
-                onChange={action('on-change')}
-                onClick={action('on-click')}
-                onClear={action('on-clear')}
-                placeholder={placeholder}
-                size={InputSize}
-              />
+            <Input
+              name="input"
+              value={value}
+              onChange={action('on-change')}
+              onClick={action('on-click')}
+              onClear={action('on-clear')}
+              placeholder={placeholder}
+              size={InputSize}
+            />
           </div>
         );
       })}

package/core/components/atoms/input/__stories__/variants/controlledInput.story.jsx

@@ -6,20 +6,20 @@ export const controlledInput = () => {
   const [value, setValue] = React.useState('Value');
   const handleParentChange = (event) => {
     const updatedValue = event.target.value;
-    window.setTimeout(() => {
+    this.window.setTimeout(() => {
       setValue(updatedValue);
     }, 1000);
   };
   const [value1, setValue1] = React.useState('Value');
   const onChangeHandler = (event) => {
     const updatedValue = event.target.value;
-    window.setTimeout(() => {
+    this.window.setTimeout(() => {
       setValue1(updatedValue);
     }, 1000);
   };
   const onClearHandler = () => {
     const updatedValue = '';
-    window.setTimeout(() => {
+    this.window.setTimeout(() => {
       setValue1(updatedValue);
     }, 1000);
   };

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

@@ -3,7 +3,6 @@ import MetaList from '../MetaList';
 
 // CSF format story
 export const all = () => {
-
   const list = [
     {
       label: 'Meta data',

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

@@ -23,8 +23,8 @@ export const all = () => {
     label,
     disabled,
     onChange,
-    defaultValue: [2, 4]
-  }
+    defaultValue: [2, 4],
+  };
 
   return <RangeSlider className="mt-2" {...options} />;
 };

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

@@ -6,7 +6,7 @@ export const controlledSlider = () => {
   const [value, setValue] = React.useState([2, 4]);
 
   const onChange = (newValue) => {
-    window.setTimeout(() => {
+    this.window.setTimeout(() => {
       setValue(newValue);
     }, 1000);
   };
@@ -29,7 +29,7 @@ const customCode = `() => {
   const [value, setValue] = React.useState([2, 4]);
 
   const onChange = (value) => {
-    window.setTimeout(() => {
+    this.window.setTimeout(() => {
       setValue(value);
     }, 1000);
   };

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

@@ -6,7 +6,7 @@ export const controlledSlider = () => {
   const [value, setValue] = React.useState(4);
 
   const onChange = (newValue) => {
-    window.setTimeout(() => {
+    this.window.setTimeout(() => {
       setValue(newValue);
     }, 1000);
   };
@@ -29,7 +29,7 @@ const customCode = `() => {
   const [value, setValue] = React.useState(4);
 
   const onChange = (value) => {
-    window.setTimeout(() => {
+    this.window.setTimeout(() => {
       setValue(value);
     }, 1000);
   };

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/editableDropdown/__stories__/index.story.jsx

@@ -24,7 +24,7 @@ export const all = () => {
   const fetchOptions = (searchTerm) => {
     const searchedOptions = searchTerm ? getSearchedOptions(dropdownOptions, searchTerm) : dropdownOptions;
     return new Promise((resolve) => {
-      window.setTimeout(() => {
+      this.window.setTimeout(() => {
         resolve({
           options: searchedOptions,
           count: searchedOptions.length,
@@ -72,7 +72,7 @@ const customCode = `() => {
   const fetchOptions = (searchTerm) => {
     const searchedOptions = searchTerm ? getSearchedOptions(dropdownOptions, searchTerm) : dropdownOptions;
     return new Promise(resolve => {
-      window.setTimeout(() => {
+      this.window.setTimeout(() => {
         resolve({
           options: searchedOptions,
           count: searchedOptions.length,