Merge pull request #27 from kubit-ui/feature/improvements-and-bugs-so…

…lved Feature/improvements and bugs solved
kubit-ui · Aug 22, 2024 · 2698076 · 2698076
2 parents 977c936 + ada3524
commit 2698076
Show file tree

Hide file tree

Showing 48 changed files with 1,155 additions and 72 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kubit-ui-web/react-components",
-  "version": "1.10.1",
+  "version": "1.11.0",
   "description": "Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience",
   "author": {
     "name": "Kubit",
@@ -111,12 +111,12 @@
     "@types/jest": "^29.5.12",
     "@types/jest-axe": "^3.5.9",
     "@types/mocha": "^10.0.7",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
     "@types/styled-components": "^5.1.34",
     "@types/ungap__structured-clone": "^1.2.0",
-    "@typescript-eslint/eslint-plugin": "^8.1.0",
-    "@typescript-eslint/parser": "^8.1.0",
+    "@typescript-eslint/eslint-plugin": "^8.2.0",
+    "@typescript-eslint/parser": "^8.2.0",
     "@ungap/structured-clone": "^1.2.0",
     "@vitejs/plugin-react": "^4.3.1",
     "babel-jest": "^29.7.0",
@@ -134,7 +134,7 @@
     "eslint-plugin-promise": "^7.1.0",
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.9",
+    "eslint-plugin-react-refresh": "^0.4.10",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-unused-imports": "^4.1.3",
     "globals": "^15.9.0",
@@ -154,10 +154,10 @@
     "storybook": "^8.2.9",
     "ts-jest": "^29.2.4",
     "tsc-alias": "1.8.10",
-    "typedoc": "^0.26.5",
-    "typedoc-plugin-markdown": "^4.2.3",
+    "typedoc": "^0.26.6",
+    "typedoc-plugin-markdown": "^4.2.5",
     "typescript": "^5.5.4",
-    "vite": "^5.4.0",
+    "vite": "^5.4.2",
     "vite-tsconfig-paths": "^4.3.2",
     "yarn-deduplicate": "^6.0.2"
   },

diff --git a/src/components/button/button.styled.ts b/src/components/button/button.styled.ts
@@ -67,14 +67,26 @@ export const ButtonStyled = styled.button<IButtonStyled>`
       )};
   }
 
-  &:hover:not(:disabled) {
-    ${({ $styles, $sizeStyles }) => setTokens(ButtonStateType.HOVER, $styles, $sizeStyles)}
+  @media (hover: hover) {
+    &:hover:not(:disabled) {
+      ${({ $styles, $sizeStyles }) => setTokens(ButtonStateType.HOVER, $styles, $sizeStyles)}
+    }
   }
 
   &:active:not(:disabled) {
     ${({ $styles, $sizeStyles }) => setTokens(ButtonStateType.PRESSED, $styles, $sizeStyles)}
   }
 
+  &:focus-visible {
+    ${({ $styles, $sizeStyles }) => setTokens(ButtonStateType.DEFAULT, $styles, $sizeStyles)}
+  }
+
+  @media (hover: none) {
+    &:hover {
+      ${({ $styles, $sizeStyles }) => setTokens(ButtonStateType.DEFAULT, $styles, $sizeStyles)}
+    }
+  }
+
   width: ${props => (props.$fullWidth ? '100%' : 'auto')};
 
   &::after {

diff --git a/src/components/calendar/calendarStandAlone.tsx b/src/components/calendar/calendarStandAlone.tsx
@@ -12,7 +12,7 @@ import { YearSelector } from './selector/yearSelector/yearSelector';
 import { ICalendarStandAlone } from './types';
 
 const CalendarStandAloneComponent = (
-  { maxDate = new Date(), ...props }: ICalendarStandAlone,
+  { maxDate = new Date(), customBackText = 'Back', ...props }: ICalendarStandAlone,
   ref: React.ForwardedRef<HTMLDivElement> | undefined | null
 ): React.JSX.Element => {
   const [showMonthSelector, setShowMonthSelector] = React.useState(false);
@@ -31,6 +31,7 @@ const CalendarStandAloneComponent = (
         configAccesibility={props.configAccesibility}
         configCalendar={props.configCalendar}
         currentDate={props.currentDate}
+        customBackText={customBackText}
         maxDate={maxDate}
         minDate={props.minDate}
         setCurrentDate={props.setCurrentDate}

diff --git a/src/components/calendar/selector/__tests__/selector.test.tsx b/src/components/calendar/selector/__tests__/selector.test.tsx
@@ -38,9 +38,7 @@ describe('Selector component', () => {
   it('Selector with Range and selected Date Component', () => {
     renderProvider(<Selector {...mockProps} />);
 
-    const selector = screen.getByRole('button', {
-      name: mockProps.configCalendar.leftArrowIcon['aria-label'],
-    });
+    const selector = screen.getByLabelText(mockProps.configCalendar.leftArrowIcon['aria-label']);
 
     expect(selector).toBeInTheDocument();
   });

diff --git a/src/components/calendar/selector/selector.styled.ts b/src/components/calendar/selector/selector.styled.ts
@@ -30,9 +30,10 @@ export const RightIconStyled = styled.span<RightIconType>`
   visibility: ${({ showCustomSelector }) => (showCustomSelector ? 'hidden' : 'visible')};
 `;
 
-export const IconAndBackTextStyled = styled.div<SelectorStyledType>`
+export const IconAndBackTextStyled = styled.button<SelectorStyledType>`
   display: flex;
   flex-direction: row;
   align-items: center;
+  cursor: pointer;
   ${({ styles }) => getStyles(styles?.selectorIconAndBackTextContainer)};
 `;
