@arc-ui/community-components 3.0.1 → 3.2.0

package/src/components/HeroLink/HeroLink.tsx

@@ -0,0 +1,136 @@
+import React, { type Ref } from "react";
+import classNames from "classnames";
+import { BtIconArrowAltRight } from "@arc-ui/icons/BtIconArrowAltRight";
+import { Icon } from "@arc-ui/components/Icon";
+import styles from "./HeroLink.module.css";
+
+export type ElementUnion = HTMLButtonElement | HTMLAnchorElement;
+export type ButtonRef = Ref<ElementUnion> | null;
+type AnchorElProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;
+type ButtonElProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+type CommonElProps = AnchorElProps & ButtonElProps & { ref?: ButtonRef | null };
+
+/**
+ * Pill-style HeroLink component with default and hover states
+ */
+export const HeroLink = ({
+  label,
+  onClick,
+  href,
+  id,
+  rel,
+  target,
+  ariaLabel,
+  ref,
+  ...props
+}: HeroLinkProps) => {
+  const HeroLinkClasses = classNames(styles.heroLink, {
+    [styles["heroLink--emptyLabel"]]: !label,
+  });
+
+  const commonProps: CommonElProps = {
+    id,
+    onClick,
+    ref,
+    ...props,
+  };
+
+  if (href) {
+    return (
+      <a
+        {...(commonProps as AnchorElProps)}
+        className={HeroLinkClasses}
+        href={href}
+        rel={rel}
+        aria-label={ariaLabel}
+        target={target}
+      >
+        <span className={styles["heroLink-inner"]}>
+          {label && <span className={styles["heroLink-label"]}>{label}</span>}
+          <span className={styles["heroLink-icon"]}>
+            <Icon
+              testId="hero-link-icon"
+              size={24}
+              icon={BtIconArrowAltRight}
+            />
+          </span>
+        </span>
+      </a>
+    );
+  }
+  return (
+    <button
+      {...(commonProps as ButtonElProps)}
+      className={HeroLinkClasses}
+      aria-label={ariaLabel}
+    >
+      <span className={styles["heroLink-inner"]}>
+        {label && <span className={styles["heroLink-label"]}>{label}</span>}
+        <span className={styles["heroLink-icon"]}>
+          <Icon testId="hero-link-icon" size={24} icon={BtIconArrowAltRight} />
+        </span>
+      </span>
+    </button>
+  );
+};
+
+interface LinkElementProps {
+  /**
+   * URL to link to if `HeroButton` elementType is 'a'.
+   */
+  href?: string;
+
+  /**
+   * Target window for the `HeroButton` href URL.
+   */
+  target?: string;
+
+  /**
+   * Relationship between the Button href URL and the current page. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
+   */
+  rel?: string;
+}
+
+interface HeroButtonElementProps {
+  /**
+   * Default behavior of the Button element. If not provided, 'submit' will
+   * be inferred. Type 'reset' deliberately excluded.
+   */
+  type?: "button" | "submit";
+
+  /**
+   * Refers to the id of a form so it can be submitted if the button exists outside of it.
+   */
+  form?: string;
+}
+
+export interface HeroLinkProps
+  extends HeroButtonElementProps,
+    LinkElementProps {
+  /**
+   * Label for `HeroLink`
+   */
+  label?: string;
+
+  /**
+   * Optional click handler for the `HeroLink`.
+   */
+  onClick?: () => void;
+
+  /**
+   * Optional property to provide component Ref
+   */
+  ref?: ButtonRef;
+
+  /**
+   * Text to override `label` with additional, more precise information
+   * specifically for screen reader users.
+   */
+  ariaLabel?: string;
+
+  /**
+   * HTML ID for the `HeroLink`
+   */
+  id?: string;
+}

package/src/components/HeroLink/index.ts

@@ -0,0 +1,2 @@
+export { HeroLink } from "./HeroLink";
+export type { HeroLinkProps } from "./HeroLink";

package/src/components/Highlights/Highlights.tsx

