Restructure table on mobile

Author: sirineJ

.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.tsx

@@ -214,7 +214,11 @@ export const PlanTable = forwardRef<HTMLTableElement, PlanTableProps>(
                   className={classes.section}
                   scope="rowgroup"
                   id={`cui-ct-sections-${sectionIndex}`}
-                  colSpan={headers.length + 1}
+                  colSpan={
+                    isMobile
+                      ? headersToDisplay.length
+                      : headersToDisplay.length + 1
+                  }
                   style={{
                     top: `${sectionOffset}px`,
                   }}
@@ -248,6 +252,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.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

@@ -116,6 +116,14 @@ export const exclusiveFeature: Feature = {
   ],
 };
 
+export const extraFeature: Feature = {
+  featureDescription: {
+    label: 'Extra privileges',
+    description: 'for life',
+  },
+  values: ['0%', '15%'],
+};
+
 export const essentialFeaturesSection: FeatureSection = {
   title: 'Essential Features',
   features: [
@@ -124,6 +132,7 @@ export const essentialFeaturesSection: FeatureSection = {
     premiumFeature,
     limitedFeature,
     exclusiveFeature,
+    extraFeature,
   ],
 };