@arc-ui/components 11.0.0 → 11.2.0

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

@@ -0,0 +1,25 @@
+import { FC, ReactNode } from "react";
+/** Use `Badge` component to visually display a small amount of information, such as notification counts or status indicators. */
+export declare const Badge: FC<BadgeProps>;
+export interface BadgeProps {
+    /**
+     * Text to display within Badge
+     */
+    children: ReactNode;
+    /**
+     * Badge Size
+     */
+    size?: "default" | "large";
+    /**
+     * Badge has outline
+     */
+    fill?: "solid" | "outlined";
+    /**
+     * State of the Badge
+     */
+    state?: "default" | "error" | "warning" | "success";
+    /**
+     * Aria label for accessibility
+     */
+    ariaLabel?: string;
+}

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

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

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

@@ -42,9 +42,26 @@ export interface FormControlProps {
      * Label for the FormControl.
      */
     label: string;
+    /**
+     * Determins if the Label should be in a disabled state
+     */
+    isDisabled?: boolean;
     /**
      * Label size.
      */
     labelSize?: "s" | "l";
+    /**
+     *   Use `DisclosureTitle` to display content that is only visible when toggled into
+     * an "open" state. This overrides helper text.
+     */
+    disclosureTitle?: string;
+    /**
+     * Text to display within the disclosure
+     */
+    disclosureText?: string;
+    /**
+     * onClick handler for FormControlDisclosure
+     */
+    onClickDisclosure?: () => void;
 }
 export { Context as FormControlContext };

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

@@ -0,0 +1,28 @@
+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

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

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

@@ -1,5 +1,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"> {
     name: string;
     label: string;
@@ -18,4 +20,3 @@ export interface SelectProps extends Omit<FormControlProps, "children" | "elemen
     isDefaultOpen?: boolean;
     isRequired?: boolean;
 }
-export declare const Select: React.FC<SelectProps>;

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

@@ -1,20 +1,25 @@
 import { FC } from "react";
 import { SwitchProps as RadixSwitchProps } from "@radix-ui/react-switch";
-/** `WIP`: Use `Switch` to toggle between checked and not checked. */
+import { FormControlProps } from "../FormControl/FormControl";
+/** Use `Switch` to toggle between checked and not checked. */
 export declare const Switch: FC<SwitchProps>;
