@arc-ui/community-components 3.2.0 → 3.4.0

package/src/components/Highlights/Highlights.tsx

@@ -7,6 +7,7 @@ import { BtIconArrowRightFill } from "@arc-ui/icons/BtIconArrowRightFill";
 import { SectionHeading, type SectionHeadingProps } from "../SectionHeading";
 import { HighlightList } from "./components/HighlightList/HighlightList";
 import { type HighlightListItem } from "./types";
+import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
 
 /**
  * Use `Highlights` to give supporting information about a page or proposition. I
@@ -22,11 +23,12 @@ export const Highlights: React.FC<HighlightsProps> = ({
   listItems,
   columns = "2",
   cta,
+  ...props
 }) => {
   const isMaxWidthArcBreakpointXs = useMediaQuery("(max-width: 767px)");
 
   return (
-    <div>
+    <div {...filterAttrs(props)}>
       <SectionHeading
         isPadded
         id={id}
@@ -38,7 +40,6 @@ export const Highlights: React.FC<HighlightsProps> = ({
       />
 
       <HighlightList
-        data-testid="highlights-list-container"
         listItems={listItems}
         columns={columns}
         isSmallIcon={isMaxWidthArcBreakpointXs}

package/src/components/Highlights/components/HighlightItem/HighlightItem.tsx

@@ -5,9 +5,8 @@ import { Icon } from "@arc-ui/components/Icon";
 import { Text } from "@arc-ui/components/Text";
 import { Link } from "@arc-ui/components/Link";
 import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
-
+import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
 import { type HighlightLink } from "../../types";
-
 import styles from "../../Highlights.module.css";
 import { getListHeadingLevel } from "../../utils/getListHeadingLevel";
 
@@ -18,6 +17,7 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
   link,
   isSmallIcon,
   headingLevel,
+  ...props
 }) => {
   const listHeadingLevel = getListHeadingLevel(headingLevel || "2");
 
@@ -25,6 +25,7 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
     <div
       data-testid="highlight-item-container"
       className={styles.highlightItem}
+      {...filterAttrs(props)}
     >
       {icon && (
         <div className={styles.Icon}>

package/src/components/Highlights/components/HighlightList/HighlightList.tsx

@@ -4,7 +4,7 @@ import classNames from "classnames";
 import { type HighlightListItem } from "../../types/highlight-list-item";
 import { HighlightItem } from "../HighlightItem/HighlightItem";
 import { HeadingLevel } from "@arc-ui/components/Heading";
-
+import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
 import styles from "../../Highlights.module.css";
 
 export const HighlightList: React.FC<HighlightListProps> = ({
@@ -12,6 +12,7 @@ export const HighlightList: React.FC<HighlightListProps> = ({
   columns,
   isSmallIcon,
   headingLevel,
+  ...props
 }) => {
   const id = useId();
 
@@ -22,8 +23,9 @@ export const HighlightList: React.FC<HighlightListProps> = ({
         styles.highlights,
         styles[`highlights${columns}Column`],
       )}
+      {...filterAttrs(props)}
     >
-      {listItems.map(({ icon, heading, text, link }, i) => (
+      {listItems.map(({ icon, heading, text, link, ...itemProps }, i) => (
         <HighlightItem
           key={`highlight-${id}-${i}`}
           icon={icon}
@@ -32,6 +34,7 @@ export const HighlightList: React.FC<HighlightListProps> = ({
           link={link}
           isSmallIcon={isSmallIcon}
           headingLevel={headingLevel}
+          {...itemProps}
         />
       ))}
     </div>

package/src/components/InlineLinkGroup/InlineLinkGroup.module.css

@@ -0,0 +1,81 @@
+@import url("@arc-ui/tokens-arc/dist/custom-media.css");
+
+.quick-help {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+/* remove default list styles */
+.quick-help ul,
+.quick-help li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.quick-help-label {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-bottom: var(--sem-space-padding-110);
+  width: 100%;
+}
+
+/* container for links */
+.quick-help-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sem-space-padding-70);
+  width: 100%;
+}
+
+/* each link item */
+.quick-help-item {
+  display: flex;
+  align-items: center;
+  gap: var(--arc-spacing-4);
+  width: auto;
+  flex: 0 0 auto;
+}
+
+/* hide arrow icon on desktop/tablet */
+.quick-help-item svg {
+  display: none;
+  width: 24px;
+  height: 24px;
+}
+
+/* separator between links */
+.quick-help-separator {
+  display: flex;
+  align-items: center;
+}
+
+.quick-help-separator-line {
+  width: 1px;
+  height: 14px;
+  background: var(--sem-color-border-secondary-light-minimal);
+}
+
+/* XS breakpoint: stack vertically */
+@media not (--arc-custom-media-min-width-s-px) {
+  .quick-help-container {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--sem-space-padding-70);
+  }
+
+  /* show arrow icon */
+  .quick-help-item svg {
+    display: block;
+  }
+
+  /* hide separators */
+  .quick-help-separator {
+    display: none;
+  }
+}

