@khanacademy/wonder-blocks-form 2.3.0 → 2.4.0

package/dist/index.js

@@ -254,6 +254,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 
 
+const defaultErrorMessage = "This field is required.";
 
 // TODO(WB-1081): Change class name back to TextField after Styleguidist is gone.
 
@@ -271,7 +272,8 @@ class TextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Component"]
     this.maybeValidate = newValue => {
       const {
         validate,
-        onValidate
+        onValidate,
+        required
       } = this.props;
 
       if (validate) {
@@ -283,6 +285,16 @@ class TextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Component"]
             onValidate(maybeError);
           }
         });
+      } else if (required) {
+        const requiredString = typeof required === "string" ? required : defaultErrorMessage;
+        const maybeError = newValue ? null : requiredString;
+        this.setState({
+          error: maybeError
+        }, () => {
+          if (onValidate) {
+            onValidate(maybeError);
+          }
+        });
       }
     };
 
@@ -321,14 +333,16 @@ class TextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Component"]
       });
     };
 
-    if (props.validate) {
+    if (props.validate && props.value !== "") {
       // Ensures error is updated on unmounted server-side renders
       this.state.error = props.validate(props.value) || null;
     }
   }
 
   componentDidMount() {
-    this.maybeValidate(this.props.value);
+    if (this.props.value !== "") {
+      this.maybeValidate(this.props.value);
+    }
   }
 
   render() {
@@ -339,7 +353,6 @@ class TextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Component"]
       disabled,
       onKeyDown,
       placeholder,
-      required,
       light,
       style,
       testId,
@@ -355,6 +368,7 @@ class TextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Component"]
       onValidate,
       validate,
       onChange,
+      required,
 
       /* eslint-enable no-unused-vars */
       // Should only include Aria related props
@@ -372,7 +386,6 @@ class TextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Component"]
       onKeyDown: onKeyDown,
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
-      required: required,
       "data-test-id": testId,
       readOnly: readOnly,
       autoComplete: autoComplete,
@@ -926,6 +939,7 @@ class LabeledTextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Compo
       description,
       value,
       disabled,
+      required,
       validate,
       onChange,
       onKeyDown,
@@ -949,6 +963,8 @@ class LabeledTextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Compo
         id: `${uniqueId}-field`,
         "aria-describedby": ariaDescribedby ? ariaDescribedby : `${uniqueId}-error`,
         "aria-invalid": this.state.error ? "true" : "false",
+        "aria-required": required ? "true" : "false",
+        required: required,
         testId: testId && `${testId}-field`,
         type: type,
         value: value,
@@ -967,6 +983,7 @@ class LabeledTextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Compo
       }),
       label: label,
       description: description,
+      required: !!required,
       error: !this.state.focused && this.state.error || ""
     }));
   }
@@ -1396,24 +1413,30 @@ const _generateStyles = (checked, error) => {
 
 
 
-
+const StyledSpan = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["addStyle"])("span");
 /**
  * A FieldHeading is an element that provides a label, description, and error element
  * to present better context and hints to any type of form field component.
  */
+
 class FieldHeading extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   renderLabel() {
     const {
       label,
       id,
+      required,
       testId
     } = this.props;
+    const requiredIcon = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledSpan, {
+      style: styles.required,
+      "aria-hidden": true
+    }, " ", "*");
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, typeof label === "string" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6__["LabelMedium"], {
       style: styles.label,
       tag: "label",
       htmlFor: id && `${id}-field`,
       testId: testId && `${testId}-label`
-    }, label) : label, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__["Strut"], {
+    }, label, required && requiredIcon) : label, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__["Strut"], {
       size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.xxxSmall_4
     }));
   }
@@ -1479,6 +1502,9 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
   },
   error: {
     color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.red
+  },
+  required: {
+    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.red
   }
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -15,21 +15,20 @@
     "access": "public"
   },
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
-    "@khanacademy/wonder-blocks-clickable": "^2.2.0",
-    "@khanacademy/wonder-blocks-color": "^1.1.19",
-    "@khanacademy/wonder-blocks-core": "^3.2.0",
-    "@khanacademy/wonder-blocks-icon": "^1.2.23",
-    "@khanacademy/wonder-blocks-layout": "^1.4.5",
-    "@khanacademy/wonder-blocks-spacing": "^3.0.4",
-    "@khanacademy/wonder-blocks-typography": "^1.1.27"
+    "@babel/runtime": "^7.16.3",
+    "@khanacademy/wonder-blocks-clickable": "^2.2.3",
+    "@khanacademy/wonder-blocks-color": "^1.1.20",
+    "@khanacademy/wonder-blocks-core": "^4.2.1",
+    "@khanacademy/wonder-blocks-icon": "^1.2.25",
+    "@khanacademy/wonder-blocks-layout": "^1.4.7",
+    "@khanacademy/wonder-blocks-spacing": "^3.0.5",
+    "@khanacademy/wonder-blocks-typography": "^1.1.29"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
     "react": "16.14.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.1.2"
