@arc-ui/community-components 3.15.0 → 3.17.0

package/src/components/ComparisonTable/components/DesktopRow/DesktopRow.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import classNames from "classnames";
+
+import { Text } from "@arc-ui/components/Text";
+
+import { FeatureCell } from "../FeatureCell/FeatureCell";
+import styles from "../../ComparisonTable.module.css";
+import { type ComparisonRow } from "../../types/comparison-row";
+
+/**
+ * The same plans are highlighted in both layouts: plan index 0, 2, 4, ... (the
+ * 1st, 3rd, 5th plan). On desktop the leading feature column shifts these into
+ * the 2nd, 4th, ... visual grid columns, but it's the same plan as on mobile.
+ */
+const isPlanHighlighted = (planIndex: number) => planIndex % 2 === 0;
+
+export const DesktopRow: React.FC<DesktopRowProps> = ({
+  row,
+  isLastRow = false,
+}) => (
+  <div
+    role="row"
+    className={classNames(styles.desktopRow, {
+      [styles.isLastRow]: isLastRow,
+    })}
+  >
+    <div role="rowheader" className={styles.desktopFeatureCell}>
+      <FeatureCell
+        icon={row.feature.icon}
+        title={row.feature.title}
+        description={row.feature.description}
+        popoverContent={row.feature.popoverContent}
+      />
+    </div>
+    {row.cells.map((cell, cellIndex) => (
+      <div
+        key={`desktop-cell-${cellIndex}`}
+        role="cell"
+        className={classNames(styles.cell, {
+          [styles.highlighted]: isPlanHighlighted(cellIndex),
+          [styles.highlightedBottom]: isPlanHighlighted(cellIndex) && isLastRow,
+        })}
+      >
+        <Text>{cell}</Text>
+      </div>
+    ))}
+  </div>
+);
+
+export interface DesktopRowProps {
+  /**
+   * The row to render as a single desktop row: feature in the left-hand column, a value per plan column.
+   */
+  row: ComparisonRow;
+  /**
+   * Whether this is the last row of the whole table, so its highlighted cells round their bottom corners.
+   */
+  isLastRow?: boolean;
+}

package/src/components/ComparisonTable/components/DesktopTable/DesktopTable.tsx

