Merge pull request #12 from kubit-ui/feature/new-update-and-improvements

Feature/new update and improvements

Author: kubit-ui

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubit-ui-web/react-components",
-  "version": "1.3.2",
+  "version": "1.4.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",

src/components/calendar/selector/selector.tsx

@@ -126,15 +126,15 @@ export const Selector = (props: ISelector): JSX.Element => {
     <SelectorStyled isDaySelector={isDaySelector} styles={props.styles}>
       <IconAndBackTextStyled styles={props.styles} onClick={handleOnClickBack}>
         <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']
           }
-          color={iconArrowDisabled(props.minDate) ? props.styles?.colorArrowDisabled : undefined}
-          customIconStyles={props.styles?.leftArrow}
-          disabled={iconArrowDisabled(props.minDate)}
-          {...leftArrowIcon}
           onClick={handleOnClickLeftIcon}
         />
         {showCustomSelector && (

src/components/checkbox/__tests__/checkbox.test.tsx

@@ -247,7 +247,10 @@ describe('Checkbox component', () => {
     const checkbox = screen.getByRole('checkbox');
 
     expect(checkbox).toBeInTheDocument();
-    expect(checkbox).toHaveAttribute('aria-describedby', `${checkboxId}ScreenReader`);
+    expect(checkbox).toHaveAttribute(
+      'aria-describedby',
+      `${checkboxId}Label ${checkboxId}ScreenReader`
+    );
 
     const results = await axe(container);
     expect(container).toHTMLValidate();

src/components/checkbox/checkboxStandAlone.tsx

@@ -51,6 +51,7 @@ const CheckboxStandAloneComponent = (
   const { isChecked, isDisabled, hasError } = checkboxState(state);
 
   const checkBoxId = id ?? uniqueId;
+  const checkBoxLabelId = `${checkBoxId}Label`;
   const checkBoxkHelpContentId = `${checkBoxId}HelpContent`;
   const checkBoxErrorId = `${checkBoxId}Error`;
   const screenReaderId = `${checkBoxId}ScreenReader`;
@@ -68,6 +69,7 @@ const CheckboxStandAloneComponent = (
             color={labelTypography?.color}
             cursor={isDisabled ? CURSOR_DEFAULT : CURSOR_POINTER}
             dataTestId={`${dataTestId}Label`}
+            id={checkBoxLabelId}
             inputId={checkBoxId}
             required={required}
             textVariant={labelTypography?.font_variant}
@@ -126,6 +128,8 @@ const CheckboxStandAloneComponent = (
             ref={ref}
             aria-describedby={buildAriaDescribedBy({
               extraAriaDescribedBy,
+              label: label?.content,
+              checkBoxLabelId,
               helpContent: helperContent?.content,
               checkBoxkHelpContentId,
               hasError,

src/components/checkbox/utils/aria.utils.ts

@@ -1,6 +1,8 @@
 /**
  * Build the aria-describedby attribute for the checkbox
  * @param extraAriaDescribedBy
+ * @param label
+ * @param checkBoxLabelId
  * @param helpContent
  * @param checkBoxkHelpContentId
  * @param textError
@@ -12,6 +14,8 @@
  */
 export const buildAriaDescribedBy = ({
   extraAriaDescribedBy,
+  label,
+  checkBoxLabelId,
   helpContent,
   checkBoxkHelpContentId,
   errorText,
@@ -21,6 +25,8 @@ export const buildAriaDescribedBy = ({
   screenReaderId,
 }: {
   extraAriaDescribedBy: string;
+  label?: JSX.Element | string;
+  checkBoxLabelId: string;
   helpContent?: JSX.Element | string;
   checkBoxkHelpContentId: string;
   hasError: boolean;
@@ -30,6 +36,9 @@ export const buildAriaDescribedBy = ({
   screenReaderId: string;
 }): string => {
   let res = extraAriaDescribedBy;
+  if (label) {
+    res += ` ${checkBoxLabelId}`;
+  }
   if (screenReaderText) {
     res += ` ${screenReaderId}`;
   }

src/components/footer/components/footerContent.tsx

@@ -8,14 +8,24 @@ interface IFooterContent {
   contentDirection?: ContentDirectionType;
   forceVertical?: boolean;
   children: React.ReactNode[];
+  margin?: boolean;
+  marginLeft?: boolean;
+  marginRight?: boolean;
 }
 
 export const FooterContent = (props: IFooterContent): JSX.Element | null => {
   // always returned something, cause we need to put container to flex direction
   const flexDirectionDesktopTablet = props.forceVertical ? 'column' : 'row';
 
+  if (!props.children.length) {
+    return null;
+  }
+
   return (
     <FooterContentStyled
+      $margin={props.margin}
+      $marginLeft={props.marginLeft}
+      $marginRight={props.marginRight}
       aria-hidden={!props.children.length}
       contentDirection={props.contentDirection}
       flexDirectionDesktopTablet={flexDirectionDesktopTablet}

src/components/footer/footer.styled.ts

@@ -10,6 +10,9 @@ type FooterStylesType = {
   contentDirection?: ContentDirectionType;
   flexDirectionDesktopTablet?: string;
   alignItems?: string;
+  $margin?: boolean;
+  $marginLeft?: boolean;
+  $marginRight?: boolean;
 };
 
 type RootContainerStyledType = FooterStylesType & {
@@ -36,4 +39,7 @@ export const FooterContentStyled = styled.div<FooterStylesType>`
   justify-content: ${props =>
     props.contentDirection === ContentDirectionType.HORIZONTAL ? 'flex-start' : 'center'};
   ${props => getStyles(props.styles?.contentContainer)}
+  margin: ${props => props.$margin && 'auto'};
+  margin-left: ${props => props.$marginLeft && 'auto'};
+  margin-right: ${props => props.$marginRight && 'auto'};
 `;

src/components/footer/footerStandAlone.tsx

@@ -80,20 +80,23 @@ const FooterStandAloneComponent = (
           <FooterContent
             contentDirection={props.contentDirection}
             forceVertical={props.forceVertical}
+            marginRight={true}
             styles={props.styles}
           >
             {firstContent}
           </FooterContent>
           <FooterContent
             contentDirection={props.contentDirection}
             forceVertical={props.forceVertical}
+            margin={true}
             styles={props.styles}
           >
             {secondContent}
           </FooterContent>
           <FooterContent
             contentDirection={props.contentDirection}
             forceVertical={props.forceVertical}
+            marginLeft={true}
             styles={props.styles}
           >
             {thridContent}

src/components/input/__tests__/input.test.tsx

@@ -155,12 +155,12 @@ describe('New Input Component', () => {
     expect(results).toHaveNoViolations();
   });
 
-  it('Should call onIconClick when user click on icon', async () => {
+  it('Should call onLeftIconClick when user click on left icon', async () => {
     const onIconClick = jest.fn();
     const { container, getByRole } = renderProvider(
       <Input
         {...commonProps}
-        icon={{ icon: 'UNICORN', altText: 'Open Info', onClick: onIconClick }}
+        leftIcon={{ icon: 'UNICORN', altText: 'Open Info', onClick: onIconClick }}
         placeholder={'placeholder'}
       />
     );
@@ -175,6 +175,26 @@ describe('New Input Component', () => {
     expect(results).toHaveNoViolations();
   });
 
+  it('Should call onRightIconClick when user click on right icon', async () => {
+    const onIconClick = jest.fn();
+    const { container, getByRole } = renderProvider(
+      <Input
+        {...commonProps}
+        placeholder={'placeholder'}
+        rightIcon={{ icon: 'UNICORN', altText: 'Open Info', onClick: onIconClick }}
+      />
+    );
+
+    const triggerButton = getByRole('button', { name: 'Open Info' });
+    fireEvent.click(triggerButton);
+    expect(onIconClick).toHaveBeenCalled();
+
+    // A11Y and w3c validator
+    const results = await axe(container);
+    expect(container).toHTMLValidate();
+    expect(results).toHaveNoViolations();
+  });
+
   it('Should be autoformated the text with mask', async () => {
     const onChange = jest.fn();
     const { container, getByRole } = renderProvider(
@@ -348,12 +368,36 @@ describe('New Input Component', () => {
     expect(results).toHaveNoViolations();
   });
 
-  it('Should show icon as img instead of as button', async () => {
+  it('Should show left icon as img instead of as button', async () => {
+    const iconClick = jest.fn();
+    const { container, getByRole } = renderProvider(
+      <Input
+        {...commonProps}
+        leftIcon={{ icon: 'UNICORN', altText: 'Open Info', onClick: iconClick }}
+        placeholder={'placeholder'}
+      />
+    );
+
+    const triggerButton = getByRole('button', { name: 'Open Info' });
+    expect(triggerButton).toBeInTheDocument();
+
+    fireEvent.click(triggerButton);
+
+    expect(iconClick).toHaveBeenCalled();
+
+    // A11Y and w3c validator
+    const results = await axe(container);
+    expect(container).toHTMLValidate();
+    expect(results).toHaveNoViolations();
+  });
+
+  it('Should show right icon as img instead of as button', async () => {
+    const iconClick = jest.fn();
     const { container, getByRole } = renderProvider(
       <Input
         {...commonProps}
-        icon={{ icon: 'UNICORN', altText: 'Open Info' }}
         placeholder={'placeholder'}
+        rightIcon={{ icon: 'UNICORN', altText: 'Open Info', onClick: iconClick }}
       />
     );
 

src/components/input/components/inputIcon.tsx

@@ -9,6 +9,36 @@ import { IInputIcon } from '../types/input';
 const InputIconStandAloneComponent = (
   props: IInputIcon,
   ref: React.ForwardedRef<HTMLDivElement>
+): JSX.Element | null => {
+  const icon = props.leftIcon || props.rightIcon;
+  if (!icon || props.loading) {
+    return null;
+  }
+
+  const onClick: React.MouseEventHandler<HTMLButtonElement> = event => {
+    props.rightIcon?.onClick?.(event);
+    props.leftIcon?.onClick?.(event);
+  };
+
+  return (
+    <InputIconStyled ref={ref} iconPosition={props.iconPosition} styles={props.styles}>
+      <ElementOrIcon
+        customIconStyles={props.styles?.inputIcon}
+        disabled={props.disabled}
+        {...props.rightIcon}
+        {...props.leftIcon}
+        onClick={onClick}
+      />
+    </InputIconStyled>
+  );
+};
+
+export const InputIconStandAlone = React.forwardRef(InputIconStandAloneComponent);
+
+// deprecated - remove this function when icon prop is removed
+const InputIconStandAloneDeprecatedComponent = (
+  props: IInputIcon,
+  ref: React.ForwardedRef<HTMLDivElement>
 ): JSX.Element | null => {
   if (!props.icon || props.loading) {
     return null;
@@ -29,4 +59,6 @@ const InputIconStandAloneComponent = (
   );
 };
 
-export const InputIconStandAlone = React.forwardRef(InputIconStandAloneComponent);
+export const InputIconStandAloneDeprecated = React.forwardRef(
+  InputIconStandAloneDeprecatedComponent
+);