@arc-ui/community-components 3.2.0 → 3.3.0

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

package/src/components/index.ts

@@ -14,8 +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.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"]
+["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;
-}