package/src/components/InlineLinkGroup/InlineLinkGroup.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { Link } from "@arc-ui/components/Link";
+import { Icon } from "@arc-ui/components/Icon";
+import { Heading } from "@arc-ui/components/Heading";
+import { BtIconArrowAltRight } from "@arc-ui/icons/BtIconArrowAltRight";
+import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
+import styles from "./InlineLinkGroup.module.css";
+
+export const InlineLinkGroup: React.FC<InlineLinkGroupProps> = ({
+  label,
+  links,
+  ...props
+}) => {
+  return (
+    <div className={styles["quick-help"]} {...filterAttrs(props)}>
+      {label && (
+        <div className={styles["quick-help-label"]}>
+          <Heading size="xxs" fontStyle="overline">
+            {label}
+          </Heading>
+        </div>
+      )}
+
+      <ul className={styles["quick-help-container"]}>
+        {links.map((link, index) => (
+          <React.Fragment key={index}>
+            <li className={styles["quick-help-item"]}>
+              <Link
+                href={link.href}
+                onClick={link.onClick}
+                aria-label={link.ariaLabel}
+              >
+                {link.label}
+              </Link>
+
+              <Icon icon={BtIconArrowAltRight} size={24} color="brand" />
+            </li>
+
+            {index < links.length - 1 && (
+              <li className={styles["quick-help-separator"]} aria-hidden="true">
+                <div className={styles["quick-help-separator-line"]} />
+              </li>
+            )}
+          </React.Fragment>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export interface InlineLinkGroupProps {
+  /** Optional overline label displayed above the link group */
+  label?: string;
+  /** Array of link items to display */
+  links: InlineLinkGroupItem[];
+}
+
+export interface InlineLinkGroupItem {
+  /** Display text for the link */
+  label: string;
+  /** URL the link navigates to */
+  href: string;
+  /** Optional click handler for the link */
+  onClick?: () => void;
+  /** Optional accessible label for screen readers */
+  ariaLabel?: string;
+}

package/src/components/InlineLinkGroup/index.ts

@@ -0,0 +1,5 @@
+export { InlineLinkGroup } from "./InlineLinkGroup";
+export type {
+  InlineLinkGroupProps,
+  InlineLinkGroupItem,
+} from "./InlineLinkGroup";

package/src/components/LinkTile/LinkTile.module.css

@@ -1,57 +1,93 @@
+@import url("@arc-ui/tokens-arc/dist/custom-media.css");
+
 .link-tile {
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  justify-content: center;
+  align-items: center;
   width: 306px;
-  border: 1px solid #c8c8c8;
-  border-radius: 32px;
-  padding: 24px;
-  background: #ffffff;
+  height: 96px;
+  border: var(--sem-border-width-xxs) solid
+    var(--sem-color-border-secondary-light-minimal);
+  border-radius: var(--sem-border-radius-xl);
+  padding: var(--sem-space-padding-110) var(--sem-space-padding-70)
+    var(--sem-space-padding-110) var(--sem-space-padding-110);
+  background: var(--sem-color-bg-secondary-light-default);
   text-decoration: none;
   cursor: pointer;
-  transition:
-    border-color 0.2s ease,
-    border-radius 0.2s ease;
+  transition: border-color 0.2s ease;
+  flex: none;
+  align-self: stretch;
+  position: relative;
+  overflow: visible;
 }
 
 .link-tile-content {
   display: flex;
+  flex-direction: row;
+  justify-content: center;
   align-items: center;
-  justify-content: space-between;
-  gap: 8px;
+  gap: var(--sem-space-padding-40);
+  width: 100%;
+  height: 48px;
+  flex: none;
+  align-self: stretch;
+}
+
+.link-tile-icon {
+  display: flex;
+  width: 32px;
+  height: 32px;
+  color: var(--sem-color-fg-primary-light-default);
+  transition: color 0.2s ease;
+  flex: none;
+  flex-shrink: 0;
+  order: 1;
 }
 
 .link-tile-text {
-  font-family: "BT Curve", sans-serif;
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 24px;
+  font-family: var(--sem-font-family-heading);
+  font-size: var(--sem-font-size-100);
+  font-weight: var(--sem-font-weight-semi);
+  line-height: var(--sem-line-height-base-scale-xs);
   letter-spacing: 0;
-  color: #5514b4;
+  color: var(--sem-color-fg-primary-light-default);
   transition: color 0.2s ease;
   flex: 1;
+  order: 0;
 }
 
+.link-tile-icon svg,
 .link-tile .link-tile-content svg {
-  color: #5514b4;
-  flex-shrink: 0;
+  color: inherit;
   transition: color 0.2s ease;
 }
 
-.link-tile:hover {
-  border-color: #5514b4;
+.link-tile:not(:has(svg)) {
+  padding: var(--sem-space-padding-110);
 }
 
 .link-tile:active {
-  border-radius: 32px;
+  border-radius: var(--sem-border-radius-xl);
 }
 
-.link-tile:hover .link-tile-text,
-.link-tile:hover .link-tile-content svg {
-  color: #3f187f;
-}
-
-@media (width <= 1023px) {
+@media (--arc-custom-media-min-width-l-px) {
   .link-tile {
-    padding: 24px 16px 24px 24px;
+    padding: var(--sem-space-padding-110) var(--sem-space-padding-70)
+      var(--sem-space-padding-110) var(--sem-space-padding-110);
   }
 }
+
+.link-tile:hover {
+  border-color: transparent;
+  box-shadow: inset 0 0 0 2px var(--button-v2-colors-light-text-hover);
+}
+
+.link-tile:hover .link-tile-text {
+  color: var(--button-v2-colors-light-text-hover);
+}
+
+.link-tile:hover .link-tile-icon {
+  color: var(--button-v2-colors-light-text-hover);
+}

package/src/components/LinkTile/LinkTile.tsx

@@ -24,7 +24,11 @@ export const LinkTile: React.FC<LinkTileProps> = ({
       {text && (
         <div className={styles["link-tile-content"]}>
           <span className={styles["link-tile-text"]}>{text}</span>
-          {showIcon && <Icon icon={BtIconArrowAltRight} size={32} />}
+          {showIcon && (
+            <span className={styles["link-tile-icon"]}>
+              <Icon icon={BtIconArrowAltRight} size={32} />
+            </span>
+          )}
         </div>
       )}
     </Component>
@@ -32,7 +36,10 @@ export const LinkTile: React.FC<LinkTileProps> = ({
 };
 
 export interface LinkTileProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Display text for the tile */
   text?: string;
+  /** URL the tile navigates to. Renders as an anchor tag when provided */
   href?: string;
+  /** Whether to show the arrow icon. Defaults to true */
   showIcon?: boolean;
 }

package/src/components/PromoListing/PromoListing.tsx

@@ -1,17 +1,12 @@
 import React, { useId, ComponentType } from "react";
-
 import classNames from "classnames";
-
 import { ArcSizeBreakpointsL, ArcSizeBreakpointsM } from "@arc-ui/tokens-arc";
-
 import { Carousel } from "@arc-ui/components/Carousel";
 import { Heading, type HeadingLevel } from "@arc-ui/components/Heading";
 import { useMediaQuery } from "@arc-ui/components/use-media-query";
-
 import { SectionHeading, type SectionHeadingProps } from "../SectionHeading";
-
 import { MediaCard, type MediaCardProps } from "@arc-ui/components/MediaCard";
-
+import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
 import {
   ImpactCard,
   type ImpactCardProps,
@@ -49,6 +44,7 @@ export const PromoListing: React.FC<PromoListingProps> = ({
   button = { buttonStyle: "secondary" },
   overlineHeadingLevel,
   overlineLabel,
+  ...props
 }) => {
   const componentId = useId();
 
@@ -97,7 +93,7 @@ export const PromoListing: React.FC<PromoListingProps> = ({
   };
 
   return (
-    <div className={styles.PromoListing}>
+    <div className={styles.PromoListing} {...filterAttrs(props)}>
       {overlineLabel && (
         <>
           <Heading level={overlineHeadingLevel} fontStyle="overline">
@@ -230,8 +226,4 @@ interface PromoListingButton
    * Style variant for the button. Defaults to "secondary".
    */
   buttonStyle?: "secondary" | "compact";
-  /**
-   * Optional prop to pass additional props to the button. Only data-* and aria-* will work.
-   */
-  [key: string]: unknown;
 }

package/src/components/PromoListingThumbnailSignpost/PromoListingThumbnailSignpost.tsx

@@ -22,6 +22,7 @@ export const PromoListingThumbnailSignpost: React.FC<
   content,
   headingLevel,
   thumbnailList,
+  isHeadingWordWrap,
   ...props
 }) => {
   return (
@@ -35,6 +36,7 @@ export const PromoListingThumbnailSignpost: React.FC<
         heading={heading}
         headingLevel={headingLevel}
         content={content}
+        isHeadingWordWrap={isHeadingWordWrap}
       />
       <ul className={styles.list}>
         {thumbnailList.map((thumbnail, index) => (

package/src/components/Quote/Quote.tsx

@@ -38,13 +38,7 @@ export const Quote: React.FC<QuoteProps> = ({
         </svg>
         <p className={styles.quoteContent}>{content}</p>
       </blockquote>
-      {author && (
-        <Author
-          name={author.name}
-          title={author.title}
-          avatar={author.avatar}
-        />
-      )}
+      {author && <Author {...author} />}
     </div>
   );
 };

package/src/components/Statistics/Statistics.module.css

@@ -13,13 +13,3 @@
 .mutedText {
   color: var(--sem-color-text-primary-light-subtle);
 }
-
-.statWrapper {
-  margin-bottom: -12px;
-}
-
-@media (--arc-custom-media-min-width-s-px) {
-  .statWrapper {
-    margin-bottom: 0;
-  }
-}

package/src/components/Statistics/Statistics.tsx

@@ -1,16 +1,14 @@
 import React, { useId } from "react";
-
+import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
 import { Columns, ColumnsCol } from "@arc-ui/components/Columns";
 import { Rule } from "@arc-ui/components/Rule";
 import { Text } from "@arc-ui/components/Text";
 import { Align } from "@arc-ui/components/Align";
 import { Heading } from "@arc-ui/components/Heading";
 import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
-
+import { Hidden } from "@arc-ui/components/Hidden";
 import { SectionHeading, type SectionHeadingProps } from "../SectionHeading";
-
 import styles from "./Statistics.module.css";
-
 import { getLinkProps } from "./helpers/get-link-props";
 import { type Statistic } from "./types/statistic";
 
@@ -21,11 +19,12 @@ export const Statistics: React.FC<StatisticsProps> = ({
   heading,
   content,
   statistics,
+  ...props
 }) => {
   const componentId = useId();
 
   return (
-    <Columns>
+    <Columns isGutterless {...filterAttrs(props)}>
       <ColumnsCol spanM={9}>
         <SectionHeading
           id={id}
@@ -34,7 +33,6 @@ export const Statistics: React.FC<StatisticsProps> = ({
           headingLevel={headingLevel}
           content={content}
         />
-        <VerticalSpace size="16" />
       </ColumnsCol>
       <ColumnsCol spanL={9}>
         <ul className={styles.list}>
@@ -54,38 +52,43 @@ export const Statistics: React.FC<StatisticsProps> = ({
                       <Heading color="brand" size="xxl">
                         {stat}
                       </Heading>
+                      <Hidden s m l xl xxl>
+                        <VerticalSpace size="12" />
+                      </Hidden>
                     </div>
                   </Align>
                 </ColumnsCol>
                 <ColumnsCol spanS={6} spanM={4}>
-                  <Text>{copy}</Text>
-                  {link && (
-                    <>
-                      <VerticalSpace size="12" />
-                      <a
-                        href={link.href}
-                        aria-label={link.ariaLabel}
-                        {...getLinkProps(link)}
-                      >
-                        {link.text}
-                      </a>
-                    </>
-                  )}
-                  {source && (
-                    <>
-                      <VerticalSpace size="12" />
+                  <Align vertical="center">
+                    <Text>{copy}</Text>
+                    {link && (
+                      <>
+                        <VerticalSpace size="12" />
+                        <a
+                          href={link.href}
+                          aria-label={link.ariaLabel}
+                          {...getLinkProps(link)}
+                        >
+                          {link.text}
+                        </a>
+                      </>
+                    )}
+                    {source && (
+                      <>
+                        <VerticalSpace size="12" />
+                        <Text size="xs">
+                          <span className={styles.mutedText}>{source}</span>
+                        </Text>
+                      </>
+                    )}
+                    {sourceUrl && (
                       <Text size="xs">
-                        <span className={styles.mutedText}>{source}</span>
+                        <a className={styles.mutedText} href={sourceUrl}>
+                          {sourceUrl}
+                        </a>
                       </Text>
-                    </>
-                  )}
-                  {sourceUrl && (
-                    <Text size="xs">
-                      <a className={styles.mutedText} href={sourceUrl}>
-                        {sourceUrl}
-                      </a>
-                    </Text>
-                  )}
+                    )}
+                  </Align>
                 </ColumnsCol>
               </Columns>
             </li>

package/src/components/Summary/Summary.tsx

@@ -8,13 +8,14 @@ import { Box } from "@arc-ui/components/Box";
 import { Rule } from "@arc-ui/components/Rule";
 import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
 import { useMediaQuery } from "@arc-ui/components/use-media-query";
-
+import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
 import styles from "./Summary.module.css";
 
 export const Summary: React.FC<SummaryProps> = ({
   content,
   noBorder = false,
   headingLevel = "3",
+  ...props
 }) => {
   const isMinWidthArcBreakpointM = useMediaQuery(
     `(min-width: ${ArcSizeBreakpointsM})`,
@@ -25,6 +26,7 @@ export const Summary: React.FC<SummaryProps> = ({
       isBorderRadius
       {...(!noBorder ? { borderWidth: "thin" } : { elevationLevel: "1" })}
       padding="24"
+      {...filterAttrs(props)}
     >
       <div className={styles.row}>
         {content.map(({ heading, text }, i) => (

package/src/components/VideoHeroCard/VideoHeroCard.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+
+import { Visible } from "@arc-ui/components/Visible";
+import { Spacing } from "@arc-ui/components/Spacing";
+
+import {
+  VideoCardPlayer,
+  VideoCardPlayerProps,
+  VideoCardThumbnail,
+} from "../../internal/VideoCardPlayer";
+
+import {
+  VideoHeroCardContent,
+  VideoHeroCardContentProps,
+} from "./components/VideoHeroCardContent";
+
+export const VideoHeroCard = ({
+  content,
+  thumbnailImg,
+  player,
+  ...props
+}: VideoHeroCardProps) => {
+  return (
+    <VideoCardPlayer
+      thumbnail={
+        <VideoCardThumbnail
+          src={thumbnailImg}
+          orientation="landscape"
+          contentVisibility={{ l: true, xl: true, xxl: true }}
+        >
+          <VideoHeroCardContent {...content} background="dark" />
+        </VideoCardThumbnail>
+      }
+      orientation="landscape"
+      playIconSize="l"
+      player={player}
+      {...props}
+    >
+      {content && (
+        <Visible xs s m>
+          <Spacing all={{ xs: "16", s: "32" }}>
+            <VideoHeroCardContent {...content} background="light" />
+          </Spacing>
+        </Visible>
+      )}
+    </VideoCardPlayer>
+  );
+};
+
+export interface VideoHeroCardProps {
+  /**
+   * Content for the video card.
+   */
+  content: Omit<VideoHeroCardContentProps, "background">;
+  /**
+   * Thumbnail for the video hero card.
+   */
+  thumbnailImg: string;
+  /**
+   * Configuration for the video player.
+   */
+  player: VideoCardPlayerProps["player"];
+}