@innovaccer/design-system 2.9.0 → 2.10.0

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

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import Dropdown from '../../Dropdown';
+import { action } from '@/utils/action';
+import Text from '@/components/atoms/text';
+import { disabledStoryOptions } from '../Options';
+import { Uncontrolled, Controlled } from '../_common_/types';
+
+// CSF format story
+export const disabledOption = () => {
+  const onClose = (options) => {
+    return action(`dropdown closed with selected values: ${options}`)();
+  };
+
+  const onChangeHandler = (selectedValues) => {
+    return action(`selected values length: ${selectedValues}`)();
+  };
+
+  return (
+    <div className="d-flex">
+      <div className="mr-9 w-25">
+        <Text weight="strong">{'With Checkbox'}</Text>
+        <br />
+        <br />
+        <Dropdown
+          withCheckbox={true}
+          withSelectAll={false}
+          options={disabledStoryOptions}
+          placeholder={'Select'}
+          onChange={onChangeHandler}
+          onClose={onClose}
+        />
+      </div>
+      <div className="mr-9 w-25">
+        <Text weight="strong">{'Without Checkbox'}</Text>
+        <br />
+        <br />
+        <Dropdown options={disabledStoryOptions} placeholder={'Select'} onChange={onChangeHandler} onClose={onClose} />
+      </div>
+    </div>
+  );
+};
+
+const customCode = `() => {
+  const disabledStoryOptions = [];
+  for (let i = 1; i <= 10; i++) {
+    disabledStoryOptions.push({
+      label: \`Option \${i}\`,
+      value: \`Option \${i}\`,
+      disabled: i===2
+    });
+  }
+
+  const onClose = (options) => {
+    console.log(options);
+  };
+
+  const onChangeHandler = (selectedValues) => {
+    console.log(selectedValues);
+  };
+
+  return (
+    <div className='d-flex'>
+      <div className='mr-9 w-25'>
+      <Text weight="strong">{'With Checkbox'}</Text><br /><br />
+        <Dropdown
+          withCheckbox={true}
+          withSelectAll={false}
+          options={disabledStoryOptions}
+          placeholder={'Select'}
+          onChange={onChangeHandler}
+          onClose={onClose}
+        />
+      </div>
+      <div className="mr-9 w-25">
+        <Text weight="strong">{'Without Checkbox'}</Text><br /><br />
+        <Dropdown
+          options={disabledStoryOptions}
+          placeholder={'Select'}
+          onChange={onChangeHandler}
+          onClose={onClose}
+        />
+      </div>
+    </div>
+  )
+}`;
+
+export default {
+  title: 'Components/Dropdown/Variants/Disabled Option',
+  component: Dropdown,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        title: 'Dropdown',
+        props: {
+          components: { Uncontrolled, Controlled },
+        },
+      },
+    },
+  },
+};

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

@@ -0,0 +1,99 @@
+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: { [key] } = {
+  ['DEFAULT']: 'Default',
+  ['WITH_ICON']: 'Icon',
+  ['WITH_META']: 'SubInfo',
+  ['ICON_WITH_META']: 'Icon with SubInfo',
+};
+
+// CSF format story
+export const loadingType = () => {
+  const optionTypes = ['DEFAULT', 'WITH_ICON', 'WITH_META', 'ICON_WITH_META'];
+
+  const style = {
+    display: 'flex',
+    'flex-direction': 'column',
+    alignItems: 'center',
+    marginRight: '5%',
+    width: '150px',
+  };
+
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap', minHeight: '270px' }}>
+      {optionTypes.map((type, ind) => {
+        return (
+          <div style={style} key={ind}>
+            <Text weight="strong">{labelMapping[type]}</Text>
+            <br />
+            <Dropdown options={storyOptions.slice(0, 5)} optionType={type as OptionType} loading={true} />
+          </div>
+        );
+      })}
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '150px' }}>
+        <Text weight="strong">{'Checkboxes'}</Text>
+        <br />
+        <Dropdown options={storyOptions.slice(0, 5)} withCheckbox={true} loading={true} />
+      </div>
+    </div>
+  );
+};
+
+const customCode = `() => {
+  const storyOptions = [];
+  for (let i = 1; i <= 10; i++) {
+    storyOptions.push({
+      label: \`Option \${i}\`,
+      value: \`Option \${i}\`,
+      icon: 'events',
+      subInfo: 'subInfo'
+    });
+  }
+
+  return (
+    <div className='d-flex'>
+      <div className='mr-8 w-25'>
+        <Text weight="strong">Default</Text><br /><br />
+        <Dropdown options={storyOptions} optionType={'DEFAULT'} loading={true}/>
+      </div>
+      <div className='mr-8 w-25'>
+        <Text weight="strong">Icon</Text><br /><br />
+        <Dropdown options={storyOptions} optionType={'WITH_ICON'} loading={true}/>
+      </div>
+      <div className='mr-8 w-25'>
+        <Text weight="strong">SubInfo</Text><br /><br />
+        <Dropdown options={storyOptions} optionType={'WITH_META'} loading={true}/>
+      </div>
+      <div className='mr-8 w-25'>
+        <Text weight="strong">Icon with subInfo</Text><br /><br />
+        <Dropdown options={storyOptions} optionType={'ICON_WITH_META'} loading={true}/>
+      </div>
+      <div className='mr-8 w-25'>
+        <Text weight="strong">{'Checkboxes'}</Text><br /><br />
+        <Dropdown options={storyOptions} withCheckbox={true} loading={true}/>
+      </div>
+    </div>
+  )
+}`;
+
+export default {
+  title: 'Components/Dropdown/Variants/Loading Type',
+  component: Dropdown,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        title: 'Dropdown',
+        props: {
+          components: { Uncontrolled, Controlled },
+          exclude: ['showHead'],
+        },
+      },
+    },
+  },
+};

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

