@khanacademy/wonder-blocks-form 2.2.1

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

@@ -0,0 +1,359 @@
+// @flow
+import * as React from "react";
+
+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 {StyleSheet} from "aphrodite";
+
+import type {StoryComponentType} from "@storybook/react";
+
+export default {
+    title: "Form / LabeledTextField",
+};
+
+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}
+        />
+    );
+};
+
+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={(newValue) => setValue(newValue)}
+            placeholder="Age"
+            onKeyDown={handleKeyDown}
+        />
+    );
+};
+
+export const password: StoryComponentType = () => {
+    const [value, setValue] = React.useState("Password123");
+
+    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={(newValue) => setValue(newValue)}
+            placeholder="Password"
+            validate={validate}
+            onKeyDown={handleKeyDown}
+        />
+    );
+};
+
+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={(newValue) => setValue(newValue)}
+            description="Please provide your personal email"
+            placeholder="Email"
+            validate={validate}
+            onKeyDown={handleKeyDown}
+        />
+    );
+};
+
+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={(newValue) => setValue(newValue)}
+            description="Please provide your personal phone number"
+            placeholder="Telephone"
+            validate={validate}
+            onKeyDown={handleKeyDown}
+        />
+    );
+};
+
+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={(newValue) => setValue(newValue)}
+            description="Please provide your personal email"
+            placeholder="Email"
+            validate={validate}
+            onKeyDown={handleKeyDown}
+        />
+    );
+};
+
+export const disabled: StoryComponentType = () => (
+    <LabeledTextField
+        label="Name"
+        description="Please enter your name"
+        value=""
+        onChange={() => {}}
+        placeholder="Name"
+        disabled={true}
+    />
+);
+
+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={(newValue) => setValue(newValue)}
+                placeholder="Name"
+                light={true}
+                onKeyDown={handleKeyDown}
+            />
+        </View>
+    );
+};
+
+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={(newValue) => setFirstName(newValue)}
+                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={(newValue) => setLastName(newValue)}
+                placeholder="Academy"
+                style={styles.grow}
+                onKeyDown={handleKeyDown}
+            />
+        </View>
+    );
+};
+
+export const ref: StoryComponentType = () => {
+    const [value, setValue] = React.useState("Khan");
+    const inputRef = React.createRef<HTMLInputElement>();
+
+    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={(newValue) => setValue(newValue)}
+                placeholder="Name"
+                onKeyDown={handleKeyDown}
+                ref={inputRef}
+            />
+            <Strut size={Spacing.medium_16} />
+            <Button style={styles.button} onClick={handleSubmit}>
+                Focus Input
+            </Button>
+        </View>
+    );
+};
+
+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={(newValue) => setValue(newValue)}
+            placeholder="Name"
+            onKeyDown={handleKeyDown}
+            readOnly={true}
+        />
+    );
+};
+
+export const autoComplete: 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)}
+            placeholder="Name"
+            onKeyDown={handleKeyDown}
+            autoComplete="name"
+        />
+    );
+};
+
+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,
+    },
+});

package/src/components/radio-core.js

