@arc-ui/community-components 3.0.1 → 3.1.0

package/lib/index.d.cts

@@ -1,22 +1,19 @@
-import React$1, { ReactNode, FC } from 'react';
+import React$1, { ReactNode, FC, Ref } from 'react';
 import { HeadingLevel } from '@arc-ui/components/Heading';
-import { ImageProps, ImageSourceProps } from '@arc-ui/components/dist/types/components/Image/Image';
+import { ImageProps, ImageSourceProps } from '@arc-ui/components/Image';
 import { DisclosureProps } from '@arc-ui/components/Disclosure';
 import { AvatarProps } from '@arc-ui/components/Avatar';
-import { HeadingLevel as HeadingLevel$1 } from '@arc-ui/components/dist/Heading';
-import { VideoPlayerProps } from '@arc-ui/components/dist/VideoPlayer';
-import { ButtonProps } from '@arc-ui/components/dist/types/components/Button/Button';
+import { VideoPlayerProps } from '@arc-ui/components/VideoPlayer';
+import { ButtonProps } from '@arc-ui/components/Button';
 import { DownloadProps } from '@arc-ui/components/Download';
-import { VideoPlayerProps as VideoPlayerProps$1 } from '@arc-ui/components/VideoPlayer';
-import { AppButtonProps } from '@arc-ui/components/dist/types/components/AppButton';
+import { AppButtonProps } from '@arc-ui/components/AppButton';
 import { ButtonV2Props } from '@arc-ui/components/ButtonV2';
 import { MediaCardProps } from '@arc-ui/components/MediaCard';
 import { ImpactCardProps } from '@arc-ui/components/ImpactCard';
 import { InformationCardProps } from '@arc-ui/components/InformationCard';
 import { TypographyCardProps } from '@arc-ui/components/TypographyCard';
