@innovaccer/design-system 2.9.0 → 2.10.0

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

@@ -1,12 +1,12 @@
 import { getSearchedOptions } from '../utility';
 
-export const dropdownOptions: any[] = [];
-export const preSelectedOptions: any[] = [];
-export const storyOptions: any[] = [];
-export const disabledStoryOptions: any[] = [];
-export const iconOptions: any[] = [];
-export const subInfoOptions: any[] = [];
-export const iconWithSubinfoOptions: any[] = [];
+export const dropdownOptions = [];
+export const preSelectedOptions = [];
+export const storyOptions = [];
+export const disabledStoryOptions = [];
+export const iconOptions = [];
+export const subInfoOptions = [];
+export const iconWithSubinfoOptions = [];
 
 for (let i = 1; i <= 10; i++) {
   storyOptions.push({
@@ -84,7 +84,7 @@ for (let i = 41; i <= 100; i++) {
   });
 }
 
-export const selectedStoryOptions: any[] = [];
+export const selectedStoryOptions = [];
 
 for (let i = 1; i <= 10; i++) {
   selectedStoryOptions.push({
@@ -94,7 +94,7 @@ for (let i = 1; i <= 10; i++) {
   });
 }
 
-export const multiSelectedStoryOptions: any[] = [];
+export const multiSelectedStoryOptions = [];
 
 for (let i = 1; i <= 10; i++) {
   multiSelectedStoryOptions.push({
@@ -155,9 +155,9 @@ export const iconItems = [
   },
 ];
 
-export const fetchOptions = (searchTerm: string) => {
+export const fetchOptions = (searchTerm) => {
   const searchedOptions = searchTerm ? getSearchedOptions(dropdownOptions, searchTerm) : dropdownOptions;
-  return new Promise<any>((resolve) => {
+  return new Promise((resolve) => {
     window.setTimeout(() => {
       resolve({
         searchTerm,

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

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Dropdown } from '@/index';
+import { Uncontrolled, Controlled } from './_common_/types';
+
+const options = [];
+for (let i = 1; i <= 50; i++) {
+  options.push({
+    label: `Option ${i}`,
+    value: `Option${i}`,
+  });
+}
+
+// CSF format story
+export const dropdownOptionsLessThan50 = () => (
+  <Dropdown options={options} withCheckbox={true} withSearch={true} className="w-25" placeholder="Select" />
+);
+
+const customCode = `() => {
+  const options = [];
+  for (let i=1; i <= 50; i++) {
+    options.push({
+      label: \`Option \${i}\`,
+      value: \`Option\${i}\`
+    })
+  }
+
+  return (
+    <Dropdown
+      options={options}
+      withCheckbox={true}
+      withSearch={true}
+      className="w-25"
+      placeholder="Select"
+  />
+  );
+}`;
+
+export default {
+  title: 'Components/Dropdown/Dropdown Options Less Than 50',
+  component: Dropdown,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        title: 'Dropdown',
+        props: {
+          components: { Uncontrolled, Controlled },
+        },
+      },
+    },
+  },
+};

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

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { Dropdown } from '@/index';
+import { Uncontrolled, Controlled } from './_common_/types';
+
+const options = [];
+for (let i = 1; i <= 100; i++) {
+  options.push({
+    label: `Option ${i}`,
+    value: `Option${i}`,
+  });
+}
+
+// CSF format story
+export const dropdownOptionsMoreThan50 = () => {
+  const getSearchedOptions = (opts, searchTerm) => {
+    const result = opts.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
+    return result;
+  };
+
+  const fetchOptions = (searchTerm) => {
+    const searchedOptions = searchTerm ? getSearchedOptions(options, searchTerm) : options;
+    return new Promise((resolve) => {
+      window.setTimeout(() => {
+        resolve({
+          searchTerm,
+          options: searchedOptions,
+          count: searchedOptions.length,
+        });
+      }, 1000);
+    });
+  };
+
+  return <Dropdown fetchOptions={fetchOptions} withCheckbox={true} className="w-25" placeholder="Select" />;
+};
+
+const customCode = `() => {
+  const options = [];
+  for (let i=1; i <= 100; i++) {
+    options.push({
+      label: \`Option \${i}\`,
+      value: \`Option\${i}\`
+    })
+  }
+
+  const getSearchedOptions = (options, searchTerm) => {
+    const result = options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
+    return result;
+  };
+
+  const fetchOptions = (searchTerm) => {
+    const searchedOptions = searchTerm ? getSearchedOptions(options, searchTerm) : options;
+    return new Promise(resolve => {
+      window.setTimeout(() => {
+        resolve({
+          searchTerm,
+          options: searchedOptions,
+          count: searchedOptions.length,
+        });
+      }, 1000);
+    });
+  };
+
+  return (
+    <Dropdown
+      fetchOptions={fetchOptions}
+      withCheckbox={true}
+      className="w-25"
+      placeholder="Select"
+  />
+  );
+}`;
+
+export default {
+  title: 'Components/Dropdown/Dropdown Options More Than 50',
+  component: Dropdown,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        title: 'Dropdown',
+        props: {
+          components: { Uncontrolled, Controlled },
+        },
+      },
+    },
+  },
+};

package/core/components/atoms/dropdown/__stories__/_common_/types.tsx

@@ -1,7 +1,5 @@
-import { UncontrolledDropdownProps, ControlledDropdownProps } from '@/components/atoms/dropdown';
-
 // TODO(eslint): Fix this
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Controlled = (_props: ControlledDropdownProps) => {};
+export const Controlled = (_props) => {};
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Uncontrolled = (_props: UncontrolledDropdownProps) => {};
+export const Uncontrolled = (_props) => {};

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

@@ -0,0 +1,160 @@
+import * as React from 'react';
+import { Uncontrolled, Controlled } from './_common_/types';
+import { action } from '@/utils/action';
+import Dropdown from '../Dropdown';
+import { dropdownOptions } from './Options';
+
+// CSF format story
+export const all = () => {
+  const triggerSize = 'tiny';
+
+  const align = 'left';
+
+  const optionType = 'ICON_WITH_META';
+
+  const error = false;
+
+  const disabled = false;
+
+  const menu = false;
+
+  const withSearch = false;
+
+  const withCheckbox = false;
+
+  const showApplyButton = false;
+
+  const closeOnSelect = true;
+
+  const icon = '';
+
+  const placeholder = 'Select';
+
+  const selectAllLabel = 'Select All';
+
+  const inlineLabel = '';
+
+  const labelLimit = 2;
+
+  const maxHeight = 200;
+
+  const loadersCount = 10;
+
+  const getSearchedOptions = (options, searchTerm) => {
+    const result = options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
+    return result;
+  };
+
+  const fetchOptions = (searchTerm) => {
+    const searchedOptions = searchTerm ? getSearchedOptions(dropdownOptions, searchTerm) : dropdownOptions;
+    return new Promise((resolve) => {
+      window.setTimeout(() => {
+        resolve({
+          searchTerm,
+          options: searchedOptions,
+          count: searchedOptions.length,
+        });
+      }, 1000);
+    });
+  };
+
+  const customLabel = (selectedLength, totalOptions) => {
+    const optionsLength = totalOptions ? totalOptions : dropdownOptions.length;
+    return `${selectedLength} of ${optionsLength} are selected`;
+  };
+
+  const onChangeHandler = (selectedValues) => {
+    return action(`selected values length: ${selectedValues}`)();
+  };
+
+  const onClose = (selectedValues) => {
+    return action(`dropdown closed with selected values: ${selectedValues}`)();
+  };
+
+  const props = {
+    triggerSize,
+    align,
+    icon,
+    error,
+    placeholder,
+    inlineLabel,
+    disabled,
+    menu,
+    closeOnSelect,
+    withSearch,
+    withCheckbox,
+    showApplyButton,
+    maxHeight,
+    loadersCount,
+    onClose,
+    fetchOptions,
+    optionType,
+    selectAllLabel,
+    triggerOptions: { customLabel, labelLimit },
+    options: dropdownOptions,
+    onChange: onChangeHandler,
+  };
+
+  const key = `checkbox${withCheckbox} applyButton:${showApplyButton} search:${withSearch}`;
+
+  return (
+    <div style={{ width: '170px', marginLeft: '128px' }} key={key}>
+      <Dropdown {...props} />
+    </div>
+  );
+};
+
+const customCode = `() => {
+  const dropdownOptions =  [];
+  for (let i = 1; i <= 100; i++) {
+    dropdownOptions.push({
+      label: \`Option \${i}\`,
+      value: \`Option \${i}\`,
+      group: i >= 1 && i <= 40 ? 'Group 1' : 'Group 2',
+      icon: 'events',
+      subInfo: 'subInfo',
+    });
+  }
+
+  const getSearchedOptions = (options, searchTerm) => {
+    const result = options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
+    return result;
+  };
+
+  const fetchOptions = (searchTerm) => {
+    const searchedOptions = searchTerm ? getSearchedOptions(dropdownOptions, searchTerm) : dropdownOptions;
+    return new Promise(resolve => {
+      window.setTimeout(() => {
+        resolve({
+          searchTerm,
+          options: searchedOptions,
+          count: searchedOptions.length,
+        });
+      }, 1000);
+    });
+  };
+
+  return (
+    <div className='w-25' style={{ minHeight: '280px' }}>
+      <Dropdown
+        fetchOptions={fetchOptions}
+      />
+    </div>
+  );
+}`;
+
+export default {
+  title: 'Components/Dropdown/All',
+  component: Dropdown,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        props: {
+          components: { Uncontrolled, Controlled },
+          exclude: ['showHead'],
+        },
+      },
+    },
+  },
+};

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

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import Dropdown from '../../Dropdown';
+import { Uncontrolled, Controlled } from '../_common_/types';
+import Text from '@/components/atoms/text';
+import { storyOptions } from '../Options';
+
+// CSF format story
+export const align = () => {
+  const dropdownAlignments = ['right', 'left'];
+
+  return (
+    <div style={{ display: 'flex', minHeight: '280px' }}>
+      {dropdownAlignments.map((alignment, ind) => {
+        return (
+          <div key={ind} style={{ marginRight: '20%' }}>
+            <Text weight="strong">{`Towards ${alignment.charAt(0).toUpperCase() + alignment.slice(1)}`}</Text>
+            <br />
+            <br />
+            <Dropdown align={alignment} options={storyOptions} menu={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-12'>
+        <Text weight="strong">Towards Right</Text> <br /><br />
+        <Dropdown menu={true} options={storyOptions} align='right'/>
+      </div>
+      <div>
+        <Text weight="strong">Towards Left</Text> <br /><br />
+        <Dropdown menu={true} options={storyOptions} align='left'/>
+      </div>
+    </div>
+  )
+}`;
+
+export default {
+  title: 'Components/Dropdown/Variants/Align',
+  component: Dropdown,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        title: 'Dropdown',
+        props: {
+          components: { Uncontrolled, Controlled },
+          exclude: ['showHead'],
+        },
+      },
+    },
+  },
+};

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

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import Dropdown from '../../Dropdown';
+import Text from '@/components/atoms/text';
+import Icon from '@/components/atoms/icon';
+import Checkbox from '@/components/atoms/checkbox';
+import { Uncontrolled, Controlled } from '../_common_/types';
+import { storyOptions } from '../Options';
+
+// CSF format story
+export const cutsomOption = () => {
+  const optionStyle = {
+    paddingRight: 12,
+    paddingLeft: 12,
+    paddingTop: 6,
+    paddingBottom: 6,
+    display: 'flex',
+    cursor: 'pointer',
+    justifyContent: 'space-between',
+  };
+
+  const customOptionRenderer = (props) => {
+    const { label, icon } = props.optionData;
+    return (
+      <div style={optionStyle}>
+        <Text>{label}</Text>
+        <Icon name={props.selected ? 'done' : icon} />
+      </div>
+    );
+  };
+
+  const customCheckboxRenderer = (props) => {
+    const { label } = props.optionData;
+
+    return (
+      <div style={optionStyle}>
+        <Checkbox checked={props.selected} onChange={props.onChange} label={label} />
+        {props.selected && <Icon name="done" />}
+      </div>
+    );
+  };
+
+  return (
+    <div style={{ display: 'flex', minHeight: '280px' }}>
+      <div style={{ marginRight: '20%', width: '200px' }}>
+        <Text weight="strong">Without Checkbox</Text> <br />
+        <br />
+        <Dropdown options={storyOptions} optionRenderer={customOptionRenderer} />
+      </div>
+      <div style={{ marginRight: '20%', width: '200px' }}>
+        <Text weight="strong">With Checkbox</Text> <br />
+        <br />
+        <Dropdown options={storyOptions} optionRenderer={customCheckboxRenderer} withCheckbox={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'
+    });
+  }
+  const optionStyle = {
+    paddingRight: 12,
+    paddingLeft: 12,
+    paddingTop: 6,
+    paddingBottom: 6,
+    display: 'flex',
+    cursor: 'pointer',
+    justifyContent: 'space-between',
+  };
+
+  const customOptionRenderer = (props) => {
+    const { label, icon } = props.optionData;
+    return (
+      <div style={optionStyle} onClick={props.onClick}>
+        <Text>{label}</Text>
+        <Icon name={props.selected ? 'done' : icon} />
+      </div>
+    );
+  };
+
+  const customCheckboxRenderer = (props) => {
+    const { label } = props.optionData;
+    return (
+      <div style={optionStyle} onClick={props.onClick}>
+        <Checkbox checked={props.selected} onChange={props.onChange} label={label} />
+        {props.selected && <Icon name="done" />}
+      </div>
+    );
+  };
+
+  return (
+    <div className='d-flex'>
+      <div className='mr-10 w-25'>
+        <Text weight="strong">Without Checkbox</Text> <br /><br />
+        <Dropdown options={storyOptions} optionRenderer={customOptionRenderer} />
+      </div>
+      <div className='mr-10 w-25'>
+        <Text weight="strong">With Checkbox</Text> <br /><br />
+        <Dropdown options={storyOptions} optionRenderer={customCheckboxRenderer} withCheckbox={true} />
+      </div>
+    </div>
+  );
+}`;
+
+export default {
+  title: 'Components/Dropdown/Variants/Cutsom Option',
+  component: Dropdown,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        props: {
+          components: { Uncontrolled, Controlled },
+          exclude: ['showHead'],
+        },
+        description:
+          'In case of custom option with checkbox, developer needs to pass checked and onChange props to checkbox component like in the example below for the indeterminate state and other functionalities to work. ',
+      },
+    },
+  },
+};

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

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import Dropdown from '../../Dropdown';
+import Input from '@/components/atoms/input';
+import { Uncontrolled, Controlled } from '../_common_/types';
+import { storyOptions } from '../Options';
+
+// CSF format story
+export const customTrigger = () => {
+  const onChange = (e) => {
+    e.preventDefault();
+  };
+
+  const customTriggerFunc = (label) => {
+    return <Input type="text" name="input" value={label} onChange={onChange} />;
+  };
+
+  return (
+    <div style={{ display: 'flex', minHeight: '280px' }}>
+      <div style={{ marginRight: '20%', width: '256px' }}>
+        <Dropdown options={storyOptions} triggerOptions={{ customTrigger: customTriggerFunc }} />
+      </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 onChange = (e) => {
+    e.preventDefault();
+  };
+
+  const customTriggerFunc = (label) => {
+    return (
+      <div style={{ width: '100%' }}>
+        <Input
+          type="text"
+          name="input"
+          value={label}
+          onChange={onChange}
+        />
+      </div>
+    );
+  };
+
+  return (
+    <div className='d-flex'>
+      <div className='mr-10'style={{ width: '256px' }}>
+        <Dropdown options={storyOptions} customTrigger={customTriggerFunc} />
+      </div>
+    </div>
+  );
+}`;
+
+export default {
+  title: 'Components/Dropdown/Variants/Custom Trigger',
+  component: Dropdown,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        props: {
+          components: { Uncontrolled, Controlled },
+          exclude: ['showHead'],
+        },
+      },
+    },
+  },
+};