@arc-ui/community-components 3.0.1 → 3.2.0

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

@@ -1,4 +1,4 @@
-import { type HeadingLevel } from "@arc-ui/components/dist/Heading";
+import { type HeadingLevel } from "@arc-ui/components/Heading";
 
 export interface Share {
   heading: string;
@@ -6,4 +6,8 @@ export interface Share {
   x?: boolean;
   headingLevel?: HeadingLevel;
   linkedin?: boolean;
+  linkedInAriaLabel?: string;
+  xAriaLabel?: string;
+  clipboardAriaLabel?: string;
+  emailAriaLabel?: string;
 }

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";
@@ -12,19 +12,35 @@ import { Tabs, TabsList, TabsContent, TabsItem } from "@arc-ui/components/Tabs";
 
 import styles from "./FAQs.module.css";
 
+const scrollToSectionFocusFirstElement = (item: ExtendedAccordionProps) => {
+  if (!item.id) return;
+
+  document.getElementById(item.id)?.scrollIntoView({ behavior: "smooth" });
+
+  // preventScroll avoids interfering with the scroll animation.
+  document
+    .getElementById(item.disclosureList?.[0]?.id)
+    ?.querySelector("summary")
+    ?.focus({ preventScroll: true });
+};
+
 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}
@@ -49,12 +65,7 @@ export const FAQs: React.FC<FAQsProps> = ({
                 href={`#${item.id}`}
                 onClick={(e) => {
                   e.preventDefault();
-                  if (item.id) {
-                    const element = document.getElementById(item.id);
-                    if (element) {
-                      element.scrollIntoView({ behavior: "smooth" });
-                    }
-                  }
+                  scrollToSectionFocusFirstElement(item);
                 }}
               >
                 {item.altLinkTitle ?? item.heading}

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>
 
@@ -96,7 +103,11 @@ export const FeaturePost: React.FC<FeaturePostProps> = ({
 
           <VerticalSpace size="40" />
 
-          <Text size="l">{content}</Text>
+          {typeof content === "string" ? (
+            <Text size="l">{content}</Text>
+          ) : (
+            content
+          )}
 
           {footer?.type === "cta" && (
             <>
@@ -165,15 +176,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: 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/components/Image/Image.tsx

@@ -1,16 +1,40 @@
 import React from "react";
 
 import { Image as ArcImage } from "@arc-ui/components/Image";
+import { Text } from "@arc-ui/components/Text";
+import { Heading } from "@arc-ui/components/Heading";
+import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
 
 import { FeaturePostImage } from "../../types";
 
 import styles from "../../FeaturePost.module.css";
 
-export const Image: React.FC<FeaturePostImage> = ({ sources, ...props }) => (
-  <div className={styles.imgWrapper}>
-    <ArcImage fadeOnLoad {...props}>
-      {sources &&
-        sources.map((source) => <source key={source.srcSet} {...source} />)}
-    </ArcImage>
-  </div>
+export const Image: React.FC<FeaturePostImage> = ({
+  sources,
+  title,
+  description,
+  ...props
+}) => (
+  <>
+    <div className={styles.imgWrapper}>
+      <ArcImage fadeOnLoad {...props}>
+        {sources &&
+          sources.map((source) => <source key={source.srcSet} {...source} />)}
+      </ArcImage>
+    </div>
+    {title && (
+      <>
+        <VerticalSpace size="24" />
+        <Heading level="3" size="s">
+          {title}
+        </Heading>
+        {description && (
+          <>
+            <VerticalSpace size="16" />
+            <Text size="m">{description}</Text>
+          </>
+        )}
+      </>
+    )}
+  </>
 );

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<
@@ -16,4 +16,6 @@ export interface FeaturePostImage
     | "fadeOnLoad"
   > {
   sources?: Pick<ImageSourceProps, "media" | "sizes" | "srcSet">[];
+  title?: string;
+  description?: string;
 }

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;
+}