@khanacademy/wonder-blocks-form 2.4.8 → 3.0.0

package/src/components/checkbox-group.md

@@ -1,200 +0,0 @@
-This example has two items with descriptions, and it sets an error state to the
-entire group if more than three items are selected.
-
-Try out the keyboard navigation! Use tab and shift+tab to navigate among the
-choices, and use space to select/de-select each option.
-
-```js
-import {StyleSheet} from "aphrodite";
-import {View} from "@khanacademy/wonder-blocks-core";
-import {CheckboxGroup, Choice} from "@khanacademy/wonder-blocks-form";
-
-const styles = StyleSheet.create({
-    wrapper: {
-        width: 300,
-    },
-});
-
-class CheckboxGroupPizzaExample extends React.Component {
-    constructor() {
-        super();
-        this.state = {
-            selectedValues: ["pineapple"],
-        };
-        this.handleChange = this.handleChange.bind(this);
-    }
-
-    handleChange(change) {
-        console.log(`${change} was selected!`);
-        const error = this.checkForError(change);
-        this.setState({
-            selectedValues: change,
-            error: error,
-        });
-    }
-
-    checkForError(input) {
-        if (input.length > 3) {
-            return "You have selected too many toppings";
-        }
-    }
-
-    render() {
-        return <CheckboxGroup
-            label="Pizza order"
-            description="You may choose at most three toppings"
-            errorMessage={this.state.error}
-            groupName="Toppings"
-            onChange={this.handleChange}
-            selectedValues={this.state.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 label="Pineapple" value="pineapple" description="Does in fact belong on pizzas" />
-        </CheckboxGroup>
-    }
-}
-<View style={styles.wrapper}>
-    <CheckboxGroupPizzaExample />
-</View>
-```
-
-This example shows how one can add custom styles to the checkbox group and to
-each component to achieve desired custom layouts. This context is inspired by
-the class selector modal. The label is created separately because we are
-reflowing all the elements in the group to row.
-
-```js
-import {StyleSheet} from "aphrodite";
-import Color from "@khanacademy/wonder-blocks-color";
-import {View} from "@khanacademy/wonder-blocks-core";
-import {CheckboxGroup, Choice} from "@khanacademy/wonder-blocks-form";
-import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
-
-const styles = StyleSheet.create({
-    wrapper: {
-        width: 650,
-    },
-    group: {
-        flexDirection: "row",
-        flexWrap: "wrap",
-    },
-    choice: {
-        marginTop: 8,
-        width: 200,
-    },
-    title: {
-        paddingBottom: 8,
-        borderBottom: `1px solid ${Color.offBlack64}`,
-    },
-});
-
-class ClassSelectorExample extends React.Component {
-    constructor() {
-        super();
-        this.state = {
-            selectedValues: [],
-        };
-        this.handleChange = this.handleChange.bind(this);
-    }
-
-    handleChange(change) {
-        console.log(`${change} was selected!`);
-        this.setState({
-            selectedValues: change,
-        });
-    }
-
-    render() {
-        return <CheckboxGroup
-            groupName="science-classes"
-            onChange={this.handleChange}
-            selectedValues={this.state.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 style={styles.wrapper}>
-    <LabelLarge style={styles.title}>Science</LabelLarge>
-    <ClassSelectorExample />
-</View>
-```
-
-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.
-
-```js
-import {CheckboxGroup, Choice} from "@khanacademy/wonder-blocks-form";
-import {View} from "@khanacademy/wonder-blocks-core";
-import Color from "@khanacademy/wonder-blocks-color";
-import {LabelLarge, LabelXSmall} from "@khanacademy/wonder-blocks-typography";
-import {StyleSheet} from "aphrodite";
-
-const styles = StyleSheet.create({
-    choice: {
-        margin: 0,
-        height: 48,
-        borderTop: "solid 1px #CCC",
-        justifyContent: "center",
-        ":last-child": {
-            borderBottom: "solid 1px #CCC",
-        },
-    },
-    description: {
-        marginTop: 5,
-        color: Color.offBlack64,
-    },
-});
-
-class ClassSelectorExample extends React.Component {
-    constructor() {
-        super();
-        this.state = {
-            selectedValues: [],
-        };
-        this.handleChange = this.handleChange.bind(this);
-    }
-
-    handleChange(change) {
-        console.log(`${change} was selected!`);
-        this.setState({
-            selectedValues: change,
-        });
-    }
-
-    render() {
-        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={this.handleChange}
-            selectedValues={this.state.selectedValues}
-        >
-            <Choice label="1" value="1" style={styles.choice} />
-            <Choice label="2" value="2" style={styles.choice} />
-            <Choice label="3" value="3" style={styles.choice} />
-            <Choice label="4" value="4" style={styles.choice} />
-            <Choice label="5" value="5" style={styles.choice} />
-        </CheckboxGroup>
-    }
-}
-
-<View>
-    <ClassSelectorExample />
-</View>
-```

