@arc-ui/community-components 3.16.0 → 3.17.0

package/src/components/ComparisonTable/ComparisonTable.module.css

@@ -0,0 +1,503 @@
+/* stylelint-disable no-descending-specificity */
+
+@import url("@arc-ui/tokens-arc/dist/custom-media.css");
+
+.wrapper {
+  position: relative;
+}
+
+.wrapperBordered {
+  border-radius: 64px;
+  padding: 32px 0 0;
+
+  /*
+   * `clip` keeps the rounded-corner clipping (like `hidden`) but does not
+   * establish a scroll container, so a nested table with `overflow-x: auto`
+   * can still scroll horizontally within the border.
+   */
+  overflow: clip;
+}
+
+.shadowOverlay {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  border-radius: inherit;
+  box-shadow: inset 0 0 16px 0 rgba(0, 0, 0, 25%);
+  pointer-events: none;
+}
+
+.wrapperBordered .table {
+  padding: 0 32px 32px;
+}
+
+.wrapperBordered .desktopTable {
+  padding: 0 32px 32px;
+}
+
+.table {
+  /*
+   * Below m: plan columns are a fixed width (what each would be at the l
+   * breakpoint on desktop). The table scrolls horizontally when they overflow.
+   * A trailing `--comparison-right-edge-gap` track lets the last column scroll
+   * clear of the container edge (see `.headerRow::after` below). The mobile
+   * layout always scrolls horizontally when it overflows — it's swapped out for
+   * the desktop layout at the `s` breakpoint — so the gap needs no breakpoint
+   * reset.
+   */
+  --comparison-right-edge-gap: 32px;
+  --cols: repeat(
+      var(--comparison-columns),
+      calc((1024px - 256px) / var(--comparison-columns))
+    )
+    var(--comparison-right-edge-gap);
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow-x: auto;
+}
+
+/* Per-column rows: own grid, shared column template. */
+.headerRow,
+.subHeaderRow,
+.row {
+  display: grid;
+  grid-template-columns: var(--cols);
+  min-width: 100%;
+}
+
+/*
+ * Right-edge gap for the horizontal table scrolling
+ */
+.headerRow::after,
+.subHeaderRow::after,
+.row::after {
+  content: "";
+  grid-column: -2 / -1;
+}
+
+.headerCell {
+  --header-cell-pad-top: var(--sem-space-padding-110);
+  --header-cell-pad-right: var(--sem-space-padding-110);
+  --header-cell-pad-left: var(--sem-space-padding-110);
+
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: var(--sem-space-padding-110);
+  background-color: var(--sem-color-bg-secondary-light-default);
+  border-bottom: var(--sem-border-width-xxs) solid
+    var(--sem-color-border-secondary-light-minimal);
+}
+
+/*
+ * Flush the promoted banner to the top and sides of its header cell by pulling
+ * it into the cell's padding, so the banner always spans the full column width.
+ * Each header cell exposes its own left/right padding via custom properties
+ * (`--header-cell-pad-left` / `--header-cell-pad-right`); the banner cancels
+ * exactly those, so it matches whatever padding the cell uses. The top corners
+ * inherit the highlighted column's 32px radius so the banner sits inside them.
+ */
+.headerCellPromoted {
+  margin-top: calc(
+    -1 * var(--header-cell-pad-top, var(--sem-space-padding-110))
+  );
+  margin-right: calc(
+    -1 * var(--header-cell-pad-right, var(--sem-space-padding-110))
+  );
+  margin-bottom: var(--sem-space-gap-40);
+  margin-left: calc(
+    -1 * var(--header-cell-pad-left, var(--sem-space-padding-110))
+  );
+  border-radius: 0;
+  overflow: hidden;
+  text-align: center;
+}
+
+.highlightedTop .headerCellPromoted {
+  border-top-left-radius: 32px;
+  border-top-right-radius: 32px;
+}
+
+/*
+ * Opt-in sticky header: the header row is now a real box, so it can stick to
+ * the top of the scroll container directly.
+ */
+.stickyHeader {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--sem-color-bg-secondary-light-default);
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 12%);
+}
+
+.subHeaderCell {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+  padding: 24px 32px 32px;
+  border-top: var(--sem-border-width-xxs) solid
+    var(--sem-color-border-secondary-light-minimal);
+  border-bottom: var(--sem-border-width-xxs) solid
+    var(--sem-color-border-secondary-light-minimal);
+}
+
+@media (--arc-custom-media-min-width-s-px) {
+  .subHeaderCell {
+    border-top: none;
+  }
+}
+
+.rowGroup {
+  display: flex;
+  flex-direction: column;
+}
+
+/*
+ * The feature band spans the table's full content width (not just the viewport)
+ * when the table scrolls horizontally: the row mirrors the data-row grid and
+ * the band spans every column.
+ */
+.featureRow {
+  display: grid;
+  grid-template-columns: var(--cols);
+  min-width: 100%;
+}
+
+.featureRowHeader {
+  grid-column: 1 / -2;
+  background-color: var(--sem-color-bg-secondary-light-default);
+}
+
+/* Mobile content-row cells carry the bottom border (not the feature band above them). */
+.row .cell {
+  border-bottom: var(--sem-border-width-xxs) solid
+    var(--sem-color-border-secondary-light-minimal);
+}
+
+/*
+ * xs / s / m: the table scrolls horizontally, so pin the feature header's
+ * content to the left edge of the viewport while the columns scroll.
+ */
+.featureRowHeaderContent {
+  position: sticky;
+  left: 0;
+  width: calc((1024px - 256px) / var(--comparison-columns));
+}
+
+/* s and up: the mobile layout is hidden, so no horizontal scroll to pin against. */
+@media (--arc-custom-media-min-width-s-px) {
+  .featureRowHeaderContent {
+    position: static;
+    width: auto;
+  }
+}
+
+/*
+ * The control row mirrors the per-column grid (like `.featureRow`) so it spans
+ * the table's full content width and scrolls the whole width, not just the
+ * viewport. The single control cell spans every track.
+ */
+.controlRow {
+  display: grid;
+  grid-template-columns: var(--cols);
+  min-width: 100%;
+}
+
+/*
+ * The control cell spans the full row width so the row still scrolls the whole
+ * table width. The sticky, left-pinned behaviour lives on the inner
+ * `.controlCellContent` instead, mirroring the feature band
+ * (`.featureRowHeader`) / sticky content (`.featureRowHeaderContent`) split.
+ */
+.controlCell {
+  grid-column: 1 / -2;
+  display: flex;
+  padding: 16px;
+}
+
+/*
+ * xs / s / m: pin the controls to the left edge of the viewport while the
+ * columns scroll horizontally, matching the feature cell. The bounded width is
+ * what makes the sticky pin visible — one plan-column width keeps it aligned
+ * with `.featureRowHeaderContent`.
+ */
+.controlCellContent {
+  display: flex;
+  position: sticky;
+  left: 0;
+  width: calc((1024px - 256px) / var(--comparison-columns));
+  flex-wrap: wrap;
+  gap: var(--sem-space-gap-60);
+  align-items: center;
+}
+
+/* s and up: the mobile layout is hidden, so no horizontal scroll to pin against. */
+@media (--arc-custom-media-min-width-s-px) {
+  .controlCell {
+    padding: 16px 16px 48px 0;
+  }
+
+  .controlCellContent {
+    position: static;
+    width: auto;
+  }
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px 32px;
+  text-align: center;
+}
+
+.highlighted {
+  background: var(--surface-colors-bg-light-brand-02);
+}
+
+.highlightedTop {
+  border-top-left-radius: 32px;
+  border-top-right-radius: 32px;
+}
+
+.highlightedBottom {
+  border-bottom-left-radius: 32px;
+  border-bottom-right-radius: 32px;
+}
+
+/* Breakpoint layout toggle: mobile layout below s, desktop at s and up. */
+.mobileLayout {
+  display: flex;
+}
+
+.desktopLayout {
+  display: none;
+}
+
+@media (--arc-custom-media-min-width-s-px) {
+  .mobileLayout {
+    display: none;
+  }
+
+  .desktopLayout {
+    display: flex;
+  }
+}
+
+/*
+ * Desktop layout: feature as a left-hand column, plan columns to the right.
+ * The desktop table is a vertical flex stack of real row boxes. Each row is its
+ * own grid sharing --desktop-cols (a leading feature column + one track per
+ * plan column), so columns line up and each row stays a positionable box.
+ */
+.desktopTable {
+  /*
+   * s to l: feature column + fixed-width plan columns, each (1024px - feature
+   * column 256px) / number of columns. The table scrolls horizontally if they
+   * overflow.
+   */
+  --comparison-right-edge-gap: 32px;
+  --desktop-cols: minmax(144px, 256px)
+    repeat(
+      var(--comparison-columns),
+      calc((1024px - 256px) / var(--comparison-columns))
+    )
+    var(--comparison-right-edge-gap);
+
+  flex-direction: column;
+  width: 100%;
+  overflow-x: auto;
+}
+
+/*
+ * Sticky header + horizontal scroll on one element: `overflow-x: auto` already
+ * promotes the computed `overflow-y` to `auto`, so the table is the sticky
+ * header's scroll container. Bounding its height gives the body something to
+ * scroll vertically against, so the header pins to the table's top while rows
+ * scroll beneath it — and columns still scroll horizontally in the same box.
+ * This composes with `hasBorder`. Consumers can tune the height via the
+ * `--comparison-table-max-height` custom property.
+ */
+.desktopTableSticky {
+  max-height: 100dvh;
+  overflow-y: auto;
+}
+
+/*
+ * l and up: plan columns grow to fill the remaining width equally.
+ */
+@media (--arc-custom-media-min-width-l-px) {
+  .desktopTable {
+    /* Columns flex to fill the width here; no horizontal scroll, so no gap. */
+    --comparison-right-edge-gap: 0px;
+    --desktop-cols: minmax(144px, 256px)
+      repeat(var(--comparison-columns), minmax(0, 1fr))
+      var(--comparison-right-edge-gap);
+  }
+}
+
+.desktopHeaderRow,
+.desktopSubHeaderRow,
+.desktopRow {
+  display: grid;
+  grid-template-columns: var(--desktop-cols);
+  min-width: 100%;
+}
+
+/*
+ * Right-edge gap for the horizontal table scrolling
+ */
+.desktopHeaderRow::after,
+.desktopSubHeaderRow::after,
+.desktopRow::after {
+  content: "";
+  grid-column: -2 / -1;
+}
+
+.desktopFeatureHeader,
+.desktopHeaderCell {
+  --header-cell-pad-top: var(--sem-space-padding-110);
+  --header-cell-pad-right: 0;
+  --header-cell-pad-left: var(--sem-space-padding-110);
+
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: var(--sem-space-padding-110) 0 var(--sem-space-padding-110)
+    var(--sem-space-padding-110);
+  background-color: var(--sem-color-bg-secondary-light-default);
+  border-bottom: var(--sem-border-width-xxs) solid
+    var(--sem-color-border-secondary-light-minimal);
+}
+
+.desktopControlsCell {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sem-space-gap-60);
+  justify-content: flex-end;
+  padding: 16px 16px 48px 0;
+  border-bottom: var(--sem-border-width-xxs) solid
+    var(--sem-color-border-secondary-light-minimal);
+}
+
+.desktopFeatureCell {
+  border-bottom: var(--sem-border-width-xxs) solid
+    var(--sem-color-border-secondary-light-minimal);
+}
+
+/* Desktop value cells get a bottom border per row (the feature cell already has one). */
+.desktopRow .cell {
+  border-bottom: var(--sem-border-width-xxs) solid
+    var(--sem-color-border-secondary-light-minimal);
+}
+
+/*
+ * Highlighted desktop header cells: override the default grey header background
+ * with the brand highlight (higher specificity than .desktopHeaderCell alone).
+ */
+.desktopHeaderCell.highlighted {
+  background: var(--surface-colors-bg-light-brand-02);
+}
+
+/* ------------------------------------------------------------------ */
+
+/*
+ * Collapsible section toggle + content (both layouts). The toggle row mirrors
+ * each layout's per-column grid so it spans the table's full content width (not
+ * just the viewport) and scrolls the whole width, like the feature and control
+ * rows. The toggle button spans every column via `1 / -1`; the per-layout
+ * column template is applied below since mobile and desktop use different track
+ * variables.
+ */
+.sectionToggleRow {
+  display: grid;
+  min-width: 100%;
+}
+
+.table .sectionToggleRow {
+  grid-template-columns: var(--cols);
+}
+
+.desktopTable .sectionToggleRow {
+  grid-template-columns: var(--desktop-cols);
+}
+
+.sectionToggleRow .sectionToggle {
+  grid-column: 1 / -2;
+}
+
+.sectionContent {
+  display: flex;
+  flex-direction: column;
+}
+
+.sectionToggle {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: flex-start;
+  padding: var(--sem-space-padding-110);
+  padding-left: 0;
+  background: var(--sem-color-bg-secondary-light-default);
+  border: none;
+  border-bottom: var(--sem-border-width-xxs) solid
+    var(--sem-color-border-secondary-light-minimal);
+  text-align: left;
+  cursor: pointer;
+  appearance: none;
+}
+
+/*
+ * The heading + chevron, pinned to the left edge of the viewport while the
+ * table scrolls horizontally, matching the feature and control cells. The
+ * button spans the full width (so its background and divider border do too);
+ * only this inner content sticks. `width: fit-content` keeps the pinned box no
+ * wider than the heading so it tracks the left edge rather than stretching.
+ */
+.sectionToggleContent {
+  display: flex;
+  position: sticky;
+  left: 0;
+  width: fit-content;
+  align-items: center;
+  gap: var(--sem-space-gap-40);
+}
+
+/* Open: drop the bottom border; the first revealed row provides the divider. */
+.sectionToggleOpen {
+  border-bottom: none;
+}
+
+.sectionChevron {
+  display: inline-flex;
+  transition: transform 0.2s ease;
+}
+
+.sectionChevronOpen {
+  transform: rotate(180deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sectionChevron {
+    transition: none;
+  }
+}
+
+/* The last mobile row has no bottom border. */
+.rowGroup.isLastRow:last-child .row .cell {
+  border-bottom: none;
+}
+
+/* The last desktop row has no bottom border. */
+.desktopRow.isLastRow .desktopFeatureCell,
+.desktopRow.isLastRow .cell {
+  border-bottom: none;
+}
+
+/* A closed last section's toggle is the table's last row: no bottom divider. */
+.sectionToggleRow.isLastRow .sectionToggle {
+  border-bottom: none;
+}

package/src/components/ComparisonTable/ComparisonTable.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import classNames from "classnames";
+
+import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
+
+import { MobileTable } from "./components/MobileTable/MobileTable";
+import { DesktopTable } from "./components/DesktopTable/DesktopTable";
+import styles from "./ComparisonTable.module.css";
+import { type ComparisonColumn } from "./types/comparison-column";
+import { type ComparisonRow } from "./types/comparison-row";
+import { type ComparisonSection } from "./types/comparison-section";
+import { groupRows } from "./utils/group-rows";
+
+export const ComparisonTable: React.FC<ComparisonTableProps> = ({
+  columns,
+  rows,
+  sections,
+  controls,
+  hasBorder = true,
+  hasStickyHeader = false,
+  ...props
+}) => {
+  const { unsectioned, sections: resolvedSections } = React.useMemo(
+    () => groupRows(rows, sections),
+    [rows, sections],
+  );
+
+  return (
+    <div
+      className={classNames(styles.wrapper, {
+        [styles.wrapperBordered]: hasBorder,
+      })}
+      {...filterAttrs(props)}
+    >
+      {hasBorder && <div className={styles.shadowOverlay} aria-hidden="true" />}
+      <MobileTable
+        className={styles.mobileLayout}
+        columns={columns}
+        rows={unsectioned}
+        sections={resolvedSections}
+        controls={controls}
+      />
+      <DesktopTable
+        className={styles.desktopLayout}
+        columns={columns}
+        rows={unsectioned}
+        sections={resolvedSections}
+        controls={controls}
+        hasStickyHeader={hasStickyHeader}
+      />
+    </div>
+  );
+};
+
+export interface ComparisonTableProps {
+  /**
+   * Column definitions driving the header cells and the number of content cells
+   * per row. Each `ComparisonColumn` has:
+   *
+   * - `id` (`string`) — Stable identifier; used as a React key.
+   * - `label` (`string`) — Visible text in the column header (e.g. a plan name).
+   * - `promoted` (`string`, optional) — Promotional banner text shown above the label in a branded Surface.
+   * - `subheader` (`SubHeaderCellProps`, optional) — Price, price-increase items, and a CTA button rendered in a row beneath the header.
+   */
+  columns: ComparisonColumn[];
+  /**
+   * All rows. Rows without `sectionId` render first, before any sections. Rows
+   * with a `sectionId` render inside the matching section, in input order. On
+   * mobile each row is a full-width feature header above its content row(s); on
+   * desktop the feature becomes the left-hand column of the row. Each
+   * `ComparisonRow` has:
+   *
+   * - `feature` (`FeatureCellProps`) — Icon, title, description, and optional popover for the feature label.
+   * - `cells` (`ReactNode[]`) — One cell per column, in the same order as `columns`. Supports strings or rich ReactNode content (e.g. tick/cross icons).
+   * - `subRows` (`ComparisonSubRow[]`, optional) — Additional content rows beneath the primary row, for features spanning multiple rows.
+   * - `sectionId` (`string`, optional) — Id of the section the row belongs to. An unknown id logs a dev warning and the row renders unsectioned.
+   */
+  rows?: ComparisonRow[];
+  /**
+   * Section metadata only. Sections render in array order, after unsectioned
+   * rows, each with a full-width toggle that expands or collapses the rows whose
+   * `sectionId` matches. A section with no matching rows is hidden. Each `ComparisonSection` has:
+   *
+   * - `id` (`string`) — Stable identifier; used as a React key and for accessibility linking.
+   * - `heading` (`ReactNode`) — Text shown in the section's toggle button.
+   * - `headingLevel` (`HeadingLevel`, optional) — Semantic heading level for the document outline.
+   * - `defaultOpen` (`boolean`, optional) — Initial open state when uncontrolled. Defaults to `false`.
+   * - `open` (`boolean`, optional) — Controlled open state.
+   * - `onOpenChange` (`(open: boolean) => void`, optional) — Callback for controlled usage.
+   */
+  sections?: ComparisonSection[];
+  /**
+   * Optional controls. On mobile they render in a full-width cell beneath the header; on desktop they render in the left-hand feature column beside the sub-header. Omit to hide the control row entirely.
+   */
+  controls?: React.ReactNode;
+  /**
+   * When `true`, wraps the table in a rounded, clipped container with an inset shadow overlay border. Defaults to `false`.
+   */
+  hasBorder?: boolean;
+  /**
+   * When `true`, the desktop column header row sticks to the top of the scroll container as the body scrolls. Defaults to `false`.
+   */
+  hasStickyHeader?: boolean;
+}

package/src/components/ComparisonTable/components/Cell/Cell.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import classNames from "classnames";
+
+import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
+import { Text } from "@arc-ui/components/Text";
+
+import styles from "../../ComparisonTable.module.css";
+
+export const Cell: React.FC<CellProps> = ({
+  children,
+  columnIndex = 0,
+  isLastRow = false,
+  ...props
+}) => {
+  const isHighlighted = columnIndex % 2 === 0;
+
+  return (
+    <div
+      role="cell"
+      className={classNames(styles.cell, {
+        [styles.highlighted]: isHighlighted,
+        [styles.highlightedBottom]: isHighlighted && isLastRow,
+      })}
+      {...filterAttrs(props)}
+    >
+      <Text>{children}</Text>
+    </div>
+  );
+};
+
+export interface CellProps {
+  /**
+   * Content rendered inside the content cell (text or an Arc primitive such as a tick/cross).
+   */
+  children?: React.ReactNode;
+  /**
+   * Zero-based index of the column this cell belongs to. Used to highlight every other column, starting with the first.
+   */
+  columnIndex?: number;
+  /**
+   * Whether this cell sits in the last row of the table. Highlighted cells in the last row get rounded bottom corners.
+   */
+  isLastRow?: boolean;
+}

package/src/components/ComparisonTable/components/ControlCell/ControlCell.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
+
+import styles from "../../ComparisonTable.module.css";
+
+export const ControlCell: React.FC<ControlCellProps> = ({
+  children,
+  ...props
+}) => (
+  <div role="cell" className={styles.controlCell} {...filterAttrs(props)}>
+    <div className={styles.controlCellContent}>{children}</div>
+  </div>
+);
+
+export interface ControlCellProps {
+  /**
+   * Control content rendered for this column.
+   */
+  children?: React.ReactNode;
+}