@arc-ui/components 11.18.0 → 11.20.0

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { type AvatarImage } from "./types/avatar-image";
+import { type AvatarSize } from "./types/avatar-size";
+export declare const Avatar: React.FC<AvatarProps>;
+export interface AvatarProps {
+    initials?: string;
+    href?: string;
+    title?: string;
+    ariaLabel?: string;
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+    img?: AvatarImage;
+    size?: AvatarSize;
+}

package/dist/types/components/Avatar/components/AvatarContent/AvatarContent.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { type AvatarImage } from "../../types/avatar-image";
+import { type AvatarSize } from "../../types/avatar-size";
+export declare const AvatarContent: React.FC<AvatarContentProps>;
+export interface AvatarContentProps {
+    initials?: string;
+    img?: AvatarImage;
+    size?: AvatarSize;
+}

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

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

package/dist/types/components/Avatar/types/avatar-icon-size.d.ts

@@ -0,0 +1 @@
+export type AvatarIconSize = 16 | 24 | 32 | 40;

package/dist/types/components/Avatar/types/avatar-image.d.ts

@@ -0,0 +1,2 @@
+import { type ImageProps } from "../../Image/Image";
+export type AvatarImage = Pick<ImageProps, "src" | "loading" | "sizes" | "srcSet" | "width" | "height" | "alt">;

package/dist/types/components/Avatar/types/avatar-size.d.ts

@@ -0,0 +1 @@
+export type AvatarSize = "s" | "m" | "l" | "xl";

package/dist/types/components/Avatar/types/avatar-text-size.d.ts

@@ -0,0 +1,2 @@
+import { type HeadingSize } from "../../Heading/Heading";
+export type AvatarTextSize = Extract<HeadingSize, "xxxs" | "xxs" | "xs" | "s">;

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { type AvatarSize } from "../Avatar/types/avatar-size";
+import { type GroupAvatar } from "./types/group-avatar";
+export declare const AvatarGroup: React.FC<AvatarGroupProps>;
+export interface AvatarGroupProps {
+    avatars: GroupAvatar[];
+    size?: AvatarSize;
+    max?: number;
+    title?: string;
+    ariaLabel?: string;
+    href?: string;
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+}

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

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

package/dist/types/components/AvatarGroup/types/group-avatar.d.ts

@@ -0,0 +1,2 @@
+import { AvatarProps } from "../../Avatar/Avatar";
+export type GroupAvatar = Omit<AvatarProps, "size" | "title" | "href" | "onClick">;

package/dist/types/components/AvatarGroup/utils/get-avatars.d.ts

@@ -0,0 +1,2 @@
+import { type GroupAvatar } from "../types/group-avatar";
+export declare const getAvatars: (avatars: GroupAvatar[], max?: number) => GroupAvatar[];

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

@@ -1,12 +1,12 @@
 import React from "react";
 import { type ArcCalendarRangeSelection } from "../Calendar";
 import { CalendarProps } from "../Calendar/Calendar";
-import { TextInputProps } from "../TextInput/TextInput";
+import { TextInputWithPlaceholderProps } from "../TextInput/TextInput";
 export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement>>;
 interface DatePickerRangeSelection extends ArcCalendarRangeSelection {
     formattedRange: string;
 }
