npm - @innovaccer/design-system - Versions diffs - 2.5.0-4 → 2.6.0 - Mend

@innovaccer/design-system 2.5.0-4 → 2.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (264) hide show

package/core/components/atoms/divider/__tests__/Divider.test.tsx ADDED Viewed

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
+import { Divider } from '@/index';
+import { DividerProps as Props } from '@/index.type';
+const appearance = ['basic', 'header'];
+const booleanValue = [true, false];
+const testFunc = (props: Record<string, any>): void => {
+  const attr = filterUndefined(props) as Props;
+  it(testMessageHelper(attr), () => {
+    const { baseElement } = render(<Divider {...attr} />);
+    expect(baseElement).toMatchSnapshot();
+  });
+};
+describe('Divider component snapshots', () => {
+  const mapper: Record<string, any> = {
+    vertical: valueHelper(booleanValue, { required: true, iterate: true }),
+    appearance: valueHelper(appearance, { required: true, iterate: true }),
+  };
+  testHelper(mapper, testFunc);
+});
+describe('Divider component with orientation:horizontal', () => {
+  it('test for horizontal divider type:Basic', () => {
+    const { getByTestId } = render(<Divider />);
+    expect(getByTestId('DesignSystem-Divider')).toHaveClass('Divider');
+    expect(getByTestId('DesignSystem-Divider')).toHaveClass('Divider--horizontal');
+    expect(getByTestId('DesignSystem-Divider')).toHaveClass('Divider--basic');
+  });
+  it('test for horizontal divider type:Header', () => {
+    const { getByTestId } = render(<Divider appearance="header" />);
+    expect(getByTestId('DesignSystem-Divider')).toHaveClass('Divider');
+    expect(getByTestId('DesignSystem-Divider')).toHaveClass('Divider--horizontal');
+    expect(getByTestId('DesignSystem-Divider')).toHaveClass('Divider--header');
+  });
+});
+describe('Divider component with orientation:vertical', () => {
+  it('test for Vertical divider', () => {
+    const { getByTestId } = render(<Divider vertical={true} />);
+    expect(getByTestId('DesignSystem-Divider')).toHaveClass('Divider--vertical');
+    expect(getByTestId('DesignSystem-Divider')).toHaveClass('Divider');
+  });
+});

package/core/components/atoms/divider/__tests__/__snapshots__/Divider.test.tsx.snap ADDED Viewed

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`Divider component snapshots
+  vertical: false, appearance: "basic"
+ 1`] = `
+<body>
+  <div>
+    <hr
+      class="Divider Divider--horizontal Divider--basic"
+      data-test="DesignSystem-Divider"
+    />
+  </div>
+</body>
+`;
+exports[`Divider component snapshots
+  vertical: false, appearance: "header"
+ 1`] = `
+<body>
+  <div>
+    <hr
+      class="Divider Divider--horizontal Divider--header"
+      data-test="DesignSystem-Divider"
+    />
+  </div>
+</body>
+`;
+exports[`Divider component snapshots
+  vertical: true, appearance: "basic"
+ 1`] = `
+<body>
+  <div>
+    <hr
+      class="Divider Divider--vertical Divider--basic"
+      data-test="DesignSystem-Divider"
+    />
+  </div>
+</body>
+`;
+exports[`Divider component snapshots
+  vertical: true, appearance: "header"
+ 1`] = `
+<body>
+  <div>
+    <hr
+      class="Divider Divider--vertical"
+      data-test="DesignSystem-Divider"
+    />
+  </div>
+</body>
+`;

package/core/components/atoms/divider/index.tsx ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default } from './Divider';
2	+ export * from './Divider';

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

@@ -411,6 +411,8 @@ const DropdownList = (props: OptionsProps) => {
           icon={'search'}
           value={searchTerm}
           placeholder={'Search..'}
+          // TODO(a11y): research more on this.
+          // eslint-disable-next-line jsx-a11y/no-autofocus
           autoFocus={true}
           onChange={searchHandler}
           onClear={searchClearHandler}
@@ -567,7 +569,7 @@ const DropdownList = (props: OptionsProps) => {
         event.preventDefault();
         dropdownOpen ? focusOption('up', optionClass) : onToggleDropdown(!dropdownOpen);
         break;
-      case 'Enter':
+      case 'Enter': {
         const activeElement = document.activeElement;
         if (dropdownOpen && (inputRef.current === activeElement || dropdownTriggerRef.current === activeElement)) {
           event.preventDefault();
@@ -578,7 +580,8 @@ const DropdownList = (props: OptionsProps) => {
         }
         if (!dropdownOpen) onToggleDropdown(!dropdownOpen);
         break;
-      case 'Tab':
+      }
+      case 'Tab': {
         if (!showApplyButton && dropdownOpen) {
           event.preventDefault();
           onToggleDropdown(false, 'onClick');
@@ -608,12 +611,15 @@ const DropdownList = (props: OptionsProps) => {
         }
         break;
+      }
       default:
         break;
     }
   };
   return (
+    //TODO(a11y)
+    //eslint-disable-next-line
     <div {...baseProps} className={dropdownClass} ref={triggerRef} onKeyDown={onkeydown}>
       <Popover
         onToggle={onToggleDropdown}

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

@@ -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,41 +42,51 @@ 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;
+      }
     }
   };

package/core/components/atoms/dropdown/option/DefaultOption.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

@@ -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/icon/Icon.tsx CHANGED Viewed

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
+import { useAccessibilityProps } from '@/accessibility/utils';
 export type Appearance =
   | 'default'
@@ -58,15 +59,25 @@ export interface IconProps extends BaseProps {
   /**
    * 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} role="alert" className={iconClass} style={styles} {...accessibilityProps}>
       {type ? `${name}_${type}` : name}
     </i>
   );

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

@@ -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>
   );
 };