@arc-ui/components 4.0.0 → 6.0.0

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/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).
+     * Value of the RadioButton that should be checked by default.
      */
-    defaultValue?: string;
+    checkedValue: 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 `checkedValue` prop,
+     * for example `e => setCheckedValue(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;
-    isChecked: string;
-    isDisabled: boolean;
-    isInvalid: boolean;
-    isRequired: boolean;
+    groupDisabled: boolean;
+    checkedValue: string;
+    labelSize: "s" | "l";
     name: string;
+    size: "s" | "l";
 };
 export declare const Provider: React.Provider<ContextProps>;
 export declare const useRadioContext: () => ContextProps;

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": "4.0.0",
+  "version": "6.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",
@@ -25,8 +25,8 @@
     "react": "^17.0.0"
   },
   "devDependencies": {
-    "@arc-ui/fonts": "^4.0.0",
-    "@arc-ui/tokens": "^4.0.0",
+    "@arc-ui/fonts": "^6.0.0",
+    "@arc-ui/tokens": "^6.0.0",
     "@babel/core": "^7.14.3",
     "@babel/helper-define-map": "^7.14.3",
     "@storybook/addon-essentials": "^6.3.6",
@@ -43,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",
@@ -50,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"
   }
 }