@arc-ui/components 12.0.0-alpha.0 → 12.0.0-beta.11

package/dist/types/components/SiteHeaderV2/SiteHeaderV2.d.ts

@@ -0,0 +1,82 @@
+import React, { FC, ReactNode } from "react";
+import { subBrands } from "../BrandLogo/BrandLogo";
+import { Column } from "./components/Column";
+import { Item } from "./components/Item";
+import { ItemGroup } from "./components/ItemGroup";
+import { NavItem, NavItemWithSubNav } from "./components/NavItem";
+import { NodeItem } from "./components/NodeItem/NodeItem";
+import { SubNavItem } from "./components/SubNavItem";
+import { VerticalDivider } from "./components/VerticalDivider";
+declare const Context: React.Context<{
+    transparent: boolean;
+    menubarRef: React.MutableRefObject<HTMLUListElement> | null;
+}>;
+/**
+ * Use `SiteHeaderV2` to display brand logo and navigation at the top of a page.
+ */
+export declare const SiteHeaderV2: FC<SiteHeaderV2Props> & {
+    Column: typeof Column;
+    Item: typeof Item;
+    ItemGroup: typeof ItemGroup;
+    NavItem: typeof NavItem;
+    NodeItem: typeof NodeItem;
+    NavItemWithSubNav: typeof NavItemWithSubNav;
+    SubNavItem: typeof SubNavItem;
+    VerticalDivider: typeof VerticalDivider;
+};
+export declare function useHeaderV2Context(): {
+    transparent: boolean;
+    menubarRef: React.MutableRefObject<HTMLUListElement> | null;
+};
+export interface SiteHeaderV2Props {
+    /**
+     * Contents of the SiteHeaderV2. Must be SiteHeaderV2.NavItem or
+     * SiteHeaderV2.NavItemWithSubNav components.
+     */
+    children?: ReactNode;
+    /**
+     * Basket component for the SiteHeaderV2.
+     */
+    basket?: ReactNode;
+    /**
+     * Should account login links be included in the SiteHeaderV2?
+     */
+    hasLogin?: boolean;
+    /**
+     * Should the SiteHeaderV2 have a transparent background?
+     */
+    isTransparent?: boolean;
+    /**
+     * A URL to link to when SiteHeaderV2 logo is clicked or touched.
+     */
+    loginHref?: string;
+    /**
+     * A Function to run to when SiteHeaderV2 logo is clicked or touched.
+     */
+    logoOnClick?: () => void;
+    /**
+     * A Function to run to when SiteHeaderV2 login links are clicked or touched.
+     */
+    loginOnClick?: () => void;
+    /**
+     * Text to display in SiteHeaderV2 login links.
+     */
+    loginTitle?: string;
+    /**
+     * A URL to link to when the SiteHeaderV2 brand logo link is clicked or touched.
+     */
+    logoHref?: string;
+    /**
+     * Accessible text for the SiteHeaderV2 brand logo link.
+     */
+    logoLabel?: string;
+    /**
+     * Search component for the SiteHeaderV2.
+     */
+    search?: ReactNode;
+    /**
+     * Optional sub-brand variant. Only applies to BT.
+     */
+    subBrand?: (typeof subBrands)[number];
+}
+export { Context as SiteHeaderV2Context };

package/dist/types/components/{SiteHeader → SiteHeaderV2}/components/BackButton/BackButton.d.ts

@@ -2,4 +2,5 @@ import { FC } from "react";
 export declare const BackButton: FC<BackButtonProps>;
 export interface BackButtonProps {
     setOpen: (arg0: boolean) => any;
+    setOpenPanelOnFirstClick: (arg0: boolean) => any;
 }

package/dist/types/components/{SiteHeader → SiteHeaderV2}/components/Column/Column.d.ts

@@ -2,7 +2,7 @@ import { FC, ReactNode } from "react";
 export declare const Column: FC<ColumnProps>;
 export interface ColumnProps {
     /**
-     * Contents of the Column. Must be SiteHeader.ItemGroup components.
+     * Contents of the Column. Must be SiteHeaderV2.ItemGroup components.
      */
     children: ReactNode;
 }

package/dist/types/components/SiteHeaderV2/components/HorizontalPanel/HorizontalPanel.d.ts

@@ -0,0 +1,13 @@
+import React, { FC, ReactNode } from "react";
+export declare const HorizontalPanel: FC<PanelProps>;
+export interface PanelProps {
+    animation: boolean;
+    children: ReactNode;
+    navItemRef: React.MutableRefObject<HTMLElement> | null;
+    open: boolean;
+    setOpen: (arg0: boolean) => any;
+    subNavItemRef?: React.MutableRefObject<HTMLElement>;
+    subNavLink?: string;
+    title?: ReactNode;
+    withSubNav?: boolean;
+}

