Fixed double line separator on mobile

Fixed double line separator on mobile and added the posibility to set single variant to Header cell

Author: Hector Arce De Las Heras

src/components/table/__tests__/table.test.tsx

@@ -159,6 +159,7 @@ const mockBaseCustomizable = {
       id: 'routingNumber',
       label: 'Routing number',
       config: { alignHeader: 'left', alignValue: 'left' },
+      headerVariant: 'SECONDARY',
     },
     {
       id: 'accountNumber',

src/components/table/component/__tests__/listDivider.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { renderProvider } from '@/tests/renderProvider/renderProvider.utility';
+
+import { ListDivider } from '../listDivider';
+
+describe('ListDivider', () => {
+  it('should render null when divider prop is null', () => {
+    const { container } = renderProvider(<ListDivider divider={null} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should render LineSeparator when divider prop is a string', () => {
+    const dividerValue = 'test';
+    const { getByText } = renderProvider(<ListDivider divider={dividerValue} />);
+    expect(getByText(dividerValue)).toBeInTheDocument();
+  });
+
+  it('should render Divider when divider prop is a Divider object', () => {
+    const dividerObject = {
+      variant: 'DEFAULT',
+    };
+    const { container } = renderProvider(<ListDivider divider={dividerObject} />);
+
+    expect(container.firstChild).not.toBeNull();
+  });
+
+  it('should render null when divider object has no variant and either dividerStyles', () => {
+    const dividerObject = {
+      leftLabel: 'Left label',
+    };
+    const { container } = renderProvider(<ListDivider divider={dividerObject} />);
+
+    expect(container.firstChild).toBeNull();
+  });
+});

src/components/table/component/listColumnHeaderPriority.tsx

@@ -39,6 +39,7 @@ export const ListColumnHeaderPriority = (props: IListComponent): JSX.Element =>
                   customWidth={header?.config?.width}
                   flexWidth={header?.config?.flexWidth}
                   hidden={props.hiddenHeaderOn?.[props.device]}
+                  index={indexHeader}
                   lineSeparatorBottomOnHeader={props.lineSeparatorBottomOnHeader}
                   lineSeparatorLineStyles={props.lineSeparatorLineStyles}
                   lineSeparatorTopOnHeader={props.lineSeparatorTopOnHeader}

src/components/table/component/listRowHeaderPriority.tsx

@@ -44,6 +44,7 @@ export const ListRowHeaderPriority = (props: IListRowHeaderPriority): JSX.Elemen
           customBackgroundColor={rowHeader?.config?.backgroundColor}
           customWidth={rowHeader?.config?.width}
           flexWidth={rowHeader?.config?.flexWidth}
+          index={props.index}
           lineSeparatorBottomOnHeader={props.lineSeparatorBottomOnHeader}
           lineSeparatorLineStyles={props.lineSeparatorLineStyles}
           lineSeparatorTopOnHeader={props.lineSeparatorTopOnHeader}

src/components/table/component/table.tsx

@@ -91,6 +91,7 @@ export const TableComponent = (
               </TableColumnHeaderStyled>
             )}
             {headersElementWithoutDivider.map((headerValue, index) => {
+              const headerVariant = headerValue.variant ? headerValue.variant : props.headerVariant;
               return (
                 <TableColumnHeaderStyled
                   key={headerValue.id}
@@ -103,15 +104,15 @@ export const TableComponent = (
                   flexWidth={headerValue?.config?.flexWidth}
                   hasDivider={headerValue?.config?.hasDivider}
                   scope="col"
-                  styles={props.styles.header?.[props.headerVariant]}
+                  styles={props.styles.header?.[headerVariant]}
                 >
                   <Text
                     align={
                       headerValue?.config?.alignHeader?.[props.device] ||
                       headerValue?.config?.alignHeader
                     }
                     component={TextComponentType.SPAN}
-                    customTypography={props.styles.header?.[props.headerVariant]?.typography}
+                    customTypography={props.styles.header?.[headerVariant]?.typography}
                     dataTestId={`${props.dataTestId}Header${index}`}
                   >
                     {headerValue.label}

src/components/table/stories/mockTable.tsx

@@ -499,6 +499,7 @@ export const mockCustomizableTable = {
       id: 'routingNumber',
       label: 'Routing number',
       config: { alignHeader: 'center', alignValue: 'center' },
+      variant: 'PRIMARY',
     },
     {
       id: 'accountNumber',

src/components/table/table.styled.ts

@@ -145,6 +145,7 @@ export const TableColumnHeaderStyled = styled.th<{
   customBackgroundColor?: string;
 }>`
   ${props => getStyles(props.styles?.column)}
+  ${({ styles }) => getTypographyStyles(styles?.typography)}
   // Apply custom styles
   ${({ customWidth, customAlign, flexWidth, customBackgroundColor }) =>
     applyCustomCellStyles({ customWidth, customAlign, flexWidth, customBackgroundColor })}
@@ -325,6 +326,7 @@ export const ListRowHeaderPriorityStyled = styled.ul<{
 `;
 
 export const ListHeaderItemStylesStyled = styled.span<{
+  index?: number;
   hasSomeExpandedContent?: boolean;
   lineSeparatorLineStyles?: LineSeparatorLinePropsStylesType;
   lineSeparatorTopOnHeader?: boolean;
@@ -335,9 +337,10 @@ export const ListHeaderItemStylesStyled = styled.span<{
   flexWidth?: string | number | FlexWidthType;
   customBackgroundColor?: string;
 }>`
-  ${({ lineSeparatorLineStyles, lineSeparatorTopOnHeader, lineSeparatorBottomOnHeader }) => {
+  ${({ index, lineSeparatorLineStyles, lineSeparatorTopOnHeader, lineSeparatorBottomOnHeader }) => {
     const lineSeparator: (CSSProp | undefined)[] = [];
-    if (lineSeparatorTopOnHeader) {
+    // Only add lineSeparator on top when it is the first row
+    if (lineSeparatorTopOnHeader && index === 0) {
       lineSeparator.push(lineSeparatorLineStyles?.buildLineStyles?.(LineSeparatorPositionType.TOP));
     }
     if (lineSeparatorBottomOnHeader) {

src/components/table/types/table.ts

@@ -134,6 +134,7 @@ export interface ITableHeader {
   id: string;
   config?: ConfigType;
   value?: ValueFunctionType & DividerContent;
+  variant?: string;
 }
 
 export interface ITableRowHeader extends Omit<ITableHeader, 'id'> {

src/designSystem/kubit/components/table/styles.ts

@@ -92,6 +92,11 @@ export const TABLE_STYLES: TableStylesType<
           ...commonPropsHeader.container,
           background_color: COLORS.SECONDARY.color_secondary_bg_150,
         },
+        column: {
+          ...commonPropsHeader.column,
+          //It is used to add color to one single header cell, intead of the whole row
+          background_color: COLORS.SECONDARY.color_secondary_bg_150,
+        },
       },
       [TableHeaderVariantType.SECONDARY]: {
         ...commonPropsHeader,
@@ -102,6 +107,11 @@ export const TABLE_STYLES: TableStylesType<
           border_bottom_color: COLORS.SECONDARY.color_secondary_border_50,
           border_bottom_style: 'solid',
         },
+        column: {
+          ...commonPropsHeader.column,
+          //It is used to add color to one single header cell, intead of the whole row
+          background_color: COLORS.NEUTRAL.color_neutral_bg_250,
+        },
       },
       [TableHeaderVariantType.CUSTOMIZABLE_HEADER]: {
         ...commonPropsHeader,
@@ -171,31 +181,41 @@ export const TABLE_STYLES: TableStylesType<
       flex_direction: 'column',
       justify_content: 'left',
       background_color: COLORS.NEUTRAL.color_neutral_bg_250,
+      gap: SPACINGS.spacing_250,
+    },
+    listContainerHeaderPriority: {
+      display: 'flex',
+      flex_direction: 'column',
+      justify_content: 'left',
+      gap: SPACINGS.spacing_250,
     },
     listContainerSydeBySyde: {
       display: 'flex',
       flex_direction: 'row',
       justify_content: 'space-between',
       flex_wrap: 'wrap',
+      gap: SPACINGS.spacing_250,
     },
     listRowContainer: {
       display: 'flex',
       flex_direction: 'column',
       justify_content: 'left',
+      gap: SPACINGS.spacing_250,
     },
     listRowContainerBorder: true,
     listRow: {
       display: 'flex',
       flex_direction: 'column',
       justify_content: 'left',
       padding: `${SPACINGS.spacing_250} ${SPACINGS.spacing_300}`,
-      gap: SPACINGS.spacing_150,
+      gap: SPACINGS.spacing_250,
     },
     listRowSideBySide: {
       display: 'flex',
       flex_direction: 'row',
       justify_content: 'space-between',
       flex_wrap: 'wrap',
+      gap: SPACINGS.spacing_250,
     },
     divider: {
       lineSeparatorLabelVariant: LineSeparatorLabelVariantType.LABEL_DEFAULT,