@innovaccer/design-system 2.3.0 → 2.4.0-0

package/CHANGELOG.md

@@ -1,3 +1,38 @@
+## 2.4.0-0  (2021-09-17) 
+
+### Highlights
+NA
+
+### Breaking changes
+NA
+
+### Migration guide
+NA
+
+### Deprecations
+NA
+
+### Features
+* Automated the process of types bundling (21f435b0)
+* A new InlineMessage Component has been added (f852b2a8)
+* Added the events indicator on given date in Calendar Component (4714efa2)
+* A Chip has been added to Datepicker Component to select today's date (ee9e47e0)
+* Tooltip in Icon Button Component has been added (f9f14233)
+### Fixes
+* Removes the events type Array from Calendar Component (41abf4ef)
+* zIndex for Backdrop Component has been fixed (055edb09)
+* Border radius of Card Component has been fixed (c113a568)
+* New Stories has been added to EmptyState Component and updated the existing story (af83ea74)
+* Height of the Input field has been fixed when focus in EditableChipInput Component (bbb4f256)
+### Improvements
+* Added test cases for InputMask Component (e0f37b99)
+* Added test cases for FileList Component (b36a44f1)
+* Added test cases for Dropdown Component options and loading state (1cb98e93)
+### Documentation
+NA
+
+-------------------
+
 ## 2.3.0  (2021-09-10) 
 
 ### Highlights

package/core/components/atoms/backdrop/Backdrop.tsx

@@ -10,6 +10,10 @@ export interface BackdropProps extends BaseProps {
    * Handles open/close state
    */
   open: boolean;
+  /**
+   * Specify zIndex Value
+   */
+  zIndex?: number;
 }
 
 export const Backdrop: React.FC<BackdropProps> = (props) => {
@@ -61,7 +65,13 @@ export const Backdrop: React.FC<BackdropProps> = (props) => {
   }, [props.open]);
 
   const BackdropElement = ReactDOM.createPortal(
-    <div data-test="DesignSystem-Backdrop" data-layer={true} {...baseProps} className={classes} />,
+    <div
+      data-test="DesignSystem-Backdrop"
+      data-layer={true}
+      {...baseProps}
+      className={classes}
+      style={{ zIndex: props.zIndex }}
+    />,
     document.body
   );
 

package/core/components/atoms/button/Button.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Text, Icon, Spinner } from '@/index';
+import { Text, Icon, Spinner, Tooltip } from '@/index';
 import classNames from 'classnames';
 import { BaseProps, BaseHtmlProps } from '@/utils/types';
 
@@ -46,6 +46,10 @@ export interface ButtonProps extends BaseProps, BaseHtmlProps<HTMLButtonElement>
    * Material icon name
    */
   icon?: string;