-export interface DatePickerProps extends Omit<TextInputProps, "defaultValue" | "inputMode" | "minLength" | "maxLength" | "pattern" | "type" | "showPassword" | "placeholder" | "iconButton" | "prefix" | "suffix">, Omit<CalendarProps, "onDateSelect" | "onRangeSelect" | "selectedDate" | "selectedRange"> {
+export interface DatePickerProps extends Omit<TextInputWithPlaceholderProps, "defaultValue" | "inputMode" | "minLength" | "maxLength" | "pattern" | "type" | "showPassword" | "placeholder" | "iconButton" | "prefix" | "suffix">, Omit<CalendarProps, "onDateSelect" | "onRangeSelect" | "selectedDate" | "selectedRange"> {
     isFluid?: boolean;
     onDateSelect?: (value: {
         date: Date;

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

@@ -30,4 +30,8 @@ export interface IconProps {
      * value for data-testid
      */
     testId?: string;
+    /**
+     * hides the icon from screenreaders
+     */
+    isPresentationIcon?: boolean;
 }

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

@@ -4,6 +4,11 @@ import { FC } from "react";
  */
 export declare const RadioButton: FC<RadioButtonProps>;
 export interface RadioButtonProps {
+    /**
+     * Determine the alignment the RadioButton.
+     *
+     */
+    radioButtonAlignment?: "top" | "center";
     /**
      * ID for the Radio Button.
      */

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

@@ -1,7 +1,8 @@
 import { FC } from "react";
 /**
- * Use `Rule` to display a horizontal rule.
+ * Use `Rule` to display a horizontal or vertical rule.
  */
 export declare const Rule: FC<RuleProps>;
 export interface RuleProps {
+    orientation?: "horizontal" | "vertical";
 }

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

@@ -26,6 +26,10 @@ export interface SelectProps extends Omit<FormControlProps, "children" | "elemen
         name: string;
         value: string;
     }[];
+    /**
+     * value for the Select. Passing a value makes the Select a controlled component.
+     */
+    value?: string;
     /**
      * error message for the Select.
      */

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

@@ -0,0 +1,11 @@
+import { FC, ReactNode } from "react";
+import { SkipLinkItem } from "./SkipLinkItem/SkipLinkItem";
+export declare const SkipLink: FC<SkipLinkProps> & {
+    Item: typeof SkipLinkItem;
+};
+export interface SkipLinkProps {
+    /**
+     * Links to display in the SkipLink.Item.
+     */
+    children?: ReactNode;
+}

package/dist/types/components/SkipLink/SkipLinkItem/SkipLinkItem.d.ts

@@ -0,0 +1,16 @@
+import { FC } from "react";
+export declare const SkipLinkItem: FC<SkipLinkItemProps>;
+export interface SkipLinkItemProps {
+    /**
+     * The label to display for SkipLink.Item.
+     */
+    label: string;
+    /**
+     * The URL the skip link navigates to.
+     */
+    href?: string;
+    /**
+     * The ID attribute of the target element the skip link navigates to.
+     */
+    id?: string;
+}

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

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

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

@@ -2,11 +2,9 @@ import React from "react";
 import { FormControlProps } from "../FormControl/FormControl";
 import { ArcIcon } from "../../types/arc-icon";
 type EventType = React.ChangeEvent<HTMLInputElement>;
-/**
- * Use `TextInput` to allow custom user text entry with a keyboard.
- */
 export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
-export interface TextInputProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "helperUnderLabel" | "supplementaryInfo"> {
+export declare const TextInputWithPlaceHolder: React.ForwardRefExoticComponent<TextInputComponentProps & React.RefAttributes<HTMLInputElement>>;
+export interface TextInputComponentProps 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.
@@ -106,4 +104,6 @@ export interface TextInputProps extends Omit<FormControlProps, "children" | "ele
      */
     width?: string;
 }
+export type TextInputProps = Omit<TextInputComponentProps, "placeholder">;
+export type TextInputWithPlaceholderProps = TextInputComponentProps;
 export {};

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

@@ -1,5 +1,7 @@
 export { Align } from "./Align";
 export { Alert } from "./Alert";
+export { Avatar } from "./Avatar";
+export { AvatarGroup } from "./AvatarGroup";
 export { Badge } from "./Badge";
 export { Base } from "./Base";
 export { Box } from "./Box";

package/dist/types/private-components/ConditionalWrapper/ConditionalWrapper.d.ts

@@ -2,5 +2,6 @@ import React from "react";
 export declare const ConditionalWrapper: React.FC<{
     condition: boolean;
     wrapper: (children: React.ReactNode) => React.ReactNode;
+    fallback?: (children: React.ReactNode) => React.ReactNode;
     children: React.ReactNode;
 }>;

package/dist/types/styles.d.ts

@@ -33,6 +33,7 @@ import "./components/ScrollToTop/ScrollToTop.css";
 import "./components/Section/Section.css";
 import "./components/Select/Select.css";
 import "./components/SiteFooter/SiteFooter.css";
+import "./components/SkipLink/SkipLink.css";
 import "./components/SiteHeader/SiteHeader.css";
 import "./components/SiteHeaderV2/SiteHeaderV2.css";
 import "./components/Surface/Surface.css";
@@ -78,6 +79,8 @@ import "./components/Calendar/Calendar.css";
 import "./components/DatePicker/DatePicker.css";
 import "./components/InformationCard/InformationCard.css";
 import "./components/TypographyCard/TypographyCard.css";
+import "./components/Avatar/Avatar.css";
+import "./components/AvatarGroup/AvatarGroup.css";
 import "./private-components/CardHeading/CardHeading.css";
 import "./private-components/CardLabel/CardLabel.css";
 import "./private-components/CardFooter/CardFooter.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arc-ui/components",
-  "version": "11.18.0",
+  "version": "11.20.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",
@@ -77,7 +77,7 @@
     "camelcase": "^6.2.1",
     "classnames": "^2.2.6",
     "countries-list": "^2.6.1",
-    "cypress": "^13.3.0",
+    "cypress": "^13.3.1",
     "formik": "^2.2.9",
     "lodash": "^4.17.21",
     "postcss": "^8.0.0",

package/dist/_shared/cjs/{CardLabel-768abf20.js → BtIconArrowRight.esm-50d96943.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var React = require('react');
 var filterDataAttrs = require('./filter-data-attrs-1c9a530c.js');
+var React = require('react');
 var index = require('./index-9947ac13.js');
 var suffixModifier = require('./suffix-modifier-64dcd338.js');
 
@@ -9,6 +9,25 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+var CardHeading = function (_a) {
+    var onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onBlur = _a.onBlur, onFocus = _a.onFocus, href = _a.href, heading = _a.heading, _b = _a.size, size = _b === void 0 ? "s" : _b, _c = _a.isDarkPathway, isDarkPathway = _c === void 0 ? false : _c, _d = _a.linkData, linkData = _d === void 0 ? {} : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e;
+    var HeadingElement = "h".concat(headingLevel);
+    return (React__default["default"].createElement(HeadingElement, { className: index.classNames("arc-CardHeading", "arc-CardHeading--".concat(size), {
+            "arc-CardHeading--darkPathway": isDarkPathway
+        }) }, href ? (React__default["default"].createElement("a", filterDataAttrs.__assign({ className: "arc-CardHeading-link", href: href, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, filterDataAttrs.filterDataAttrs(linkData)), heading)) : (heading)));
+};
+
+var CardLabel = function (_a) {
+    var _b;
+    var text = _a.text, _c = _a.color, color = _c === void 0 ? "muted" : _c, _d = _a.isBold, isBold = _d === void 0 ? true : _d, _e = _a.isDarkPathway, isDarkPathway = _e === void 0 ? false : _e;
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("span", { className: index.classNames("arc-CardLabel", (_b = {},
+                _b[suffixModifier.suffixModifier("arc-CardLabel--color", color)] = !isDarkPathway,
+                _b["arc-CardLabel--bold"] = isBold,
+                _b["arc-CardLabel--darkPathway"] = isDarkPathway,
+                _b)) }, text)));
+};
+
 const BtIconArrowRight = (props) =>
   /*#__PURE__*/ React__default["default"].createElement(
     "svg",
@@ -30,25 +49,6 @@ const BtIconArrowRight = (props) =>
     }),
   );
 
-var CardHeading = function (_a) {
-    var onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onBlur = _a.onBlur, onFocus = _a.onFocus, href = _a.href, heading = _a.heading, _b = _a.size, size = _b === void 0 ? "s" : _b, _c = _a.isDarkPathway, isDarkPathway = _c === void 0 ? false : _c, _d = _a.linkData, linkData = _d === void 0 ? {} : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e;
-    var HeadingElement = "h".concat(headingLevel);
-    return (React__default["default"].createElement(HeadingElement, { className: index.classNames("arc-CardHeading", "arc-CardHeading--".concat(size), {
-            "arc-CardHeading--darkPathway": isDarkPathway
-        }) }, href ? (React__default["default"].createElement("a", filterDataAttrs.__assign({ className: "arc-CardHeading-link", href: href, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, filterDataAttrs.filterDataAttrs(linkData)), heading)) : (heading)));
-};
-
-var CardLabel = function (_a) {
-    var _b;
-    var text = _a.text, _c = _a.color, color = _c === void 0 ? "muted" : _c, _d = _a.isBold, isBold = _d === void 0 ? true : _d, _e = _a.isDarkPathway, isDarkPathway = _e === void 0 ? false : _e;
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("span", { className: index.classNames("arc-CardLabel", (_b = {},
-                _b[suffixModifier.suffixModifier("arc-CardLabel--color", color)] = !isDarkPathway,
-                _b["arc-CardLabel--bold"] = isBold,
-                _b["arc-CardLabel--darkPathway"] = isDarkPathway,
-                _b)) }, text)));
-};
-
 exports.BtIconArrowRight = BtIconArrowRight;
 exports.CardHeading = CardHeading;
 exports.CardLabel = CardLabel;

package/dist/_shared/esm/{CardLabel-d6d71407.js → BtIconArrowRight.esm-9b181878.js}

@@ -1,8 +1,27 @@
-import React__default from 'react';
 import { a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
+import React__default from 'react';
 import { c as classNames } from './index-2e73c2e9.js';
 import { s as suffixModifier } from './suffix-modifier-3d548e45.js';
 
+var CardHeading = function (_a) {
+    var onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onBlur = _a.onBlur, onFocus = _a.onFocus, href = _a.href, heading = _a.heading, _b = _a.size, size = _b === void 0 ? "s" : _b, _c = _a.isDarkPathway, isDarkPathway = _c === void 0 ? false : _c, _d = _a.linkData, linkData = _d === void 0 ? {} : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e;
+    var HeadingElement = "h".concat(headingLevel);
+    return (React__default.createElement(HeadingElement, { className: classNames("arc-CardHeading", "arc-CardHeading--".concat(size), {
+            "arc-CardHeading--darkPathway": isDarkPathway
+        }) }, href ? (React__default.createElement("a", __assign({ className: "arc-CardHeading-link", href: href, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, filterDataAttrs(linkData)), heading)) : (heading)));
+};
+
+var CardLabel = function (_a) {
+    var _b;
+    var text = _a.text, _c = _a.color, color = _c === void 0 ? "muted" : _c, _d = _a.isBold, isBold = _d === void 0 ? true : _d, _e = _a.isDarkPathway, isDarkPathway = _e === void 0 ? false : _e;
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("span", { className: classNames("arc-CardLabel", (_b = {},
+                _b[suffixModifier("arc-CardLabel--color", color)] = !isDarkPathway,
+                _b["arc-CardLabel--bold"] = isBold,
+                _b["arc-CardLabel--darkPathway"] = isDarkPathway,
+                _b)) }, text)));
+};
+
 const BtIconArrowRight = (props) =>
   /*#__PURE__*/ React__default.createElement(
     "svg",
@@ -24,23 +43,4 @@ const BtIconArrowRight = (props) =>
     }),
   );
 
