@arc-ui/community-components 3.13.0 → 3.14.0

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

@@ -0,0 +1,39 @@
+import React from "react";
+import styles from "./ProductCardPriceIncrease.module.css";
+import { Heading, type HeadingLevel } from "@arc-ui/components/Heading";
+import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
+
+export const ProductCardPriceIncrease: React.FC<
+  ProductCardPriceIncreaseProps
+> = ({ heading = "Price increasing to", headingLevel = "4", items = [] }) => {
+  return (
+    <>
+      <VerticalSpace size="16" />
+      <Heading size="xs" level={headingLevel}>
+        {heading}
+      </Heading>
+      <VerticalSpace size="12" />
+      <div className={styles.priceIncreaseWrapper}>
+        <div className={styles.priceIncreaseBorder} />
+        <ul className={styles.priceIncreaseList}>
+          {items.map((item, index) => (
+            <li key={index} className={styles.priceIncreaseItem}>
+              {item}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </>
+  );
+};
+
+export interface ProductCardPriceIncreaseProps {
+  /** Heading displayed above the price increase list */
+  heading?: string;
+
+  /** heading level for accessibility */
+  headingLevel?: HeadingLevel;
+
+  /** List of price increase entries (e.g. ["£48.99 by April 2027"]) */
+  items: string[];
+}

package/src/components/ProductCard/ProductCardPriceIncrease/index.ts

@@ -0,0 +1,4 @@
+export {
+  ProductCardPriceIncrease,
+  type ProductCardPriceIncreaseProps,
+} from "./ProductCardPriceIncrease";

package/src/components/ProductCard/index.ts

@@ -0,0 +1,13 @@
+export { ProductCard, type ProductCardProps } from "./ProductCard";
+export {
+  ProductCardBenefits,
+  type ProductCardBenefitsProps,
+} from "./ProductCardBenefits";
+export {
+  ProductCardPriceIncrease,
+  type ProductCardPriceIncreaseProps,
+} from "./ProductCardPriceIncrease";
+export {
+  ProductCardPrice,
+  type ProductCardPriceProps,
+} from "./ProductCardPrice";

package/src/components/ProductCardGrid/ProductCardGrid.tsx

@@ -0,0 +1,162 @@
+import React, { useState, useRef, useId } from "react";
+
+import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
+
+import { SectionHeading, SectionHeadingProps } from "../SectionHeading";
+import {
+  Tabs,
+  TabsList,
+  TabsItem,
+  TabsContent,
+  type TabsItemProps,
+} from "@arc-ui/components/Tabs";
+import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
+import { ButtonV2 } from "@arc-ui/components/ButtonV2";
+import { Rule } from "@arc-ui/components/Rule";
+import { Align } from "@arc-ui/components/Align";
+
+import { CardGrid } from "./components/CardGrid/CardGrid";
+
+export const ProductCardGrid: React.FC<ProductCardGridProps> = ({
+  id,
+  isHeadingWordWrap,
+  heading,
+  content,
+  headingLevel,
+  tabs,
+  expanded = true,
+  hideTabs = false,
+  ...props
+}) => {
+  const [cardsRevealed, setCardsRevealed] = useState(expanded);
+  const [activeTab, setActiveTab] = useState(tabs?.[0]?.value);
+
+  const fourthCardRef = useRef<HTMLLIElement>(null);
+
+  const cardContext = useId();
+
+  const activeCards = tabs?.find((tab) => tab.value === activeTab)?.cards;
+
+  const hasMoreCards = (activeCards?.length ?? 0) > 3;
+  const remainingCards = Math.max((activeCards?.length ?? 0) - 3, 0);
+
+  const showMore = () => {
+    setCardsRevealed(true);
+    setTimeout(() => {
+      fourthCardRef.current?.focus();
+    }, 0);
+  };
+
+  const showLess = () => {
+    setCardsRevealed(false);
+  };
+
+  return (
+    <div {...filterAttrs(props)}>
+      <SectionHeading
+        id={id}
+        isHeadingWordWrap={isHeadingWordWrap}
+        heading={heading}
+        content={content}
+        headingLevel={headingLevel}
+        isPadded
+      />
+
+      {tabs && !hideTabs && (
+        <Tabs
+          defaultValue={tabs[0]?.value}
+          onValueChange={(value) => {
+            setActiveTab(value);
+          }}
+        >
+          <TabsList type="standard">
+            {tabs.map((tab) => (
+              <TabsItem
+                key={tab.value}
+                label={tab.label}
+                value={tab.value}
+                icon={tab.icon}
+                iconActive={tab.iconActive}
+              />
+            ))}
+          </TabsList>
+          {tabs.map((tab) => (
+            <TabsContent key={tab.value} value={tab.value}>
+              <VerticalSpace size="24" sizeL="32" />
+              <CardGrid
+                cards={tab.cards}
+                cardsRevealed={cardsRevealed}
+                fourthCardRef={
+                  tab.value === activeTab ? fourthCardRef : { current: null }
+                }
+              />
+            </TabsContent>
+          ))}
+        </Tabs>
+      )}
+
+      {tabs?.length === 1 && hideTabs && (
+        <>
+          <CardGrid
+            cards={tabs[0].cards}
+            cardsRevealed={cardsRevealed}
+            fourthCardRef={fourthCardRef}
+          />
+        </>
+      )}
+
+      {!expanded && hasMoreCards && (
+        <>
+          <Rule />
+          <span id={cardContext} style={{ display: "none" }}>
+            {remainingCards === 1
+              ? `${remainingCards} card`
+              : `${remainingCards} cards`}
+          </span>
+          <Align horizontal="center">
+            <VerticalSpace size="16" />
+            {!cardsRevealed && (
+              <ButtonV2
+                label="Show more"
+                buttonStyle="secondary"
+                onClick={showMore}
+                aria-describedby={cardContext}
+              />
+            )}
+            {cardsRevealed && (
+              <ButtonV2
+                label="Show less"
+                buttonStyle="secondary"
+                onClick={showLess}
+                aria-describedby={cardContext}
+              />
+            )}
+          </Align>
+        </>
+      )}
+    </div>
+  );
+};
+
+export interface Tab extends TabsItemProps {
+  /*
+  * Cards rendered in a responsive grid inside the tab panel 
+  */
+  cards: React.ReactNode[];
+}
+
+export interface ProductCardGridProps
+  extends Omit<SectionHeadingProps, "isPadded" | "isCentered" | "image"> {
+  /*
+  * Array of tabs to render in a tabbed layout. Cannot be used together with `cards`. 
+  */
+  tabs?: Tab[];
+  /*
+  * When true, all cards are displayed by default and the show more/less button is hidden. 
+  */
+  expanded?: boolean;
+  /*
+  * When true, hide the tabs and only display first grid of cards  
+  */
+  hideTabs?: boolean;
+}

package/src/components/ProductCardGrid/components/CardGrid/CardGrid.module.css

@@ -0,0 +1,34 @@
+.cardGrid {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto auto;
+  gap: var(--sem-space-padding-110);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.cardGridItem {
+  display: grid;
+  grid-template-rows: subgrid;
+  grid-row: span 2;
+  row-gap: 0;
+}
+
+@media (--arc-custom-media-min-width-s-px) {
+  .cardGrid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (--arc-custom-media-min-width-l-px) {
+  .cardGrid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (--arc-custom-media-min-width-xl-px) {
+  .cardGrid {
+    gap: var(--sem-space-padding-130);
+  }
+}

package/src/components/ProductCardGrid/components/CardGrid/CardGrid.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+import styles from "./CardGrid.module.css";
+import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
+
+import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
+
+export const CardGrid: React.FC<CardGridProps> = ({
+  cards,
+  cardsRevealed,
+  fourthCardRef,
+  ...props
+}) => (
+  <>
+    <ul className={styles.cardGrid} {...filterAttrs(props)}>
+      {(cardsRevealed ? cards : cards.slice(0, 3)).map((card, index) => (
+        <li
+          key={`card-${index}`}
+          className={styles.cardGridItem}
+          ref={index === 3 ? fourthCardRef : undefined}
+          tabIndex={-1}
+        >
+          {card}
+        </li>
+      ))}
+    </ul>
+    <VerticalSpace size="24" sizeXL="32" />
+  </>
+);
+
+export interface CardGridProps {
+  /*
+  * Array of card elements to render within the grid 
+  */
+  cards: React.ReactNode[];
+  /*
+  * Whether all cards are visible. When false, only the first 3 cards are shown. 
+  */
+  cardsRevealed: boolean;
+  /*
+  * Ref attached to the fourth card item, used to manage focus when cards are revealed 
+  */
+  fourthCardRef: React.RefObject<HTMLLIElement>;
+}

package/src/components/ProductCardGrid/components/CardGrid/index.ts

@@ -0,0 +1 @@
+export { CardGrid, type CardGridProps } from "./CardGrid";

package/src/components/ProductCardGrid/index.ts

@@ -0,0 +1,5 @@
+export {
+  ProductCardGrid,
+  type ProductCardGridProps,
+  type Tab,
+} from "./ProductCardGrid";

package/src/components/VideoHeroCard/components/VideoHeroCardContent/VideoHeroCardContent.tsx

@@ -4,7 +4,7 @@ import { BtIconCalendar } from "@arc-ui/icons/BtIconCalendar";
 import { BtIconClock } from "@arc-ui/icons/BtIconClock";
 import { BtIconChatMessage } from "@arc-ui/icons/BtIconChatMessage";
 
-import { Heading } from "@arc-ui/components/Heading";
+import { Heading, type HeadingLevel } from "@arc-ui/components/Heading";
 import { Icon } from "@arc-ui/components/Icon";
 import { Text } from "@arc-ui/components/Text";
 import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
@@ -15,6 +15,8 @@ import classNames from "classnames";
 export const VideoHeroCardContent = ({
   title,
   label,
+  titleLevel = "3",
+  labelLevel,
   description,
   videoDate,
   duration,
@@ -42,11 +44,13 @@ export const VideoHeroCardContent = ({
           styles[`mainText--${background}Background`],
         )}
       >
-        <Heading fontStyle="overline">{label}</Heading>
+        <Heading level={labelLevel} fontStyle="overline">
+          {label}
+        </Heading>
 
         <VerticalSpace size="8" sizeM="4" />
 
-        <Heading level="3" isWordWrap={false} size="xl">
+        <Heading level={titleLevel} isWordWrap={false} size="xl">
           {title}
         </Heading>
 
@@ -88,7 +92,9 @@ type MetaItem = {
 
 export interface VideoHeroCardContentProps {
   title: string;
+  titleLevel?: HeadingLevel;
   label: string;
+  labelLevel?: HeadingLevel;
   description: string | ReactNode;
   background: "dark" | "light";
   videoDate?: string;

package/src/components/VideoPortraitCard/VideoPortraitCard.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Heading } from "@arc-ui/components/Heading";
+import { Heading, type HeadingLevel } from "@arc-ui/components/Heading";
 import { Surface } from "@arc-ui/components/Surface";
 import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
 
@@ -21,9 +21,15 @@ export const VideoPortraitCard = ({
         thumbnail && (
           <VideoCardThumbnail orientation="portrait" src={thumbnail.img}>
             <Surface isTransparent background="dark-black">
-              <Heading fontStyle="overline">{thumbnail.label}</Heading>
+              <Heading fontStyle="overline" level={thumbnail.labelLevel}>
+                {thumbnail.label}
+              </Heading>
               <VerticalSpace size="8" />
-              <Heading level="3" isWordWrap={false} size="xs">
+              <Heading
+                level={thumbnail.titleLevel}
+                isWordWrap={false}
+                size="xs"
+              >
                 {thumbnail.title}
               </Heading>
             </Surface>
@@ -44,7 +50,9 @@ export interface VideoPortraitCardProps {
    */
   thumbnail?: {
     title: string;
+    titleLevel?: HeadingLevel;
     label: string;
+    labelLevel?: HeadingLevel;
     img: string;
   };
   /**

package/src/components/index.ts

@@ -25,3 +25,5 @@ export * from "./VideoHeroCard";
 export * from "./VideoPortraitCard";
 export * from "./BusinessSegmentSwitcher";
 export * from "./PartnerBrandLogos";
+export * from "./ProductCard";
+export * from "./ProductCardGrid";

package/src/internal/VideoCardPlayer/VideoCardPlayer.module.css

@@ -28,6 +28,7 @@
 .playerWrapper {
   width: 100%;
   position: relative;
+  outline: none;
 }
 
 .playerWrapper--landscape {
@@ -38,12 +39,14 @@
   aspect-ratio: 9 / 16;
 }
 
-.container:has(:global(.react-player__preview):focus) {
+.container:has(:global(.react-player__preview):focus),
+.container:has(.playerWrapper:focus-visible) {
   outline-color: var(--sem-color-border-primary-light-default);
 }
 
 .container:has(:global(.react-player__preview):hover),
-.container:has(:global(.react-player__preview):focus) {
+.container:has(:global(.react-player__preview):focus),
+.container:has(.playerWrapper:focus-visible) {
   box-shadow: var(--elevation-05);
 }
 

package/src/internal/VideoCardPlayer/VideoCardPlayer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import classNames from "classnames";
 
 import ReactPlayer from "react-player";
@@ -20,11 +20,19 @@ export const VideoCardPlayer = ({
   ...props
 }: VideoCardPlayerProps) => {
   const [isClient, setIsClient] = useState<boolean>(false);
+  const playerWrapperRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     setIsClient(true);
   }, []);
 
+  const handleClickPreview = useCallback(() => {
+    // Restore focus to the player wrapper after preview is clicked.
+    requestAnimationFrame(() => {
+      playerWrapperRef.current?.focus();
+    });
+  }, []);
+
   const playerProps = {
     ...player,
     light: thumbnail,
@@ -35,12 +43,16 @@ export const VideoCardPlayer = ({
     className: styles.player,
     width: "100%",
     height: "100%",
+    onClickPreview: handleClickPreview,
   };
 
   return (
     <div className={styles.container} {...filterAttrs(props)}>
       <div
+        ref={playerWrapperRef}
         data-testid="arc-video-card"
+        role="button"
+        tabIndex={-1}
         className={classNames(
           styles.playerWrapper,
           styles[`playerWrapper--${orientation}`],
@@ -59,4 +71,7 @@ export interface VideoCardPlayerProps {
   playIconSize: "s" | "l";
   thumbnail?: ReactPlayerProps["light"];
   children?: React.ReactNode;
+  previewTabIndex?: number;
+  wrapper?: React.ReactNode;
+  fallback?: React.ReactNode;
 }

package/versions.json

@@ -1 +1 @@
-[{"version":"v3.13.0","date":null},{"version":"v3.12.0","date":"2026-07-08"},{"version":"v3.11.0","date":"2026-06-24"},{"version":"v3.10.0","date":"2026-06-16"},{"version":"v3.9.0","date":"2026-05-22"},{"version":"v3.8.1","date":"2026-05-13"},{"version":"v3.8.0","date":"2026-04-29"},{"version":"v3.7.1","date":"2026-04-22"},{"version":"v3.7.0","date":"2026-04-17"},{"version":"v3.6.0","date":"2026-04-10"},{"version":"v3.5.0","date":"2026-04-02"},{"version":"v3.4.0","date":"2026-03-26"},{"version":"v3.3.0","date":"2026-03-20"},{"version":"v3.2.0","date":"2026-03-09"},{"version":"v3.1.0","date":"2026-02-26"},{"version":"v3.0.1","date":null},{"version":"v3.0.0","date":"2026-02-18"},{"version":"v2.0.0","date":"2026-01-21"},{"version":"v1.1.0","date":"2025-11-19"},{"version":"v1.0.2","date":"2025-08-18"},{"version":"v1.0.1","date":"2025-08-05"},{"version":"v1.0.0","date":"2025-04-29"},{"version":"v0.1.0","date":null}]
+[{"version":"v3.14.0","date":null},{"version":"v3.13.1","date":"2026-07-30"},{"version":"v3.13.0","date":"2026-07-24"},{"version":"v3.12.0","date":"2026-07-08"},{"version":"v3.11.0","date":"2026-06-24"},{"version":"v3.10.0","date":"2026-06-16"},{"version":"v3.9.0","date":"2026-05-22"},{"version":"v3.8.1","date":"2026-05-13"},{"version":"v3.8.0","date":"2026-04-29"},{"version":"v3.7.1","date":"2026-04-22"},{"version":"v3.7.0","date":"2026-04-17"},{"version":"v3.6.0","date":"2026-04-10"},{"version":"v3.5.0","date":"2026-04-02"},{"version":"v3.4.0","date":"2026-03-26"},{"version":"v3.3.0","date":"2026-03-20"},{"version":"v3.2.0","date":"2026-03-09"},{"version":"v3.1.0","date":"2026-02-26"},{"version":"v3.0.1","date":null},{"version":"v3.0.0","date":"2026-02-18"},{"version":"v2.0.0","date":"2026-01-21"},{"version":"v1.1.0","date":"2025-11-19"},{"version":"v1.0.2","date":"2025-08-18"},{"version":"v1.0.1","date":"2025-08-05"},{"version":"v1.0.0","date":"2025-04-29"},{"version":"v0.1.0","date":null}]