@arc-ui/components 11.4.2 → 11.5.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/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/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,9 +11,9 @@ 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/FormControl/FormControl.css";
-import "./components/FormControl/FormControlDisclosure/FormControlDisclosure.css";
 import "./components/Group/Group.css";
 import "./components/Heading/Heading.css";
 import "./components/Icon/Icon.css";
@@ -41,9 +42,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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arc-ui/components",
-  "version": "11.4.2",
+  "version": "11.5.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.5.0",
+    "@arc-ui/icons": "^11.5.0",
+    "@arc-ui/tokens": "^11.5.0",
     "@babel/core": "^7.14.3",
     "@babel/helper-define-map": "^7.14.3",
     "@storybook/addon-essentials": "^6.3.6",

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

@@ -1,28 +0,0 @@
-import { FC, ReactNode } from "react";
-/**
- * Use `FormControlDisclosure` to display content that is only visible when toggled into
- * an "open" state.
- */
-export declare const FormControlDisclosure: FC<FormControlDisclosureProps>;
-export interface FormControlDisclosureProps {
-    /**
-     * Content to display in the FormControlDisclosure.
-     */
-    children: ReactNode;
-    /**
-     * FormControlDisclosure ID.
-     */
-    id?: string;
-    /**
-     * The FormControlDisclosure summary text.
-     */
-    summary: string;
-    /**
-     * On Click handler for FormControlDisclosure summary disclosure.
-     */
-    onClick?: () => void;
-    /**
-     * Disclosure size.
-     */
-    size?: "s" | "l";
-}

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

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