-var CardHeading = function (_a) {
-    var onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onBlur = _a.onBlur, onFocus = _a.onFocus, href = _a.href, heading = _a.heading, _b = _a.size, size = _b === void 0 ? "s" : _b, _c = _a.isDarkPathway, isDarkPathway = _c === void 0 ? false : _c, _d = _a.linkData, linkData = _d === void 0 ? {} : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e;
-    var HeadingElement = "h".concat(headingLevel);
-    return (React__default.createElement(HeadingElement, { className: classNames("arc-CardHeading", "arc-CardHeading--".concat(size), {
-            "arc-CardHeading--darkPathway": isDarkPathway
-        }) }, href ? (React__default.createElement("a", __assign({ className: "arc-CardHeading-link", href: href, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, filterDataAttrs(linkData)), heading)) : (heading)));
-};
-
-var CardLabel = function (_a) {
-    var _b;
-    var text = _a.text, _c = _a.color, color = _c === void 0 ? "muted" : _c, _d = _a.isBold, isBold = _d === void 0 ? true : _d, _e = _a.isDarkPathway, isDarkPathway = _e === void 0 ? false : _e;
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("span", { className: classNames("arc-CardLabel", (_b = {},
-                _b[suffixModifier("arc-CardLabel--color", color)] = !isDarkPathway,
-                _b["arc-CardLabel--bold"] = isBold,
-                _b["arc-CardLabel--darkPathway"] = isDarkPathway,
-                _b)) }, text)));
-};
-
 export { BtIconArrowRight as B, CardLabel as C, CardHeading as a };