@innovaccer/design-system 2.5.0 → 2.7.0-0

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

@@ -34,7 +34,7 @@ export const multiSelect = () => {
 
   const onSelectLessThan50 = (type: EventType, option?: any) => {
     switch (type) {
-      case 'select-all':
+      case 'select-all': {
         const selectedDisabledArray = selectedLessThan50.filter((item) => item.disabled);
         const selectedOptions = [
           ...dropdownOptions.slice(0, 50).filter((item) => !item.disabled),
@@ -42,45 +42,55 @@ export const multiSelect = () => {
         ];
 
         setSelectedLessThan50(selectedOptions);
-        return;
-      case 'deselect-all':
+        break;
+      }
+      case 'deselect-all': {
         const selectedArr = selectedLessThan50.filter((item) => item.disabled);
         setSelectedLessThan50(selectedArr);
-        return;
-      case 'select-option':
+        break;
+      }
+      case 'select-option': {
         setSelectedLessThan50(selectedLessThan50.concat(option));
-        return;
-      case 'deselect-option':
+        break;
+      }
+      case 'deselect-option': {
         const selectedArray = selectedLessThan50.slice();
         const index = selectedArray.findIndex((item) => item.value === option.value);
         selectedArray.splice(index, 1);
         setSelectedLessThan50(selectedArray);
-      default:
-        return;
+        break;
+      }
+      default: {
+        break;
+      }
     }
   };
 
   const onSelectMoreThan50 = (type: EventType, option?: any) => {
     switch (type) {
-      case 'select-option':
+      case 'select-option': {
         setSelectedMoreThan50(selectedMoreThan50.concat(option));
-        return;
-      case 'deselect-option':
+        break;
+      }
+      case 'deselect-option': {
         const selectedArray = selectedMoreThan50.slice();
         const index = selectedArray.findIndex((item) => item.value === option.value);
         selectedArray.splice(index, 1);
         setSelectedMoreThan50(selectedArray);
-        return;
-      case 'clear-all':
+        break;
+      }
+      case 'clear-all': {
         const selectedArr = selectedMoreThan50.filter((item) => item.disabled);
         setSelectedMoreThan50(selectedArr);
-        return;
-      default:
-        return;
+        break;
+      }
+      default: {
+        break;
+      }
     }
   };
 
-  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/DefaultOption.tsx

@@ -8,6 +8,8 @@ const DefaultOption = (props: OptionTypeProps) => {
   const { label, disabled } = optionData;
 
   return (
+    // TODO(a11y): fix accessibility
+    /* eslint-disable */
     <div
       className={className}
       onClick={onClickHandler}
@@ -15,6 +17,7 @@ const DefaultOption = (props: OptionTypeProps) => {
       data-test={dataTest}
       data-disabled={disabled}
     >
+      {/* eslint-enable  */}
       <div className={'Option-label'}>
         <Text className={textClassName} appearance={appearance}>
           {label}

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

@@ -14,6 +14,8 @@ const IconOption = (props: OptionTypeProps) => {
   });
 
   return (
+    // TODO(a11y): fix accessibility
+    /* eslint-disable */
     <div
       className={OptionClass}
       onClick={onClickHandler}
@@ -21,6 +23,7 @@ const IconOption = (props: OptionTypeProps) => {
       data-test={dataTest}
       data-disabled={disabled}
     >
+      {/* eslint-enable  */}
       {icon && (
         <Icon className="Option-icon mr-4" data-test={`${dataTest}--Icon`} name={icon} appearance={appearance} />
       )}

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

@@ -23,6 +23,8 @@ const IconWithMetaOption = (props: OptionTypeProps) => {
   });
 
   return (
+    // TODO(a11y): fix accessibility
+    /* eslint-disable */
     <div
       className={OptionClass}
       onClick={onClickHandler}
@@ -30,6 +32,7 @@ const IconWithMetaOption = (props: OptionTypeProps) => {
       data-test={dataTest}
       data-disabled={disabled}
     >
+      {/* eslint-enable  */}
       {icon && (
         <Icon data-test={`${dataTest}--Icon`} className="Option-icon mr-4" name={icon} appearance={appearance} />
       )}

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

@@ -17,6 +17,8 @@ const MetaOption = (props: OptionTypeProps) => {
   const { subInfo, label, disabled } = optionData;
 
   return (
+    // TODO(a11y): fix accessibility
+    /* eslint-disable */
     <div
       className={className}
       onClick={onClickHandler}
@@ -24,6 +26,7 @@ const MetaOption = (props: OptionTypeProps) => {
       data-test={dataTest}
       data-disabled={disabled}
     >
+      {/* eslint-enable */}
       <div className={'Option-label'}>
         <Text className={textClassName} appearance={appearance}>
           {label}

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/editable/Editable.tsx

@@ -22,12 +22,15 @@ export const Editable = (props: EditableProps) => {
 
   return (
     <div data-test="DesignSystem-Editable" {...baseProps} className={EditableClass}>
+      {/* TODO(a11y): fix accessibility */}
+      {/* eslint-disable  */}
       <div
         data-test="DesignSystem-EditableWrapper"
         onClick={() => onChange('edit')}
         onMouseEnter={() => !editing && onChange('hover')}
         onMouseLeave={() => !editing && onChange('default')}
       >
+        {/* eslint-enable  */}
         {children}
       </div>
     </div>

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
+import { useAccessibilityProps } from '@/accessibility/utils';
 
-export type Appearance =
+export type IconAppearance =
   | 'default'
   | 'destructive'
   | 'white'
@@ -54,19 +55,29 @@ 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
    */
-  onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+  /**
+   * Handler to be called when key is pressed on icon
+   */
+  onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
   /**
    * DOM node to be passed as child to the component
    */
   children?: React.ReactNode;
+  /**
+   * The tabindex global attribute indicates that its element can be focused, and
+   * where it participates in sequential keyboard navigation.
+   */
+  tabIndex?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>['tabIndex'];
 }
 
 export const Icon = (props: IconProps) => {
-  const { appearance, className, name, size, onClick, children } = props;
+  const { appearance, className, name, size, children } = props;
+  const accessibilityProps = useAccessibilityProps(props);
 
   const baseProps = extractBaseProps(props);
 
@@ -107,7 +118,7 @@ export const Icon = (props: IconProps) => {
     );
   }
   return (
-    <i {...baseProps} className={iconClass} style={styles} onClick={onClick}>
+    <i {...baseProps} className={iconClass} style={styles} {...accessibilityProps}>
       {type ? `${name}_${type}` : name}
     </i>
   );

package/core/components/atoms/icon/__stories__/variants/Image.story.tsx

@@ -4,7 +4,12 @@ import { Icon } from '@/index';
 export const image = () => {
   return (
     <Icon size={50}>
-      <img src="https://innovaccer.com/static/image/site-logo/innovaccer-logo-black.svg" width="150" height="150" />
+      <img
+        alt="Innovaccer logo"
+        src="https://innovaccer.com/static/image/site-logo/innovaccer-logo-black.svg"
+        width="150"
+        height="150"
+      />
     </Icon>
   );
 };