@arc-ui/components 11.22.0 → 11.24.0

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

@@ -1,7 +1,7 @@
 import { ReactNode, FC } from "react";
 import { HeadingProps } from "../Heading/Heading";
 import { ArcIcon } from "../../types/arc-icon";
-/** use `Alert` to display persistent messages, either permanent or dismissible. */
+/** Use `Alert` to inform the user of important changes or actions. */
 export declare const Alert: FC<AlertProps>;
 export interface AlertProps {
     /**

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { type AvatarImage } from "./types/avatar-image";
 import { type AvatarSize } from "./types/avatar-size";
+/** Use `Avatar` to visually represent a user. */
 export declare const Avatar: React.FC<AvatarProps>;
 export interface AvatarProps {
     initials?: string;

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { type AvatarSize } from "../Avatar/types/avatar-size";
 import { type GroupAvatar } from "./types/group-avatar";
+/** Use `AvatarGroup` to visually represent a group of users. */
 export declare const AvatarGroup: React.FC<AvatarGroupProps>;
 export interface AvatarGroupProps {
     avatars: GroupAvatar[];

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

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from "react";
-/** Use `Badge` component to visually display a small amount of information, such as notification counts or status indicators. */
+/** Use `Badge` as a static, non-interactive way to provide short updates. */
 export declare const Badge: FC<BadgeProps>;
 export interface BadgeProps {
     /**

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

@@ -3,7 +3,7 @@ import { ArcIcon } from "../../types/arc-icon";
 export type ElementUnion = HTMLButtonElement | HTMLAnchorElement;
 export type Ref = React.Ref<ElementUnion> | null;
 /**
- * Use `Button` to allow users to take actions with clicks and taps.
+ * Use `Button` to let a user complete an action like ‘Log in’ or ‘Register’.
  */
 export declare const Button: FC<ButtonProps>;
 export interface ButtonIconProps {

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

@@ -1,5 +1,6 @@
 import { FC } from "react";
 import { CalendarType, RangeSelection, SelectionType } from "./types";
+/** Use `Calendar` to clearly present available dates and allowing users to choose a way to enter information. */
 export declare const Calendar: FC<CalendarProps>;
 export interface CalendarProps {
     /**

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

@@ -2,6 +2,9 @@ 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<DatePickerProps & React.RefAttributes<HTMLInputElement>>;
 interface DatePickerRangeSelection extends ArcCalendarRangeSelection {
     formattedRange: string;

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

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,8 @@
+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 ColumnValue = GridValue | "auto" | "equal";
+export type Column = ColumnConfig<ColumnValue>;
+export type Arrangement = ColumnConfig<GridValue>;
+export {};

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

@@ -0,0 +1,9 @@
+import React from "react";
+import { Arrangement, Column } from "../../Grid.types";
+export declare const Col: React.FC<ColProps>;
+interface ColProps extends Column {
+    offset?: Arrangement;
+    order?: Arrangement;
+    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,9 @@
+import React from "react";
+export declare const Row: React.FC<RowProps>;
+interface RowProps {
+    direction?: "column" | "row" | "column-reverse" | "row-reverse";
+    align?: "normal" | "start" | "center" | "end" | "stretch";
+    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 } from "./Grid.types";

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/ImpactCard/ImpactCard.d.ts

@@ -2,6 +2,7 @@ import React, { FC } from "react";
 import { HeadingLevel } from "../Heading/Heading";
 import { ImageProps } from "../Image/Image";
 import { CardFooterProps } from "../../private-components/CardFooter/CardFooter";
+/** Use `ImpactCard` for important content that needs additional hierarchy and prominence.  */
 export declare const ImpactCard: FC<ImpactCardProps>;
 type ImpactCardPathway = "light" | "dark";
 export interface ImpactCardProps {

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

@@ -3,6 +3,7 @@ import { ImageProps } from "../Image/Image";
 import { HeadingLevel } from "../Heading/Heading";
 import { ButtonProps } from "../Button/Button";
 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">;
 type InformationCardButtonProps = Pick<ButtonProps, "label" | "onClick" | "href">;

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";

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

@@ -1,6 +1,6 @@
 import React, { FC } from "react";
 import { ButtonProps } from "../Button/Button";
-/** Use `Modal` to focus a user's attention to an urgent or required prompt for interaction or input. */
+/** Use `Modal` to display information that needs immediate action from a user. */
 export declare const Modal: FC<ModalProps>;
 export interface ModalProps {
     /**

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

@@ -1,6 +1,6 @@
 import { FC } from "react";
 /**
- * Use `Pagination` to navigate multiple pages.
+ * Use `Pagination` to navigate through multiple pages of content.
  */
 export declare const Pagination: FC<PaginationProps>;
 export interface PaginationProps {

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

@@ -1,6 +1,6 @@
-import { FC } from "react";
+import React, { FC } from "react";
 /**
- * Use `PaginationSimple` to navigate multiple pages.
+ * Use `PaginationSimple` to navigate through multiple pages of content.
  */
 export declare const PaginationSimple: FC<PaginationSimpleProps>;
 export interface PaginationSimpleProps {
@@ -12,6 +12,14 @@ export interface PaginationSimpleProps {
      * hides next button if true.
      */
     hideNext?: boolean;
+    /**
+     * makes prev button a link
+     */
+    prevHref?: string;
+    /**
+     * makes next button a link
+     */
+    nextHref?: string;
     /**
      * if true buttons will hug either edge of the parent element
      */
@@ -19,9 +27,9 @@ export interface PaginationSimpleProps {
     /**
      * Function to call when previous page is selected
      */
-    onPrevPage: () => void;
+    onPrevPage?: (e: React.MouseEvent) => void;
     /**
      * Function to call when next page is selected
      */
-    onNextPage: () => void;
+    onNextPage?: (e: React.MouseEvent) => void;
 }

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

@@ -1,6 +1,9 @@
 import { FC } from "react";
 import { ProgressBarState } from "./types/progress-bar-state";
 import { ProgressBarIcons } from "./types/progress-bar-icons";
+/**
+ * Use `ProgressBar` to show the progress of a specific task within a page.
+ */
 export declare const ProgressBar: FC<ProgressBarProps>;
 export interface ProgressBarProps {
     /**
@@ -39,6 +42,7 @@ export interface ProgressBarProps {
      * Action for the progress bar.
      */
     action?: {
+        autofocusOnMount?: boolean;
         text: string;
         action: () => void;
         icon?: ProgressBarIcons;

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

@@ -1,6 +1,6 @@
 import { FC, ReactNode } from "react";
 import { ProgressStepperItem } from "./ProgressStepperItem/ProgressStepperItem";
-/** Use `ProgressStepper` to illustrate the progress of a specific task within a page, by displaying a step-by-step progress through the user journey. This is commonly used in multi-step processes or wizards.  */
+/** Use `ProgressStepper` to provide an overview of a series of steps in a digital journey. */
 export declare const ProgressStepper: FC<ProgressStepperProps> & {
     Item: typeof ProgressStepperItem;
 };

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

@@ -1,5 +1,6 @@
 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;
 };

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

@@ -1,7 +1,7 @@
 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"> {
     /**

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/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/TextArea/TextArea.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { FormControlProps } from "../FormControl/FormControl";
+import { AutoCompleteTypes } from "../../types/auto-complete-types";
 type EventType = React.ChangeEvent<HTMLTextAreaElement>;
 /** 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>>;
@@ -63,5 +64,9 @@ export interface TextAreaProps extends Omit<FormControlProps, "children" | "elem
      * Sets the width of the TextArea.
      */
     width?: string;
+    /**
+     *  Sets autoComplete value for TextArea.
+     */
+    autoComplete?: AutoCompleteTypes;
 }
 export {};

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

@@ -1,7 +1,11 @@
 import React from "react";
 import { FormControlProps } from "../FormControl/FormControl";
 import { ArcIcon } from "../../types/arc-icon";
+import { AutoCompleteTypes } from "../../types/auto-complete-types";
 type EventType = React.ChangeEvent<HTMLInputElement>;
+/**
+ * Use `TextInput` to allow users to enter short form text.
+ */
 export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
 export declare const TextInputWithPlaceHolder: React.ForwardRefExoticComponent<TextInputComponentProps & React.RefAttributes<HTMLInputElement>>;
 export interface TextInputComponentProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "helperUnderLabel" | "supplementaryInfo"> {
@@ -103,6 +107,10 @@ export interface TextInputComponentProps extends Omit<FormControlProps, "childre
      * Sets the width of the TextInput.
      */
     width?: string;
+    /**
+     *  Sets autoComplete value for TextInput.
+     */
+    autoComplete?: AutoCompleteTypes;
 }
 export type TextInputProps = Omit<TextInputComponentProps, "placeholder">;
 export type TextInputWithPlaceholderProps = TextInputComponentProps;

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

@@ -1,6 +1,6 @@
 import React, { FC } from "react";
 import { ToastNotification } from "./ToastNotification";
-/** Use `Toast` to display temporary messages at the bottom of the viewport. */
+/** Use `Toast` to display temporary messages at the bottom of the screen. */
 export declare const Toast: FC<ToastProps> & {
     Notification: typeof ToastNotification;
 };

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

@@ -1,5 +1,6 @@
 import React, { FC } from "react";
 import { HeadingLevel } from "../Heading/Heading";
+/** Use `TypographyCard` for content that benefits from larger and energetic typography. */
 export declare const TypographyCard: FC<TypographyCardProps>;
 type TypographyCardIcon = "play" | "arrow";
 type TypographyCardPathway = "light" | "dark";

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { FC, ReactNode } from "react";
 /**
- * Provides text for screen readers that is visually hidden.
+ * Use `VisuallyHidden` to provide text for screen readers that is visually hidden on screen.
  */
 export declare const VisuallyHidden: FC<VisuallyHiddenProps>;
 export interface VisuallyHiddenProps {

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

@@ -18,8 +18,10 @@ export { DisclosureMini } from "./DisclosureMini";
 export { Elevation } from "./Elevation";
 export { Filter } from "./Filter";
 export { FormControl } from "./FormControl";
+export { Grid } from "./Grid";
 export { Group } from "./Group";
 export { Heading } from "./Heading";
+export { Hidden } from "./Hidden";
 export { Icon } from "./Icon";
 export { InformationCard } from "./InformationCard";
 export { Image } from "./Image";
@@ -52,4 +54,6 @@ export { Truncate } from "./Truncate";
 export { TypographyCard } from "./TypographyCard";
 export { UniversalHeader } from "./UniversalHeader";
 export { VerticalSpace } from "./VerticalSpace";
+export { Visible } from "./Visible";
 export { VisuallyHidden } from "./VisuallyHidden";
+export { Link } from "./Link";

package/dist/types/styles.d.ts

@@ -82,6 +82,10 @@ import "./components/InformationCard/InformationCard.css";
 import "./components/TypographyCard/TypographyCard.css";
 import "./components/Avatar/Avatar.css";
 import "./components/AvatarGroup/AvatarGroup.css";
+import "./components/Grid/Grid.css";
+import "./components/Hidden/Hidden.css";
+import "./components/Visible/Visible.css";
+import "./components/Link/Link.css";
 import "./private-components/CardHeading/CardHeading.css";
 import "./private-components/CardLabel/CardLabel.css";
 import "./private-components/CardFooter/CardFooter.css";

package/dist/types/types/auto-complete-types.d.ts

@@ -0,0 +1 @@
+export type AutoCompleteTypes = "on" | "off" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "country" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "email" | "impp" | "url" | "photo" | "organization-unit";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arc-ui/components",
-  "version": "11.22.0",
+  "version": "11.24.0",
   "homepage": "https://ui.digital-ent-int.bt.com",
   "author": "BT Enterprise Digital UI Team <ui-digital-ent-int@bt.com>",
   "main": "./dist/index.js",
@@ -12,8 +12,8 @@
     "storybook:build": "storybook build --quiet",
     "storybook:quiet": "pnpm run storybook --quiet",
     "coverage:summary": "pnpm dlx nyc report --reporter=text-summary",
-    "coverage:files": "pnpm dlx nyc report --reporter=text",
-    "coverage:check": "pnpm dlx nyc report --check-coverage --lines 85 --functions 85 --branches 85 --statements 85",
+    "coverage:files": "pnpm dlx nyc@15.0.0 report --reporter=text",
+    "coverage:check": "pnpm dlx nyc@15.0.0 report --check-coverage --lines 85 --functions 85 --branches 85 --statements 85",
     "test:components": "cypress open --component",
     "test:components:ci": "cypress run --component --browser chrome",
     "test:components:pipeline": "pnpm run test:components:ci && pnpm run coverage:check",