@arc-ui/community-mcp 0.2.1 → 0.2.2

package/dist/types/components.d.ts

@@ -1,4 +1,5 @@
 import React$1, { ReactNode, FC } from 'react';
+import { NavigationHeaderActionProps } from '@arc-ui/components/NavigationHeader';
 import { HeadingLevel, HeadingProps } from '@arc-ui/components/Heading';
 import { ImageProps, ImageSourceProps } from '@arc-ui/components/Image';
 import { DisclosureProps } from '@arc-ui/components/Disclosure';
@@ -16,6 +17,55 @@ 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 {
+    /**
+     * Header Element to attach the notifcation too.
+     */
+    headerActionProps: NavigationHeaderActionProps;
+    /**
+     * Nofication ID used to store dismissal in users session
+     */
+    notificationId: string;
+    /**
+     * Always show on every reload, ignore saving dismissal to users session
+     */
+    isPersistant?: boolean;
+    /**
+     * Notification Icon
+     */
+    icon?: string;
+    /**
+     * Notification Image
+     */
+    image?: string;
+    /**
+     * Notification Heading
+     */
+    heading: string;
+    /**
+     * Notification tagline
+     */
+    tagline?: string;
+    /**
+     * Notification content
+     */
+    children?: React$1.ReactNode;
+    /**
+     * Data for the button, click events and text
+     */
+    button?: {
+        handleClick: () => void;
+        text: string;
+    };
+    /**
+     * Specify a size or mutliple sizes where the notification only appears.
+     */
+    showAtSize?: ("s" | "m" | "l" | "xl")[];
+}
 
 interface AccordionHeadingProps {
     /**
@@ -203,7 +253,14 @@ interface CopyLeadProps {
 
 declare const DownloadList: React$1.FC<DownloadListProps>;
 interface DownloadListProps extends Omit<SectionHeadingProps, "isPadded"> {
+    /**
+     * Set the list of `Download` components.
+     */
     downloads: DownloadProps[];
+    /**
+     * Align the `Download` list below or to the right of the `SectionHeading`.
+     */
+    alignment?: "below" | "right";
 }
 
 declare const FAQs: React$1.FC<FAQsProps>;
