@arc-ui/components 11.6.0 → 11.8.0

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

@@ -0,0 +1,36 @@
+import React, { FC } from "react";
+import { SurfaceBackgroundColor, SurfacePadding } from "../Surface/Surface";
+/**
+ * Use `Box` as a simple way to group bespoke content and interactive elements together.
+ */
+export declare const Box: FC<BoxProps>;
+export interface BoxProps {
+    /**
+     * Contents of the Box.
+     */
+    children: React.ReactNode;
+    /**
+     * Set Box to fill parent element.
+     */
+    isFullHeight?: boolean;
+    /**
+     * Add rounded corners to the box.
+     */
+    isBorderRadius?: boolean;
+    /**
+     * The border width of the box.
+     */
+    borderWidth?: "thin" | "medium";
+    /**
+     * Box shadow for the box.
+     */
+    elevationLevel?: "1" | "2";
+    /**
+     * Padding for the box.
+     */
+    padding?: SurfacePadding;
+    /**
+     * Background color for the box.
+     */
+    surface?: SurfaceBackgroundColor;
+}

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

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

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

@@ -26,6 +26,10 @@ interface ButtonElementProps {
      * 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;
 }
 interface LinkElementProps {
     /**

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

@@ -6,7 +6,7 @@ export declare const Columns: FC<ColumnsProps> & {
     Col: typeof Col;
 };
 export declare const Col: FC<ColProps>;
-declare type Span = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export declare type Span = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 declare type Offset = "0" | "24" | "48" | "72" | "96" | "120" | "144" | "168" | "192" | "216" | "240" | "264" | "288" | "312" | "336" | "360" | "384";
 export interface ColProps {
     /**

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

@@ -1 +1 @@
-export { Columns } from "./Columns";
+export { Columns, Span } from "./Columns";

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

@@ -1,8 +1,11 @@
 import { FC } from "react";
 import { backgroundsBT } from "../Surface";
 /**
- * Use `Curve` sparingly to soften edges and create a more natural, less rigid
- * look and feel.
+#### Deprecation Notice
+
+The `Curve` component is an outdated brand feature and is being deprecated from Arc as a standalone component or sub-component within other components. Do not use Curve for any new work, and prepare to update any design that features it to remove it.
+
+`Curve` will be removed from Arc in a subsequent release
  */
 export declare const Curve: FC<CurveProps>;
 export declare const sizes: readonly ["s", "m", "l"];

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

@@ -33,6 +33,10 @@ export interface HeadingProps {
      * The color of the Heading.
      */
     color?: HeadingColor;
+    /**
+     * Id for the Heading.
+     */
+    id?: string;
     /**
      * HTML section heading level. If not provided, the Heading will render as
      * a span.

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

@@ -1 +1 @@
-export { Image } from "./Image";
+export { Image, loadingOptions } from "./Image";

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

@@ -0,0 +1,57 @@
+import { loadingOptions } from "../Image";
+import React, { FC } from "react";
+import { BoxProps } from "../Box";
+/**
+ * Use `MediaCard` to contain content and an image about a single subject.
+ */
+export declare const MediaCard: FC<MediaCardProps>;
+export interface MediaCardProps {
+    /**
+     * Content of the MediaCard.
+     */
+    children: React.ReactNode;
+    /**
+     * Footer Content of the MediaCard.
+     */
+    cardFooter?: React.ReactNode;
+    /**
+     * Add rounded corners to the MediaCard.
+     */
+    isBorderRadius?: BoxProps["isBorderRadius"];
+    /**
+     * The border width of the MediaCard.
+     */
+    borderWidth?: BoxProps["borderWidth"];
+    /**
+     * Box shadow for the MediaCard.
+     */
+    elevationLevel?: BoxProps["elevationLevel"];
+    /**
+     * Set MediaCard to fill parent element.
+     */
+    isFullHeight?: boolean;
+    /**
+     * Background color for the MediaCard.
+     */
+    surface?: BoxProps["surface"];
+    /**
+     * image src for the MediaCard.
+     */
+    imageSrc: string;
+    /**
+     * image alt for the MediaCard.
+     */
+    imageAlt?: string;
+    /**
+     * Loading behaviour of the MediaCard.
+     */
+    imageLoading?: typeof loadingOptions[number];
+    /**
+     * The HTML [sizes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes) attribute. Required if srcSet is defined.
+     */
+    imageSizes?: string;
+    /**
+     * A comma-separated list indicating a set of possible image sources for the user agent to use for different screen sizes. Same format as [srcSet](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes), i.e. `my-image-200.png 200w, my-image-200.png 200w`.
+     */
+    imageSrcSet?: string;
+}

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

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

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

@@ -1,28 +1,50 @@
 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. */
 export declare const Modal: FC<ModalProps>;
 export interface ModalProps {
     /**
-     * title for the modal dialog, announced when opened
+     * Title for the modal. This will be announced by screen readers when the modal opens.
      */
     title: string;
     /**
-     * description for the modal dialog, announced when opened
+     * Role for the modal. use alertdialog if explicit user input is required e.g deleting an account. role alertdialog will remove the ability to close the modal by either the esc key being pressed, clicking the cross icon or clicking outside.
      */
-    description: string;
+    role?: "dialog" | "alertdialog";
     /**
-     * Function to be called when the modal has been requested to close.
+     * Whether to return focus to the element that was focused before the modal opened. True by default.
      */
-    onClose: () => void;
+    shouldReturnFocus?: boolean;
     /**
-     * determines whether the description is visible. If set to false it will be visually hidden, but will still be announaced by screen readers. Set to true by default.
+     * Description for the modal. This will be announced by screen readers when the modal opens.
      */
-    showDescription?: boolean;
+    description?: string;
     /**
-     * Set modal open or closed
+     * ID for the element description to be announced by screenreaders in addition to the title.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Configurable actions for the modal.
+     */
+    actions?: Pick<ButtonProps, "form" | "type" | "fill" | "icon" | "iconPosition" | "href" | "id" | "label" | "onClick" | "isDisabled" | "ariaLabel" | "rel">[];
+    /**
+     * Function to be called when the modal has been requested to close by either the esc key being pressed, outside the dialog being clicked or the close button being clicked. The callback must set the open state of the modal to false. This function is ignored if the `role` prop is set to `alertdialog`. You can prevent this behavior with the `dialog` role by ommitting this prop.
+     */
+    onRequestClose?: () => void;
+    /**
+     * Size of the modal dialog.
+     */
+    size?: "s" | "m" | "l";
+    /**
+     * Set modal open or closed.
      */
     isOpen?: boolean;
     /**
-     * content for the modal
+     * Enables the dialog content to be scrolled internally.
+     */
+    isContentScrollable?: boolean;
+    /**
+     * Custom content for `Modal`.
      */
     children?: React.ReactNode;
 }

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

@@ -0,0 +1,28 @@
+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.  */
+export declare const ProgressStepper: FC<ProgressStepperProps> & {
+    Item: typeof ProgressStepperItem;
+};
+export interface ProgressStepperProps {
+    /**
+     * Children of `<ProgressStepper />` should only contain `<ProgressStepper.Item />`
+     */
+    children?: ReactNode;
+    /**
+     * Determine a direction for `<ProgressStepper.Item />`
+     */
+    direction?: "horizontal" | "vertical";
+    /**
+     * Determine the size for `<ProgressStepper.Item />`
+     */
+    size?: "small" | "large";
+    /**
+     * Determine if `<ProgressStepper.Item />` should be Fluid. Only appliciable for `horizontal direction.`
+     */
+    isFluid?: boolean;
+    /**
+     * Determine if `<ProgressStepper.Item />` should be able to expand. This only is appliciable when direction is set to vertical
+     */
+    isExpandable?: boolean;
+}

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

@@ -0,0 +1,62 @@
+import { FC, ReactNode } from "react";
+import { ProgressStatus } from "../progressStatus";
+export declare const ProgressStepperItem: FC<ProgressStepperItemProps>;
+export interface ProgressStepperItemProps {
+    /**
+     * Determine a title for `<ProgressStepper.Item />`
+     */
+    title: string;
+    /**
+     * Determine a title for `<ProgressStepper.Item />`
+     */
+    titleHref?: string;
+    /**
+     * Text to override `linkTitle` with additional, more precise information
+     * specifically for screen reader users.
+     */
+    ariaLabel?: string;
+    /**
+     * Execute a function on title click `<ProgressStepper.Item />`
+     */
+    onClick?: () => void;
+    /**
+     * Determine a sub title for `<ProgressStepper.Item />`
+     */
+    subTitle?: string;
+    /**
+     * Determine a direction for `<ProgressStepper.Item />`
+     */
+    direction?: "horizontal" | "vertical";
+    /**
+     * Determine the position of the step `<ProgressStepper.Item />`
+     */
+    position?: "first" | "middle" | "last";
+    /**
+     * Determine a status for `<ProgressStepper.Item />`
+     */
+    status?: ProgressStatus;
+    /**
+     * Determine the size for `<ProgressStepper.Item />`
+     */
+    size?: "small" | "large";
+    /**
+     * Determine if `<ProgressStepper.Item /> should be Fluid`
+     */
+    isFluid?: boolean;
+    /**
+     * Determine the context `<ProgressStepper.Item /> should b`
+     */
+    previousStep?: ProgressStatus;
+    /**
+     * Determine if `<ProgressStepper.Item /> should have expandable content`
+     */
+    isExpandable?: boolean;
+    /**
+     * Determine what content to display in `<ProgressStepper.Item />. To use this option isExpandable must be `true``
+     */
+    stepContent?: ReactNode;
+    /**
+     * Determine if `stepContent` is hidden
+     */
+    isStepContentHidden?: boolean;
+}

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

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

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

@@ -0,0 +1 @@
+export declare type ProgressStatus = "completed" | "current" | "warning" | "error" | "todo";

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

@@ -10,12 +10,13 @@ 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 type SurfacePadding = "8" | "12" | "16" | "24" | "32" | "48" | "64";
+export declare type SurfaceBackgroundColor = "black" | "brand" | "brand-flat" | "dark" | "darker" | "coral" | "turquoise" | "light" | "lighter" | "white";
 export interface SurfaceProps extends HTMLAttributes<HTMLElement> {
     /**
      * Background colour of the Surface. Contents will change colour to meet
      * accessibility requirements.
      */
-    background?: typeof backgrounds[number];
+    background?: SurfaceBackgroundColor;
     /**
      * Content to display on the Surface.
      */

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

@@ -1 +1 @@
-export { Surface, SurfaceContext, backgrounds, backgroundsBT } from "./Surface";
+export { Surface, SurfaceContext, backgrounds, backgroundsBT, SurfacePadding, SurfaceBackgroundColor } from "./Surface";

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

@@ -0,0 +1,22 @@
+import { FC } from "react";
+import { ArcIcon } from "../../../types/arc-icon";
+export declare const Tab: FC<TabProps>;
+interface TabProps {
+    /**
+     * Label to display on the Tab
+     */
+    label: string;
+    /**
+     * Value to link `Tab` to `TabContent`
+     */
+    value: string;
+    /**
+     * Determine what icon to display within the Tab.
+     */
+    icon?: ArcIcon;
+    /**
+     * Determine what to display when `Tab` is active
+     */
+    iconActive?: ArcIcon;
+}
+export {};

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

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

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

@@ -0,0 +1,12 @@
+import { FC, ReactNode } from "react";
+export declare const TabContent: FC<TabContentProps>;
+export interface TabContentProps {
+    /**
+     * Content to display
+     */
+    children: ReactNode;
+    /**
+     * This value links the `TabContent` with `Tab`
+     */
+    value: string;
+}

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

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

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

@@ -0,0 +1,27 @@
+import { FC, ReactNode } from "react";
+import { Tab } from "./Tab/Tab";
+import { TabContent } from "./TabContent";
+import { TabsList } from "./TabsList";
+export declare const Tabs: FC<TabsProps> & {
+    Tab: typeof Tab;
+    Content: typeof TabContent;
+    List: typeof TabsList;
+};
+export interface TabsProps {
+    /**
+     * Render children
+     */
+    children: ReactNode;
+    /**
+     * Default to an inital value of a tab. If this is left blank it is possible for there to be no active tabs
+     */
+    defaultValue?: string;
+    /**
+     * Event handler called when the value changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * When automatic, tabs are activated when receiving focus. When manual, tabs are activated when clicked.
+     */
+    activationMode?: "automatic" | "manual";
+}

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

@@ -0,0 +1,20 @@
+import { FC, ReactNode } from "react";
+export declare const TabsList: FC<TabsListProps>;
+export interface TabsListProps {
+    /**
+     * Contents of the `Tabs` Should contain `Tab`
+     */
+    children: ReactNode;
+    /**
+     * Determine if `Tabs` should be justified
+     */
+    isJustified?: boolean;
+    /**
+     * Determine the type of `Tabs`. Default is standard
+     */
+    type?: "standard" | "contained";
+    /**
+     * Determine a accessible label for `Tabs`
+     */
+    ariaLabel?: string;
+}

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

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

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

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

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

@@ -30,4 +30,8 @@ export interface TextProps {
      * Visual emphasis of the Text.
      */
     tone?: Tone;
+    /**
+     * Id for the Text.
+     */
+    id?: string;
 }

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

@@ -1,11 +1,14 @@
 import React from "react";
 import { FormControlProps } from "../FormControl/FormControl";
 declare 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>>;
 export interface TextAreaProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "helperUnderLabel"> {
     /**
      * Uncontrolled default value of the TextArea. If the TextArea is controlled
      * via `value`/`onChange`, `defaultValue` will be ignored.
+     *
+     * `defaultValue` is not to be used instead of helper text.
      */
     defaultValue?: string;
     /**

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

@@ -9,6 +9,8 @@ export interface TextInputProps extends Omit<FormControlProps, "children" | "ele
     /**
      * Uncontrolled default value of the TextInput. If the TextInput is controlled
      * via `value`/`onChange`, `defaultValue` will be ignored.
+     *
+     * `defaultValue` is not to be used instead of helper text.
      */
     defaultValue?: string;
     /**

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

@@ -0,0 +1,14 @@
+import React, { FC } from "react";
+import { ToastNotification } from "./ToastNotification";
+/** Use `Toast` to display temporary messages at the bottom of the viewport. */
+export declare const Toast: FC<ToastProps> & {
+    Notification: typeof ToastNotification;
+};
+interface ToastProps {
+    children: React.ReactNode;
+    /**
+     * Color scheme for `<Toast />`
+     */
+    pathway?: "dark" | "light";
+}
+export {};

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

@@ -0,0 +1,39 @@
+import { FC } from "react";
+export declare const ToastNotification: FC<ToastNotificationProps>;
+declare type ToastStatus = "general" | "error" | "warning" | "success";
+export interface ToastNotificationProps {
+    /**
+     * Title for `<Toast />`
+     */
+    title: string;
+    /**
+     * Set open state for `<Toast />`
+     */
+    isOpen: boolean;
+    /**
+     * Function to call when the open state of `<Toast />` changes. This needs to be supplied in order for the auto dismiss and the close button to work.
+     */
+    onOpenChange: (isOpen: boolean) => void;
+    /**
+     * Set whether close button shows
+     */
+    isCloseButtonVisible?: boolean;
+    /**
+     * Set whether to include a status icon
+     */
+    isStatusIconVisible?: boolean;
+    /**
+     * Link for `<Toast />`
+     */
+    link?: {
+        text: string;
+        ariaLabel?: string;
+        href?: string;
+        onClick?: () => void;
+    };
+    /**
+     * Sstatus of `<Toast />`
+     */
+    status?: ToastStatus;
+}
+export {};

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

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

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

@@ -17,6 +17,7 @@ export { Heading } from "./Heading";
 export { Icon } from "./Icon";
 export { Image } from "./Image";
 export { Markup } from "./Markup";
+export { Modal } from "./Modal";
 export { UniversalHeader } from "./UniversalHeader";
 export { Poster } from "./Poster";
 export { RadioGroup } from "./RadioGroup";

package/dist/types/styles.d.ts

@@ -5,6 +5,7 @@ import "./components/Base/Base.css";
 import "./components/BrandLogo/BrandLogo.css";
 import "./components/Breadcrumbs/Breadcrumbs.css";
 import "./components/Card/Card.css";
+import "./components/Box/Box.css";
 import "./components/Button/Button.css";
 import "./components/Checkbox/Checkbox.css";
 import "./components/Clock/Clock.css";
@@ -20,6 +21,7 @@ import "./components/Heading/Heading.css";
 import "./components/Icon/Icon.css";
 import "./components/Image/Image.css";
 import "./components/Markup/Markup.css";
+import "./components/MediaCard/MediaCard.css";
 import "./components/Modal/Modal.css";
 import "./components/Pagination/Pagination.css";
 import "./components/PaginationSimple/PaginationSimple.css";
@@ -33,6 +35,7 @@ import "./components/Select/Select.css";
 import "./components/SiteFooter/SiteFooter.css";
 import "./components/SiteHeader/SiteHeader.css";
 import "./components/Surface/Surface.css";
+import "./components/Tabs/Tabs.css";
 import "./components/Tag/Tag.css";
 import "./components/Text/Text.css";
 import "./components/TextArea/TextArea.css";
@@ -63,7 +66,10 @@ import "./components/Select/Select.bt.css";
 import "./components/SiteFooter/SiteFooter.bt.css";
 import "./components/SiteHeader/SiteHeader.bt.css";
 import "./components/Surface/Surface.bt.css";
+import "./components/Tabs/Tabs.css";
 import "./components/Text/Text.bt.css";
 import "./components/TextInput/TextInput.bt.css";
 import "./components/UniversalHeader/UniversalHeader.bt.css";
 import "./components/Switch/Switch.bt.css";
+import "./components/Toast/Toast.css";
+import "./components/ProgressStepper/ProgressStepper.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arc-ui/components",
-  "version": "11.6.0",
+  "version": "11.8.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",
@@ -26,15 +26,17 @@
     "react": "^18.0.0"
   },
   "dependencies": {
-    "@radix-ui/react-dialog": "1.0.2",
+    "@radix-ui/react-dialog": "1.0.4",
     "@radix-ui/react-label": "2.0.0",
     "@radix-ui/react-select": "1.1.2",
-    "@radix-ui/react-switch": "^1.0.1"
+    "@radix-ui/react-switch": "1.0.1",
+    "@radix-ui/react-tabs": "1.0.4",
+    "@radix-ui/react-toast": "1.1.4"
   },
   "devDependencies": {
-    "@arc-ui/fonts": "^11.6.0",
-    "@arc-ui/icons": "^11.6.0",
-    "@arc-ui/tokens": "^11.6.0",
+    "@arc-ui/fonts": "^11.8.0",
+    "@arc-ui/icons": "^11.8.0",
+    "@arc-ui/tokens": "^11.8.0",
     "@babel/core": "^7.14.3",
     "@babel/helper-define-map": "^7.14.3",
     "@storybook/addon-essentials": "^6.3.6",