@innovaccer/design-system 2.5.0-2 → 2.5.1

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

@@ -94,7 +94,7 @@ const sizeMapping: Record<Size, number> = {
   large: 20,
 };
 
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+const ButtonBase = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const {
     size = 'regular',
     appearance = 'basic',
@@ -129,61 +129,62 @@ 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 (
-    icon && tooltip && !children ?
-      <Tooltip tooltip={tooltip}>
-        <ButtonElement />
-      </Tooltip>
-      :
-      <ButtonElement />
+    <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>
+  );
+});
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  const { icon, tooltip, children } = { ...props };
+
+  return icon && tooltip && !children ? (
+    <Tooltip tooltip={tooltip}>
+      <ButtonBase {...props} ref={ref} />
+    </Tooltip>
+  ) : (
+    <ButtonBase {...props} ref={ref} />
   );
 });
 

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

@@ -234,11 +234,8 @@ 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" />
-    );
+    const { getByTestId } = render(<Button appearance="basic" icon="keyboard_arrow_right" tooltip="Next in rank" />);
 
     fireEvent.mouseEnter(getByTestId('DesignSystem-Button'));
     expect(getByTestId('DesignSystem-Popover')).toBeInTheDocument();
@@ -246,11 +243,7 @@ describe('Button component with Tooltip', () => {
 
   it('check for tooltip when children is given', () => {
     render(
-      <Button
-        appearance="basic"
-        icon="keyboard_arrow_right"
-        tooltip="Next in rank"
-      >
+      <Button appearance="basic" icon="keyboard_arrow_right" tooltip="Next in rank">
         Click Me
       </Button>
     );
@@ -260,9 +253,7 @@ describe('Button component with Tooltip', () => {
   });
 
   it('check for tooltip when icon is not given', () => {
-    render(
-      <Button appearance="basic" tooltip="Next in rank" />
-    );
+    render(<Button appearance="basic" tooltip="Next in rank" />);
     const TooltipComponent = screen.queryByText('DesignSystem-Popover');
     expect(TooltipComponent).not.toBeInTheDocument();
   });

package/core/components/atoms/checkbox/Checkbox.tsx

@@ -81,12 +81,9 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>((props
 
   const ref = React.useRef<HTMLInputElement>(null);
 
-  React.useImperativeHandle(
-    forwardedRef,
-    (): HTMLInputElement => {
-      return ref.current as HTMLInputElement;
-    }
-  );
+  React.useImperativeHandle(forwardedRef, (): HTMLInputElement => {
+    return ref.current as HTMLInputElement;
+  });
 
   const [checked, setChecked] = React.useState(props.checked === undefined ? defaultChecked : props.checked);
 

package/core/components/atoms/collapsible/__stories__/index.story.tsx

@@ -12,7 +12,7 @@ export const all = () => {
     <div className="d-flex">
       <Collapsible expanded={expanded} hoverable={hoverable} height="100vh" onToggle={setExpanded}>
         <div className="d-flex pt-4">
-          <Icon name="events" className="d-flex align-items-center px-5" />
+          <Icon name="events" className="d-flex align-items-center px-5 Text--regular" />
           {expanded && <Text className="mr-6">Collapsible</Text>}
         </div>
       </Collapsible>
@@ -31,7 +31,7 @@ const customCode = `() => {
         onToggle={setExpanded}
       >
         <div className="d-flex pt-4">
-          <Icon name="events" className="d-flex align-items-center px-5" />
+          <Icon name="events" className="d-flex align-items-center px-5 Text--regular" />
           {expanded && (
             <Text className="mr-6">Collapsible</Text>
           )}

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

@@ -499,7 +499,7 @@ const DropdownList = (props: OptionsProps) => {
     if (listOptions.length === 0 && !loadingOptions) {
       const { noResultMessage = 'No result found' } = props;
       return (
-        <div className={'Dropdown-errorWrapper'}>
+        <div className={'Dropdown-errorWrapper'} data-test="DesignSystem-Dropdown--errorWrapper">
           <div className={'Option'}>
             <div className={'Option-subinfo'}>{noResultMessage}</div>
           </div>

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

@@ -1,3 +1,5 @@
+import { getSearchedOptions } from '../utility';
+
 export const dropdownOptions: any[] = [];
 export const preSelectedOptions: any[] = [];
 export const storyOptions: any[] = [];
@@ -152,3 +154,16 @@ export const iconItems = [
     icon: 'events',
   },
 ];
+
+export const fetchOptions = (searchTerm: string) => {
+  const searchedOptions = searchTerm ? getSearchedOptions(dropdownOptions, searchTerm) : dropdownOptions;
+  return new Promise<any>((resolve) => {
+    window.setTimeout(() => {
+      resolve({
+        searchTerm,
+        options: searchedOptions,
+        count: searchedOptions.length,
+      });
+    }, 1000);
+  });
+};

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

@@ -1,14 +1,18 @@
 import * as React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, waitFor, screen } from '@testing-library/react';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
 import { Dropdown } from '@/index';
 import { DropdownProps as Props } from '@/index.type';
+import { _isEqual } from '../utility';
 import {
   storyOptions,
   storyWrapOptions,
   iconOptions,
   subInfoOptions,
   iconWithSubinfoOptions,
+  dropdownOptions,
+  fetchOptions,
+  preSelectedOptions,
 } from '../__stories__/Options';
 
 const size = ['tiny', 'regular'];
@@ -29,6 +33,8 @@ for (let i = 1; i <= 10; i++) {
 const FunctionValue = jest.fn();
 const trigger = 'DesignSystem-DropdownTrigger';
 
+const keyDownEvents = ['ArrowUp', 'ArrowDown', 'Enter', 'Tab', 'Default'];
+
 describe('Dropdown component', () => {
   const mapper: Record<string, any> = {
     triggerSize: valueHelper(size, { required: true, iterate: true }),
@@ -257,3 +263,198 @@ describe('renders dropdown', () => {
     expect(getByTestId('DesignSystem-Popover')).toBeInTheDocument();
   });
 });
+
+describe('renders async dropdown', () => {
+  it('check prop:fetchOptions', () => {
+    const { getByTestId, getAllByTestId } = render(<Dropdown fetchOptions={fetchOptions} />);
+    const dropdownTrigger = getByTestId(trigger);
+
+    fireEvent.click(dropdownTrigger);
+    const searchInput = getByTestId('DesignSystem-Input');
+    expect(searchInput).toBeInTheDocument();
+
+    fireEvent.input(searchInput, { target: { value: 'Option 50' } });
+    expect(getAllByTestId('DesignSystem-Dropdown--PlaceholderParagraph')).toHaveLength(10);
+  });
+
+  it('renders async search', async () => {
+    const { getByTestId, getAllByTestId } = render(<Dropdown fetchOptions={fetchOptions} />);
+    const dropdownTrigger = getByTestId(trigger);
+
+    fireEvent.click(dropdownTrigger);
+    const searchInput = getByTestId('DesignSystem-Input');
+    expect(searchInput).toBeInTheDocument();
+
+    fireEvent.input(searchInput, { target: { value: 'Option 30' } });
+    expect(getAllByTestId('DesignSystem-Dropdown--PlaceholderParagraph')).toHaveLength(10);
+    await waitFor(() => {
+      expect(getAllByTestId('DesignSystem-DropdownOption--DEFAULT')).toHaveLength(50);
+      expect(getAllByTestId('DesignSystem-DropdownOption--DEFAULT')[29]).toHaveTextContent('Option 30');
+    });
+  });
+
+  it('renders async search with default fetchOptions', async () => {
+    const { getByTestId, getAllByTestId } = render(<Dropdown fetchOptions={undefined} noResultMessage="No result" />);
+    const dropdownTrigger = getByTestId(trigger);
+
+    fireEvent.click(dropdownTrigger);
+    const searchInput = getByTestId('DesignSystem-Input');
+    expect(searchInput).toBeInTheDocument();
+    fireEvent.change(searchInput, { target: { value: 'Option 30' } });
+
+    await waitFor(() => {
+      expect(getAllByTestId('DesignSystem-Dropdown--errorWrapper')).toHaveLength(1);
+      expect(getByTestId('DesignSystem-Dropdown--errorWrapper')).toHaveTextContent('No result');
+    });
+  });
+});
+
+describe('Dropdown component', () => {
+  it('check prop:showApplyButton', () => {
+    const { getByTestId, getAllByTestId } = render(
+      <Dropdown
+        options={dropdownOptions}
+        showApplyButton={true}
+        withCheckbox={true}
+        withSearch={false}
+        totalOptions={dropdownOptions.length}
+      />
+    );
+    const dropdownTrigger = getByTestId(trigger);
+    fireEvent.click(dropdownTrigger);
+    expect(getAllByTestId('DesignSystem-Button')).toHaveLength(2);
+    expect(getAllByTestId('DesignSystem-Button')[0]).toHaveTextContent('Cancel');
+    expect(getAllByTestId('DesignSystem-Button')[1]).toHaveTextContent('Apply');
+  });
+
+  it('check checkbox classes with onClick event', () => {
+    const { getByTestId, getAllByTestId } = render(
+      <Dropdown options={storyOptions} showApplyButton={true} withCheckbox={true} withSearch={false} />
+    );
+    const dropdownTrigger = getByTestId(trigger);
+    fireEvent.click(dropdownTrigger);
+    const optionList = getAllByTestId('DesignSystem-Checkbox-Label');
+    fireEvent.click(optionList[1]);
+    expect(getAllByTestId('DesignSystem-Checkbox-InputBox')[1]).toHaveClass('Checkbox-input--checked');
+  });
+
+  it('check checkbox classes with mouseEnter event', () => {
+    const { getByTestId, getAllByTestId } = render(
+      <Dropdown options={storyOptions} showApplyButton={true} withCheckbox={true} withSearch={false} />
+    );
+    const dropdownTrigger = getByTestId(trigger);
+    fireEvent.click(dropdownTrigger);
+    const optionList = getAllByTestId('DesignSystem-DropdownOption--WITH_CHECKBOX');
+    fireEvent.mouseEnter(optionList[1]);
+    expect(optionList[1]).toHaveClass('Option-checkbox--active');
+  });
+});
+
+describe('renders dropdown component onKeyDown Handler', () => {
+  const dropdownListId = 'DesignSystem-DropdownList-Wrapper';
+  keyDownEvents.forEach((action, key) => {
+    it(`checks for keyDown ${action} event with dropdownOpen set as true `, () => {
+      const { getByTestId } = render(
+        <Dropdown
+          options={storyOptions}
+          showApplyButton={true}
+          withCheckbox={true}
+          withSearch={false}
+          data-test={dropdownListId}
+        />
+      );
+      const dropdownTrigger = getByTestId(trigger);
+      fireEvent.click(dropdownTrigger);
+      fireEvent.keyDown(getByTestId(dropdownListId), { key: action });
+      expect(getByTestId('DesignSystem-Popover')).toBeInTheDocument();
+    });
+
+    it(`checks for keyDown ${action} event with dropdownOpen set as false `, () => {
+      const { getByTestId } = render(
+        <Dropdown options={storyOptions} withCheckbox={true} withSearch={false} data-test={dropdownListId} />
+      );
+      fireEvent.keyDown(getByTestId(dropdownListId), { key: action });
+      expect(getByTestId('DesignSystem-DropdownTrigger')).toBeInTheDocument();
+    });
+  });
+
+  it('checks for keyDown Tab event with showApplyButton as false', () => {
+    const { getByTestId } = render(
+      <Dropdown
+        options={storyOptions}
+        showApplyButton={false}
+        withCheckbox={true}
+        withSearch={false}
+        data-test={dropdownListId}
+      />
+    );
+    const dropdownTrigger = getByTestId(trigger);
+    fireEvent.click(dropdownTrigger);
+    fireEvent.keyDown(getByTestId(dropdownListId), { key: 'Tab' });
+    expect(screen.queryByText('DesignSystem-Popover')).not.toBeInTheDocument();
+  });
+
+  it('checks for keyDown Tab event with showApplyButton as false', () => {
+    const { getByTestId } = render(
+      <Dropdown
+        options={storyOptions}
+        showApplyButton={true}
+        withCheckbox={true}
+        withSearch={false}
+        data-test={dropdownListId}
+      />
+    );
+    const dropdownTrigger = getByTestId(trigger);
+    fireEvent.click(dropdownTrigger);
+    fireEvent.keyDown(getByTestId(dropdownListId), { key: 'Tab' });
+    expect(screen.queryByText('DesignSystem-Popover')).not.toBeInTheDocument();
+  });
+});
+
+describe('Dropdown component utility function', () => {
+  it('checks isEqual utility function', () => {
+    expect(_isEqual(storyOptions, iconOptions));
+  });
+
+  it('checks isEqual utility function with same label', () => {
+    const Options = [
+      {
+        label: 'Design System Dropdown',
+        value: 'Options 1',
+      },
+      {
+        label: 'UI Kit Dropdown',
+        value: 'Options 2',
+      },
+      {
+        label: 'Innovaccer Analytics',
+        value: 'Options 3',
+      },
+    ];
+    expect(_isEqual(storyWrapOptions, Options));
+  });
+});
+
+describe('Dropdown component action buttons', () => {
+  it('check cancelButton click handler', async () => {
+    const { getByTestId, getAllByTestId } = render(
+      <Dropdown
+        options={preSelectedOptions}
+        showApplyButton={true}
+        withCheckbox={true}
+        withSearch={false}
+        onUpdate={FunctionValue}
+      />
+    );
+    const dropdownTrigger = getByTestId(trigger);
+    fireEvent.click(dropdownTrigger);
+
+    await waitFor(() => {
+      expect(getAllByTestId('DesignSystem-DropdownOption--WITH_CHECKBOX')[1]).toBeInTheDocument();
+    });
+    expect(getAllByTestId('DesignSystem-Button')[1]).toHaveTextContent('Cancel');
+    fireEvent.click(getAllByTestId('DesignSystem-DropdownOption--WITH_CHECKBOX')[1]);
+    fireEvent.click(getAllByTestId('DesignSystem-Button')[1]);
+    expect(screen.queryByText('DesignSystem-Popover')).not.toBeInTheDocument();
+  });
+});

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

@@ -104,6 +104,9 @@ describe('renders option with meta list', () => {
                 { icon: 'assessment', label: 'Meta data' },
               ],
               seperator: true,
+              iconAppearance: 'default',
+              labelAppearance: 'default',
+              seperatorAppearance: 'default',
             },
           },
         ]}

package/core/components/atoms/message/__stories__/CustomDescription.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Message, Row, Column, Text } from '@/index';
+
+export const CustomDescription = () => (
+  <Row>
+    <Column size="4">
+      <Message
+        actions={
+          <>
+            <Text className="cursor-pointer" appearance="link">
+              Try again
+            </Text>
+          </>
+        }
+      >
+        <Text appearance="default">Sorry we couldn't subscribe you. Please try again.</Text>
+      </Message>
+    </Column>
+  </Row>
+);
+
+export default {
+  title: 'Components/Message/Custom Description',
+  component: Message,
+};

package/core/components/atoms/metaList/Meta.tsx

@@ -22,7 +22,9 @@ export const Meta = (props: MetaProps) => {
           className={'Meta-icon'}
         />
       )}
-      <Text data-test="DesignSystem-MetaList--MetaLabel" appearance={labelAppearance}>{label}</Text>
+      <Text data-test="DesignSystem-MetaList--MetaLabel" appearance={labelAppearance}>
+        {label}
+      </Text>
     </span>
   );
 };

package/core/components/atoms/metaList/__tests__/MetaList.test.tsx

@@ -37,24 +37,16 @@ const appearance: IconAppearance[] = [
   'accent3_dark',
   'accent4_lighter',
   'accent4_dark',
-  'inverse'
+  'inverse',
 ];
 
-const labelAppearance: TextAppearance[] = [
-  'success',
-  'default',
-  'disabled',
-  'link',
-  'subtle',
-  'white',
-  'destructive'
-];
+const labelAppearance: TextAppearance[] = ['success', 'default', 'disabled', 'link', 'subtle', 'white', 'destructive'];
 
 const booleanValues = [true, false];
 
 const listWithTwoElements = [
   { icon: 'assessment', label: 'Meta data' },
-  { icon: 'assessment', label: 'Meta data two' }
+  { icon: 'assessment', label: 'Meta data two' },
 ];
 
 const getIconAppearance = (iconColor: string) => {
@@ -74,9 +66,11 @@ describe('MetaList component prop:seperatorAppearance options', () => {
       const tree = render(
         <MetaList
           {...attr}
-          list={[{ icon: 'assessment', label: 'Meta data' }, { icon: 'assessment', label: 'Meta data' }]}
+          list={[
+            { icon: 'assessment', label: 'Meta data' },
+            { icon: 'assessment', label: 'Meta data' },
+          ]}
         />
-
       );
       expect(tree).toMatchSnapshot();
     });
@@ -94,13 +88,7 @@ describe('MetaList component prop:IconAppearance options', () => {
     const attr = filterUndefined(props) as Props;
 
     it(testMessageHelper(attr), () => {
-      const tree = render(
-        <MetaList
-          {...attr}
-          list={[{ icon: 'assessment', label: 'Meta data' }]}
-        />
-
-      );
+      const tree = render(<MetaList {...attr} list={[{ icon: 'assessment', label: 'Meta data' }]} />);
       expect(tree).toMatchSnapshot();
     });
   };
@@ -120,9 +108,11 @@ describe('MetaList component prop:labelAppearance options', () => {
       const tree = render(
         <MetaList
           {...attr}
-          list={[{ icon: 'assessment', label: 'Meta data' }, { icon: 'assessment', label: 'Meta data' }]}
+          list={[
+            { icon: 'assessment', label: 'Meta data' },
+            { icon: 'assessment', label: 'Meta data' },
+          ]}
         />
-
       );
       expect(tree).toMatchSnapshot();
     });
@@ -140,13 +130,7 @@ describe('MetaList component prop:seperator options', () => {
     const attr = filterUndefined(props) as Props;
 
     it(testMessageHelper(attr), () => {
-      const tree = render(
-        <MetaList
-          {...attr}
-          list={[{ icon: 'assessment', label: 'Meta data' }]}
-        />
-
-      );
+      const tree = render(<MetaList {...attr} list={[{ icon: 'assessment', label: 'Meta data' }]} />);
       expect(tree).toMatchSnapshot();
     });
   };
@@ -155,7 +139,6 @@ describe('MetaList component prop:seperator options', () => {
 });
 
 describe('MetaList component with prop:list', () => {
-
   it('renders list when one element is given', () => {
     const { getByTestId } = render(<MetaList list={[{ icon: 'assessment', label: 'Meta data' }]} seperator={true} />);
     expect(getByTestId('DesignSystem-MetaList--MetaLabel').textContent).toMatch('Meta data');
@@ -195,7 +178,11 @@ describe('MetaList component with prop:Icon', () => {
   });
 
   it('check for icon prop when list contain more than one element', () => {
-    const { getAllByTestId } = render(<MetaList list={[{ label: 'Meta data' }, { icon: 'assessment', label: 'Meta data two' }, { label: 'Meta data three' }]} />);
+    const { getAllByTestId } = render(
+      <MetaList
+        list={[{ label: 'Meta data' }, { icon: 'assessment', label: 'Meta data two' }, { label: 'Meta data three' }]}
+      />
+    );
     expect(getAllByTestId('DesignSystem-MetaList--MetaIcon')).toHaveLength(1);
   });
 });
@@ -218,7 +205,6 @@ describe('MetaList component with prop:separator', () => {
 });
 
 describe('MetaList component with rightSeparator element', () => {
-
   it('check for rightSeparator prop when list is empty', () => {
     const { getByTestId } = render(<MetaList list={[]} />);
     expect(getByTestId('DesignSystem-MetaList')).not.toContainHTML('DesignSystem-MetaList--rightSeperator');
@@ -249,7 +235,9 @@ describe('MetaList component tagName', () => {
 
 describe('MetaList Component with overwrite class', () => {
   it('overwrite MetaList class', () => {
-    const { getByTestId } = render(<MetaList list={[{ icon: 'assessment', label: 'Meta data' }]} className="MetaListClass" />);
+    const { getByTestId } = render(
+      <MetaList list={[{ icon: 'assessment', label: 'Meta data' }]} className="MetaListClass" />
+    );
     expect(getByTestId('DesignSystem-MetaList')).toHaveClass('MetaListClass');
   });
 });
@@ -259,7 +247,9 @@ describe('MetaList component with different prop:seperatorAppearance', () => {
     const colorOption = color && color.includes('_') ? getIconAppearance(color) : color;
 
     it(`should have the Icon--${color} class when seperatorAppearance=${color} `, () => {
-      const { getByTestId } = render(<MetaList list={[{ icon: 'assessment', label: 'Meta data' }]} seperator={true} seperatorAppearance={color}/>);
+      const { getByTestId } = render(
+        <MetaList list={[{ icon: 'assessment', label: 'Meta data' }]} seperator={true} seperatorAppearance={color} />
+      );
       expect(getByTestId('DesignSystem-MetaList--Seperator')).toHaveClass(`Icon--${colorOption}`);
     });
   });
@@ -270,7 +260,9 @@ describe('MetaList component with different prop:IconAppearance', () => {
     const colorOption = color && color.includes('_') ? getIconAppearance(color) : color;
 
     it(`should have the Icon--${color} class when IconAppearance=${color} `, () => {
-      const { getByTestId } = render(<MetaList list={[{ icon: 'assessment', label: 'Meta data' }]} iconAppearance={color}/>);
+      const { getByTestId } = render(
+        <MetaList list={[{ icon: 'assessment', label: 'Meta data' }]} iconAppearance={color} />
+      );
       expect(getByTestId('DesignSystem-MetaList--MetaIcon')).toHaveClass(`Icon--${colorOption}`);
     });
   });
@@ -279,7 +271,9 @@ describe('MetaList component with different prop:IconAppearance', () => {
 describe('MetaList component with different prop:labelAppearance', () => {
   labelAppearance.forEach((color) => {
     it(`should have the Text--${color} class when labelAppearance=${color} `, () => {
-      const { getByTestId } = render(<MetaList list={[{ icon: 'assessment', label: 'Meta data' }]} labelAppearance={color}/>);
+      const { getByTestId } = render(
+        <MetaList list={[{ icon: 'assessment', label: 'Meta data' }]} labelAppearance={color} />
+      );
       expect(getByTestId('DesignSystem-MetaList--MetaLabel')).toHaveClass(`Text--${color}`);
     });
   });

package/core/components/atoms/metricInput/MetricInput.tsx

@@ -200,8 +200,8 @@ export const MetricInput = React.forwardRef<HTMLInputElement, MetricInputProps>(
     if (onChange) {
       const syntheticEvent = Object.create(e, {
         target: {
-          value: { value: newValue }
-        }
+          value: { value: newValue },
+        },
       });
       onChange(syntheticEvent);
     }