@arc-ui/components 11.4.2 → 11.6.0

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

@@ -0,0 +1,56 @@
+import { FC } from "react";
+import { HeadingProps } from "../Heading/Heading";
+import { ArcIcon } from "../../types/arc-icon";
+/** use `Alert` to display persistent messages, either permanent or dismissible. */
+export declare const Alert: FC<AlertProps>;
+export interface AlertProps {
+    /**
+     * Determine a heading for `<Alert />`
+     */
+    heading: string;
+    /**
+     * Determine a heading for `<Alert />`
+     */
+    headingLevel?: HeadingProps["level"];
+    /**
+     * Determine a description for `<Alert />`
+     */
+    description?: string;
+    /**
+     * Determine a link for `<Alert />`
+     */
+    link?: string;
+    /**
+     * Determine the text to link
+     */
+    linkText?: string;
+    /**
+     * Determine a icon to display within `<Alert />`. This overrides the default icons.
+     */
+    icon?: ArcIcon;
+    /**
+     * Determine the type of alert
+     */
+    type?: "primary" | "secondary";
+    /**
+     * Determine the type of alert
+     */
+    status?: "general" | "error" | "warning" | "success";
+    /**
+     * Determine showing a dismiss icon within `<Alert />`
+     */
+    isDismissable?: boolean;
+    /**
+     * Execute a function when dismiss is envoked
+     */
+    onDismiss?: () => void;
+    /**
+     * Execute a function when link is envoked. This prevents the default behaviour for `<a >` Tag
+     */
+    onLinkClick?: () => void;
+    /**
+     * Text to override `linkText` with additional, more precise information
+     * specifically for screen reader users.
+     */
+    linkAriaLabel?: string;
+}

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

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

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

