@khanacademy/wonder-blocks-form 2.2.2 → 2.3.2

package/dist/index.js

@@ -935,7 +935,8 @@ class LabeledTextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Compo
       testId,
       readOnly,
       autoComplete,
-      forwardedRef
+      forwardedRef,
+      ariaDescribedby
     } = this.props;
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__["IDProvider"], {
       id: id,
@@ -946,7 +947,7 @@ class LabeledTextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Compo
       style: style,
       field: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_text_field_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], {
         id: `${uniqueId}-field`,
-        "aria-describedby": `${uniqueId}-error`,
+        "aria-describedby": ariaDescribedby ? ariaDescribedby : `${uniqueId}-error`,
         "aria-invalid": this.state.error ? "true" : "false",
         testId: testId && `${testId}-field`,
         type: type,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "2.2.2",
+  "version": "2.3.2",
   "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.1.3",
-    "@khanacademy/wonder-blocks-color": "^1.1.19",
-    "@khanacademy/wonder-blocks-core": "^3.1.5",
-    "@khanacademy/wonder-blocks-icon": "^1.2.22",
-    "@khanacademy/wonder-blocks-layout": "^1.4.4",
-    "@khanacademy/wonder-blocks-spacing": "^3.0.4",
-    "@khanacademy/wonder-blocks-typography": "^1.1.26"
+    "@babel/runtime": "^7.16.3",
+    "@khanacademy/wonder-blocks-clickable": "^2.2.2",
+    "@khanacademy/wonder-blocks-color": "^1.1.20",
+    "@khanacademy/wonder-blocks-core": "^4.0.0",
+    "@khanacademy/wonder-blocks-icon": "^1.2.24",
+    "@khanacademy/wonder-blocks-layout": "^1.4.6",
+    "@khanacademy/wonder-blocks-spacing": "^3.0.5",
+    "@khanacademy/wonder-blocks-typography": "^1.1.28"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
-    "react": "^16.4.1"
+    "react": "16.14.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.1.2"
-  },
-  "gitHead": "9a9cc04bf2bbfb425f991a347b4f8b0d0d56e120"
+    "wb-dev-build-settings": "^0.2.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,6 +1,8 @@
 //@flow
 import * as React from "react";
 import {mount} from "enzyme";
+import "jest-enzyme";
+import {render, screen} from "@testing-library/react";
 
 import {StyleSheet} from "aphrodite";
 import LabeledTextField from "../labeled-text-field.js";
@@ -186,6 +188,49 @@ describe("LabeledTextField", () => {
         expect(input).toBeDisabled();
     });
 
