@khanacademy/wonder-blocks-form 2.2.1

package/src/components/radio-group.md

@@ -0,0 +1,129 @@
+This example has a disabled item. Selecting the last item results in an error
+state for the entire group.
+
+Try out the keyboard navigation! Use up/left and down/right to navigate among
+the choices, and use tab to navigate between this radio group and the rest of
+the page.
+
+```js
+import {Choice, RadioGroup} from "@khanacademy/wonder-blocks-form";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {StyleSheet} from "aphrodite";
+
+const styles = StyleSheet.create({
+    wrapper: {
+        width: 300,
+    },
+});
+
+class RadioGroupPokemonExample extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            selectedValue: null,
+        };
+        this.handleChange = this.handleChange.bind(this);
+    }
+
+    handleChange(change) {
+        console.log(`${change} was selected!`);
+        const error = this.checkForError(change);
+        this.setState({
+            selectedValue: change,
+            error: error,
+        });
+    }
+
+    checkForError(input) {
+        if (input === "infiltrator") {
+            return "Superman isn't a Pokemon!";
+        }
+    }
+
+    render() {
+        return <RadioGroup
+            label="Choose a starter!"
+            description="Your first Pokemon"
+            errorMessage={this.state.error}
+            groupName="Pokemon"
+            onChange={this.handleChange}
+            selectedValue={this.state.selectedValue}
+        >
+            <Choice label="Bulbasaur" value="bulb" />
+            <Choice label="Charmander" value="char" description="Oops, we ran out of Charmanders" disabled />
+            <Choice label="Squirtle" value="squirt" />
+            <Choice label="Pikachu" value="pika" />
+            <Choice label="Superman" value="infiltrator" />
+        </RadioGroup>
+    }
+}
+<View style={styles.wrapper}>
+    <RadioGroupPokemonExample />
+</View>
+```
+
+This example shows how to use custom styling to change the appearance of the
+radio group to look more like a multiple choice question.
+
+```js
+import {Choice, RadioGroup} from "@khanacademy/wonder-blocks-form";
+import {View} from "@khanacademy/wonder-blocks-core";
+import Color from "@khanacademy/wonder-blocks-color";
+import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
+import {StyleSheet} from "aphrodite";
+
+const styles = StyleSheet.create({
+    wrapper: {
+        width: 650,
+    },
+    choice: {
+        margin: 0,
+        height: 48,
+        borderTop: "solid 1px #CCC",
+        justifyContent: "center",
+        ":last-child": {
+            borderBottom: "solid 1px #CCC",
+        },
+    },
+    prompt: {
+        marginBottom: 16,
+    },
+});
+
+class ClassSelectorExample extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            selectedValue: null,
+        };
+        this.handleChange = this.handleChange.bind(this);
+    }
+
+    handleChange(change) {
+        console.log(`${change} was selected!`);
+        this.setState({
+            selectedValue: change,
+        });
+    }
+
+    render() {
+        return <RadioGroup
+            groupName="science-classes"
+            onChange={this.handleChange}
+            selectedValue={this.state.selectedValue}
+        >
+            <Choice label="A" value="1" style={styles.choice} />
+            <Choice label="B" value="2" style={styles.choice} />
+            <Choice label="AB" value="3" style={styles.choice} />
+            <Choice label="O" value="4" style={styles.choice} />
+        </RadioGroup>
+    }
+}
+
+<View>
+    <LabelLarge style={styles.prompt}>
+        Select your blood type
+    </LabelLarge>
+    <ClassSelectorExample />
+</View>
+```

package/src/components/radio.js

