@arc-ui/components 10.8.1 → 11.1.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/Button/Button.d.ts

@@ -1,5 +1,5 @@
-import { icons } from "@arc-ui/tokens";
 import React, { FC } from "react";
+import { ArcIcon } from "../../types/arc-icon";
 export declare type ElementUnion = HTMLButtonElement | HTMLAnchorElement;
 export declare type Ref = React.Ref<ElementUnion> | null;
 /**
@@ -10,7 +10,7 @@ export interface ButtonIconProps {
     /**
      * Icon variant.
      */
-    icon?: typeof icons[number];
+    icon?: ArcIcon;
     /**
      * Should the icon be a default chevron?
      */
@@ -55,7 +55,7 @@ export interface ButtonProps extends ButtonElementProps, LinkElementProps {
     /**
      * Button icon variant.
      */
-    icon?: typeof icons[number];
+    icon?: ArcIcon;
     /**
      * How should a Button icon be displayed?
      */

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

@@ -1,5 +1,5 @@
-import { icons } from "@arc-ui/tokens";
 import { FC } from "react";
+import { ArcIcon } from "../../types/arc-icon";
 /**
  * Use `Icon` to display brand iconography.
  */
@@ -14,14 +14,10 @@ export interface IconProps {
      * Should the Icon component be styled as an inline element?
      */
     isInline?: boolean;
-    /**
-     * Should a selected variant of the Icon be shown?
-     */
-    isSelected?: boolean;
     /**
      * Icon variant.
      */
-    icon?: typeof icons[number];
+    icon?: ArcIcon;
     /**
      * Alternative text label for the Icon.
      */
@@ -30,4 +26,8 @@ export interface IconProps {
      * Size of the Icon, in pixels.
      */
     size?: number;
+    /**
+     * value for data-testid
+     */
+    testId?: string;
 }

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/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,13 @@ 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 { 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/dist/types/types/arc-icon.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from "react";
+export declare type ArcIcon = React.FC<SVGProps<SVGSVGElement>>;

package/package.json

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

package/dist/_shared/cjs/FormControl-7d8e10fa.js

@@ -1,82 +0,0 @@
-'use strict';
-
-var index = require('./index-78b35bc1.js');
-var index$1 = require('./index-45bfb67b.js');
-var React = require('react');
-var Surface = require('./Surface-d6b8010e.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-/**
- * 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 };
-};
-
-var defaultContext = {
-    requirementStatus: null
-};
-var Context = React.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 = index.__rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "id", "label", "labelSize", "requirementStatus"]);
-    var surface = React.useContext(Surface.Context).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__default["default"].createElement(Provider, { value: { requirementStatus: requirementStatus } },
-        React__default["default"].createElement(ElementType, index.__assign({ className: index$1.classNames({
-                "arc-FormControl": true,
-                "arc-FormControl--smallLabel": labelSize === "s",
-                "arc-FormControl--onDarkSurface": surface === "dark"
-            }), id: id }, elementProps, index.filterDataAttrs(props)),
-            React__default["default"].createElement(LabelType, index.__assign({ className: "arc-FormControl-label" }, labelProps),
-                label,
-                requirementStatus === "optional" && (React__default["default"].createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))),
-            helper && (React__default["default"].createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper)),
-            children,
-            errorMessage && (React__default["default"].createElement("div", { className: "arc-FormControl-error", id: idError }, errorMessage)))));
-};
-
-exports.Context = Context;
-exports.FormControl = FormControl;
-exports.useAriaDescribedby = useAriaDescribedby;

package/dist/_shared/cjs/Icon-bb5a5fd1.js

@@ -1,33 +0,0 @@
-'use strict';
-
-var index = require('./index-78b35bc1.js');
-var index_es = require('./index.es-f590caaf.js');
-var index$1 = require('./index-45bfb67b.js');
-var React = require('react');
-var suffixModifier = require('./suffix-modifier-edf7851e.js');
-var Surface = require('./Surface-d6b8010e.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-/**
- * Use `Icon` to display brand iconography.
- */
-var Icon = function (_a) {
-    var _b;
-    var _c = _a.color, color = _c === void 0 ? "auto" : _c, icon = _a.icon, _d = _a.isInline, isInline = _d === void 0 ? false : _d, _e = _a.isSelected, isSelected = _e === void 0 ? false : _e, label = _a.label, size = _a.size, props = index.__rest(_a, ["color", "icon", "isInline", "isSelected", "label", "size"]);
-    var surface = React.useContext(Surface.Context).surface;
-    return (React__default["default"].createElement("span", index.__assign({ "aria-label": label, className: index$1.classNames((_b = {},
-            _b["arc-Icon"] = true,
-            _b[suffixModifier.suffixModifier("arc-Icon--color", color)] = color !== "auto",
-            _b["arc-Icon--".concat(icon).concat(isSelected && index_es.iconsSelected.includes("".concat(icon, "Fill")) ? "Fill" : "")] = icon,
-            _b["arc-Icon--inline"] = isInline,
-            _b["arc-Icon--onDarkSurface"] = surface === "dark",
-            _b)), role: label ? "img" : undefined, style: {
-            height: size,
-            width: size
-        } }, index.filterDataAttrs(props))));
-};
-
-exports.Icon = Icon;