@arc-ui/components 10.1.0 → 10.2.0

package/dist/SiteHeader/index.d.ts

@@ -0,0 +1,252 @@
+/// <reference types="react" />
+import { FC, ReactNode, ReactElement } from "react";
+import { subBrands } from "../_shared/BrandLogo-6cc8202e";
+declare const Column: FC<ColumnProps>;
+interface ColumnProps {
+    /**
+     * Contents of the Column. Must be SiteHeader.ItemGroup components.
+     */
+    children: ReactNode;
+}
+declare const Item: FC<ItemProps>;
+interface ItemProps {
+    /**
+     * Contents of the Item. Usually text to be displayed in the Item link.
+     */
+    children: ReactNode;
+    /**
+     * A URL to link to when the Item is clicked or touched.
+     */
+    href: string;
+    /**
+     * Should the Item be emphasised?
+     */
+    isEmphasised?: boolean;
+    /**
+     * On click handler.
+     */
+    onClick?: () => void;
+}
+declare const ItemGroup: FC<ItemGroupProps>;
+interface ItemGroupProps {
+    /**
+     * Contents of the ItemGroup. Must be Item components.
+     */
+    children: ReactNode;
+    /**
+     * A top-level URL for the ItemGroup to link to.
+     */
+    href?: string;
+    /**
+     * Title text to be displayed in the ItemGroup summary.
+     */
+    title?: string;
+    /**
+     * Text to display in top-level link inside the ItemGroup in narrow viewports.
+     * Only applies if `href` is present. If not provided, top-level link text
+     * will be automatically generated from `title`.
+     */
+    viewAllTitle?: string;
+    /**
+     * On click handler.
+     */
+    onClick?: () => void;
+}
+declare const NavItem: FC<NavItemProps>;
+interface NavItemProps {
+    /**
+     * Contents of the NavItem. Must be SiteHeader.ItemGroup or
+     * SiteHeader.Column components.
+     */
+    children?: ReactNode;
+    /**
+     * A top-level URL for the NavItem to link to.
+     *
+     * When `children` are not present, the URL to link to when the NavItem is
+     * clicked or touched.
+     *
+     * When `children` are present, the URL to link to when a top-level link
+     * inside the NavItem panel is clicked or touched.
+     */
+    href?: string;
+    /**
+     * Should the NavItem be highlighted as the current item/page? Only applies if
+     * `children` are not present (and `href` is present).
+     */
+    isCurrent?: boolean;
+    /**
+     * Content to display in the NavItem panel promo area.
+     */
+    promo?: ReactNode;
+    /**
+     * Top-level text to display in the NavItem.
+     */
+    title: string;
+    /**
+     * Text to display in top-level link inside the NavItem panel. Only
+     * applies if both `children` are present and `href` is true. If not
+     * provided, top-level link text will be automatically generated from `title`.
+     */
+    viewAllTitle?: string;
+    /**
+     * On click handler.
+     */
+    onClick?: () => void;
+}
+declare const NavItemWithSubNav: FC<NavItemWithSubNavProps>;
+interface NavItemWithSubNavProps {
+    /**
+     * The URL to link to when a top-level link inside the NavItemWithSubNav panel
+     * is clicked or touched.
+     */
+    href?: string;
+    /**
+     * Content to be displayed in the first slot of the NavItemWithSubNav. Must be
+     * a single SiteHeader.SubNavItem component.
+     */
+    slot1: ReactElement;
+    /**
+     * Content to be displayed in the second slot of the NavItemWithSubNav. Must
+     * be a single SiteHeader.SubNavItem component.
+     */
+    slot2: ReactNode;
+    /**
+     * Content to be displayed in the third slot of the NavItemWithSubNav. Must be
+     * a single SiteHeader.SubNavItem component.
+     */
+    slot3?: ReactNode;
+    /**
+     * Title text to display inside the NavItemWithSubNav panel.
+     */
+    subTitle?: string;
+    /**
+     * Top-level text to display in the NavItemWithSubNav.
+     */
+    title: string;
+    /**
+     * Text to display in top-level link inside the NavItemWithSubNav panel. Only
+     * applies if `href` is true. If not provided, text will be automatically
+     * generated from `title`.
+     */
+    viewAllTitle?: string;
+    /**
+     * view all click handler.
+     */
+    onViewAllClick?: () => void;
+}
+declare const SubNavItem: FC<SubNavItemProps>;
+interface SubNavItemProps {
+    /**
+     * Contents of the SubNavItem. Must be SiteHeader.ItemGroup or
+     * SiteHeader.Column components.
+     */
+    children?: ReactNode;
+    /**
+     * Should the SubNavItem be the default open item in a
+     * SiteHeader.NavItemWithSubNav? If not specified, the default open item will
+     * be set automatically.
+     */
+    isDefaultItem?: boolean;
+    /**
+     * Optionally shift the SubNavItem-link upwards (in "desktop" viewports only)
+     * to close off any empty space between items due to content size.
+     */
+    offsetXL?: "24" | "48";
+    /**
+     * Content to display in the SubNavItem panel promo area.
+     */
+    promo?: ReactNode;
+    /**
+     * A URL to link to when the SubNavItem is clicked or touched. Only applies if
+     * `children` are not present.
+     */
+    href?: string;
+    /**
+     * Optional subtitle text for the SubNavItem.
+     */
+    subTitle?: string;
+    /**
+     * Title text for the SubNavItem.
+     */
+    title: string;
+    /**
+     * Text to display in top-level link inside the SubNavItem panel. Only
+     * applies if both `children` are present and `href` is true. If not
+     * provided, top-level link text will be automatically generated from `title`.
+     */
+    viewAllTitle?: string;
+    /**
+     * On click handler.
+     */
+    onClick?: () => void;
+}
+/**
+ * Use `SiteHeader` to display brand logo and navigation at the top of a page.
+ */
+declare const SiteHeader: FC<SiteHeaderProps> & {
+    Column: typeof Column;
+    Item: typeof Item;
+    ItemGroup: typeof ItemGroup;
+    NavItem: typeof NavItem;
+    NavItemWithSubNav: typeof NavItemWithSubNav;
+    SubNavItem: typeof SubNavItem;
+};
+interface SiteHeaderProps {
+    /**
+     * Contents of the SiteHeader. Must be SiteHeader.NavItem or
+     * SiteHeader.NavItemWithSubNav components.
+     */
+    children?: ReactNode;
+    /**
+     * Basket component for the SiteHeader.
+     */
+    basket?: ReactNode;
+    /**
+     * Should account login links be included in the SiteHeader?
+     */
+    hasLogin?: boolean;
+    /**
+     * Should the SiteHeader have a transparent background?
+     */
+    isTransparent?: boolean;
+    /**
+     * A URL to link to when SiteHeader logo is clicked or touched.
+     */
+    loginHref?: string;
+    /**
+     * A Function to run to when SiteHeader logo is clicked or touched.
+     */
+    logoOnClick?: () => void;
+    /**
+     * A Function to run to when SiteHeader login links are clicked or touched.
+     */
+    loginOnClick?: () => void;
+    /**
+     * Text to display in SiteHeader login links.
+     */
+    loginTitle?: string;
+    /**
+     * A URL to link to when the SiteHeader brand logo link is clicked or touched.
+     */
+    logoHref?: string;
+    /**
+     * Accessible text for the SiteHeader brand logo link.
+     */
+    logoLabel?: string;
+    /**
+     * Search component for the SiteHeader.
+     */
+    search?: ReactNode;
+    /**
+     * Optional sub-brand variant. Only applies to BT.
+     */
+    subBrand?: typeof subBrands[number];
+}
+declare const SiteHeaderRehydrator: {
+    (el: HTMLDivElement, hydrate: any): Promise<JSX.Element>;
+    ItemGroupRehydrator: (el: HTMLLIElement, hydrate: any) => Promise<JSX.Element>;
+    NavItemRehydrator: (el: HTMLLIElement, hydrate: any) => Promise<JSX.Element>;
+    NavItemWithSubNavRehydrator: (el: HTMLLIElement, hydrate: any) => Promise<JSX.Element>;
+    SubNavItemRehydrator: (el: HTMLDivElement, hydrate: any) => Promise<JSX.Element>;
+};
+export { SiteHeader, SiteHeaderRehydrator };