design feedback

sumup-oss · Mar 12, 2025 · 67831a6 · 67831a6
1 parent e876a20
commit 67831a6
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 35 deletions.
diff --git a/packages/circuit-ui/components/ComparisonTable/ComparisonTable.module.css b/packages/circuit-ui/components/ComparisonTable/ComparisonTable.module.css
@@ -0,0 +1,10 @@
+.base {
+  position: relative;
+  background-color: var(--cui-bg-normal);
+}
+
+.picker {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
diff --git a/packages/circuit-ui/components/ComparisonTable/ComparisonTable.tsx b/packages/circuit-ui/components/ComparisonTable/ComparisonTable.tsx
@@ -22,6 +22,7 @@ import {
   AccessibilityError,
   isSufficientlyLabelled,
 } from '../../util/errors.js';
+import { clsx } from '../../styles/clsx.js';
 
 import {
   PlanPicker,
@@ -31,6 +32,7 @@ import {
   PlanTable,
   type PlanTableProps,
 } from './components/PlanTable/PlanTable.js';
+import classes from './ComparisonTable.module.css';
 
 export interface ComparisonTableProps
   extends Omit<PlanTableProps, 'activePlans' | 'isCollapsed'>,
@@ -48,6 +50,7 @@ export const ComparisonTable = forwardRef<
       showAllFeaturesLabel,
       selectFirstPlanLabel,
       selectSecondPlanLabel,
+      className,
       ...props
     },
     ref,
@@ -95,9 +98,10 @@ export const ComparisonTable = forwardRef<
     }, []);
 
     return (
-      <div {...props}>
+      <div className={clsx(classes.base, className)} {...props}>
         {isMobile && plans.length >= 3 && (
           <PlanPicker
+            className={classes.picker}
             plans={planOptions}
             selectedPlans={activePlans}
             onPlanSelect={onPlanSelect}

diff --git a/packages/circuit-ui/components/ComparisonTable/components/PlanPicker/PlanPicker.module.css b/packages/circuit-ui/components/ComparisonTable/components/PlanPicker/PlanPicker.module.css
@@ -3,10 +3,15 @@
   gap: var(--cui-spacings-kilo);
   justify-content: center;
   width: 100%;
-  margin-bottom: var(--cui-spacings-giga);
+  padding: var(--cui-spacings-giga) 0;
+  background-color: var(--cui-bg-normal);
 }
 
 @media (max-width: 479px) {
+  .base {
+    padding: var(--cui-spacings-mega) 0;
+  }
+
   .select {
     width: 100%;
   }

diff --git a/packages/circuit-ui/components/ComparisonTable/components/PlanTable/PlanTable.module.css b/packages/circuit-ui/components/ComparisonTable/components/PlanTable/PlanTable.module.css
@@ -1,36 +1,36 @@
 .base {
-  position: relative;
   width: 100%;
-  border-collapse: collapse;
+  empty-cells: hide;
+  border-spacing: 0;
+  border-collapse: separate;
 }
 
 .wrapper {
   position: relative;
   width: 100%;
 }
 
-.offers {
-  th:last-child > div {
-    border-right: none;
-  }
-}
-
+/* Table headers */
 .base thead th {
   position: sticky;
   top: 0;
   z-index: 1;
+  padding-top: var(--cui-spacings-giga);
   background-color: var(--cui-bg-normal);
 }
 
+.border {
+  border-left: 1px solid var(--cui-border-subtle);
+}
+
 .section {
   position: sticky;
   top: 0;
   z-index: 1;
-  padding: var(--cui-spacings-mega) 0;
+  padding: var(--cui-spacings-giga) 0 var(--cui-spacings-mega);
   text-align: start;
   background-color: var(--cui-bg-normal);
-  box-shadow: inset 0 calc(-1 * var(--cui-border-width-kilo)) 0 0
-    var(--cui-border-strong);
+  border-bottom: var(--cui-border-width-kilo) solid var(--cui-border-strong);
 }
 
 .expand {
@@ -40,27 +40,33 @@
   left: 0;
   z-index: 1;
   display: flex;
+  align-items: flex-end;
   justify-content: center;
   width: 100%;
-  min-height: 64px;
+  min-height: 96px;
   content: "";
   background: linear-gradient(
     color-mix(in sRGB, var(--cui-bg-normal) 0%, transparent),
-    color-mix(in sRGB, var(--cui-bg-normal) 73.5%, transparent),
+    color-mix(in sRGB, var(--cui-bg-normal) 90%, transparent),
     color-mix(in sRGB, var(--cui-bg-normal) 100%, transparent)
   );
 }
 
 @media (max-width: 767px) {
-  .base th {
-    width: 30%;
+  .base {
+    table-layout: fixed;
+  }
+
+  .base thead th {
+    top: 72px;
+    padding-top: 0;
   }
 
-  .base th:first-child {
+  .base colgroup col {
     width: 40%;
   }
 
-  .base {
-    table-layout: fixed;
+  .base colgroup col:first-child {
+    width: 40%;
   }
 }
diff --git a/packages/circuit-ui/components/ComparisonTable/components/PlanTable/PlanTable.tsx b/packages/circuit-ui/components/ComparisonTable/components/PlanTable/PlanTable.tsx
@@ -38,6 +38,7 @@ import { throttle } from '../../../../util/helpers.js';
 import { Compact } from '../../../Compact/index.js';
 import { useMedia } from '../../../../hooks/useMedia/index.js';
 import { Body } from '../../../Body/index.js';
+import { clsx } from '../../../../styles/clsx.js';
 
 import classes from './PlanTable.module.css';
 
@@ -123,20 +124,28 @@ export const PlanTable = forwardRef<HTMLTableElement, PlanTableProps>(
     return (
       <div className={classes.wrapper}>
         <table
-          style={{ position: 'relative' }}
           className={classes.base}
           ref={applyMultipleRefs(ref, tableRef)}
           {...props}
         >
           <caption id="caption" className={utilClasses.hideVisually}>
             {caption}
           </caption>
+          <colgroup>
+            <col />
+            <col />
+            <col />
+          </colgroup>
           <thead ref={theadRef}>
-            <tr className={classes.offers}>
+            <tr>
               <th id="features" aria-hidden={true} />
               {(isMobile ? generateFromIndex(plans, activePlans) : plans).map(
-                (plan) => (
-                  <TableHeader key={plan.id} {...plan} />
+                (plan, index) => (
+                  <TableHeader
+                    key={plan.id}
+                    {...plan}
+                    className={clsx(index > 0 && classes.border)}
+                  />
                 ),
               )}
             </tr>
@@ -150,8 +159,9 @@ export const PlanTable = forwardRef<HTMLTableElement, PlanTableProps>(
                   scope="rowgroup"
                   headers="features"
                   colSpan={plans.length + 1}
+                  /* account for sticky plan selector on mobile */
                   style={{
-                    top: `${headerHeight}px`,
+                    top: `${(isMobile ? 72 : 0) + headerHeight}px`,
                   }}
                 >
                   <SectionTitleElement size="m" weight="semibold">

diff --git a/packages/circuit-ui/components/ComparisonTable/components/TableCell/TableCell.module.css b/packages/circuit-ui/components/ComparisonTable/components/TableCell/TableCell.module.css
@@ -30,5 +30,6 @@
 }
 
 .description {
+  margin-top: var(--cui-spacings-bit);
   text-align: start;
 }
diff --git a/packages/circuit-ui/components/ComparisonTable/components/TableHeader/TableHeader.module.css b/packages/circuit-ui/components/ComparisonTable/components/TableHeader/TableHeader.module.css
@@ -5,10 +5,10 @@
   justify-content: center;
   min-height: 96px;
   padding: 0 var(--cui-spacings-kilo);
-  border-right: 1px solid var(--cui-border-subtle);
 }
 
 .wrapper {
+  padding: 0;
   vertical-align: bottom;
 }
 

diff --git a/packages/circuit-ui/components/ComparisonTable/components/TableHeader/TableHeader.tsx b/packages/circuit-ui/components/ComparisonTable/components/TableHeader/TableHeader.tsx
@@ -25,6 +25,7 @@ import { Button, type ButtonProps } from '../../../Button/index.js';
 import { Body } from '../../../Body/index.js';
 import { useMedia } from '../../../../hooks/useMedia/index.js';
 import { Compact } from '../../../Compact/index.js';
+import { clsx } from '../../../../styles/clsx.js';
 
 import classes from './TableHeader.module.css';
 
@@ -56,20 +57,21 @@ export const TableHeader = ({
   title,
   description,
   tier,
+  className,
   callToAction,
 }: TableHeaderProps) => {
   const isMobile = useMedia('(max-width: 767px)');
 
   return (
     <th scope="col" className={classes.wrapper}>
-      <div className={classes.base}>
+      <div className={clsx(classes.base, className)}>
         <div className={classes.title}>
           {(!isMobile || (isMobile && !tier)) && (
-            <Compact size={isMobile ? 'm' : 'l'} weight="bold">
+            <Compact size="l" weight="bold">
               {title}
             </Compact>
           )}
-          {tier && <TierIndicator {...tier} size={isMobile ? 's' : 'm'} />}
+          {tier && <TierIndicator {...tier} size="m" />}
         </div>
 
         <Body size={isMobile ? 's' : 'm'} className={classes.description}>

diff --git a/packages/circuit-ui/components/ComparisonTable/fixtures.tsx b/packages/circuit-ui/components/ComparisonTable/fixtures.tsx
@@ -63,12 +63,12 @@ export const freeBusinessAccountFeature: FeatureRowProps = {
           View details for Free business account
         </IconButton>
       ),
-      headline: 'What is a chargeback?',
-      body: 'A chargeback is a return of money to a payer of a transaction, especially a credit card transaction.',
+      headline: 'Some additional information',
+      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
       action: {
         children: 'Learn more',
         navigationIcon: ArrowSlanted,
-        href: 'https://help.sumup.com/en-US/articles/3ztthQLEXab3K0vUaQqgwx-chargeback-faq',
+        href: 'https://help.sumup.com/',
         target: '_blank',
       },
       offset: 8,
@@ -159,12 +159,12 @@ export const productCatalogSection: FeatureSection = {
               View details for Modifiers
             </IconButton>
           ),
-          headline: 'What are variants ?',
-          body: 'A variant is a product that is similar to another product but has some differences.',
+          headline: 'Some additional information',
+          body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
           action: {
             children: 'Learn more',
             navigationIcon: ArrowSlanted,
-            href: 'https://help.sumup.com/en-US/articles/3ztthQLEXab3K0vUaQqgwx-chargeback-faq',
+            href: 'https://help.sumup.com/',
             target: '_blank',
           },
           offset: 8,