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

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

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

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { type ArcCalendarRangeSelection } from "../Calendar";
+import { CalendarProps } from "../Calendar/Calendar";
+import { TextInputWithPlaceholderProps } from "../TextInput/TextInput";
+/**
+ * Use `DatePicker` to clearly present available dates and allow users to choose a way to enter information.
+ */
+export declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+interface DatePickerRangeSelection extends ArcCalendarRangeSelection {
+    formattedRange: string;
+}
+export interface DatePickerProps extends Omit<TextInputWithPlaceholderProps, "defaultValue" | "inputMode" | "minLength" | "maxLength" | "pattern" | "type" | "showPassword" | "placeholder" | "iconButton" | "prefix" | "suffix">, Omit<CalendarProps, "onDateSelect" | "onRangeSelect" | "selectedDate" | "selectedRange"> {
+    isFluid?: boolean;
+    onDateSelect?: (value: {
+        date: Date;
+        formattedDate: string;
+    }) => void;
+    onRangeSelect?: (value: DatePickerRangeSelection) => void;
+}
+export {};

package/dist/types/components/DatePicker/constants/date-format.d.ts

@@ -0,0 +1 @@
+export declare const DATE_FORMAT = "dd/MM/yyyy";

package/dist/types/components/DatePicker/constants/index.d.ts

@@ -0,0 +1 @@
+export { DATE_FORMAT } from "./date-format";

package/dist/types/components/DatePicker/helpers/convert-date-string-to-date.d.ts

@@ -0,0 +1 @@
+export declare const convertDateStringToDate: (value?: string) => Date;

package/dist/types/components/DatePicker/helpers/convert-date-string-to-date.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/DatePicker/helpers/convert-range-string-to-dates.d.ts

@@ -0,0 +1 @@
+export declare const convertRangeStringToDates: (value?: string) => Date[];

package/dist/types/components/DatePicker/helpers/convert-range-string-to-dates.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/DatePicker/helpers/format-date.d.ts

@@ -0,0 +1 @@
+export declare const formatDate: (value: Date) => string;

package/dist/types/components/DatePicker/helpers/format-date.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/DatePicker/helpers/index.d.ts

@@ -0,0 +1,8 @@
+export { isDateValid } from "./is-date-valid";
+export { parseDateString } from "./parse-date-string";
+export { parseRangeString } from "./parse-range-string";
+export { isRangeValid } from "./is-range-valid";
+export { formatDate } from "./format-date";
+export { isDisabledDate } from "./is-disabled-date";
+export { convertDateStringToDate } from "./convert-date-string-to-date";
+export { convertRangeStringToDates } from "./convert-range-string-to-dates";

package/dist/types/components/DatePicker/helpers/is-date-valid.d.ts

@@ -0,0 +1 @@
+export declare const isDateValid: (value?: string) => boolean;

package/dist/types/components/DatePicker/helpers/is-date-valid.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/DatePicker/helpers/is-disabled-date.d.ts

@@ -0,0 +1 @@
+export declare const isDisabledDate: (disabledDates: Date[] | undefined, date: Date) => boolean;

package/dist/types/components/DatePicker/helpers/is-disabled-date.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/DatePicker/helpers/is-range-valid.d.ts

@@ -0,0 +1 @@
+export declare const isRangeValid: (value?: string) => boolean;

package/dist/types/components/DatePicker/helpers/is-range-valid.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/DatePicker/helpers/parse-date-string.d.ts

@@ -0,0 +1,5 @@
+export declare const parseDateString: (value: string) => {
+    day: string;
+    month: string;
+    year: string;
+};

package/dist/types/components/DatePicker/helpers/parse-date-string.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/DatePicker/helpers/parse-range-string.d.ts

@@ -0,0 +1,14 @@
+export declare const parseRangeString: (value?: string) => {
+    start: {
+        date: string;
+        day: string;
+        month: string;
+        year: string;
+    };
+    end: {
+        date: string;
+        day: string;
+        month: string;
+        year: string;
+    };
+};

