@arc-ui/community-components 3.0.1 → 3.2.0

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/ThumbnailSignpost/ThumbnailSignpost.module.css

@@ -0,0 +1,112 @@
+@import url("@arc-ui/tokens-arc/dist/custom-media.css");
+
+.thumbnailSignpost button {
+  all: unset;
+  cursor: pointer;
+}
+
+.thumbnailSignpost {
+  display: inline-flex;
+  flex-direction: row;
+  gap: var(--arc-size-grid-gutter-s);
+  max-width: 720px;
+}
+
+.isLink:focus {
+  cursor: pointer;
+  outline: var(--focus-border-weight-s) solid
+    var(--focus-colors-light-border-subtle);
+  outline-offset: 2px;
+  border-radius: calc(var(--thumbnail-signpost-border-radius-s) + 2px);
+}
+
+.isLink:hover {
+  cursor: pointer;
+}
+
+.content {
+  width: 100%;
+  font: var(--sem-type-body-reg-s);
+}
+
+.heading {
+  display: block;
+  font: var(--sem-type-mobile-semi-xxs);
+  font-family: var(--sem-font-family-heading);
+  font-size: 1em;
+  font-weight: var(--sem-font-weight-semi-bold);
+  margin: 0;
+}
+
+.isLink:hover .heading,
+.isLink:focus .heading {
+  color: var(--button-v2-colors-light-text-hover);
+  text-decoration: underline;
+}
+
+.image {
+  width: calc(
+    (((100% + var(--arc-size-grid-gutter-s)) / 12) * 6) -
+      var(--arc-size-grid-gutter-s)
+  );
+}
+
+/* stylelint-disable-next-line plugin/selector-bem-pattern */
+.image img {
+  border-radius: var(--thumbnail-signpost-border-radius-s);
+  width: 100%;
+}
+
+@media (--arc-custom-media-min-width-s-px) {
+  .image {
+    width: calc(
+      (((100% + var(--arc-size-grid-gutter-s)) / 12) * 6) -
+        var(--arc-size-grid-gutter-m)
+    );
+  }
+
+  .thumbnailSignpost {
+    gap: var(--arc-size-grid-gutter-m);
+  }
+
+  .heading {
+    font: var(--sem-type-mobile-semi-xs);
+  }
+}
+
+@media (--arc-custom-media-min-width-xl-px) {
+  .thumbnailSignpost {
+    gap: var(--arc-size-grid-gutter-l);
+  }
+}
+
+.thumbnailButton {
+  display: flex;
+  align-items: center;
+  gap: var(--button-v2-gap-xs);
+  color: var(--button-v2-colors-light-text-default);
+  font: var(--sem-type-interface-button-s);
+  height: var(--button-v2-size-s);
+}
+
+.buttonIcon {
+  background: var(--icon-color-brand-alt-light);
+  display: block;
+  height: 100%;
+  line-height: 0;
+  mask-position: center;
+  mask-size: contain;
+  width: 100%;
+}
+
+.isLink:focus .buttonIcon,
+.isLink:hover .buttonIcon {
+  background: var(--button-v2-colors-light-text-hover);
+}
+
+.isLink:hover .thumbnailButton,
+.isLink:focus .thumbnailButton {
+  background: none;
+  color: var(--button-v2-colors-light-text-hover);
+  text-decoration: var(--sem-underline);
+}

package/src/components/ThumbnailSignpost/ThumbnailSignpost.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+
+import classNames from "classnames";
+import styles from "./ThumbnailSignpost.module.css";
+
+import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
+
+import { BtIconArrowRightFill } from "@arc-ui/icons/BtIconArrowRightFill";
+
+import { Image, type ImageProps } from "@arc-ui/components/Image";
+import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
+import { Heading } from "@arc-ui/components/Heading";
+
+/** Use `ThumbnailSignpost` to highlight key information or navigation points with an accompanying thumbnail image or icon. */
+export const ThumbnailSignpost = ({
+  text,
+  title,
+  img,
+  onClick,
+  buttonLabel,
+  ...props
+}: ThumbnailSignpostProps) => {
+  return (
+    <div
+      className={classNames(styles.thumbnailSignpost, {
+        [styles.isLink]: onClick,
+      })}
+      onClick={onClick}
+      aria-label={title}
+      tabIndex={onClick ? 0 : -1}
+      {...(onClick && { role: "button" })}
+      {...filterAttrs(props)}
+    >
+      {img && (
+        <div className={styles.image}>
+          <Image {...img} />
+        </div>
+      )}
+      <div className={styles.content}>
+        <span className={styles.heading}>{title}</span>
+        <VerticalSpace size="8" />
+        {text}
+        {buttonLabel && onClick && (
+          <>
+            <VerticalSpace size="8" />
+            <div className={styles.thumbnailButton}>
+              <span
+                className={styles.buttonIcon}
+                role="img"
+                style={{
+                  height: 24,
+                  width: 24,
+                  maskImage: `url("${BtIconArrowRightFill}")`,
+                  WebkitMaskImage: `url("${BtIconArrowRightFill}")`,
+                }}
+              />
+              <Heading size="xxs">{buttonLabel}</Heading>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export interface ThumbnailSignpostProps {
+  /**
+   * Title for the ThumbnailSignpost.
+   */
+  title: string;
+
+  /**
+   * Text content for the ThumbnailSignpost.
+   */
+  text: string;
+
+  /**
+   * Label for the button in the ThumbnailSignpost.
+   */
+  buttonLabel?: string;
+
+  /**
+   * Image properties for the ThumbnailSignpost.
+   */
+  img?: Pick<
+    ImageProps,
+    | "src"
+    | "alt"
+    | "loading"
+    | "sizes"
+    | "srcSet"
+    | "anchor"
+    | "fadeOnLoad"
+    | "fetchPriority"
+  >;
+  /**
+   * Optional click handler for the ThumbnailSignpost.
+   */
+  onClick?: () => void;
+}

package/src/components/ThumbnailSignpost/index.ts

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

package/src/components/index.ts

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

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.2.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 };