@@ -0,0 +1,150 @@
+import React from "react";
+import classNames from "classnames";
+
+import { Heading } from "@arc-ui/components/Heading";
+import { Surface } from "@arc-ui/components/Surface";
+import { Text } from "@arc-ui/components/Text";
+import { VisuallyHidden } from "@arc-ui/components/VisuallyHidden";
+
+import { DesktopRow } from "../DesktopRow/DesktopRow";
+import { Section } from "../Section/Section";
+import { SubHeaderCell } from "../SubHeaderCell/SubHeaderCell";
+import styles from "../../ComparisonTable.module.css";
+import { type ComparisonColumn } from "../../types/comparison-column";
+import { type ComparisonRow } from "../../types/comparison-row";
+import { type ResolvedSection } from "../../types/comparison-section";
+
+/**
+ * The same plans are highlighted in both layouts: plan index 0, 2, 4, ... (the
+ * 1st, 3rd, 5th plan). On desktop the leading feature column shifts these into
+ * the 2nd, 4th, ... visual grid columns, but it's the same plan as on mobile.
+ */
+const isPlanHighlighted = (planIndex: number) => planIndex % 2 === 0;
+
+export const DesktopTable: React.FC<DesktopTableProps> = ({
+  columns,
+  rows,
+  sections,
+  controls,
+  hasStickyHeader,
+  className,
+}) => {
+  const hasSubheader = columns.some((column) => column.subheader);
+
+  return (
+    <div
+      role="table"
+      className={classNames(styles.desktopTable, className, {
+        [styles.desktopTableSticky]: hasStickyHeader,
+      })}
+      style={{ "--comparison-columns": columns.length } as React.CSSProperties}
+    >
+      {/* Header row: feature corner + plan headers */}
+      <div
+        role="row"
+        className={classNames(styles.desktopHeaderRow, {
+          [styles.stickyHeader]: hasStickyHeader,
+        })}
+      >
+        <div role="columnheader" className={styles.desktopFeatureHeader}>
+          <VisuallyHidden>Features</VisuallyHidden>
+        </div>
+        {columns.map((column, index) => (
+          <div
+            key={column.id}
+            role="columnheader"
+            className={classNames(styles.desktopHeaderCell, {
+              [styles.highlighted]: isPlanHighlighted(index),
+              [styles.highlightedTop]: isPlanHighlighted(index),
+            })}
+          >
+            {column.promoted && (
+              <div className={styles.headerCellPromoted}>
+                <Surface
+                  background={"dark-brand-01"}
+                  paddingVertical="16"
+                  paddingHorizontal="24"
+                >
+                  <VisuallyHidden>Promotional offer. </VisuallyHidden>
+                  <Text size="s">{column.promoted}</Text>
+                </Surface>
+              </div>
+            )}
+            <Heading size="m">{column.label}</Heading>
+          </div>
+        ))}
+      </div>
+
+      {/* Controls (in the feature column) + sub-header cells, on one row */}
+      {(controls || hasSubheader) && (
+        <div role="row" className={styles.desktopSubHeaderRow}>
+          <div
+            className={styles.desktopControlsCell}
+            aria-label="comparison table controls"
+          >
+            {controls}
+          </div>
+          {columns.map((column, index) => (
+            <SubHeaderCell
+              key={column.id}
+              columnIndex={isPlanHighlighted(index) ? 0 : 1}
+              {...(column.subheader ?? { price: { value: "" } })}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Feature rows: feature label column + value cells */}
+      {rows.map((row, rowIndex) => (
+        <DesktopRow
+          key={`desktop-row-${rowIndex}`}
+          row={row}
+          isLastRow={sections.length === 0 && rowIndex === rows.length - 1}
+        />
+      ))}
+
+      {/* Collapsible sections */}
+      {sections.map((section, index) => (
+        <Section
+          key={section.id}
+          section={section}
+          isLastSection={index === sections.length - 1}
+          renderRow={(row, rowIndex, isLast) => (
+            <DesktopRow
+              key={`desktop-section-row-${rowIndex}`}
+              row={row}
+              isLastRow={isLast}
+            />
+          )}
+        />
+      ))}
+    </div>
+  );
+};
+
+export interface DesktopTableProps {
+  /**
+   * Column definitions driving the plan header cells and the number of value cells per row.
+   */
+  columns: ComparisonColumn[];
+  /**
+   * Unsectioned rows, rendered before sections; each renders as a single row with the feature in the left-hand column and a value per plan column.
+   */
+  rows: ComparisonRow[];
+  /**
+   * Resolved collapsible sections (empty ones already removed), rendered after the unsectioned rows.
+   */
+  sections: ResolvedSection[];
+  /**
+   * Optional controls rendered in the left-hand feature column, alongside the sub-header row.
+   */
+  controls?: React.ReactNode;
+  /**
+   * When `true`, the header row sticks to the top of the scroll container as the body scrolls.
+   */
+  hasStickyHeader?: boolean;
+  /**
+   * Additional class applied to the root, used by the parent to toggle visibility per breakpoint.
+   */
+  className?: string;
+}

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

@@ -0,0 +1,56 @@
+@import url("@arc-ui/tokens-arc/dist/custom-media.css");
+
+.packageCell {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  max-width: 300px;
+  padding: 16px 24px 16px 0;
+}
+
+.packageCellPopoverDesktop {
+  display: none;
+}
+
+.packageCellTitle {
+  display: flex;
+  flex-direction: column;
+  column-gap: var(--sem-space-gap-40);
+}
+
+.packageCellHeading {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+}
+
+@media (--arc-custom-media-min-width-l-px) {
+  .packageCellTitle {
+    flex-direction: row;
+  }
+
+  .packageCellHeading {
+    padding-right: 24px;
+  }
+}
+
+@media (--arc-custom-media-min-width-s-px) {
+  .packageCellPopoverDesktop {
+    display: block;
+    position: absolute;
+    top: 20px;
+    right: 24px;
+  }
+
+  .packageCellPopoverMobile {
+    display: none;
+  }
+}
+
+.packageCellPopover {
+  display: flex;
+  height: 100%;
+  justify-content: flex-start;
+  padding-top: var(--sem-space-gap-40);
+}

package/src/components/ComparisonTable/components/FeatureCell/FeatureCell.tsx

@@ -0,0 +1,96 @@
+import React from "react";
+
+import { Icon } from "@arc-ui/components/Icon";
+import { Heading } from "@arc-ui/components/Heading";
+import { Text } from "@arc-ui/components/Text";
+import { BtIconInfo } from "@arc-ui/icons/BtIconInfo";
+import { Popover } from "@arc-ui/components/Popover";
+
+import styles from "./FeatureCell.module.css";
+
+export const FeatureCell: React.FC<FeatureCellProps> = ({
+  icon,
+  title,
+  description,
+  popoverContent,
+}) => (
+  <div className={styles.packageCell}>
+    <div className={styles.packageCellTitle}>
+      <div style={{ width: 32 }}>
+        <Icon icon={icon} size={32} color="brand" />
+      </div>
+      <div className={styles.packageCellText}>
+        <div className={styles.packageCellHeading}>
+          <Heading size="xs" isWordWrap>
+            {title}
+          </Heading>
+          {popoverContent && (
+            <div className={styles.packageCellPopoverMobile}>
+              <Popover
+                arrow
+                background="white"
+                constrainToViewport
+                content={<Text>{popoverContent}</Text>}
+                maxWidth={300}
+                side="top"
+              >
+                <Icon
+                  icon={BtIconInfo}
+                  size={16}
+                  color="brand"
+                  label={`More information about ${title}`}
+                />
+              </Popover>
+            </div>
+          )}{" "}
+        </div>
+        {description && (
+          <Text size="xs" tone="muted">
+            {description}
+          </Text>
+        )}
+      </div>
+    </div>
+    {popoverContent && (
+      <div className={styles.packageCellPopoverDesktop}>
+        <Popover
+          arrow
+          background="white"
+          constrainToViewport
+          content={<Text>{popoverContent}</Text>}
+          side="bottom"
+          align="start"
+        >
+          <Icon
+            icon={BtIconInfo}
+            size={16}
+            color="brand"
+            label={`More information about ${title}`}
+          />
+        </Popover>
+      </div>
+    )}
+  </div>
+);
+
+export interface FeatureCellProps {
+  /**
+   * Icon shown alongside the package name.
+   */
+  icon: string;
+
+  /**
+   * Package / plan title.
+   */
+  title: string;
+
+  /**
+   * Optional supporting copy shown beneath the title.
+   */
+  description?: string;
+
+  /**
+   * Optional popover content shown when the user interacts with the info icon.
+   */
+  popoverContent?: string | React.ReactNode;
+}

package/src/components/ComparisonTable/components/HeaderCell/HeaderCell.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import classNames from "classnames";
+
+import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
+import { Heading } from "@arc-ui/components/Heading";
+import { Surface } from "@arc-ui/components/Surface";
+import { Text } from "@arc-ui/components/Text";
+import { VisuallyHidden } from "@arc-ui/components/VisuallyHidden";
+
+import styles from "../../ComparisonTable.module.css";
+
+export const HeaderCell: React.FC<HeaderCellProps> = ({
+  children,
+  columnIndex = 0,
+  promoted,
+  ...props
+}) => (
+  <div
+    role="columnheader"
+    className={classNames(styles.headerCell, {
+      [styles.highlighted]: columnIndex % 2 === 0,
+      [styles.highlightedTop]: columnIndex % 2 === 0,
+    })}
+    {...filterAttrs(props)}
+  >
+    {promoted && (
+      <div className={styles.headerCellPromoted}>
+        <Surface
+          background={"dark-brand-01"}
+          paddingVertical="16"
+          paddingHorizontal="24"
+        >
+          <VisuallyHidden>Promotional offer. </VisuallyHidden>
+          <Text size="s">{promoted}</Text>
+        </Surface>
+      </div>
+    )}
+    {children != null && (
+      <Heading size="m" isWordWrap>
+        {children}
+      </Heading>
+    )}
+  </div>
+);
+
+export interface HeaderCellProps {
+  /**
+   * Content rendered inside the column header cell (typically a column label).
+   */
+  children?: string;
+  /**
+   * Zero-based index of the column this header cell belongs to. Used to highlight every other column, starting with the first.
+   */
+  columnIndex?: number;
+  /**
+   * Optional promotional text displayed in a branded banner above the column label.
+   */
+  promoted?: string;
+}

package/src/components/ComparisonTable/components/MobileRow/MobileRow.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import classNames from "classnames";
+
+import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
+
+import { Cell } from "../Cell/Cell";
+import { FeatureCell } from "../FeatureCell/FeatureCell";
+import styles from "../../ComparisonTable.module.css";
+import { type ComparisonRow } from "../../types/comparison-row";
+
+/**
+ * Renders a single content row of cells for the mobile layout.
+ */
+const renderRow = (
+  cells: React.ReactNode[],
+  key: string,
+  isLastRow: boolean,
+) => (
+  <div key={key} className={styles.row}>
+    {cells.map((cell, index) => (
+      <Cell key={`cell-${index}`} columnIndex={index} isLastRow={isLastRow}>
+        {cell}
+      </Cell>
+    ))}
+  </div>
+);
+
+export const MobileRow: React.FC<MobileRowProps> = ({
+  row,
+  isLastGroup = false,
+  ...props
+}) => {
+  const subRows = row.subRows ?? [];
+  const hasSubRows = subRows.length > 0;
+
+  return (
+    <div
+      role="row"
+      className={classNames(styles.rowGroup, {
+        [styles.isLastRow]: isLastGroup,
+      })}
+      {...filterAttrs(props)}
+    >
+      <div className={styles.featureRow}>
+        <div role="rowheader" className={styles.featureRowHeader}>
+          <div className={styles.featureRowHeaderContent}>
+            <FeatureCell
+              icon={row.feature.icon}
+              title={row.feature.title}
+              description={row.feature.description}
+              popoverContent={row.feature.popoverContent}
+            />
+          </div>
+        </div>
+      </div>
+      {renderRow(row.cells, "primary-row", isLastGroup && !hasSubRows)}
+      {subRows.map((subRow, index) =>
+        renderRow(
+          subRow.cells,
+          `row-${index}`,
+          isLastGroup && index === subRows.length - 1,
+        ),
+      )}
+    </div>
+  );
+};
+
+export interface MobileRowProps {
+  /**
+   * The row to render: a full-width feature header followed by its content row(s).
+   */
+  row: ComparisonRow;
+  /**
+   * Whether this is the last row in the table. Used so the final content row can round its highlighted cells.
+   */
+  isLastGroup?: boolean;
+}

package/src/components/ComparisonTable/components/MobileTable/MobileTable.tsx

@@ -0,0 +1,103 @@
+import React from "react";
+import classNames from "classnames";
+
+import { HeaderCell } from "../HeaderCell/HeaderCell";
+import { ControlCell } from "../ControlCell/ControlCell";
+import { MobileRow } from "../MobileRow/MobileRow";
+import { Section } from "../Section/Section";
+import { SubHeaderCell } from "../SubHeaderCell/SubHeaderCell";
+import styles from "../../ComparisonTable.module.css";
+import { type ComparisonColumn } from "../../types/comparison-column";
+import { type ComparisonRow } from "../../types/comparison-row";
+import { type ResolvedSection } from "../../types/comparison-section";
+
+export const MobileTable: React.FC<MobileTableProps> = ({
+  columns,
+  rows,
+  sections,
+  controls,
+  className,
+}) => (
+  <div
+    role="table"
+    className={classNames(styles.table, className)}
+    style={{ "--comparison-columns": columns.length } as React.CSSProperties}
+  >
+    <div role="row" className={styles.headerRow}>
+      {columns.map((column, index) => (
+        <HeaderCell
+          key={column.id}
+          columnIndex={index}
+          promoted={column.promoted}
+        >
+          {column.label}
+        </HeaderCell>
+      ))}
+    </div>
+    {controls && (
+      <div
+        role="row"
+        className={styles.controlRow}
+        aria-label="comparison table controls"
+      >
+        <ControlCell>{controls}</ControlCell>
+      </div>
+    )}
+    {columns.some((column) => column.subheader) && (
+      <div role="row" className={styles.subHeaderRow}>
+        {columns.map((column, index) => (
+          <SubHeaderCell
+            key={column.id}
+            columnIndex={index}
+            {...(column.subheader ?? { price: { value: "" } })}
+          />
+        ))}
+      </div>
+    )}
+
+    {rows.map((row, index) => (
+      <MobileRow
+        key={`row-group-${index}`}
+        row={row}
+        isLastGroup={sections.length === 0 && index === rows.length - 1}
+      />
+    ))}
+    {sections.map((section, index) => (
+      <Section
+        key={section.id}
+        section={section}
+        isLastSection={index === sections.length - 1}
+        renderRow={(row, rowIndex, isLast) => (
+          <MobileRow
+            key={`section-group-${rowIndex}`}
+            row={row}
+            isLastGroup={isLast}
+          />
+        )}
+      />
+    ))}
+  </div>
+);
+
+export interface MobileTableProps {
+  /**
+   * Column definitions driving the header cells and the number of content cells per row.
+   */
+  columns: ComparisonColumn[];
+  /**
+   * Unsectioned rows, rendered before sections; each row has a full-width feature header followed by its content row(s).
+   */
+  rows: ComparisonRow[];
+  /**
+   * Resolved collapsible sections (empty ones already removed), rendered after the unsectioned rows.
+   */
+  sections: ResolvedSection[];
+  /**
+   * Optional controls rendered in a single full-width cell beneath the header, spanning all columns.
+   */
+  controls?: React.ReactNode;
+  /**
+   * Additional class applied to the root, used by the parent to toggle visibility per breakpoint.
+   */
+  className?: string;
+}

package/src/components/ComparisonTable/components/Section/Section.tsx

@@ -0,0 +1,75 @@
+import React, { useId } from "react";
+import classNames from "classnames";
+
+import { SectionToggle } from "../SectionToggle/SectionToggle";
+import styles from "../../ComparisonTable.module.css";
+import { type ResolvedSection } from "../../types/comparison-section";
+import { type ComparisonRow } from "../../types/comparison-row";
+import { useSectionState } from "../../utils/use-section-state";
+
+export const Section: React.FC<SectionProps> = ({
+  section,
+  isLastSection,
+  renderRow,
+}) => {
+  const regionId = useId();
+  const { isOpen, toggle } = useSectionState({
+    defaultOpen: section.defaultOpen,
+    open: section.open,
+    onOpenChange: section.onOpenChange,
+  });
+
+  const lastRowIndex = section.rows.length - 1;
+
+  return (
+    <div role="rowgroup">
+      <div
+        role="row"
+        className={classNames(styles.sectionToggleRow, {
+          [styles.isLastRow]: isLastSection === true && !isOpen,
+        })}
+      >
+        <SectionToggle
+          heading={section.heading}
+          headingLevel={section.headingLevel}
+          isOpen={isOpen}
+          onToggle={toggle}
+          controlsId={regionId}
+        />
+      </div>
+      {isOpen && (
+        <div id={regionId} className={styles.sectionContent}>
+          {section.rows.map((row, index) =>
+            renderRow(
+              row,
+              index,
+              isLastSection === true && index === lastRowIndex,
+            ),
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export interface SectionProps {
+  /**
+   * The section to render: a toggle row and its collapsible rows.
+   */
+  section: ResolvedSection;
+  /**
+   * Whether this is the last section in the table. When open, its final row
+   * rounds its highlighted cells; when closed, its toggle row is the table's
+   * last row and drops its bottom divider.
+   */
+  isLastSection?: boolean;
+  /**
+   * Render callback for each row in the section. The caller decides the
+   * layout-specific row component (e.g. `MobileRow` or `DesktopRow`).
+   */
+  renderRow: (
+    row: ComparisonRow,
+    index: number,
+    isLast: boolean,
+  ) => React.ReactNode;
+}