package/src/components/checkbox.md

@@ -1,134 +0,0 @@
-The checkbox has various styles for clickable states. Here are sets of default checkboxes, checkboxes in an error state, and disabled checkboxes.
-```js
-import {View} from "@khanacademy/wonder-blocks-core";
-import {Checkbox} 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 checkbox, will be checked=${checked.toString()}`);
-
-<View style={styles.row}>
-    <Checkbox error={false} checked={false} style={styles.marginRight} onChange={handleChange} />
-    <Checkbox error={false} checked={true} style={styles.marginRight} onChange={handleChange} />
-    <Checkbox error={true} checked={false} style={styles.marginRight} onChange={handleChange} />
-    <Checkbox error={true} checked={true} style={styles.marginRight} onChange={handleChange} />
-    <Checkbox disabled={true} checked={false} style={styles.marginRight} onChange={handleChange} />
-    <Checkbox disabled={true} checked={true} style={styles.marginRight} onChange={handleChange} />
-</View>
-```
-
-The checkbox can have a 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.
-
-```js
-import {View} from "@khanacademy/wonder-blocks-core";
-import {Checkbox} from "@khanacademy/wonder-blocks-form";
-import {LabelMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
-import {StyleSheet} from "aphrodite";
-
-class Settings extends React.Component {
-    constructor() {
-        super();
-        this.state = {
-            assignment: false,
-        };
-        this.handleChange = this.handleChange.bind(this);
-    }
-
-    handleChange(checked) {
-        this.setState({
-            assignment: checked,
-        });
-        // Potentially do something here with this updated state information.
-    }
-
-    render() {
-        const handleChanged = (checked) => console.log(`clicked on checkbox with checked=${checked.toString()}`);
-        const headingText = "Functions";
-
-        return <View>
-            <Checkbox
-                label="Receive assignment reminders for Algebra"
-                description="You will receive a reminder 24 hours before each deadline"
-                checked={this.state.assignment}
-                id="assignment"
-                onChange={this.handleChange}
-                testId="algebra-assignment-test"
-                variant="checkbox"
-            />
-        </View>;
-    }
-}
-
-<Settings />
-```
-
-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.
-```js
-import {View} from "@khanacademy/wonder-blocks-core";
-import {Checkbox} from "@khanacademy/wonder-blocks-form";
-import {LabelMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
-import {StyleSheet} from "aphrodite";
-
-const styles = StyleSheet.create({
-    wrapper: {
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "space-evenly",
-    },
-    topic: {
-        maxWidth: 600,
-    },
-});
-
-class ContentItem extends React.Component {
-    constructor() {
-        super();
-        this.state = {
-            checked: false,
-        }
-    }
-
-    handleChange(checked) {
-        this.setState({
-            checked: checked,
-        });
-        // Potentially do something here with this updated state information.
-    }
-
-    render() {
-        const handleChanged = (checked) => console.log(`clicked on checkbox with checked=${checked.toString()}`);
-        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={this.state.checked}
-                    id="topic-123"
-                    onChange={(checked) => this.handleChange(checked)}
-                />
-        </View>;
-    }
-}
-
-<ContentItem />
-```

package/src/components/field-heading.md

@@ -1,43 +0,0 @@
-```js
-import {View} from "@khanacademy/wonder-blocks-core";
-import {TextField} from "@khanacademy/wonder-blocks-form";
-
-class FieldHeadingExample extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            value: "",
-        };
-        this.handleKeyDown = this.handleKeyDown.bind(this);
-    }
-
-    handleKeyDown(event) {
-        if (event.key === "Enter") {
-            event.currentTarget.blur();
-        }
-    }
-
-    render() {
-        return (
-            <FieldHeading
-                field={
-                    <TextField
-                        id="tf-1"
-                        type="text"
-                        value={this.state.value}
-                        placeholder="Username"
-                        onChange={(newValue) => this.setState({value: newValue})}
-                        onKeyDown={this.handleKeyDown}
-                    />
-                }
-                label="Username"
-                description="Please enter your username."
-                error="That username is already taken."
-            />
-
-        );
-    }
-}
-
-<FieldHeadingExample />
-```