Merge pull request #7 from kubit-ui/feature/update-minor-new-improvements

Feature/update minor new improvements

Author: kubit-ui

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubit-ui-web/react-components",
-  "version": "1.1.5",
+  "version": "1.2.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/accordion/accordion.styled.ts

@@ -32,26 +32,6 @@ export const AccordionHeaderMainContainerStyled = styled.div<IAccordionStyles>`
   ${props => getStyles(props.styles)}
 `;
 
-export const AccordionHeaderMainStyled = styled.div`
-  ${({ theme: { MEDIA_QUERIES } }) => css`
-    display: flex;
-    width: 100%;
-    align-items: center;
-    justify-content: space-between;
-    ${MEDIA_QUERIES?.onlyMobile} {
-      flex-direction: column;
-      justify-content: left;
-      align-items: flex-start;
-    }
-  `}
-  ${({ theme: { MEDIA_QUERIES } }) => css`
-    ${MEDIA_QUERIES?.onlyMobile} {
-      flex-direction: row;
-      align-items: center;
-    }
-  `}
-`;
-
 export const AccordionHeaderTitleHeadlineStyled = styled.span`
   display: flex;
   width: 100%;
@@ -73,23 +53,7 @@ export const AccordionTriggerStyled = styled.button<IAccordionStyles>`
   ${props => getStyles(props.styles)}
 `;
 
-export const AccordionTriggerLinkStyled = styled.div<IAccordionStyles>`
-  ${props => getStyles(props.styles)}
-`;
-
-export const AccordionTriggerIconStyled = styled.span<IAccordionStyles>`
-  ${({ $rotate }) =>
-    $rotate &&
-    css`
-      svg {
-        transform: rotate(180deg);
-      }
-    `};
-  ${props => getStyles(props.styles)}
-`;
-
-export const AccordionTriggerIconLinkStyled = styled.button<IAccordionStyles>`
-  cursor: pointer;
+export const AccordionTriggerIconContainerStyled = styled.span<IAccordionStyles>`
   ${({ $rotate }) =>
     $rotate &&
     css`

src/components/accordion/accordionStandAlone.tsx

@@ -19,9 +19,7 @@ import {
   AccordionSubHeaderContainerStyled,
   AccordionTitleIconWrapper,
   AccordionTitleStyled,
-  AccordionTriggerIconLinkStyled,
-  AccordionTriggerIconStyled,
-  AccordionTriggerLinkStyled,
+  AccordionTriggerIconContainerStyled,
   AccordionTriggerStyled,
   LineSeparatorContainerStyled,
 } from './accordion.styled';
