@arc-ui/community-components 3.15.0 → 3.17.0

package/src/components/ComparisonTable/components/SectionToggle/SectionToggle.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import classNames from "classnames";
+
+import { Heading, type HeadingLevel } from "@arc-ui/components/Heading";
+import { Icon } from "@arc-ui/components/Icon";
+import { BtIconChevronDownMid } from "@arc-ui/icons/BtIconChevronDownMid";
+
+import styles from "../../ComparisonTable.module.css";
+
+export const SectionToggle: React.FC<SectionToggleProps> = ({
+  heading,
+  headingLevel = "3",
+  isOpen,
+  onToggle,
+  controlsId,
+}) => (
+  <button
+    type="button"
+    className={classNames(styles.sectionToggle, {
+      [styles.sectionToggleOpen]: isOpen,
+    })}
+    aria-expanded={isOpen}
+    aria-controls={controlsId}
+    onClick={onToggle}
+  >
+    <span className={styles.sectionToggleContent}>
+      <Heading level={headingLevel} size="s">
+        {heading}
+      </Heading>
+      <span
+        className={classNames(styles.sectionChevron, {
+          [styles.sectionChevronOpen]: isOpen,
+        })}
+        aria-hidden="true"
+      >
+        <Icon icon={BtIconChevronDownMid} size={24} />
+      </span>
+    </span>
+  </button>
+);
+
+export interface SectionToggleProps {
+  /**
+   * Heading text/content shown in the toggle.
+   */
+  heading: React.ReactNode;
+  /**
+   * Heading level for the section heading. Defaults to `"3"`.
+   */
+  headingLevel?: HeadingLevel;
+  /**
+   * Whether the section is currently open; drives `aria-expanded` and the chevron rotation.
+   */
+  isOpen: boolean;
+  /**
+   * Called when the toggle is activated.
+   */
+  onToggle: () => void;
+  /**
+   * Id of the collapsible region this toggle controls, for `aria-controls`.
+   */
+  controlsId: string;
+}

package/src/components/ComparisonTable/components/SubHeaderCell/SubHeaderCell.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import classNames from "classnames";
+
+import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
+import { ButtonV2, type ButtonV2Props } from "@arc-ui/components/ButtonV2";
+import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
+
+import {
+  ProductCardPrice,
+  type ProductCardPriceProps,
+} from "../../../ProductCard/ProductCardPrice";
+import {
+  ProductCardPriceIncrease,
+  type ProductCardPriceIncreaseProps,
+} from "../../../ProductCard/ProductCardPriceIncrease";
+import styles from "../../ComparisonTable.module.css";
+
+export const SubHeaderCell: React.FC<SubHeaderCellProps> = ({
+  price,
+  priceIncrease,
+  button,
+  columnIndex = 0,
+  ...props
+}) => (
+  <div
+    role="cell"
+    className={classNames(styles.subHeaderCell, {
+      [styles.highlighted]: columnIndex % 2 === 0,
+    })}
+    {...filterAttrs(props)}
+  >
+    <ProductCardPrice {...price} />
+    {priceIncrease && (
+      <ProductCardPriceIncrease
+        heading="Increasing to:"
+        hideBorder
+        {...priceIncrease}
+      />
+    )}
+    <VerticalSpace />
+    {button && <ButtonV2 isFullWidth {...button} />}
+  </div>
+);
+
+export interface SubHeaderCellProps {
+  /**
+   * Price shown at the top of the sub-header cell (prefix, value, suffix).
+   */
+  price: ProductCardPriceProps;
+  /**
+   * Optional upcoming price-increase details rendered beneath the price.
+   */
+  priceIncrease?: ProductCardPriceIncreaseProps;
+  /**
+   * Optional call-to-action button rendered at the bottom of the cell. Rendered full-width.
+   */
+  button?: ButtonV2Props;
+  /**
+   * Zero-based index of the column this cell belongs to. Used to highlight every other column, starting with the first.
+   */
+  columnIndex?: number;
+}

package/src/components/ComparisonTable/index.ts

@@ -0,0 +1,22 @@
+export { ComparisonTable, type ComparisonTableProps } from "./ComparisonTable";
+export {
+  HeaderCell,
+  type HeaderCellProps,
+} from "./components/HeaderCell/HeaderCell";
+export {
+  SubHeaderCell,
+  type SubHeaderCellProps,
+} from "./components/SubHeaderCell/SubHeaderCell";
+export { Cell, type CellProps } from "./components/Cell/Cell";
+export {
+  ControlCell,
+  type ControlCellProps,
+} from "./components/ControlCell/ControlCell";
+export {
+  FeatureCell,
+  type FeatureCellProps,
+} from "./components/FeatureCell/FeatureCell";
+export { type ComparisonColumn } from "./types/comparison-column";
+export { type ComparisonRow } from "./types/comparison-row";
+export { type ComparisonSubRow } from "./types/comparison-sub-row";
+export { type ComparisonSection } from "./types/comparison-section";

