@khanacademy/wonder-blocks-form 3.1.11 → 3.1.13

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

@@ -1,217 +0,0 @@
-// @flow
-import * as React from "react";
-import {StyleSheet} from "aphrodite";
-
-import {Choice, RadioGroup} from "@khanacademy/wonder-blocks-form";
-import {LabelLarge} 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 / RadioGroup",
-    component: RadioGroup,
-    parameters: {
-        componentSubtitle: ((
-            <ComponentInfo name={name} version={version} />
-        ): any),
-    },
-};
-
-export const Default: StoryComponentType = (args) => {
-    return (
-        <RadioGroup {...args}>
-            <Choice label="Bulbasaur" value="bulbasaur" />
-            <Choice
-                label="Charmander"
-                value="charmander"
-                description="Oops, we ran out of Charmanders"
-                disabled
-            />
-            <Choice label="Squirtle" value="squirtle" />
-            <Choice label="Pikachu" value="pikachu" />
-        </RadioGroup>
-    );
-};
-
-Default.args = {
-    // Required
-    groupName: "pokemon",
-    selectedValue: "bulbasaur",
-    onChange: () => {},
-    // Optional
-    label: "Pokemon",
-    description: "Your first Pokemon.",
-};
-
-export const Basic: StoryComponentType = () => {
-    const [selectedValue, setSelectedValue] = React.useState("");
-
-    return (
-        <RadioGroup
-            groupName="pokemon"
-            label="Pokemon"
-            description="Your first Pokemon."
-            onChange={setSelectedValue}
-            selectedValue={selectedValue}
-        >
-            <Choice label="Bulbasaur" value="bulbasaur" />
-            <Choice
-                label="Charmander"
-                value="charmander"
-                description="Oops, we ran out of Charmanders"
-                disabled
-            />
-            <Choice label="Squirtle" value="squirtle" />
-            <Choice label="Pikachu" value="pikachu" />
-        </RadioGroup>
-    );
-};
-
-Basic.parameters = {
-    docs: {
-        storyDescription: `This is a basic example of a radio group.
-        The Wonder Blocks \`RadioGroup\` component takes \`Choice\`
-        components as children. One of the \`Choice\` components here
-        includes a description.`,
-    },
-};
-
-export const Error: StoryComponentType = () => {
-    const emptyError = "You must select an option to continue.";
-    const [selectedValue, setSelectedValue] = React.useState("");
-    const [error, setError] = React.useState(emptyError);
-
-    // This returns an error message if no option is 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
-    // radio group's `errorMessage` prop.
-    const checkForError = (input) => {
-        if (!input) {
-            return emptyError;
-        }
-    };
-
-    const handleChange = (input) => {
-        const errorMessage = checkForError(input);
-        setSelectedValue(input);
-        setError(errorMessage);
-    };
-
-    return (
-        <RadioGroup
-            groupName="pokemon"
-            label="Pokemon"
-            description="Your first Pokemon."
-            onChange={handleChange}
-            selectedValue={selectedValue}
-            errorMessage={error}
-        >
-            <Choice label="Bulbasaur" value="bulbasaur" />
-            <Choice label="Charmander" value="charmander" />
-            <Choice label="Squirtle" value="squirtle" />
-            <Choice label="Pikachu" value="pikachu" />
-        </RadioGroup>
-    );
-};
-
-Error.parameters = {
-    docs: {
-        storyDescription: `This is what a radio 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 radio buttons. Here, the error
-        message is saved as a state, updated in the change handler, and then
-        passed in as the \`errorMessage\` prop.`,
-    },
-};
-
-export const MultipleChoiceStyling: StoryComponentType = () => {
-    const [selectedValue, setSelectedValue] = React.useState("");
-
-    return (
-        <>
-            <LabelLarge style={styles.prompt}>
-                Select your blood type
-            </LabelLarge>
-            <RadioGroup
-                groupName="science-classes"
-                onChange={setSelectedValue}
-                selectedValue={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, styles.lastChoice]}
-                />
-            </RadioGroup>
-        </>
-    );
-};
-
-MultipleChoiceStyling.parameters = {
-    docs: {
-        storyDescription: `This example shows how to use custom styling
-        to change the appearance of the radio group to look more like
-        a multiple choice question. 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 (
-        <RadioGroup
-            groupName="pokemon"
-            selectedValue="bulbasaur"
-            onChange={() => {}}
-            label="Pokemon"
-            description="Your first Pokemon."
-        >
-            <Choice label="Bulbasaur" value="bulbasaur" />
-            <Choice
-                label="Charmander"
-                value="charmander"
-                description="Oops, we ran out of Charmanders"
-                disabled
-            />
-            <Choice label="Squirtle" value="squirtle" />
-            {false && <Choice label="Pikachu" value="pikachu" />}
-        </RadioGroup>
-    );
-};
-
-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({
-    choice: {
-        margin: 0,
-        height: 48,
-        borderTop: "solid 1px #CCC",
-        justifyContent: "center",
-    },
-    lastChoice: {
-        borderBottom: "solid 1px #CCC",
-    },
-    prompt: {
-        marginBottom: 16,
-    },
-});

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

@@ -1,161 +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 ComponentInfo from "../../../../../.storybook/components/component-info";
-import {name, version} from "../../../package.json";
-
-import Radio from "../radio";
-
-export default {
-    title: "Form / Radio (internal)",
-    component: Radio,
-    parameters: {
-        componentSubtitle: ((
-            <ComponentInfo name={name} version={version} />
-        ): any),
-    },
-};
-
-export const Default: StoryComponentType = (args) => <Radio {...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 <Radio checked={checked} onChange={setChecked} />;
-};
-
-Controlled.parameters = {
-    chromatic: {
-        // Disabling because this doesn't test visuals, it tests
-        // that the `checked` state works as expected.
-        disableSnapshot: true,
-    },
-    docs: {
-        storyDescription: `Use state to keep track of whether
-        the radio button has been checked. A radio button cannot be unchecked
-        by the user once it has been checked. It would become unchecked if a
-        different radio button is selected as part of a radio group.`,
-    },
-};
-
-export const Variants: StoryComponentType = () => (
-    <View style={styles.row}>
-        <Radio checked={false} style={styles.marginRight} onChange={() => {}} />
-        <Radio checked={true} style={styles.marginRight} onChange={() => {}} />
-        <Radio
-            error={true}
-            checked={false}
-            style={styles.marginRight}
-            onChange={() => {}}
-        />
-        <Radio
-            error={true}
-            checked={true}
-            style={styles.marginRight}
-            onChange={() => {}}
-        />
-        <Radio
-            disabled={true}
-            checked={false}
-            style={styles.marginRight}
-            onChange={() => {}}
-        />
-        <Radio disabled={true} checked={true} onChange={() => {}} />
-    </View>
-);
-
-Variants.parameters = {
-    docs: {
-        storyDescription: `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.`,
-    },
-};
-
-export const WithLabel: StoryComponentType = () => {
-    const [checked, setChecked] = React.useState(false);
-
-    return (
-        <Radio
-            label="Easy"
-            description="Opt for a less difficult exercise set."
-            checked={checked}
-            onChange={setChecked}
-        />
-    );
-};
-
-WithLabel.parameters = {
-    docs: {
-        storyDescription: `The radio button can have an optional label
-            and description. This allows it to be used as a settings-like item,
-            as opposed to its usage in a radio grid.`,
-    },
-};
-
-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>
-            <Radio checked={checked} id="topic-123" onChange={setChecked} />
-        </View>
-    );
-};
-
-AdditionalClickTarget.parameters = {
-    docs: {
-        storyDescription: `Sometimes one may wish to use a radio button
-            in a different context (label may not be right next to the
-            radio button), like in this example content item. Use a
-            \`<label htmlFor={id}>\` element where the id matches the \`id\`
-            prop of the Radio. This is for accessibility purposes,
-            and doing this also automatically makes the label a click target
-            for the radio button.`,
-    },
-};
-
-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__/text-field.argtypes.js