-  },
-  "gitHead": "61090a61b6e9d2a735976d5fd53a15d06f10c853"
+    "wb-dev-build-settings": "^0.3.0"
+  }
 }

package/src/components/__tests__/checkbox-group.test.js

@@ -1,6 +1,7 @@
 //@flow
 import * as React from "react";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import CheckboxGroup from "../checkbox-group.js";
 import Choice from "../choice.js";

package/src/components/__tests__/field-heading.test.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from "react";
 import {mount} from "enzyme";
+import "jest-enzyme";
 import {StyleSheet} from "aphrodite";
 
 import FieldHeading from "../field-heading.js";

package/src/components/__tests__/labeled-text-field.test.js

@@ -1,7 +1,9 @@
 //@flow
 import * as React from "react";
 import {mount} from "enzyme";
+import "jest-enzyme";
 import {render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import {StyleSheet} from "aphrodite";
 import LabeledTextField from "../labeled-text-field.js";
@@ -484,3 +486,141 @@ describe("LabeledTextField", () => {
         expect(textField).toHaveProp("autoComplete", autoComplete);
     });
 });
+
+describe("Required LabeledTextField", () => {
+    test("has * when `required` prop is true", () => {
+        // Arrange
+
+        // Act
+        render(
+            <LabeledTextField
+                label="Label"
+                value=""
+                onChange={() => {}}
+                required={true}
+            />,
+        );
+
+        // Assert
+        expect(screen.getByText("*")).toBeInTheDocument();
+    });
+
+    test("does not have * when `required` prop is false", () => {
+        // Arrange
+
+        // Act
+        render(
+            <LabeledTextField
+                label="Label"
+                value=""
+                onChange={() => {}}
+                required={false}
+            />,
+        );
+
+        // Assert
+        expect(screen.queryByText("*")).not.toBeInTheDocument();
+    });
+
+    test("aria-required is true when `required` prop is true", () => {
+        // Arrange
+
+        // Act
+        render(
+            <LabeledTextField
+                label="Label"
+                value=""
+                onChange={() => {}}
+                testId="foo-labeled-text-field"
+                required={true}
+            />,
+        );
+
+        const textField = screen.getByTestId("foo-labeled-text-field-field");
+
+        // Assert
+        expect(textField).toHaveAttribute("aria-required", "true");
+    });
+
+    test("aria-required is false when `required` prop is false", () => {
+        // Arrange
+
+        // Act
+        render(
+            <LabeledTextField
+                label="Label"
+                value=""
+                onChange={() => {}}
+                testId="foo-labeled-text-field"
+                required={false}
+            />,
+        );
+
+        const textField = screen.getByTestId("foo-labeled-text-field-field");
+
+        // Assert
+        expect(textField).toHaveAttribute("aria-required", "false");
+    });
+
+    test("displays the default message when the `required` prop is `true`", () => {
+        // Arrange
+        const TextFieldWrapper = () => {
+            const [value, setValue] = React.useState("");
+            return (
+                <LabeledTextField
+                    label="Label"
+                    value={value}
+                    onChange={setValue}
+                    required={true}
+                    testId="test-labeled-text-field"
+                />
+            );
+        };
+
+        render(<TextFieldWrapper />);
+
+        const textField = screen.getByTestId("test-labeled-text-field-field");
+        textField.focus();
+        userEvent.paste(textField, "a");
+        userEvent.clear(textField);
+
+        // Act
+        textField.blur();
+
+        // Assert
+        expect(screen.getByRole("alert")).toHaveTextContent(
+            "This field is required.",
+        );
+    });
+
+    test("displays the string passed into `required`", () => {
+        // Arrange
+        const errorMessage = "This is an example error message.";
+
+        const TextFieldWrapper = () => {
+            const [value, setValue] = React.useState("");
+            return (
+                <LabeledTextField
+                    label="Label"
+                    value={value}
+                    onChange={setValue}
+                    required={errorMessage}
+                    testId="test-labeled-text-field"
+                />
+            );
+        };
+
+        render(<TextFieldWrapper />);
+
+        const textField = screen.getByTestId("test-labeled-text-field-field");
+        textField.focus();
+        userEvent.paste(textField, "a");
+        userEvent.clear(textField);
+
+        // Act
+        textField.blur();
+
+        // Assert
+        expect(screen.getByRole("alert")).toHaveTextContent(errorMessage);
+    });
+});

package/src/components/__tests__/radio-group.test.js

@@ -1,6 +1,7 @@
 //@flow
 import * as React from "react";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import RadioGroup from "../radio-group.js";
 import Choice from "../choice.js";

package/src/components/__tests__/text-field.test.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from "react";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import TextField from "../text-field.js";
 
@@ -329,24 +330,6 @@ describe("TextField", () => {
         );
     });
 