@@ -0,0 +1,93 @@
+// @flow
+
+import * as React from "react";
+
+import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
+import ChoiceInternal from "./choice-internal.js";
+
+// Keep synced with ChoiceComponentProps in ../util/types.js
+type ChoiceComponentProps = {|
+    ...AriaProps,
+
+    /**
+     * Whether this component is checked
+     */
+    checked: boolean,
+
+    /**
+     * Whether this component is disabled
+     */
+    disabled: boolean,
+
+    /**
+     * Whether this component should show an error state
+     */
+    error: boolean,
+
+    /**
+     * Callback when this component is selected. The newCheckedState is the
+     * new checked state of the component.
+     */
+    onChange: (newCheckedState: boolean) => mixed,
+
+    /**
+     * Optional label for the field.
+     */
+    label?: string,
+
+    /**
+     * Optional description for the field.
+     */
+    description?: string,
+
+    /**
+     * Unique identifier attached to the HTML input element. If used, need to
+     * guarantee that the ID is unique within everything rendered on a page.
+     * Used to match `<label>` with `<input>` elements for screenreaders.
+     */
+    id?: string,
+
+    /**
+     * Optional styling for the container. Does not style the component.
+     */
+    style?: StyleType,
+
+    /**
+     * Adds CSS classes to the Checkbox.
+     */
+    className?: string,
+
+    /**
+     * Optional test ID for e2e testing
+     */
+    testId?: string,
+
+    /**
+     * Name for the checkbox or radio button group. Only applicable for group
+     * contexts, auto-populated by group components via Choice.
+     * @ignore
+     */
+    groupName?: string,
+|};
+
+type DefaultProps = {|
+    disabled: $PropertyType<ChoiceComponentProps, "disabled">,
+    error: $PropertyType<ChoiceComponentProps, "error">,
+|};
+
+/**
+ * 🔘 A nicely styled radio button for all your non-AMFM radio button needs. Can
+ * optionally take label and description props.
+ *
+ * This component should not really be used by itself because radio buttons are
+ * often grouped together. See RadioGroup.
+ */ export default class Radio extends React.Component<ChoiceComponentProps> {
+    static defaultProps: DefaultProps = {
+        disabled: false,
+        error: false,
+    };
+
+    render(): React.Node {
+        return <ChoiceInternal variant="radio" {...this.props} />;
+    }
+}

package/src/components/radio.md

@@ -0,0 +1,26 @@
+The radio button has various styles for clickable states. Here are sets of default radio buttons, radio buttons in an error state, and disabled radio buttons.
+```js
+import {View} from "@khanacademy/wonder-blocks-core";
+import {Radio} from "@khanacademy/wonder-blocks-form";
+import {StyleSheet} from "aphrodite";
+
+const styles = StyleSheet.create({
+    row: {
+        flexDirection: "row",
+    },
+    marginRight: {
+        marginRight: 16,
+    }
+});
+
+const handleChange = (checked) => console.log(`clicked on radio, will be checked=${checked.toString()}`);
+
+<View style={styles.row}>
+    <Radio error={false} checked={false} style={styles.marginRight} onChange={handleChange} />
+    <Radio error={false} checked={true} style={styles.marginRight} onChange={handleChange} />
+    <Radio error={true} checked={false} style={styles.marginRight} onChange={handleChange} />
+    <Radio error={true} checked={true} style={styles.marginRight} onChange={handleChange} />
+    <Radio disabled={true} checked={false} style={styles.marginRight} onChange={handleChange} />
+    <Radio disabled={true} checked={true} style={styles.marginRight} onChange={handleChange} />
+</View>
+```

package/src/components/text-field.js

