@innovaccer/design-system 2.6.0 → 2.7.0-0

package/core/components/atoms/dropdown/DropdownButton.tsx

@@ -2,14 +2,14 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { Icon, Text } from '@/index';
 
-export type Size = 'tiny' | 'regular';
+export type DropDownButtonSize = 'tiny' | 'regular';
 
 export interface TriggerProps {
   /**
    * Size of `Dropdown` trigger button
    * @default "regular"
    */
-  triggerSize?: Size;
+  triggerSize?: DropDownButtonSize;
   /**
    * Material icon name
    */

package/core/components/atoms/dropdown/DropdownList.tsx

@@ -7,8 +7,8 @@ import Option, { OptionRendererProps, OptionSchema } from './option';
 import classNames from 'classnames';
 import Loading from './Loading';
 import { BaseProps, extractBaseProps } from '@/utils/types';
+import { ChangeEvent } from '@/common.type';
 
-export type ChangeEvent = React.ChangeEvent<HTMLInputElement>;
 export type DropdownAlign = 'left' | 'right';
 export type OptionType = 'DEFAULT' | 'WITH_ICON' | 'WITH_META' | 'ICON_WITH_META';
 
@@ -33,9 +33,9 @@ interface PopoverOptions {
   boundaryElement?: PopoverProps['boundaryElement'];
 }
 
-type ListProps = TriggerProps & OptionRendererProps;
+type TriggerAndOptionProps = TriggerProps & OptionRendererProps;
 
-export interface DropdownListProps extends ListProps {
+export interface DropdownListProps extends TriggerAndOptionProps {
   /**
    * Aligns the `Dropdown` left/right
    * @default "right"
@@ -141,6 +141,10 @@ export interface DropdownListProps extends ListProps {
    * </pre>
    */
   popoverOptions?: PopoverOptions;
+  /**
+   * Adds custom placeholder to searchBar
+   */
+  searchPlaceholder?: string;
 }
 
 interface OptionsProps extends DropdownListProps, BaseProps {
@@ -207,6 +211,7 @@ const DropdownList = (props: OptionsProps) => {
     cancelOptions,
     toggleDropdown,
     className,
+    searchPlaceholder = 'Search..',
   } = props;
 
   const baseProps = extractBaseProps(props);
@@ -410,7 +415,7 @@ const DropdownList = (props: OptionsProps) => {
           name="Dropdown-search"
           icon={'search'}
           value={searchTerm}
-          placeholder={'Search..'}
+          placeholder={searchPlaceholder}
           // TODO(a11y): research more on this.
           // eslint-disable-next-line jsx-a11y/no-autofocus
           autoFocus={true}
@@ -442,7 +447,7 @@ const DropdownList = (props: OptionsProps) => {
     const label = selectAllLabel.trim() ? selectAllLabel.trim() : 'Select All';
 
     return (
-      <div className={SelectAllClass} onMouseEnter={(_e) => updateActiveOption(0, true)}>
+      <div className={SelectAllClass} onMouseEnter={() => updateActiveOption(0, true)}>
         <Checkbox
           label={label}
           onChange={onSelectAll}

package/core/components/atoms/dropdown/Loading.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import PlaceholderParagraph from '@/components/atoms/placeholderParagraph';
 import Placeholder from '@/components/molecules/placeholder';
 

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

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import Dropdown from '../Dropdown';
+import Label from '@/components/atoms/label';
+
+const options = [
+  {
+    label: 'Male',
+    value: 'Male',
+  },
+  {
+    label: 'Female',
+    value: 'Female',
+  },
+  {
+    label: 'Transgender',
+    value: 'Transgender',
+  },
+  {
+    label: 'Others',
+    value: 'Others',
+  },
+];
+
+// CSF format story
+export const customSearchPlaceholder = () => (
+  <div className="mb-10 w-25">
+    <Label withInput={true}>Gender</Label>
+    <Dropdown options={options} searchPlaceholder="Search Gender" withSearch={true} />
+  </div>
+);
+
+export default {
+  title: 'Components/Dropdown/Custom Search Placeholder',
+  component: Dropdown,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Dropdown',
+        props: {
+          exclude: ['showHead'],
+        },
+      },
+    },
+  },
+};

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

@@ -1,4 +1,7 @@
 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) => {};
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const Uncontrolled = (_props: UncontrolledDropdownProps) => {};

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

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import Dropdown from '../../Dropdown';
-import { Size } from '../../DropdownButton';
+import { DropDownButtonSize } from '../../DropdownButton';
 import Text from '@/components/atoms/text';
 import { storyOptions } from '../Options';
 import { Uncontrolled, Controlled } from '../_common_/types';
 
 // CSF format story
 export const size = () => {
-  const sizes: Size[] = ['tiny', 'regular'];
+  const sizes: DropDownButtonSize[] = ['tiny', 'regular'];
 
   return (
     <div className="d-flex">

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

@@ -90,7 +90,7 @@ export const multiSelect = () => {
     }
   };
 
-  const onClose = (options: any[], _name: any) => {
+  const onClose = (options: any[]) => {
     return action(`dropdown closed with selected values: ${options}`)();
   };
 

package/core/components/atoms/dropdown/__tests__/Dropdown.test.tsx

@@ -352,7 +352,7 @@ describe('Dropdown component', () => {
 
 describe('renders dropdown component onKeyDown Handler', () => {
   const dropdownListId = 'DesignSystem-DropdownList-Wrapper';
-  keyDownEvents.forEach((action, key) => {
+  keyDownEvents.forEach((action) => {
     it(`checks for keyDown ${action} event with dropdownOpen set as true `, () => {
       const { getByTestId } = render(
         <Dropdown
@@ -458,3 +458,14 @@ describe('Dropdown component action buttons', () => {
     expect(screen.queryByText('DesignSystem-Popover')).not.toBeInTheDocument();
   });
 });
+
+describe('Dropdown component with search', () => {
+  it('check:prop searchPlaceholder', () => {
+    const { getByTestId } = render(
+      <Dropdown options={dropdownOptions} withSearch={true} searchPlaceholder="Custom search text" />
+    );
+    const dropdownTrigger = getByTestId(trigger);
+    fireEvent.click(dropdownTrigger);
+    expect(screen.getByPlaceholderText('Custom search text')).toBeInTheDocument();
+  });
+});

package/core/components/atoms/dropdown/__tests__/Loading.test.tsx

@@ -4,7 +4,6 @@ import { Dropdown } from '@/index';
 
 import { storyOptions, iconOptions, subInfoOptions, iconWithSubinfoOptions } from '../__stories__/Options';
 
-const FunctionValue = jest.fn();
 const trigger = 'DesignSystem-DropdownTrigger';
 
 describe('renders loading states', () => {

package/core/components/atoms/dropdown/option/index.tsx

@@ -8,8 +8,8 @@ import IconWithMetaOption from './IconWithMetaOption';
 import { MetaList, Text } from '@/index';
 import { MetaListProps, IconProps, TextProps } from '@/index.type';
 import { OptionType } from '../DropdownList';
+import { ChangeEvent } from '@/common.type';
 
-export type ChangeEvent = React.ChangeEvent<HTMLInputElement>;
 export type ClickEvent = React.MouseEvent<HTMLDivElement>;
 
 export interface OptionRendererProps {

package/core/components/atoms/heading/Heading.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 import GenericText from '../_text';
 import classNames from 'classnames';
 import { BaseHtmlProps, BaseProps } from '@/utils/types';
+import { HeadingAppearance } from '@/common.type';
 
-export type Size = 's' | 'm' | 'l' | 'xl' | 'xxl';
-export type Appearance = 'default' | 'subtle' | 'disabled' | 'white';
+export type HeadingSize = 's' | 'm' | 'l' | 'xl' | 'xxl';
 
 export interface HeadingProps extends BaseProps, BaseHtmlProps<HTMLHeadingElement> {
   /**
@@ -14,11 +14,11 @@ export interface HeadingProps extends BaseProps, BaseHtmlProps<HTMLHeadingElemen
   /**
    * Color of `Heading`
    */
-  appearance: Appearance;
+  appearance: HeadingAppearance;
   /**
    * size of `Heading`
    */
-  size: Size;
+  size: HeadingSize;
 }
 
 const sizeMap = {

package/core/components/atoms/heading/__stories__/variants/Appearance.story.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import Heading, { Appearance } from '../../index';
+import Heading from '../../index';
 import Text from '@/components/atoms/text';
+import { HeadingAppearance } from '@/common.type';
 
 // CSF format story
 export const appearance = () => {
-  const appearances: Appearance[] = ['default', 'subtle', 'disabled', 'white'];
+  const appearances: HeadingAppearance[] = ['default', 'subtle', 'disabled', 'white'];
   return (
     <div className="Row">
       {appearances.map((appear, ind) => {

package/core/components/atoms/heading/__tests__/Heading.test.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import Heading, { HeadingProps as Props, Appearance, Size } from '../Heading';
+import Heading, { HeadingProps as Props, HeadingSize } from '../Heading';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
+import { HeadingAppearance } from '@/common.type';
 
-const appearance: Appearance[] = ['default', 'subtle', 'disabled', 'white'];
-const sizes: Size[] = ['s', 'm', 'l', 'xl', 'xxl'];
+const appearance: HeadingAppearance[] = ['default', 'subtle', 'disabled', 'white'];
+const sizes: HeadingSize[] = ['s', 'm', 'l', 'xl', 'xxl'];
 
 describe('Heading component', () => {
   const mapper = {

package/core/components/atoms/icon/Icon.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 import { useAccessibilityProps } from '@/accessibility/utils';
 
-export type Appearance =
+export type IconAppearance =
   | 'default'
   | 'destructive'
   | 'white'
@@ -55,7 +55,7 @@ export interface IconProps extends BaseProps {
   /**
    * Color of `Icon`    // 'info' appearance will be deprecated soon.
    */
-  appearance?: Appearance;
+  appearance?: IconAppearance;
   /**
    * Handler to be called when icon is clicked
    */
@@ -118,7 +118,7 @@ export const Icon = (props: IconProps) => {
     );
   }
   return (
-    <i {...baseProps} role="alert" className={iconClass} style={styles} {...accessibilityProps}>
+    <i {...baseProps} className={iconClass} style={styles} {...accessibilityProps}>
       {type ? `${name}_${type}` : name}
     </i>
   );

package/core/components/atoms/input/Input.tsx

@@ -3,10 +3,10 @@ import classNames from 'classnames';
 import { Tooltip, Icon, Text } from '@/index';
 import { IconProps } from '@/index.type';
 import { BaseHtmlProps, BaseProps, extractBaseProps } from '@/utils/types';
+import { AutoComplete } from '@/common.type';
 
 export type InputType = 'text' | 'password' | 'number' | 'email' | 'tel' | 'url';
-export type AutoComplete = 'on' | 'off';
-export type Size = 'tiny' | 'regular' | 'large';
+export type InputSize = 'tiny' | 'regular' | 'large';
 
 export interface InputProps extends BaseProps, BaseHtmlProps<HTMLInputElement> {
   /**
@@ -35,7 +35,7 @@ export interface InputProps extends BaseProps, BaseHtmlProps<HTMLInputElement> {
    * Size of the `Input`
    * @default "regular"
    */
-  size?: Size;
+  size?: InputSize;
   /**
    * Material icon name
    */

package/core/components/atoms/input/__stories__/InputWithCaption.story.tsx

@@ -50,6 +50,67 @@ export const inputWithCaption = () => {
   );
 };
 
+const customCode = `() => {
+  const [visibility, setVisibility] = React.useState(false);
+  const [visibility2, setVisibility2] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState('Value');
+  const [secondInputValue, setSecondInputValue] = React.useState('Value');
+  return (
+    <div className="d-flex">
+      <div>
+        <Label htmlFor="password-1" withInput={true}>
+          Password
+        </Label>
+        <Input
+          id="password-1"
+          placeholder="Password"
+          value={inputValue}
+          type={visibility ? 'text' : 'password'}
+          onChange={(ev) => {
+            ev.persist();
+            setInputValue(ev.target.value);
+          }}
+          actionIcon={
+            <Icon
+              aria-label={visibility ? 'Show Password' : 'Hide Password'}
+              onClick={() => setVisibility((x) => !x)}
+              name={visibility ? 'visibility_on' : 'visibility_off'}
+              className="cursor-pointer"
+            />
+          }
+        />
+        <Caption withInput={true}>Create a string, unique password</Caption>
+      </div>
+      <div className="ml-6">
+        <Label htmlFor="password-2" withInput={true}>
+          Password
+        </Label>
+        <Input
+          id="password-2"
+          placeholder="Password"
+          value={secondInputValue}
+          type={visibility2 ? 'text' : 'password'}
+          onChange={(ev) => {
+            ev.persist();
+            setSecondInputValue(ev.target.value);
+          }}
+          actionIcon={
+            <Icon
+              aria-label={visibility ? 'Show Password' : 'Hide Password'}
+              onClick={() => setVisibility2((x) => !x)}
+              name={visibility2 ? 'visibility_on' : 'visibility_off'}
+              className="cursor-pointer"
+            />
+          }
+        />
+        <Caption withInput={true} error={true}>
+          Create a password with at least 8 characters
+        </Caption>
+      </div>
+    </div>
+  );
+};`;
+
 export default {
   title: 'Components/Input/Input With Caption',
   component: Input,
@@ -57,6 +118,7 @@ export default {
     docs: {
       docPage: {
         title: 'Input',
+        customCode,
         props: {
           exclude: ['autocomplete'],
         },

package/core/components/atoms/input/__stories__/LabelPosition.story.tsx

@@ -20,6 +20,43 @@ export const labelPosition = () => {
   );
 };
 
+const customCode = `() => {
+  const [inputValue, setInputValue] = React.useState('Joy Lawson');
+  const [secondInputValue, setSecondInputValue] = React.useState('Joy Lawson');
+  return (
+    <div className="d-flex align-items-end">
+      <div>
+        <Label htmlFor="fullName" withInput={true}>
+          Full Name
+        </Label>
+        <Input
+          placeholder="Full name"
+          id="fullName"
+          value={inputValue}
+          onChange={(ev) => {
+            ev.persist();
+            setInputValue(ev.target.value);
+          }}
+        />
+      </div>
+      <div className="d-flex align-items-center ml-9">
+        <Label htmlFor="fullName2" className="mr-6">
+          Full Name
+        </Label>
+        <Input
+          placeholder="Full name"
+          id="fullName2"
+          value={secondInputValue}
+          onChange={(ev) => {
+            ev.persist();
+            setSecondInputValue(ev.target.value);
+          }}
+        />
+      </div>
+    </div>
+  );
+};`;
+
 export default {
   title: 'Components/Input/Label Position',
   component: Input,
@@ -27,6 +64,7 @@ export default {
     docs: {
       docPage: {
         title: 'Input',
+        customCode,
         props: {
           exclude: ['autocomplete'],
         },

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

@@ -44,6 +44,51 @@ export const controlledInput = () => {
     </div>
   );
 };
+
+const customCode = `() => {
+  const [visibility, setVisibility] = React.useState(false);
+  const [value, setValue] = React.useState('Value');
+  const handleParentChange = (event) => {
+    const updatedValue = event.target.value;
+      setValue(updatedValue);
+  };
+  const [value1, setValue1] = React.useState('Value');
+  const onChangeHandler = (event) => {
+    const updatedValue = event.target.value;
+      setValue1(updatedValue);
+  };
+  const onClearHandler = () => {
+    const updatedValue = '';
+      setValue1(updatedValue);
+  };
+  return (
+    <div className="d-flex">
+      <Input
+        name="input"
+        value={value}
+        type={visibility ? 'text' : 'password'}
+        placeholder="Placeholder"
+        actionIcon={
+          <Icon
+            onClick={() => setVisibility((x) => !x)}
+            name={visibility ? 'visibility_on' : 'visibility_off'}
+            aria-label={visibility ? 'Show Password' : 'Hide Password'}
+            className="cursor-pointer"
+          />
+        }
+        onChange={handleParentChange}
+      />
+      <Input
+        name="input"
+        value={value1}
+        type="text"
+        placeholder="PlaceHolder"
+        onChange={onChangeHandler}
+        onClear={onClearHandler}
+      />
+    </div>
+  );
+};`;
 export default {
   title: 'Components/Input/Variants/Controlled Input',
   component: Input,
@@ -51,6 +96,7 @@ export default {
     docs: {
       docPage: {
         title: 'Input',
+        customCode,
         props: {
           exclude: ['autocomplete'],
         },

package/core/components/atoms/input/__stories__/variants/types/BasicInput.story.tsx

@@ -7,7 +7,7 @@ export const basic = () => {
   return (
     <div className="Row">
       <div className="mr-9 mb-8 w-25">
-        <Input name="input" value="Value" onChange={action('on-change')} onClear={action('on-clear')} />
+        <Input name="input" onChange={action('on-change')} onClear={action('on-clear')} />
         <br />
         <Text weight="strong">Default</Text>
       </div>
@@ -24,7 +24,7 @@ export const basic = () => {
         <Text weight="strong">Placeholder</Text>
       </div>
       <div className="mr-9 mb-8 w-25">
-        <Input name="input" value="Value" onChange={action('on-change')} onClear={action('on-clear')} error={true} />
+        <Input name="input" onChange={action('on-change')} onClear={action('on-clear')} error={true} />
         <br />
         <Text weight="strong">Error</Text>
       </div>

package/core/components/atoms/input/__stories__/variants/types/IconLeft.story.tsx

@@ -8,14 +8,13 @@ export const iconLeft = () => {
   return (
     <div className="Row">
       <div className="mr-9 mb-8 w-25">
-        <Input name="input" value="Value" onChange={action('on-change')} onClear={action('on-clear')} icon={icon} />
+        <Input name="input" onChange={action('on-change')} onClear={action('on-clear')} icon={icon} />
         <br />
         <Text weight="strong">Default</Text>
       </div>
       <div className="mr-9 mb-8 w-25">
         <Input
           name="input"
-          value=""
           placeholder="Placeholder"
           onChange={action('on-change')}
           onClear={action('on-clear')}
@@ -26,14 +25,7 @@ export const iconLeft = () => {
         <Text weight="strong">Placeholder</Text>
       </div>
       <div className="mr-9 mb-8 w-25">
-        <Input
-          name="input"
-          value="Value"
-          onChange={action('on-change')}
-          onClear={action('on-clear')}
-          error={true}
-          icon={icon}
-        />
+        <Input name="input" onChange={action('on-change')} onClear={action('on-clear')} error={true} icon={icon} />
         <br />
         <Text weight="strong">Error</Text>
       </div>

package/core/components/atoms/input/__stories__/variants/types/WithLabel.story.tsx

@@ -11,13 +11,7 @@ export const withLabel = () => {
           <Label withInput={true} required={true}>
             Full Name
           </Label>
-          <Input
-            name="input"
-            value="Value"
-            onChange={action('on-change')}
-            onClear={action('on-clear')}
-            required={true}
-          />
+          <Input name="input" onChange={action('on-change')} onClear={action('on-clear')} required={true} />
         </div>
         <br />
         <Text weight="strong">No Caption</Text>
@@ -28,7 +22,6 @@ export const withLabel = () => {
         </Label>
         <Input
           name="input"
-          value="Value"
           type="password"
           onChange={action('on-change')}
           onClear={action('on-clear')}
@@ -44,7 +37,6 @@ export const withLabel = () => {
         </Label>
         <Input
           name="input"
-          value="Value"
           type="password"
           onChange={action('on-change')}
           onClear={action('on-clear')}

package/core/components/atoms/label/Label.tsx

@@ -50,7 +50,7 @@ export const Label = (props: LabelProps) => {
     'Label--disabled': disabled,
   });
 
-  const renderInfo = (isRequired: boolean = false, isOptional?: boolean) => {
+  const renderInfo = (isRequired = false, isOptional?: boolean) => {
     if (isRequired) {
       return <span className="Label-requiredIndicator" data-test="DesignSystem-Label--RequiredIndicator" />;
     }

package/core/components/atoms/legend/Legend.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Text, { Appearance as LabelAppearance } from '@/components/atoms/text';
+import Text, { TextAppearance } from '@/components/atoms/text';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 
@@ -15,7 +15,7 @@ export interface LegendProps extends BaseProps {
   /**
    * Color of label
    */
-  labelAppearance?: LabelAppearance;
+  labelAppearance?: TextAppearance;
   /**
    * Size of Icon
    */

package/core/components/atoms/legend/__stories__/variants/labelAppearance.story.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { Appearance } from '@/components/atoms/text';
+import { TextAppearance as LabelApperance } from '@/components/atoms/text';
 import Legend from '../../Legend';
 
 // CSF format story
 export const labelAppearance = () => {
-  const appearances: Appearance[] = ['default', 'white', 'destructive', 'subtle', 'disabled'];
+  const appearances: LabelApperance[] = ['default', 'white', 'destructive', 'subtle', 'disabled'];
   return (
     <div>
       {appearances.map((appearance, i) => {

package/core/components/atoms/link/Link.tsx

@@ -4,8 +4,8 @@ import classNames from 'classnames';
 import { BaseProps, OmitNativeProps } from '@/utils/types';
 
 type LinkTarget = '_blank' | '_self' | '_parent' | '_top';
-type Appearance = 'default' | 'subtle';
-type Size = 'regular' | 'tiny';
+type LinkAppearance = 'default' | 'subtle';
+type LinkSize = 'regular' | 'tiny';
 
 export interface LinkProps extends BaseProps, OmitNativeProps<HTMLLinkElement, 'onClick'> {
   /**
@@ -15,11 +15,11 @@ export interface LinkProps extends BaseProps, OmitNativeProps<HTMLLinkElement, '
   /**
    * Color of `Link`
    */
-  appearance: Appearance;
+  appearance: LinkAppearance;
   /**
    * Size of `Link`
    */
-  size: Size;
+  size: LinkSize;
   /**
    * Disables the `Link`, making it unable to be clicked
    */