+    it("ariaDescribedby prop sets aria-describedby", () => {
+        // Arrange
+        const ariaDescription = "aria description";
+
+        // Act
+        render(
+            <LabeledTextField
+                label="Label"
+                value=""
+                onChange={() => {}}
+                ariaDescribedby={ariaDescription}
+            />,
+        );
+
+        // Assert
+        const input = screen.getByRole("textbox");
+        expect(input.getAttribute("aria-describedby")).toEqual(ariaDescription);
+    });
+
+    it("auto-generates a unique error when ariaDescribedby is not passed in", () => {
+        // Arrange
+
+        // Act
+        render(
+            <LabeledTextField
+                label="Label"
+                value=""
+                onChange={() => {}}
+                // ariaDescribedby is not passed in
+            />,
+        );
+
+        // Assert
+        // Since the generated aria-describedby is unique,
+        // we cannot know what it will be.
+        // We only test if the aria-describedby attribute starts with
+        // "uid-" and ends with "-error".
+        const input = screen.getByRole("textbox");
+        expect(input.getAttribute("aria-describedby")).toMatch(
+            /^uid-.*-error$/,
+        );
+    });
+
     it("validate prop is called when input changes", () => {
         // Arrange
         const validate = jest.fn((value: string): ?string => {});

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";
 

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/labeled-text-field.js

@@ -41,6 +41,11 @@ type Props = {|
      */
     disabled: boolean,
 
+    /**
+     * Identifies the element or elements that describes this text field.
+     */
+    ariaDescribedby?: string | Array<string>,
+
     /**
      * Provide a validation for the input value.
      * Return a string error message or null | void for a valid input.
@@ -207,6 +212,7 @@ class LabeledTextFieldInternal extends React.Component<
             readOnly,
             autoComplete,
             forwardedRef,
+            ariaDescribedby,
         } = this.props;
 
         return (
@@ -219,7 +225,11 @@ class LabeledTextFieldInternal extends React.Component<
                         field={
                             <TextField
                                 id={`${uniqueId}-field`}
-                                aria-describedby={`${uniqueId}-error`}
+                                aria-describedby={
+                                    ariaDescribedby
+                                        ? ariaDescribedby
+                                        : `${uniqueId}-error`
+                                }
                                 aria-invalid={
                                     this.state.error ? "true" : "false"
                                 }
@@ -255,11 +265,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;

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

@@ -16,7 +16,7 @@ export default {
     title: "Form / LabeledTextField",
 };
 
-export const text: StoryComponentType = () => {
+export const Text: StoryComponentType = () => {
     const [value, setValue] = React.useState("Khan");
 
     const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
@@ -37,7 +37,7 @@ export const text: StoryComponentType = () => {
     );
 };
 
-export const number: StoryComponentType = () => {
+export const Number: StoryComponentType = () => {
     const [value, setValue] = React.useState("18");
 
     const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
@@ -59,7 +59,7 @@ export const number: StoryComponentType = () => {
     );
 };
 
-export const password: StoryComponentType = () => {
+export const Password: StoryComponentType = () => {
     const [value, setValue] = React.useState("Password123");
 
     const validate = (value: string) => {
@@ -91,7 +91,7 @@ export const password: StoryComponentType = () => {
     );
 };
 
-export const email: StoryComponentType = () => {
+export const Email: StoryComponentType = () => {
     const [value, setValue] = React.useState("khan@khan.org");
 
     const validate = (value: string) => {
@@ -121,7 +121,7 @@ export const email: StoryComponentType = () => {
     );
 };
 
-export const telephone: StoryComponentType = () => {
+export const Telephone: StoryComponentType = () => {
     const [value, setValue] = React.useState("123-456-7890");
 
     const validate = (value: string) => {
@@ -151,7 +151,7 @@ export const telephone: StoryComponentType = () => {
     );
 };
 
-export const error: StoryComponentType = () => {
+export const Error: StoryComponentType = () => {
     const [value, setValue] = React.useState("khan");
 
     const validate = (value: string) => {
@@ -181,7 +181,7 @@ export const error: StoryComponentType = () => {
     );
 };
 
-export const disabled: StoryComponentType = () => (
+export const Disabled: StoryComponentType = () => (
     <LabeledTextField
         label="Name"
         description="Please enter your name"
@@ -192,7 +192,7 @@ export const disabled: StoryComponentType = () => (
     />
 );
 
-export const light: StoryComponentType = () => {
+export const Light: StoryComponentType = () => {
     const [value, setValue] = React.useState("");
 
     const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
@@ -222,7 +222,7 @@ export const light: StoryComponentType = () => {
     );
 };
 
-export const customStyle: StoryComponentType = () => {
+export const CustomStyle: StoryComponentType = () => {
     const [firstName, setFirstName] = React.useState("");
     const [lastName, setLastName] = React.useState("");
 
@@ -257,9 +257,9 @@ export const customStyle: StoryComponentType = () => {
     );
 };
 
-export const ref: StoryComponentType = () => {
+export const Ref: StoryComponentType = () => {
     const [value, setValue] = React.useState("Khan");
-    const inputRef = React.createRef<HTMLInputElement>();
+    const inputRef = React.createRef();
 
     const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
         if (event.key === "Enter") {
@@ -292,7 +292,7 @@ export const ref: StoryComponentType = () => {
     );
 };
 
-export const readOnly: StoryComponentType = () => {
+export const ReadOnly: StoryComponentType = () => {
     const [value, setValue] = React.useState("Khan");
 
     const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
@@ -314,7 +314,7 @@ export const readOnly: StoryComponentType = () => {
     );
 };
 
-export const autoComplete: StoryComponentType = () => {
+export const AutoComplete: StoryComponentType = () => {
     const [value, setValue] = React.useState("");
 
     const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {

package/src/components/text-field.js

@@ -316,11 +316,9 @@ type ExportProps = $Diff<
     WithForwardRef,
 >;
 
-const TextField: React.AbstractComponent<
-    ExportProps,
-    HTMLInputElement,
-> = React.forwardRef<ExportProps, HTMLInputElement>((props, ref) => (
-    <TextFieldInternal {...props} forwardedRef={ref} />
-));
+const TextField: React.AbstractComponent<ExportProps, HTMLInputElement> =
+    React.forwardRef<ExportProps, HTMLInputElement>((props, ref) => (
+        <TextFieldInternal {...props} forwardedRef={ref} />
+    ));
 
 export default TextField;

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

@@ -2,7 +2,7 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
-import {View, Text} from "@khanacademy/wonder-blocks-core";
+import {View, Text as _Text} 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";
@@ -15,7 +15,7 @@ export default {
     title: "Form / TextField",
 };
 
-export const text: StoryComponentType = () => {
+export const Text: StoryComponentType = () => {
     const [value, setValue] = React.useState("");
 
     const handleChange = (newValue: string) => {
@@ -40,7 +40,7 @@ export const text: StoryComponentType = () => {
     );
 };
 
-export const number: StoryComponentType = () => {
+export const Number: StoryComponentType = () => {
     const [value, setValue] = React.useState("12345");
 
     const handleChange = (newValue: string) => {
@@ -65,7 +65,7 @@ export const number: StoryComponentType = () => {
     );
 };
 
-export const password: StoryComponentType = () => {
+export const Password: StoryComponentType = () => {
     const [value, setValue] = React.useState("Password123");
     const [errorMessage, setErrorMessage] = React.useState();
     const [focused, setFocused] = React.useState(false);
@@ -118,14 +118,14 @@ export const password: StoryComponentType = () => {
             {!focused && errorMessage && (
                 <View>
                     <Strut size={Spacing.xSmall_8} />
-                    <Text style={styles.errorMessage}>{errorMessage}</Text>
+                    <_Text style={styles.errorMessage}>{errorMessage}</_Text>
                 </View>
             )}
         </View>
     );
 };
 
-export const email: StoryComponentType = () => {
+export const Email: StoryComponentType = () => {
     const [value, setValue] = React.useState("khan@khanacademy.org");
     const [errorMessage, setErrorMessage] = React.useState();
     const [focused, setFocused] = React.useState(false);
@@ -176,14 +176,14 @@ export const email: StoryComponentType = () => {
             {!focused && errorMessage && (
                 <View>
                     <Strut size={Spacing.xSmall_8} />
-                    <Text style={styles.errorMessage}>{errorMessage}</Text>
+                    <_Text style={styles.errorMessage}>{errorMessage}</_Text>
                 </View>
             )}
         </View>
     );
 };
 
-export const telephone: StoryComponentType = () => {
+export const Telephone: StoryComponentType = () => {
     const [value, setValue] = React.useState("123-456-7890");
     const [errorMessage, setErrorMessage] = React.useState();
     const [focused, setFocused] = React.useState(false);
@@ -234,14 +234,14 @@ export const telephone: StoryComponentType = () => {
             {!focused && errorMessage && (
                 <View>
                     <Strut size={Spacing.xSmall_8} />
-                    <Text style={styles.errorMessage}>{errorMessage}</Text>
+                    <_Text style={styles.errorMessage}>{errorMessage}</_Text>
                 </View>
             )}
         </View>
     );
 };
 
-export const error: StoryComponentType = () => {
+export const Error: StoryComponentType = () => {
     const [value, setValue] = React.useState("khan");
     const [errorMessage, setErrorMessage] = React.useState();
     const [focused, setFocused] = React.useState(false);
@@ -292,14 +292,14 @@ export const error: StoryComponentType = () => {
             {!focused && errorMessage && (
                 <View>
                     <Strut size={Spacing.xSmall_8} />
-                    <Text style={styles.errorMessage}>{errorMessage}</Text>
+                    <_Text style={styles.errorMessage}>{errorMessage}</_Text>
                 </View>
             )}
         </View>
     );
 };
 
-export const disabled: StoryComponentType = () => (
+export const Disabled: StoryComponentType = () => (
     <TextField
         id="tf-1"
         value=""
@@ -309,7 +309,7 @@ export const disabled: StoryComponentType = () => (
     />
 );
 
-export const light: StoryComponentType = () => {
+export const Light: StoryComponentType = () => {
     const [value, setValue] = React.useState("khan@khanacademy.org");
     const [errorMessage, setErrorMessage] = React.useState();
     const [focused, setFocused] = React.useState(false);
@@ -361,14 +361,16 @@ export const light: StoryComponentType = () => {
             {!focused && errorMessage && (
                 <View>
                     <Strut size={Spacing.xSmall_8} />
-                    <Text style={styles.errorMessageLight}>{errorMessage}</Text>
+                    <_Text style={styles.errorMessageLight}>
+                        {errorMessage}
+                    </_Text>
                 </View>
             )}
         </View>
     );
 };
 
-export const customStyle: StoryComponentType = () => {
+export const CustomStyle: StoryComponentType = () => {
     const [value, setValue] = React.useState("");
 
     const handleChange = (newValue: string) => {
@@ -394,7 +396,7 @@ export const customStyle: StoryComponentType = () => {
     );
 };
 
-export const ref: StoryComponentType = () => {
+export const Ref: StoryComponentType = () => {
     const [value, setValue] = React.useState("");
     const inputRef: RefObject<typeof HTMLInputElement> = React.createRef();
 
@@ -433,7 +435,7 @@ export const ref: StoryComponentType = () => {
     );
 };
 
-export const readOnly: StoryComponentType = () => {
+export const ReadOnly: StoryComponentType = () => {
     const [value, setValue] = React.useState("Khan");
 
     const handleChange = (newValue: string) => {
@@ -459,7 +461,7 @@ export const readOnly: StoryComponentType = () => {
     );
 };
 
-export const autoComplete: StoryComponentType = () => {
+export const AutoComplete: StoryComponentType = () => {
     const [value, setValue] = React.useState("");
 
     const handleChange = (newValue: string) => {

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2018 Khan Academy
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.