@khanacademy/wonder-blocks-form 3.1.11 → 3.1.13

package/src/components/__docs__/checkbox-accessibility.stories.mdx

@@ -1,147 +0,0 @@
-import {Meta, Story, Canvas} from "@storybook/addon-docs";
-import {StyleSheet} from "aphrodite";
-
-import Color from "@khanacademy/wonder-blocks-color";
-import {Checkbox} from "@khanacademy/wonder-blocks-form";
-import {LabelSmall} from "@khanacademy/wonder-blocks-typography";
-
-<Meta
-    title="Form/Checkbox/Accessibility"
-    component={Checkbox}
-    parameters={{
-        previewTabs: {
-            canvas: {hidden: true},
-        },
-        viewMode: "docs",
-        chromatic: {
-            // Disables chromatic testing for these stories.
-            disableSnapshot: true,
-        },
-    }}
-/>
-
-export const ErrorTemplate = (args) => {
-    const [checked, setChecked] = React.useState(false);
-    const errorState = !checked;
-    return (
-        <View>
-            <Checkbox
-                checked={checked}
-                onChange={setChecked}
-                error={errorState}
-                aria-describedby={errorState && "error-message"}
-                aria-required={true}
-                {...args}
-            />
-            {errorState && (
-                <LabelSmall style={styles.error} id="error-message">
-                    You must agree to the terms to continue
-                </LabelSmall>
-            )}
-        </View>
-    );
-};
-
-export const DisabledTemplate = (args) => {
-    const [checked, setChecked] = React.useState(false);
-    const errorState = !checked;
-    return (
-        <Checkbox
-            checked={checked}
-            onChange={setChecked}
-            label="Some setting"
-            description="You do not have permission to change this setting"
-            disabled={true}
-        />
-    );
-};
-
-## Accessibility
-
-### ARIA
-
-`Checkbox` can take in all ARIA props defined in Wonder Blocks Core types.
-
-Elements with role `"checkbox"` can have an `aria-checked` property that
-exposes the checked state to assistive technology. The dev does not have
-to worry about this because the Wonder Blocks Checkbox component is an
-`input` element with type `"checkbox"`, as this has built-in semantics and
-does not require ARIA.
-
-The current implementation of `Checkbox` uses `aria-describedby` with the
-label and description that may be passed in as props.
-
-See the Error section for information about `aria-invalid` and
-`aria-required`.
-
-### Error state
-
-The Wonder Blocks `Checkbox` component takes an `error` boolean prop. Setting
-this prop to true will set `aria-invalid` to true, and the color of the
-checkbox to red.
-
-When a form input is invalid, the user should provide a reason for why
-this is.
-
-Generally, it is also suggested this is the validation error message is
-passed to the checkbox's `aria-describedby` prop so assistive tech can
-read it. However, this is not possible with the current implementation of
-the Wonder Blocks Form Checkbox component.
-
-The error state can be used to signal that a required checkbox has not been
-checked. In cases where a checkbox is required, the checkbox component should
-set the `aria-required` prop to true for assistive tech.
-There should also be some sort of visual indication that checking
-the box is required, such as a "Required" label or an asterisk.
-
-<Canvas>
-    <Story
-        name="Error state"
-        args={{
-            label: "I accept the terms and conditions",
-        }}
-    >
-        {ErrorTemplate.bind({})}
-    </Story>
-</Canvas>
-
-### Disabled state
-
-The Wonder Blocks `Checkbox` compoenent takes a `disabled` boolean prop.
-This sets the underlying `input` element's `disabled` prop to `true`.
-This makes is so that the checkbox is not interactable. Also, assistive
-tech will indicated that the checkbox is dimmed.
-
-A user will not be able to navigate to the checkbox with a keyboard.
-Screen reader users will be able to navigate to the checkbox with
-screen reader controls.
-
-It is suggested that if an element is disabled, an explanation as to why
-should to provided somewhere.
-
-<Canvas>
-    <Story name="Disabled state">{DisabledTemplate.bind({})}</Story>
-</Canvas>
-
-### Keyboard Interaction
-
-If a checkbox is not disabled, a user can tab to it using standard
-keyboard navigation. The Space key toggles the checked state of the checkbox.
-
-Note the the Space key triggers the `onChange` function of the
-Wonder Blocks Checkbox component. If the user does not specify an `onChange`
-funciton prop that in turn updates the value of `checked`, neither clicking
-nor the Space key will toggle the Checkbox.
-
-### References
-
--   [Accessible validation of checkbox and radiobutton groups](https://blog.tenon.io/accessible-validation-of-checkbox-and-radiobutton-groups/)
--   [HTML: Validating a checkbox with HTML5](https://www.the-art-of-web.com/html/html5-checkbox-required/#example1)
--   [aria-checked MDN Docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked)
--   [ARIA: checkbox role MDN Docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role)
-
-export const styles = StyleSheet.create({
-    error: {
-        color: Color.red,
-    },
-});

package/src/components/__docs__/checkbox-group.stories.js

@@ -1,300 +0,0 @@
-// @flow
-import * as React from "react";
-import {StyleSheet} from "aphrodite";
-
-import {View} from "@khanacademy/wonder-blocks-core";
-import Color from "@khanacademy/wonder-blocks-color";
-import {Choice, CheckboxGroup} from "@khanacademy/wonder-blocks-form";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
-import {LabelLarge, LabelXSmall} from "@khanacademy/wonder-blocks-typography";
-
-import type {StoryComponentType} from "@storybook/react";
-
-import ComponentInfo from "../../../../../.storybook/components/component-info";
-import {name, version} from "../../../package.json";
-
-export default {
-    title: "Form / CheckboxGroup",
-    component: CheckboxGroup,
-    parameters: {
-        componentSubtitle: ((
-            <ComponentInfo name={name} version={version} />
-        ): any),
-    },
-};
-
-export const Default: StoryComponentType = (args) => {
-    return (
-        <CheckboxGroup {...args}>
-            <Choice label="Pepperoni" value="pepperoni" />
-            <Choice
-                label="Sausage"
-                value="sausage"
-                description="Imported from Italy"
-            />
-            <Choice label="Extra cheese" value="cheese" />
-            <Choice label="Green pepper" value="pepper" />
-            <Choice label="Mushroom" value="mushroom" />
-        </CheckboxGroup>
-    );
-};
-
-Default.args = {
-    // Required
-    groupName: "toppings",
-    selectedValues: ["pepperoni", "sausage"],
-    onChange: () => {},
-    // Optional
-    label: "Pizza toppings",
-    description: "Choose as many toppings as you would like.",
-};
-
-export const Basic: StoryComponentType = () => {
-    const [selectedValues, setSelectedValues] = React.useState([]);
-
-    return (
-        <CheckboxGroup
-            groupName="toppings"
-            onChange={setSelectedValues}
-            selectedValues={selectedValues}
-        >
-            <Choice label="Pepperoni" value="pepperoni" />
-            <Choice
-                label="Sausage"
-                value="sausage"
-                description="Imported from Italy"
-            />
-            <Choice label="Extra cheese" value="cheese" />
-            <Choice label="Green pepper" value="pepper" />
-            <Choice label="Mushroom" value="mushroom" />
-        </CheckboxGroup>
-    );
-};
-
-Basic.parameters = {
-    docs: {
-        storyDescription: `This is a basic example of a checkbox group.
-        The Wonder Blocks \`CheckboxGroup\` component takes \`Choice\`
-        components as children. One of the \`Choice\` components here
-        includes a description.`,
-    },
-};
-
-export const Error: StoryComponentType = () => {
-    const toppingsError = "You have selected too many toppings";
-    const [selectedValues, setSelectedValues] = React.useState([
-        "pepperoni",
-        "sausage",
-        "cheese",
-        "pepper",
-    ]);
-    const [error, setError] = React.useState(toppingsError);
-
-    // Returns an error message if more than 3 items are selected,
-    // and it returns undefined otherwise. We use undefined instead of
-    // null here because null would result in a flow error, whereas
-    // undefined would be the same as not passing in anything to the
-    // checkbox group's `errorMessage` prop.
-    const checkForError = (input) => {
-        if (input.length > 3) {
-            return toppingsError;
-        }
-    };
-
-    const handleChange = (input) => {
-        const errorMessage = checkForError(input);
-        setSelectedValues(input);
-        setError(errorMessage);
-    };
-
-    return (
-        <CheckboxGroup
-            label="Pizza order"
-            groupName="toppings"
-            description="You may choose at most three toppings"
-            onChange={handleChange}
-            errorMessage={error}
-            selectedValues={selectedValues}
-        >
-            <Choice label="Pepperoni" value="pepperoni" />
-            <Choice
-                label="Sausage"
-                value="sausage"
-                description="Imported from Italy"
-            />
-            <Choice label="Extra cheese" value="cheese" />
-            <Choice label="Green pepper" value="pepper" />
-            <Choice label="Mushroom" value="mushroom" />
-        </CheckboxGroup>
-    );
-};
-
-Error.parameters = {
-    docs: {
-        storyDescription: `This is what a checkbox group looks like
-        if it has an error. It displays the error that is passed into the
-        \`errorMessage\` prop, provided the error is not null. It also
-        uses the error styling for all the checkboxes. Here, the error
-        message is saved as a state, updated in the change handler, and then
-        passed in as the \`errorMessage\` prop.`,
-    },
-};
-
-export const RowStyling: StoryComponentType = () => {
-    const [selectedValues, setSelectedValues] = React.useState([]);
-
-    return (
-        <View style={styles.wrapper}>
-            <LabelLarge style={styles.title}>Science</LabelLarge>
-            <CheckboxGroup
-                groupName="science-classes"
-                onChange={setSelectedValues}
-                selectedValues={selectedValues}
-                style={styles.group}
-            >
-                <Choice label="Biology" value="1" style={styles.choice} />
-                <Choice label="AP®︎ Biology" value="2" style={styles.choice} />
-                <Choice
-                    label="High school biology"
-                    value="3"
-                    style={styles.choice}
-                />
-                <Choice
-                    label="Cosmology and astronomy"
-                    value="4"
-                    style={styles.choice}
-                />
-                <Choice
-                    label="Electrical engineering"
-                    value="5"
-                    style={styles.choice}
-                />
-                <Choice
-                    label="Health and medicine"
-                    value="6"
-                    style={styles.choice}
-                />
-            </CheckboxGroup>
-        </View>
-    );
-};
-
-RowStyling.parameters = {
-    docs: {
-        storyDescription: `This example shows how one can add custom styles
-        to the checkbox group and to each component to achieve desired custom
-        layouts. The context in this example is inspired by the class selector
-        modal. The label is created separately because we are reflowing all
-        the elements in the group to row. The checkboxes render
-        horizontally when the style on the \`CheckboxGroup\` is set to
-        \`{flexDirection: "row"}\`. Here, \`{flexWrap: "wrap"}\` is also
-        used so the options continue on the next line.`,
-    },
-};
-
-export const MultipleChoiceStyling: StoryComponentType = () => {
-    const [selectedValues, setSelectedValues] = React.useState([]);
-
-    return (
-        <CheckboxGroup
-            label={<LabelLarge>Select all prime numbers</LabelLarge>}
-            description={
-                <LabelXSmall style={styles.description}>
-                    Hint: There is at least one prime number
-                </LabelXSmall>
-            }
-            groupName="science-classes"
-            onChange={setSelectedValues}
-            selectedValues={selectedValues}
-        >
-            <Choice label="1" value="1" style={styles.multipleChoice} />
-            <Choice label="2" value="2" style={styles.multipleChoice} />
-            <Choice label="3" value="3" style={styles.multipleChoice} />
-            <Choice label="4" value="4" style={styles.multipleChoice} />
-            <Choice
-                label="5"
-                value="5"
-                style={[styles.multipleChoice, styles.last]}
-            />
-        </CheckboxGroup>
-    );
-};
-
-MultipleChoiceStyling.parameters = {
-    docs: {
-        storyDescription: `This example shows how to use custom styling
-        to change the appearance of the checkbox group to look more like
-        a multiple choice question. You may also provide custom typography
-        to the label and description. Here, there is a line in
-        between each question, which is achieved using the
-        \`{borderTop: "solid 1px #CCC"}\` style on each \`Choice\`
-        component.`,
-    },
-};
-
-export const FiltersOutFalsyChildren: StoryComponentType = () => {
-    return (
-        <CheckboxGroup
-            groupName="pokemon"
-            selectedValues={["pepperoni", "sausage"]}
-            onChange={() => {}}
-            label="Pokemon"
-            description="Your first Pokemon."
-        >
-            <Choice label="Pepperoni" value="pepperoni" />
-            <Choice
-                label="Sausage"
-                value="sausage"
-                description="Imported from Italy"
-            />
-            <Choice label="Extra cheese" value="cheese" />
-            <Choice label="Green pepper" value="pepper" />
-            {false && <Choice label="Mushroom" value="mushroom" />}
-        </CheckboxGroup>
-    );
-};
-
-FiltersOutFalsyChildren.parameters = {
-    docs: {
-        storyDescription: `This example shows that children can be falsy values and
-        that those falsy values are filtered out when rendering children.  In this
-        case, one of the children is \`{false && <Choice .../>}\` which results in
-        that choice being filtered out.`,
-    },
-    chromatic: {
-        // The unit tests already verify that false-y children aren't rendered.
-        disableSnapshot: true,
-    },
-};
-
-const styles = StyleSheet.create({
-    // Row styling
-    wrapper: {
-        width: 650,
-    },
-    group: {
-        flexDirection: "row",
-        flexWrap: "wrap",
-    },
-    choice: {
-        marginTop: Spacing.xSmall_8,
-        width: 200,
-    },
-    title: {
-        paddingBottom: Spacing.xSmall_8,
-        borderBottom: `1px solid ${Color.offBlack64}`,
-    },
-    // Multiple choice styling
-    multipleChoice: {
-        margin: 0,
-        height: 48,
-        borderTop: "solid 1px #CCC",
-        justifyContent: "center",
-    },
-    description: {
-        color: Color.offBlack64,
-    },
-    last: {
-        borderBottom: "solid 1px #CCC",
-    },
-});

package/src/components/__docs__/checkbox.stories.js

@@ -1,167 +0,0 @@
-// @flow
-import * as React from "react";
-import {StyleSheet} from "aphrodite";
-
-import {View} from "@khanacademy/wonder-blocks-core";
-import {LabelMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
-import type {StoryComponentType} from "@storybook/react";
-
-import Checkbox from "../checkbox";
-
-import ComponentInfo from "../../../../../.storybook/components/component-info";
-import {name, version} from "../../../package.json";
-
-export default {
-    title: "Form / Checkbox",
-    component: Checkbox,
-    parameters: {
-        componentSubtitle: ((
-            <ComponentInfo name={name} version={version} />
-        ): any),
-    },
-};
-
-export const Default: StoryComponentType = (args) => <Checkbox {...args} />;
-
-Default.args = {
-    checked: false,
-    onChange: () => {},
-};
-
-Default.parameters = {
-    chromatic: {
-        // We already have screenshots of another story that covers
-        // this and more cases.
-        disableSnapshot: true,
-    },
-};
-
-export const Controlled: StoryComponentType = () => {
-    const [checked, setChecked] = React.useState(false);
-    return <Checkbox checked={checked} onChange={setChecked} />;
-};
-
-Controlled.parameters = {
-    chromatic: {
-        // Disabling because this doesn't test visuals, its for testing
-        // that `state` works as expected.
-        disableSnapshot: true,
-    },
-    docs: {
-        storyDescription:
-            "Use state to keep track of whether the checkbox is checked or not",
-    },
-};
-
-export const Variants: StoryComponentType = () => (
-    <View style={styles.row}>
-        <Checkbox
-            error={false}
-            checked={false}
-            style={styles.marginRight}
-            onChange={() => {}}
-        />
-        <Checkbox
-            error={false}
-            checked={true}
-            style={styles.marginRight}
-            onChange={() => {}}
-        />
-        <Checkbox
-            error={true}
-            checked={false}
-            style={styles.marginRight}
-            onChange={() => {}}
-        />
-        <Checkbox
-            error={true}
-            checked={true}
-            style={styles.marginRight}
-            onChange={() => {}}
-        />
-        <Checkbox
-            disabled={true}
-            checked={false}
-            style={styles.marginRight}
-            onChange={() => {}}
-        />
-        <Checkbox
-            disabled={true}
-            checked={true}
-            style={styles.marginRight}
-            onChange={() => {}}
-        />
-    </View>
-);
-
-Variants.parameters = {
-    docs: {
-        storyDescription:
-            "The checkbox has various styles for clickable states. Here are sets of default checkboxes, checkboxes in an error state, and disabled checkboxes.",
-    },
-};
-
-export const WithLabel: StoryComponentType = () => {
-    const [checked, setChecked] = React.useState(false);
-
-    return (
-        <Checkbox
-            label="Receive assignment reminders for Algebra"
-            description="You will receive a reminder 24 hours before each deadline"
-            checked={checked}
-            onChange={setChecked}
-        />
-    );
-};
-
-WithLabel.parameters = {
-    docs: {
-        storyDescription:
-            "The checkbox can have an optional label and description. This allows it to be used as a settings-like item. The user of this component is responsible for keeping track of checked state and providing an onChange callback.",
-    },
-};
-
-export const AdditionalClickTarget: StoryComponentType = () => {
-    const [checked, setChecked] = React.useState(false);
-    const headingText = "Functions";
-    const descriptionText = `A great cook knows how to take basic
-        ingredients and prepare a delicious meal. In this topic, you will
-        become function-chefs! You will learn how to combine functions
-        with arithmetic operations and how to compose functions.`;
-
-    return (
-        <View style={styles.wrapper}>
-            <View style={styles.topic}>
-                <label htmlFor="topic-123">
-                    <LabelMedium>{headingText}</LabelMedium>
-                </label>
-                <LabelSmall>{descriptionText}</LabelSmall>
-            </View>
-            <Checkbox checked={checked} id="topic-123" onChange={setChecked} />
-        </View>
-    );
-};
-
-AdditionalClickTarget.parameters = {
-    docs: {
-        storyDescription:
-            "Sometimes one may wish to use a checkbox in a different context (label may not be right next to the checkbox), like in this example content item. Use a `<label htmlFor={id}>` element where the id matches the `id` prop of the Checkbox. This is for accessibility purposes, and doing this also automatically makes the label a click target for the checkbox.",
-    },
-};
-
-const styles = StyleSheet.create({
-    row: {
-        flexDirection: "row",
-    },
-    marginRight: {
-        marginRight: 16,
-    },
-    wrapper: {
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "space-evenly",
-    },
-    topic: {
-        maxWidth: 600,
-    },
-});

package/src/components/__docs__/choice.stories.js

@@ -1,86 +0,0 @@
-// @flow
-import * as React from "react";
-import {StyleSheet} from "aphrodite";
-
-import {View} from "@khanacademy/wonder-blocks-core";
-import {
-    Choice,
-    CheckboxGroup,
-    RadioGroup,
-} from "@khanacademy/wonder-blocks-form";
-import {Strut} from "@khanacademy/wonder-blocks-layout";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
-
-import type {StoryComponentType} from "@storybook/react";
-
-import ComponentInfo from "../../../../../.storybook/components/component-info";
-import {name, version} from "../../../package.json";
-
-export default {
-    title: "Form / Choice",
-    component: Choice,
-    parameters: {
-        componentSubtitle: ((
-            <ComponentInfo name={name} version={version} />
-        ): any),
-    },
-};
-
-export const Default: StoryComponentType = (args) => {
-    const [selectedValues, setSelectedValues] = React.useState([]);
-    const [selectedValue, setSelectedValue] = React.useState("");
-
-    return (
-        <View style={styles.row}>
-            <CheckboxGroup
-                label="Pizza order"
-                description="Choose as many toppings as you would like."
-                groupName="Toppings"
-                onChange={setSelectedValues}
-                selectedValues={selectedValues}
-            >
-                <Choice label="Pepperoni" value="pepperoni" />
-                <Choice
-                    label="Sausage"
-                    value="sausage"
-                    description="Imported from Italy"
-                />
-                <Choice label="Extra cheese" value="cheese" />
-                <Choice label="Green pepper" value="pepper" />
-                <Choice label="Mushroom" value="mushroom" />
-                <Choice {...args} />
-            </CheckboxGroup>
-            <Strut size={Spacing.xLarge_32} />
-            <RadioGroup
-                label="Pizza order"
-                description="Choose only one topping."
-                groupName="Toppings"
-                onChange={setSelectedValue}
-                selectedValue={selectedValue}
-            >
-                <Choice label="Pepperoni" value="pepperoni" />
-                <Choice
-                    label="Sausage"
-                    value="sausage"
-                    description="Imported from Italy"
-                />
-                <Choice label="Extra cheese" value="cheese" />
-                <Choice label="Green pepper" value="pepper" />
-                <Choice label="Mushroom" value="mushroom" />
-                <Choice {...args} />
-            </RadioGroup>
-        </View>
-    );
-};
-
-Default.args = {
-    label: "Pineapple (Control)",
-    value: "pineapple",
-    description: "Does in fact belong on pizzas",
-};
-
-const styles = StyleSheet.create({
-    row: {
-        flexDirection: "row",
-    },
-});