@@ -1,206 +0,0 @@
-// @flow
-
-export default {
-    id: {
-        description: "The unique identifier for the input.",
-        type: {required: true},
-        table: {
-            type: {
-                summary: "string",
-            },
-        },
-        control: {
-            type: "text",
-        },
-    },
-    type: {
-        description:
-            "Determines the type of input. Defaults to text. This may change the appearance or type of characters allowed.",
-        table: {
-            type: {
-                summary: `"text" | "password" | "email" | "number" | "tel"`,
-            },
-            defaultValue: {
-                summary: "text",
-            },
-        },
-        options: ["text", "password", "email", "number", "tel"],
-        control: {
-            type: "select",
-        },
-    },
-    value: {
-        description: "The input value.",
-        type: {required: true},
-        table: {
-            type: {
-                summary: "string",
-            },
-        },
-        control: {type: "text"},
-    },
-    autoComplete: {
-        description: "Specifies if the input field allows autocomplete.",
-        table: {
-            type: {
-                summary: "string",
-                detail: `There is a large number of options, including "on", "off", "username", "current-password", and many others.`,
-            },
-        },
-        control: {
-            type: "text",
-        },
-    },
-    disabled: {
-        description: "Makes a read-only input field that cannot be focused.",
-        table: {
-            type: {
-                summary: "boolean",
-            },
-            defaultValue: {
-                summary: "false",
-            },
-        },
-        control: {
-            type: "boolean",
-        },
-    },
-    light: {
-        description:
-            "Change the default focus ring color to fit a dark background.",
-        table: {
-            type: {
-                summary: "boolean",
-            },
-            defaultValue: {
-                summary: "false",
-            },
-        },
-        control: {
-            type: "boolean",
-        },
-    },
-    required: {
-        description:
-            "Whether this field is required to to continue, or the error message to render if this field is left blank. Pass in a message instead of `true` if possible.",
-        table: {
-            type: {
-                summary: "boolean | string",
-                detail: "The string will not be used if a `validate` prop is passed in.",
-            },
-        },
-        control: {
-            type: "null",
-        },
-    },
-    placeholder: {
-        description: "Provide hints or examples of what to enter.",
-        table: {
-            type: {
-                summary: "string",
-            },
-        },
-        control: {
-            type: "text",
-        },
-    },
-    readOnly: {
-        description: "Specifies if the input field is read-only.",
-        table: {
-            type: {
-                summary: "boolean",
-            },
-        },
-        control: {
-            type: "boolean",
-        },
-    },
-    style: {
-        description: "Custom styles for the input.",
-        table: {
-            type: {
-                summary: "StyleType",
-            },
-        },
-    },
-    testId: {
-        description: "Optional test ID for e2e testing.",
-        table: {
-            type: {
-                summary: "string",
-            },
-        },
-        control: {
-            type: "text",
-        },
-    },
-    validate: {
-        description:
-            "Provide a validation for the input value. Return a string error message or null | void for a valid input.",
-        table: {
-            type: {
-                summary: "(value: string) => ?string",
-            },
-        },
-        control: {
-            type: "null",
-        },
-    },
-
-    /**
-     * Events
-     */
-    onValidate: {
-        description: "Called right after the TextField input is validated.",
-        table: {
-            category: "Events",
-            type: {
-                summary: "(errorMessage: ?string) => mixed",
-            },
-        },
-    },
-    onChange: {
-        description:
-            "Called when the value has changed. Use this in conjunction with the `value` prop to update the string rendered in the input field.",
-        type: {required: true},
-        table: {
-            category: "Events",
-            type: {
-                summary: "(newValue: string) => mixed",
-            },
-        },
-    },
-    onKeyDown: {
-        action: "keyDown",
-        description: "Called when a key is pressed.",
-        table: {
-            category: "Events",
-            type: {
-                summary:
-                    "(event: SyntheticKeyboardEvent<HTMLInputElement>) => mixed",
-            },
-        },
-    },
-    onFocus: {
-        action: "focus",
-        description: "Called when the element has been focused.",
-        table: {
-            category: "Events",
-            type: {
-                summary:
-                    "(event: SyntheticFocusEvent<HTMLInputElement>) => mixed",
-            },
-        },
-    },
-    onBlur: {
-        action: "blur",
-        description: "Called when the element has been blurred.",
-        table: {
-            category: "Events",
-            type: {
-                summary:
-                    "(event: SyntheticFocusEvent<HTMLInputElement>) => mixed",
-            },
-        },
-    },
-};