@@ -0,0 +1,176 @@
+// @flow
+
+import * as React from "react";
+import {StyleSheet} from "aphrodite";
+
+import Color, {mix, fade} from "@khanacademy/wonder-blocks-color";
+import {addStyle} from "@khanacademy/wonder-blocks-core";
+
+import type {ChoiceCoreProps} from "../util/types.js";
+
+type Props = {|
+    ...ChoiceCoreProps,
+    hovered: boolean,
+    focused: boolean,
+    pressed: boolean,
+    waiting: boolean,
+|};
+
+const {blue, red, white, offWhite, offBlack16, offBlack32, offBlack50} = Color;
+
+const StyledInput = addStyle("input");
+
+/**
+ * The internal stateless 🔘 Radio button
+ */ export default class RadioCore extends React.Component<Props> {
+    handleChange: () => void = () => {
+        // Empty because change is handled by ClickableBehavior
+        return;
+    };
+
+    render(): React.Node {
+        const {
+            checked,
+            disabled,
+            error,
+            groupName,
+            id,
+            testId,
+            hovered,
+            focused,
+            pressed,
+            waiting: _,
+            ...sharedProps
+        } = this.props;
+        const stateStyles = _generateStyles(checked, error);
+        const defaultStyle = [
+            sharedStyles.inputReset,
+            sharedStyles.default,
+            stateStyles.default,
+            !disabled &&
+                (pressed
+                    ? stateStyles.active
+                    : (hovered || focused) && stateStyles.focus),
+            disabled && sharedStyles.disabled,
+        ];
+        const props = {
+            "data-test-id": testId,
+        };
+        return (
+            <React.Fragment>
+                <StyledInput
+                    {...sharedProps}
+                    type="radio"
+                    aria-invalid={error}
+                    checked={checked}
+                    disabled={disabled}
+                    id={id}
+                    name={groupName}
+                    // Need to specify because this is a controlled React form
+                    // component, but we handle the click via ClickableBehavior
+                    onChange={this.handleChange}
+                    style={defaultStyle}
+                    {...props}
+                />
+                {disabled && checked && <span style={disabledChecked} />}
+            </React.Fragment>
+        );
+    }
+}
+const size = 16; // circle with a different color. Here, we add that center circle. // If the checkbox is disabled and selected, it has a border but also an inner
+const disabledChecked = {
+    position: "absolute",
+    top: size / 4,
+    left: size / 4,
+    height: size / 2,
+    width: size / 2,
+    borderRadius: "50%",
+    backgroundColor: offBlack32,
+};
+const sharedStyles = StyleSheet.create({
+    // Reset the default styled input element
+    inputReset: {
+        appearance: "none",
+        WebkitAppearance: "none",
+        MozAppearance: "none",
+    },
+    default: {
+        height: size,
+        width: size,
+        minHeight: size,
+        minWidth: size,
+        margin: 0,
+        outline: "none",
+        boxSizing: "border-box",
+        borderStyle: "solid",
+        borderWidth: 1,
+        borderRadius: "50%",
+    },
+    disabled: {
+        cursor: "auto",
+        backgroundColor: offWhite,
+        borderColor: offBlack16,
+        borderWidth: 1,
+    },
+});
+const fadedBlue = mix(fade(blue, 0.16), white);
+const activeBlue = mix(offBlack32, blue);
+const fadedRed = mix(fade(red, 0.08), white);
+const activeRed = mix(offBlack32, red);
+const colors = {
+    default: {
+        faded: fadedBlue,
+        base: blue,
+        active: activeBlue,
+    },
+    error: {
+        faded: fadedRed,
+        base: red,
+        active: activeRed,
+    },
+};
+const styles = {};
+const _generateStyles = (checked, error) => {
+    // "hash" the parameters
+    const styleKey = `${String(checked)}-${String(error)}`;
+    if (styles[styleKey]) {
+        return styles[styleKey];
+    }
+    const palette = error ? colors.error : colors.default;
+    let newStyles = {};
+    if (checked) {
+        newStyles = {
+            default: {
+                backgroundColor: white,
+                borderColor: palette.base,
+                borderWidth: size / 4,
+            },
+            focus: {
+                boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.base}`,
+            },
+            active: {
+                boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.active}`,
+                borderColor: palette.active,
+            },
+        };
+    } else {
+        newStyles = {
+            default: {
+                backgroundColor: error ? fadedRed : white,
+                borderColor: error ? red : offBlack50,
+            },
+            focus: {
+                backgroundColor: error ? fadedRed : white,
+                borderColor: palette.base,
+                borderWidth: 2,
+            },
+            active: {
+                backgroundColor: palette.faded,
+                borderColor: error ? activeRed : blue,
+                borderWidth: 2,
+            },
+        };
+    }
+    styles[styleKey] = StyleSheet.create(newStyles);
+    return styles[styleKey];
+};