package/dist/types/components/DatePicker/helpers/parse-range-string.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,6 @@
+export { parseRangeString } from "./helpers/parse-range-string";
+export { parseDateString } from "./helpers/parse-date-string";
+export { isRangeValid } from "./helpers/is-range-valid";
+export { isDateValid } from "./helpers/is-date-valid";
+export { DATE_FORMAT } from "./constants/date-format";
+export { DatePicker } from "./DatePicker";

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

@@ -1,8 +1,7 @@
 import { FC, ReactNode } from "react";
 import { HeadingLevel } from "../Heading/Heading";
 /**
- * Use `Disclosure` to display content that is only visible when toggled into
- * an "open" state.
+ * Use `Disclosure` to show and hide sections of content.
  */
 export declare const Disclosure: FC<DisclosureProps>;
 export interface DisclosureProps {

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

@@ -1 +1 @@
-export { Disclosure } from "./Disclosure";
+export { Disclosure, type DisclosureProps } from "./Disclosure";

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

@@ -1,7 +1,6 @@
 import { FC, ReactNode } from "react";
 /**
- * Use `DisclosureMini` to display content that is only visible when toggled into
- * an "open" state.
+ * Use `DisclosureMini` to show and hide sections of content.
  */
 export declare const DisclosureMini: FC<DisclosureMiniProps>;
 export interface DisclosureMiniProps {

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

@@ -0,0 +1,41 @@
+import React, { MouseEvent } from "react";
+import { type ThemeIconNames } from "../ThemeIcon";
+export declare const Download: React.FC<DownloadProps>;
+export interface DownloadProps {
+    /**
+     * Name for `<Download />`
+     */
+    name: string;
+    /**
+     * File type for `<Download />`
+     */
+    type: string;
+    /**
+     * File url for `<Download />`
+     */
+    href?: string;
+    /**
+     * If true, the spacing will be reduced resulting in a tighter look and feel.
+     */
+    isCompact?: boolean;
+    /**
+     * If false the width will be the same as the inner content
+     */
+    isFullWidth?: boolean;
+    /**
+     * Description for `<Download />`
+     */
+    description?: string;
+    /**
+     * File size for `<Download />`
+     */
+    size?: string;
+    /**
+     * Icon for `<Download />`
+     */
+    icon?: Extract<ThemeIconNames, "downloadFile" | "downloadAccessibility">;
+    /**
+     * Click handler for `<Download />`
+     */
+    onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
+}

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

@@ -0,0 +1 @@
+export { Download, type DownloadProps } from "./Download";

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

@@ -3,7 +3,7 @@ import { FilterControl } from "./FilterControls/FilterControl/FilterControl";
 import { FilterControls, FilterControlsProps } from "./FilterControls/FilterControls";
 import { FilterItem } from "./FilterItems/FilterItem/FilterItem";
 import { FilterItems, FilterItemsProps } from "./FilterItems/FilterItems";
-/** use `Filter` for interactive elements that filter and categorise page content. */
+/** Use `Filter` to filter and categorise page content. */
 export declare const Filter: FC<FilterProps> & {
     Item: typeof FilterItem;
     Items: typeof FilterItems;

package/dist/types/components/Filter/FilterItems/FilterItems.d.ts

@@ -5,6 +5,10 @@ export interface FilterItemsProps {
      * Render children of `<Filter.Items />`. This should only use `<Filter.Item />`
      */
     children: ReactNode;
+    /**
+     * Error to display for `<Filter.Item />`
+     */
+    error?: ReactNode;
     /**
      * Determine the display style of `<Filter.Item />`
      */

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

@@ -18,7 +18,7 @@ export interface FormControlProps {
      */
     elementType?: "div" | "fieldset";
     /**
-     * Error message for the FormControl.
+     * Error message for the FormControl. Replaces helper when helperUnderLabel is false.
      */
     errorMessage?: string;
     /**
@@ -71,5 +71,9 @@ export interface FormControlProps {
      * Position helper text under label. This is set to `false` by default.
      */
     helperUnderLabel?: boolean;
+    /**
+     * Use `hideLabel` to visually hide the `FormControl` label. This still allows screen readers to have access to labels. This is set to `false` by default.
+     */
+    hideLabel?: boolean;
 }
 export { Context as FormControlContext };

package/dist/types/components/Grid/Grid.constants.d.ts

@@ -0,0 +1 @@
+export declare const BREAKPOINTS: readonly ["xs", "s", "m", "l", "xl"];

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { Col } from "./components/Col";
+import { Row } from "./components/Row";
+/**
+ * Use `Grid` to compose layouts on a 12-column grid.
+ */
+export declare const Grid: React.FC<GridProps> & {
+    Col: typeof Col;
+    Row: typeof Row;
+};
+export interface GridProps {
+    /**
+     * `Grid` is set to 100% width if true.
+     */
+    isFluid?: boolean;
+    /**
+     * Removes gap between columns for an edge to edge layout if true.
+     */
+    isGutterless?: boolean;
+    /**
+     * Allows the rows and columns be visible for debugging.
+     */
+    isDebugVisible?: boolean;
+    /**
+     * Contents of the Grid. Should only contain `Grid.Row`.
+     */
+    children: React.ReactNode;
+}

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

@@ -0,0 +1,10 @@
+import { BREAKPOINTS } from "./Grid.constants";
+type Breakpoints = (typeof BREAKPOINTS)[number];
+type ColumnConfig<T> = Partial<Record<Breakpoints, T>>;
+export type GridValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type AlignmentValue = "normal" | "start" | "center" | "end" | "stretch" | "baseline";
+export type ColumnValue = GridValue | "auto" | "equal";
+export type Column = ColumnConfig<ColumnValue>;
+export type Arrangement = ColumnConfig<GridValue>;
+export type Alignment = ColumnConfig<AlignmentValue>;
+export {};

package/dist/types/components/Grid/components/Col/Col.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { Arrangement, Column, Alignment } from "../../Grid.types";
+export declare const Col: React.FC<ColProps>;
+interface ColProps extends Column {
+    offset?: Arrangement;
+    order?: Arrangement;
+    align?: Alignment;
+    children: React.ReactNode;
+}
+export {};

package/dist/types/components/Grid/components/Col/index.d.ts

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

package/dist/types/components/Grid/components/Row/Row.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { type AlignmentValue } from "../../Grid.types";
+export declare const Row: React.FC<RowProps>;
+interface RowProps {
+    align?: AlignmentValue;
+    direction?: "column" | "row" | "column-reverse" | "row-reverse";
+    justify?: "start" | "center" | "end" | "between" | "around" | "normal";
+    children: React.ReactNode;
+}
+export {};

package/dist/types/components/Grid/components/Row/index.d.ts

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

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

@@ -0,0 +1,2 @@
+export { Grid } from "./Grid";
+export { type GridValue, type ColumnValue, type AlignmentValue, } from "./Grid.types";

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

@@ -46,4 +46,8 @@ export interface HeadingProps {
      * Typographic size of the Heading.
      */
     size?: HeadingSize;
+    /**
+     * Should the Heading component be styled as an inline element?
+     */
+    isInline?: boolean;
 }

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

@@ -1 +1 @@
-export { Heading } from "./Heading";
+export { Heading, type HeadingLevel } from "./Heading";

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

@@ -0,0 +1,5 @@
+import { FC } from "react";
+import { BannerProps } from "../Banner/Banner";
+export declare const HeroBanner: FC<HeroBannerProps>;
+export interface HeroBannerProps extends Omit<BannerProps, "headingSize" | "alignment" | "additionalTopMargin"> {
+}

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

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

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

@@ -0,0 +1,66 @@
+import React, { FC } from "react";
+export type ElementUnion = HTMLButtonElement | HTMLAnchorElement;
+export type Ref = React.Ref<ElementUnion> | null;
+export declare const HeroButton: FC<HeroButtonProps>;
+interface LinkElementProps {
+    /**
+     * URL to link to if `HeroButton` elementType is 'a'.
+     */
+    href?: string;
+    /**
+     * Target window for the `HeroButton` href URL.
+     */
+    target?: string;
+    /**
+     * Relationship between the Button href URL and the current page. See
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
+     */
+    rel?: string;
+}
+interface HeroButtonElementProps {
+    /**
+     * Default behavior of the Button element. If not provided, 'submit' will
+     * be inferred. Type 'reset' deliberately excluded.
+     */
+    type?: "button" | "submit";
+    /**
+     * Refers to the id of a form so it can be submitted if the button exists outside of it.
+     */
+    form?: string;
+}
+export interface HeroButtonProps extends HeroButtonElementProps, LinkElementProps {
+    /**
+     * Label for `HeroButton`
+     */
+    label?: string;
+    /**
+     * Determine the buttonStyle for `HeroButton`. Default style is `primary`
+     */
+    buttonStyle?: "primary" | "primary-gradient" | "secondary" | "secondary-gradient" | "warning";
+    /**
+     * Render icon within `HeroButton`. Warning icon will only render when buttonStyle = 'warning'
+     */
+    icon?: "arrow-right" | "arrow-down" | "play" | "warning";
+    /**
+     * Optional click handler for the `HeroButton`.
+     */
+    onClick?: () => void;
+    /**
+     * Optional property to provide component Ref
+     */
+    ref?: Ref;
+    /**
+     * Text to override `label` with additional, more precise information
+     * specifically for screen reader users.
+     */
+    ariaLabel?: string;
+    /**
+     * HTML ID for the `HeroButton`
+     */
+    id?: string;
+    /**
+     * `HeroButton` will be in a loading state. This will override / add a loading icon to the button in it's respective style
+     */
+    isLoading?: boolean;
+}
+export {};

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

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

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

@@ -0,0 +1,11 @@
+import React from "react";
+export declare const Hidden: React.FC<HiddenProps>;
+interface HiddenProps {
+    xs?: boolean;
+    s?: boolean;
+    m?: boolean;
+    l?: boolean;
+    xl?: boolean;
+    children: React.ReactNode;
+}
+export {};

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

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

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

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import React, { FC } from "react";
 import { ArcIcon } from "../../types/arc-icon";
 /**
  * Use `Icon` to display brand iconography.
@@ -17,7 +17,7 @@ export interface IconProps {
     /**
      * Icon variant.
      */
-    icon?: ArcIcon;
+    icon?: ArcIcon | React.ReactElement<SVGElement>;
     /**
      * Alternative text label for the Icon.
      */
@@ -30,4 +30,8 @@ export interface IconProps {
      * value for data-testid
      */
     testId?: string;
+    /**
+     * hides the icon from screenreaders
+     */
+    isPresentationIcon?: boolean;
 }

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

@@ -64,6 +64,10 @@ export interface ImageProps extends HTMLAttributes<HTMLElement> {
      * to fit the Image. Otherwise, the intrinsic height of the Image element.
      */
     height?: number;
+    /**
+     * If true the image will fade in when its loaded, resulting in a smooth user experience.
+     */
+    fadeOnLoad?: boolean;
     /**
      * Loading behaviour of the Image.
      */

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

@@ -0,0 +1,58 @@
+import React, { FC } from "react";
+import { type HeadingLevel } from "../Heading/Heading";
+import { type ImageProps } from "../Image/Image";
+import { type CardFooterProps } from "../CardFooter";
+import { type CardHeadingSize } from "../CardHeading";
+/** Use `ImpactCard` for important content that needs additional hierarchy and prominence.  */
+export declare const ImpactCard: FC<ImpactCardProps>;
+type ImpactCardPathway = "light" | "dark";
+export interface ImpactCardProps {
+    /**
+     * Heading for the ImpactCard.
+     */
+    heading: string;
+    /**
+     * Heading size for the ImpactCard.
+     */
+    headingSize?: CardHeadingSize;
+    /**
+     * Url for the ImpactCard. Makes the whole card a link
+     */
+    url: string;
+    /**
+     * Sets a dark or light background for the ImpactCard.
+     */
+    pathway?: ImpactCardPathway;
+    /**
+     * Heading level for the ImpactCard heading.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Uppercase label for the ImpactCard.
+     */
+    label?: string;
+    /**
+     * Sets a minimum height for the ImpactCard.
+     */
+    minHeight?: number;
+    /**
+     * Click handler for the ImpactCard.
+     */
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+    /**
+     * Object of `data-` attributes to render on internal anchor element, e.g.
+     * `{ data-analytics-link: "My link"}` => `<a data-analytics-link="My link">`.
+     */
+    linkData?: {
+        [key: string]: string;
+    };
+    /**
+     * Image props for the ImpactCard. Consider avoiding alt if the image is for decorative purposes only.
+     */
+    img: Pick<ImageProps, "src" | "alt" | "loading" | "sizes" | "srcSet" | "anchor" | "fadeOnLoad">;
+    /**
+     * Icon for the ImpactCard CTA button
+     */
+    buttonIcon?: CardFooterProps["buttonIcon"];
+}
+export {};

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

@@ -0,0 +1 @@
+export { ImpactCard, type ImpactCardProps } from "./ImpactCard";

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

@@ -0,0 +1,62 @@
+import React, { FC } from "react";
+import { type ImageProps } from "../Image/Image";
+import { type HeadingLevel } from "../Heading/Heading";
+import { type ButtonV2Props } from "../ButtonV2/ButtonV2";
+import { ArcIcon } from "../../types/arc-icon";
+/** Use `InformationCard` for flexibility and the ability to focus and highlight product specific content. */
+export declare const InformationCard: FC<InformationCardProps>;
+type InformationCardImage = Pick<ImageProps, "alt" | "loading" | "width" | "height" | "src" | "fadeOnLoad">;
+type InformationCardButtonProps = Pick<ButtonV2Props, "label" | "onClick" | "href">;
+export interface InformationCardProps {
+    /**
+     * Heading for the InformationCard.
+     */
+    heading: string;
+    /**
+     * Heading level for the InformationCard heading.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Text content for the InformationCard
+     */
+    text?: string;
+    /**
+     * Uppercase label for the InformationCard.
+     */
+    label?: string;
+    /**
+     * Url for the InformationCard. Makes the whole card a link and hides `button` if provided.
+     */
+    cardUrl?: string;
+    /**
+     * Click handler for the InformationCard. Only applied when a card url is provided.
+     */
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+    /**
+     * Footer logo for the InformationCard.
+     */
+    footerLogo?: InformationCardImage;
+    /**
+     * Header image for the InformationCard.
+     */
+    image?: InformationCardImage;
+    /**
+     * Header icon for the InformationCard.
+     */
+    icon?: ArcIcon;
+    /**
+     * Sets a minimum height for the InformationCard.
+     */
+    minHeight?: number;
+    /**
+     * Badges for the InformationCard.
+     */
+    badges?: {
+        text: string;
+    }[];
+    /**
+     * Cta button for the InformationCard. Hidden if there is a card url.
+     */
+    button?: InformationCardButtonProps;
+}
+export {};

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

@@ -0,0 +1 @@
+export { InformationCard, type InformationCardProps } from "./InformationCard";

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

@@ -0,0 +1,52 @@
+import React from "react";
+/**
+ * Use `Link` to direct users to a new page or piece of information.
+ */
+export declare const Link: React.FC<LinkProps>;
+interface LinkProps {
+    /**
+     * Id attribute for `Link`.
+     */
+    id?: string;
+    /**
+     * href attribute for `Link`.
+     */
+    href?: string;
+    /**
+     * Screen reader text for `Link`, which is visually hidden.
+     */
+    screenReaderText?: string;
+    /**
+     * title attribute for `Link`.
+     */
+    title?: string;
+    /**
+     * Rel attribute for `Link`.
+     */
+    rel?: string;
+    /**
+     * Configures the size of `Link`.
+     */
+    size?: "s" | "m" | "l";
+    /**
+     * Removes underline if true.
+     */
+    isImplied?: boolean;
+    /**
+     * Renders as a button element if true.
+     */
+    isButton?: boolean;
+    /**
+     * Click handler for `Link`.
+     */
+    onClick?: (e: React.MouseEvent) => void;
+    /**
+     * Target for `Link`.
+     */
+    target?: "_self" | "_blank" | "_parent" | "_top";
+    /**
+     * Content for `Link`.
+     */
+    children: string;
+}
+export {};

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

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