@@ -224,7 +281,8 @@ interface FeaturePostAppButtonFooter {
 
 interface FeaturePostCtaFooter {
     type: "cta";
-    button: Pick<ButtonProps, "label" | "onClick" | "href" | "target" | "ariaLabel">;
+    /** CTA button options. The button style defaults to `secondary`. */
+    button: Pick<ButtonV2Props, "label" | "onClick" | "href" | "target" | "ariaLabel" | "buttonStyle">;
     author?: AuthorProps;
 }
 
@@ -318,26 +376,8 @@ interface HighlightsProps extends Omit<SectionHeadingProps, "isPadded"> {
      * Optional CTA rendered at the end of Highlights.
      * Only ONE CTA is allowed.
      */
-    cta?: HighlightsCTAProps;
+    cta?: ButtonV2Props;
 }
-/**
- * CTA configuration for Highlights
- */
-type HighlightsCTAProps = Pick<ButtonV2Props, "label" | "href" | "onClick" | "iconPosition" | "ariaLabel" | "target"> & {
-    /**
-     * Allowed button styles only.
-     * Primary is intentionally NOT supported.
-     */
-    buttonStyle: "secondary" | "compact";
-    /**
-     * Icon override & Active icon override
-     * - undefined → uses default BtIconArrowRightFill for compact style
-     * - null → icon disabled
-     * - string → custom icon
-     */
-    icon?: string | null;
-    iconActive?: string | null;
-};
 
 /**
  * Use `PromoListing` to give supporting information about a page or proposition in the form of the card components (`ImpactCard`, `InformationCard`, `MediaCard` and `TypographyCard`).
@@ -547,6 +587,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;
@@ -605,7 +650,7 @@ interface ContentInfoWidgetProps {
 }
 
 declare const ActionTile: React$1.FC<ActionTileProps>;
-interface ActionTileProps extends React$1.HTMLAttributes<HTMLDivElement> {
+interface ActionTileProps {
     /**
      * Icon to display in default state
      */
@@ -618,6 +663,10 @@ interface ActionTileProps extends React$1.HTMLAttributes<HTMLDivElement> {
      * Heading text (required)
      */
     heading: string;
+    /**
+     * Whether to use the compact tile variant
+     */
+    isCompact?: boolean;
     /**
      * Whether the tile is in active/selected state
      */
@@ -625,7 +674,7 @@ interface ActionTileProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /**
      * Click handler
      */
-    onClick?: () => void;
+    onClick?: React$1.MouseEventHandler<HTMLButtonElement>;
 }
 
 declare const LinkTile: React$1.FC<LinkTileProps>;
@@ -636,6 +685,8 @@ interface LinkTileProps extends React$1.HTMLAttributes<HTMLDivElement> {
     href?: string;
     /** Whether to show the arrow icon. Defaults to true */
     showIcon?: boolean;
+    /** Visual tone variant. Defaults to brand */
+    tone?: "brand" | "neutral";
 }
 
 declare const InlineLinkGroup: React$1.FC<InlineLinkGroupProps>;
@@ -646,6 +697,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 */
@@ -699,11 +752,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;
@@ -734,7 +792,9 @@ interface VideoPortraitCardProps {
      */
     thumbnail?: {
         title: string;
+        titleLevel?: HeadingLevel;
         label: string;
+        labelLevel?: HeadingLevel;
         img: string;
     };
     /**
@@ -764,16 +824,19 @@ interface BentoMediaCard extends Omit<MediaCardProps, "isContained" | "buttonIco
  * 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
+ * - card4: Typography card with label, heading and url
  */
 type BentoGridContent = {
     card1: BentoInformationCard | BentoMediaCard;
     card2: BentoInformationCard | BentoMediaCard;
     card3?: BentoInformationCard;
     card4: {
-        url: string;
-        label?: string;
+        url: TypographyCardProps["url"];
+        label?: TypographyCardProps["label"];
+        /** Overrides the default heading if provided and is not falsey. */
+        heading?: string;
         text?: TypographyCardProps["text"];
+        onClick?: TypographyCardProps["onClick"];
     };
 };
 
@@ -865,5 +928,270 @@ interface PartnerBrandLogosProps {
     subgroups: PartnerLogosSubgroup[];
 }
 
-export { Accordion, ActionTile, ArticleCarousel, ArticleSidebar, Author, BannerWithTabs, BusinessSegmentSwitcher, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost, 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, 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[];
+    /** Optional prop to hide the left border */
+    hideBorder?: boolean;
+}
+
+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;
+}
+
+declare const SubHeaderCell: React$1.FC<SubHeaderCellProps>;
+interface SubHeaderCellProps {
+    /**
+     * Price shown at the top of the sub-header cell (prefix, value, suffix).
+     */
+    price: ProductCardPriceProps;
+    /**
+     * Optional upcoming price-increase details rendered beneath the price.
+     */
+    priceIncrease?: ProductCardPriceIncreaseProps;
+    /**
+     * Optional call-to-action button rendered at the bottom of the cell. Rendered full-width.
+     */
+    button?: ButtonV2Props;
+    /**
+     * Zero-based index of the column this cell belongs to. Used to highlight every other column, starting with the first.
+     */
+    columnIndex?: number;
+}
+
+interface ComparisonColumn {
+    /**
+     * Stable identifier for the column; used as a React key.
+     */
+    id: string;
+    /**
+     * Visible label rendered in the column header cell (e.g. a plan name).
+     */
+    label: string;
+    /**
+     * Optional promotional text displayed in a branded banner above the column
+     * header label. When set, the banner is rendered inside the header cell with
+     * a dark brand background.
+     */
+    promoted?: string;
+    /**
+     * Optional sub-header content (price, upcoming price increase, call-to-action) rendered in a row beneath the header. When any column defines this, the sub-header row is shown.
+     */
+    subheader?: SubHeaderCellProps;
+}
+
+interface ComparisonSubRow {
+    /**
+     * One cell per column, in the same order as `columns`. Length MUST equal columns.length.
+     */
+    cells: React$1.ReactNode[];
+}
+
+declare const FeatureCell: React$1.FC<FeatureCellProps>;
+interface FeatureCellProps {
+    /**
+     * Icon shown alongside the package name.
+     */
+    icon: string;
+    /**
+     * Package / plan title.
+     */
+    title: string;
+    /**
+     * Optional supporting copy shown beneath the title.
+     */
+    description?: string;
+    /**
+     * Optional popover content shown when the user interacts with the info icon.
+     */
+    popoverContent?: string | React$1.ReactNode;
+}
+
+interface ComparisonRow {
+    /**
+     * Feature label rendered as the row's full-width header, spanning all columns above the content row(s).
+     */
+    feature: FeatureCellProps;
+    /**
+     * One cell per column for the row's primary content row, in the same order as `columns`. Length MUST equal columns.length.
+     */
+    cells: React$1.ReactNode[];
+    /**
+     * Optional additional content rows rendered beneath the primary row, for the less common case where a feature spans multiple rows.
+     */
+    subRows?: ComparisonSubRow[];
+    /**
+     * Id of the `ComparisonSection` this row belongs to. Omit to render the row before all sections. An id with no matching section logs a dev warning and renders the row unsectioned.
+     */
+    sectionId?: string;
+}
+
+interface ComparisonSection {
+    /**
+     * Stable identifier for the section; used as a React key and to link the toggle to its content region for accessibility.
+     */
+    id: string;
+    /**
+     * Heading shown in the section's toggle button.
+     */
+    heading: React$1.ReactNode;
+    /**
+     * Heading level for the section heading, for correct document outline. Defaults to a sensible level.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Initial open state when the section is uncontrolled. Defaults to `false`.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Controlled open state. When provided, the section is controlled and `onOpenChange` should update it.
+     */
+    open?: boolean;
+    /**
+     * Called with the next open state when the toggle is activated. Required for controlled usage; optional otherwise.
+     */
+    onOpenChange?: (open: boolean) => void;
+}
+
+declare const ComparisonTable: React$1.FC<ComparisonTableProps>;
+interface ComparisonTableProps {
+    /**
+     * Column definitions driving the header cells and the number of content cells
+     * per row. Each `ComparisonColumn` has:
+     *
+     * - `id` (`string`) — Stable identifier; used as a React key.
+     * - `label` (`string`) — Visible text in the column header (e.g. a plan name).
+     * - `promoted` (`string`, optional) — Promotional banner text shown above the label in a branded Surface.
+     * - `subheader` (`SubHeaderCellProps`, optional) — Price, price-increase items, and a CTA button rendered in a row beneath the header.
+     */
+    columns: ComparisonColumn[];
+    /**
+     * All rows. Rows without `sectionId` render first, before any sections. Rows
+     * with a `sectionId` render inside the matching section, in input order. On
+     * mobile each row is a full-width feature header above its content row(s); on
+     * desktop the feature becomes the left-hand column of the row. Each
+     * `ComparisonRow` has:
+     *
+     * - `feature` (`FeatureCellProps`) — Icon, title, description, and optional popover for the feature label.
+     * - `cells` (`ReactNode[]`) — One cell per column, in the same order as `columns`. Supports strings or rich ReactNode content (e.g. tick/cross icons).
+     * - `subRows` (`ComparisonSubRow[]`, optional) — Additional content rows beneath the primary row, for features spanning multiple rows.
+     * - `sectionId` (`string`, optional) — Id of the section the row belongs to. An unknown id logs a dev warning and the row renders unsectioned.
+     */
+    rows?: ComparisonRow[];
+    /**
+     * Section metadata only. Sections render in array order, after unsectioned
+     * rows, each with a full-width toggle that expands or collapses the rows whose
+     * `sectionId` matches. A section with no matching rows is hidden. Each `ComparisonSection` has:
+     *
+     * - `id` (`string`) — Stable identifier; used as a React key and for accessibility linking.
+     * - `heading` (`ReactNode`) — Text shown in the section's toggle button.
+     * - `headingLevel` (`HeadingLevel`, optional) — Semantic heading level for the document outline.
+     * - `defaultOpen` (`boolean`, optional) — Initial open state when uncontrolled. Defaults to `false`.
+     * - `open` (`boolean`, optional) — Controlled open state.
+     * - `onOpenChange` (`(open: boolean) => void`, optional) — Callback for controlled usage.
+     */
+    sections?: ComparisonSection[];
+    /**
+     * Optional controls. On mobile they render in a full-width cell beneath the header; on desktop they render in the left-hand feature column beside the sub-header. Omit to hide the control row entirely.
+     */
+    controls?: React$1.ReactNode;
+    /**
+     * When `true`, wraps the table in a rounded, clipped container with an inset shadow overlay border. Defaults to `false`.
+     */
+    hasBorder?: boolean;
+    /**
+     * When `true`, the desktop column header row sticks to the top of the scroll container as the body scrolls. Defaults to `false`.
+     */
+    hasStickyHeader?: boolean;
+}
+
+declare const HeaderCell: React$1.FC<HeaderCellProps>;
+interface HeaderCellProps {
+    /**
+     * Content rendered inside the column header cell (typically a column label).
+     */
+    children?: string;
+    /**
+     * Zero-based index of the column this header cell belongs to. Used to highlight every other column, starting with the first.
+     */
+    columnIndex?: number;
+    /**
+     * Optional promotional text displayed in a branded banner above the column label.
+     */
+    promoted?: string;
+}
+
+declare const Cell: React$1.FC<CellProps>;
+interface CellProps {
+    /**
+     * Content rendered inside the content cell (text or an Arc primitive such as a tick/cross).
+     */
+    children?: React$1.ReactNode;
+    /**
+     * Zero-based index of the column this cell belongs to. Used to highlight every other column, starting with the first.
+     */
+    columnIndex?: number;
+    /**
+     * Whether this cell sits in the last row of the table. Highlighted cells in the last row get rounded bottom corners.
+     */
+    isLastRow?: boolean;
+}
+
+declare const ControlCell: React$1.FC<ControlCellProps>;
+interface ControlCellProps {
+    /**
+     * Control content rendered for this column.
+     */
+    children?: React$1.ReactNode;
+}
+
+export { Accordion, ActionTile, ArticleCarousel, ArticleSidebar, Author, BannerWithTabs, BusinessSegmentSwitcher, Cell, ComparisonTable, ContentInfoWidget, ControlCell, CopyLead, DownloadList, FAQs, FeatureCell, FeaturePost, HeaderBarNotification, HeaderCell, Highlights, InlineLinkGroup, LinkTile, PartnerBrandLogos, ProductCard, ProductCardBenefits, ProductCardGrid, ProductCardPrice, ProductCardPriceIncrease, ProductNavigation, PromoListing, PromoListingThumbnailSignpost, Quote, SectionHeading, Statistics, SubHeaderCell, Summary, ThumbnailSignpost, VideoHeroCard, VideoPortraitCard };
+export type { AccordionProps, ActionTileProps, ArticleCarouselProps, ArticleSidebarProps, AuthorProps, BannerWithTabsProps, BentoGridContent, BentoInformationCard, BentoMediaCard, BusinessSegmentSwitcherProps, CellProps, ComparisonColumn, ComparisonRow, ComparisonSection, ComparisonSubRow, ComparisonTableProps, ContentInfoWidgetProps, ControlCellProps, CopyLeadProps, DownloadListProps, FAQsProps, FeatureCellProps, FeaturePostProps, HeaderBarNotificationProps, HeaderCellProps, HighlightsProps, InlineLinkGroupItem, InlineLinkGroupProps, LinkTileProps, ListProps, LogoTileItem, PartnerBrandLogosProps, PartnerLogosSubgroup, ProductCardBenefitsProps, ProductCardGridProps, ProductCardPriceIncreaseProps, ProductCardPriceProps, ProductCardProps, ProductNavigationProps, PromoListingProps, PromoListingThumbnailSignpostProps, QuoteProps, SectionHeadingProps, StatisticsProps, SubHeaderCellProps, SummaryProps, Tab, ThumbnailSignpostProps, VideoHeroCardProps, VideoPortraitCardProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arc-ui/community-mcp",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "type": "module",
   "homepage": "https://ui.digital-ent-int.bt.com",
   "author": "BT Business Digital UI Team <ui-digital-ent-int@bt.com>",
@@ -30,9 +30,9 @@
     "tslib": "^2.8.1",
     "tsup": "^8.3.5",
     "typescript": "^5.6.3",
-    "@arc-ui/community-components": "^3.8.1",
-    "@arc-ui/community-typescript-config": "^0.1.0",
-    "@arc-ui/community-eslint-config": "^0.1.1"
+    "@arc-ui/community-components": "^3.17.0",
+    "@arc-ui/community-eslint-config": "^0.1.2",
+    "@arc-ui/community-typescript-config": "^0.1.1"
   },
   "scripts": {
     "lint:ts": "eslint .",