@arc-ui/community-components 3.1.0 → 3.3.0

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.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

@@ -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) => (