@@ -44,93 +42,6 @@ const AccordionStandAloneComponent = (
 
   const getDataTestId = (uniqueId = ''): string => `${props.dataTestId}${uniqueId}`;
 
-  const renderTitle = () => {
-    if (!props.title) return null;
-    return typeof props.title?.content === 'string' ? (
-      <AccordionTriggerStyled
-        aria-controls={PANEL_ID}
-        aria-expanded={open}
-        data-testid={getDataTestId('TriggerButton')}
-        id={TRIGGER_ID}
-        styles={props.styles.trigger}
-        type={ButtonType.BUTTON}
-        {...props.triggerButton}
-      >
-        <AccordionTriggerIconStyled
-          $rotate={open}
-          data-testid={`${props.dataTestId}TriggerIconWrapper`}
-          styles={props.styles.triggerIconContainer}
-        >
-          <ElementOrIcon
-            customIconStyles={props.styles.triggerIcon}
-            dataTestId={getDataTestId('TriggerIcon')}
-            {...props.triggerIcon}
-          />
-        </AccordionTriggerIconStyled>
-        <AccordionTitleStyled styles={props.styles.titleContainer}>
-          {props.titleIcon && (
-            <AccordionTitleIconWrapper styles={props.styles.titleIconContainer}>
-              <ElementOrIcon
-                customIconStyles={props.styles.titleIcon}
-                dataTestId={getDataTestId('TitleIcon')}
-                {...props.titleIcon}
-              />
-            </AccordionTitleIconWrapper>
-          )}
-          <Text
-            component={TextComponentType.SPAN}
-            customTypography={props.styles.title}
-            dataTestId={getDataTestId('TriggerText')}
-            {...props.title}
-          >
-            {props.title.content}
-          </Text>
-        </AccordionTitleStyled>
-      </AccordionTriggerStyled>
-    ) : (
-      <AccordionTriggerLinkStyled
-        data-testid={getDataTestId('TriggerButton')}
-        styles={props.styles.link}
-      >
-        <AccordionTriggerIconLinkStyled
-          $rotate={open}
-          aria-controls={PANEL_ID}
-          aria-expanded={open}
-          data-testid={`${props.dataTestId}TriggerIconWrapper`}
-          id={TRIGGER_ID}
-          styles={props.styles.triggerIconContainer}
-          type={ButtonType.BUTTON}
-          {...props.triggerButton}
-        >
-          <ElementOrIcon
-            customIconStyles={props.styles.triggerIcon}
-            dataTestId={getDataTestId('TriggerIcon')}
-            {...props.triggerIcon}
-          />
-        </AccordionTriggerIconLinkStyled>
-        <AccordionTitleStyled styles={props.styles.titleContainer}>
-          {props.titleIcon && (
-            <AccordionTitleIconWrapper styles={props.styles.titleIconContainer}>
-              <ElementOrIcon
-                customIconStyles={props.styles.titleIcon}
-                dataTestId={getDataTestId('TitleIcon')}
-                {...props.titleIcon}
-              />
-            </AccordionTitleIconWrapper>
-          )}
-          <Text
-            component={TextComponentType.SPAN}
-            customTypography={props.styles.title}
-            dataTestId={getDataTestId('TriggerText')}
-            {...props.title}
-          >
-            {props.title?.content}
-          </Text>
-        </AccordionTitleStyled>
-      </AccordionTriggerLinkStyled>
-    );
-  };
-
   return (
     <AccordionContainerStyled
       ref={ref}
@@ -147,7 +58,46 @@ const AccordionStandAloneComponent = (
         >
           <AccordionHeaderMainContainerStyled styles={props.styles.headerMainContainer}>
             <AccordionHeaderTitleHeadlineStyled as={props.triggerComponent}>
-              {renderTitle()}
+              <AccordionTriggerStyled
+                aria-controls={PANEL_ID}
+                aria-expanded={open}
+                data-testid={getDataTestId('TriggerButton')}
+                id={TRIGGER_ID}
+                styles={props.styles[typeof props.title?.content !== 'string' ? 'link' : 'trigger']}
+                type={ButtonType.BUTTON}
+                {...props.triggerButton}
+              >
+                <AccordionTriggerIconContainerStyled
+                  $rotate={open}
+                  data-testid={`${props.dataTestId}TriggerIconWrapper`}
+                  styles={props.styles.triggerIconContainer}
+                >
+                  <ElementOrIcon
+                    customIconStyles={props.styles.triggerIcon}
+                    dataTestId={getDataTestId('TriggerIcon')}
+                    {...props.triggerIcon}
+                  />
+                </AccordionTriggerIconContainerStyled>
+                <AccordionTitleStyled styles={props.styles.titleContainer}>
+                  {props.titleIcon && (
+                    <AccordionTitleIconWrapper styles={props.styles.titleIconContainer}>
+                      <ElementOrIcon
+                        customIconStyles={props.styles.titleIcon}
+                        dataTestId={getDataTestId('TitleIcon')}
+                        {...props.titleIcon}
+                      />
+                    </AccordionTitleIconWrapper>
+                  )}
+                  <Text
+                    component={TextComponentType.SPAN}
+                    customTypography={props.styles.title}
+                    dataTestId={getDataTestId('TriggerText')}
+                    {...props.title}
+                  >
+                    {props.title?.content}
+                  </Text>
+                </AccordionTitleStyled>
+              </AccordionTriggerStyled>
             </AccordionHeaderTitleHeadlineStyled>
             {props.headerRightContent && (
               <AccordionHeaderRightContentStyled

src/components/accordion/types/accordionTheme.ts

@@ -15,6 +15,9 @@ export type AccordionPropsStylesType = {
   headerInternalContainer?: CommonStyleType;
   headerMainContainer?: CommonStyleType;
   trigger?: CommonStyleType;
+  /**
+   * @deprecated currently link styles is used instead of trigger when tittle is not type of string. In the next major only trigger styles will be used
+   */
   link?: CommonStyleType;
   triggerIconContainer?: CommonStyleType;
   triggerIcon?: IconTypes;

src/components/avatar/__tests__/avatar.test.tsx

@@ -62,4 +62,20 @@ describe('Avatar component', () => {
     expect(container).toHTMLValidate();
     expect(results).toHaveNoViolations();
   });
+
+  test('Should render Avatar like link', async () => {
+    const { container } = renderProvider(
+      <Avatar
+        image="url"
+        {...mockProps}
+        link={{ content: 'content', variant: 'PRIMARY', url: '/' }}
+      />
+    );
+
+    const linkElement = screen.getByRole(ROLES.LINK);
+    expect(linkElement).toBeInTheDocument();
+    const results = await axe(container);
+    expect(container).toHTMLValidate();
+    expect(results).toHaveNoViolations();
+  });
 });

src/components/button/__tests__/button.test.tsx

@@ -137,3 +137,16 @@ test('Button without children and icon', async () => {
   expect(container).toHTMLValidate();
   expect(results).toHaveNoViolations();
 });
+
+test('should render an SVG if icon prop is provided', async () => {
+  const { container } = renderProvider(
+    <Button icon={{ icon: 'icon', altText: 'altIcon' }} size="LARGE" variant="PRIMARY" />
+  );
+
+  const svg = screen.getByRole('img', { name: /altIcon/i });
+
+  expect(svg).toBeInTheDocument();
+  const results = await axe(container);
+  expect(container).toHTMLValidate();
+  expect(results).toHaveNoViolations();
+});

src/components/button/button.styled.ts

@@ -54,7 +54,6 @@ export const ButtonStyled = styled.button<IButtonStyled>`
   flex-direction: ${props =>
     props.$iconPosition === IconPositionType.LEFT ? 'row' : 'row-reverse'};
   position: relative;
-  white-space: nowrap;
 
   ${({ $state, $styles, $sizeStyles }) => setTokens($state, $styles, $sizeStyles)}
 

src/components/calendar/header/index.ts

@@ -1 +1,2 @@
 export { Header } from './header';
+export * from './types';

src/components/calendar/header/types/index.ts

@@ -0,0 +1 @@
+export * from './header';

src/components/calendar/index.ts

@@ -1,3 +1,5 @@
 export { Calendar } from './calendar';
 export * from './types';
 export * from './constants/constants';
+export * from './selector';
+export * from './list';