@arc-ui/community-components 3.13.0 → 3.14.0

package/lib/index.d.cts

@@ -17,6 +17,8 @@ import { TemplateBannerProps } from '@arc-ui/components/TemplateBanner';
 import { TagProps } from '@arc-ui/components/Tag';
 import { ReactPlayerProps } from 'react-player/types';
 import { VerticalSpaceProps } from '@arc-ui/components/VerticalSpace';
+import { SurfaceBackgroundColor } from '@arc-ui/components/Surface';
+import { TabsItemProps } from '@arc-ui/components/Tabs';
 
 declare const HeaderBarNotification: React$1.FC<HeaderBarNotificationProps>;
 interface HeaderBarNotificationProps {
@@ -602,6 +604,11 @@ interface ArticleSidebarProps {
      * Sharing options for the article.
      */
     share?: Share;
+    /**
+     * The article URL used by the share buttons.
+     * If it is not provided, the component uses the current browser URL.
+     */
+    url?: string;
 }
 
 type ListProps = InformationCardProps;
@@ -707,6 +714,8 @@ interface InlineLinkGroupProps {
     headingLevel?: "1" | "2" | "3" | "4" | "5" | "6";
     /** Array of link items to display */
     links: InlineLinkGroupItem[];
+    /** When true, removes the underline from links (shown only on focus). Defaults to false */
+    isImplied?: boolean;
 }
 interface InlineLinkGroupItem {
     /** Display text for the link */
@@ -760,11 +769,16 @@ interface VideoCardPlayerProps {
     playIconSize: "s" | "l";
     thumbnail?: ReactPlayerProps["light"];
     children?: React$1.ReactNode;
+    previewTabIndex?: number;
+    wrapper?: React$1.ReactNode;
+    fallback?: React$1.ReactNode;
 }
 
 interface VideoHeroCardContentProps {
     title: string;
+    titleLevel?: HeadingLevel;
     label: string;
+    labelLevel?: HeadingLevel;
     description: string | ReactNode;
     background: "dark" | "light";
     videoDate?: string;
@@ -795,7 +809,9 @@ interface VideoPortraitCardProps {
      */
     thumbnail?: {
         title: string;
+        titleLevel?: HeadingLevel;
         label: string;
+        labelLevel?: HeadingLevel;
         img: string;
     };
     /**
@@ -929,5 +945,62 @@ interface PartnerBrandLogosProps {
     subgroups: PartnerLogosSubgroup[];
 }
 
-export { Accordion, ActionTile, ArticleCarousel, ArticleSidebar, Author, BannerWithTabs, BusinessSegmentSwitcher, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost, HeaderBarNotification, Highlights, InlineLinkGroup, LinkTile, PartnerBrandLogos, ProductNavigation, PromoListing, PromoListingThumbnailSignpost, Quote, SectionHeading, Statistics, Summary, ThumbnailSignpost, VideoHeroCard, VideoPortraitCard };
-export type { AccordionProps, ActionTileProps, ArticleCarouselProps, ArticleSidebarProps, AuthorProps, BannerWithTabsProps, BentoGridContent, BentoInformationCard, BentoMediaCard, BusinessSegmentSwitcherProps, ContentInfoWidgetProps, CopyLeadProps, DownloadListProps, FAQsProps, FeaturePostProps, HeaderBarNotificationProps, HighlightsProps, InlineLinkGroupItem, InlineLinkGroupProps, LinkTileProps, ListProps, LogoTileItem, PartnerBrandLogosProps, PartnerLogosSubgroup, ProductNavigationProps, PromoListingProps, PromoListingThumbnailSignpostProps, QuoteProps, SectionHeadingProps, StatisticsProps, SummaryProps, ThumbnailSignpostProps, VideoHeroCardProps, VideoPortraitCardProps };
+declare const ProductCard: React$1.FC<ProductCardProps>;
+interface ProductCardProps {
+    heading: string;
+    headingLevel: HeadingLevel;
+    topSlot?: ReactNode;
+    bottomSlot?: ReactNode;
+    promoted?: {
+        content: ReactNode;
+        background: SurfaceBackgroundColor;
+    };
+    divider?: boolean;
+    button?: Omit<ButtonV2Props, "buttonStyle" | "isFullWidth">;
+}
+
+declare const ProductCardBenefits: React$1.FC<ProductCardBenefitsProps>;
+interface ProductCardBenefitsProps {
+    /** Heading displayed above the benefits list */
+    heading?: string;
+    /** heading level for accessibility */
+    headingLevel?: HeadingLevel;
+    /** List of benefits with associated icons */
+    benefits: {
+        benefit: string;
+        icon: string;
+    }[];
+}
+
+declare const ProductCardPriceIncrease: React$1.FC<ProductCardPriceIncreaseProps>;
+interface ProductCardPriceIncreaseProps {
+    /** Heading displayed above the price increase list */
+    heading?: string;
+    /** heading level for accessibility */
+    headingLevel?: HeadingLevel;
+    /** List of price increase entries (e.g. ["£48.99 by April 2027"]) */
+    items: string[];
+}
+
+declare const ProductCardPrice: React$1.FC<ProductCardPriceProps>;
+interface ProductCardPriceProps {
+    /** Text displayed above the price (e.g. "From") */
+    prefix?: string;
+    /** The price value (e.g. "£29.99") */
+    value: string;
+    /** Text displayed below the price (e.g. "a month per user") */
+    suffix?: string;
+}
+
+declare const ProductCardGrid: React$1.FC<ProductCardGridProps>;
+interface Tab extends TabsItemProps {
+    cards: React$1.ReactNode[];
+}
+interface ProductCardGridProps extends Omit<SectionHeadingProps, "isPadded" | "isCentered" | "image"> {
+    tabs?: Tab[];
+    expanded?: boolean;
+    hideTabs?: boolean;
+}
+
+export { Accordion, ActionTile, ArticleCarousel, ArticleSidebar, Author, BannerWithTabs, BusinessSegmentSwitcher, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost, HeaderBarNotification, Highlights, InlineLinkGroup, LinkTile, PartnerBrandLogos, ProductCard, ProductCardBenefits, ProductCardGrid, ProductCardPrice, ProductCardPriceIncrease, ProductNavigation, PromoListing, PromoListingThumbnailSignpost, Quote, SectionHeading, Statistics, Summary, ThumbnailSignpost, VideoHeroCard, VideoPortraitCard };
+export type { AccordionProps, ActionTileProps, ArticleCarouselProps, ArticleSidebarProps, AuthorProps, BannerWithTabsProps, BentoGridContent, BentoInformationCard, BentoMediaCard, BusinessSegmentSwitcherProps, ContentInfoWidgetProps, CopyLeadProps, DownloadListProps, FAQsProps, FeaturePostProps, HeaderBarNotificationProps, HighlightsProps, InlineLinkGroupItem, InlineLinkGroupProps, LinkTileProps, ListProps, LogoTileItem, PartnerBrandLogosProps, PartnerLogosSubgroup, ProductCardBenefitsProps, ProductCardGridProps, ProductCardPriceIncreaseProps, ProductCardPriceProps, ProductCardProps, ProductNavigationProps, PromoListingProps, PromoListingThumbnailSignpostProps, QuoteProps, SectionHeadingProps, StatisticsProps, SummaryProps, Tab, ThumbnailSignpostProps, VideoHeroCardProps, VideoPortraitCardProps };

package/lib/index.d.mts

@@ -17,6 +17,8 @@ import { TemplateBannerProps } from '@arc-ui/components/TemplateBanner';
 import { TagProps } from '@arc-ui/components/Tag';
 import { ReactPlayerProps } from 'react-player/types';
 import { VerticalSpaceProps } from '@arc-ui/components/VerticalSpace';
+import { SurfaceBackgroundColor } from '@arc-ui/components/Surface';
+import { TabsItemProps } from '@arc-ui/components/Tabs';
 
 declare const HeaderBarNotification: React$1.FC<HeaderBarNotificationProps>;
 interface HeaderBarNotificationProps {
@@ -602,6 +604,11 @@ interface ArticleSidebarProps {
      * Sharing options for the article.
      */
     share?: Share;
+    /**
+     * The article URL used by the share buttons.
+     * If it is not provided, the component uses the current browser URL.
+     */
+    url?: string;
 }
 
 type ListProps = InformationCardProps;
@@ -707,6 +714,8 @@ interface InlineLinkGroupProps {
     headingLevel?: "1" | "2" | "3" | "4" | "5" | "6";
     /** Array of link items to display */
     links: InlineLinkGroupItem[];
+    /** When true, removes the underline from links (shown only on focus). Defaults to false */
+    isImplied?: boolean;
 }
 interface InlineLinkGroupItem {
     /** Display text for the link */
@@ -760,11 +769,16 @@ interface VideoCardPlayerProps {
     playIconSize: "s" | "l";
     thumbnail?: ReactPlayerProps["light"];
     children?: React$1.ReactNode;
+    previewTabIndex?: number;
+    wrapper?: React$1.ReactNode;
+    fallback?: React$1.ReactNode;
 }
 
 interface VideoHeroCardContentProps {
     title: string;
+    titleLevel?: HeadingLevel;
     label: string;
+    labelLevel?: HeadingLevel;
     description: string | ReactNode;
     background: "dark" | "light";
     videoDate?: string;
@@ -795,7 +809,9 @@ interface VideoPortraitCardProps {
      */
     thumbnail?: {
         title: string;
+        titleLevel?: HeadingLevel;
         label: string;
+        labelLevel?: HeadingLevel;
         img: string;
     };
     /**
@@ -929,5 +945,62 @@ interface PartnerBrandLogosProps {
     subgroups: PartnerLogosSubgroup[];
 }
 
-export { Accordion, ActionTile, ArticleCarousel, ArticleSidebar, Author, BannerWithTabs, BusinessSegmentSwitcher, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost, HeaderBarNotification, Highlights, InlineLinkGroup, LinkTile, PartnerBrandLogos, ProductNavigation, PromoListing, PromoListingThumbnailSignpost, Quote, SectionHeading, Statistics, Summary, ThumbnailSignpost, VideoHeroCard, VideoPortraitCard };
-export type { AccordionProps, ActionTileProps, ArticleCarouselProps, ArticleSidebarProps, AuthorProps, BannerWithTabsProps, BentoGridContent, BentoInformationCard, BentoMediaCard, BusinessSegmentSwitcherProps, ContentInfoWidgetProps, CopyLeadProps, DownloadListProps, FAQsProps, FeaturePostProps, HeaderBarNotificationProps, HighlightsProps, InlineLinkGroupItem, InlineLinkGroupProps, LinkTileProps, ListProps, LogoTileItem, PartnerBrandLogosProps, PartnerLogosSubgroup, ProductNavigationProps, PromoListingProps, PromoListingThumbnailSignpostProps, QuoteProps, SectionHeadingProps, StatisticsProps, SummaryProps, ThumbnailSignpostProps, VideoHeroCardProps, VideoPortraitCardProps };
+declare const ProductCard: React$1.FC<ProductCardProps>;
+interface ProductCardProps {
+    heading: string;
+    headingLevel: HeadingLevel;
+    topSlot?: ReactNode;
+    bottomSlot?: ReactNode;
+    promoted?: {
+        content: ReactNode;
+        background: SurfaceBackgroundColor;
+    };
+    divider?: boolean;
+    button?: Omit<ButtonV2Props, "buttonStyle" | "isFullWidth">;
+}
+
+declare const ProductCardBenefits: React$1.FC<ProductCardBenefitsProps>;
+interface ProductCardBenefitsProps {
+    /** Heading displayed above the benefits list */
+    heading?: string;
+    /** heading level for accessibility */
+    headingLevel?: HeadingLevel;
+    /** List of benefits with associated icons */
+    benefits: {
+        benefit: string;
+        icon: string;
+    }[];
+}
+
+declare const ProductCardPriceIncrease: React$1.FC<ProductCardPriceIncreaseProps>;
+interface ProductCardPriceIncreaseProps {
+    /** Heading displayed above the price increase list */
+    heading?: string;
+    /** heading level for accessibility */
+    headingLevel?: HeadingLevel;
+    /** List of price increase entries (e.g. ["£48.99 by April 2027"]) */
+    items: string[];
+}
+
+declare const ProductCardPrice: React$1.FC<ProductCardPriceProps>;
+interface ProductCardPriceProps {
+    /** Text displayed above the price (e.g. "From") */
+    prefix?: string;
+    /** The price value (e.g. "£29.99") */
+    value: string;
+    /** Text displayed below the price (e.g. "a month per user") */
+    suffix?: string;
+}
+
+declare const ProductCardGrid: React$1.FC<ProductCardGridProps>;
+interface Tab extends TabsItemProps {
+    cards: React$1.ReactNode[];
+}
+interface ProductCardGridProps extends Omit<SectionHeadingProps, "isPadded" | "isCentered" | "image"> {
+    tabs?: Tab[];
+    expanded?: boolean;
+    hideTabs?: boolean;
+}
+
+export { Accordion, ActionTile, ArticleCarousel, ArticleSidebar, Author, BannerWithTabs, BusinessSegmentSwitcher, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost, HeaderBarNotification, Highlights, InlineLinkGroup, LinkTile, PartnerBrandLogos, ProductCard, ProductCardBenefits, ProductCardGrid, ProductCardPrice, ProductCardPriceIncrease, ProductNavigation, PromoListing, PromoListingThumbnailSignpost, Quote, SectionHeading, Statistics, Summary, ThumbnailSignpost, VideoHeroCard, VideoPortraitCard };
+export type { AccordionProps, ActionTileProps, ArticleCarouselProps, ArticleSidebarProps, AuthorProps, BannerWithTabsProps, BentoGridContent, BentoInformationCard, BentoMediaCard, BusinessSegmentSwitcherProps, ContentInfoWidgetProps, CopyLeadProps, DownloadListProps, FAQsProps, FeaturePostProps, HeaderBarNotificationProps, HighlightsProps, InlineLinkGroupItem, InlineLinkGroupProps, LinkTileProps, ListProps, LogoTileItem, PartnerBrandLogosProps, PartnerLogosSubgroup, ProductCardBenefitsProps, ProductCardGridProps, ProductCardPriceIncreaseProps, ProductCardPriceProps, ProductCardProps, ProductNavigationProps, PromoListingProps, PromoListingThumbnailSignpostProps, QuoteProps, SectionHeadingProps, StatisticsProps, SummaryProps, Tab, ThumbnailSignpostProps, VideoHeroCardProps, VideoPortraitCardProps };