-import { TemplateBannerProps } from '@arc-ui/components/dist/types/components/TemplateBanner/TemplateBanner';
-import { TagProps } from '@arc-ui/components/dist/types/components/Tag/Tag';
-import { ButtonV2Props as ButtonV2Props$1 } from '@arc-ui/components/types/components/ButtonV2/ButtonV2';
+import { TemplateBannerProps } from '@arc-ui/components/TemplateBanner';
+import { TagProps } from '@arc-ui/components/Tag';
 
 interface AccordionHeadingProps {
     /**
@@ -105,7 +102,15 @@ interface CopyLeadProps {
     /**
      * Determine a heading level for `<MediaTemplate />` and `<ContentTemplate />`
      */
-    headingLevel?: HeadingLevel$1;
+    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.
      */
@@ -146,6 +151,10 @@ interface SectionHeadingProps {
      * Determine a heading level for `SectionHeading`.
      */
     headingLevel?: HeadingLevel;
+    /**
+     * Word wrap behavior for the heading
+     */
+    isHeadingWordWrap?: boolean;
     /**
      * Text content for `SectionHeading`.
      */
@@ -200,14 +209,22 @@ interface FeaturePostProps {
      * heading for `FeaturePost`.
      */
     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.
      */
@@ -230,12 +247,13 @@ interface FeaturePostProps {
     /**
      * Video embed. Supported platforms are YouTube and Vimeo.
      */
-    video?: VideoPlayerProps$1;
+    video?: VideoPlayerProps;
 }
 
 interface HighlightLink {
     url: string;
     textLink: string;
+    ariaLabel?: string;
     onClick?: (e: React.MouseEvent) => void;
 }
 
@@ -271,7 +289,7 @@ interface HighlightsProps extends Omit<SectionHeadingProps, "isPadded"> {
 /**
  * CTA configuration for Highlights
  */
-type HighlightsCTAProps = Pick<ButtonV2Props, "label" | "href" | "onClick" | "iconPosition"> & {
+type HighlightsCTAProps = Pick<ButtonV2Props, "label" | "href" | "onClick" | "iconPosition" | "ariaLabel"> & {
     /**
      * Allowed button styles only.
      * Primary is intentionally NOT supported.
@@ -317,6 +335,31 @@ interface PromoListingProps extends Omit<SectionHeadingProps, "isPadded"> {
      * Number of columns for desktop breakpoints. "2" and "3" column options available.
      */
     columns?: "2" | "3";
+    /**
+     * Optional button configuration displayed above the cards.
+     */
+    button?: PromoListingButton;
+    /**
+     * Text label displayed above the main heading in overline style
+     */
+    overlineLabel?: string;
+    /**
+     * Heading level for the overline label
+     */
+    overlineHeadingLevel?: HeadingLevel;
+}
+/**
+ * Button configuration for PromoListing component.
+ */
+interface PromoListingButton extends Omit<ButtonV2Props, "buttonStyle" | "icon" | "size"> {
+    /**
+     * 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;
 }
 
 /**
@@ -404,32 +447,37 @@ interface BannerWithTabsProps extends Omit<SectionHeadingProps, "image" | "isPad
 
 interface TextSection {
     heading: string;
-    content: string;
-    headingLevel?: HeadingLevel$1;
+    content: string | ReactNode;
+    headingLevel?: HeadingLevel;
 }
 
 interface Link {
     text: string;
     url: string;
+    ariaLabel?: string;
 }
 interface LinkSection {
     heading: string;
     links: Link[];
-    headingLevel?: HeadingLevel$1;
+    headingLevel?: HeadingLevel;
 }
 
 interface Topic {
     heading: string;
     tags: TagProps[];
-    headingLevel?: HeadingLevel$1;
+    headingLevel?: HeadingLevel;
 }
 
 interface Share {
     heading: string;
     articleTitle: string;
     x?: boolean;
-    headingLevel?: HeadingLevel$1;
+    headingLevel?: HeadingLevel;
     linkedin?: boolean;
+    linkedInAriaLabel?: string;
+    xAriaLabel?: string;
+    clipboardAriaLabel?: string;
+    emailAriaLabel?: string;
 }
 
 interface SidebarAuthor extends AuthorProps {
@@ -456,7 +504,7 @@ interface ArticleSidebarProps {
     /**
      * Links that are relevant to the article.
      */
-    linkSection: LinkSection;
+    linkSection?: LinkSection;
     /**
      * Topics rendered as tags that are relevant to the article.
      */
@@ -464,12 +512,10 @@ interface ArticleSidebarProps {
     /**
      * Sharing options for the article.
      */
-    share: Share;
+    share?: Share;
 }
 
-type ListInformationCardButtonProps = Pick<ButtonV2Props$1, "label" | "onClick" | "href">;
-type ListInformationCardProps = Pick<InformationCardProps, "heading" | "text">;
-type ListProps = ListInformationCardButtonProps & ListInformationCardProps;
+type ListProps = InformationCardProps;
 
 /**
  * Use `ProductNavigation` to give a collection of product information cards collected within a grid that has optional show/hide capability
@@ -524,5 +570,88 @@ interface ContentInfoWidgetProps {
     text: string;
 }
 
-export { Accordion, ArticleSidebar, Author, BannerWithTabs, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost, Highlights, ProductNavigation, PromoListing, Quote, SectionHeading, Statistics, Summary };
-export type { AccordionProps, ArticleSidebarProps, AuthorProps, BannerWithTabsProps, ContentInfoWidgetProps, CopyLeadProps, DownloadListProps, FAQsProps, FeaturePostProps, HighlightsProps, ListProps, ProductNavigationProps, PromoListingProps, QuoteProps, SectionHeadingProps, StatisticsProps, SummaryProps };
+type ElementUnion = HTMLButtonElement | HTMLAnchorElement;
+type ButtonRef = Ref<ElementUnion> | null;
+/**
+ * Pill-style HeroLink component with default and hover states
+ */
+declare const HeroLink: ({ label, onClick, href, id, rel, target, ariaLabel, ref, ...props }: HeroLinkProps) => JSX.Element;
+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;
+}
+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;
+}
+
+declare const ActionTile: React$1.FC<ActionTileProps>;
+interface ActionTileProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Optional icon to display
+     */
+    icon?: string;
+    /**
+     * Heading text (required)
+     */
+    heading: string;
+    /**
+     * Whether the tile is in active/selected state
+     */
+    isActive?: boolean;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+}
+
+declare const LinkTile: React$1.FC<LinkTileProps>;
+interface LinkTileProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    text?: string;
+    href?: string;
+    showIcon?: boolean;
+}
+
+export { Accordion, ActionTile, ArticleSidebar, Author, BannerWithTabs, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost, HeroLink, Highlights, LinkTile, ProductNavigation, PromoListing, Quote, SectionHeading, Statistics, Summary };
+export type { AccordionProps, ActionTileProps, ArticleSidebarProps, AuthorProps, BannerWithTabsProps, ContentInfoWidgetProps, CopyLeadProps, DownloadListProps, FAQsProps, FeaturePostProps, HeroLinkProps, HighlightsProps, LinkTileProps, ListProps, ProductNavigationProps, PromoListingProps, QuoteProps, SectionHeadingProps, StatisticsProps, SummaryProps };

package/lib/index.d.mts

@@ -1,22 +1,19 @@
-import React$1, { ReactNode, FC } from 'react';
+import React$1, { ReactNode, FC, Ref } from 'react';
 import { HeadingLevel } from '@arc-ui/components/Heading';
-import { ImageProps, ImageSourceProps } from '@arc-ui/components/dist/types/components/Image/Image';
+import { ImageProps, ImageSourceProps } from '@arc-ui/components/Image';
 import { DisclosureProps } from '@arc-ui/components/Disclosure';
 import { AvatarProps } from '@arc-ui/components/Avatar';
-import { HeadingLevel as HeadingLevel$1 } from '@arc-ui/components/dist/Heading';
-import { VideoPlayerProps } from '@arc-ui/components/dist/VideoPlayer';
-import { ButtonProps } from '@arc-ui/components/dist/types/components/Button/Button';
+import { VideoPlayerProps } from '@arc-ui/components/VideoPlayer';
+import { ButtonProps } from '@arc-ui/components/Button';
 import { DownloadProps } from '@arc-ui/components/Download';
-import { VideoPlayerProps as VideoPlayerProps$1 } from '@arc-ui/components/VideoPlayer';
-import { AppButtonProps } from '@arc-ui/components/dist/types/components/AppButton';
+import { AppButtonProps } from '@arc-ui/components/AppButton';
 import { ButtonV2Props } from '@arc-ui/components/ButtonV2';
 import { MediaCardProps } from '@arc-ui/components/MediaCard';
 import { ImpactCardProps } from '@arc-ui/components/ImpactCard';
 import { InformationCardProps } from '@arc-ui/components/InformationCard';
 import { TypographyCardProps } from '@arc-ui/components/TypographyCard';
-import { TemplateBannerProps } from '@arc-ui/components/dist/types/components/TemplateBanner/TemplateBanner';
-import { TagProps } from '@arc-ui/components/dist/types/components/Tag/Tag';
-import { ButtonV2Props as ButtonV2Props$1 } from '@arc-ui/components/types/components/ButtonV2/ButtonV2';
+import { TemplateBannerProps } from '@arc-ui/components/TemplateBanner';
+import { TagProps } from '@arc-ui/components/Tag';
 
 interface AccordionHeadingProps {
     /**
@@ -105,7 +102,15 @@ interface CopyLeadProps {
     /**
      * Determine a heading level for `<MediaTemplate />` and `<ContentTemplate />`
      */
-    headingLevel?: HeadingLevel$1;
+    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.
      */
@@ -146,6 +151,10 @@ interface SectionHeadingProps {
      * Determine a heading level for `SectionHeading`.
      */
     headingLevel?: HeadingLevel;
+    /**
+     * Word wrap behavior for the heading
+     */
+    isHeadingWordWrap?: boolean;
     /**
      * Text content for `SectionHeading`.
      */
@@ -200,14 +209,22 @@ interface FeaturePostProps {
      * heading for `FeaturePost`.
      */
     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.
      */
@@ -230,12 +247,13 @@ interface FeaturePostProps {
     /**
      * Video embed. Supported platforms are YouTube and Vimeo.
      */
-    video?: VideoPlayerProps$1;
+    video?: VideoPlayerProps;
 }
 
 interface HighlightLink {
     url: string;
     textLink: string;
+    ariaLabel?: string;
     onClick?: (e: React.MouseEvent) => void;
 }
 
@@ -271,7 +289,7 @@ interface HighlightsProps extends Omit<SectionHeadingProps, "isPadded"> {
 /**
  * CTA configuration for Highlights
  */
-type HighlightsCTAProps = Pick<ButtonV2Props, "label" | "href" | "onClick" | "iconPosition"> & {
+type HighlightsCTAProps = Pick<ButtonV2Props, "label" | "href" | "onClick" | "iconPosition" | "ariaLabel"> & {
     /**
      * Allowed button styles only.
      * Primary is intentionally NOT supported.
@@ -317,6 +335,31 @@ interface PromoListingProps extends Omit<SectionHeadingProps, "isPadded"> {
      * Number of columns for desktop breakpoints. "2" and "3" column options available.
      */
     columns?: "2" | "3";
+    /**
+     * Optional button configuration displayed above the cards.
+     */
+    button?: PromoListingButton;
+    /**
+     * Text label displayed above the main heading in overline style
+     */
+    overlineLabel?: string;
+    /**
+     * Heading level for the overline label
+     */
+    overlineHeadingLevel?: HeadingLevel;
+}
+/**
+ * Button configuration for PromoListing component.
+ */
+interface PromoListingButton extends Omit<ButtonV2Props, "buttonStyle" | "icon" | "size"> {
+    /**
+     * 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;
 }
 
 /**
@@ -404,32 +447,37 @@ interface BannerWithTabsProps extends Omit<SectionHeadingProps, "image" | "isPad
 
 interface TextSection {
     heading: string;
-    content: string;
-    headingLevel?: HeadingLevel$1;
+    content: string | ReactNode;
+    headingLevel?: HeadingLevel;
 }
 
 interface Link {
     text: string;
     url: string;
+    ariaLabel?: string;
 }
 interface LinkSection {
     heading: string;
     links: Link[];
-    headingLevel?: HeadingLevel$1;
+    headingLevel?: HeadingLevel;
 }
 
 interface Topic {
     heading: string;
     tags: TagProps[];
-    headingLevel?: HeadingLevel$1;
+    headingLevel?: HeadingLevel;
 }
 
 interface Share {
     heading: string;
     articleTitle: string;
     x?: boolean;
-    headingLevel?: HeadingLevel$1;
+    headingLevel?: HeadingLevel;
     linkedin?: boolean;
+    linkedInAriaLabel?: string;
+    xAriaLabel?: string;
+    clipboardAriaLabel?: string;
+    emailAriaLabel?: string;
 }
 
 interface SidebarAuthor extends AuthorProps {
@@ -456,7 +504,7 @@ interface ArticleSidebarProps {
     /**
      * Links that are relevant to the article.
      */
-    linkSection: LinkSection;
+    linkSection?: LinkSection;
     /**
      * Topics rendered as tags that are relevant to the article.
      */
@@ -464,12 +512,10 @@ interface ArticleSidebarProps {
     /**
      * Sharing options for the article.
      */
-    share: Share;
+    share?: Share;
 }
 
-type ListInformationCardButtonProps = Pick<ButtonV2Props$1, "label" | "onClick" | "href">;
-type ListInformationCardProps = Pick<InformationCardProps, "heading" | "text">;
-type ListProps = ListInformationCardButtonProps & ListInformationCardProps;
+type ListProps = InformationCardProps;
 
 /**
  * Use `ProductNavigation` to give a collection of product information cards collected within a grid that has optional show/hide capability
@@ -524,5 +570,88 @@ interface ContentInfoWidgetProps {
     text: string;
 }
 
-export { Accordion, ArticleSidebar, Author, BannerWithTabs, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost, Highlights, ProductNavigation, PromoListing, Quote, SectionHeading, Statistics, Summary };
-export type { AccordionProps, ArticleSidebarProps, AuthorProps, BannerWithTabsProps, ContentInfoWidgetProps, CopyLeadProps, DownloadListProps, FAQsProps, FeaturePostProps, HighlightsProps, ListProps, ProductNavigationProps, PromoListingProps, QuoteProps, SectionHeadingProps, StatisticsProps, SummaryProps };
+type ElementUnion = HTMLButtonElement | HTMLAnchorElement;
+type ButtonRef = Ref<ElementUnion> | null;
+/**
+ * Pill-style HeroLink component with default and hover states
+ */
+declare const HeroLink: ({ label, onClick, href, id, rel, target, ariaLabel, ref, ...props }: HeroLinkProps) => JSX.Element;
+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;
+}
+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;
+}
+
+declare const ActionTile: React$1.FC<ActionTileProps>;
+interface ActionTileProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Optional icon to display
+     */
+    icon?: string;
+    /**
+     * Heading text (required)
+     */
+    heading: string;
+    /**
+     * Whether the tile is in active/selected state
+     */
+    isActive?: boolean;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+}
+
+declare const LinkTile: React$1.FC<LinkTileProps>;
+interface LinkTileProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    text?: string;
+    href?: string;
+    showIcon?: boolean;
+}
+
+export { Accordion, ActionTile, ArticleSidebar, Author, BannerWithTabs, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost, HeroLink, Highlights, LinkTile, ProductNavigation, PromoListing, Quote, SectionHeading, Statistics, Summary };
+export type { AccordionProps, ActionTileProps, ArticleSidebarProps, AuthorProps, BannerWithTabsProps, ContentInfoWidgetProps, CopyLeadProps, DownloadListProps, FAQsProps, FeaturePostProps, HeroLinkProps, HighlightsProps, LinkTileProps, ListProps, ProductNavigationProps, PromoListingProps, QuoteProps, SectionHeadingProps, StatisticsProps, SummaryProps };