@arc-ui/community-components 3.3.0 → 3.5.0

package/lib/index.d.cts

@@ -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 {
     /**
@@ -571,9 +572,13 @@ interface ContentInfoWidgetProps {
 declare const ActionTile: React$1.FC<ActionTileProps>;
 interface ActionTileProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /**
-     * Optional icon to display
+     * Icon to display in default state
      */
     icon?: string;
+    /**
+     * Filled icon variant to display when tile is active. Falls back to icon if not provided
+     */
+    activeIcon?: string;
     /**
      * Heading text (required)
      */
@@ -649,5 +654,111 @@ 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 };
+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"];
+}
+
+/**
+ * Information card configuration for bento grid positions. Extends InformationCard with required cardUrl.
+ */
+interface BentoInformationCard extends Omit<InformationCardProps, "button" | "badges" | "preserveAspectRatios" | "onClick" | "cardUrl"> {
+    type: "information";
+    cardUrl: NonNullable<InformationCardProps["cardUrl"]>;
+}
+/**
+ * Media card configuration for bento grid positions. Extends MediaCard with required url and image-only media.
+ */
+interface BentoMediaCard extends Omit<MediaCardProps, "isContained" | "buttonIcon" | "preserveAspectRatios" | "url" | "media"> {
+    type: "media";
+    url: NonNullable<MediaCardProps["url"]>;
+    media: Extract<MediaCardProps["media"], {
+        type: "img";
+    }>;
+}
+/**
+ * Content structure for the bento grid layout within each tab.
+ * - card1 & card2: Can be either information or media cards
+ * - card3: Optional information card
+ * - card4: Typography card with label and url
+ */
+type BentoGridContent = {
+    card1: BentoInformationCard | BentoMediaCard;
+    card2: BentoInformationCard | BentoMediaCard;
+    card3?: BentoInformationCard;
+    card4: {
+        url: string;
+        label?: string;
+        text?: TypographyCardProps["text"];
+    };
+};
+
+/**
+ * BusinessSegmentSwitcher displays tabbed content with a bento grid layout made up of 3 - 4 cards.
+ * Renders as tabs on desktop and a dropdown with carousel on mobile (below 1024px).
+ */
+declare const BusinessSegmentSwitcher: ({ tabs, defaultValue, ...props }: BusinessSegmentSwitcherProps) => JSX.Element;
+interface BusinessSegmentSwitcherProps {
+    /**
+     * Default to an initial value of a tab. If this is left blank it will default to first tab.
+     */
+    defaultValue?: string;
+    /**
+     * Array of tabs to render. Each tab requires a unique `value`, a `label` for display, and `content` containing card configurations for the bento grid layout.
+     */
+    tabs: {
+        value: string;
+        label: string;
+        content: BentoGridContent;
+    }[];
+}
+
+export { Accordion, ActionTile, ArticleSidebar, Author, BannerWithTabs, BusinessSegmentSwitcher, 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, BentoGridContent, BentoInformationCard, BentoMediaCard, BusinessSegmentSwitcherProps, 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

@@ -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 {
     /**
@@ -571,9 +572,13 @@ interface ContentInfoWidgetProps {
 declare const ActionTile: React$1.FC<ActionTileProps>;
 interface ActionTileProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /**
-     * Optional icon to display
+     * Icon to display in default state
      */
     icon?: string;
+    /**
+     * Filled icon variant to display when tile is active. Falls back to icon if not provided
+     */
+    activeIcon?: string;
     /**
      * Heading text (required)
      */
@@ -649,5 +654,111 @@ 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 };
+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"];
+}
+
+/**
+ * Information card configuration for bento grid positions. Extends InformationCard with required cardUrl.
+ */
+interface BentoInformationCard extends Omit<InformationCardProps, "button" | "badges" | "preserveAspectRatios" | "onClick" | "cardUrl"> {
+    type: "information";
+    cardUrl: NonNullable<InformationCardProps["cardUrl"]>;
+}
+/**
+ * Media card configuration for bento grid positions. Extends MediaCard with required url and image-only media.
+ */
+interface BentoMediaCard extends Omit<MediaCardProps, "isContained" | "buttonIcon" | "preserveAspectRatios" | "url" | "media"> {
+    type: "media";
+    url: NonNullable<MediaCardProps["url"]>;
+    media: Extract<MediaCardProps["media"], {
+        type: "img";
+    }>;
+}
+/**
+ * Content structure for the bento grid layout within each tab.
+ * - card1 & card2: Can be either information or media cards
+ * - card3: Optional information card
+ * - card4: Typography card with label and url
+ */
+type BentoGridContent = {
+    card1: BentoInformationCard | BentoMediaCard;
+    card2: BentoInformationCard | BentoMediaCard;
+    card3?: BentoInformationCard;
+    card4: {
+        url: string;
+        label?: string;
+        text?: TypographyCardProps["text"];
+    };
+};
+
+/**
+ * BusinessSegmentSwitcher displays tabbed content with a bento grid layout made up of 3 - 4 cards.
+ * Renders as tabs on desktop and a dropdown with carousel on mobile (below 1024px).
+ */
+declare const BusinessSegmentSwitcher: ({ tabs, defaultValue, ...props }: BusinessSegmentSwitcherProps) => JSX.Element;
+interface BusinessSegmentSwitcherProps {
+    /**
+     * Default to an initial value of a tab. If this is left blank it will default to first tab.
+     */
+    defaultValue?: string;
+    /**
+     * Array of tabs to render. Each tab requires a unique `value`, a `label` for display, and `content` containing card configurations for the bento grid layout.
+     */
+    tabs: {
+        value: string;
+        label: string;
+        content: BentoGridContent;
+    }[];
+}
+
+export { Accordion, ActionTile, ArticleSidebar, Author, BannerWithTabs, BusinessSegmentSwitcher, 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, BentoGridContent, BentoInformationCard, BentoMediaCard, BusinessSegmentSwitcherProps, ContentInfoWidgetProps, CopyLeadProps, DownloadListProps, FAQsProps, FeaturePostProps, HighlightsProps, InlineLinkGroupItem, InlineLinkGroupProps, LinkTileProps, ListProps, ProductNavigationProps, PromoListingProps, PromoListingThumbnailSignpostProps, QuoteProps, SectionHeadingProps, StatisticsProps, SummaryProps, ThumbnailSignpostProps, VideoHeroCardProps, VideoPortraitCardProps };