-    it("required prop is passed to the input element", () => {
-        // Arrange
-        const wrapper = mount(
-            <TextField
-                id={"tf-1"}
-                value="Text"
-                onChange={() => {}}
-                required={true}
-            />,
-        );
-
-        // Act
-
-        // Assert
-        const input = wrapper.find("input");
-        expect(input).toContainMatchingElement("[required=true]");
-    });
-
     it("testId is passed to the input element", () => {
         // Arrange
         const testId = "some-test-id";

package/src/components/checkbox-core.js

@@ -24,8 +24,7 @@ const {blue, red, white, offWhite, offBlack16, offBlack32, offBlack50} = Color;
 const StyledInput = addStyle("input");
 
 const checkboxCheck: IconAsset = {
-    small:
-        "M11.263 4.324a1 1 0 1 1 1.474 1.352l-5.5 6a1 1 0 0 1-1.505-.036l-2.5-3a1 1 0 1 1 1.536-1.28L6.536 9.48l4.727-5.157z",
+    small: "M11.263 4.324a1 1 0 1 1 1.474 1.352l-5.5 6a1 1 0 0 1-1.505-.036l-2.5-3a1 1 0 1 1 1.536-1.28L6.536 9.48l4.727-5.157z",
 };
 
 /**

package/src/components/field-heading.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
-import {View, type StyleType} from "@khanacademy/wonder-blocks-core";
+import {View, addStyle, type StyleType} from "@khanacademy/wonder-blocks-core";
 import Color from "@khanacademy/wonder-blocks-color";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
@@ -28,6 +28,11 @@ type Props = {|
      */
     description?: string | React.Element<Typography>,
 
+    /**
+     * Whether this field is required to continue.
+     */
+    required?: boolean,
+
     /**
      * The message for the error element.
      */
@@ -52,13 +57,22 @@ type Props = {|
     testId?: string,
 |};
 
+const StyledSpan = addStyle("span");
+
 /**
  * A FieldHeading is an element that provides a label, description, and error element
  * to present better context and hints to any type of form field component.
  */
 export default class FieldHeading extends React.Component<Props> {
     renderLabel(): React.Node {
-        const {label, id, testId} = this.props;
+        const {label, id, required, testId} = this.props;
+
+        const requiredIcon = (
+            <StyledSpan style={styles.required} aria-hidden={true}>
+                {" "}
+                *
+            </StyledSpan>
+        );
 
         return (
             <React.Fragment>
@@ -70,6 +84,7 @@ export default class FieldHeading extends React.Component<Props> {
                         testId={testId && `${testId}-label`}
                     >
                         {label}
+                        {required && requiredIcon}
                     </LabelMedium>
                 ) : (
                     label
@@ -154,4 +169,7 @@ const styles = StyleSheet.create({
     error: {
         color: Color.red,
     },
+    required: {
+        color: Color.red,
+    },
 });

package/src/components/labeled-text-field.js

@@ -41,6 +41,30 @@ type Props = {|
      */
     disabled: boolean,
 
+    /**
+     * Whether this field is required to to continue, or the error message to
+     * render if this field is left blank.
+     *
+     * This can be a boolean or a string.
+     *
+     * String:
+     * Please pass in a translated string to use as the error message that will
+     * render if the user leaves this field blank. If this field is required,
+     * and a string is not passed in, a default untranslated string will render
+     * upon error.
+     * Note: The string will not be used if a `validate` prop is passed in.
+     *
+     * Example message: i18n._("A password is required to log in.")
+     *
+     * Boolean:
+     * True/false indicating whether this field is required. Please do not pass
+     * in `true` if possible - pass in the error string instead.
+     * If `true` is passed, and a `validate` prop is not passed, that means
+     * there is no corresponding message and the default untranlsated message
+     * will be used.
+     */
+    required?: boolean | string,
+
     /**
      * Identifies the element or elements that describes this text field.
      */
@@ -202,6 +226,7 @@ class LabeledTextFieldInternal extends React.Component<
             description,
             value,
             disabled,
+            required,
             validate,
             onChange,
             onKeyDown,
@@ -233,6 +258,8 @@ class LabeledTextFieldInternal extends React.Component<
                                 aria-invalid={
                                     this.state.error ? "true" : "false"
                                 }
+                                aria-required={required ? "true" : "false"}
+                                required={required}
                                 testId={testId && `${testId}-field`}
                                 type={type}
                                 value={value}
@@ -252,6 +279,7 @@ class LabeledTextFieldInternal extends React.Component<
                         }
                         label={label}
                         description={description}
+                        required={!!required}
                         error={(!this.state.focused && this.state.error) || ""}
                     />
                 )}
@@ -265,11 +293,9 @@ type ExportProps = $Diff<
     WithForwardRef,
 >;
 
-const LabeledTextField: React.AbstractComponent<
-    ExportProps,
-    HTMLInputElement,
-> = React.forwardRef<ExportProps, HTMLInputElement>((props, ref) => (
-    <LabeledTextFieldInternal {...props} forwardedRef={ref} />
-));
+const LabeledTextField: React.AbstractComponent<ExportProps, HTMLInputElement> =
+    React.forwardRef<ExportProps, HTMLInputElement>((props, ref) => (
+        <LabeledTextFieldInternal {...props} forwardedRef={ref} />
+    ));
 
 export default LabeledTextField;