@arc-ui/community-components 3.1.0 → 3.3.0

package/lib/index.d.cts

@@ -1,4 +1,4 @@
-import React$1, { ReactNode, FC, Ref } from 'react';
+import React$1, { ReactNode, FC } from 'react';
 import { HeadingLevel } from '@arc-ui/components/Heading';
 import { ImageProps, ImageSourceProps } from '@arc-ui/components/Image';
 import { DisclosureProps } from '@arc-ui/components/Disclosure';
@@ -198,6 +198,8 @@ interface FeaturePostCtaFooter {
 
 interface FeaturePostImage extends Pick<ImageProps, "src" | "alt" | "loading" | "sizes" | "srcSet" | "width" | "height" | "fadeOnLoad"> {
     sources?: Pick<ImageSourceProps, "media" | "sizes" | "srcSet">[];
+    title?: string;
+    description?: string;
 }
 
 /**
@@ -224,7 +226,7 @@ interface FeaturePostProps {
     /**
      * Text content for `FeaturePost`.
      */
-    content: string | ReactNode;
+    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.
      */
@@ -356,10 +358,6 @@ interface PromoListingButton extends Omit<ButtonV2Props, "buttonStyle" | "icon"
      * 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;
 }
 
 /**
@@ -570,62 +568,6 @@ interface ContentInfoWidgetProps {
     text: string;
 }
 
-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> {
     /**
@@ -648,10 +590,64 @@ interface ActionTileProps extends React$1.HTMLAttributes<HTMLDivElement> {
 
 declare const LinkTile: React$1.FC<LinkTileProps>;
 interface LinkTileProps extends React$1.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;
 }
 
-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 };
+declare const InlineLinkGroup: React$1.FC<InlineLinkGroupProps>;
+interface InlineLinkGroupProps {
+    /** Optional overline label displayed above the link group */
+    label?: string;
+    /** Array of link items to display */
+    links: InlineLinkGroupItem[];
+}
+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;
+}
+
+/** Use `ThumbnailSignpost` to highlight key information or navigation points with an accompanying thumbnail image or icon. */
+declare const ThumbnailSignpost: ({ text, title, img, onClick, buttonLabel, ...props }: ThumbnailSignpostProps) => JSX.Element;
+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;
+}
+
+/**
+ * Use `PromoListingThumbnailSignpost` to give supporting information about a page or proposition in the form of the ThumbnailSignposts components.
+ */
+declare const PromoListingThumbnailSignpost: React$1.FC<PromoListingThumbnailSignpostProps>;
+interface PromoListingThumbnailSignpostProps extends SectionHeadingProps {
+    thumbnailList: ThumbnailSignpostProps[];
+}
+
+export { Accordion, ActionTile, ArticleSidebar, Author, BannerWithTabs, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost, Highlights, InlineLinkGroup, LinkTile, ProductNavigation, PromoListing, PromoListingThumbnailSignpost, Quote, SectionHeading, Statistics, Summary, ThumbnailSignpost };
+export type { AccordionProps, ActionTileProps, ArticleSidebarProps, AuthorProps, BannerWithTabsProps, ContentInfoWidgetProps, CopyLeadProps, DownloadListProps, FAQsProps, FeaturePostProps, HighlightsProps, InlineLinkGroupItem, InlineLinkGroupProps, LinkTileProps, ListProps, ProductNavigationProps, PromoListingProps, PromoListingThumbnailSignpostProps, QuoteProps, SectionHeadingProps, StatisticsProps, SummaryProps, ThumbnailSignpostProps };

package/lib/index.d.mts

@@ -1,4 +1,4 @@
-import React$1, { ReactNode, FC, Ref } from 'react';
+import React$1, { ReactNode, FC } from 'react';
 import { HeadingLevel } from '@arc-ui/components/Heading';
 import { ImageProps, ImageSourceProps } from '@arc-ui/components/Image';
 import { DisclosureProps } from '@arc-ui/components/Disclosure';
@@ -198,6 +198,8 @@ interface FeaturePostCtaFooter {
 
 interface FeaturePostImage extends Pick<ImageProps, "src" | "alt" | "loading" | "sizes" | "srcSet" | "width" | "height" | "fadeOnLoad"> {
     sources?: Pick<ImageSourceProps, "media" | "sizes" | "srcSet">[];
+    title?: string;
+    description?: string;
 }
 
 /**
@@ -224,7 +226,7 @@ interface FeaturePostProps {
     /**
      * Text content for `FeaturePost`.
      */
-    content: string | ReactNode;
+    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.
      */
@@ -356,10 +358,6 @@ interface PromoListingButton extends Omit<ButtonV2Props, "buttonStyle" | "icon"
      * 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;
 }
 
 /**
@@ -570,62 +568,6 @@ interface ContentInfoWidgetProps {
     text: string;
 }
 
-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> {
     /**
@@ -648,10 +590,64 @@ interface ActionTileProps extends React$1.HTMLAttributes<HTMLDivElement> {
 
 declare const LinkTile: React$1.FC<LinkTileProps>;
 interface LinkTileProps extends React$1.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;
 }
 
-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 };
+declare const InlineLinkGroup: React$1.FC<InlineLinkGroupProps>;
+interface InlineLinkGroupProps {
+    /** Optional overline label displayed above the link group */
+    label?: string;
+    /** Array of link items to display */
+    links: InlineLinkGroupItem[];
+}
+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;
+}
+
+/** Use `ThumbnailSignpost` to highlight key information or navigation points with an accompanying thumbnail image or icon. */
+declare const ThumbnailSignpost: ({ text, title, img, onClick, buttonLabel, ...props }: ThumbnailSignpostProps) => JSX.Element;
+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;
+}
+
+/**
+ * Use `PromoListingThumbnailSignpost` to give supporting information about a page or proposition in the form of the ThumbnailSignposts components.
+ */
+declare const PromoListingThumbnailSignpost: React$1.FC<PromoListingThumbnailSignpostProps>;
+interface PromoListingThumbnailSignpostProps extends SectionHeadingProps {
+    thumbnailList: ThumbnailSignpostProps[];
+}
+
+export { Accordion, ActionTile, ArticleSidebar, Author, BannerWithTabs, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost, Highlights, InlineLinkGroup, LinkTile, ProductNavigation, PromoListing, PromoListingThumbnailSignpost, Quote, SectionHeading, Statistics, Summary, ThumbnailSignpost };
+export type { AccordionProps, ActionTileProps, ArticleSidebarProps, AuthorProps, BannerWithTabsProps, ContentInfoWidgetProps, CopyLeadProps, DownloadListProps, FAQsProps, FeaturePostProps, HighlightsProps, InlineLinkGroupItem, InlineLinkGroupProps, LinkTileProps, ListProps, ProductNavigationProps, PromoListingProps, PromoListingThumbnailSignpostProps, QuoteProps, SectionHeadingProps, StatisticsProps, SummaryProps, ThumbnailSignpostProps };