@arc-ui/community-components 3.0.1 → 3.1.0

package/src/components/ArticleSidebar/types/text-section.ts

@@ -1,7 +1,8 @@
-import { type HeadingLevel } from "@arc-ui/components/dist/Heading";
+import { ReactNode } from "react";
+import { type HeadingLevel } from "@arc-ui/components/Heading";
 
 export interface TextSection {
   heading: string;
-  content: string;
+  content: string | ReactNode;
   headingLevel?: HeadingLevel;
 }

package/src/components/ArticleSidebar/types/topic.ts

@@ -1,5 +1,5 @@
-import { type HeadingLevel } from "@arc-ui/components/dist/Heading";
-import { type TagProps } from "@arc-ui/components/dist/types/components/Tag/Tag";
+import { type HeadingLevel } from "@arc-ui/components/Heading";
+import { type TagProps } from "@arc-ui/components/Tag";
 
 export interface Topic {
   heading: string;

package/src/components/Author/Author.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { filterDataAttrs } from "@arc-ui/community-utils/filter-data-attrs";
+import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
 
 import { Grid, GridRow, GridCol } from "@arc-ui/components/Grid";
 import { type AvatarProps, Avatar } from "@arc-ui/components/Avatar";
@@ -21,7 +21,7 @@ export const Author: React.FC<AuthorProps> = ({
   const isLargeAvatar = avatar.size === "l" || avatar.size === "xl";
 
   return (
-    <div {...filterDataAttrs(props)}>
+    <div {...filterAttrs(props)}>
       <Grid isFluid isGutterless>
         <GridRow align="center">
           <GridCol xs={isLargeAvatar ? 12 : "auto"}>

package/src/components/BannerWithTabs/BannerWithTabs.tsx

@@ -2,16 +2,20 @@ import React, { FC } from "react";
 
 import classNames from "classnames";
 
-import styles from "./BannerWithTabs.module.css";
-import { SectionHeading, SectionHeadingProps } from "../SectionHeading";
 import { TabbedBanner } from "@arc-ui/components/TabbedBanner";
-import { TemplateBannerProps } from "@arc-ui/components/dist/types/components/TemplateBanner/TemplateBanner";
+import { TemplateBannerProps } from "@arc-ui/components/TemplateBanner";
+
+import { SectionHeading, SectionHeadingProps } from "../SectionHeading";
+
+import styles from "./BannerWithTabs.module.css";
 
 export const BannerWithTabs: FC<BannerWithTabsProps> = ({
   tabs,
   defaultValue,
   heading,
   content,
+  id,
+  isHeadingWordWrap,
   alignTypography = "left",
   minHeight,
   minHeightM,
@@ -24,6 +28,8 @@ export const BannerWithTabs: FC<BannerWithTabsProps> = ({
         })}
       >
         <SectionHeading
+          id={id}
+          isHeadingWordWrap={isHeadingWordWrap}
           heading={heading}
           content={content}
           isPadded={alignTypography === "left" ? true : false}

package/src/components/CopyLead/CopyLead.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { filterDataAttrs } from "@arc-ui/community-utils/filter-data-attrs";
+import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
 
-import { type HeadingLevel } from "@arc-ui/components/dist/Heading";
-import { type VideoPlayerProps } from "@arc-ui/components/dist/VideoPlayer";
+import { type HeadingLevel } from "@arc-ui/components/Heading";
+import { type VideoPlayerProps } from "@arc-ui/components/VideoPlayer";
 
 import {
   type CopyLeadButton,
@@ -19,26 +19,30 @@ import { ContentTemplate } from "./templates/Content";
 export const CopyLead: React.FC<CopyLeadProps> = ({
   button,
   heading,
+  id,
   headingLevel = "2",
   listItems,
   video,
   image,
   content,
+  isHeadingWordWrap,
   isReverseOrder = false,
   ...props
 }) => {
   if (video || image) {
     return (
       <MediaTemplate
+        id={id}
         content={content}
         video={video}
         image={image}
         listItems={listItems}
         heading={heading}
         headingLevel={headingLevel}
+        isHeadingWordWrap={isHeadingWordWrap}
         button={button}
         isReverseOrder={isReverseOrder}
-        {...filterDataAttrs(props)}
+        {...filterAttrs(props)}
       />
     );
   }
@@ -46,12 +50,14 @@ export const CopyLead: React.FC<CopyLeadProps> = ({
   if (content) {
     return (
       <ContentTemplate
+        id={id}
         listItems={listItems}
         heading={heading}
         headingLevel={headingLevel}
+        isHeadingWordWrap={isHeadingWordWrap}
         button={button}
         content={content}
-        {...filterDataAttrs(props)}
+        {...filterAttrs(props)}
       />
     );
   }
@@ -70,6 +76,16 @@ export interface CopyLeadProps {
    */
   headingLevel?: HeadingLevel;
 
+  /**
+   * id for the heading of `<MediaTemplate />` and `<ContentTemplate />`
+   */
+  id?: string;
+
+  /**
+   * Word wrap behavior for the heading
+   */
+  isHeadingWordWrap?: boolean;
+
   /**
    * Reverse the columns so the image / video appears on the left. Doesn't affect mobile layouts, and is only applied if there is a video or an image.
    */

package/src/components/CopyLead/components/MediaContent/MediaContent.tsx

@@ -12,11 +12,18 @@ import styles from "../../CopyLead.module.css";
 
 export const MediaContent: React.FC<MediaContentProps> = ({
   heading,
+  id,
   headingLevel,
+  isHeadingWordWrap,
   children,
 }) => (
   <div className={styles.mediaContainer}>
-    <ArcHeading level={headingLevel} size="xl">
+    <ArcHeading
+      id={id}
+      level={headingLevel}
+      isWordWrap={isHeadingWordWrap}
+      size="xl"
+    >
       {heading}
     </ArcHeading>
 
@@ -31,6 +38,8 @@ export const MediaContent: React.FC<MediaContentProps> = ({
 
 interface MediaContentProps {
   heading: string;
+  id?: string;
   headingLevel?: HeadingLevel;
+  isHeadingWordWrap?: boolean;
   children?: string | ReactNode;
 }

package/src/components/CopyLead/templates/Content/Content.tsx

@@ -22,8 +22,10 @@ import { getListHeadingLevel } from "../../utils/getListHeadingLevel";
 
 export const ContentTemplate: React.FC<ContentTemplateProps> = ({
   button,
+  id,
   heading,
   headingLevel,
+  isHeadingWordWrap,
   listItems,
   content,
 }) => {
@@ -41,8 +43,10 @@ export const ContentTemplate: React.FC<ContentTemplateProps> = ({
     <Container type="content" alignment="top">
       <Column>
         <SectionHeading
+          id={id}
           heading={heading}
           headingLevel={headingLevel}
+          isHeadingWordWrap={isHeadingWordWrap}
           content={content}
         />
 

package/src/components/CopyLead/templates/Media/Media.tsx

@@ -30,12 +30,14 @@ const VideoPlayer = React.lazy(() =>
 
 export const MediaTemplate: React.FC<MediaTemplateProps> = ({
   button,
+  id,
   heading,
   headingLevel,
   listItems,
   video,
   image,
   content,
+  isHeadingWordWrap,
   isReverseOrder = false,
 }) => {
   const [isClient, setIsClient] = useState(false);
@@ -59,7 +61,12 @@ export const MediaTemplate: React.FC<MediaTemplateProps> = ({
       {!isMinWidthArcBreakpointXl && (
         <Columns>
           <ColumnsCol span={12} spanM={9}>
-            <MediaContent heading={heading} headingLevel={headingLevel}>
+            <MediaContent
+              heading={heading}
+              headingLevel={headingLevel}
+              id={id}
+              isHeadingWordWrap={isHeadingWordWrap}
+            >
               {content}
             </MediaContent>
           </ColumnsCol>
@@ -99,6 +106,8 @@ export const MediaTemplate: React.FC<MediaTemplateProps> = ({
 interface MediaTemplateProps {
   heading: string;
   headingLevel: HeadingLevel;
+  id?: string;
+  isHeadingWordWrap?: boolean;
   listItems: CopyLeadListItem[];
   content?: string | ReactNode;
   isReverseOrder?: boolean;

package/src/components/CopyLead/types/copy-lead-button.ts

@@ -1,4 +1,4 @@
-import { type ButtonProps } from "@arc-ui/components/dist/types/components/Button/Button";
+import { type ButtonProps } from "@arc-ui/components/Button";
 
 export type CopyLeadButton = Pick<
   ButtonProps,

package/src/components/CopyLead/types/copy-lead-image.ts

@@ -1,7 +1,7 @@
 import {
   type ImageSourceProps,
   type ImageProps as ArcImageProps,
-} from "@arc-ui/components/dist/types/components/Image/Image";
+} from "@arc-ui/components/Image";
 
 export interface CopyLeadImage
   extends Pick<

package/src/components/DownloadList/DownloadList.tsx

@@ -8,7 +8,9 @@ import styles from "./DownloadList.module.css";
 
 export const DownloadList: React.FC<DownloadListProps> = ({
   heading,
+  id,
   headingLevel = "2",
+  isHeadingWordWrap,
   content,
   downloads,
 }) => {
@@ -16,7 +18,9 @@ export const DownloadList: React.FC<DownloadListProps> = ({
     <>
       <div className={styles.headingContainer}>
         <SectionHeading
+          id={id}
           heading={heading}
+          isHeadingWordWrap={isHeadingWordWrap}
           headingLevel={headingLevel}
           content={content}
         />

package/src/components/FAQs/FAQs.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 { Accordion, type AccordionProps } from "../Accordion";
 import { SectionHeading, type SectionHeadingProps } from "../SectionHeading";
@@ -14,17 +14,21 @@ import styles from "./FAQs.module.css";
 
 export const FAQs: React.FC<FAQsProps> = ({
   heading,
+  isHeadingWordWrap,
   content,
+  id,
   isPadded = false,
   headingLevel = "2",
   image,
-  type = "list",
+  type,
   linkListHeading = "Skip to section",
   accordionData,
   ...props
 }) => (
-  <div className={styles.FAQs} {...filterDataAttrs(props)}>
+  <div className={styles.FAQs} {...filterAttrs(props)}>
     <SectionHeading
+      id={id}
+      isHeadingWordWrap={isHeadingWordWrap}
       heading={heading}
       content={content}
       image={image}

package/src/components/FeaturePost/FeaturePost.tsx

@@ -1,8 +1,8 @@
-import React from "react";
+import React, { type ReactNode } from "react";
 import classNames from "classnames";
 import { isDate, format } from "date-fns";
 
-import { filterDataAttrs } from "@arc-ui/community-utils/filter-data-attrs";
+import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
 
 import { ArcSizeBreakpointsM } from "@arc-ui/tokens-arc";
 
@@ -31,12 +31,14 @@ import { MediaContent } from "./components/MediaContent/MediaContent";
  * */
 export const FeaturePost: React.FC<FeaturePostProps> = ({
   heading,
+  id,
   headingLevel = "2",
   label,
   image,
   content,
   footer,
   video,
+  isHeadingWordWrap,
   isReverseOrder = false,
   ...props
 }) => {
@@ -50,7 +52,7 @@ export const FeaturePost: React.FC<FeaturePostProps> = ({
       className={classNames(styles.featurePost, {
         [styles.featurePostReversed]: isReverseOrder,
       })}
-      {...filterDataAttrs(props)}
+      {...filterAttrs(props)}
     >
       <div className={styles.col}>
         <div className={styles.contentContainer}>
@@ -82,7 +84,12 @@ export const FeaturePost: React.FC<FeaturePostProps> = ({
             </Grid>
           )}
 
-          <Heading level={headingLevel} size="xl">
+          <Heading
+            id={id}
+            level={headingLevel}
+            isWordWrap={isHeadingWordWrap}
+            size="xl"
+          >
             {heading}
           </Heading>
 
@@ -165,15 +172,25 @@ export interface FeaturePostProps {
    */
   heading: string;
 
+  /**
+   * id for `FeaturePost`.
+   */
+  id?: string;
+
   /**
    * Determine a heading level for `<FeaturePost />`
    */
   headingLevel?: HeadingLevel;
 
+  /**
+   * Word wrap behavior for the heading
+   */
+  isHeadingWordWrap?: boolean;
+
   /**
    * Text content for `FeaturePost`.
    */
-  content: string;
+  content: string | ReactNode;
 
   /**
    * Reverse the columns so the image / video appears on the left. Doesn't affect mobile layouts, and is only applied if there is a video or an image.

package/src/components/FeaturePost/types/feature-post-app-button-footer.ts

@@ -1,4 +1,4 @@
-import { type AppButtonProps } from "@arc-ui/components/dist/types/components/AppButton";
+import { type AppButtonProps } from "@arc-ui/components/AppButton";
 
 export interface FeaturePostAppButtonFooter {
   type: "appButton";

package/src/components/FeaturePost/types/feature-post-cta-footer.ts

@@ -1,4 +1,5 @@
-import { type ButtonProps } from "@arc-ui/components/dist/types/components/Button/Button";
+import { type ButtonProps } from "@arc-ui/components/Button";
+
 import { type AuthorProps } from "../../Author/Author";
 
 export interface FeaturePostCtaFooter {

package/src/components/FeaturePost/types/feature-post-image.ts

@@ -1,7 +1,7 @@
 import {
   type ImageSourceProps,
   type ImageProps as ArcImageProps,
-} from "@arc-ui/components/dist/types/components/Image/Image";
+} from "@arc-ui/components/Image";
 
 export interface FeaturePostImage
   extends Pick<

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

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

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

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

package/src/components/Highlights/Highlights.tsx

@@ -16,6 +16,8 @@ import { type HighlightListItem } from "./types";
 export const Highlights: React.FC<HighlightsProps> = ({
   heading,
   headingLevel,
+  id,
+  isHeadingWordWrap,
   content,
   listItems,
   columns = "2",
@@ -27,9 +29,11 @@ export const Highlights: React.FC<HighlightsProps> = ({
     <div>
       <SectionHeading
         isPadded
+        id={id}
         data-testid="highlights-header"
         heading={heading}
         headingLevel={headingLevel}
+        isHeadingWordWrap={isHeadingWordWrap}
         content={content}
       />
 
@@ -49,6 +53,7 @@ export const Highlights: React.FC<HighlightsProps> = ({
             href={cta.href}
             onClick={cta.onClick}
             size="m"
+            ariaLabel={cta.ariaLabel}
             buttonStyle={cta.buttonStyle}
             icon={
               cta.buttonStyle === "compact"
@@ -92,7 +97,7 @@ export interface HighlightsProps extends Omit<SectionHeadingProps, "isPadded"> {
  */
 export type HighlightsCTAProps = Pick<
   ButtonV2Props,
-  "label" | "href" | "onClick" | "iconPosition"
+  "label" | "href" | "onClick" | "iconPosition" | "ariaLabel"
 > & {
   /**
    * Allowed button styles only.

package/src/components/Highlights/components/HighlightItem/HighlightItem.tsx

@@ -48,6 +48,7 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
         <Link
           href={link.url}
           id={link.url}
+          aria-label={link.ariaLabel}
           onClick={link.onClick}
           rel=""
           size="m"

package/src/components/Highlights/types/highlight-link.ts

@@ -1,5 +1,6 @@
 export interface HighlightLink {
   url: string;
   textLink: string;
+  ariaLabel?: string;
   onClick?: (e: React.MouseEvent) => void;
 }