Cell background color modification feature added to table

This commit introduces a feature that allows the modification of the background color of table cells. This enhancement provides more flexibility in customizing the appearance of the table, enabling the highlighting of specific cells, rows, or columns for better data visualization and readability.

Author: Hector Arce De Las Heras

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

@@ -129,6 +129,84 @@ const mockBase = {
   ],
 };
 
+const mockBaseCustomizable = {
+  variant: 'DEFAULT',
+  headerVariant: 'PRIMARY',
+  footer: { content: <div>Footer</div> },
+  headers: [
+    {
+      id: 'date',
+      label: 'Date',
+      config: { hasDivider: true },
+    },
+    {
+      id: 'name',
+      label: 'Recipient name',
+      config: { alignHeader: 'left', alignValue: 'left' },
+      value: value =>
+        value.surname ? (
+          <div>
+            <div>{value.name}</div>
+            <div>{value.surname}</div>
+          </div>
+        ) : (
+          value.name
+        ),
+    },
+    {
+      id: 'routingNumber',
+      label: 'Routing number',
+      config: { alignHeader: 'left', alignValue: 'left' },
+    },
+    {
+      id: 'accountNumber',
+      label: 'Account number',
+      config: { alignHeader: 'left', alignValue: 'left' },
+    },
+    {
+      id: 'transferMoney',
+      label: 'Transfer money',
+      config: { alignHeader: 'center', alignValue: 'center' },
+      value: () => (
+        <Button size="LARGE" variant="PRIMARY">
+          Transfer money
+        </Button>
+      ),
+    },
+    {
+      id: 'edit',
+      label: 'Edit',
+      config: { alignHeader: 'center', alignValue: 'center' },
+      value: () => 'plug',
+    },
+    {
+      id: 'delete',
+      label: 'Delete',
+      config: { alignHeader: 'right' },
+      value: () => 'edit active',
+    },
+  ],
+  values: [
+    {
+      date: '18 DIC',
+      name: 'Michael',
+      surname: 'Scott',
+      routingNumber: { value: '113456789', backgroundColor: 'red' },
+      accountNumber: '****999999',
+      transactionNumber: '0000',
+    },
+    {
+      date: '18 DIC',
+      name: 'Dwight',
+      surname: 'Schrute',
+      routingNumber: '777456789',
+      accountNumber: '****999777',
+      transactionNumber: '7777',
+      backgroundColor: 'blue',
+    },
+  ],
+};
+
 const mockExpanded = {
   variant: 'DEFAULT',
   headerVariant: 'PRIMARY',
@@ -311,6 +389,22 @@ describe('Table component', () => {
     expect(results).toHaveNoViolations();
   });
 
+  it('Renders with a valid HTML structure as customizableTable', async () => {
+    const { container } = renderProvider(
+      <Table
+        aria-label={'aria table label'}
+        captionDescription={'caption description'}
+        {...mockBaseCustomizable}
+      />
+    );
+    const results = await axe(container);
+    const table = screen.getByRole('table');
+
+    expect(table).toBeDefined();
+    expect(container).toHTMLValidate();
+    expect(results).toHaveNoViolations();
+  });
+
   it('can have a divider configured from the values', async () => {
     const { container } = renderProvider(
       <Table

src/components/table/component/tableRow.tsx

@@ -34,6 +34,7 @@ export const TableRow = (props: ITableRow): JSX.Element => {
     dividerValue,
     getExpandedAria,
     getValue,
+    getBackgroundColorCellValue,
     handleShowExpandedContent,
     hasExpandedContentRow,
     hasFooter,
@@ -69,7 +70,9 @@ export const TableRow = (props: ITableRow): JSX.Element => {
                   headerValue.config?.alignHeader?.[props.device] ||
                   headerValue?.config?.alignHeader
                 }
-                customBackgroundColor={props.value.backgroundColor}
+                customBackgroundColor={
+                  getBackgroundColorCellValue(headerValue) ?? props.value.backgroundColor
+                }
                 customWidth={headerValue.config?.width}
                 data-testid={`${props.dataTestId}Row${props.indexRow}Content${indexHeader}`}
                 flexWidth={headerValue.config?.flexWidth}

src/components/table/hooks/useContent.ts

@@ -1,7 +1,14 @@
 /* eslint-disable complexity */
 import * as React from 'react';
 
-import { DividerContent, ITableHeader, ITableStandAlone, IValue, TableDividerType } from '../types';
+import {
+  DividerContent,
+  ITableHeader,
+  ITableStandAlone,
+  IValue,
+  TableDividerType,
+  ValueConfigType,
+} from '../types';
 
 interface IUseContent extends Omit<ITableStandAlone, 'values' | 'headerVariant'> {
   hasSomeExpandedContent?: boolean;
@@ -15,6 +22,7 @@ interface IUseContentResponse {
   dividerValue: () => null | TableDividerType | unknown;
   getExpandedAria: () => string | undefined;
   getValue: (headerValue: ITableHeader) => string | JSX.Element | DividerContent;
+  getBackgroundColorCellValue: (headerValue: ITableHeader) => string | undefined;
   handleShowExpandedContent: (value: boolean) => void;
   hasExpandedContentRow: boolean;
   hasFooter: boolean;
@@ -73,9 +81,23 @@ export const useContent = (props: IUseContent): IUseContentResponse => {
       return headerValue.value(props.value);
     }
 
-    return props.value[headerValue.id]
-      ? (props.value[headerValue.id] as string | JSX.Element)
+    const cellValue = props.value[headerValue.id]
+      ? (props.value[headerValue.id] as string | JSX.Element | ValueConfigType)
       : '-';
+    if (React.isValidElement(cellValue) || typeof cellValue === 'string') {
+      return cellValue;
+    }
+    return (cellValue as ValueConfigType).value as string | JSX.Element;
+  };
+
+  const getBackgroundColorCellValue = (headerValue: ITableHeader): string | undefined => {
+    const cellValue = props.value[headerValue.id]
+      ? (props.value[headerValue.id] as string | JSX.Element | ValueConfigType)
+      : '-';
+    if (React.isValidElement(cellValue) || typeof cellValue === 'string') {
+      return;
+    }
+    return (cellValue as ValueConfigType).backgroundColor;
   };
 
   const hasExpandedContentRow = !!Object.getOwnPropertyDescriptor(props.value, 'expandedContent');
@@ -85,6 +107,7 @@ export const useContent = (props: IUseContent): IUseContentResponse => {
     dividerValue,
     getExpandedAria,
     getValue,
+    getBackgroundColorCellValue,
     handleShowExpandedContent,
     hasExpandedContentRow,
     hasFooter,

src/components/table/stories/mockTable.tsx

@@ -479,11 +479,11 @@ export const mockCustomizableTable = {
       value: (value): string | JSX.Element =>
         value.surname ? (
           <div>
-            <div>{value.name}</div>
+            <div>{value.name.value ?? value.name}</div>
             <div>{value.surname}</div>
           </div>
         ) : (
-          value.name
+          value.name.value ?? value.name
         ),
     },
     {
@@ -538,7 +538,7 @@ export const mockCustomizableTable = {
   values: [
     {
       date: '18 DIC',
-      name: 'Kevin',
+      name: { value: 'Kevin' },
       surname: 'Malone',
       routingNumber: '123456789',
       accountNumber: '****999999',
@@ -547,7 +547,7 @@ export const mockCustomizableTable = {
     },
     {
       date: '18 DIC',
-      name: 'Kevin',
+      name: { value: 'Dwight', backgroundColor: 'green' },
       surname: 'Malone',
       routingNumber: '123456789',
       accountNumber: '****999999',
@@ -575,6 +575,7 @@ export const mockCustomizableTable = {
       routingNumber: '9876132224',
       accountNumber: '****5986756',
       rowVariant: 'CUSTOMIZABLE_ROW',
+      delete: { backgroundColor: 'pink' },
     },
   ],
 };