Restructure table on mobile

.changeset/breezy-lies-deliver.md

@@ -0,0 +1,5 @@
+---
+"@sumup-oss/circuit-ui": patch
+---
+
+Improved ComparisonTable's layout in narrow viewports by moving its features' information inside table cells.

packages/circuit-ui/components/ComparisonTable/components/PlanTable/PlanTable.module.css

@@ -61,6 +61,14 @@
     table-layout: fixed;
   }
 
+  .table thead td {
+    display: none;
+  }
+
+  .table colgroup col:nth-child(1) {
+    display: none;
+  }
+
   .table thead .offset {
     top: calc(
       var(--top-navigation-height, 0px) + 80px

packages/circuit-ui/components/ComparisonTable/components/PlanTable/PlanTable.spec.tsx

@@ -66,10 +66,8 @@ describe('PlanTable', () => {
       screen.getAllByRole('rowheader', { name: 'Essential Features' }),
     ).toHaveLength(1);
     expect(screen.getAllByRole('rowheader')).toHaveLength(6);
-    expect(screen.getAllByRole('cell', { name: 'included' })).toHaveLength(7);
-    expect(screen.getAllByRole('cell', { name: 'not included' })).toHaveLength(
-      3,
-    );
+    expect(screen.getAllByText('included')).toHaveLength(7);
+    expect(screen.getAllByText('not included')).toHaveLength(3);
   });
 
   it('should render as collapsed when content is large', async () => {

packages/circuit-ui/components/ComparisonTable/components/PlanTable/PlanTable.tsx

@@ -214,7 +214,7 @@ export const PlanTable = forwardRef<HTMLTableElement, PlanTableProps>(
                   className={classes.section}
                   scope="rowgroup"
                   id={`cui-ct-sections-${sectionIndex}`}
-                  colSpan={headers.length + 1}
+                  colSpan={isMobile ? 2 : headersToDisplay.length + 1}
                   style={{
                     top: `${sectionOffset}px`,
                   }}
@@ -248,6 +248,7 @@ export const PlanTable = forwardRef<HTMLTableElement, PlanTableProps>(
                         key={`cui-comparison-table-${feature.featureDescription.label}-cell-${index}`}
                         headers={`cui-ct-sections-${sectionIndex} ${featureId} cui-ct-headers-${headersToDisplay[index]?.id}`}
                         cellValue={value}
+                        feature={feature}
                       />
                     ))}
                   </tr>

packages/circuit-ui/components/ComparisonTable/components/RowHeader/RowHeader.module.css

@@ -23,3 +23,9 @@
     line-height: var(--cui-compact-m-line-height);
   }
 }
+
+@media (max-width: 767px) {
+  .base {
+    display: none;
+  }
+}

packages/circuit-ui/components/ComparisonTable/components/TableCell/TableCell.module.css

@@ -6,17 +6,23 @@
 
 .content {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+  gap: var(--cui-spacings-byte);
   align-items: center;
   justify-content: center;
   min-height: 64px;
   padding: var(--cui-spacings-mega);
-  text-align: start;
+  text-align: center;
 }
 
 @media (min-width: 768px) {
   .text {
     font-size: var(--cui-compact-m-font-size);
     line-height: var(--cui-compact-m-line-height);
   }
+
+  .label,
+  .description {
+    display: none;
+  }
 }

packages/circuit-ui/components/ComparisonTable/components/TableCell/TableCell.spec.tsx

@@ -23,27 +23,51 @@ describe('TableCell', () => {
   const cellLabel = 'Cell label';
   const cellValue = 'Cell value';
 
+  const feature = {
+    featureDescription: {
+      label: 'Feature name',
+      description: 'feature description',
+    },
+    values: [
+      { value: true, label: 'included' },
+      { value: true, label: 'included' },
+    ],
+  };
+
   it('should render as row cell', () => {
-    render(<TableCell cellValue={cellValue} />);
+    render(<TableCell cellValue={cellValue} feature={feature} />);
     expect(screen.getByRole('cell')).toBeInTheDocument();
   });
   it('should render content as paragraph when value is a string', () => {
-    render(<TableCell cellValue={cellValue} />);
-    expect(screen.getByRole('paragraph')).toBeVisible();
-    expect(screen.getByRole('paragraph').textContent).toBe(cellValue);
+    render(<TableCell cellValue={cellValue} feature={feature} />);
+    expect(screen.getByText(cellValue)).toBeVisible();
+    expect(screen.getByText(feature.featureDescription.label)).toBeVisible();
+    expect(
+      screen.getByText(feature.featureDescription.description),
+    ).toBeVisible();
   });
   it('should render checked icon when value is true', () => {
-    render(<TableCell cellValue={{ label: cellLabel, value: true }} />);
+    render(
+      <TableCell
+        cellValue={{ label: cellLabel, value: true }}
+        feature={feature}
+      />,
+    );
     expect(screen.getByTestId('boolean-value-true')).toBeVisible();
     expect(screen.getByText(cellLabel)).toBeInTheDocument();
   });
   it('should render unchecked icon when value is false', () => {
-    render(<TableCell cellValue={{ label: cellLabel, value: false }} />);
+    render(
+      <TableCell
+        cellValue={{ label: cellLabel, value: false }}
+        feature={feature}
+      />,
+    );
     expect(screen.getByTestId('boolean-value-false')).toBeVisible();
     expect(screen.getByText(cellLabel)).toBeInTheDocument();
   });
   it('should render unchecked icon when value is undefined', () => {
-    render(<TableCell cellValue={undefined} />);
+    render(<TableCell cellValue={undefined} feature={feature} />);
     expect(screen.getByTestId('boolean-value-false')).toBeVisible();
   });
 });

packages/circuit-ui/components/ComparisonTable/components/TableCell/TableCell.tsx

@@ -20,6 +20,7 @@ import type { TdHTMLAttributes } from 'react';
 import { BooleanValue } from '../BooleanValue/BooleanValue.js';
 import { Compact } from '../../../Compact/index.js';
 import { clsx } from '../../../../styles/clsx.js';
+import type { Feature } from '../PlanTable/PlanTable.js';
 
 import classes from './TableCell.module.css';
 
@@ -32,10 +33,12 @@ export interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
    * If the value is a boolean, it will be rendered as an icon with a descriptive label.
    */
   cellValue: CellValue;
+  feature: Feature;
 }
 export const TableCell = ({
   cellValue,
   className,
+  feature,
   ...props
 }: TableCellProps) => {
   let content = <BooleanValue label={''} value={false} />;
@@ -52,7 +55,18 @@ export const TableCell = ({
 
   return (
     <td className={clsx(classes.base, className)} {...props}>
-      <div className={classes.content}>{content}</div>
+      <div className={classes.content}>
+        {content}
+
+        <Compact className={classes.label} size="s">
+          {feature.featureDescription.label}
+        </Compact>
+        {feature.featureDescription.description && (
+          <Compact className={classes.description} size="s" color="subtle">
+            {feature.featureDescription.description}
+          </Compact>
+        )}
+      </div>
     </td>
   );
 };

packages/circuit-ui/components/ComparisonTable/fixtures.tsx

@@ -225,7 +225,7 @@ export const analyticsSection: FeatureSection = {
         label: 'Basic reporting',
       },
       values: [
-        { value: true, label: 'included' },
+        'Core features only',
         { value: true, label: 'included' },
         { value: true, label: 'included' },
       ],