package/src/components/radio-group.js

@@ -0,0 +1,142 @@
+// @flow
+
+import * as React from "react";
+
+import {View, addStyle} from "@khanacademy/wonder-blocks-core";
+import {Strut} from "@khanacademy/wonder-blocks-layout";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {LabelMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
+
+import styles from "./group-styles.js";
+import typeof Choice from "./choice.js";
+
+// Keep synced with RadioGroupProps in ../util/types.js
+type RadioGroupProps = {|
+    /**
+     * Children should be Choice components.
+     */
+    children: Array<React.Element<Choice>>,
+
+    /**
+     * Group name for this checkbox or radio group. Should be unique for all
+     * such groups displayed on a page.
+     */
+    groupName: string,
+
+    /**
+     * Optional label for the group. This label is optional to allow for
+     * greater flexibility in implementing checkbox and radio groups.
+     */
+    label?: string,
+
+    /**
+     * Optional description for the group.
+     */
+    description?: string,
+
+    /**
+     * Optional error message. If supplied, the group will be displayed in an
+     * error state, along with this error message. If no error state is desired,
+     * simply do not supply this prop, or pass along null.
+     */
+    errorMessage?: string,
+
+    /**
+     * Custom styling for this group of checkboxes.
+     */
+    style?: StyleType,
+
+    /**
+     * Callback for when the selected value of the radio group has changed.
+     */
+    onChange: (selectedValue: string) => mixed,
+
+    /**
+     * Value of the selected radio item.
+     */
+    selectedValue: string,
+
+    /**
+     * Test ID used for e2e testing.
+     */
+    testId?: string,
+|};
+
+const StyledFieldset = addStyle<"fieldset">("fieldset");
+const StyledLegend = addStyle<"legend">("legend");
+
+/**
+ * A radio group allows only single selection. Like CheckboxGroup, this
+ * component auto-populates many props for its children Choice components. The
+ * Choice component is exposed for the user to apply custom styles or to
+ * indicate which choices are disabled. The use of the groupName prop is
+ * important to maintain expected keyboard navigation behavior for
+ * accessibility.
+ */
+export default class RadioGroup extends React.Component<RadioGroupProps> {
+    handleChange(changedValue: string) {
+        this.props.onChange(changedValue);
+    }
+
+    render(): React.Node {
+        const {
+            children,
+            label,
+            description,
+            errorMessage,
+            groupName,
+            selectedValue,
+            style,
+            testId,
+        } = this.props;
+
+        return (
+            <StyledFieldset data-test-id={testId} style={styles.fieldset}>
+                {/* We have a View here because fieldset cannot be used with flexbox*/}
+                <View style={style}>
+                    {label && (
+                        <StyledLegend style={styles.legend}>
+                            <LabelMedium>{label}</LabelMedium>
+                        </StyledLegend>
+                    )}
+                    {description && (
+                        <LabelSmall style={styles.description}>
+                            {description}
+                        </LabelSmall>
+                    )}
+                    {errorMessage && (
+                        <LabelSmall style={styles.error}>
+                            {errorMessage}
+                        </LabelSmall>
+                    )}
+                    {(label || description || errorMessage) && (
+                        <Strut size={Spacing.small_12} />
+                    )}
+
+                    {React.Children.map(children, (child, index) => {
+                        const {style, value} = child.props;
+                        const checked = selectedValue === value;
+                        return (
+                            <React.Fragment>
+                                {React.cloneElement(child, {
+                                    checked: checked,
+                                    error: !!errorMessage,
+                                    groupName: groupName,
+                                    id: `${groupName}-${value}`,
+                                    key: value,
+                                    onChange: () => this.handleChange(value),
+                                    style: [
+                                        index > 0 && styles.defaultLineGap,
+                                        style,
+                                    ],
+                                    variant: "radio",
+                                })}
+                            </React.Fragment>
+                        );
+                    })}
+                </View>
+            </StyledFieldset>
+        );
+    }
+}