diff --git a/src/components/calendar/selector/selector.tsx b/src/components/calendar/selector/selector.tsx
@@ -123,22 +123,21 @@ export const Selector = (props: ISelector): JSX.Element => {
 
   return (
     <SelectorStyled isDaySelector={isDaySelector} styles={props.styles}>
-      <IconAndBackTextStyled styles={props.styles}>
+      <IconAndBackTextStyled
+        aria-label={showCustomSelector ? '' : leftArrowIcon['aria-label']}
+        styles={props.styles}
+        type="button"
+        onClick={handleOnClickLeftIcon}
+      >
         <ElementOrIcon
           color={iconArrowDisabled(props.minDate) ? props.styles?.colorArrowDisabled : undefined}
           customIconStyles={props.styles?.leftArrow}
           disabled={iconArrowDisabled(props.minDate)}
           {...leftArrowIcon}
-          aria-label={
-            showCustomSelector
-              ? props.configAccesibility?.backToMonthAriaLabel
-              : leftArrowIcon['aria-label']
-          }
-          onClick={handleOnClickLeftIcon}
         />
         {showCustomSelector && (
           <Text component={TextComponentType.PARAGRAPH} customTypography={props.styles?.backText}>
-            {'Back'}
+            {props.customBackText}
           </Text>
         )}
       </IconAndBackTextStyled>

diff --git a/src/components/calendar/selector/types/selector.ts b/src/components/calendar/selector/types/selector.ts
@@ -4,6 +4,7 @@ import { CalendarContainerStylesType } from '../../types/calendarTheme';
 
 export interface ISelector {
   currentDate: Date;
+  customBackText?: string;
   setCurrentDate: (date: Date) => void;
   maxDate: Date;
   minDate: Date;

diff --git a/src/components/calendar/types/calendar.ts b/src/components/calendar/types/calendar.ts
@@ -34,6 +34,7 @@ export type IConfigAccesibility = {
 };
 export interface ICalendarStandAlone<V = undefined extends string ? unknown : string> {
   id?: string;
+  customBackText?: string;
   selectedDate: Date[];
   hasRange?: boolean;
   disabledDates?: Date[];

diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
@@ -37,6 +37,7 @@ const IconBasicComponent = (
         disabled={disabled}
         id={props.id}
         tabIndex={tabIndex}
+        title={props.title || ''}
         type={ButtonType.BUTTON}
         onClick={onClick}
       >

diff --git a/src/components/icon/types/icon.ts b/src/components/icon/types/icon.ts
@@ -40,6 +40,7 @@ export interface IIconStandAlone extends IconAriaAttributes {
   twistAnimationTransformValue?: string | null | undefined;
   complex?: boolean;
   customIconStyles?: IconTypes;
+  title?: string;
 }
 
 export type IIcon = Omit<IIconStandAlone, 'onKeyDown'> & {

diff --git a/src/components/index.ts b/src/components/index.ts
@@ -81,6 +81,7 @@ export * from './tableCaption';
 export * from './tableDivider';
 export * from './tableV2';
 export * from './dataTable';
+export * from './virtualKeyboard';
 
 /**
  * Assets components.

diff --git a/src/components/listOptions/listOptionsStandAlone.tsx b/src/components/listOptions/listOptionsStandAlone.tsx
@@ -80,7 +80,7 @@ export const ListOptionsStandAlone = React.forwardRef(
                 props.caseSensitive
               );
               const title = props.title?.content || '';
-              const dataTestIdOption = `${dataTestId}${title}Option${index}${option.label}`;
+              const dataTestIdOption = `${dataTestId}${title}Option${index}${option.value || ''}`;
 
               const optionComponent = (
                 <Option

diff --git a/src/components/stepperNumber/types/prefixSuffix.ts b/src/components/stepperNumber/types/prefixSuffix.ts
@@ -1,10 +1,4 @@
 export type StepperNumberprefixSuffixType = {
-  prefix?: {
-    step: string;
-    of: string;
-  };
-  suffix?: {
-    completed: string;
-    current: string;
-  };
+  prefix?: { step: string; of: string; steps?: string; completed?: string };
+  suffix?: { completed: string; current: string };
 };
diff --git a/src/components/table/component/listColumnHeaderPriority.tsx b/src/components/table/component/listColumnHeaderPriority.tsx
@@ -33,6 +33,7 @@ export const ListColumnHeaderPriority = (props: IListComponent): JSX.Element =>
             >
               {header.label && (
                 <ListHeaderItemStylesStyled
+                  aria-hidden={header.config?.['aria-hidden']}
                   customAlign={
                     header?.config?.alignHeader?.[props.device] || header?.config?.alignHeader
                   }

diff --git a/src/components/table/component/listRowHeaderPriority.tsx b/src/components/table/component/listRowHeaderPriority.tsx
@@ -71,6 +71,7 @@ export const ListRowHeaderPriority = (props: IListRowHeaderPriority): JSX.Elemen
               <li key={indexHeader}>
                 {header.label && (
                   <ListHeaderItemStylesStyled
+                    aria-hidden={header?.config?.['aria-hidden']}
                     customAlign={
                       header?.config?.alignHeader?.[props.device] || header?.config?.alignHeader
                     }

diff --git a/src/components/table/component/table.tsx b/src/components/table/component/table.tsx
@@ -26,7 +26,7 @@ interface ITableComponent extends Omit<ITableStandAlone, 'headerVariant'> {
 }
 
 export const TableComponent = (
-  props: ITableComponent,
+  { ariaHiddenDividerColumn = true, ariaHiddenEmptyColumn = true, ...props }: ITableComponent,
   ref: React.ForwardedRef<HTMLTableElement> | undefined | null
 ): JSX.Element => {
   const ariaProps = pickAriaProps(props);
@@ -73,11 +73,15 @@ export const TableComponent = (
             styles={props.styles.header?.[props.headerVariant]}
           >
             {hasRowHeader && (
-              <TableEmptyColumnHeaderStyled styles={props.styles.header?.[props.headerVariant]} />
+              <TableEmptyColumnHeaderStyled
+                aria-hidden={ariaHiddenEmptyColumn}
+                styles={props.styles.header?.[props.headerVariant]}
+              />
             )}
             {hasSomeDividerContent && (
               <TableColumnHeaderStyled
                 key={'dividerContent'}
+                aria-hidden={ariaHiddenDividerColumn}
                 hasDivider={true}
                 scope="col"
                 styles={props.styles.header?.[props.headerVariant]}
@@ -96,6 +100,7 @@ export const TableComponent = (
               return (
                 <TableColumnHeaderStyled
                   key={headerValue.id}
+                  aria-hidden={headerValue.config?.['aria-hidden']}
                   customAlign={
                     headerValue?.config?.alignHeader?.[props.device] ||
                     headerValue?.config?.alignHeader

diff --git a/src/components/table/component/tableRow.tsx b/src/components/table/component/tableRow.tsx
@@ -62,6 +62,7 @@ export const TableRow = (props: ITableRow): JSX.Element => {
         <TableDivider divider={dividerValue()} styles={props.styles.divider} />
         {rowHeader && (
           <TableColumnHeaderStyled
+            aria-hidden={rowHeader.config?.['aria-hidden']}
             customAlign={
               rowHeader?.config?.alignHeader?.[props.device] || rowHeader?.config?.alignHeader
             }
@@ -87,6 +88,7 @@ export const TableRow = (props: ITableRow): JSX.Element => {
             return (
               <TableColumnBodyStyled
                 key={indexHeader}
+                aria-hidden={headerValue.config?.['aria-hidden']}
                 customAlign={
                   getCellTokenValue({ headerValue, token: 'align' }) ||
                   headerValue?.config?.alignValue?.[props.device] ||

diff --git a/src/components/table/stories/argtypes.ts b/src/components/table/stories/argtypes.ts
@@ -46,6 +46,30 @@ export const argtypes = (
         category: CATEGORY_CONTROL.CONTENT,
       },
     },
+    ariaHiddenDividerColumn: {
+      description: 'aria-hidden prop applied to divider column created when table has divider',
+      type: { name: 'boolean' },
+      control: { type: 'boolean' },
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: { summary: true },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
+    ariaHiddenEmptyColumn: {
+      description: 'aria-hidden prop applied to empty column created when has row headers',
+      type: { name: 'boolean' },
+      control: { type: 'boolean' },
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: { summary: true },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
     values: {
       description: 'Content of your table',
       type: { name: 'IValue[]', required: true },

diff --git a/src/components/table/types/table.ts b/src/components/table/types/table.ts
@@ -126,6 +126,7 @@ export type ConfigType = {
   srOnlyHeader?: boolean | SrOnlyHeaderType;
   flexWidth?: number | string | FlexWidthType;
   backgroundColor?: string;
+  ['aria-hidden']?: boolean;
 };
 
 export type ValueFunctionType = (
@@ -173,6 +174,8 @@ type TBodyScrollAriasType = {
  */
 export interface ITableStandAlone extends TableAriaAttributes {
   styles: TableRowHeaderTypes<string, string>;
+  ariaHiddenDividerColumn?: boolean;
+  ariaHiddenEmptyColumn?: boolean;
   lineSeparatorLineStyles: LineSeparatorLinePropsStylesType;
   lineSeparatorTopOnHeader?: boolean;
   lineSeparatorBottomOnHeader?: boolean;

diff --git a/src/components/tooltip/stories/tooltip.stories.tsx b/src/components/tooltip/stories/tooltip.stories.tsx
@@ -43,7 +43,7 @@ export const Tooltip: Story = {
     },
     children: 'Hover me',
     align: TooltipAlignType.TOP,
-    closeIcon: { icon: ICONS.ICON_PLACEHOLDER, altText: 'Close icon' },
+    closeIcon: { icon: ICONS.ICON_PLACEHOLDER, altText: 'Close icon', title: 'Close' },
     tooltipAsModal: false,
     themeArgs: themesObject[themeSelected][STYLES_NAME.TOOLTIP],
   },

diff --git a/src/components/virtualKeyboard/__tests__/virtualKeyboard.test.tsx b/src/components/virtualKeyboard/__tests__/virtualKeyboard.test.tsx
@@ -0,0 +1,68 @@
+import { fireEvent, screen } from '@testing-library/react';
+import * as React from 'react';
+
+import { axe } from 'jest-axe';
+
+import { renderProvider } from '@/tests/renderProvider/renderProvider.utility';
+import { ROLES } from '@/types';
+
+import { VirtualKeyboard } from '../index';
+import { IVirtualKeyboard } from '../types';
+
+const mockProps: IVirtualKeyboard = {
+  variant: 'DEFAULT',
+  digits: ['0', '4', '2', '8', '7', '3', '9', '1', '6', '5'],
+  icon: { icon: 'CLOSE', altText: 'Remove' },
+  dataTestId: 'test-data',
+  onDigitButtonClick: jest.fn(),
+  onRemoveButtonClick: jest.fn(),
+};
+
+describe('Virtual Keyboard component', () => {
+  it('Should render component', async () => {
+    const { container } = renderProvider(<VirtualKeyboard {...mockProps} />);
+
+    const buttons = screen.getAllByRole(ROLES.BUTTON);
+    expect(buttons).toHaveLength(11);
+
+    const results = await axe(container);
+    expect(container).toHTMLValidate();
+    expect(results).toHaveNoViolations();
+  });
+
+  it('Should callback onDigitButtonClick and onRemoveButtonClick when pressed', () => {
+    const onDigitButtonClick = jest.fn();
+    const onRemoveButtonClick = jest.fn();
+    renderProvider(
+      <VirtualKeyboard
+        {...mockProps}
+        onDigitButtonClick={onDigitButtonClick}
+        onRemoveButtonClick={onRemoveButtonClick}
+      />
+    );
+
+    const buttons = screen.getAllByRole(ROLES.BUTTON);
+    fireEvent.click(buttons[0]);
+    expect(onDigitButtonClick).toHaveBeenCalled();
+
+    fireEvent.click(buttons[10]);
+    expect(onRemoveButtonClick).toHaveBeenCalled();
+  });
+
+  it('When onFocus and onBlur will change internal styles, but no action will be called', () => {
+    const onDigitButtonClick = jest.fn();
+    const onRemoveButtonClick = jest.fn();
+    renderProvider(
+      <VirtualKeyboard
+        {...mockProps}
+        onDigitButtonClick={onDigitButtonClick}
+        onRemoveButtonClick={onRemoveButtonClick}
+      />
+    );
+
+    const buttons = screen.getAllByRole(ROLES.BUTTON);
+    fireEvent.focus(buttons[0]);
+    fireEvent.blur(buttons[0]);
+    expect(mockProps.onDigitButtonClick).not.toHaveBeenCalled();
+  });
+});