@arc-ui/community-components 3.2.0 → 3.4.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';
@@ -14,6 +14,7 @@ import { InformationCardProps } from '@arc-ui/components/InformationCard';
 import { TypographyCardProps } from '@arc-ui/components/TypographyCard';
 import { TemplateBannerProps } from '@arc-ui/components/TemplateBanner';
 import { TagProps } from '@arc-ui/components/Tag';
+import { ReactPlayerProps } from 'react-player/types';
 
 interface AccordionHeadingProps {
     /**
@@ -358,10 +359,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;
 }
 
 /**
@@ -572,62 +569,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> {
     /**
@@ -650,11 +591,32 @@ 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;
 }
 
+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 {
@@ -688,5 +650,57 @@ interface PromoListingThumbnailSignpostProps extends SectionHeadingProps {
     thumbnailList: ThumbnailSignpostProps[];
 }
 
-export { Accordion, ActionTile, ArticleSidebar, Author, BannerWithTabs, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost, HeroLink, Highlights, LinkTile, ProductNavigation, PromoListing, PromoListingThumbnailSignpost, Quote, SectionHeading, Statistics, Summary, ThumbnailSignpost };
-export type { AccordionProps, ActionTileProps, ArticleSidebarProps, AuthorProps, BannerWithTabsProps, ContentInfoWidgetProps, CopyLeadProps, DownloadListProps, FAQsProps, FeaturePostProps, HeroLinkProps, HighlightsProps, LinkTileProps, ListProps, ProductNavigationProps, PromoListingProps, PromoListingThumbnailSignpostProps, QuoteProps, SectionHeadingProps, StatisticsProps, SummaryProps, ThumbnailSignpostProps };
+type PlayerProps = Pick<ReactPlayerProps, "onReady" | "onPlay" | "onStart" | "onPause" | "onEnded" | "onError" | "src">;
+
+interface VideoCardPlayerProps {
+    player: PlayerProps;
+    orientation: "portrait" | "landscape";
+    playIconSize: "s" | "l";
+    thumbnail?: ReactPlayerProps["light"];
+    children?: React$1.ReactNode;
+}
+
+interface VideoHeroCardContentProps {
+    title: string;
+    label: string;
+    description: string | ReactNode;
+    background: "dark" | "light";
+    videoDate?: string;
+    duration?: string;
+    subtitleAvailabilityText?: string;
+}
+
+declare const VideoHeroCard: ({ content, thumbnailImg, player, ...props }: VideoHeroCardProps) => JSX.Element;
+interface VideoHeroCardProps {
+    /**
+     * Content for the video card.
+     */
+    content: Omit<VideoHeroCardContentProps, "background">;
+    /**
+     * Thumbnail for the video hero card.
+     */
+    thumbnailImg: string;
+    /**
+     * Configuration for the video player.
+     */
+    player: VideoCardPlayerProps["player"];
+}
+
+declare const VideoPortraitCard: ({ thumbnail, player, ...props }: VideoPortraitCardProps) => JSX.Element;
+interface VideoPortraitCardProps {
+    /**
+     * Thumbnail content, video will autoplay if omitted.
+     */
+    thumbnail?: {
+        title: string;
+        label: string;
+        img: string;
+    };
+    /**
+     * Configuration for the video player.
+     */
+    player: VideoCardPlayerProps["player"];
+}
+
+export { Accordion, ActionTile, ArticleSidebar, Author, BannerWithTabs, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost, Highlights, InlineLinkGroup, LinkTile, ProductNavigation, PromoListing, PromoListingThumbnailSignpost, Quote, SectionHeading, Statistics, Summary, ThumbnailSignpost, VideoHeroCard, VideoPortraitCard };
+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, VideoHeroCardProps, VideoPortraitCardProps };

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';
@@ -14,6 +14,7 @@ import { InformationCardProps } from '@arc-ui/components/InformationCard';
 import { TypographyCardProps } from '@arc-ui/components/TypographyCard';
 import { TemplateBannerProps } from '@arc-ui/components/TemplateBanner';
 import { TagProps } from '@arc-ui/components/Tag';
+import { ReactPlayerProps } from 'react-player/types';
 
 interface AccordionHeadingProps {
     /**
@@ -358,10 +359,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;
 }
 
 /**
@@ -572,62 +569,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> {
     /**
@@ -650,11 +591,32 @@ 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;
 }
 
+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 {
@@ -688,5 +650,57 @@ interface PromoListingThumbnailSignpostProps extends SectionHeadingProps {
     thumbnailList: ThumbnailSignpostProps[];
 }
 
-export { Accordion, ActionTile, ArticleSidebar, Author, BannerWithTabs, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost, HeroLink, Highlights, LinkTile, ProductNavigation, PromoListing, PromoListingThumbnailSignpost, Quote, SectionHeading, Statistics, Summary, ThumbnailSignpost };
-export type { AccordionProps, ActionTileProps, ArticleSidebarProps, AuthorProps, BannerWithTabsProps, ContentInfoWidgetProps, CopyLeadProps, DownloadListProps, FAQsProps, FeaturePostProps, HeroLinkProps, HighlightsProps, LinkTileProps, ListProps, ProductNavigationProps, PromoListingProps, PromoListingThumbnailSignpostProps, QuoteProps, SectionHeadingProps, StatisticsProps, SummaryProps, ThumbnailSignpostProps };
+type PlayerProps = Pick<ReactPlayerProps, "onReady" | "onPlay" | "onStart" | "onPause" | "onEnded" | "onError" | "src">;
+
+interface VideoCardPlayerProps {
+    player: PlayerProps;
+    orientation: "portrait" | "landscape";
+    playIconSize: "s" | "l";
+    thumbnail?: ReactPlayerProps["light"];
+    children?: React$1.ReactNode;
+}
+
+interface VideoHeroCardContentProps {
+    title: string;
+    label: string;
+    description: string | ReactNode;
+    background: "dark" | "light";
+    videoDate?: string;
+    duration?: string;
+    subtitleAvailabilityText?: string;
+}
+
+declare const VideoHeroCard: ({ content, thumbnailImg, player, ...props }: VideoHeroCardProps) => JSX.Element;
+interface VideoHeroCardProps {
+    /**
+     * Content for the video card.
+     */
+    content: Omit<VideoHeroCardContentProps, "background">;
+    /**
+     * Thumbnail for the video hero card.
+     */
+    thumbnailImg: string;
+    /**
+     * Configuration for the video player.
+     */
+    player: VideoCardPlayerProps["player"];
+}
+
+declare const VideoPortraitCard: ({ thumbnail, player, ...props }: VideoPortraitCardProps) => JSX.Element;
+interface VideoPortraitCardProps {
+    /**
+     * Thumbnail content, video will autoplay if omitted.
+     */
+    thumbnail?: {
+        title: string;
+        label: string;
+        img: string;
+    };
+    /**
+     * Configuration for the video player.
+     */
+    player: VideoCardPlayerProps["player"];
+}
+
+export { Accordion, ActionTile, ArticleSidebar, Author, BannerWithTabs, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost, Highlights, InlineLinkGroup, LinkTile, ProductNavigation, PromoListing, PromoListingThumbnailSignpost, Quote, SectionHeading, Statistics, Summary, ThumbnailSignpost, VideoHeroCard, VideoPortraitCard };
+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, VideoHeroCardProps, VideoPortraitCardProps };