@khanacademy/wonder-blocks-form 2.3.0 → 2.4.0

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,56 @@ export const text: StoryComponentType = () => {
     );
 };
 
-export const number: StoryComponentType = () => {
+export const RequiredWithDefaultText: StoryComponentType = () => {
+    const [value, setValue] = React.useState("");
+
+    const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
+        if (event.key === "Enter") {
+            event.currentTarget.blur();
+        }
+    };
+
+    return (
+        <LabeledTextField
+            label="Name"
+            description="Please enter your name"
+            value={value}
+            onChange={(newValue) => setValue(newValue)}
+            onKeyDown={handleKeyDown}
+            required={true}
+        />
+    );
+};
+
+export const RequiredWithSpecifiedText: StoryComponentType = () => {
+    const [value, setValue] = React.useState("");
+
+    const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
+        if (event.key === "Enter") {
+            event.currentTarget.blur();
+        }
+    };
+
+    return (
+        <LabeledTextField
+            label="Name"
+            description="Please enter your name"
+            value={value}
+            onChange={(newValue) => setValue(newValue)}
+            onKeyDown={handleKeyDown}
+            required="This specific field is super required."
+        />
+    );
+};
+
+RequiredWithSpecifiedText.parameters = {
+    chromatic: {
+        // We have screenshots of other stories that cover this case.
+        disableSnapshot: true,
+    },
+};
+
+export const Number: StoryComponentType = () => {
     const [value, setValue] = React.useState("18");
 
     const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
@@ -59,7 +108,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 +140,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 +170,44 @@ export const email: StoryComponentType = () => {
     );
 };
 
-export const telephone: StoryComponentType = () => {
+export const EmailRequired: StoryComponentType = () => {
+    const [value, setValue] = React.useState("");
+
+    const validate = (value: string) => {
+        const emailRegex = /^[^@\s]+@[^@\s.]+\.[^@.\s]+$/;
+        if (!emailRegex.test(value)) {
+            return "Please enter a valid email";
+        }
+    };
+
+    const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
+        if (event.key === "Enter") {
+            event.currentTarget.blur();
+        }
+    };
+
+    return (
+        <LabeledTextField
+            label="Email"
+            type="email"
+            onChange={(newValue) => setValue(newValue)}
+            description="Please provide your personal email"
+            value={value}
+            validate={validate}
+            onKeyDown={handleKeyDown}
+            required={true}
+        />
+    );
+};
+
+EmailRequired.parameters = {
+    chromatic: {
+        // We have screenshots of other stories that cover this case.
+        disableSnapshot: true,
+    },
+};
+
+export const Telephone: StoryComponentType = () => {
     const [value, setValue] = React.useState("123-456-7890");
 
     const validate = (value: string) => {
@@ -151,7 +237,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 +267,7 @@ export const error: StoryComponentType = () => {
     );
 };
 
-export const disabled: StoryComponentType = () => (
+export const Disabled: StoryComponentType = () => (
     <LabeledTextField
         label="Name"
         description="Please enter your name"
@@ -192,7 +278,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 +308,7 @@ export const light: StoryComponentType = () => {
     );
 };
 
-export const customStyle: StoryComponentType = () => {
+export const CustomStyle: StoryComponentType = () => {
     const [firstName, setFirstName] = React.useState("");
     const [lastName, setLastName] = React.useState("");
 
@@ -257,7 +343,7 @@ export const customStyle: StoryComponentType = () => {
     );
 };
 
-export const ref: StoryComponentType = () => {
+export const Ref: StoryComponentType = () => {
     const [value, setValue] = React.useState("Khan");
     const inputRef = React.createRef();
 
@@ -292,7 +378,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 +400,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

@@ -12,6 +12,8 @@ export type TextFieldType = "text" | "password" | "email" | "number" | "tel";
 
 type WithForwardRef = {|forwardedRef: React.Ref<"input">|};
 
+const defaultErrorMessage = "This field is required.";
+
 type Props = {|
     ...AriaProps,
 
@@ -72,9 +74,28 @@ type Props = {|
     placeholder?: string,
 
     /**
-     * Whether this component is required.
+     * 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,
+    required?: boolean | string,
 
     /**
      * Change the default focus ring color to fit a dark background.
@@ -138,7 +159,7 @@ class TextFieldInternal extends React.Component<PropsWithForwardRef, State> {
 
     constructor(props: PropsWithForwardRef) {
         super(props);
-        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;
         }
@@ -150,11 +171,14 @@ class TextFieldInternal extends React.Component<PropsWithForwardRef, State> {
     };
 
     componentDidMount() {
-        this.maybeValidate(this.props.value);
+        if (this.props.value !== "") {
+            this.maybeValidate(this.props.value);
+        }
     }
 
     maybeValidate: (newValue: string) => void = (newValue) => {
-        const {validate, onValidate} = this.props;
+        const {validate, onValidate, required} = this.props;
+
         if (validate) {
             const maybeError = validate(newValue) || null;
             this.setState({error: maybeError}, () => {
@@ -162,6 +186,15 @@ class TextFieldInternal extends React.Component<PropsWithForwardRef, State> {
                     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);
+                }
+            });
         }
     };
 
@@ -204,7 +237,6 @@ class TextFieldInternal extends React.Component<PropsWithForwardRef, State> {
             disabled,
             onKeyDown,
             placeholder,
-            required,
             light,
             style,
             testId,
@@ -219,6 +251,7 @@ class TextFieldInternal extends React.Component<PropsWithForwardRef, State> {
             onValidate,
             validate,
             onChange,
+            required,
             /* eslint-enable no-unused-vars */
             // Should only include Aria related props
             ...otherProps
@@ -249,7 +282,6 @@ class TextFieldInternal extends React.Component<PropsWithForwardRef, State> {
                 onKeyDown={onKeyDown}
                 onFocus={this.handleFocus}
                 onBlur={this.handleBlur}
-                required={required}
                 data-test-id={testId}
                 readOnly={readOnly}
                 autoComplete={autoComplete}
@@ -316,11 +348,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,32 @@ export const text: StoryComponentType = () => {
     );
 };
 
-export const number: StoryComponentType = () => {
+export const Required: StoryComponentType = () => {
+    const [value, setValue] = React.useState("");
+
+    const handleChange = (newValue: string) => {
+        setValue(newValue);
+    };
+
+    const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
+        if (event.key === "Enter") {
+            event.currentTarget.blur();
+        }
+    };
+
+    return (
+        <TextField
+            id="tf-1"
+            type="text"
+            value={value}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            required={true}
+        />
+    );
+};
+
+export const Number: StoryComponentType = () => {
     const [value, setValue] = React.useState("12345");
 
     const handleChange = (newValue: string) => {
@@ -65,7 +90,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 +143,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 +201,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 +259,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 +317,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 +334,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 +386,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 +421,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 +460,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 +486,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.