@@ -0,0 +1,136 @@
+import * as React from 'react';
+import Dropdown from '../../Dropdown';
+import { action } from '@/utils/action';
+import Text from '@/components/atoms/text';
+import { storyOptions } from '../Options';
+import { Uncontrolled, Controlled } from '../_common_/types';
+
+// CSF format story
+export const multiOptions = () => {
+  const onClose = (options) => {
+    return action(`dropdown closed with selected values: ${options}`)();
+  };
+
+  const onChangeHandler = (selectedValues) => {
+    return action(`selected values length: ${selectedValues}`)();
+  };
+
+  return (
+    <div className="d-flex">
+      <div className="mr-9 w-25">
+        <Text weight="strong">{'With Apply Button'}</Text>
+        <br />
+        <br />
+        <Dropdown
+          maxHeight={180}
+          withCheckbox={true}
+          showApplyButton={true}
+          options={storyOptions}
+          placeholder={'Select'}
+          onChange={onChangeHandler}
+          onClose={onClose}
+        />
+      </div>
+      <div className="mr-9 w-25">
+        <Text weight="strong">{'Without Apply Button'}</Text>
+        <br />
+        <br />
+        <Dropdown
+          withCheckbox={true}
+          options={storyOptions}
+          placeholder={'Select'}
+          onChange={onChangeHandler}
+          onClose={onClose}
+        />
+      </div>
+      <div className="mr-9 w-25">
+        <Text weight="strong">{'Without Select All (Options <= 50)'}</Text>
+        <br />
+        <br />
+        <Dropdown
+          withCheckbox={true}
+          withSelectAll={false}
+          options={storyOptions}
+          placeholder={'Select'}
+          onChange={onChangeHandler}
+          onClose={onClose}
+        />
+      </div>
+    </div>
+  );
+};
+
+const customCode = `() => {
+  const storyOptions = [];
+  for (let i = 1; i <= 10; i++) {
+    storyOptions.push({
+      label: \`Option \${i}\`,
+      value: \`Option \${i}\`,
+      icon: 'events',
+      subInfo: 'subInfo'
+    });
+  }
+
+  const onClose = (options) => {
+    console.log(options);
+  };
+
+  const onChangeHandler = (selectedValues) => {
+    console.log(selectedValues);
+  };
+
+  return (
+    <div className='d-flex'>
+      <div className='mr-9 w-25'>
+        <Text weight="strong">{'With Apply Button'}</Text><br /><br />
+        <Dropdown
+          maxHeight={180}
+          withCheckbox={true}
+          showApplyButton={true}
+          options={storyOptions}
+          placeholder={'Select'}
+          onChange={onChangeHandler}
+          onClose={onClose}
+        />
+      </div>
+      <div className='mr-9 w-25'>
+        <Text weight="strong">{'Without Apply Button'}</Text><br /><br />
+        <Dropdown
+          withCheckbox={true}
+          options={storyOptions}
+          placeholder={'Select'}
+          onChange={onChangeHandler}
+          onClose={onClose}
+        />
+      </div>
+      <div className='mr-9 w-25'>
+        <Text weight="strong">{'Without Select All (Options <= 50)'}</Text><br /><br />
+        <Dropdown
+          withCheckbox={true}
+          withSelectAll={false}
+          options={storyOptions}
+          placeholder={'Select'}
+          onChange={onChangeHandler}
+          onClose={onClose}
+        />
+      </div>
+    </div>
+  )
+}`;
+
+export default {
+  title: 'Components/Dropdown/Variants/Multi Options',
+  component: Dropdown,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        title: 'Dropdown',
+        props: {
+          components: { Uncontrolled, Controlled },
+          exclude: ['showHead'],
+        },
+      },
+    },
+  },
+};

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

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import Dropdown from '../../Dropdown';
+import Text from '@/components/atoms/text';
+import { Uncontrolled, Controlled } from '../_common_/types';
+import { storyOptions, iconOptions, subInfoOptions, iconWithSubinfoOptions } from '../Options';
+
+const labelMapping: { [key] } = {
+  ['DEFAULT']: 'Default',
+  ['WITH_ICON']: 'Icon',
+  ['WITH_META']: 'SubInfo',
+  ['ICON_WITH_META']: 'Icon with SubInfo',
+};
+
+const optionsMapping: { [key] } = {
+  ['DEFAULT']: storyOptions,
+  ['WITH_ICON']: iconOptions,
+  ['WITH_META']: subInfoOptions,
+  ['ICON_WITH_META']: iconWithSubinfoOptions,
+};
+
+// CSF format story
+export const optionType = () => {
+  const optionTypes = ['DEFAULT', 'WITH_ICON', 'WITH_META', 'ICON_WITH_META'];
+
+  return (
+    <div className="d-flex">
+      {optionTypes.map((type, ind) => {
+        return (
+          <div className="d-flex flex-column mr-9 w-25" key={ind}>
+            <Text weight="strong">{labelMapping[type]}</Text>
+            <br />
+            <Dropdown options={optionsMapping[type].slice(0, 3)} />
+          </div>
+        );
+      })}
+      <div className="d-flex flex-column w-25">
+        <Text weight="strong">{'Checkboxes'}</Text>
+        <br />
+        <Dropdown options={storyOptions.slice(0, 3)} withCheckbox={true} />
+      </div>
+    </div>
+  );
+};
+
+export default {
+  title: 'Components/Dropdown/Variants/Option Type',
+  component: Dropdown,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Dropdown',
+        props: {
+          components: { Uncontrolled, Controlled },
+          exclude: ['showHead'],
+        },
+      },
+    },
+  },
+};

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

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import Dropdown from '../../Dropdown';
+import Text from '@/components/atoms/text';
+import { Uncontrolled, Controlled } from '../_common_/types';
+import { preSelectedOptions } from '../Options';
+
+// CSF format story
+export const preSelection = () => {
+  const BooleanValue = [true, false];
+
+  const getSearchedOptions = (options, searchTerm) => {
+    const result = options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
+    return result;
+  };
+
+  const fetchOptions = (searchTerm) => {
+    const searchedOptions = searchTerm ? getSearchedOptions(preSelectedOptions, searchTerm) : preSelectedOptions;
+    return new Promise((resolve) => {
+      window.setTimeout(() => {
+        resolve({
+          searchTerm,
+          options: searchedOptions,
+          count: searchedOptions.length,
+        });
+      }, 1000);
+    });
+  };
+
+  return (
+    <div style={{ display: 'flex', minHeight: '280px' }}>
+      {BooleanValue.map((value, ind) => {
+        const options = value ? preSelectedOptions : preSelectedOptions.slice(0, 50);
+
+        return (
+          <div key={ind} style={{ marginRight: '10%', width: '170px' }}>
+            <Text weight="strong">{value ? 'Options > 50 ' : 'Options <= 50'}</Text>
+            <br />
+            <br />
+            <Dropdown withCheckbox={true} options={options} {...(value && { fetchOptions })} />
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+const customCode = `() => {
+  const dropdownOptions = [];
+  for (let i = 1; i <= 100; i++) {
+    dropdownOptions.push({
+      label: \`Option \${i}\`,
+      value: \`Option \${i}\`,
+      selected: i === 2 || i === 3
+    });
+  }
+
+  const BooleanValue = [true, false];
+
+  const getSearchedOptions = (options, searchTerm) => {
+    const result = options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
+    return result;
+  };
+
+  const fetchOptions = (searchTerm, limit) => {
+    const searchedOptions = searchTerm ? getSearchedOptions(dropdownOptions, searchTerm) : dropdownOptions;
+    return new Promise(resolve => {
+      window.setTimeout(() => {
+        resolve({
+          options: searchedOptions.slice(0, limit),
+          count: searchedOptions.length,
+        });
+      }, 1000);
+    });
+  };
+  return (
+    <div className='d-flex'>
+      <div className='mr-10 w-25'>
+        <Text weight="strong">{'Options > 50'}</Text> <br /><br />
+        <Dropdown withCheckbox={true} fetchOptions={fetchOptions}/>
+      </div>
+      <div className='mr-10 w-25'>
+        <Text weight="strong">{'Options <= 50'}</Text> <br /><br />
+        <Dropdown withCheckbox={true} options={dropdownOptions.slice(0, 50)} />
+      </div>
+    </div>
+  )
+}`;
+
+export default {
+  title: 'Components/Dropdown/Variants/Pre Selection',
+  component: Dropdown,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        props: {
+          components: { Uncontrolled, Controlled },
+          exclude: ['showHead'],
+        },
+      },
+    },
+  },
+};

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

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import Dropdown from '../../Dropdown';
+import Text from '@/components/atoms/text';
+import { storyOptions } from '../Options';
+import { Uncontrolled, Controlled } from '../_common_/types';
+
+// CSF format story
+export const sections = () => {
+  const options = [];
+
+  for (let i = 1; i <= 10; i++) {
+    options.push({
+      label: `Option ${i}`,
+      value: `Option ${i}`,
+      group: 'Group',
+    });
+  }
+  const BooleanValue = [true, false];
+
+  return (
+    <div className="d-flex">
+      {BooleanValue.map((value, index) => {
+        return (
+          <div key={index} className="d-flex flex-column align-items-center">
+            <Text weight="strong">{value ? ' Multi Select' : 'Single Select'}</Text>
+            <br />
+            <div className="d-flex">
+              <div className="d-flex flex-column align-items-center mr-7" style={{ width: '128px' }}>
+                <Text weight="strong">{'With Sections'}</Text>
+                <br />
+                <Dropdown options={options} withCheckbox={value} />
+              </div>
+              <div className="d-flex flex-column align-items-center mr-7" style={{ width: '128px' }}>
+                <Text weight="strong">{'Without Sections'}</Text> <br />
+                <Dropdown options={storyOptions} withCheckbox={value} />
+              </div>
+            </div>
+            <br />
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default {
+  title: 'Components/Dropdown/Variants/Sections',
+  component: Dropdown,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Dropdown',
+        props: {
+          components: { Uncontrolled, Controlled },
+          exclude: ['showHead'],
+        },
+      },
+    },
+  },
+};

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

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import Dropdown from '../../Dropdown';
+import Text from '@/components/atoms/text';
+import { storyOptions } from '../Options';
+import { Uncontrolled, Controlled } from '../_common_/types';
+
+// CSF format story
+export const size = () => {
+  const sizes = ['tiny', 'regular'];
+
+  return (
+    <div className="d-flex">
+      {sizes.map((dropdownSize, ind) => {
+        return (
+          <div key={ind} className="mr-8 w-25">
+            <Text weight="strong">{dropdownSize.charAt(0).toUpperCase() + dropdownSize.slice(1)}</Text> <br />
+            <br />
+            <Dropdown triggerSize={dropdownSize} options={storyOptions} placeholder={'Select'} />
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+const customCode = `() => {
+  const storyOptions = [];
+  for (let i = 1; i <= 10; i++) {
+    storyOptions.push({
+      label: \`Option \${i}\`,
+      value: \`Option \${i}\`,
+      icon: 'events',
+      subInfo: 'subInfo'
+    });
+  }
+
+  const disabled = [true, false];
+
+  return (
+    <div className='d-flex'>
+      <div className='mr-8 w-25'>
+        <Text weight="strong">Tiny</Text> <br /><br />
+        <Dropdown triggerSize={'tiny'} options={storyOptions} />
+      </div>
+      <div className='mr-8 w-25'>
+        <Text weight="strong">Regular</Text> <br /><br />
+        <Dropdown triggerSize={'regular'} options={storyOptions}/>
+      </div>
+    </div>
+  );
+}`;
+
+export default {
+  title: 'Components/Dropdown/Variants/Size',
+  component: Dropdown,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        title: 'Dropdown',
+        props: {
+          components: { Uncontrolled, Controlled },
+          exclude: ['showHead'],
+        },
+      },
+    },
+  },
+};