@arc-ui/community-components 3.1.0 → 3.3.0

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,6 +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 "./InlineLinkGroup";
+export * from "./ThumbnailSignpost";
+export * from "./PromoListingThumbnailSignpost";

package/versions.json

@@ -1 +1 @@
-["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"]
+["v3.3.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/HeroLink/HeroLink.cjs

@@ -1,35 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('../_shared/cjs/tslib.es6-BxB9I209.cjs');
-var React = require('react');
-var index = require('../_shared/cjs/index-Bp6Dd2i1.cjs');
-var BtIconArrowAltRight = require('../_shared/cjs/BtIconArrowAltRight-CLQdP61r.cjs');
-var Icon = require('@arc-ui/components/Icon');
-
-var styles = {"heroLink":"HeroLink-module_heroLink__WUqWB","heroLink-inner":"HeroLink-module_heroLink-inner__RE5i8","heroLink-label":"HeroLink-module_heroLink-label__93HPY","heroLink-icon":"HeroLink-module_heroLink-icon__l7o4U","heroLink--emptyLabel":"HeroLink-module_heroLink--emptyLabel__XY2sa"};
-
-/**
- * Pill-style HeroLink component with default and hover states
- */
-var HeroLink = function (_a) {
-    var _b;
-    var label = _a.label, onClick = _a.onClick, href = _a.href, id = _a.id, rel = _a.rel, target = _a.target, ariaLabel = _a.ariaLabel, ref = _a.ref, props = tslib_es6.__rest(_a, ["label", "onClick", "href", "id", "rel", "target", "ariaLabel", "ref"]);
-    var HeroLinkClasses = index.classNames(styles.heroLink, (_b = {},
-        _b[styles["heroLink--emptyLabel"]] = !label,
-        _b));
-    var commonProps = tslib_es6.__assign({ id: id, onClick: onClick, ref: ref }, props);
-    if (href) {
-        return (React.createElement("a", tslib_es6.__assign({}, commonProps, { className: HeroLinkClasses, href: href, rel: rel, "aria-label": ariaLabel, target: target }),
-            React.createElement("span", { className: styles["heroLink-inner"] },
-                label && React.createElement("span", { className: styles["heroLink-label"] }, label),
-                React.createElement("span", { className: styles["heroLink-icon"] },
-                    React.createElement(Icon.Icon, { testId: "hero-link-icon", size: 24, icon: BtIconArrowAltRight.BtIconArrowAltRight })))));
-    }
-    return (React.createElement("button", tslib_es6.__assign({}, commonProps, { className: HeroLinkClasses, "aria-label": ariaLabel }),
-        React.createElement("span", { className: styles["heroLink-inner"] },
-            label && React.createElement("span", { className: styles["heroLink-label"] }, label),
-            React.createElement("span", { className: styles["heroLink-icon"] },
-                React.createElement(Icon.Icon, { testId: "hero-link-icon", size: 24, icon: BtIconArrowAltRight.BtIconArrowAltRight })))));
-};
-
-exports.HeroLink = HeroLink;

package/lib/HeroLink/HeroLink.mjs

@@ -1,33 +0,0 @@
-import { a as __rest, _ as __assign } from '../_shared/esm/tslib.es6-D6Wu-xwB.mjs';
-import React from 'react';
-import { c as classNames } from '../_shared/esm/index-BfTCfPZ1.mjs';
-import { B as BtIconArrowAltRight } from '../_shared/esm/BtIconArrowAltRight-VH6RTTnL.mjs';
-import { Icon } from '@arc-ui/components/Icon';
-
-var styles = {"heroLink":"HeroLink-module_heroLink__WUqWB","heroLink-inner":"HeroLink-module_heroLink-inner__RE5i8","heroLink-label":"HeroLink-module_heroLink-label__93HPY","heroLink-icon":"HeroLink-module_heroLink-icon__l7o4U","heroLink--emptyLabel":"HeroLink-module_heroLink--emptyLabel__XY2sa"};
-
-/**
- * Pill-style HeroLink component with default and hover states
- */
-var HeroLink = function (_a) {
-    var _b;
-    var label = _a.label, onClick = _a.onClick, href = _a.href, id = _a.id, rel = _a.rel, target = _a.target, ariaLabel = _a.ariaLabel, ref = _a.ref, props = __rest(_a, ["label", "onClick", "href", "id", "rel", "target", "ariaLabel", "ref"]);
-    var HeroLinkClasses = classNames(styles.heroLink, (_b = {},
-        _b[styles["heroLink--emptyLabel"]] = !label,
-        _b));
-    var commonProps = __assign({ id: id, onClick: onClick, ref: ref }, props);
-    if (href) {
-        return (React.createElement("a", __assign({}, commonProps, { className: HeroLinkClasses, href: href, rel: rel, "aria-label": ariaLabel, target: target }),
-            React.createElement("span", { className: styles["heroLink-inner"] },
-                label && React.createElement("span", { className: styles["heroLink-label"] }, label),
-                React.createElement("span", { className: styles["heroLink-icon"] },
-                    React.createElement(Icon, { testId: "hero-link-icon", size: 24, icon: BtIconArrowAltRight })))));
-    }
-    return (React.createElement("button", __assign({}, commonProps, { className: HeroLinkClasses, "aria-label": ariaLabel }),
-        React.createElement("span", { className: styles["heroLink-inner"] },
-            label && React.createElement("span", { className: styles["heroLink-label"] }, label),
-            React.createElement("span", { className: styles["heroLink-icon"] },
-                React.createElement(Icon, { testId: "hero-link-icon", size: 24, icon: BtIconArrowAltRight })))));
-};
-
-export { HeroLink };

package/lib/HeroLink/styles.css

@@ -1 +0,0 @@
-.HeroLink-module_heroLink__WUqWB{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:16px 16px 16px 24px;border:2px solid #e5e5e5;border-radius:32px;background:transparent;color:#5514b4;text-decoration:none;font-size:14px;font-weight:500;line-height:1;cursor:pointer;transition:all 0.2s ease;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}.HeroLink-module_heroLink__WUqWB:hover{border-color:#3f187f;color:#3f187f}.HeroLink-module_heroLink-inner__RE5i8{display:flex;align-items:center;gap:4px}.HeroLink-module_heroLink-label__93HPY{white-space:nowrap}.HeroLink-module_heroLink-icon__l7o4U{display:flex;align-items:center;justify-content:center}.HeroLink-module_heroLink--emptyLabel__XY2sa{padding:16px}

package/lib/_shared/cjs/filter-attrs-BizjMsy0.cjs

@@ -1,27 +0,0 @@
-'use strict';
-
-/**
- * Filters out attributes from the given props object based on a pattern.
- *
- * This function extracts all properties that match either the `data-*` or `aria-*` attribute patterns
- * and returns a new object containing only those properties.
- *
- * @param props - The object containing properties to filter.
- * @returns A new object containing only the matched attributes (`data-*` and `aria-*`) from the input props.
- */
-var attributePrefixes = ["data-", "aria-"];
-var filterAttrs = function (props) {
-    var filteredProps = {};
-    var _loop_1 = function (prop) {
-        if (Object.prototype.hasOwnProperty.call(props, prop) &&
-            attributePrefixes.some(function (prefix) { return prop.startsWith(prefix); })) {
-            filteredProps[prop] = props[prop];
-        }
-    };
-    for (var prop in props) {
-        _loop_1(prop);
-    }
-    return filteredProps;
-};
-
-exports.filterAttrs = filterAttrs;

package/lib/_shared/esm/filter-attrs-DZ7RCEZm.mjs

@@ -1,25 +0,0 @@
-/**
- * Filters out attributes from the given props object based on a pattern.
- *
- * This function extracts all properties that match either the `data-*` or `aria-*` attribute patterns
- * and returns a new object containing only those properties.
- *
- * @param props - The object containing properties to filter.
- * @returns A new object containing only the matched attributes (`data-*` and `aria-*`) from the input props.
- */
-var attributePrefixes = ["data-", "aria-"];
-var filterAttrs = function (props) {
-    var filteredProps = {};
-    var _loop_1 = function (prop) {
-        if (Object.prototype.hasOwnProperty.call(props, prop) &&
-            attributePrefixes.some(function (prefix) { return prop.startsWith(prefix); })) {
-            filteredProps[prop] = props[prop];
-        }
-    };
-    for (var prop in props) {
-        _loop_1(prop);
-    }
-    return filteredProps;
-};
-
-export { filterAttrs as f };

package/src/components/HeroLink/HeroLink.module.css

@@ -1,44 +0,0 @@
-.heroLink {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  padding: 16px 16px 16px 24px;
-  border: 2px solid #e5e5e5;
-  border-radius: 32px;
-  background: transparent;
-  color: #5514b4;
-  text-decoration: none;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  width: fit-content;
-  height: fit-content;
-}
-
-.heroLink:hover {
-  border-color: #3f187f;
-  color: #3f187f;
-}
-
-.heroLink-inner {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.heroLink-label {
-  white-space: nowrap;
-}
-
-.heroLink-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.heroLink--emptyLabel {
-  padding: 16px;
-}

package/src/components/HeroLink/HeroLink.tsx

@@ -1,136 +0,0 @@
-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

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