@arc-ui/community-components 3.4.0 → 3.5.0

package/lib/index.d.cts

@@ -572,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)
      */
@@ -702,5 +706,59 @@ interface VideoPortraitCardProps {
     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 };
+/**
+ * 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

@@ -572,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)
      */
@@ -702,5 +706,59 @@ interface VideoPortraitCardProps {
     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 };
+/**
+ * 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 };