@@ -13,6 +13,11 @@ export interface CheckboxProps {
      * Helper text for the Checkbox, shown below the label.
      */
     helper?: React.ReactNode;
+    /**
+     * Determine the alignment the Checkbox.
+     *
+     */
+    checkboxAlignment?: "top" | "center";
     /**
      * ID for the Checkbox.
      */
@@ -22,7 +27,7 @@ export interface CheckboxProps {
      */
     checked?: boolean;
     /**
-     * Should the Checkbox be disabled?
+     * `isDisabled` is a legacy property and not recommended from a UX usability best practice perspective.
      */
     isDisabled?: boolean;
     /**

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

@@ -0,0 +1,36 @@
+import { FC, ReactNode } from "react";
+/**
+ * Use `DisclosureMini` to display content that is only visible when toggled into
+ * an "open" state.
+ */
+export declare const DisclosureMini: FC<DisclosureMiniProps>;
+export interface DisclosureMiniProps {
+    /**
+     * Content to display in the DisclosureMini.
+     */
+    children: ReactNode;
+    /**
+     * DisclosureMini ID.
+     */
+    id?: string;
+    /**
+     * The DisclosureMini summary text.
+     */
+    summary: string;
+    /**
+     * Should the Disclosure content be open by default?
+     */
+    isOpen?: boolean;
+    /**
+     * Position of the DisclosureMini icon?
+     */
+    iconPosition?: "left" | "right";
+    /**
+     * On Click handler for DisclosureMini summary disclosure.
+     */
+    onClick?: () => void;
+    /**
+     * Disclosure size.
+     */
+    size?: "s" | "l";
+}

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

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

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

@@ -8,6 +8,10 @@ export interface ElevationProps {
      * Contents to Elevate.
      */
     children: ReactNode;
+    /**
+     * Shadow Elevation level.
+     */
+    elevationLevel?: "1" | "2";
     /**
      * Should the Elevation be full width?
      */

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

@@ -0,0 +1,38 @@
+import { FC, ReactNode } from "react";
+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. */
+export declare const Filter: FC<FilterProps> & {
+    Item: typeof FilterItem;
+    Items: typeof FilterItems;
+    Control: typeof FilterControl;
+    Controls: typeof FilterControls;
+};
+export interface FilterProps {
+    /**
+     * Contents of the `<Filter />` Should contain `<Filter.Item />`
+     */
+    children?: ReactNode;
+    /**
+     * onChange handler called everytime `<FilterControl />` is pressed
+     */
+    onChange?: (selectedControls: string[]) => void;
+    /**
+     * Detmine how to display the content within `<Filter.Items />`. Default is `grid`
+     */
+    displayType?: FilterItemsProps["displayType"];
+    /**
+     * Detmine how to align <Filter.Controls />. Default `center`
+     */
+    controlsAlignment?: FilterControlsProps["controlsAlignment"];
+    /**
+     * Detmine if the `<Filter.Control />` have to partially match or match all
+     */
+    logicType?: "AND" | "OR";
+    /**
+     * Detmine what is display when no items match the filtering criteria
+     */
+    error?: ReactNode;
+}

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

@@ -0,0 +1,16 @@
+import { FC, ReactNode } from "react";
+export declare const FilterControl: FC<FilterControlProps>;
+export interface FilterControlProps {
+    /**
+     * Name of the `<FilterControl />`
+     */
+    children: ReactNode;
+    /**
+     * Determine if the `<FilterControl />` is selected
+     */
+    isSelected?: boolean;
+    /**
+     * onClick handler
+     */
+    onClick?: () => void;
+}

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

@@ -0,0 +1,12 @@
+import { FC, ReactNode } from "react";
+export declare const FilterControls: FC<FilterControlsProps>;
+export interface FilterControlsProps {
+    /**
+     * Contents of the `<FilterControls />` Should contain `<FilterControl />`
+     */
+    children: ReactNode;
+    /**
+     * Detmine how to align <FilterControl /> with in <FilterControls />. Default `center`
+     */
+    controlsAlignment?: "left" | "right" | "center";
+}

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

@@ -0,0 +1,12 @@
+import { FC, ReactNode } from "react";
+export declare const FilterItem: FC<FilterItemProps>;
+export interface FilterItemProps {
+    /**
+     * Content to display within `Filter.Item`
+     */
+    children: ReactNode;
+    /**
+     * Attach Tags to content provided within `Filter.Item`
+     */
+    tags: string[];
+}

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

@@ -0,0 +1,12 @@
+import { FC, ReactNode } from "react";
+export declare const FilterItems: FC<FilterItemsProps>;
+export interface FilterItemsProps {
+    /**
+     * Render children of `<Filter.Items />`. This should only use `<Filter.Item />`
+     */
+    children: ReactNode;
+    /**
+     * Determine the display style of `<Filter.Item />`
+     */
+    displayType?: "grid" | "list";
+}

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

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

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

@@ -63,6 +63,10 @@ export interface FormControlProps {
      * onClick handler for FormControlDisclosure
      */
     onClickDisclosure?: () => void;
+    /**
+     * Optional additional information for the FormControl.
+     */
+    supplementaryInfo?: React.ReactNode;
     /**
      * Position helper text under label. This is set to `false` by default.
      */

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

@@ -0,0 +1,19 @@
+import { FC } from "react";
+/**
+ * Use `Pagination` to navigate multiple pages.
+ */
+export declare const Pagination: FC<PaginationProps>;
+export interface PaginationProps {
+    /**
+     * Number of pages for the pagination
+     */
+    pageCount: number;
+    /**
+     * Default page to be selected on render. If not provided defaults to 1.
+     */
+    defaultSelectedPage?: number;
+    /**
+     * Function to call when the page changes
+     */
+    onPageChange: (selectedPage: number) => void;
+}

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

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

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

@@ -0,0 +1,27 @@
+import { FC } from "react";
+/**
+ * Use `PaginationSimple` to navigate multiple pages.
+ */
+export declare const PaginationSimple: FC<PaginationSimpleProps>;
+export interface PaginationSimpleProps {
+    /**
+     * hides prev button if true.
+     */
+    hidePrev?: boolean;
+    /**
+     * hides next button if true.
+     */
+    hideNext?: boolean;
+    /**
+     * if true buttons will hug either edge of the parent element
+     */
+    isFluid?: boolean;
+    /**
+     * Function to call when previous page is selected
+     */
+    onPrevPage: () => void;
+    /**
+     * Function to call when next page is selected
+     */
+    onNextPage: () => void;
+}

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

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

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

@@ -8,7 +8,7 @@ declare type EventType = React.ChangeEvent<HTMLInputElement>;
 export declare const RadioGroup: FC<RadioGroupProps> & {
     RadioButton: typeof RadioButton;
 };
-export interface RadioGroupProps extends Omit<FormControlProps, "children" | "elementType" | "errorMessage" | "htmlFor" | "labelSize" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "helperUnderLabel"> {
+export interface RadioGroupProps extends Omit<FormControlProps, "children" | "elementType" | "errorMessage" | "htmlFor" | "labelSize" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "helperUnderLabel" | "supplementaryInfo"> {
     /**
      * Contents of the RadioGroup. Should only contain `RadioGroup.RadioButton`
      */

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

@@ -0,0 +1,24 @@
+import { FC } from "react";
+/**
+ * Use `ScrollToTop` to allow the user to scroll to the top of the page by clicking a button.
+ */
+export declare const ScrollToTop: FC<ScrollToTopProps>;
+export interface ScrollToTopProps {
+    /**
+     * If true, the button will stick to the bottom right corner of the screen.
+     */
+    isFixed?: boolean;
+    /**
+     * Sets when the scroll button should appear. `always` will show the button all the time.
+     * `afterScroll` will show the button when the user has stopped scrolling and have passed the fold.
+     */
+    appear?: "always" | "afterScroll";
+    /**
+     * Z-index for the button. Used to fine tune the overlapping of other page elements.
+     */
+    zIndex?: number;
+    /**
+     * Button fill.
+     */
+    fill?: "solid" | "outlined";
+}

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

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

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

@@ -2,7 +2,7 @@ import React, { FocusEvent } from "react";
 import { FormControlProps } from "../FormControl/FormControl";
 /** Use `Select` to choose from a dropdown list of options. */
 export declare const Select: React.FC<SelectProps>;
-export interface SelectProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "id" | "helperUnderLabel"> {
+export interface SelectProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "id" | "helperUnderLabel" | "supplementaryInfo"> {
     name: string;
     label: string;
     placeholder: string;

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

@@ -4,6 +4,7 @@ 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";
 declare const Context: React.Context<{
     transparent: boolean;
@@ -16,6 +17,7 @@ export declare const SiteHeader: FC<SiteHeaderProps> & {
     Item: typeof Item;
     ItemGroup: typeof ItemGroup;
     NavItem: typeof NavItem;
+    NodeItem: typeof NodeItem;
     NavItemWithSubNav: typeof NavItemWithSubNav;
     SubNavItem: typeof SubNavItem;
 };

package/dist/types/components/SiteHeader/components/NodeItem/NodeItem.d.ts

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

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

@@ -3,7 +3,7 @@ import { SwitchProps as RadixSwitchProps } from "@radix-ui/react-switch";
 import { FormControlProps } from "../FormControl/FormControl";
 /** Use `Switch` to toggle between checked and not checked. */
 export declare const Switch: FC<SwitchProps>;
-export interface SwitchProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "helper"> {
+export interface SwitchProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "helper" | "supplementaryInfo"> {
     /**
      * Hide Label above toggle?
      */

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

@@ -0,0 +1,60 @@
+import React from "react";
+import { FormControlProps } from "../FormControl/FormControl";
+declare type EventType = React.ChangeEvent<HTMLTextAreaElement>;
+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?: string;
+    /**
+     * ID for the TextArea.
+     */
+    id: string;
+    /**
+     * Should the control be disabled?
+     */
+    isDisabled?: boolean;
+    /**
+     * Should the control be read-only?
+     */
+    isReadOnly?: boolean;
+    /**
+     * Should the control be required?
+     */
+    isRequired?: boolean;
+    /**
+     * Maximum number of characters.
+     */
+    maxLength?: number;
+    /**
+     * Shows the current character count and maxLength. Ignored if maxLength is undefined.
+     */
+    showCharacterCount?: boolean;
+    /**
+     * Name of the input.
+     */
+    name?: string;
+    /**
+     * `none` will prevent any resizing.
+     * `manual` will allow the user to resize the TextArea.
+     * `auto` will resize the text area as needed when the user types.
+     */
+    resize?: "none" | "manual" | "auto";
+    /**
+     * Function to call when the TextArea loses focus.
+     */
+    onBlur?: (e: EventType) => void;
+    /**
+     * Callback function commonly used to update the TextArea's controlled
+     * `value`, for example `e => setValue(e.target.value)`.
+     */
+    onChange?: (e: EventType) => void;
+    /**
+     * Current value of the TextArea. Must be controlled via an
+     * `onChange` callback function. Otherwise, use `defaultValue` (or `isReadOnly`).
+     */
+    value?: string;
+}
+export {};

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

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

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

@@ -5,7 +5,7 @@ declare type EventType = React.ChangeEvent<HTMLInputElement>;
  * Use `TextInput` to allow custom user text entry with a keyboard.
  */
 export declare const TextInput: FC<TextInputProps>;
-export interface TextInputProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "helperUnderLabel"> {
+export interface TextInputProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "helperUnderLabel" | "supplementaryInfo"> {
     /**
      * Uncontrolled default value of the TextInput. If the TextInput is controlled
      * via `value`/`onChange`, `defaultValue` will be ignored.

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

@@ -11,6 +11,7 @@ export { Curve } from "./Curve";
 export { Disclosure } from "./Disclosure";
 export { Elevation } from "./Elevation";
 export { FormControl } from "./FormControl";
+export { Filter } from "./Filter";
 export { Group } from "./Group";
 export { Heading } from "./Heading";
 export { Icon } from "./Icon";
@@ -30,6 +31,7 @@ export { Badge } from "./Badge";
 export { Tag } from "./Tag";
 export { Text } from "./Text";
 export { TextInput } from "./TextInput";
+export { TextArea } from "./TextArea";
 export { Truncate } from "./Truncate";
 export { VerticalSpace } from "./VerticalSpace";
 export { VisuallyHidden } from "./VisuallyHidden";

package/dist/types/hooks/use-pagination.d.ts

@@ -0,0 +1 @@
+export declare const usePagination: (pageCount: number, selectedPage: number) => string[];

package/dist/types/styles.d.ts

@@ -1,3 +1,4 @@
+import "./components/Alert/Alert.css";
 import "./components/Align/Align.css";
 import "./components/Badge/Badge.css";
 import "./components/Base/Base.css";
@@ -10,17 +11,23 @@ import "./components/Clock/Clock.css";
 import "./components/Columns/Columns.css";
 import "./components/Columns/Columns.offsets.css";
 import "./components/Disclosure/Disclosure.css";
+import "./components/DisclosureMini/DisclosureMini.css";
 import "./components/Elevation/Elevation.css";
+import "./components/Filter/Filter.css";
 import "./components/FormControl/FormControl.css";
-import "./components/FormControl/FormControlDisclosure/FormControlDisclosure.css";
 import "./components/Group/Group.css";
 import "./components/Heading/Heading.css";
 import "./components/Icon/Icon.css";
 import "./components/Image/Image.css";
 import "./components/Markup/Markup.css";
+import "./components/Modal/Modal.css";
+import "./components/Pagination/Pagination.css";
+import "./components/PaginationSimple/PaginationSimple.css";
 import "./components/Poster/Poster.css";
+import "./components/ProgressBar/ProgressBar.css";
 import "./components/RadioGroup/RadioGroup.css";
 import "./components/Rule/Rule.css";
+import "./components/ScrollToTop/ScrollToTop.css";
 import "./components/Section/Section.css";
 import "./components/Select/Select.css";
 import "./components/SiteFooter/SiteFooter.css";
@@ -28,6 +35,7 @@ import "./components/SiteHeader/SiteHeader.css";
 import "./components/Surface/Surface.css";
 import "./components/Tag/Tag.css";
 import "./components/Text/Text.css";
+import "./components/TextArea/TextArea.css";
 import "./components/TextInput/TextInput.css";
 import "./components/Truncate/Truncate.css";
 import "./components/UniversalHeader/UniversalHeader.css";
@@ -41,9 +49,9 @@ import "./components/Card/Card.bt.css";
 import "./components/Checkbox/Checkbox.bt.css";
 import "./components/Curve/Curve.bt.css";
 import "./components/Disclosure/Disclosure.bt.css";
+import "./components/DisclosureMini/DisclosureMini.bt.css";
 import "./components/Elevation/Elevation.bt.css";
 import "./components/FormControl/FormControl.bt.css";
-import "./components/FormControl/FormControlDisclosure/FormControlDisclosure.bt.css";
 import "./components/Group/Group.bt.css";
 import "./components/Heading/Heading.bt.css";
 import "./components/Icon/Icon.bt.css";
@@ -59,5 +67,3 @@ 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/Modal/Modal.css";
-import "./components/ProgressBar/ProgressBar.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arc-ui/components",
-  "version": "11.4.2",
+  "version": "11.6.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",
@@ -32,9 +32,9 @@
     "@radix-ui/react-switch": "^1.0.1"
   },
   "devDependencies": {
-    "@arc-ui/fonts": "^11.4.2",
-    "@arc-ui/icons": "^11.4.2",
-    "@arc-ui/tokens": "^11.4.2",
+    "@arc-ui/fonts": "^11.6.0",
+    "@arc-ui/icons": "^11.6.0",
+    "@arc-ui/tokens": "^11.6.0",
     "@babel/core": "^7.14.3",
     "@babel/helper-define-map": "^7.14.3",
     "@storybook/addon-essentials": "^6.3.6",