@khanacademy/wonder-blocks-form 2.2.1

package/src/components/__tests__/radio-group.test.js

@@ -0,0 +1,84 @@
+//@flow
+import * as React from "react";
+import {mount} from "enzyme";
+
+import RadioGroup from "../radio-group.js";
+import Choice from "../choice.js";
+
+describe("RadioGroup", () => {
+    let group;
+    const onChange = jest.fn();
+
+    beforeEach(() => {
+        group = mount(
+            <RadioGroup
+                label="Test"
+                description="test description"
+                groupName="test"
+                onChange={onChange}
+                selectedValue="a"
+            >
+                <Choice label="a" value="a" aria-labelledby="test-a" />
+                <Choice label="b" value="b" aria-labelledby="test-b" />
+                <Choice label="c" value="c" aria-labelledby="test-c" />
+            </RadioGroup>,
+        );
+    });
+
+    it("selects only one item at a time", () => {
+        const a = group.find(Choice).at(0);
+        const b = group.find(Choice).at(1);
+        const c = group.find(Choice).at(2);
+
+        // a starts off checked
+        expect(a.prop("checked")).toEqual(true);
+        expect(b.prop("checked")).toEqual(false);
+        expect(c.prop("checked")).toEqual(false);
+    });
+
+    it("changes selection when selectedValue changes", () => {
+        group.setProps({selectedValue: "b"});
+        const a = group.find(Choice).at(0);
+        const b = group.find(Choice).at(1);
+        const c = group.find(Choice).at(2);
+
+        // now b is checked
+        expect(a.prop("checked")).toEqual(false);
+        expect(b.prop("checked")).toEqual(true);
+        expect(c.prop("checked")).toEqual(false);
+    });
+
+    it("displays error state for all Choice children", () => {
+        group.setProps({errorMessage: "there's an error"});
+        const a = group.find(Choice).at(0);
+        const b = group.find(Choice).at(1);
+        const c = group.find(Choice).at(2);
+
+        expect(a.prop("error")).toEqual(true);
+        expect(b.prop("error")).toEqual(true);
+        expect(c.prop("error")).toEqual(true);
+    });
+
+    it("doesn't change when an already selected item is reselected", () => {
+        // a is already selected, onChange shouldn't be called
+        const a = group.find(Choice).at(0);
+        const aTarget = a.find("ClickableBehavior");
+        aTarget.simulate("click");
+        expect(onChange).toHaveBeenCalledTimes(0);
+
+        // now b is clicked, onChange should be called
+        const b = group.find(Choice).at(1);
+        const bTarget = b.find("ClickableBehavior");
+        bTarget.simulate("click");
+        expect(onChange).toHaveBeenCalledTimes(1);
+    });
+
+    it("checks that aria attributes have been added correctly", () => {
+        const a = group.find(Choice).at(0);
+        const b = group.find(Choice).at(1);
+        const c = group.find(Choice).at(2);
+        expect(a.find("input").prop("aria-labelledby")).toEqual("test-a");
+        expect(b.find("input").prop("aria-labelledby")).toEqual("test-b");
+        expect(c.find("input").prop("aria-labelledby")).toEqual("test-c");
+    });
+});

package/src/components/__tests__/text-field.test.js

