@arc-ui/community-components 2.0.0 → 3.0.0

package/lib/index.d.cts

@@ -0,0 +1,528 @@
+import React$1, { ReactNode, FC } from 'react';
+import { HeadingLevel } from '@arc-ui/components/Heading';
+import { ImageProps, ImageSourceProps } from '@arc-ui/components/dist/types/components/Image/Image';
+import { DisclosureProps } from '@arc-ui/components/Disclosure';
+import { AvatarProps } from '@arc-ui/components/Avatar';
+import { HeadingLevel as HeadingLevel$1 } from '@arc-ui/components/dist/Heading';
+import { VideoPlayerProps } from '@arc-ui/components/dist/VideoPlayer';
+import { ButtonProps } from '@arc-ui/components/dist/types/components/Button/Button';
+import { DownloadProps } from '@arc-ui/components/Download';
+import { VideoPlayerProps as VideoPlayerProps$1 } from '@arc-ui/components/VideoPlayer';
+import { AppButtonProps } from '@arc-ui/components/dist/types/components/AppButton';
+import { ButtonV2Props } from '@arc-ui/components/ButtonV2';
+import { MediaCardProps } from '@arc-ui/components/MediaCard';
+import { ImpactCardProps } from '@arc-ui/components/ImpactCard';
+import { InformationCardProps } from '@arc-ui/components/InformationCard';
+import { TypographyCardProps } from '@arc-ui/components/TypographyCard';
+import { TemplateBannerProps } from '@arc-ui/components/dist/types/components/TemplateBanner/TemplateBanner';
+import { TagProps } from '@arc-ui/components/dist/types/components/Tag/Tag';
+import { ButtonV2Props as ButtonV2Props$1 } from '@arc-ui/components/types/components/ButtonV2/ButtonV2';
+
+interface AccordionHeadingProps {
+    /**
+     * heading for `AccordionHeading`.
+     */
+    heading: string;
+    /**
+     * Adds padding to `AccordionHeading`.
+     */
+    isPadded?: boolean;
+    /**
+     * Determine a heading level for `AccordionHeading`.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Text content for `AccordionHeading`.
+     */
+    content?: string;
+    /**
+     * Id content for `AccordionHeading`.
+     */
+    id?: string;
+    /**
+     * Header image for the `AccordionHeading`.
+     */
+    image?: ImageProps;
+    /**
+     * Header size for the `AccordionHeading`.
+     */
+    headingSize?: "xl" | "m";
+}
+
+interface AccordionDisclosureListProps {
+    /**
+     * Array of `Disclosure` components. Maximum 10 in one `Accordion`.
+     */
+    disclosureList: (DisclosureProps & {
+        id: string;
+    })[];
+}
+
+/**
+ * Use the `Accordion` component to package together a title, content and a number of disclosure components into one section (maximum 10).
+ */
+declare const Accordion: React$1.FC<AccordionProps>;
+interface AccordionProps extends Omit<AccordionHeadingProps, "isPadded">, AccordionDisclosureListProps {
+}
+
+declare const Author: React$1.FC<AuthorProps>;
+interface AuthorProps {
+    /**
+     * Name of the Author.
+     */
+    name: string;
+    /**
+     * Job title of the Author.
+     */
+    title: string;
+    /**
+     * Optional Avatar for the Author.
+     */
+    avatar?: AvatarProps;
+}
+
+interface CopyLeadImage extends Pick<ImageProps, "src" | "alt" | "loading" | "sizes" | "srcSet" | "width" | "height" | "fadeOnLoad"> {
+    sources?: Pick<ImageSourceProps, "media" | "sizes" | "srcSet">[];
+}
+
+interface CopyLeadListItem {
+    icon: string;
+    heading: string;
+    text?: string;
+}
+
+type CopyLeadButton = Pick<ButtonProps, "label" | "onClick" | "href" | "target" | "ariaLabel">;
+
+/**
+ * Use `CopyLead` to give supporting information about a page or proposition. It can be used to call out key benefits in bullet points, or link to a supporting explanatory video. An optional CTA can be used to link to further information or trigger a sales or enquiry journey.
+ */
+declare const CopyLead: React$1.FC<CopyLeadProps>;
+interface CopyLeadProps {
+    /**
+     * heading for `CopyLead`.
+     */
+    heading: string;
+    /**
+     * Determine a heading level for `<MediaTemplate />` and `<ContentTemplate />`
+     */
+    headingLevel?: HeadingLevel$1;
+    /**
+     * Reverse the columns so the image / video appears on the left. Doesn't affect mobile layouts, and is only applied if there is a video or an image.
+     */
+    isReverseOrder?: boolean;
+    /**
+     * Text content for `CopyLead`.
+     */
+    content?: string;
+    /**
+     * Button for `CopyLead`.
+     */
+    button?: CopyLeadButton;
+    /**
+     * Image for `CopyLead`.
+     */
+    image?: CopyLeadImage;
+    /**
+     * Video embed. Supported platforms are YouTube and Vimeo.
+     */
+    video?: VideoPlayerProps;
+    /**
+     * List items for `CopyLead`
+     */
+    listItems: CopyLeadListItem[];
+}
+
+declare const SectionHeading: React$1.FC<SectionHeadingProps>;
+interface SectionHeadingProps {
+    /**
+     * heading for `SectionHeading`.
+     */
+    heading: string;
+    /**
+     * Adds padding to `SectionHeading`.
+     */
+    isPadded?: boolean;
+    /**
+     * Determine a heading level for `SectionHeading`.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Text content for `SectionHeading`.
+     */
+    content?: string | ReactNode;
+    /**
+     * Id content for `SectionHeading`.
+     */
+    id?: string;
+    /**
+     * Header image for the `SectionHeading`.
+     */
+    image?: ImageProps;
+}
+
+declare const DownloadList: React$1.FC<DownloadListProps>;
+interface DownloadListProps extends Omit<SectionHeadingProps, "isPadded"> {
+    downloads: DownloadProps[];
+}
+
+declare const FAQs: React$1.FC<FAQsProps>;
+interface ExtendedAccordionProps extends AccordionProps {
+    altLinkTitle?: string;
+}
+interface FAQsProps extends SectionHeadingProps {
+    type: "list" | "listWithLinks" | "tabs";
+    linkListHeading?: string;
+    accordionData: ExtendedAccordionProps[];
+}
+
+interface FeaturePostAppButtonFooter {
+    type: "appButton";
+    googlePlay?: Omit<AppButtonProps, "type">;
+    appStore?: Omit<AppButtonProps, "type">;
+}
+
+interface FeaturePostCtaFooter {
+    type: "cta";
+    button: Pick<ButtonProps, "label" | "onClick" | "href" | "target" | "ariaLabel">;
+    author?: AuthorProps;
+}
+
+interface FeaturePostImage extends Pick<ImageProps, "src" | "alt" | "loading" | "sizes" | "srcSet" | "width" | "height" | "fadeOnLoad"> {
+    sources?: Pick<ImageSourceProps, "media" | "sizes" | "srcSet">[];
+}
+
+/**
+ * Use `FeaturePost` to direct traffic towards an article, case study, or product information page, or to a 3rd part App Store provider. Where the component links to an article page, the author attribution can be given here. The `FeaturePost` must be supported by an image, and in future, the component will support embedded video as well.
+ * */
+declare const FeaturePost: React$1.FC<FeaturePostProps>;
+interface FeaturePostProps {
+    /**
+     * heading for `FeaturePost`.
+     */
+    heading: string;
+    /**
+     * Determine a heading level for `<FeaturePost />`
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Text content for `FeaturePost`.
+     */
+    content: string;
+    /**
+     * Reverse the columns so the image / video appears on the left. Doesn't affect mobile layouts, and is only applied if there is a video or an image.
+     */
+    isReverseOrder?: boolean;
+    /**
+     * Image for `FeaturePost`.
+     */
+    image?: FeaturePostImage;
+    /**
+     * Footer for `FeaturePost`. Types included are `cta` or `appButton`.
+     */
+    footer?: FeaturePostCtaFooter | FeaturePostAppButtonFooter;
+    /**
+     * Label for `FeaturePost`.
+     */
+    label?: {
+        text: string;
+        date: string | Date;
+    };
+    /**
+     * Video embed. Supported platforms are YouTube and Vimeo.
+     */
+    video?: VideoPlayerProps$1;
+}
+
+interface HighlightLink {
+    url: string;
+    textLink: string;
+    onClick?: (e: React.MouseEvent) => void;
+}
+
+interface HighlightListItem {
+    icon?: string;
+    heading: string;
+    text?: string | React.ReactNode;
+    link?: HighlightLink;
+}
+
+/**
+ * Use `Highlights` to give supporting information about a page or proposition. I
+ * t can be used to call out key benefits in bullet points, or link.
+ * Both two and three column options are available.
+ */
+declare const Highlights: React$1.FC<HighlightsProps>;
+interface HighlightsProps extends Omit<SectionHeadingProps, "isPadded"> {
+    /**
+     * List items for `Highlights`.
+     * List length should be a minimum of 2 and a maximum of 6.
+     */
+    listItems: HighlightListItem[];
+    /**
+     * Number of columns for option desktop & tablet breakpoints only.
+     */
+    columns?: "2" | "3";
+    /**
+     * Optional CTA rendered at the end of Highlights.
+     * Only ONE CTA is allowed.
+     */
+    cta?: HighlightsCTAProps;
+}
+/**
+ * CTA configuration for Highlights
+ */
+type HighlightsCTAProps = Pick<ButtonV2Props, "label" | "href" | "onClick" | "iconPosition"> & {
+    /**
+     * 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`).
+ */
+declare const PromoListing: React$1.FC<PromoListingProps>;
+interface PromoListMediaCard extends MediaCardProps {
+    type: "media-card";
+}
+interface PromoListImpactCard extends ImpactCardProps {
+    type: "impact-card";
+}
+interface PromoListInformationCard extends InformationCardProps {
+    type: "information-card";
+}
+interface PromoListTypographyCard extends TypographyCardProps {
+    type: "typography-card";
+}
+type PromoListCard = PromoListMediaCard | PromoListInformationCard | PromoListTypographyCard | PromoListImpactCard;
+interface PromoListingProps extends Omit<SectionHeadingProps, "isPadded"> {
+    /**
+     * Cards for the PromoListing.
+     */
+    cards: PromoListCard[];
+    /**
+     * Shows cards in a carousel on devices below 1024px (m breakpoint) if true.
+     */
+    isCarousel?: boolean;
+    /**
+     * Number of columns for desktop breakpoints. "2" and "3" column options available.
+     */
+    columns?: "2" | "3";
+}
+
+/**
+ * Use `Quote` where a quote or testimonial from an existing customer or stakeholder would help build trust and credibility with potential new customers. It's commonly used on product pages where customers would learn about a product or service that we offer.*/
+declare const Quote: React$1.FC<QuoteProps>;
+interface QuoteProps {
+    styling?: "Default" | "Secondary";
+    content: string;
+    author?: AuthorProps;
+    citeUrl?: string;
+}
+
+declare const Summary: React$1.FC<SummaryProps>;
+interface SummaryContent {
+    heading: string;
+    text: string;
+}
+interface SummaryProps {
+    /**
+     * Content for <Summary />
+     */
+    content: [SummaryContent, SummaryContent, SummaryContent];
+    /**
+     * Determine a heading level for each column.
+     */
+    headingLevel?: HeadingLevel;
+    noBorder?: boolean;
+}
+
+interface StatisticlLink {
+    text: string;
+    href: string;
+    openInNewTab?: boolean;
+    ariaLabel?: string;
+}
+
+interface Statistic {
+    stat: string;
+    copy: string;
+    link?: StatisticlLink;
+    source?: string;
+    sourceUrl?: string;
+}
+
+declare const Statistics: React$1.FC<StatisticsProps>;
+interface StatisticsProps extends Omit<SectionHeadingProps, "isPadded"> {
+    statistics: Statistic[];
+}
+
+declare const BannerWithTabs: FC<BannerWithTabsProps>;
+interface BannerWithTabsProps extends Omit<SectionHeadingProps, "image" | "isPadded"> {
+    /**
+     * Align `SectionHeading` component.
+     */
+    alignTypography?: "left" | "center";
+    /**
+     * Default to an inital value of a tab. If this is left blank it will default to first tab.
+     */
+    defaultValue?: string;
+    /**
+     * Determine what tabs to render. They need both a `value` and `label` prop
+     */
+    tabs: {
+        value: string;
+        label: string;
+        content: TemplateBannerProps;
+    }[];
+    /**
+     * Set the minimum height of the all banners M and above.
+     */
+    minHeight?: number;
+    /**
+     * Set the minimum height all of the banner for the M breakpoint. This will be active when the TabbedBanner switches to the mobile layout at the medium breakpoint.
+     */
+    minHeightM?: number;
+    /**
+     * heading for `SectionHeading`.
+     */
+    heading: string;
+    /**
+     * Text content for `SectionHeading`.
+     */
+    content?: string;
+}
+
+interface TextSection {
+    heading: string;
+    content: string;
+    headingLevel?: HeadingLevel$1;
+}
+
+interface Link {
+    text: string;
+    url: string;
+}
+interface LinkSection {
+    heading: string;
+    links: Link[];
+    headingLevel?: HeadingLevel$1;
+}
+
+interface Topic {
+    heading: string;
+    tags: TagProps[];
+    headingLevel?: HeadingLevel$1;
+}
+
+interface Share {
+    heading: string;
+    articleTitle: string;
+    x?: boolean;
+    headingLevel?: HeadingLevel$1;
+    linkedin?: boolean;
+}
+
+interface SidebarAuthor extends AuthorProps {
+    avatar?: Omit<NonNullable<AuthorProps["avatar"]>, "size">;
+}
+
+/**
+ * Use `ArticleSidebar` to provide additional information about the article.
+ */
+declare const ArticleSidebar: React$1.FC<ArticleSidebarProps>;
+interface ArticleSidebarProps {
+    /**
+     * Props for Author component.
+     */
+    author?: SidebarAuthor;
+    /**
+     * Content for the about section.
+     */
+    aboutSection?: TextSection;
+    /**
+     * Array of headings and text for additional text sections.
+     */
+    additionalContent?: TextSection[];
+    /**
+     * Links that are relevant to the article.
+     */
+    linkSection: LinkSection;
+    /**
+     * Topics rendered as tags that are relevant to the article.
+     */
+    topics?: Topic;
+    /**
+     * Sharing options for the article.
+     */
+    share: Share;
+}
+
+type ListInformationCardButtonProps = Pick<ButtonV2Props$1, "label" | "onClick" | "href">;
+type ListInformationCardProps = Pick<InformationCardProps, "heading" | "text">;
+type ListProps = ListInformationCardButtonProps & ListInformationCardProps;
+
+/**
+ * Use `ProductNavigation` to give a collection of product information cards collected within a grid that has optional show/hide capability
+ */
+declare const ProductNavigation: React$1.FC<ProductNavigationProps>;
+interface ProductNavigationProps extends Omit<SectionHeadingProps, "isPadded"> {
+    /**
+     * List items for `ProductNavigation`.
+     */
+    productList: ListProps[];
+    /**
+     * Include "show more" or "show less" buttons.
+     */
+    hideButton?: boolean;
+    /**
+     * Prevent "show less" button from appearing after full productList is displayed.
+     */
+    hideShowLess?: boolean;
+    /**
+     * Set default expand or collapse view of product on page load.
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Set number of products to hide or show.
+     */
+    listIncrement?: number;
+    /**
+     * Set number of products to show by default.
+     */
+    cardsToDisplay?: number;
+    /**
+     * Custom onClick handler called everytime "show more" is pressed
+     */
+    onClickMore?: () => void;
+    /**
+     * Custom onClick handler called everytime "show less" is pressed
+     */
+    onClickLess?: () => void;
+    /**
+     * Set a loading state for the "show more" and "show less" buttons
+     */
+    isLoading?: boolean;
+    /**
+     * Set minHeight for all products.
+     */
+    minHeight?: number;
+}
+
+declare const ContentInfoWidget: React$1.FC<ContentInfoWidgetProps>;
+interface ContentInfoWidgetProps {
+    icon: string;
+    text: string;
+}
+
+export { Accordion, ArticleSidebar, Author, BannerWithTabs, ContentInfoWidget, CopyLead, DownloadList, FAQs, FeaturePost, Highlights, ProductNavigation, PromoListing, Quote, SectionHeading, Statistics, Summary };
+export type { AccordionProps, ArticleSidebarProps, AuthorProps, BannerWithTabsProps, ContentInfoWidgetProps, CopyLeadProps, DownloadListProps, FAQsProps, FeaturePostProps, HighlightsProps, ListProps, ProductNavigationProps, PromoListingProps, QuoteProps, SectionHeadingProps, StatisticsProps, SummaryProps };