@arc-ui/community-components 3.0.1 → 3.1.0

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/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`.
    */

package/src/components/Statistics/Statistics.tsx

@@ -15,18 +15,22 @@ import { getLinkProps } from "./helpers/get-link-props";
 import { type Statistic } from "./types/statistic";
 
 export const Statistics: React.FC<StatisticsProps> = ({
+  id,
+  isHeadingWordWrap,
   headingLevel,
   heading,
   content,
   statistics,
 }) => {
-  const id = useId();
+  const componentId = useId();
 
   return (
     <Columns>
       <ColumnsCol spanM={9}>
         <SectionHeading
+          id={id}
           heading={heading}
+          isHeadingWordWrap={isHeadingWordWrap}
           headingLevel={headingLevel}
           content={content}
         />
@@ -35,7 +39,7 @@ export const Statistics: React.FC<StatisticsProps> = ({
       <ColumnsCol spanL={9}>
         <ul className={styles.list}>
           {statistics.map(({ stat, copy, link, source, sourceUrl }, i) => (
-            <li key={`statistic-${id}-${i}`}>
+            <li key={`statistic-${componentId}-${i}`}>
               {i !== 0 && (
                 <>
                   <VerticalSpace size="24" sizeS="32" sizeXL="40" />

package/src/components/index.ts

@@ -14,3 +14,6 @@ export * from "./ArticleSidebar";
 export * from "./ProductNavigation";
 export * from "./SectionHeading";
 export * from "./ContentInfoWidget";
+export * from "./HeroLink";
+export * from "./ActionTile";
+export * from "./LinkTile";

package/versions.json

@@ -1 +1 @@
-["v3.0.1","v3.0.0","v2.0.0","v1.1.0","v1.0.2","v1.0.1","v1.0.0","v0.1.0"]
+["v3.1.0","v3.0.1","v3.0.0","v2.0.0","v1.1.0","v1.0.2","v1.0.1","v1.0.0","v0.1.0"]

package/lib/_shared/cjs/filter-data-attrs-ajtUvDAC.cjs

@@ -1,15 +0,0 @@
-'use strict';
-
-var dataAttrRe = /^(data-.*)$/;
-var filterDataAttrs = function (props) {
-    var filteredProps = {};
-    for (var prop in props) {
-        if (Object.prototype.hasOwnProperty.call(props, prop) &&
-            dataAttrRe.test(prop)) {
-            filteredProps[prop] = props[prop];
-        }
-    }
-    return filteredProps;
-};
-
-exports.filterDataAttrs = filterDataAttrs;

package/lib/_shared/esm/filter-data-attrs-V7cbJuwS.mjs

@@ -1,13 +0,0 @@
-var dataAttrRe = /^(data-.*)$/;
-var filterDataAttrs = function (props) {
-    var filteredProps = {};
-    for (var prop in props) {
-        if (Object.prototype.hasOwnProperty.call(props, prop) &&
-            dataAttrRe.test(prop)) {
-            filteredProps[prop] = props[prop];
-        }
-    }
-    return filteredProps;
-};
-
-export { filterDataAttrs as f };