package/src/components/ComparisonTable/types/comparison-column.ts

@@ -0,0 +1,22 @@
+import { type SubHeaderCellProps } from "../components/SubHeaderCell/SubHeaderCell";
+
+export interface ComparisonColumn {
+  /**
+   * Stable identifier for the column; used as a React key.
+   */
+  id: string;
+  /**
+   * Visible label rendered in the column header cell (e.g. a plan name).
+   */
+  label: string;
+  /**
+   * Optional promotional text displayed in a branded banner above the column
+   * header label. When set, the banner is rendered inside the header cell with
+   * a dark brand background.
+   */
+  promoted?: string;
+  /**
+   * Optional sub-header content (price, upcoming price increase, call-to-action) rendered in a row beneath the header. When any column defines this, the sub-header row is shown.
+   */
+  subheader?: SubHeaderCellProps;
+}

package/src/components/ComparisonTable/types/comparison-row.ts

@@ -0,0 +1,23 @@
+import React from "react";
+
+import { type ComparisonSubRow } from "./comparison-sub-row";
+import { type FeatureCellProps } from "../components/FeatureCell/FeatureCell";
+
+export interface ComparisonRow {
+  /**
+   * Feature label rendered as the row's full-width header, spanning all columns above the content row(s).
+   */
+  feature: FeatureCellProps;
+  /**
+   * One cell per column for the row's primary content row, in the same order as `columns`. Length MUST equal columns.length.
+   */
+  cells: React.ReactNode[];
+  /**
+   * Optional additional content rows rendered beneath the primary row, for the less common case where a feature spans multiple rows.
+   */
+  subRows?: ComparisonSubRow[];
+  /**
+   * Id of the `ComparisonSection` this row belongs to. Omit to render the row before all sections. An id with no matching section logs a dev warning and renders the row unsectioned.
+   */
+  sectionId?: string;
+}

package/src/components/ComparisonTable/types/comparison-section.ts

@@ -0,0 +1,39 @@
+import React from "react";
+
+import { type HeadingLevel } from "@arc-ui/components/Heading";
+
+import { type ComparisonRow } from "./comparison-row";
+
+export interface ComparisonSection {
+  /**
+   * Stable identifier for the section; used as a React key and to link the toggle to its content region for accessibility.
+   */
+  id: string;
+  /**
+   * Heading shown in the section's toggle button.
+   */
+  heading: React.ReactNode;
+  /**
+   * Heading level for the section heading, for correct document outline. Defaults to a sensible level.
+   */
+  headingLevel?: HeadingLevel;
+  /**
+   * Initial open state when the section is uncontrolled. Defaults to `false`.
+   */
+  defaultOpen?: boolean;
+  /**
+   * Controlled open state. When provided, the section is controlled and `onOpenChange` should update it.
+   */
+  open?: boolean;
+  /**
+   * Called with the next open state when the toggle is activated. Required for controlled usage; optional otherwise.
+   */
+  onOpenChange?: (open: boolean) => void;
+}
+
+/**
+ * Internal: a section paired with its rows after grouping. Not part of the public API.
+ */
+export type ResolvedSection = ComparisonSection & {
+  rows: ComparisonRow[];
+};

package/src/components/ComparisonTable/types/comparison-sub-row.ts

@@ -0,0 +1,8 @@
+import React from "react";
+
+export interface ComparisonSubRow {
+  /**
+   * One cell per column, in the same order as `columns`. Length MUST equal columns.length.
+   */
+  cells: React.ReactNode[];
+}

package/src/components/ComparisonTable/utils/group-rows.ts

