@arc-ui/components 3.0.0 → 5.0.0

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

@@ -4,7 +4,7 @@ declare type Ref = React.Ref<HTMLInputElement>;
 /**
  *  Use `Checkbox` to allow users to select individual options.
  */
-declare const Checkbox: React.ForwardRefExoticComponent<Pick<CheckboxProps, "label" | "id" | "onChange" | "value" | "isDisabled" | "errorMessage" | "helper" | "isRequired" | "name" | "isChecked"> & React.RefAttributes<HTMLInputElement>>;
+declare const Checkbox: React.ForwardRefExoticComponent<Pick<CheckboxProps, "label" | "id" | "onBlur" | "onChange" | "value" | "size" | "isDisabled" | "errorMessage" | "helper" | "name" | "isRequired" | "checked"> & React.RefAttributes<HTMLInputElement>>;
 export interface CheckboxProps {
     /**
      * Error message for the Checkbox.
@@ -19,9 +19,9 @@ export interface CheckboxProps {
      */
     id: string;
     /**
-     * Is the input checked (controlled).
+     * Is the input checked?
      */
-    isChecked?: boolean;
+    checked?: boolean;
     /**
      * Should the Checkbox be disabled?
      */
@@ -37,18 +37,27 @@ export interface CheckboxProps {
     /**
      * Name for the Checkbox.
      */
-    name: string;
+    name?: string;
     /**
-     * onChange callback.
+     * Function to call when the Checkbox loses focus.
+     */
+    onBlur?: (e: EventType) => void;
+    /**
+     * Callback function to update the Checkbox's controlled `checked` prop, for
+     * example `e => setChecked(e.target.checked)`.
      */
     onChange?: (event: EventType) => void;
     /**
      * Optional property to provide component Ref
      */
     ref?: Ref;
+    /**
+     * Size of the Checkbox.
+     */
+    size?: "s" | "l";
     /**
      * Value for the Checkbox.
      */
-    value: string;
+    value?: string;
 }
 export default Checkbox;

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

@@ -1,4 +1,8 @@
 import React, { FC } from "react";
+declare type RequirementStatus = "required" | "optional" | "not-applicable";
+declare const Context: React.Context<{
+    requirementStatus: RequirementStatus | null;
+}>;
 /**
  * Use `FormControl` to provide inputs with labels, helper text and error messages
  */
@@ -30,9 +34,10 @@ export interface FormControlProps {
      */
     id?: string;
     /**
-     * Is the input(s) required?
+     * Are all of the inputs in the FormControl required, optional, or is a
+     * uniform requirement status for all inputs not applicable?
      */
-    isRequired?: boolean;
+    requirementStatus?: RequirementStatus;
     /**
      * Label for the FormControl.
      */
@@ -42,4 +47,5 @@ export interface FormControlProps {
      */
     labelSize?: "s" | "l";
 }
+export { Context as FormControlContext };
 export default FormControl;

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

@@ -1 +1 @@
-export { default } from "./FormControl";
+export { default, FormControlContext } from "./FormControl";

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

@@ -4,7 +4,6 @@ import { FC } from "react";
  * Use `Icon` to display brand iconography.
  */
 declare const Icon: FC<IconProps>;
-export { icons };
 export declare const colors: readonly ["auto", "brand", "statusRed", "statusAmber", "statusGreen"];
 export interface IconProps {
     /**

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

@@ -8,6 +8,10 @@ export interface RadioButtonProps {
      * ID for the Radio Button.
      */
     id: string;
+    /**
+     * Should the RadioButton be disabled?
+     */
+    isDisabled?: boolean;
     /**
      * Helper text for the RadioButton, shown below the label.
      */

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

@@ -8,23 +8,15 @@ declare type EventType = React.ChangeEvent<HTMLInputElement>;
 declare const RadioGroup: FC<RadioGroupProps> & {
     RadioButton: typeof RadioButton;
 };
-export interface RadioGroupProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "labelSize"> {
+export interface RadioGroupProps extends Omit<FormControlProps, "children" | "elementType" | "errorMessage" | "htmlFor" | "labelSize" | "requirementStatus"> {
     /**
-     * Default value (uncontrolled).
+     * Default value.
      */
-    defaultValue?: string;
+    defaultValue: string;
     /**
      * Should all controls be disabled?
      */
     isDisabled?: boolean;
-    /**
-     * Should all control be required?
-     */
-    isRequired?: boolean;
-    /**
-     * Error message for the RadioGroup.
-     */
-    errorMessage?: string;
     /**
      * Helper message for the RadioGroup.
      */
@@ -37,13 +29,26 @@ export interface RadioGroupProps extends Omit<FormControlProps, "children" | "el
      * Label for the RadioGroup.
      */
     label: string;
+    /**
+     * Label size for the RadioGroup
+     */
+    labelSize?: "s" | "l";
     /**
      * Name for the RadioGroup.
      */
     name: string;
     /**
-     * onChange callback.
+     * Function to call when the RadioGroup loses focus.
+     */
+    onBlur?: (e: EventType) => void;
+    /**
+     * Callback function to update the RadioGroup's controlled `defaultValue` prop,
+     * for example `e => setDefaultValue(e.target.value)`.
      */
     onChange?: (event: EventType) => void;
+    /**
+     * Size of the RadioGroup.
+     */
+    size?: "s" | "l";
 }
 export default RadioGroup;

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

@@ -1,14 +1,13 @@
 import React from "react";
 declare type EventType = React.ChangeEvent<HTMLInputElement>;
 declare type ContextProps = {
+    blurEvent: (event: EventType) => void;
     changeEvent: (event: EventType) => void;
-    errorId: string;
-    errorMessage: string;
+    groupDisabled: boolean;
     isChecked: string;
-    isDisabled: boolean;
-    isInvalid: boolean;
-    isRequired: boolean;
+    labelSize: "s" | "l";
     name: string;
+    size: "s" | "l";
 };
 export declare const Provider: React.Provider<ContextProps>;
 export declare const useRadioContext: () => ContextProps;

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

@@ -1,4 +1,5 @@
 import React, { FC, ReactNode } from "react";
+import { subBrands } from "../BrandLogo/BrandLogo";
 import Column from "./components/Column";
 import Item from "./components/Item";
 import ItemGroup from "./components/ItemGroup";
@@ -60,6 +61,10 @@ export interface SiteHeaderProps {
      * Search component for the SiteHeader.
      */
     search?: ReactNode;
+    /**
+     * Optional sub-brand variant. Only applies to BT.
+     */
+    subBrand?: typeof subBrands[number];
 }
 export { Context as SiteHeaderContext };
 export default SiteHeader;

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

@@ -5,9 +5,19 @@ export interface ItemGroupProps {
      * Contents of the ItemGroup. Must be Item components.
      */
     children: ReactNode;
+    /**
+     * A top-level URL for the ItemGroup to link to.
+     */
+    href?: string;
     /**
      * Title text to be displayed in the ItemGroup summary.
      */
     title: string;
+    /**
+     * Text to display in top-level link inside the ItemGroup in narrow viewports.
+     * Only applies if `href` is present. If not provided, top-level link text
+     * will be automatically generated from `title`.
+     */
+    viewAllTitle?: string;
 }
 export default ItemGroup;

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

@@ -1,14 +1,14 @@
 import React, { FC } from "react";
 import { FormControlProps } from "../FormControl/FormControl";
 declare type EventType = React.ChangeEvent<HTMLInputElement>;
-declare type Ref = React.Ref<HTMLInputElement>;
 /**
  * Use `TextInput` to allow custom user text entry with a keyboard.
  */
 declare const TextInput: FC<TextInputProps>;
-export interface TextInputProps extends Omit<FormControlProps, "children" | "elementType"> {
+export interface TextInputProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus"> {
     /**
-     * Default value (uncontrolled).
+     * Uncontrolled default value of the TextInput. If the TextInput is controlled
+     * via `value`/`onChange`, `defaultValue` will be ignored.
      */
     defaultValue?: string;
     /**
@@ -27,6 +27,10 @@ export interface TextInputProps extends Omit<FormControlProps, "children" | "ele
      * Should the control be read-only?
      */
     isReadOnly?: boolean;
+    /**
+     * Should the control be required?
+     */
+    isRequired?: boolean;
     /**
      * Maximum number of characters.
      */
@@ -40,23 +44,25 @@ export interface TextInputProps extends Omit<FormControlProps, "children" | "ele
      */
     name?: string;
     /**
-     * onChange callback. Must be provided if providing `value` prop.
+     * Function to call when the TextInput loses focus.
+     */
+    onBlur?: (e: EventType) => void;
+    /**
+     * Callback function commonly used to update the TextInput's controlled
+     * `value`, for example `e => setValue(e.target.value)`.
      */
     onChange?: (e: EventType) => void;
     /**
      * Validation regex pattern.
      */
     pattern?: string;
-    /**
-     * Optional property to provide component Ref
-     */
-    ref?: Ref;
     /**
      * Type for the input. `number` will be changed to `text` and set the `numeric` inputMode.
      */
     type?: "email" | "number" | "password" | "tel" | "text" | "url";
     /**
-     * Current value (controlled). Must use with `onChange` if editable. Otherwise, use `defaultValue` or `isReadOnly`.
+     * Current value of the TextInput. Must be controlled via an
+     * `onChange` callback function. Otherwise, use `defaultValue` (or `isReadOnly`).
      */
     value?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arc-ui/components",
-  "version": "3.0.0",
+  "version": "5.0.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",
@@ -11,7 +11,7 @@
     "storybook": "start-storybook --ci -p 6006 --no-manager-cache",
     "storybook:build": "build-storybook --docs --quiet",
     "storybook:quiet": "yarn storybook --quiet",
-    "test": "jest",
+    "test": "TZ=UTC jest",
     "test:coverage": "yarn test --coverage",
     "test:watch": "yarn test --changedSince=origin/master --coverage --watch"
   },
@@ -25,9 +25,10 @@
     "react": "^17.0.0"
   },
   "devDependencies": {
-    "@arc-ui/fonts": "^3.0.0",
-    "@arc-ui/tokens": "^3.0.0",
+    "@arc-ui/fonts": "^5.0.0",
+    "@arc-ui/tokens": "^5.0.0",
     "@babel/core": "^7.14.3",
+    "@babel/helper-define-map": "^7.14.3",
     "@storybook/addon-essentials": "^6.3.6",
     "@storybook/addon-ie11": "BTEnterpriseDigital/addon-ie11#measuredco-fork",
     "@storybook/addon-links": "^6.3.6",
@@ -42,6 +43,7 @@
     "camelcase": "^6.2.1",
     "cheerio": "^1.0.0-rc.3",
     "classnames": "^2.2.6",
+    "formik": "^2.2.9",
     "ie-array-find-polyfill": "^1.1.0",
     "prop-types": "^15.7.2",
     "react": "^17.0.0",
@@ -49,6 +51,7 @@
     "react-dom": "^17.0.0",
     "react-is": "^17.0.0",
     "tslib": "^2.0.1",
-    "typescript": "^4.0.2"
+    "typescript": "^4.0.2",
+    "yup": "^0.32.11"
   }
 }