@khanacademy/wonder-blocks-form 2.4.3 → 2.4.6

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

@@ -0,0 +1,160 @@
+// @flow
+import * as React from "react";
+import {StyleSheet} from "aphrodite";
+
+import {View} from "@khanacademy/wonder-blocks-core";
+import {Radio} from "@khanacademy/wonder-blocks-form";
+import {LabelMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
+import type {StoryComponentType} from "@storybook/react";
+
+import ComponentInfo from "../../../../../.storybook/components/component-info.js";
+import {name, version} from "../../../package.json";
+
+export default {
+    title: "Form / Radio",
+    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

@@ -0,0 +1,206 @@
+// @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",
+            },
+        },
+    },
+};