@@ -0,0 +1,69 @@
+import { type ComparisonRow } from "../types/comparison-row";
+import {
+  type ComparisonSection,
+  type ResolvedSection,
+} from "../types/comparison-section";
+
+export interface GroupedRows {
+  /**
+   * Rows without a matching section, rendered before all sections, in input order.
+   */
+  unsectioned: ComparisonRow[];
+  /**
+   * Sections in `sections` array order, each with its rows in input order. Sections with no rows are dropped.
+   */
+  sections: ResolvedSection[];
+}
+
+/**
+ * Splits a flat list of rows into unsectioned rows and resolved sections.
+ * Rows are bucketed by `sectionId` in one pass, then sections are built by
+ * iterating `sections` (not the bucket keys) so section order follows the
+ * `sections` array. A `sectionId` with no matching section logs a dev-only
+ * warning and the row renders unsectioned, so rows are never lost.
+ */
+export const groupRows = (
+  rows: ComparisonRow[] = [],
+  sections: ComparisonSection[] = [],
+): GroupedRows => {
+  const knownIds = new Set(sections.map((section) => section.id));
+  const rowsBySection = new Map<string, ComparisonRow[]>();
+  const unsectioned: ComparisonRow[] = [];
+
+  rows.forEach((row) => {
+    const { sectionId } = row;
+
+    if (sectionId === undefined) {
+      unsectioned.push(row);
+      return;
+    }
+
+    if (!knownIds.has(sectionId)) {
+      if (process.env.NODE_ENV !== "production") {
+        // eslint-disable-next-line no-console
+        console.warn(
+          `ComparisonTable: row sectionId "${sectionId}" does not match any section; rendering it unsectioned.`,
+        );
+      }
+      unsectioned.push(row);
+      return;
+    }
+
+    const bucket = rowsBySection.get(sectionId);
+    if (bucket) {
+      bucket.push(row);
+    } else {
+      rowsBySection.set(sectionId, [row]);
+    }
+  });
+
+  const resolvedSections: ResolvedSection[] = [];
+  sections.forEach((section) => {
+    const sectionRows = rowsBySection.get(section.id);
+    if (sectionRows?.length) {
+      resolvedSections.push({ ...section, rows: sectionRows });
+    }
+  });
+
+  return { unsectioned, sections: resolvedSections };
+};

package/src/components/ComparisonTable/utils/use-section-state.ts

@@ -0,0 +1,45 @@
+import { useCallback, useState } from "react";
+
+export interface UseSectionStateOptions {
+  /**
+   * Initial open state when uncontrolled.
+   */
+  defaultOpen?: boolean;
+  /**
+   * Controlled open state. When defined, the hook is controlled.
+   */
+  open?: boolean;
+  /**
+   * Called with the next open state whenever the section is toggled.
+   */
+  onOpenChange?: (open: boolean) => void;
+}
+
+/**
+ * Optional-controlled open state for a section. When `open` is provided the
+ * section is controlled and the internal state is ignored; otherwise the hook
+ * manages its own state seeded by `defaultOpen`. `onOpenChange` is always
+ * called with the next value when `toggle` runs.
+ */
+export const useSectionState = ({
+  defaultOpen = false,
+  open,
+  onOpenChange,
+}: UseSectionStateOptions) => {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+
+  const isControlled = open !== undefined;
+  const isOpen = isControlled ? open : internalOpen;
+
+  const toggle = useCallback(() => {
+    const next = !isOpen;
+
+    if (!isControlled) {
+      setInternalOpen(next);
+    }
+
+    onOpenChange?.(next);
+  }, [isControlled, isOpen, onOpenChange]);
+
+  return { isOpen, toggle };
+};

package/src/components/FeaturePost/FeaturePost.module.css

@@ -1,5 +1,25 @@
+/* stylelint-disable selector-pseudo-class-no-unknown */
 @import url("@arc-ui/tokens-arc/dist/custom-media.css");
 