@@ -16,6 +16,8 @@ import { type HighlightListItem } from "./types";
 export const Highlights: React.FC<HighlightsProps> = ({
   heading,
   headingLevel,
+  id,
+  isHeadingWordWrap,
   content,
   listItems,
   columns = "2",
@@ -27,9 +29,11 @@ export const Highlights: React.FC<HighlightsProps> = ({
     <div>
       <SectionHeading
         isPadded
+        id={id}
         data-testid="highlights-header"
         heading={heading}
         headingLevel={headingLevel}
+        isHeadingWordWrap={isHeadingWordWrap}
         content={content}
       />
 
@@ -49,6 +53,7 @@ export const Highlights: React.FC<HighlightsProps> = ({
             href={cta.href}
             onClick={cta.onClick}
             size="m"
+            ariaLabel={cta.ariaLabel}
             buttonStyle={cta.buttonStyle}
             icon={
               cta.buttonStyle === "compact"
@@ -92,7 +97,7 @@ export interface HighlightsProps extends Omit<SectionHeadingProps, "isPadded"> {
  */
 export type HighlightsCTAProps = Pick<
   ButtonV2Props,
-  "label" | "href" | "onClick" | "iconPosition"
+  "label" | "href" | "onClick" | "iconPosition" | "ariaLabel"
 > & {
   /**
    * Allowed button styles only.

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

@@ -48,6 +48,7 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
         <Link
           href={link.url}
           id={link.url}
+          aria-label={link.ariaLabel}
           onClick={link.onClick}
           rel=""
           size="m"

package/src/components/Highlights/types/highlight-link.ts

@@ -1,5 +1,6 @@
 export interface HighlightLink {
   url: string;
   textLink: string;
+  ariaLabel?: string;
   onClick?: (e: React.MouseEvent) => void;
 }

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

@@ -0,0 +1,57 @@
+.link-tile {
+  display: flex;
+  flex-direction: column;
+  width: 306px;
+  border: 1px solid #c8c8c8;
+  border-radius: 32px;
+  padding: 24px;
+  background: #ffffff;
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    border-color 0.2s ease,
+    border-radius 0.2s ease;
+}
+
+.link-tile-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.link-tile-text {
+  font-family: "BT Curve", sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+  letter-spacing: 0;
+  color: #5514b4;
+  transition: color 0.2s ease;
+  flex: 1;
+}
+
+.link-tile .link-tile-content svg {
+  color: #5514b4;
+  flex-shrink: 0;
+  transition: color 0.2s ease;
+}
+
+.link-tile:hover {
+  border-color: #5514b4;
+}
+
+.link-tile:active {
+  border-radius: 32px;
+}
+
+.link-tile:hover .link-tile-text,
+.link-tile:hover .link-tile-content svg {
+  color: #3f187f;
+}
+
+@media (width <= 1023px) {
+  .link-tile {
+    padding: 24px 16px 24px 24px;
+  }
+}

package/src/components/LinkTile/LinkTile.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import classNames from "classnames";
+import styles from "./LinkTile.module.css";
+import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
+import { Icon } from "@arc-ui/components/Icon";
+import { BtIconArrowAltRight } from "@arc-ui/icons/BtIconArrowAltRight";
+
+export const LinkTile: React.FC<LinkTileProps> = ({
+  text,
+  href,
+  showIcon = true,
+  className,
+  ...props
+}) => {
+  const Component = href ? "a" : "div";
+  const linkProps = href ? { href } : {};
+
+  return (
+    <Component
+      className={classNames(styles["link-tile"], className)}
+      {...linkProps}
+      {...filterAttrs(props)}
+    >
+      {text && (
+        <div className={styles["link-tile-content"]}>
+          <span className={styles["link-tile-text"]}>{text}</span>
+          {showIcon && <Icon icon={BtIconArrowAltRight} size={32} />}
+        </div>
+      )}
+    </Component>
+  );
+};
+
+export interface LinkTileProps extends React.HTMLAttributes<HTMLDivElement> {
+  text?: string;
+  href?: string;
+  showIcon?: boolean;
+}

package/src/components/LinkTile/index.ts

@@ -0,0 +1 @@
+export { LinkTile, type LinkTileProps } from "./LinkTile";

package/src/components/ProductNavigation/ProductNavigation.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from "react";
 import classNames from "classnames";
 import styles from "./ProductNavigation.module.css";
 
-import { filterDataAttrs } from "@arc-ui/community-utils/filter-data-attrs";
+import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
 
 import { useMediaQuery } from "@arc-ui/components/use-media-query";
 import { ArcSizeBreakpointsS } from "@arc-ui/tokens-arc";
@@ -19,7 +19,9 @@ import { VisuallyHidden } from "@arc-ui/components/VisuallyHidden";
  */
 export const ProductNavigation: React.FC<ProductNavigationProps> = ({
   heading,
+  id,
   headingLevel,
+  isHeadingWordWrap,
   content,
   hideButton = false,
   productList,
@@ -79,17 +81,19 @@ export const ProductNavigation: React.FC<ProductNavigationProps> = ({
   );
 
   return (
-    <div {...filterDataAttrs(props)}>
+    <div {...filterAttrs(props)}>
       <SectionHeading
         isPadded
+        id={id}
         data-testid="ProductNavigation-header"
         heading={heading}
         headingLevel={headingLevel}
+        isHeadingWordWrap={isHeadingWordWrap}
         content={content}
         image={image}
       />
       <ul className={classNames(styles["product-navigation-grid"])}>
-        {displayList?.map(({ label, href, heading, text }, i) => (
+        {displayList?.map((cardProps, i) => (
           <li
             key={`displayList-${i}`}
             tabIndex={-1}
@@ -97,14 +101,9 @@ export const ProductNavigation: React.FC<ProductNavigationProps> = ({
             data-cy={`list-item-${i}`}
           >
             <InformationCard
-              button={{
-                label: label,
-                href: href,
-              }}
-              minHeight={minHeight}
-              heading={heading}
-              headingLevel="2"
-              text={text}
+              {...cardProps}
+              minHeight={minHeight ?? cardProps.minHeight}
+              headingLevel={cardProps.headingLevel ?? "2"}
             />
           </li>
         ))}

package/src/components/ProductNavigation/types/product-list.ts

@@ -1,10 +1,3 @@
 import { InformationCardProps } from "@arc-ui/components/InformationCard";
-import { ButtonV2Props } from "@arc-ui/components/types/components/ButtonV2/ButtonV2";
 
-type ListInformationCardButtonProps = Pick<
-  ButtonV2Props,
-  "label" | "onClick" | "href"
->;
-type ListInformationCardProps = Pick<InformationCardProps, "heading" | "text">;
-export type ListProps = ListInformationCardButtonProps &
-  ListInformationCardProps;
+export type ListProps = InformationCardProps;

package/src/components/PromoListing/PromoListing.tsx

@@ -5,6 +5,7 @@ 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";
@@ -26,7 +27,12 @@ import {
   type TypographyCardProps,
 } from "@arc-ui/components/TypographyCard";
 
+import { ButtonV2, type ButtonV2Props } from "@arc-ui/components/ButtonV2";
+
+import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
+
 import styles from "./PromoListing.module.css";
+import { BtIconArrowRightFill } from "@arc-ui/icons";
 
 /**
  * Use `PromoListing` to give supporting information about a page or proposition in the form of the card components (`ImpactCard`, `InformationCard`, `MediaCard` and `TypographyCard`).
@@ -34,12 +40,17 @@ import styles from "./PromoListing.module.css";
 export const PromoListing: React.FC<PromoListingProps> = ({
   heading,
   content,
+  id,
   isCarousel = false,
   cards,
   headingLevel,
+  isHeadingWordWrap,
   columns = "2",
+  button = { buttonStyle: "secondary" },
+  overlineHeadingLevel,
+  overlineLabel,
 }) => {
-  const id = useId();
+  const componentId = useId();
 
   const isMinWidthArcBreakpointL = useMediaQuery(
     `(min-width: ${ArcSizeBreakpointsL})`,
@@ -87,13 +98,37 @@ export const PromoListing: React.FC<PromoListingProps> = ({
 
   return (
     <div className={styles.PromoListing}>
+      {overlineLabel && (
+        <>
+          <Heading level={overlineHeadingLevel} fontStyle="overline">
+            {overlineLabel}
+          </Heading>
+          <VerticalSpace size="12" />
+        </>
+      )}
+
       <SectionHeading
         isPadded
+        id={id}
         data-testid="PromoListing-header"
         heading={heading}
+        isHeadingWordWrap={isHeadingWordWrap}
         headingLevel={headingLevel}
         content={content}
       />
+
+      {button.label && (
+        <>
+          <ButtonV2
+            {...button}
+            icon={
+              button.buttonStyle == "compact" ? BtIconArrowRightFill : undefined
+            }
+            size="m"
+          />
+          <VerticalSpace size="40" />
+        </>
+      )}
       {isCarousel && !isMinWidthArcBreakpointL ? (
         <div className={styles.promolistingCarouselWrapper}>
           <Carousel
@@ -104,7 +139,7 @@ export const PromoListing: React.FC<PromoListingProps> = ({
           >
             {cards?.map((card: PromoListCard, i) => (
               <div
-                key={`promolist-carousel-card-${id}-${i}`}
+                key={`promolist-carousel-card-${componentId}-${i}`}
                 className={(styles.carouselSlide, styles.cardWrapperCarousel)}
               >
                 {getCard(card)}
@@ -117,7 +152,7 @@ export const PromoListing: React.FC<PromoListingProps> = ({
           className={classNames(styles.cardGrid, styles[`columns-${columns}`])}
         >
           {cards?.map((card: PromoListCard, index) => (
-            <li key={`promolist-card--${id}-${index}`}>
+            <li key={`promolist-card--${componentId}-${index}`}>
               <div
                 data-testid={`promoList-card${index}`}
                 className={styles.cardWrapper}
@@ -170,4 +205,33 @@ export interface PromoListingProps
    * Number of columns for desktop breakpoints. "2" and "3" column options available.
    */
   columns?: "2" | "3";
+
+  /**
+   * Optional button configuration displayed above the cards.
+   */
+  button?: PromoListingButton;
+  /**
+   * Text label displayed above the main heading in overline style
+   */
+  overlineLabel?: string;
+
+  /**
+   * Heading level for the overline label
+   */
+  overlineHeadingLevel?: HeadingLevel;
+}
+
+/**
+ * Button configuration for PromoListing component.
+ */
+interface PromoListingButton
+  extends Omit<ButtonV2Props, "buttonStyle" | "icon" | "size"> {
+  /**
+   * 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.module.css

@@ -0,0 +1,54 @@
+@import url("@arc-ui/tokens-arc/dist/custom-media.css");
+
+.PromoListingThumbnailSignpost {
+  max-width: 1280px;
+}
+
+.PromoListingThumbnailSignpost ul,
+.PromoListingThumbnailSignpost li {
+  text-decoration: none;
+  padding: 0;
+  margin: 0;
+}
+
+.list {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  column-gap: var(--arc-size-grid-gutter-s);
+  row-gap: 24px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.list li {
+  grid-column: span 12;
+}
+
+@media (--arc-custom-media-min-width-s-px) {
+  .list {
+    row-gap: 32px;
+  }
+}
+
+@media (--arc-custom-media-min-width-m-px) {
+  .list {
+    column-gap: var(--arc-size-grid-gutter-m);
+  }
+
+  .list li {
+    grid-column: span 6;
+  }
+}
+
+@media (--arc-custom-media-min-width-l-px) {
+  .list {
+    row-gap: 40px;
+  }
+}
+
+@media (--arc-custom-media-min-width-xl-px) {
+  .list {
+    column-gap: var(--arc-size-grid-gutter-l);
+  }
+}

package/src/components/PromoListingThumbnailSignpost/PromoListingThumbnailSignpost.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+
+import { SectionHeading, type SectionHeadingProps } from "../SectionHeading";
+
+import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
+
+import styles from "./PromoListingThumbnailSignpost.module.css";
+
+import {
+  ThumbnailSignpost,
+  type ThumbnailSignpostProps,
+} from "../ThumbnailSignpost";
+
+/**
+ * Use `PromoListingThumbnailSignpost` to give supporting information about a page or proposition in the form of the ThumbnailSignposts components.
+ */
+export const PromoListingThumbnailSignpost: React.FC<
+  PromoListingThumbnailSignpostProps
+> = ({
+  isPadded = true,
+  heading,
+  content,
+  headingLevel,
+  thumbnailList,
+  ...props
+}) => {
+  return (
+    <div
+      className={styles.PromoListingThumbnailSignpost}
+      {...filterAttrs(props)}
+    >
+      <SectionHeading
+        isPadded={isPadded}
+        data-testid="PromoListingThumbnailSignpost-header"
+        heading={heading}
+        headingLevel={headingLevel}
+        content={content}
+      />
+      <ul className={styles.list}>
+        {thumbnailList.map((thumbnail, index) => (
+          <li key={index}>
+            <ThumbnailSignpost {...thumbnail} />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export interface PromoListingThumbnailSignpostProps
+  extends SectionHeadingProps {
+  thumbnailList: ThumbnailSignpostProps[];
+}

package/src/components/PromoListingThumbnailSignpost/index.ts

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

package/src/components/Quote/Quote.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import classNames from "classnames";
 
-import { filterDataAttrs } from "@arc-ui/community-utils/filter-data-attrs";
+import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
 
 import { Author } from "../Author";
 import { AuthorProps } from "../Author/Author";
@@ -21,7 +21,7 @@ export const Quote: React.FC<QuoteProps> = ({
     <div
       className="community-component--quote"
       data-testid="quote-test"
-      {...filterDataAttrs(props)}
+      {...filterAttrs(props)}
     >
       <blockquote
         data-testid="style-test"

package/src/components/SectionHeading/SectionHeading.tsx

@@ -1,13 +1,12 @@
 import React, { ReactNode } from "react";
 import classNames from "classnames";
 
-import { filterDataAttrs } from "@arc-ui/community-utils/filter-data-attrs";
+import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
 
-import { Heading, type HeadingLevel } from "@arc-ui/components/Heading";
 import { Text } from "@arc-ui/components/Text";
 import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
-import { Image } from "@arc-ui/components/Image";
-import { type ImageProps } from "@arc-ui/components/dist/types/components/Image/Image";
+import { Image, type ImageProps } from "@arc-ui/components/Image";
+import { Heading, type HeadingLevel } from "@arc-ui/components/Heading";
 
 import styles from "./SectionHeading.module.css";
 
@@ -15,9 +14,10 @@ export const SectionHeading: React.FC<SectionHeadingProps> = ({
   heading,
   content,
   id,
+  image,
+  isHeadingWordWrap,
   isPadded = false,
   headingLevel = "2",
-  image,
   ...props
 }) => (
   <div
@@ -25,7 +25,7 @@ export const SectionHeading: React.FC<SectionHeadingProps> = ({
       [styles["section-header"]]: true,
       [styles["section-header--padded"]]: isPadded,
     })}
-    {...filterDataAttrs(props)}
+    {...filterAttrs(props)}
   >
     <div
       className={classNames({ [styles["section-header--hasImage"]]: image })}
@@ -35,7 +35,12 @@ export const SectionHeading: React.FC<SectionHeadingProps> = ({
           <Image {...image} width={68} fit="cover" />
         </div>
       )}
-      <Heading level={headingLevel} id={id} size="xl">
+      <Heading
+        level={headingLevel}
+        id={id}
+        size="xl"
+        isWordWrap={isHeadingWordWrap}
+      >
         {heading}
       </Heading>
     </div>
@@ -66,6 +71,11 @@ export interface SectionHeadingProps {
    */
   headingLevel?: HeadingLevel;
 
+  /**
+   * Word wrap behavior for the heading
+   */
+  isHeadingWordWrap?: boolean;
+
   /**
    * Text content for `SectionHeading`.
    */