package/dist/types/components/SiteHeaderV2/components/HorizontalPanel/index.d.ts

@@ -0,0 +1 @@
+export { HorizontalPanel } from "./HorizontalPanel";

package/dist/types/components/{SiteHeader → SiteHeaderV2}/components/ItemGroup/ItemGroup.d.ts

@@ -5,6 +5,7 @@ export interface ItemGroupProps {
      * Contents of the ItemGroup. Must be Item components.
      */
     children: ReactNode;
+    subtitle?: string;
     /**
      * A top-level URL for the ItemGroup to link to.
      */

package/dist/types/components/SiteHeaderV2/components/ItemGroup/index.d.ts

@@ -0,0 +1 @@
+export { ItemGroup } from "./ItemGroup";

package/dist/types/components/{SiteHeader → SiteHeaderV2}/components/NavItem/NavItem.d.ts

@@ -2,8 +2,8 @@ import { FC, ReactNode } from "react";
 export declare const NavItem: FC<NavItemProps>;
 export interface NavItemProps {
     /**
-     * Contents of the NavItem. Must be SiteHeader.ItemGroup or
-     * SiteHeader.Column components.
+     * Contents of the NavItem. Must be SiteHeaderV2.ItemGroup or
+     * SiteHeaderV2.Column components.
      */
     children?: ReactNode;
     /**
@@ -21,10 +21,6 @@ export interface NavItemProps {
      * `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.
      */
@@ -39,4 +35,7 @@ export interface NavItemProps {
      * On click handler.
      */
     onClick?: () => void;
+    isPrimary?: boolean;
+    opensFirstWithPanel?: boolean;
+    subTitle?: string;
 }

package/dist/types/components/{SiteHeader → SiteHeaderV2}/components/NavItem/NavItemWithSubNav.d.ts

@@ -12,19 +12,26 @@ export interface NavItemWithSubNavProps {
     href?: string;
     /**
      * Content to be displayed in the first slot of the NavItemWithSubNav. Must be
-     * a single SiteHeader.SubNavItem component.
+     * a single SiteHeaderV2.SubNavItem component.
      */
     slot1: ReactElement;
     /**
      * Content to be displayed in the second slot of the NavItemWithSubNav. Must
-     * be a single SiteHeader.SubNavItem component.
+     * be a single SiteHeaderV2.SubNavItem component.
      */
-    slot2: ReactNode;
+    slot2?: ReactNode;
     /**
      * Content to be displayed in the third slot of the NavItemWithSubNav. Must be
-     * a single SiteHeader.SubNavItem component.
+     * a single SiteHeaderV2.SubNavItem component.
      */
     slot3?: ReactNode;
+    /**
+     * Content to be displayed in the fourth slot of the NavItemWithSubNav. Must be
+     * a single SiteHeaderV2.SubNavItem component.
+     */
+    slot4?: ReactNode;
+    slot5?: ReactNode;
+    slot6?: ReactNode;
     /**
      * Title text to display inside the NavItemWithSubNav panel.
      */
@@ -43,5 +50,7 @@ export interface NavItemWithSubNavProps {
      * view all click handler.
      */
     onViewAllClick?: () => void;
+    isPrimary?: boolean;
+    opensFirstWithPanel?: boolean;
 }
 export { Context as NavItemContext };

package/dist/types/components/SiteHeaderV2/components/NavItem/index.d.ts

@@ -0,0 +1,2 @@
+export { NavItem } from "./NavItem";
+export { NavItemWithSubNav } from "./NavItemWithSubNav";

package/dist/types/components/{SiteHeader → SiteHeaderV2}/components/NodeItem/NodeItem.d.ts

@@ -2,7 +2,7 @@ import { FC, ReactNode } from "react";
 export declare const NodeItem: FC<NodeItemProps>;
 export interface NodeItemProps {
     /**
-     * Content to display with `SiteHeader.NodeItem`
+     * Content to display with `SiteHeaderV2.NodeItem`
      */
     children?: ReactNode;
 }

package/dist/types/components/{SiteHeader → SiteHeaderV2}/components/Panel/Panel.d.ts

@@ -5,18 +5,24 @@ export declare const Panel: FC<PanelProps> & {
 export declare const ViewAll: FC<ViewAllProps>;
 export interface ViewAllProps {
     href: string;
-    title: string;
+    title?: string;
     onClick?: () => void;
+    buttonStyle: "primary" | "secondary" | "tertiary" | "warning" | undefined;
 }
 export interface PanelProps {
     children: ReactNode;
     navItemRef: React.MutableRefObject<HTMLElement> | null;
+    isNavItem: boolean;
     open: boolean;
-    promo?: ReactNode;
     setOpen: (arg0: boolean) => any;
+    setOpenPanelOnFirstClick: (arg0: boolean) => any;
     subNavItemRef?: React.MutableRefObject<HTMLElement>;
     subNavLink?: string;
+    navLink?: string;
     title?: ReactNode;
     viewAll?: ReactElement;
     withSubNav?: boolean;
+    subtitle?: ReactNode;
+    fade?: boolean;
+    isPrimary?: boolean;
 }

package/dist/types/components/{SiteHeader → SiteHeaderV2}/components/SubNavItem/SubNavItem.d.ts

@@ -1,14 +1,15 @@
 import { FC, ReactNode } from "react";
+import { ArcIcon } from "../../../../types/arc-icon";
 export declare const SubNavItem: FC<SubNavItemProps>;
 export interface SubNavItemProps {
     /**
-     * Contents of the SubNavItem. Must be SiteHeader.ItemGroup or
-     * SiteHeader.Column components.
+     * Contents of the SubNavItem. Must be SiteHeaderV2.ItemGroup or
+     * SiteHeaderV2.Column components.
      */
     children?: ReactNode;
     /**
      * Should the SubNavItem be the default open item in a
-     * SiteHeader.NavItemWithSubNav? If not specified, the default open item will
+     * SiteHeaderV2.NavItemWithSubNav? If not specified, the default open item will
      * be set automatically.
      */
     isDefaultItem?: boolean;
@@ -17,10 +18,6 @@ export interface SubNavItemProps {
      * 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.
@@ -40,6 +37,7 @@ export interface SubNavItemProps {
      * provided, top-level link text will be automatically generated from `title`.
      */
     viewAllTitle?: string;
+    icon?: ArcIcon;
     /**
      * On click handler.
      */

package/dist/types/components/SiteHeaderV2/components/SubNavItem/index.d.ts

@@ -0,0 +1 @@
+export { SubNavItem } from "./SubNavItem";

package/dist/types/components/SiteHeaderV2/components/VerticalDivider/VerticalDivider.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const VerticalDivider: () => JSX.Element;

package/dist/types/components/SiteHeaderV2/components/VerticalDivider/index.d.ts

@@ -0,0 +1 @@
+export { VerticalDivider } from "./VerticalDivider";

package/dist/types/components/SiteHeaderV2/index.d.ts

@@ -0,0 +1 @@
+export { SiteHeaderV2 } from "./SiteHeaderV2";

package/dist/types/components/SkipLink/SkipLink.d.ts

@@ -0,0 +1,12 @@
+import { FC, ReactNode } from "react";
+import { SkipLinkItem } from "./SkipLinkItem/SkipLinkItem";
+/** Use `SkipLink` to help keyboard-only users skip to the main content on a page. */
+export declare const SkipLink: FC<SkipLinkProps> & {
+    Item: typeof SkipLinkItem;
+};
+export interface SkipLinkProps {
+    /**
+     * Links to display in the SkipLink.Item.
+     */
+    children?: ReactNode;
+}

package/dist/types/components/SkipLink/SkipLinkItem/SkipLinkItem.d.ts

@@ -0,0 +1,16 @@
+import { FC } from "react";
+export declare const SkipLinkItem: FC<SkipLinkItemProps>;
+export interface SkipLinkItemProps {
+    /**
+     * The label to display for SkipLink.Item.
+     */
+    label: string;
+    /**
+     * The URL the skip link navigates to.
+     */
+    href?: string;
+    /**
+     * The ID attribute of the target element the skip link navigates to.
+     */
+    id?: string;
+}

package/dist/types/components/SkipLink/index.d.ts

@@ -0,0 +1 @@
+export { SkipLink } from "./SkipLink";

package/dist/types/components/Spinner/Spinner.d.ts

@@ -0,0 +1,16 @@
+import { FC } from "react";
+/**
+ * Use `Spinner` to display a loading state.
+ */
+export declare const Spinner: FC<SpinnerProps>;
+export type SpinnerSize = "s" | "m" | "l" | "xl" | "xxl";
+export interface SpinnerProps {
+    /**
+     * Colour options. If no `color` option defined, the colour will use currentColor.
+     */
+    color?: "light" | "dark" | undefined;
+    /**
+     * Set sizes of spinner `s`, `m`, `l`, `xl`, `xxl` or a custom number value e.g. `100`px.
+     */
+    size?: SpinnerSize | number | null;
+}

package/dist/types/components/Spinner/index.d.ts

@@ -0,0 +1 @@
+export { Spinner } from "./Spinner";

package/dist/types/components/Surface/Surface.d.ts

@@ -7,16 +7,20 @@ declare const Context: React.Context<{
  * Use `Surface` to compose content using the Arc system.
  */
 export declare const Surface: FC<SurfaceProps>;
-export declare const backgrounds: readonly ["black", "brand", "brand-flat", "dark", "darker", "coral", "turquoise", "light", "lighter", "white"];
-export declare const backgroundsBT: readonly ["black", "brand", "brand-flat", "dark", "darker", "coral", "turquoise", "light", "lighter", "white"];
+export declare const backgrounds: readonly ["dark-black", "dark-brand-01", "dark-brand-02", "dark-neutral-01", "dark-neutral-02", "light-brand-01", "light-brand-02", "light-neutral-01", "light-neutral-02", "light-white"];
+export declare const backgroundsBT: readonly ["dark-black", "dark-brand-01", "dark-brand-02", "dark-neutral-01", "dark-neutral-02", "light-brand-01", "light-brand-02", "light-neutral-01", "light-neutral-02", "light-white"];
 export type SurfacePadding = "8" | "12" | "16" | "24" | "32" | "48" | "64";
-export type SurfaceBackgroundColor = "black" | "brand" | "brand-flat" | "dark" | "darker" | "coral" | "turquoise" | "light" | "lighter" | "white";
+export type SurfaceBackgroundColor = "dark-black" | "dark-brand-01" | "dark-brand-02" | "dark-neutral-01" | "dark-neutral-02" | "light-brand-01" | "light-brand-02" | "light-neutral-01" | "light-neutral-02" | "light-white";
 export interface SurfaceProps extends HTMLAttributes<HTMLElement> {
     /**
      * Background colour of the Surface. Contents will change colour to meet
      * accessibility requirements.
      */
     background?: SurfaceBackgroundColor;
+    /**
+     * Should the Surface be transparent? When true, no background colour will be applied.
+     */
+    isTransparent?: boolean;
     /**
      * Content to display on the Surface.
      */

package/dist/types/components/Switch/Switch.d.ts

@@ -1,9 +1,9 @@
 import { FC } from "react";
 import { SwitchProps as RadixSwitchProps } from "@radix-ui/react-switch";
 import { FormControlProps } from "../FormControl/FormControl";
-/** Use `Switch` to toggle between checked and not checked. */
+/** Use `Switch` to allow users to immediately toggle between two states. */
 export declare const Switch: FC<SwitchProps>;
-export interface SwitchProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "helper" | "supplementaryInfo"> {
+export interface SwitchProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "helper" | "helpUnderLabel" | "supplementaryInfo"> {
     /**
      * Hide Label above toggle?
      */
@@ -32,6 +32,10 @@ export interface SwitchProps extends Omit<FormControlProps, "children" | "elemen
      * name for the hidden checkbox if within a form
      */
     name?: RadixSwitchProps["name"];
+    /**
+     * Aria label to add a description to the switch button
+     */
+    ariaLabel?: string;
     /**
      * callback for when the switch is toggled
      */

package/dist/types/components/Tabs/Tabs.d.ts

@@ -2,6 +2,7 @@ import { FC, ReactNode } from "react";
 import { Tab } from "./Tab/Tab";
 import { TabContent } from "./TabContent";
 import { TabsList } from "./TabsList";
+/** Use `Tabs` to allow users to navigate between different sections of relevant content. */
 export declare const Tabs: FC<TabsProps> & {
     Tab: typeof Tab;
     Content: typeof TabContent;

package/dist/types/components/Tabs/TabsList/TabsList.d.ts

@@ -1,4 +1,5 @@
 import { FC, ReactNode } from "react";
+import { SurfaceBackgroundColor } from "../../Surface";
 export declare const TabsList: FC<TabsListProps>;
 export interface TabsListProps {
     /**
@@ -17,4 +18,8 @@ export interface TabsListProps {
      * Determine a accessible label for `Tabs`
      */
     ariaLabel?: string;
+    /**
+     * Background color for the overlap gradient.
+     */
+    overflowGradient?: SurfaceBackgroundColor;
 }

package/dist/types/components/Tag/Tag.d.ts

@@ -1,7 +1,7 @@
 import { FC, ReactNode } from "react";
 import { ArcIcon } from "../../types/arc-icon";
 /**
- * use `Tag` to promote features and manage filtering.
+ * Use `Tag` to promote features and manage filtering.
  */
 export declare const Tag: FC<TagProps>;
 export interface TagProps {
@@ -29,4 +29,8 @@ export interface TagProps {
      * Execute function on remove
      */
     onRemove?: () => void;
+    /**
+     * Specify extra information about the Tag.
+     */
+    title?: string;
 }

package/dist/types/components/TemplateBanner/TemplateBanner.d.ts

@@ -0,0 +1,68 @@
+import React, { ReactNode } from "react";
+import { HeadingSize, type HeadingLevel } from "../Heading/Heading";
+import { type ImageProps } from "../Image/Image";
+export declare const TemplateBanner: React.FC<TemplateBannerProps>;
+type TemplateBannerStyle = "light" | "dark" | "contained";
+type TemplateBannerAlignment = "top" | "bottom" | "center";
+interface TemplateBannerImage extends Pick<ImageProps, "src" | "alt" | "loading" | "sizes" | "srcSet" | "anchor" | "fadeOnLoad" | "fit"> {
+    alignment?: TemplateBannerAlignment;
+}
+export interface TemplateBannerProps {
+    /**
+     * Align content for TemplateBanner
+     */
+    alignment?: "start" | "center";
+    /**
+     * Heading for the TemplateBanner.
+     */
+    heading: string;
+    /**
+     * Image props for the TemplateBanner. Consider avoiding alt if the image is for decorative purposes only.
+     */
+    img?: TemplateBannerImage;
+    /**
+     * Provides a min height for the TemplateBanner.
+     */
+    minHeight?: string | number;
+    /**
+     * If true the image will appear on the left and the content will be on the right. Doesn't apply to mobile devices.
+     */
+    isReversed?: boolean;
+    /**
+     * Adds a gradient box shadow to the TemplateBanner.
+     */
+    isElevated?: boolean;
+    /**
+     * Content for the TemplateBanner.
+     */
+    children?: React.ReactNode;
+    /**
+     * Heading level for the ImpactCard heading.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Heading size for the ImpactCard heading.
+     */
+    headingSize?: Extract<HeadingSize, "m" | "xl">;
+    /**
+     * Uppercase label for the TemplateBanner.
+     */
+    label?: string;
+    /**
+     * Text content for the TemplateBanner.
+     */
+    text?: ReactNode;
+    /**
+     * Sets a dark or light background for the TemplateBanner.
+     */
+    type?: TemplateBannerStyle;
+    /**
+     * Defines the ratio of the content area within the banner layout.
+     */
+    contentRatio?: "2/3" | "1/1" | "1/0";
+    /**
+     * Add Additional top margin to banner
+     */
+    additionalTopMargin?: boolean;
+}
+export {};

package/dist/types/components/TemplateBanner/index.d.ts

@@ -0,0 +1 @@
+export { TemplateBanner } from "./TemplateBanner";

package/dist/types/components/Text/Text.d.ts

@@ -34,4 +34,8 @@ export interface TextProps {
      * Id for the Text.
      */
     id?: string;
+    /**
+     * Element type for text component. Default value is span
+     */
+    elementType?: "span" | "p";
 }

package/dist/types/components/TextArea/TextArea.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { FormControlProps } from "../FormControl/FormControl";
-type EventType = React.ChangeEvent<HTMLTextAreaElement>;
+import { AutoCompleteTypes } from "../../types/auto-complete-types";
 /** Use `TextArea` to allow custom user text entry via keyboard, for long-form and multi-line descriptions */
 export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export interface TextAreaProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "helperUnderLabel"> {
@@ -48,16 +48,35 @@ export interface TextAreaProps extends Omit<FormControlProps, "children" | "elem
     /**
      * Function to call when the TextArea loses focus.
      */
-    onBlur?: (e: EventType) => void;
+    onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    /**
+     * Function to call when the TextArea is focused.
+     */
+    onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
     /**
      * Callback function commonly used to update the TextArea's controlled
      * `value`, for example `e => setValue(e.target.value)`.
      */
-    onChange?: (e: EventType) => void;
+    onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
     /**
      * Current value of the TextArea. Must be controlled via an
      * `onChange` callback function. Otherwise, use `defaultValue` (or `isReadOnly`).
      */
     value?: string;
+    /**
+     * Sets the width of the TextArea.
+     */
+    width?: string;
+    /**
+     *  Sets autoComplete value for TextArea.
+     */
+    autoComplete?: AutoCompleteTypes;
+    /**
+     *  Sets minimum height value for TextArea.
+     */
+    minHeight?: string;
+    /**
+     *  Sets max-height value for TextArea.
+     */
+    maxHeight?: string;
 }
-export {};