@khanacademy/wonder-blocks-form 3.1.11 → 3.1.13

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

@@ -1,709 +0,0 @@
-// @flow
-import * as React from "react";
-import {StyleSheet} from "aphrodite";
-
-import {LabeledTextField} from "@khanacademy/wonder-blocks-form";
-import {View} from "@khanacademy/wonder-blocks-core";
-import {LabelMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
-import Color from "@khanacademy/wonder-blocks-color";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
-import {Strut} from "@khanacademy/wonder-blocks-layout";
-import Button from "@khanacademy/wonder-blocks-button";
-import Link from "@khanacademy/wonder-blocks-link";
-
-import type {StoryComponentType} from "@storybook/react";
-
-import ComponentInfo from "../../../../../.storybook/components/component-info";
-import {name, version} from "../../../package.json";
-import LabeledTextFieldArgTypes from "./labeled-text-field.argtypes";
-
-export default {
-    title: "Form / LabeledTextField",
-    component: LabeledTextField,
-    parameters: {
-        componentSubtitle: ((
-            <ComponentInfo name={name} version={version} />
-        ): any),
-    },
-    argTypes: LabeledTextFieldArgTypes,
-};
-
-export const Default: StoryComponentType = (args) => {
-    return <LabeledTextField {...args} />;
-};
-
-Default.args = {
-    id: "some-ltf-id",
-    type: "text",
-    label: "Label",
-    description: "Hello, this is the description for this field",
-    value: "",
-    disabled: false,
-    required: false,
-    light: false,
-    placeholder: "Placeholder",
-    readOnly: false,
-    autoComplete: "off",
-    validate: () => {},
-    onValidate: () => {},
-    onChange: () => {},
-    onKeyDown: () => {},
-    onFocus: () => {},
-    onBlur: () => {},
-};
-
-export const Text: StoryComponentType = () => {
-    const [value, setValue] = React.useState("Khan");
-
-    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)}
-            placeholder="Name"
-            onKeyDown={handleKeyDown}
-        />
-    );
-};
-
-Text.parameters = {
-    docs: {
-        storyDescription:
-            "An input field with type `text` takes all kinds of characters.",
-    },
-};
-
-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={setValue}
-            onKeyDown={handleKeyDown}
-            required={true}
-        />
-    );
-};
-
-RequiredWithDefaultText.parameters = {
-    docs: {
-        storyDescription: `A required field will show the message
-        "This field is required." by default if someone types in it
-        at some point but leaves it blank. Type in the field, then
-        backspace all the way and click out of the field to see
-        this message. Note that this message would not appear if
-        the \`validation\` prop were set.`,
-    },
-    chromatic: {
-        // Disabling snapshot because it doesn't show the error message
-        // until after the user interacts with this field.
-        disableSnapshot: 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={setValue}
-            onKeyDown={handleKeyDown}
-            required="This specific field is super required."
-        />
-    );
-};
-
-RequiredWithSpecifiedText.parameters = {
-    docs: {
-        storyDescription: `If a string is passed into the \`required\` prop,
-        the specified message will show when the field is left blank.
-        Type in the field, then backspace all the way and click out of
-        the field to see this message. Note that this message would not
-        appear if the \`validation\` prop were set.`,
-    },
-    chromatic: {
-        // Disabling snapshot because it doesn't show the error message
-        // until after the user interacts with this field.
-        disableSnapshot: true,
-    },
-};
-
-export const Number: StoryComponentType = () => {
-    const [value, setValue] = React.useState("18");
-
-    const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
-        if (event.key === "Enter") {
-            event.currentTarget.blur();
-        }
-    };
-
-    return (
-        <LabeledTextField
-            label="Age"
-            type="number"
-            description="Please enter your age"
-            value={value}
-            onChange={setValue}
-            placeholder="Age"
-            onKeyDown={handleKeyDown}
-        />
-    );
-};
-
-Number.parameters = {
-    docs: {
-        storyDescription:
-            "An input field with type `number` will only take numeric characters as input.",
-    },
-};
-
-export const Password: StoryComponentType = () => {
-    const [value, setValue] = React.useState("$ecure123");
-
-    const validate = (value: string) => {
-        if (value.length < 8) {
-            return "Password must be at least 8 characters long";
-        }
-        if (!/\d/.test(value)) {
-            return "Password must contain a numeric value";
-        }
-    };
-
-    const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
-        if (event.key === "Enter") {
-            event.currentTarget.blur();
-        }
-    };
-
-    return (
-        <LabeledTextField
-            label="Password"
-            type="password"
-            description="Please enter a secure password"
-            value={value}
-            onChange={setValue}
-            placeholder="Password"
-            validate={validate}
-            onKeyDown={handleKeyDown}
-        />
-    );
-};
-
-Password.parameters = {
-    docs: {
-        storyDescription: `An input field with type \`password\` will
-        obscure the input value. It also often contains validation.
-        In this example, the password must be over 8 characters long and
-        must contain a numeric value.`,
-    },
-};
-
-export const Email: StoryComponentType = () => {
-    const [value, setValue] = React.useState("khan@khan.org");
-
-    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"
-            value={value}
-            onChange={setValue}
-            description="Please provide your personal email"
-            placeholder="Email"
-            validate={validate}
-            onKeyDown={handleKeyDown}
-        />
-    );
-};
-
-Email.parameters = {
-    docs: {
-        storyDescription: `An input field with type \`email\` will automatically
-        validate an input on submit to ensure it's either formatted properly
-        or blank. \`TextField\` will run validation on blur if the
-        \`validate\` prop is passed in, as in this example.`,
-    },
-};
-
-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={setValue}
-            description="Please provide your personal email"
-            value={value}
-            validate={validate}
-            onKeyDown={handleKeyDown}
-            required={true}
-        />
-    );
-};
-
-EmailRequired.parameters = {
-    docs: {
-        storyDescription: `An example of a required field that also has
-        a \`validation\` prop passed in. \`required\` can be a boolean or
-        a string. In this case, \`required\` is set to \`true\` since a
-        string would not even be used if it were passed in because the
-        validation overrides it.`,
-    },
-    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) => {
-        const telRegex = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
-        if (!telRegex.test(value)) {
-            return "Invalid US telephone number";
-        }
-    };
-
-    const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
-        if (event.key === "Enter") {
-            event.currentTarget.blur();
-        }
-    };
-
-    return (
-        <LabeledTextField
-            label="Telephone"
-            type="tel"
-            value={value}
-            onChange={setValue}
-            description="Please provide your personal phone number"
-            placeholder="Telephone"
-            validate={validate}
-            onKeyDown={handleKeyDown}
-        />
-    );
-};
-
-Telephone.parameters = {
-    docs: {
-        storyDescription: `An input field with type \`tel\` will NOT
-        validate an input on submit by default as telephone numbers
-        can vary considerably. \`TextField\` will run validation on blur
-        if the \`validate\` prop is passed in, as in this example.`,
-    },
-};
-
-export const Error: StoryComponentType = () => {
-    const [value, setValue] = React.useState("khan");
-
-    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"
-            value={value}
-            onChange={setValue}
-            description="Please provide your personal email"
-            placeholder="Email"
-            validate={validate}
-            onKeyDown={handleKeyDown}
-        />
-    );
-};
-
-Error.parameters = {
-    docs: {
-        storyDescription: `If an input value fails validation,
-        \`TextField\` will have error styling.`,
-    },
-};
-
-export const Light: StoryComponentType = () => {
-    const [value, setValue] = React.useState("");
-
-    const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
-        if (event.key === "Enter") {
-            event.currentTarget.blur();
-        }
-    };
-
-    return (
-        <View style={styles.darkBackground}>
-            <LabeledTextField
-                label={
-                    <LabelMedium style={styles.whiteColor}>Name</LabelMedium>
-                }
-                description={
-                    <LabelSmall style={styles.offWhiteColor}>
-                        Please enter your name
-                    </LabelSmall>
-                }
-                value={value}
-                onChange={setValue}
-                placeholder="Name"
-                light={true}
-                onKeyDown={handleKeyDown}
-            />
-        </View>
-    );
-};
-
-Light.parameters = {
-    docs: {
-        storyDescription: `If the \`light\` prop is set to true, the
-        underlying \`TextField\` will have a light border when focused.
-        This is intended to be used on a dark background. There is also a
-        specific light styling for the error state, as seen in the
-        \`ErrorLight\` story.`,
-    },
-};
-
-export const ErrorLight: StoryComponentType = () => {
-    const [value, setValue] = React.useState("khan");
-
-    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 (
-        <View style={styles.darkBackground}>
-            <LabeledTextField
-                label={
-                    <LabelMedium style={styles.whiteColor}>Email</LabelMedium>
-                }
-                description={
-                    <LabelSmall style={styles.offWhiteColor}>
-                        Please provide your personal email
-                    </LabelSmall>
-                }
-                type="email"
-                value={value}
-                light={true}
-                onChange={setValue}
-                placeholder="Email"
-                validate={validate}
-                onKeyDown={handleKeyDown}
-            />
-        </View>
-    );
-};
-
-ErrorLight.parameters = {
-    docs: {
-        storyDescription: `If an input value fails validation and the
-        \`light\` prop is true, \`TextField\` will have light error styling.`,
-    },
-};
-
-export const Disabled: StoryComponentType = () => (
-    <LabeledTextField
-        label="Name"
-        description="Please enter your name"
-        value=""
-        onChange={() => {}}
-        placeholder="Name"
-        disabled={true}
-    />
-);
-
-Disabled.parameters = {
-    docs: {
-        storyDescription: `If the \`disabled\` prop is set to true,
-        \`TextField\` will have disabled styling and will not be interactable.`,
-    },
-};
-
-export const CustomStyle: StoryComponentType = () => {
-    const [firstName, setFirstName] = React.useState("");
-    const [lastName, setLastName] = React.useState("");
-
-    const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
-        if (event.key === "Enter") {
-            event.currentTarget.blur();
-        }
-    };
-
-    return (
-        <View style={styles.row}>
-            <LabeledTextField
-                label="First name"
-                description="Please enter your first name"
-                value={firstName}
-                onChange={setFirstName}
-                placeholder="Khan"
-                style={styles.grow}
-                onKeyDown={handleKeyDown}
-            />
-            <Strut size={Spacing.xLarge_32} />
-            <LabeledTextField
-                label="Last name"
-                description="Please enter your last name"
-                value={lastName}
-                onChange={setLastName}
-                placeholder="Academy"
-                style={styles.grow}
-                onKeyDown={handleKeyDown}
-            />
-        </View>
-    );
-};
-
-CustomStyle.parameters = {
-    docs: {
-        storyDescription: `\`LabeledTextField\` can take in custom styles that
-        override the default styles. In this example, each field has the
-        style property \`flexGrow: 1\``,
-    },
-};
-
-export const WithMarkup: StoryComponentType = (args) => {
-    return (
-        <LabeledTextField
-            {...args}
-            label="Name"
-            description={
-                <span>
-                    Description with <strong>strong</strong> text and a{" "}
-                    <Link href="/path/to/resource">link</Link>
-                </span>
-            }
-        />
-    );
-};
-
-WithMarkup.parameters = {
-    docs: {
-        storyDescription: `\`LabeledTextField\`'s \`label\` and \`description\` props
-        can accept \`React.Node\`s.  This is helpful when you need to decorate or use
-        specific elements in your form field (e.g. including Popovers, Tooltips or
-        emphasized text)`,
-    },
-};
-
-export const Ref: StoryComponentType = () => {
-    const [value, setValue] = React.useState("Khan");
-    const inputRef = React.createRef();
-
-    const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
-        if (event.key === "Enter") {
-            event.currentTarget.blur();
-        }
-    };
-
-    const handleSubmit = () => {
-        if (inputRef.current) {
-            inputRef.current.focus();
-        }
-    };
-
-    return (
-        <View>
-            <LabeledTextField
-                label="Name"
-                description="Please enter your name"
-                value={value}
-                onChange={setValue}
-                placeholder="Name"
-                onKeyDown={handleKeyDown}
-                ref={inputRef}
-            />
-            <Strut size={Spacing.medium_16} />
-            <Button style={styles.button} onClick={handleSubmit}>
-                Focus Input
-            </Button>
-        </View>
-    );
-};
-
-Ref.parameters = {
-    docs: {
-        storyDescription: `If you need to save a reference to the input
-        field, you can do so by using the \`ref\` prop. In this example,
-        we want the input field to receive focus when the button is
-        pressed. We can do this by creating a React ref of type
-        \`HTMLInputElement\` and passing it into \`TextField\`'s \`ref\` prop.
-        Now we can use the ref variable in the \`handleSubmit\` function to
-        shift focus to the field.`,
-        chromatic: {
-            // Disabling snapshot because this is testing interaction,
-            // not visuals.
-            disableSnapshot: true,
-        },
-    },
-};
-
-export const ReadOnly: StoryComponentType = () => {
-    const [value, setValue] = React.useState("Khan");
-
-    const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
-        if (event.key === "Enter") {
-            event.currentTarget.blur();
-        }
-    };
-
-    return (
-        <LabeledTextField
-            label="Read Only"
-            description="This is a read-only field."
-            value={value}
-            onChange={setValue}
-            placeholder="Name"
-            onKeyDown={handleKeyDown}
-            readOnly={true}
-        />
-    );
-};
-
-ReadOnly.parameters = {
-    docs: {
-        storyDescription: `An input field with the prop \`readOnly\` set
-        to true is not interactable. It looks the same as if it were not
-        read only, and it can still receive focus, but the interaction
-        point will not appear and the input will not change.`,
-        chromatic: {
-            // Disabling snapshot because this is testing interaction,
-            // not visuals.
-            disableSnapshot: true,
-        },
-    },
-};
-
-export const AutoComplete: StoryComponentType = () => {
-    const [value, setValue] = React.useState("");
-
-    const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
-        if (event.key === "Enter") {
-            event.currentTarget.blur();
-        }
-    };
-
-    return (
-        <form>
-            <LabeledTextField
-                label="Name"
-                description="Please enter your name."
-                value={value}
-                onChange={setValue}
-                placeholder="Name"
-                onKeyDown={handleKeyDown}
-                style={styles.fieldWithButton}
-                autoComplete="name"
-            />
-            <Button type="submit">Submit</Button>
-        </form>
-    );
-};
-
-AutoComplete.parameters = {
-    docs: {
-        storyDescription: `If \`TextField\`'s \`autocomplete\` prop is set,
-        the browser can predict values for the input. When the user starts
-        to type in the field, a list of options will show up based on
-        values that may have been submitted at a previous time.
-        In this example, the text field provides options after you
-        input a value, press the submit button, and refresh the page.`,
-        chromatic: {
-            // Disabling snapshot because this is testing interaction,
-            // not visuals.
-            disableSnapshot: true,
-        },
-    },
-};
-
-const styles = StyleSheet.create({
-    darkBackground: {
-        background: Color.darkBlue,
-        padding: `${Spacing.medium_16}px`,
-    },
-    whiteColor: {
-        color: Color.white,
-    },
-    offWhiteColor: {
-        color: Color.white64,
-    },
-    button: {
-        maxWidth: 150,
-    },
-    row: {
-        flexDirection: "row",
-    },
-    grow: {
-        flexGrow: 1,
-    },
-    fieldWithButton: {
-        marginBottom: Spacing.medium_16,
-    },
-});