more precision changes

sumup-oss · Mar 11, 2025 · 0ce4180 · 0ce4180
1 parent 6bbb7bd
commit 0ce4180
Show file tree

Hide file tree

Showing 14 changed files with 78 additions and 42 deletions.
diff --git a/packages/circuit-ui/components/ComparisonTable/ComparisonTable.spec.tsx b/packages/circuit-ui/components/ComparisonTable/ComparisonTable.spec.tsx
@@ -109,15 +109,15 @@ describe('ComparisonTable', () => {
     it('should update displayed plans when a new plan is picked', async () => {
       render(<ComparisonTable {...baseProps} />);
       expect(
-        screen.getByRole('columnheader', { name: 'POS plus 14.99$ /month' }),
+        screen.getByRole('columnheader', { name: 'plus 15$/month' }),
       ).toBeInTheDocument();
 
       await userEvent.selectOptions(
         screen.getByLabelText(baseProps.selectFirstPlanLabel),
         'POS Pro',
       );
       expect(
-        screen.getByRole('columnheader', { name: 'POS plus 14.99$ /month' }),
+        screen.getByRole('columnheader', { name: 'plus 15$/month' }),
       ).toBeVisible();
     });
   });

diff --git a/packages/circuit-ui/components/ComparisonTable/ComparisonTable.stories.tsx b/packages/circuit-ui/components/ComparisonTable/ComparisonTable.stories.tsx
@@ -36,12 +36,7 @@ export default {
 const baseProps: ComparisonTableProps = {
   caption: 'Compare plans',
   plans: [posPlan, posPlusPlan, posProPlan],
-  sections: [
-    bankingBasicsSection,
-    productCatalogSection,
-    bookingsSection,
-    cashManagementSection,
-  ],
+  sections: [bankingBasicsSection],
   showAllFeaturesLabel: 'Show all features',
   selectSecondPlanLabel: 'Select a second plan',
   selectFirstPlanLabel: 'Select a first plan',
@@ -50,5 +45,17 @@ const baseProps: ComparisonTableProps = {
 export const Base = (args: ComparisonTableProps) => (
   <ComparisonTable {...args} />
 );
-
 Base.args = baseProps;
+export const Collapsed = (args: ComparisonTableProps) => (
+  <ComparisonTable {...args} />
+);
+
+Collapsed.args = {
+  ...baseProps,
+  sections: [
+    ...baseProps.sections,
+    productCatalogSection,
+    bookingsSection,
+    cashManagementSection,
+  ],
+};
diff --git a/packages/circuit-ui/components/ComparisonTable/ComparisonTable.tsx b/packages/circuit-ui/components/ComparisonTable/ComparisonTable.tsx
@@ -85,7 +85,7 @@ export const ComparisonTable = forwardRef<
     }
 
     const [activePlans, setActivePlans] = useState<number[]>([0, 1]);
-    const isMobile = useMedia('(max-width: 479px)');
+    const isMobile = useMedia('(max-width: 767px)');
 
     const planOptions = plans.map((plan, index) => ({
       label: plan.title,

diff --git a/packages/circuit-ui/components/ComparisonTable/components/PlanPicker/PlanPicker.module.css b/packages/circuit-ui/components/ComparisonTable/components/PlanPicker/PlanPicker.module.css
@@ -1,10 +1,13 @@
 .base {
   display: flex;
   gap: var(--cui-spacings-kilo);
+  justify-content: center;
   width: 100%;
   margin-bottom: var(--cui-spacings-giga);
 }
 
-.select {
-  width: 100%;
+@media (max-width: 479px) {
+  .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
@@ -50,3 +50,17 @@
     color-mix(in sRGB, var(--cui-bg-normal) 100%, transparent)
   );
 }
+
+@media (max-width: 767px) {
+  .base th {
+    width: 30%;
+  }
+
+  .base th:first-child {
+    width: 40%;
+  }
+
+  .base {
+    table-layout: fixed;
+  }
+}
diff --git a/packages/circuit-ui/components/ComparisonTable/components/PlanTable/PlanTable.spec.tsx b/packages/circuit-ui/components/ComparisonTable/components/PlanTable/PlanTable.spec.tsx
@@ -86,7 +86,7 @@ describe('PlanTable', () => {
     expect(screen.getAllByRole('columnheader')).toHaveLength(2);
     expect(
       screen.queryByRole('columnheader', {
-        name: 'POS Pro plus 24.99$ /month Join now',
+        name: 'POS Pro plus 25$ /month Join now',
       }),
     ).not.toBeInTheDocument();
   });

diff --git a/packages/circuit-ui/components/ComparisonTable/components/PlanTable/PlanTable.tsx b/packages/circuit-ui/components/ComparisonTable/components/PlanTable/PlanTable.tsx
@@ -37,6 +37,7 @@ import { applyMultipleRefs } from '../../../../util/refs.js';
 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 classes from './PlanTable.module.css';
 
@@ -75,7 +76,7 @@ export const PlanTable = forwardRef<HTMLTableElement, PlanTableProps>(
     ref,
   ) => {
     const tableRef = useRef<HTMLTableElement>(null);
-    const isMobile = useMedia('(max-width: 479px)');
+    const isMobile = useMedia('(max-width: 767px)');
     const [isCollapsed, setIsCollapsed] = useState(
       sections.reduce(
         (totalRows, section) => totalRows + section.features.length + 1,
@@ -117,6 +118,8 @@ export const PlanTable = forwardRef<HTMLTableElement, PlanTableProps>(
       }
     }, [isCollapsed]);
 
+    const SectionTitleElement = isMobile ? Compact : Body;
+
     return (
       <div className={classes.wrapper}>
         <table
@@ -151,12 +154,9 @@ export const PlanTable = forwardRef<HTMLTableElement, PlanTableProps>(
                     top: `${headerHeight}px`,
                   }}
                 >
-                  <Compact
-                    size={isMobile ? 'm' : 'l'}
-                    weight={isMobile ? 'semibold' : 'bold'}
-                  >
+                  <SectionTitleElement size="m" weight="semibold">
                     {row.title}
-                  </Compact>
+                  </SectionTitleElement>
                 </th>
               </tr>
               {row.features.map((feature) => (

diff --git a/packages/circuit-ui/components/ComparisonTable/components/TableCell/TableCell.module.css b/packages/circuit-ui/components/ComparisonTable/components/TableCell/TableCell.module.css
@@ -31,7 +31,3 @@
 .description {
   text-align: start;
 }
-
-.border {
-  border-left: 1px solid var(--cui-border-divider);
-}
diff --git a/packages/circuit-ui/components/ComparisonTable/components/TableCell/TableCell.tsx b/packages/circuit-ui/components/ComparisonTable/components/TableCell/TableCell.tsx
@@ -58,7 +58,7 @@ export const TableCell = ({
   toggletip,
   ...props
 }: TableCellProps) => {
-  const isMobile = useMedia('(max-width: 479px)');
+  const isMobile = useMedia('(max-width: 767px)');
   const Element = isHeader ? 'th' : 'td';
   let cellValue = <BooleanValue label={label} value={false} />;
   if (typeof value === 'string') {
@@ -69,7 +69,7 @@ export const TableCell = ({
 
   return (
     <Element
-      className={clsx(classes.base, !isHeader && classes.border, className)}
+      className={clsx(classes.base, className)}
       scope={isHeader ? 'row' : undefined}
       {...props}
     >

diff --git a/packages/circuit-ui/components/ComparisonTable/components/TableHeader/TableHeader.module.css b/packages/circuit-ui/components/ComparisonTable/components/TableHeader/TableHeader.module.css
@@ -3,12 +3,13 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 0 var(--cui-spacings-mega);
+  min-height: 96px;
+  padding: 0 var(--cui-spacings-kilo);
   border-right: 1px solid var(--cui-border-subtle);
 }
 
 .wrapper {
-  padding: var(--cui-spacings-mega) 0;
+  vertical-align: bottom;
 }
 
 .title {
@@ -19,6 +20,12 @@
   margin-bottom: var(--cui-spacings-bit);
 }
 
-.description {
-  margin-bottom: var(--cui-spacings-mega);
+@media (min-width: 768px) {
+  .base {
+    padding: 0 var(--cui-spacings-mega);
+  }
+
+  .description {
+    margin-bottom: var(--cui-spacings-mega);
+  }
 }
diff --git a/packages/circuit-ui/components/ComparisonTable/components/TableHeader/TableHeader.tsx b/packages/circuit-ui/components/ComparisonTable/components/TableHeader/TableHeader.tsx
@@ -58,20 +58,18 @@ export const TableHeader = ({
   tier,
   callToAction,
 }: TableHeaderProps) => {
-  const isMobile = useMedia('(max-width: 479px)');
+  const isMobile = useMedia('(max-width: 767px)');
 
   return (
     <th scope="col" className={classes.wrapper}>
       <div className={classes.base}>
-        <div>
-          <Compact
-            className={classes.title}
-            size={isMobile ? 's' : 'm'}
-            weight="bold"
-          >
-            {title}
-          </Compact>
-          {tier && <TierIndicator {...tier} size="s" />}
+        <div className={classes.title}>
+          {(!isMobile || (isMobile && !tier)) && (
+            <Compact size={isMobile ? 'm' : 'l'} weight="bold">
+              {title}
+            </Compact>
+          )}
+          {tier && <TierIndicator {...tier} size={isMobile ? 's' : 'm'} />}
         </div>
 
         <Body size={isMobile ? 's' : 'm'} className={classes.description}>

diff --git a/packages/circuit-ui/components/ComparisonTable/components/TableRow/FeatureRow.module.css b/packages/circuit-ui/components/ComparisonTable/components/TableRow/FeatureRow.module.css
@@ -0,0 +1,3 @@
+.border {
+  border-left: 1px solid var(--cui-border-divider);
+}
diff --git a/packages/circuit-ui/components/ComparisonTable/components/TableRow/FeatureRow.tsx b/packages/circuit-ui/components/ComparisonTable/components/TableRow/FeatureRow.tsx
@@ -16,6 +16,9 @@
 import type { HTMLAttributes } from 'react';
 
 import { TableCell, type TableCellProps } from '../TableCell/TableCell.js';
+import { clsx } from '../../../../styles/clsx.js';
+
+import classes from './FeatureRow.module.css';
 
 export interface FeatureRowProps extends HTMLAttributes<HTMLTableRowElement> {
   featureDescription: Pick<
@@ -42,7 +45,12 @@ export const FeatureRow = ({
       toggletip={featureDescription.toggletip}
     />
     {values.map(({ value, label }, index) => (
-      <TableCell key={`${label}-${index}`} value={value} label={label} />
+      <TableCell
+        className={clsx(index > 0 && classes.border)}
+        key={`${label}-${index}`}
+        value={value}
+        label={label}
+      />
     ))}
   </tr>
 );
diff --git a/packages/circuit-ui/components/ComparisonTable/fixtures.tsx b/packages/circuit-ui/components/ComparisonTable/fixtures.tsx
@@ -35,7 +35,7 @@ export const posPlusPlan: TableHeaderProps = {
   title: 'POS',
   id: 'pos_plus',
   tier: { variant: 'plus' },
-  description: '14.99$ /month',
+  description: '15$/month',
   callToAction: {
     children: 'Join now',
     href: 'https://sumup.com/plus',
@@ -46,7 +46,7 @@ export const posProPlan: TableHeaderProps = {
   title: 'POS Pro',
   id: 'pos_pro',
   tier: { variant: 'plus' },
-  description: '24.99$ /month',
+  description: '25$/month',
   callToAction: {
     children: 'Join now',
     href: 'https://sumup.com/pro',