@@ -0,0 +1,424 @@
+// @flow
+import * as React from "react";
+import {mount} from "enzyme";
+
+import TextField from "../text-field.js";
+
+const wait = (delay: number = 0) =>
+    new Promise((resolve, reject) => {
+        // eslint-disable-next-line no-restricted-syntax
+        return setTimeout(resolve, delay);
+    });
+
+describe("TextField", () => {
+    it("textfield is focused", () => {
+        // Arrange
+        const wrapper = mount(
+            <TextField id="tf-1" value="" onChange={() => {}} />,
+        );
+
+        // Act
+        wrapper.simulate("focus");
+
+        // Assert
+        expect(wrapper.find("TextFieldInternal")).toHaveState("focused", true);
+    });
+
+    it("onFocus is called after textfield is focused", () => {
+        // Arrange
+        const handleOnFocus = jest.fn(() => {});
+
+        const wrapper = mount(
+            <TextField
+                id={"tf-1"}
+                value="TextIsLongerThan8"
+                onChange={() => {}}
+                onFocus={handleOnFocus}
+            />,
+        );
+
+        // Act
+        wrapper.simulate("focus");
+
+        // Assert
+        expect(handleOnFocus).toHaveBeenCalled();
+    });
+
+    it("textfield is blurred", async () => {
+        // Arrange
+        const wrapper = mount(
+            <TextField id="tf-1" value="" onChange={() => {}} />,
+        );
+
+        // Act
+        wrapper.simulate("focus");
+        await wait(0);
+        wrapper.simulate("blur");
+
+        // Assert
+        expect(wrapper.find("TextFieldInternal")).toHaveState("focused", false);
+    });
+
+    it("onBlur is called after textfield is blurred", async () => {
+        // Arrange
+        const handleOnBlur = jest.fn(() => {});
+
+        const wrapper = mount(
+            <TextField
+                id={"tf-1"}
+                value="TextIsLongerThan8"
+                onChange={() => {}}
+                onBlur={handleOnBlur}
+            />,
+        );
+
+        // Act
+        wrapper.simulate("focus");
+        await wait(0);
+        wrapper.simulate("blur");
+
+        // Assert
+        expect(handleOnBlur).toHaveBeenCalled();
+    });
+
+    it("id prop is passed to the input element", () => {
+        // Arrange
+        const id: string = "tf-1";
+
+        // Act
+        const wrapper = mount(
+            <TextField id={id} value="" onChange={() => {}} />,
+        );
+
+        // Assert
+        const input = wrapper.find("input");
+        expect(input).toContainMatchingElement(`[id="${id}"]`);
+    });
+
+    it("type prop is passed to the input element", () => {
+        // Arrange
+        const type = "number";
+
+        // Act
+        const wrapper = mount(
+            <TextField id={"tf-1"} type={type} value="" onChange={() => {}} />,
+        );
+
+        // Assert
+        const input = wrapper.find("input");
+        expect(input).toContainMatchingElement(`[type="${type}"]`);
+    });
+
+    it("value prop is passed to the input element", () => {
+        // Arrange
+        const value = "Text";
+
+        // Act
+        const wrapper = mount(
+            <TextField id={"tf-1"} value={value} onChange={() => {}} />,
+        );
+
+        // Assert
+        const input = wrapper.find("input");
+        expect(input).toContainMatchingElement(`[value="${value}"]`);
+    });
+
+    it("disabled prop disables the input element", () => {
+        // Arrange
+        const wrapper = mount(
+            <TextField
+                id="tf-1"
+                value=""
+                onChange={() => {}}
+                disabled={true}
+            />,
+        );
+        const input = wrapper.find("input");
+
+        // Act
+
+        // Assert
+        expect(input).toBeDisabled();
+    });
+
+    it("onChange is called when value changes", () => {
+        // Arrange
+        const handleOnChange = jest.fn();
+
+        const wrapper = mount(
+            <TextField id={"tf-1"} value="Text" onChange={handleOnChange} />,
+        );
+
+        // Act
+        const newValue = "Test2";
+        wrapper.simulate("change", {target: {value: newValue}});
+
+        // Assert
+        expect(handleOnChange).toHaveBeenCalledWith(newValue);
+    });
+
+    it("validate is called when value changes", () => {
+        // Arrange
+        const handleValidate = jest.fn((value: string): ?string => {});
+
+        const wrapper = mount(
+            <TextField
+                id={"tf-1"}
+                value="Text"
+                validate={handleValidate}
+                onChange={() => {}}
+            />,
+        );
+
+        // Act
+        const newValue = "Text2";
+        wrapper.simulate("change", {target: {value: newValue}});
+
+        // Assert
+        expect(handleValidate).toHaveBeenCalledWith(newValue);
+    });
+
+    it("validate is given a valid input", () => {
+        // Arrange
+        const handleValidate = jest.fn((value: string): ?string => {
+            if (value.length < 8) {
+                return "Value is too short";
+            }
+        });
+
+        const wrapper = mount(
+            <TextField
+                id={"tf-1"}
+                value="TextIsLong"
+                validate={handleValidate}
+                onChange={() => {}}
+            />,
+        );
+
+        // Act
+        const newValue = "TextIsLongerThan8";
+        wrapper.simulate("change", {target: {value: newValue}});
+
+        // Assert
+        expect(handleValidate).toHaveReturnedWith(undefined);
+    });
+
+    it("validate is given an invalid input", () => {
+        // Arrange
+        const errorMessage = "Value is too short";
+        const handleValidate = jest.fn((value: string): ?string => {
+            if (value.length < 8) {
+                return errorMessage;
+            }
+        });
+
+        const wrapper = mount(
+            <TextField
+                id={"tf-1"}
+                value="TextIsLongerThan8"
+                validate={handleValidate}
+                onChange={() => {}}
+            />,
+        );
+
+        // Act
+        const newValue = "Text";
+        wrapper.simulate("change", {target: {value: newValue}});
+
+        // Assert
+        expect(handleValidate).toHaveReturnedWith(errorMessage);
+    });
+
+    it("onValidate is called after input validate", () => {
+        // Arrange
+        const errorMessage = "Value is too short";
+        const handleValidate = jest.fn((errorMessage: ?string) => {});
+        const validate = jest.fn((value: string): ?string => {
+            if (value.length < 8) {
+                return errorMessage;
+            }
+        });
+
+        const wrapper = mount(
+            <TextField
+                id={"tf-1"}
+                value="TextIsLongerThan8"
+                validate={validate}
+                onValidate={handleValidate}
+                onChange={() => {}}
+            />,
+        );
+
+        // Act
+        const newValue = "Text";
+        wrapper.simulate("change", {target: {value: newValue}});
+
+        // Assert
+        expect(handleValidate).toHaveBeenCalledWith(errorMessage);
+    });
+
+    it("onValidate is called on input's initial value", () => {
+        // Arrange
+        const errorMessage = "Value is too short";
+        const handleValidate = jest.fn((errorMessage: ?string) => {});
+        const validate = jest.fn((value: string): ?string => {
+            if (value.length < 8) {
+                return errorMessage;
+            }
+        });
+
+        // Act
+        mount(
+            <TextField
+                id={"tf-1"}
+                value="Short"
+                validate={validate}
+                onValidate={handleValidate}
+                onChange={() => {}}
+            />,
+        );
+
+        // Assert
+        expect(handleValidate).toHaveBeenCalledWith(errorMessage);
+    });
+
+    it("onKeyDown is called after keyboard key press", () => {
+        // Arrange
+        const handleOnKeyDown = jest.fn(
+            (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
+                return event.key;
+            },
+        );
+
+        const wrapper = mount(
+            <TextField
+                id={"tf-1"}
+                value="TextIsLongerThan8"
+                onChange={() => {}}
+                onKeyDown={handleOnKeyDown}
+            />,
+        );
+
+        // Act
+        const key = "Enter";
+        const input = wrapper.find("input");
+        input.simulate("keyDown", {key: key});
+
+        // Assert
+        expect(handleOnKeyDown).toHaveReturnedWith(key);
+    });
+
+    it("placeholder prop is passed to the input element", () => {
+        // Arrange
+        const placeholder = "Placeholder";
+
+        // Act
+        const wrapper = mount(
+            <TextField
+                id={"tf-1"}
+                value="Text"
+                placeholder={placeholder}
+                onChange={() => {}}
+            />,
+        );
+
+        // Assert
+        const input = wrapper.find("input");
+        expect(input).toContainMatchingElement(
+            `[placeholder="${placeholder}"]`,
+        );
+    });
+
+    it("required prop is passed to the input element", () => {
+        // Arrange
+        const wrapper = mount(
+            <TextField
+                id={"tf-1"}
+                value="Text"
+                onChange={() => {}}
+                required={true}
+            />,
+        );
+
+        // Act
+
+        // Assert
+        const input = wrapper.find("input");
+        expect(input).toContainMatchingElement("[required=true]");
+    });
+
+    it("testId is passed to the input element", () => {
+        // Arrange
+        const testId = "some-test-id";
+        const wrapper = mount(
+            <TextField
+                id={"tf-1"}
+                value="Text"
+                onChange={() => {}}
+                testId={testId}
+            />,
+        );
+
+        // Act
+
+        // Assert
+        const input = wrapper.find("input");
+        expect(input).toContainMatchingElement(`[data-test-id="${testId}"]`);
+    });
+
+    it("aria props are passed to the input element", () => {
+        // Arrange
+        const ariaLabel = "example-text-field";
+        const wrapper = mount(
+            <TextField
+                id={"tf-1"}
+                value="Text"
+                onChange={() => {}}
+                aria-label={ariaLabel}
+            />,
+        );
+
+        // Act
+
+        // Assert
+        const input = wrapper.find("input");
+        expect(input).toContainMatchingElement(`[aria-label="${ariaLabel}"]`);
+    });
+
+    it("readOnly prop is passed to the input element", async () => {
+        // Arrange
+
+        // Act
+        const wrapper = mount(
+            <TextField
+                id={"tf-1"}
+                value={"Text"}
+                onChange={() => {}}
+                readOnly={true}
+            />,
+        );
+
+        // Assert
+        const input = wrapper.find("input");
+        expect(input).toHaveProp("readOnly");
+    });
+
+    it("autoComplete prop is passed to the input element", async () => {
+        // Arrange
+        const autoComplete = "name";
+
+        // Act
+        const wrapper = mount(
+            <TextField
+                id={"tf-1"}
+                value={"Text"}
+                onChange={() => {}}
+                autoComplete={autoComplete}
+            />,
+        );
+
+        // Assert
+        const input = wrapper.find("input");
+        expect(input).toHaveProp("autoComplete", autoComplete);
+    });
+});

package/src/components/checkbox-core.js

@@ -0,0 +1,201 @@
+// @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 Icon from "@khanacademy/wonder-blocks-icon";
+
+import type {IconAsset} from "@khanacademy/wonder-blocks-icon";
+
+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");
+
+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",
+};
+
+/**
+ * The internal stateless ☑️ Checkbox
+ */
+export default class CheckboxCore 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="checkbox"
+                    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}
+                />
+                {checked && (
+                    <Icon
+                        color={disabled ? offBlack32 : white}
+                        icon={checkboxCheck}
+                        size="small"
+                        style={sharedStyles.checkIcon}
+                    />
+                )}
+            </React.Fragment>
+        );
+    }
+}
+
+const size = 16;
+
+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: 3,
+    },
+
+    disabled: {
+        cursor: "auto",
+        backgroundColor: offWhite,
+        borderColor: offBlack16,
+        borderWidth: 1,
+    },
+
+    checkIcon: {
+        position: "absolute",
+        pointerEvents: "none",
+    },
+});
+
+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: palette.base,
+                borderWidth: 0,
+            },
+            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}`,
+                background: 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];
+};