-export interface SwitchProps {
+export interface SwitchProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "helper"> {
     /**
-     * label for screen readers to announce
+     * Hide Label above toggle?
      */
-    label: string;
+    hideLabel?: boolean;
     /**
-     * handler for blur
+     * Text to display next to `Switch`
      */
-    onBlur?: RadixSwitchProps["onBlur"];
+    statusText?: string;
+    /**
+     * Should the `Switch` be disabled?
+     */
+    isDisabled?: FormControlProps["isDisabled"];
     /**
-     * show rendered label above input, useful for forms
+     * handler for blur
      */
-    showLabel?: boolean;
+    onBlur?: RadixSwitchProps["onBlur"];
     /**
      * set the switch to be checked by default
      */

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

@@ -56,6 +56,10 @@ export interface TextInputProps extends Omit<FormControlProps, "children" | "ele
      * Validation regex pattern.
      */
     pattern?: string;
+    /**
+     * Enable button to toggle TextInput type from `Selected Type` to `Text`
+     */
+    showPassword?: boolean;
     /**
      * Type for the input. `number` will be changed to `text` and set the `numeric` inputMode.
      */

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

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from "react";
+/** Use `Truncate` component to shorten text with an ellipsis. Add a `title` attribute to the truncated element so the full text remains accessible. */
+export declare const Truncate: FC<TruncateProps>;
+export interface TruncateProps {
+    /**
+     * Content to truncate.
+     */
+    children: ReactNode;
+    /**
+     * Use title to provide extra information about text that is truncated.
+     */
+    title: string;
+    /**
+     * Set max width of visible content within `Truncate`. Default is `100%`.
+     */
+    maxWidth?: number;
+}

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

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

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

@@ -21,10 +21,14 @@ export { Poster } from "./Poster";
 export { RadioGroup } from "./RadioGroup";
 export { Rule } from "./Rule";
 export { Section } from "./Section";
+export { Select } from "./Select";
 export { SiteFooter, SiteFooterRehydrator } from "./SiteFooter";
 export { SiteHeader, SiteHeaderRehydrator } from "./SiteHeader";
 export { Surface, SurfaceContext } from "./Surface";
+export { Switch } from "./Switch";
+export { Badge } from "./Badge";
 export { Text } from "./Text";
 export { TextInput } from "./TextInput";
+export { Truncate } from "./Truncate";
 export { VerticalSpace } from "./VerticalSpace";
 export { VisuallyHidden } from "./VisuallyHidden";

package/dist/types/hooks/use-aria-describedby.d.ts

@@ -1,18 +1,22 @@
 /**
  * Optionally define ariaDescribedBy if errorMessage or helper exist.
  */
-export declare const useAriaDescribedby: ({ id, idError, idHelper, errorMessage, helper }: {
+export declare const useAriaDescribedby: ({ id, idError, idHelper, idDisclosure, errorMessage, helper, disclosureText }: {
     id?: string | undefined;
     idError?: string | undefined;
+    idDisclosure?: string | undefined;
     idHelper?: string | undefined;
     errorMessage?: any;
     helper?: any;
+    disclosureText?: string | undefined;
 }) => {
     ariaDescribedby: undefined;
     idHelper: undefined;
     idError: undefined;
+    idDisclosure: undefined;
 } | {
     ariaDescribedby: string | undefined;
     idError: string;
     idHelper: string;
+    idDisclosure: string;
 };

package/dist/types/styles.d.ts

@@ -1,4 +1,5 @@
 import "./components/Align/Align.css";
+import "./components/Badge/Badge.css";
 import "./components/Base/Base.css";
 import "./components/BrandLogo/BrandLogo.css";
 import "./components/Breadcrumbs/Breadcrumbs.css";
@@ -11,6 +12,7 @@ import "./components/Columns/Columns.offsets.css";
 import "./components/Disclosure/Disclosure.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";
@@ -26,6 +28,7 @@ import "./components/SiteHeader/SiteHeader.css";
 import "./components/Surface/Surface.css";
 import "./components/Text/Text.css";
 import "./components/TextInput/TextInput.css";
+import "./components/Truncate/Truncate.css";
 import "./components/UniversalHeader/UniversalHeader.css";
 import "./components/VerticalSpace/VerticalSpace.css";
 import "./components/VisuallyHidden/VisuallyHidden.css";
@@ -39,6 +42,7 @@ import "./components/Curve/Curve.bt.css";
 import "./components/Disclosure/Disclosure.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.0.0",
+  "version": "11.2.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.0.0",
-    "@arc-ui/icons": "^11.0.0",
-    "@arc-ui/tokens": "^11.0.0",
+    "@arc-ui/fonts": "^11.2.0",
+    "@arc-ui/icons": "^11.2.0",
+    "@arc-ui/tokens": "^11.2.0",
     "@babel/core": "^7.14.3",
     "@babel/helper-define-map": "^7.14.3",
     "@storybook/addon-essentials": "^6.3.6",

package/dist/_shared/esm/FormControl-feedc495.js

@@ -1,106 +0,0 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
-import { c as classNames } from './index-2ae58626.js';
-import React$1, { createContext, useContext } from 'react';
-import { C as Context$1 } from './Surface-d515d212.js';
-
-/**
- * Optionally define ariaDescribedBy if errorMessage or helper exist.
- */
-var useAriaDescribedby = function (_a) {
-    var id = _a.id, _b = _a.idError, idError = _b === void 0 ? "".concat(id, "-error") : _b, _c = _a.idHelper, idHelper = _c === void 0 ? "".concat(id, "-helper") : _c, errorMessage = _a.errorMessage, helper = _a.helper;
-    if (!id) {
-        return {
-            ariaDescribedby: undefined,
-            idHelper: undefined,
-            idError: undefined
-        };
-    }
-    var ariaDescribedbyArr = [];
-    if (errorMessage) {
-        ariaDescribedbyArr.push(idError);
-    }
-    if (helper) {
-        ariaDescribedbyArr.push(idHelper);
-    }
-    var ariaDescribedby = ariaDescribedbyArr.length > 0 ? ariaDescribedbyArr.join(" ") : undefined;
-    return { ariaDescribedby: ariaDescribedby, idError: idError, idHelper: idHelper };
-};
-
-const React = React$1;
-const BtIconAlert = props =>
-  /*#__PURE__*/ React.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32"
-      },
-      props
-    ),
-    /*#__PURE__*/ React.createElement("defs", null),
-    /*#__PURE__*/ React.createElement("path", {
-      d:
-        "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
-      fill: "currentColor"
-    }),
-    /*#__PURE__*/ React.createElement("path", {
-      fill: "currentColor",
-      d: "M16 20.99335A1 1 0 1 0 16 22.99335 1 1 0 1 0 16 20.99335z"
-    }),
-    /*#__PURE__*/ React.createElement("path", {
-      d:
-        "M16.00488,19.00977a.49972.49972,0,0,0,.5-.5L16.50684,9.5a.5.5,0,0,0-1,0l-.002,9.00977A.5.5,0,0,0,16.00488,19.00977Z",
-      fill: "currentColor"
-    })
-  );
-var BtIconAlert_2 = BtIconAlert;
-
-var defaultContext = {
-    requirementStatus: null
-};
-var Context = createContext(defaultContext);
-var Provider = Context.Provider;
-/**
- * Use `FormControl` to provide inputs with labels, helper text and error messages
- */
-var FormControl = function (_a) {
-    var children = _a.children, _b = _a.elementType, ElementType = _b === void 0 ? "div" : _b, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, id = _a.id, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.requirementStatus, requirementStatus = _d === void 0 ? "optional" : _d, props = __rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "id", "label", "labelSize", "requirementStatus"]);
-    var surface = useContext(Context$1).surface;
-    var _e = useAriaDescribedby({
-        errorMessage: errorMessage,
-        helper: helper,
-        id: htmlFor || id // `htmlFor` is preference to keep this deterministic with TextInput
-    }), ariaDescribedby = _e.ariaDescribedby, idError = _e.idError, idHelper = _e.idHelper;
-    var LabelType = ElementType === "div" ? "label" : "legend";
-    var elementProps = {};
-    var labelProps = {};
-    if (LabelType === "label") {
-        labelProps["htmlFor"] = htmlFor;
-        if (htmlFor) {
-            labelProps["id"] = "".concat(htmlFor, "-label");
-        }
-        else if (id) {
-            labelProps["id"] = "".concat(id, "-label");
-        }
-    }
-    else {
-        elementProps["aria-describedby"] = ariaDescribedby;
-    }
-    return (React$1.createElement(Provider, { value: { requirementStatus: requirementStatus } },
-        React$1.createElement(ElementType, __assign({ className: classNames({
-                "arc-FormControl": true,
-                "arc-FormControl--smallLabel": labelSize === "s",
-                "arc-FormControl--onDarkSurface": surface === "dark"
-            }), id: id }, elementProps, filterDataAttrs(props)),
-            React$1.createElement(LabelType, __assign({ className: "arc-FormControl-label" }, labelProps),
-                label,
-                requirementStatus === "optional" && (React$1.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))),
-            helper && (React$1.createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper)),
-            children,
-            errorMessage && (React$1.createElement("div", { className: "arc-FormControl-error", id: idError },
-                React$1.createElement("span", { className: "arc-FormControl-error--icon" },
-                    React$1.createElement(BtIconAlert_2, null)),
-                errorMessage)))));
-};
-
-export { BtIconAlert_2 as B, Context as C, FormControl as F, useAriaDescribedby as u };