@@ -0,0 +1,326 @@
+// @flow
+
+import * as React from "react";
+import {StyleSheet, css} from "aphrodite";
+
+import Color, {mix, fade} from "@khanacademy/wonder-blocks-color";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography";
+import type {StyleType, AriaProps} from "@khanacademy/wonder-blocks-core";
+
+export type TextFieldType = "text" | "password" | "email" | "number" | "tel";
+
+type WithForwardRef = {|forwardedRef: React.Ref<"input">|};
+
+type Props = {|
+    ...AriaProps,
+
+    /**
+     * The unique identifier for the input.
+     */
+    id: string,
+
+    /**
+     * Determines the type of input. Defaults to text.
+     */
+    type: TextFieldType,
+
+    /**
+     * The input value.
+     */
+    value: string,
+
+    /**
+     * Makes a read-only input field that cannot be focused. Defaults to false.
+     */
+    disabled: boolean,
+
+    /**
+     * Provide a validation for the input value.
+     * Return a string error message or null | void for a valid input.
+     */
+    validate?: (value: string) => ?string,
+
+    /**
+     * Called right after the TextField input is validated.
+     */
+    onValidate?: (errorMessage: ?string) => mixed,
+
+    /**
+     * Called when the value has changed.
+     */
+    onChange: (newValue: string) => mixed,
+
+    /**
+     * Called when a key is pressed.
+     */
+    onKeyDown?: (event: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
+
+    /**
+     * Called when the element has been focused.
+     */
+    onFocus?: (event: SyntheticFocusEvent<HTMLInputElement>) => mixed,
+
+    /**
+     * Called when the element has been blurred.
+     */
+    onBlur?: (event: SyntheticFocusEvent<HTMLInputElement>) => mixed,
+
+    /**
+     * Provide hints or examples of what to enter.
+     */
+    placeholder?: string,
+
+    /**
+     * Whether this component is required.
+     */
+    required?: boolean,
+
+    /**
+     * Change the default focus ring color to fit a dark background.
+     */
+    light: boolean,
+
+    /**
+     * Custom styles for the input.
+     */
+    style?: StyleType,
+
+    /**
+     * Optional test ID for e2e testing.
+     */
+    testId?: string,
+
+    /**
+     * Specifies if the input field is read-only.
+     */
+    readOnly?: boolean,
+
+    /**
+     * Specifies if the input field allows autocomplete.
+     */
+    autoComplete?: string,
+|};
+
+type PropsWithForwardRef = {|
+    ...Props,
+    ...WithForwardRef,
+|};
+
+type DefaultProps = {|
+    type: $PropertyType<PropsWithForwardRef, "type">,
+    disabled: $PropertyType<PropsWithForwardRef, "disabled">,
+    light: $PropertyType<PropsWithForwardRef, "light">,
+|};
+
+type State = {|
+    /**
+     * Displayed when the validation fails.
+     */
+    error: ?string,
+
+    /**
+     * The user focuses on this field.
+     */
+    focused: boolean,
+|};
+
+// TODO(WB-1081): Change class name back to TextField after Styleguidist is gone.
+/**
+ * A TextField is an element used to accept a single line of text from the user.
+ */
+class TextFieldInternal extends React.Component<PropsWithForwardRef, State> {
+    static defaultProps: DefaultProps = {
+        type: "text",
+        disabled: false,
+        light: false,
+    };
+
+    constructor(props: PropsWithForwardRef) {
+        super(props);
+        if (props.validate) {
+            // Ensures error is updated on unmounted server-side renders
+            this.state.error = props.validate(props.value) || null;
+        }
+    }
+
+    state: State = {
+        error: null,
+        focused: false,
+    };
+
+    componentDidMount() {
+        this.maybeValidate(this.props.value);
+    }
+
+    maybeValidate: (newValue: string) => void = (newValue) => {
+        const {validate, onValidate} = this.props;
+        if (validate) {
+            const maybeError = validate(newValue) || null;
+            this.setState({error: maybeError}, () => {
+                if (onValidate) {
+                    onValidate(maybeError);
+                }
+            });
+        }
+    };
+
+    handleChange: (event: SyntheticInputEvent<HTMLInputElement>) => mixed = (
+        event,
+    ) => {
+        const {onChange} = this.props;
+        const newValue = event.target.value;
+        this.maybeValidate(newValue);
+        onChange(newValue);
+    };
+
+    handleFocus: (event: SyntheticFocusEvent<HTMLInputElement>) => mixed = (
+        event,
+    ) => {
+        const {onFocus} = this.props;
+        this.setState({focused: true}, () => {
+            if (onFocus) {
+                onFocus(event);
+            }
+        });
+    };
+
+    handleBlur: (event: SyntheticFocusEvent<HTMLInputElement>) => mixed = (
+        event,
+    ) => {
+        const {onBlur} = this.props;
+        this.setState({focused: false}, () => {
+            if (onBlur) {
+                onBlur(event);
+            }
+        });
+    };
+
+    render(): React.Node {
+        const {
+            id,
+            type,
+            value,
+            disabled,
+            onKeyDown,
+            placeholder,
+            required,
+            light,
+            style,
+            testId,
+            readOnly,
+            autoComplete,
+            forwardedRef,
+            // The following props are being included here to avoid
+            // passing them down to the otherProps spread
+            /* eslint-disable no-unused-vars */
+            onFocus,
+            onBlur,
+            onValidate,
+            validate,
+            onChange,
+            /* eslint-enable no-unused-vars */
+            // Should only include Aria related props
+            ...otherProps
+        } = this.props;
+        return (
+            <input
+                className={css([
+                    styles.input,
+                    typographyStyles.LabelMedium,
+                    styles.default,
+                    // Prioritizes disabled, then focused, then error (if any)
+                    disabled
+                        ? styles.disabled
+                        : this.state.focused
+                        ? [styles.focused, light && styles.defaultLight]
+                        : this.state.error && [
+                              styles.error,
+                              light && styles.errorLight,
+                          ],
+                    style && style,
+                ])}
+                id={id}
+                type={type}
+                placeholder={placeholder}
+                value={value}
+                disabled={disabled}
+                onChange={this.handleChange}
+                onKeyDown={onKeyDown}
+                onFocus={this.handleFocus}
+                onBlur={this.handleBlur}
+                required={required}
+                data-test-id={testId}
+                readOnly={readOnly}
+                autoComplete={autoComplete}
+                ref={forwardedRef}
+                {...otherProps}
+            />
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    input: {
+        width: "100%",
+        height: 40,
+        borderRadius: 4,
+        boxSizing: "border-box",
+        paddingLeft: Spacing.medium_16,
+        margin: 0,
+        outline: "none",
+        boxShadow: "none",
+    },
+    default: {
+        background: Color.white,
+        border: `1px solid ${Color.offBlack16}`,
+        color: Color.offBlack,
+        "::placeholder": {
+            color: Color.offBlack64,
+        },
+    },
+    error: {
+        background: `${mix(fade(Color.red, 0.06), Color.white)}`,
+        border: `1px solid ${Color.red}`,
+        color: Color.offBlack,
+        "::placeholder": {
+            color: Color.offBlack64,
+        },
+    },
+    disabled: {
+        background: Color.offWhite,
+        border: `1px solid ${Color.offBlack16}`,
+        color: Color.offBlack64,
+        "::placeholder": {
+            color: Color.offBlack32,
+        },
+    },
+    focused: {
+        background: Color.white,
+        border: `1px solid ${Color.blue}`,
+        color: Color.offBlack,
+        "::placeholder": {
+            color: Color.offBlack64,
+        },
+    },
+    defaultLight: {
+        boxShadow: `0px 0px 0px 1px ${Color.blue}, 0px 0px 0px 2px ${Color.white}`,
+    },
+    errorLight: {
+        boxShadow: `0px 0px 0px 1px ${Color.red}, 0px 0px 0px 2px ${Color.white}`,
+    },
+});
+
+type ExportProps = $Diff<
+    React.ElementConfig<typeof TextFieldInternal>,
+    WithForwardRef,
+>;
+
+const TextField: React.AbstractComponent<
+    ExportProps,
+    HTMLInputElement,
+> = React.forwardRef<ExportProps, HTMLInputElement>((props, ref) => (
+    <TextFieldInternal {...props} forwardedRef={ref} />
+));
+
+export default TextField;