+.labelContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+}
+
+.labelText {
+  max-width: 100%;
+  min-width: 0;
+  font: var(--sem-type-label-overline);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.labelWordWrap {
+  hyphens: auto;
+  overflow-wrap: break-word;
+}
+
 .labelDate {
   padding-top: var(--sem-space-padding-20);
   text-transform: uppercase;
@@ -43,8 +63,10 @@
     width: 50%;
   }
 
-  .labelDate {
-    padding-left: var(--sem-space-padding-70);
+  .labelContainer {
+    flex-direction: row;
+    flex-wrap: wrap;
+    column-gap: var(--sem-space-padding-70);
   }
 }
 

package/src/components/FeaturePost/FeaturePost.tsx

@@ -57,31 +57,29 @@ export const FeaturePost: React.FC<FeaturePostProps> = ({
       <div className={styles.col}>
         <div className={styles.contentContainer}>
           {label && (
-            <Grid isGutterless isFluid>
-              <GridRow align="baseline">
-                <GridCol xs={12} m="auto">
-                  <Heading size="xxs" fontStyle="overline">
-                    {label.text}
-                  </Heading>
-                </GridCol>
-                <GridCol xs={12} m="auto">
-                  <div className={styles.labelDate}>
-                    <Text size="xs" tone="muted">
-                      {isDate(label.date) ? (
-                        <time
-                          dateTime={format(label.date as Date, "yyyy-MM-dd")}
-                        >
-                          {format(label.date as Date, "d MMMM yyyy")}
-                        </time>
-                      ) : (
-                        <span>{label.date as string}</span>
-                      )}
-                    </Text>
-                  </div>
-                </GridCol>
-              </GridRow>
+            <>
+              <div className={styles.labelContainer}>
+                <span
+                  className={classNames(styles.labelText, {
+                    [styles.labelWordWrap]: isHeadingWordWrap,
+                  })}
+                >
+                  {label.text}
+                </span>
+                <div className={styles.labelDate}>
+                  <Text size="xs" tone="muted">
+                    {isDate(label.date) ? (
+                      <time dateTime={format(label.date as Date, "yyyy-MM-dd")}>
+                        {format(label.date as Date, "d MMMM yyyy")}
+                      </time>
+                    ) : (
+                      <span>{label.date as string}</span>
+                    )}
+                  </Text>
+                </div>
+              </div>
               <VerticalSpace size="24" />
-            </Grid>
+            </>
           )}
 
           <Heading
@@ -119,7 +117,10 @@ export const FeaturePost: React.FC<FeaturePostProps> = ({
               )}
               <VerticalSpace size="40" />
 
-              <ButtonV2 buttonStyle="secondary" {...footer.button} />
+              <ButtonV2
+                {...footer.button}
+                buttonStyle={footer.button.buttonStyle ?? "secondary"}
+              />
             </>
           )}
 

package/src/components/FeaturePost/types/feature-post-cta-footer.ts

@@ -1,12 +1,13 @@
-import { type ButtonProps } from "@arc-ui/components/Button";
+import { type ButtonV2Props } from "@arc-ui/components/ButtonV2";
 
 import { type AuthorProps } from "../../Author/Author";
 
 export interface FeaturePostCtaFooter {
   type: "cta";
+  /** CTA button options. The button style defaults to `secondary`. */
   button: Pick<
-    ButtonProps,
-    "label" | "onClick" | "href" | "target" | "ariaLabel"
+    ButtonV2Props,
+    "label" | "onClick" | "href" | "target" | "ariaLabel" | "buttonStyle"
   >;
   author?: AuthorProps;
 }

package/src/components/Highlights/Highlights.tsx

@@ -50,22 +50,18 @@ export const Highlights: React.FC<HighlightsProps> = ({
         <>
           <VerticalSpace size="24" />
           <ButtonV2
-            label={cta.label}
-            href={cta.href}
-            onClick={cta.onClick}
-            target={cta.target}
+            {...cta}
             size="m"
-            ariaLabel={cta.ariaLabel}
-            buttonStyle={cta.buttonStyle}
+            buttonStyle={cta.buttonStyle ?? "secondary"}
             icon={
               cta.buttonStyle === "compact"
                 ? (cta.icon ?? BtIconArrowRightFill)
-                : undefined
+                : cta.icon
             }
             iconActive={
               cta.buttonStyle === "compact"
                 ? (cta.iconActive ?? BtIconArrowRightFill)
-                : undefined
+                : cta.iconActive
             }
             iconPosition={cta.iconPosition ?? "beforeText"}
           />
@@ -91,28 +87,5 @@ export interface HighlightsProps extends Omit<SectionHeadingProps, "isPadded"> {
    * Optional CTA rendered at the end of Highlights.
    * Only ONE CTA is allowed.
    */
-  cta?: HighlightsCTAProps;
+  cta?: ButtonV2Props;
 }
-
-/**
- * CTA configuration for Highlights
- */
-export type HighlightsCTAProps = Pick<
-  ButtonV2Props,
-  "label" | "href" | "onClick" | "iconPosition" | "ariaLabel" | "target"
-> & {
-  /**
-   * Allowed button styles only.
-   * Primary is intentionally NOT supported.
-   */
-  buttonStyle: "secondary" | "compact";
-
-  /**
-   * Icon override & Active icon override
-   * - undefined → uses default BtIconArrowRightFill for compact style
-   * - null → icon disabled
-   * - string → custom icon
-   */
-  icon?: string | null;
-  iconActive?: string | null;
-};

package/src/components/ProductCard/ProductCard.tsx

@@ -75,39 +75,39 @@ export const ProductCard: React.FC<ProductCardProps> = ({
 
 export interface ProductCardProps {
   /*
-  * Product heading displayed at the top of the card 
-  */
+   * Product heading displayed at the top of the card
+   */
   heading: string;
 
   /*
-  * Semantic heading level (e.g. "2", "3") for accessibility 
-  */
+   * Semantic heading level (e.g. "2", "3") for accessibility
+   */
   headingLevel: HeadingLevel;
 
   /*
-  * Content rendered in the top section below the heading (e.g. ProductCardPrice, Text, ProductCardPriceIncrease) 
-  */
+   * Content rendered in the top section below the heading (e.g. ProductCardPrice, Text, ProductCardPriceIncrease)
+   */
   topSlot?: ReactNode;
 
   /*
-  * Content rendered in the bottom section of the card (e.g. ProductCardBenefits) 
-  */
+   * Content rendered in the bottom section of the card (e.g. ProductCardBenefits)
+   */
   bottomSlot?: ReactNode;
 
   /*
-  * Optional promotional content displayed as a banner above the card. Renders nothing when not provided. 
-  */
+   * Optional promotional content displayed as a banner above the card. Renders nothing when not provided.
+   */
   promoted?: {
     content: ReactNode;
     background: SurfaceBackgroundColor;
   };
   /*
-  * Whether to show a horizontal rule divider between the top and bottom sections of the card 
-  */
+   * Whether to show a horizontal rule divider between the top and bottom sections of the card
+   */
   divider?: boolean;
 
   /*
-  * Configuration for the card's call-to-action button. Accepts all ButtonV2 props except `buttonStyle` and `isFullWidth`, which are set internally. 
-  */
+   * Configuration for the card's call-to-action button. Accepts all ButtonV2 props except `buttonStyle` and `isFullWidth`, which are set internally.
+   */
   button?: Omit<ButtonV2Props, "buttonStyle" | "isFullWidth">;
 }

package/src/components/ProductCard/ProductCardPrice/ProductCardPrice.tsx

@@ -15,9 +15,17 @@ export const ProductCardPrice: React.FC<ProductCardPriceProps> = ({
           {prefix}
         </Text>
       )}
-      <Heading color="brand" size="m">
-        {value}
-      </Heading>
+      <div style={{ display: "flex", alignItems: "baseline" }}>
+        <Heading color="brand" size="s">
+          {value.slice(0, 1)}
+        </Heading>
+        <Heading color="brand" size="l">
+          {value.slice(1, -3)}
+        </Heading>
+        <Heading color="brand" size="s">
+          {value.slice(-3)}
+        </Heading>
+      </div>
       {suffix && (
         <Text tone="muted" size="s">
           {suffix}

package/src/components/ProductCard/ProductCardPriceIncrease/ProductCardPriceIncrease.module.css

@@ -16,8 +16,7 @@
 }
 
 .priceIncreaseItem {
-  display: flex;
-  gap: 8px;
+  display: block;
 }
 
 .priceIncreaseList li:not(:last-child) {

package/src/components/ProductCard/ProductCardPriceIncrease/ProductCardPriceIncrease.tsx

@@ -5,7 +5,12 @@ import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
 
 export const ProductCardPriceIncrease: React.FC<
   ProductCardPriceIncreaseProps
-> = ({ heading = "Price increasing to", headingLevel = "4", items = [] }) => {
+> = ({
+  heading = "Price increasing to",
+  headingLevel = "4",
+  items = [],
+  hideBorder = false,
+}) => {
   return (
     <>
       <VerticalSpace size="16" />
@@ -14,11 +19,14 @@ export const ProductCardPriceIncrease: React.FC<
       </Heading>
       <VerticalSpace size="12" />
       <div className={styles.priceIncreaseWrapper}>
-        <div className={styles.priceIncreaseBorder} />
+        {!hideBorder && <div className={styles.priceIncreaseBorder} />}
         <ul className={styles.priceIncreaseList}>
           {items.map((item, index) => (
             <li key={index} className={styles.priceIncreaseItem}>
-              {item}
+              <>
+                <b>{item.slice(0, 6)}</b>
+                <>{item.slice(6)}</>
+              </>
             </li>
           ))}
         </ul>
@@ -36,4 +44,7 @@ export interface ProductCardPriceIncreaseProps {
 
   /** List of price increase entries (e.g. ["£48.99 by April 2027"]) */
   items: string[];
+
+  /** Optional prop to hide the left border */
+  hideBorder?: boolean;
 }