+  /**
+   * Adds title to `Button` when only icon is present
+   */
+  tooltip?: string;
   /**
    * Align icon left or right
    * @default "left"
@@ -105,6 +109,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, r
     loading,
     disabled,
     className,
+    tooltip,
     ...rest
   } = props;
 
@@ -124,50 +129,61 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, r
     [`Button-icon--${iconAlign}`]: children && iconAlign,
   });
 
+  const ButtonElement = () => {
+    return (
+      <button
+        data-test="DesignSystem-Button"
+        ref={ref}
+        type={type}
+        className={buttonClass}
+        disabled={disabled || loading}
+        tabIndex={tabIndex}
+        {...rest}
+      >
+        {loading ? (
+          <>
+            <Spinner
+              size="small"
+              appearance={appearance === 'basic' || appearance === 'transparent' ? 'secondary' : 'white'}
+              data-test="DesignSystem-Button--Spinner"
+              className="Button-spinner"
+            />
+            <Text className="Button-text Button-text--hidden">{children || ''}</Text>
+          </>
+        ) : (
+          <>
+            {icon && (
+              <div className={iconClass}>
+                <Icon
+                  data-test="DesignSystem-Button--Icon"
+                  name={icon}
+                  appearance={
+                    disabled
+                      ? 'disabled'
+                      : appearance === 'basic' || appearance === 'transparent'
+                        ? selected
+                          ? 'info'
+                          : 'default'
+                        : 'white'
+                  }
+                  size={largeIcon && !children ? sizeMapping[size] + 4 : sizeMapping[size]}
+                />
+              </div>
+            )}
+            {children}
+          </>
+        )}
+      </button>
+    );
+  }
+
   return (
-    <button
-      data-test="DesignSystem-Button"
-      ref={ref}
-      type={type}
-      className={buttonClass}
-      disabled={disabled || loading}
-      tabIndex={tabIndex}
-      {...rest}
-    >
-      {loading ? (
-        <>
-          <Spinner
-            size="small"
-            appearance={appearance === 'basic' || appearance === 'transparent' ? 'secondary' : 'white'}
-            data-test="DesignSystem-Button--Spinner"
-            className="Button-spinner"
-          />
-          <Text className="Button-text Button-text--hidden">{children || ''}</Text>
-        </>
-      ) : (
-        <>
-          {icon && (
-            <div className={iconClass}>
-              <Icon
-                data-test="DesignSystem-Button--Icon"
-                name={icon}
-                appearance={
-                  disabled
-                    ? 'disabled'
-                    : appearance === 'basic' || appearance === 'transparent'
-                    ? selected
-                      ? 'info'
-                      : 'default'
-                    : 'white'
-                }
-                size={largeIcon && !children ? sizeMapping[size] + 4 : sizeMapping[size]}
-              />
-            </div>
-          )}
-          {children}
-        </>
-      )}
-    </button>
+    icon && tooltip && !children ?
+      <Tooltip tooltip={tooltip}>
+        <ButtonElement />
+      </Tooltip>
+      :
+      <ButtonElement />
   );
 });
 

package/core/components/atoms/button/__stories__/IconButtonGroup.story.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 import Button from '@/components/atoms/button';
 
 export const iconButtonGroup = () => (
-  <div className="d-flex">
-    <Button size="tiny" icon="content_copy" className="mr-2" />
-    <Button size="tiny" icon="content_paste" className="mr-2" />
-    <Button size="tiny" icon="delete" />
+  <div className="d-inline-flex">
+    <Button size="tiny" icon="content_copy " className="mr-2" tooltip="Copy" />
+    <Button size="tiny" icon="content_paste" className="mr-2" tooltip="Paste" />
+    <Button size="tiny" icon="delete" tooltip="Delete" />
   </div>
 );
 

package/core/components/atoms/button/__stories__/IconButtonSecondary.story.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Button from '../Button';
 
-export const iconButton = () => <Button appearance="basic" icon="keyboard_arrow_right" />;
+export const iconButton = () => <Button appearance="basic" icon="keyboard_arrow_right" tooltip="Next in rank" />;
 
 export default {
   title: 'Components/Button/Icon Button',

package/core/components/atoms/button/__tests__/Button.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, fireEvent, screen } from '@testing-library/react';
 import { Button } from '@/index';
 import { ButtonProps as Props } from '@/index.type';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
@@ -232,3 +232,38 @@ describe('Button component with icon', () => {
     });
   });
 });
+
+describe('Button component with Tooltip', () => {
+
+  it('check for tooltip attribute', () => {
+    const { getByTestId } = render(
+      <Button appearance="basic" icon="keyboard_arrow_right" tooltip="Next in rank" />
+    );
+
+    fireEvent.mouseEnter(getByTestId('DesignSystem-Button'));
+    expect(getByTestId('DesignSystem-Popover')).toBeInTheDocument();
+  });
+
+  it('check for tooltip when children is given', () => {
+    render(
+      <Button
+        appearance="basic"
+        icon="keyboard_arrow_right"
+        tooltip="Next in rank"
+      >
+        Click Me
+      </Button>
+    );
+
+    const TooltipComponent = screen.queryByText('DesignSystem-Popover');
+    expect(TooltipComponent).not.toBeInTheDocument();
+  });
+
+  it('check for tooltip when icon is not given', () => {
+    render(
+      <Button appearance="basic" tooltip="Next in rank" />
+    );
+    const TooltipComponent = screen.queryByText('DesignSystem-Popover');
+    expect(TooltipComponent).not.toBeInTheDocument();
+  });
+});

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

@@ -623,6 +623,7 @@ const DropdownList = (props: OptionsProps) => {
         customStyle={popoverStyle}
         position={alignmentMapping[align]}
         {...popoverOptions}
+        data-test="DesignSystem-Dropdown--Popover"
       >
         {(withSearch || props.async) && renderSearch()}
         {renderDropdownSection()}

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

@@ -7,31 +7,31 @@ const Loading = (props: any) => {
 
   switch (loadingType) {
     case 'DEFAULT':
-      return <PlaceholderParagraph length={'large'} />;
+      return <PlaceholderParagraph length={'large'} data-test="DesignSystem-Dropdown--PlaceholderParagraph" />;
     case 'WITH_ICON':
       return (
-        <Placeholder withImage={true} round={true}>
+        <Placeholder withImage={true} round={true} data-test="DesignSystem-Dropdown--Placeholder">
           <PlaceholderParagraph length="large" />
         </Placeholder>
       );
     case 'WITH_META':
       return (
-        <Placeholder withImage={false}>
-          <PlaceholderParagraph length="large" />
-          <PlaceholderParagraph length="medium" size="xxs" />
+        <Placeholder withImage={false} data-test="DesignSystem-Dropdown--Placeholder">
+          <PlaceholderParagraph length="large" data-test="DesignSystem-Dropdown--PlaceholderParagraph" />
+          <PlaceholderParagraph length="medium" size="xxs" data-test="DesignSystem-Dropdown--PlaceholderParagraph" />
         </Placeholder>
       );
     case 'WITH_CHECKBOX':
       return (
-        <Placeholder withImage={true}>
+        <Placeholder withImage={true} data-test="DesignSystem-Dropdown--Placeholder">
           <PlaceholderParagraph length="large" />
         </Placeholder>
       );
     case 'ICON_WITH_META':
       return (
-        <Placeholder withImage={true} round={true} imageSize={'medium'}>
-          <PlaceholderParagraph length="large" />
-          <PlaceholderParagraph length="medium" size="xxs" />
+        <Placeholder withImage={true} round={true} imageSize={'medium'} data-test="DesignSystem-Dropdown--Placeholder">
+          <PlaceholderParagraph length="large" data-test="DesignSystem-Dropdown--PlaceholderParagraph" />
+          <PlaceholderParagraph length="medium" size="xxs" data-test="DesignSystem-Dropdown--PlaceholderParagraph" />
         </Placeholder>
       );
   }

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

@@ -19,6 +19,8 @@ for (let i = 1; i <= 10; i++) {
   disabledStoryOptions.push({
     label: `Option ${i}`,
     value: `Option ${i}`,
+    icon: 'events',
+    subInfo: 'subInfo',
     disabled: i === 2,
   });
 }

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
 import { Dropdown } from '@/index';
 import { DropdownProps as Props } from '@/index.type';
@@ -27,6 +27,7 @@ for (let i = 1; i <= 10; i++) {
 }
 
 const FunctionValue = jest.fn();
+const trigger = 'DesignSystem-DropdownTrigger';
 
 describe('Dropdown component', () => {
   const mapper: Record<string, any> = {
@@ -246,3 +247,13 @@ describe('Dropdown component', () => {
 
   testHelper(mapper, testFunc);
 });
+
+describe('renders dropdown', () => {
+  it('renders popover', () => {
+    const { getByTestId } = render(<Dropdown options={storyOptions} />);
+    const dropdownTrigger = getByTestId(trigger);
+    fireEvent.click(dropdownTrigger);
+
+    expect(getByTestId('DesignSystem-Popover')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { Dropdown } from '@/index';
+
+import { storyOptions, iconOptions, subInfoOptions, iconWithSubinfoOptions } from '../__stories__/Options';
+
+const FunctionValue = jest.fn();
+const trigger = 'DesignSystem-DropdownTrigger';
+
+describe('renders loading states', () => {
+  it('DEFAULT options', () => {
+    const { getAllByTestId, getByTestId } = render(<Dropdown options={storyOptions} loading={true} />);
+    const dropdownTrigger = getByTestId(trigger);
+    fireEvent.click(dropdownTrigger);
+
+    expect(getAllByTestId('DesignSystem-Dropdown--PlaceholderParagraph')).toHaveLength(storyOptions.length);
+  });
+
+  it('WITH_ICON options', () => {
+    const { getAllByTestId, getByTestId } = render(
+      <Dropdown options={iconOptions} loading={true} optionType="WITH_ICON" />
+    );
+    const dropdownTrigger = getByTestId(trigger);
+    fireEvent.click(dropdownTrigger);
+
+    expect(getAllByTestId('DesignSystem-Dropdown--Placeholder')).toHaveLength(iconOptions.length);
+    expect(getAllByTestId('DesignSystem-Placeholder--Image')).toHaveLength(iconOptions.length);
+  });
+
+  it('WITH_META options', () => {
+    const { getAllByTestId, queryByTestId, getByTestId } = render(
+      <Dropdown options={subInfoOptions} loading={true} optionType="WITH_META" />
+    );
+    const dropdownTrigger = getByTestId(trigger);
+    fireEvent.click(dropdownTrigger);
+
+    expect(getAllByTestId('DesignSystem-Dropdown--Placeholder')).toHaveLength(subInfoOptions.length);
+    expect(queryByTestId('DesignSystem-Placeholder--Image')).not.toBeInTheDocument();
+    expect(getAllByTestId('DesignSystem-Dropdown--PlaceholderParagraph')).toHaveLength(subInfoOptions.length * 2);
+  });
+
+  it('ICON_WITH_META options', () => {
+    const { getAllByTestId, getByTestId } = render(
+      <Dropdown options={iconWithSubinfoOptions} loading={true} optionType="ICON_WITH_META" />
+    );
+    const dropdownTrigger = getByTestId(trigger);
+    fireEvent.click(dropdownTrigger);
+
+    expect(getAllByTestId('DesignSystem-Dropdown--Placeholder')).toHaveLength(iconWithSubinfoOptions.length);
+    expect(getAllByTestId('DesignSystem-Placeholder--Image')).toHaveLength(iconWithSubinfoOptions.length);
+    expect(getAllByTestId('DesignSystem-Dropdown--PlaceholderParagraph')).toHaveLength(
+      iconWithSubinfoOptions.length * 2
+    );
+  });
+
+  it('WITH_CHECKBOX options', () => {
+    const { getAllByTestId, getByTestId } = render(
+      <Dropdown options={storyOptions} loading={true} withCheckbox={true} />
+    );
+    const dropdownTrigger = getByTestId(trigger);
+    fireEvent.click(dropdownTrigger);
+
+    expect(getAllByTestId('DesignSystem-Dropdown--Placeholder')).toHaveLength(storyOptions.length);
+    expect(getAllByTestId('DesignSystem-Placeholder--Image')).toHaveLength(storyOptions.length);
+  });
+});

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

@@ -0,0 +1,204 @@
+import * as React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { Dropdown } from '@/index';
+
+import {
+  storyOptions,
+  iconOptions,
+  subInfoOptions,
+  disabledStoryOptions,
+  iconWithSubinfoOptions,
+} from '../__stories__/Options';
+
+const FunctionValue = jest.fn();
+const trigger = 'DesignSystem-DropdownTrigger';
+
+describe('renders different options', () => {
+  it('renders DEFAULT options', () => {
+    const { getAllByTestId, getByTestId } = render(<Dropdown options={storyOptions} />);
+    const dropdownTrigger = getByTestId(trigger);
+    fireEvent.click(dropdownTrigger);
+    expect(getAllByTestId('DesignSystem-DropdownOption--DEFAULT')).toHaveLength(storyOptions.length);
+    expect(getAllByTestId('DesignSystem-DropdownOption--DEFAULT')[0].textContent).toMatch(storyOptions[0].label);
+  });
+
+  it('renders WITH_ICON options', () => {
+    const { getAllByTestId, getByTestId } = render(<Dropdown options={iconOptions} optionType="WITH_ICON" />);
+    const dropdownTrigger = getByTestId(trigger);
+    fireEvent.click(dropdownTrigger);
+    expect(getAllByTestId('DesignSystem-DropdownOption--WITH_ICON')).toHaveLength(iconOptions.length);
+    expect(getAllByTestId('DesignSystem-DropdownOption--WITH_ICON')[0].textContent).toMatch(iconOptions[0].label);
+    expect(getAllByTestId('DesignSystem-DropdownOption--WITH_ICON--Icon')[0].textContent).toMatch(iconOptions[0].icon);
+  });
+
+  it('renders WITH_META options', () => {
+    const { getAllByTestId, getByTestId } = render(<Dropdown options={subInfoOptions} optionType="WITH_META" />);
+    const dropdownTrigger = getByTestId(trigger);
+    fireEvent.click(dropdownTrigger);
+    expect(getAllByTestId('DesignSystem-DropdownOption--WITH_META')).toHaveLength(subInfoOptions.length);
+    expect(getAllByTestId('DesignSystem-DropdownOption--WITH_META')[0].textContent).toMatch(subInfoOptions[0].label);
+    expect(getAllByTestId('DesignSystem-DropdownOption--WITH_META--Meta')[0].textContent).toMatch(
+      subInfoOptions[0].subInfo
+    );
+  });
+
+  it('renders WITH_CHECKBOX options', () => {
+    const { getAllByTestId, getByTestId } = render(<Dropdown options={storyOptions} withCheckbox={true} />);
+    const dropdownTrigger = getByTestId(trigger);
+    fireEvent.click(dropdownTrigger);
+    expect(getAllByTestId('DesignSystem-DropdownOption--WITH_CHECKBOX')).toHaveLength(storyOptions.length);
+    expect(getAllByTestId('DesignSystem-DropdownOption--WITH_CHECKBOX')[0].textContent).toMatch(storyOptions[0].label);
+  });
+
+  it('renders ICON_WITH_META options', () => {
+    const { getAllByTestId, getByTestId } = render(
+      <Dropdown options={iconWithSubinfoOptions} optionType="ICON_WITH_META" />
+    );
+    const dropdownTrigger = getByTestId(trigger);
+    fireEvent.click(dropdownTrigger);
+    expect(getAllByTestId('DesignSystem-DropdownOption--ICON_WITH_META')).toHaveLength(iconWithSubinfoOptions.length);
+    expect(getAllByTestId('DesignSystem-DropdownOption--ICON_WITH_META')[0].textContent).toMatch(
+      iconWithSubinfoOptions[0].label
+    );
+    expect(getAllByTestId('DesignSystem-DropdownOption--ICON_WITH_META--Icon')[0].textContent).toMatch(
+      iconWithSubinfoOptions[0].icon
+    );
+    expect(getAllByTestId('DesignSystem-DropdownOption--ICON_WITH_META')[0].textContent).toMatch(
+      iconWithSubinfoOptions[0].subInfo
+    );
+  });
+});
+
+describe('renders custom option', () => {
+  it('custom option renderer', () => {
+    const { getAllByTestId, getByTestId } = render(<Dropdown options={storyOptions} optionRenderer={FunctionValue} />);
+    const dropdownTrigger = getByTestId(trigger);
+    fireEvent.click(dropdownTrigger);
+    expect(getAllByTestId('DesignSystem-DropdownOption--Custom')).toHaveLength(storyOptions.length);
+    expect(getAllByTestId('DesignSystem-DropdownOption--Custom')[0]).toHaveClass('OptionWrapper');
+    expect(FunctionValue).toHaveBeenCalled();
+  });
+});
+
+describe('dropdown with prop: truncateOption', () => {
+  it('wraps option', () => {
+    const { getAllByTestId, getByTestId } = render(<Dropdown options={storyOptions} truncateOption={false} />);
+    const dropdownTrigger = getByTestId(trigger);
+    fireEvent.click(dropdownTrigger);
+    expect(getAllByTestId('DesignSystem-Text')[0]).toHaveClass('Option-text--wrap');
+  });
+});
+
+describe('renders option with meta list', () => {
+  it('metalist option', () => {
+    const { getByTestId } = render(
+      <Dropdown
+        options={[
+          {
+            optionType: 'WITH_META',
+            label: 'Option',
+            value: 'Option',
+            subInfo: {
+              list: [
+                { icon: 'assessment', label: 'Meta data' },
+                { icon: 'assessment', label: 'Meta data' },
+              ],
+              seperator: true,
+            },
+          },
+        ]}
+      />
+    );
+    const dropdownTrigger = getByTestId(trigger);
+    fireEvent.click(dropdownTrigger);
+
+    expect(getByTestId('DesignSystem-DropdownOption--WITH_META--MetaList')).toBeInTheDocument();
+  });
+});
+
+describe('renders active option', () => {
+  it('without checkbox', () => {
+    const { getAllByTestId, getByTestId } = render(<Dropdown options={storyOptions} />);
+    const dropdownTrigger = getByTestId(trigger);
+    fireEvent.click(dropdownTrigger);
+
+    const option = getAllByTestId('DesignSystem-DropdownOption--DEFAULT')[0];
+    fireEvent.mouseEnter(option);
+    expect(option).toHaveClass('Option--active');
+  });
+
+  it('with checkbox', () => {
+    const { getAllByTestId, getByTestId } = render(<Dropdown options={storyOptions} withCheckbox={true} />);
+    const dropdownTrigger = getByTestId(trigger);
+    fireEvent.click(dropdownTrigger);
+
+    const option = getAllByTestId('DesignSystem-DropdownOption--WITH_CHECKBOX')[0];
+    fireEvent.mouseEnter(option);
+    expect(option).toHaveClass('Option-checkbox--active');
+  });
+});
+
+describe('renders selected option', () => {
+  it('with DEFAULT option', () => {
+    const { getAllByTestId, getByTestId } = render(<Dropdown options={storyOptions} />);
+    const dropdownTrigger = getByTestId(trigger);
+    fireEvent.click(dropdownTrigger);
+
+    const selectedOption = getAllByTestId('DesignSystem-DropdownOption--DEFAULT')[0];
+    fireEvent.click(selectedOption);
+    expect(selectedOption).toHaveClass('Option--selected');
+  });
+
+  it('WITH_ICON options', () => {
+    const { getAllByTestId, getByTestId } = render(<Dropdown options={iconOptions} optionType="WITH_ICON" />);
+    const dropdownTrigger = getByTestId(trigger);
+    fireEvent.click(dropdownTrigger);
+
+    const selectedOption = getAllByTestId('DesignSystem-DropdownOption--WITH_ICON')[0];
+    fireEvent.click(selectedOption);
+    expect(selectedOption).toHaveClass('Option--selected');
+  });
+
+  it('WITH_META options', () => {
+    const { getAllByTestId, getByTestId } = render(<Dropdown options={disabledStoryOptions} optionType="WITH_META" />);
+    const dropdownTrigger = getByTestId(trigger);
+    fireEvent.click(dropdownTrigger);
+
+    const selectedOption = getAllByTestId('DesignSystem-DropdownOption--WITH_META')[0];
+    fireEvent.click(selectedOption);
+    expect(selectedOption).toHaveClass('Option--selected');
+  });
+});
+
+describe('renders disabled option', () => {
+  it('with DEFAULT option', () => {
+    const { getAllByTestId, getByTestId } = render(<Dropdown options={disabledStoryOptions} />);
+    const dropdownTrigger = getByTestId(trigger);
+    fireEvent.click(dropdownTrigger);
+    expect(getAllByTestId('DesignSystem-DropdownOption--DEFAULT')[1]).toHaveClass('Option--disabled');
+    expect(getAllByTestId('DesignSystem-Text')[1]).toHaveClass('Text--disabled');
+  });
+
+  it('WITH_CHECKBOX option', () => {
+    const { getAllByTestId, getByTestId } = render(<Dropdown options={disabledStoryOptions} withCheckbox={true} />);
+    const dropdownTrigger = getByTestId(trigger);
+    fireEvent.click(dropdownTrigger);
+    expect(getAllByTestId('DesignSystem-DropdownOption--WITH_CHECKBOX')[1]).toHaveAttribute('data-disabled');
+  });
+
+  it('WITH_ICON options', () => {
+    const { getAllByTestId, getByTestId } = render(<Dropdown options={disabledStoryOptions} optionType="WITH_ICON" />);
+    const dropdownTrigger = getByTestId(trigger);
+    fireEvent.click(dropdownTrigger);
+    expect(getAllByTestId('DesignSystem-Text')[1]).toHaveClass('Text--disabled');
+    expect(getAllByTestId('DesignSystem-DropdownOption--WITH_ICON--Icon')[1]).toHaveClass('Icon--disabled');
+  });
+
+  it('WITH_META options', () => {
+    const { getAllByTestId, getByTestId } = render(<Dropdown options={disabledStoryOptions} optionType="WITH_META" />);
+    const dropdownTrigger = getByTestId(trigger);
+    fireEvent.click(dropdownTrigger);
+    expect(getAllByTestId('DesignSystem-Text')[1]).toHaveClass('Text--disabled');
+    expect(getAllByTestId('DesignSystem-DropdownOption--WITH_META--Meta')[1]).toHaveClass('Text--disabled');
+  });
+});

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

@@ -16,6 +16,7 @@ const CheckboxOption = (props: OptionTypeProps) => {
         onChange={onChangeHandler}
         tabIndex={-1}
         className="OptionCheckbox"
+        data-test={`${dataTest}--Checkbox`}
       />
     </div>
   );

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

@@ -21,7 +21,9 @@ const IconOption = (props: OptionTypeProps) => {
       data-test={dataTest}
       data-disabled={disabled}
     >
-      {icon && <Icon className="Option-icon mr-4" name={icon} appearance={appearance} />}
+      {icon && (
+        <Icon className="Option-icon mr-4" data-test={`${dataTest}--Icon`} name={icon} appearance={appearance} />
+      )}
       <div className={'Option-label'}>
         <Text className={textClassName} appearance={appearance}>
           {label}

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

@@ -30,7 +30,9 @@ const IconWithMetaOption = (props: OptionTypeProps) => {
       data-test={dataTest}
       data-disabled={disabled}
     >
-      {icon && <Icon className="Option-icon mr-4" name={icon} appearance={appearance} />}
+      {icon && (
+        <Icon data-test={`${dataTest}--Icon`} className="Option-icon mr-4" name={icon} appearance={appearance} />
+      )}
       <div className={'Option-label'}>
         <Text className={textClassName} appearance={appearance}>
           {label}