@khanacademy/wonder-blocks-form 3.1.11 → 3.1.13

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @khanacademy/wonder-blocks-form
 
+## 3.1.13
+
+### Patch Changes
+
+-   Updated dependencies [779b031d]
+    -   @khanacademy/wonder-blocks-core@4.9.0
+    -   @khanacademy/wonder-blocks-clickable@2.4.7
+    -   @khanacademy/wonder-blocks-icon@1.2.39
+    -   @khanacademy/wonder-blocks-layout@1.4.18
+    -   @khanacademy/wonder-blocks-typography@1.1.40
+
+## 3.1.12
+
+### Patch Changes
+
+-   d816af08: Update build and test configs use TypeScript
+-   3891f544: Update babel config to include plugins that Storybook needed
+-   0d28bb1c: Configured TypeScript
+-   3d05f764: Fix HOCs and other type errors
+-   c2ec4902: Update eslint configuration, fix lint
+-   2983c05b: Include 'types' field in package.json
+-   77ff6a66: Generate Flow types from TypeScript types
+-   ec8d4b7f: Fix miscellaneous TypeScript errors
+-   Updated dependencies [d816af08]
+-   Updated dependencies [3891f544]
+-   Updated dependencies [3813715d]
+-   Updated dependencies [0d28bb1c]
+-   Updated dependencies [873f4a14]
+-   Updated dependencies [3d05f764]
+-   Updated dependencies [c2ec4902]
+-   Updated dependencies [2983c05b]
+-   Updated dependencies [77ff6a66]
+-   Updated dependencies [ec8d4b7f]
+    -   @khanacademy/wonder-blocks-clickable@2.4.6
+    -   @khanacademy/wonder-blocks-color@1.2.2
+    -   @khanacademy/wonder-blocks-core@4.8.0
+    -   @khanacademy/wonder-blocks-icon@1.2.38
+    -   @khanacademy/wonder-blocks-layout@1.4.17
+    -   @khanacademy/wonder-blocks-spacing@3.0.6
+    -   @khanacademy/wonder-blocks-typography@1.1.39
+
 ## 3.1.11
 
 ### Patch Changes

package/dist/components/checkbox-core.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import type { ChoiceCoreProps } from "../util/types";
+type Props = ChoiceCoreProps & {
+    hovered: boolean;
+    focused: boolean;
+    pressed: boolean;
+    waiting: boolean;
+};
+/**
+ * The internal stateless ☑️ Checkbox
+ */
+export default class CheckboxCore extends React.Component<Props> {
+    handleChange: () => void;
+    render(): React.ReactElement;
+}
+export {};

package/dist/components/checkbox-core.js.flow

@@ -0,0 +1,26 @@
+/**
+ * Flowtype definitions for checkbox-core
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type { ChoiceCoreProps } from "../util/types";
+declare type Props = {
+  ...ChoiceCoreProps,
+  ...{
+    hovered: boolean,
+    focused: boolean,
+    pressed: boolean,
+    waiting: boolean,
+    ...
+  },
+};
+/**
+ * The internal stateless ☑️ Checkbox
+ */
+declare export default class CheckboxCore extends React.Component<Props> {
+  handleChange: () => void;
+  render(): React.Element<>;
+}

package/dist/components/checkbox-group.d.ts

@@ -0,0 +1,84 @@
+import * as React from "react";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+import Choice from "./choice";
+type CheckboxGroupProps = {
+    /**
+     * Children should be Choice components.
+     */
+    children: Array<React.ReactElement<React.ComponentProps<typeof Choice>> | false | null | undefined>;
+    /**
+     * Group name for this checkbox or radio group. Should be unique for all
+     * such groups displayed on a page.
+     */
+    groupName: string;
+    /**
+     * Optional label for the group. This label is optional to allow for
+     * greater flexibility in implementing checkbox and radio groups.
+     */
+    label?: React.ReactNode;
+    /**
+     * Optional description for the group.
+     */
+    description?: React.ReactNode;
+    /**
+     * Optional error message. If supplied, the group will be displayed in an
+     * error state, along with this error message. If no error state is desired,
+     * simply do not supply this prop, or pass along null.
+     */
+    errorMessage?: string | null | undefined;
+    /**
+     * Custom styling for this group of checkboxes.
+     */
+    style?: StyleType;
+    /**
+     * Callback for when selection of the group has changed. Passes the newly
+     * selected values.
+     */
+    onChange: (selectedValues: Array<string>) => unknown;
+    /**
+     * An array of the values of the selected values in this checkbox group.
+     */
+    selectedValues: Array<string>;
+    /**
+     * Test ID used for e2e testing.
+     */
+    testId?: string;
+};
+/**
+ * A checkbox group allows multiple selection. This component auto-populates
+ * many props for its children Choice components. The Choice component is
+ * exposed for the user to apply custom styles or to indicate which choices are
+ * disabled.
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * import {Choice, CheckboxGroup} from "@khanacademy/wonder-blocks-form";
+ *
+ * const [selectedValues, setSelectedValues] = React.useState([]);
+ *
+ * <CheckboxGroup
+ *     label="some-label"
+ *     description="some-description"
+ *     groupName="some-group-name"
+ *     onChange={setSelectedValues}
+ *     selectedValues={selectedValues}
+ * >
+ *     // Add as many choices as necessary
+ *     <Choice
+ *        label="Choice 1"
+ *        value="some-choice-value"
+ *     />
+ *     <Choice
+ *        label="Choice 2"
+ *        value="some-choice-value-2"
+ *        description="Some choice description."
+ *     />
+ * </CheckboxGroup>
+ * ```
+ */
+export default class CheckboxGroup extends React.Component<CheckboxGroupProps> {
+    handleChange(changedValue: string, originalCheckedState: boolean): void;
+    render(): React.ReactElement;
+}
+export {};

package/dist/components/checkbox-group.js.flow

@@ -0,0 +1,103 @@
+/**
+ * Flowtype definitions for checkbox-group
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+import Choice from "./choice";
+declare type CheckboxGroupProps = {
+  /**
+   * Children should be Choice components.
+   */
+  children: Array<
+    React.Element<React.ComponentProps<typeof Choice>> | false | null | void
+  >,
+
+  /**
+   * Group name for this checkbox or radio group. Should be unique for all
+   * such groups displayed on a page.
+   */
+  groupName: string,
+
+  /**
+   * Optional label for the group. This label is optional to allow for
+   * greater flexibility in implementing checkbox and radio groups.
+   */
+  label?: React.Node,
+
+  /**
+   * Optional description for the group.
+   */
+  description?: React.Node,
+
+  /**
+   * Optional error message. If supplied, the group will be displayed in an
+   * error state, along with this error message. If no error state is desired,
+   * simply do not supply this prop, or pass along null.
+   */
+  errorMessage?: string | null | void,
+
+  /**
+   * Custom styling for this group of checkboxes.
+   */
+  style?: StyleType,
+
+  /**
+   * Callback for when selection of the group has changed. Passes the newly
+   * selected values.
+   */
+  onChange: (selectedValues: Array<string>) => mixed,
+
+  /**
+   * An array of the values of the selected values in this checkbox group.
+   */
+  selectedValues: Array<string>,
+
+  /**
+   * Test ID used for e2e testing.
+   */
+  testId?: string,
+  ...
+};
+/**
+ * A checkbox group allows multiple selection. This component auto-populates
+ * many props for its children Choice components. The Choice component is
+ * exposed for the user to apply custom styles or to indicate which choices are
+ * disabled.
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * import {Choice, CheckboxGroup} from "@khanacademy/wonder-blocks-form";
+ *
+ * const [selectedValues, setSelectedValues] = React.useState([]);
+ *
+ * <CheckboxGroup
+ *     label="some-label"
+ *     description="some-description"
+ *     groupName="some-group-name"
+ *     onChange={setSelectedValues}
+ *     selectedValues={selectedValues}
+ * >
+ *     // Add as many choices as necessary
+ *     <Choice
+ *        label="Choice 1"
+ *        value="some-choice-value"
+ *     />
+ *     <Choice
+ *        label="Choice 2"
+ *        value="some-choice-value-2"
+ *        description="Some choice description."
+ *     />
+ * </CheckboxGroup>
+ * ```
+ */
+declare export default class CheckboxGroup
+  extends React.Component<CheckboxGroupProps>
+{
+  handleChange(changedValue: string, originalCheckedState: boolean): void;
+  render(): React.Element<>;
+}

package/dist/components/checkbox.d.ts

@@ -0,0 +1,83 @@
+import * as React from "react";
+import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
+type ChoiceComponentProps = AriaProps & {
+    /**
+     * Whether this component is checked
+     */
+    checked: boolean;
+    /**
+     * Whether this component is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether this component should show an error state
+     */
+    error: boolean;
+    /**
+     * Callback when this component is selected. The newCheckedState is the
+     * new checked state of the component.
+     */
+    onChange: (newCheckedState: boolean) => unknown;
+    /**
+     * Optional label for the field.
+     */
+    label?: React.ReactNode;
+    /**
+     * Optional description for the field.
+     */
+    description?: React.ReactNode;
+    /**
+     * Unique identifier attached to the HTML input element. If used, need to
+     * guarantee that the ID is unique within everything rendered on a page.
+     * Used to match `<label>` with `<input>` elements for screenreaders.
+     */
+    id?: string;
+    /**
+     * Optional styling for the container. Does not style the component.
+     */
+    style?: StyleType;
+    /**
+     * Adds CSS classes to the Checkbox.
+     */
+    className?: string;
+    /**
+     * Optional test ID for e2e testing
+     */
+    testId?: string;
+    /**
+     * Name for the checkbox or radio button group. Only applicable for group
+     * contexts, auto-populated by group components via Choice.
+     * @ignore
+     */
+    groupName?: string;
+};
+type DefaultProps = {
+    disabled: ChoiceComponentProps["disabled"];
+    error: ChoiceComponentProps["error"];
+};
+/**
+ * ☑️ A nicely styled checkbox for all your checking needs. Can optionally take
+ * label and description props.
+ *
+ * If used by itself, a checkbox provides two options - checked and unchecked.
+ * A group of checkboxes can be used to allow a user to select multiple values
+ * from a list of options.
+ *
+ * If you want a whole group of Checkbox[es] that are related, see the Choice
+ * and CheckboxGroup components.
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * import {Checkbox} from "@khanacademy/wonder-blocks-form";
+ *
+ * const [checked, setChecked] = React.useState(false);
+ *
+ * <Checkbox checked={checked} onChange={setChecked} />
+ * ```
+ */
+export default class Checkbox extends React.Component<ChoiceComponentProps> {
+    static defaultProps: DefaultProps;
+    render(): React.ReactElement;
+}
+export {};

package/dist/components/checkbox.js.flow

@@ -0,0 +1,106 @@
+/**
+ * Flowtype definitions for checkbox
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
+declare type ChoiceComponentProps = {
+  ...AriaProps,
+  ...{
+    /**
+     * Whether this component is checked
+     */
+    checked: boolean,
+
+    /**
+     * Whether this component is disabled
+     */
+    disabled: boolean,
+
+    /**
+     * Whether this component should show an error state
+     */
+    error: boolean,
+
+    /**
+     * Callback when this component is selected. The newCheckedState is the
+     * new checked state of the component.
+     */
+    onChange: (newCheckedState: boolean) => mixed,
+
+    /**
+     * Optional label for the field.
+     */
+    label?: React.Node,
+
+    /**
+     * Optional description for the field.
+     */
+    description?: React.Node,
+
+    /**
+     * Unique identifier attached to the HTML input element. If used, need to
+     * guarantee that the ID is unique within everything rendered on a page.
+     * Used to match `<label>` with `<input>` elements for screenreaders.
+     */
+    id?: string,
+
+    /**
+     * Optional styling for the container. Does not style the component.
+     */
+    style?: StyleType,
+
+    /**
+     * Adds CSS classes to the Checkbox.
+     */
+    className?: string,
+
+    /**
+     * Optional test ID for e2e testing
+     */
+    testId?: string,
+
+    /**
+     * Name for the checkbox or radio button group. Only applicable for group
+     * contexts, auto-populated by group components via Choice.
+     * @ignore
+     */
+    groupName?: string,
+    ...
+  },
+};
+declare type DefaultProps = {
+  disabled: $PropertyType<ChoiceComponentProps, "disabled">,
+  error: $PropertyType<ChoiceComponentProps, "error">,
+  ...
+};
+/**
+ * ☑️ A nicely styled checkbox for all your checking needs. Can optionally take
+ * label and description props.
+ *
+ * If used by itself, a checkbox provides two options - checked and unchecked.
+ * A group of checkboxes can be used to allow a user to select multiple values
+ * from a list of options.
+ *
+ * If you want a whole group of Checkbox[es] that are related, see the Choice
+ * and CheckboxGroup components.
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * import {Checkbox} from "@khanacademy/wonder-blocks-form";
+ *
+ * const [checked, setChecked] = React.useState(false);
+ *
+ * <Checkbox checked={checked} onChange={setChecked} />
+ * ```
+ */
+declare export default class Checkbox
+  extends React.Component<ChoiceComponentProps>
+{
+  static defaultProps: DefaultProps;
+  render(): React.Element<>;
+}

package/dist/components/choice-internal.d.ts

@@ -0,0 +1,63 @@
+import * as React from "react";
+import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
+import CheckboxCore from "./checkbox-core";
+import RadioCore from "./radio-core";
+type Props = AriaProps & {
+    /** Whether this choice is checked. */
+    checked: boolean;
+    /** Whether this choice option is disabled. */
+    disabled: boolean;
+    /** Whether this choice is in error mode. */
+    error: boolean;
+    /** Returns the new checked state of the component. */
+    onChange: (newCheckedState: boolean) => unknown;
+    /**
+     * Used for accessibility purposes, where the label id should match the
+     * input id.
+     */
+    id?: string;
+    /**
+     * Optional additional styling.
+     */
+    style?: StyleType;
+    /**
+     * Adds CSS classes to the Button.
+     */
+    className?: string;
+    /**
+     * Optional id for testing purposes.
+     */
+    testId?: string;
+    /**
+     * Label for the field.
+     */
+    label?: React.ReactNode;
+    /** Optional description for the field. */
+    description?: React.ReactNode;
+    /** Auto-populated by parent's groupName prop if in a group. */
+    groupName?: string;
+    /** Takes either "radio" or "checkbox" value. */
+    variant: "radio" | "checkbox";
+};
+type DefaultProps = {
+    checked: Props["checked"];
+    disabled: Props["disabled"];
+    error: Props["error"];
+};
+/**
+ * This is a potentially labeled 🔘 or ☑️ item. This is an internal component
+ * that's wrapped by Checkbox and Radio. Choice is a wrapper for Checkbox and
+ * Radio with many of its props auto-populated, to be used with CheckboxGroup
+ * and RadioGroup. This design allows for more explicit prop typing. For
+ * example, we can make onChange a required prop on Checkbox but not on Choice
+ * (because for Choice, that prop would be auto-populated by CheckboxGroup).
+ */ export default class ChoiceInternal extends React.Component<Props> {
+    static defaultProps: DefaultProps;
+    handleLabelClick: (event: React.SyntheticEvent) => void;
+    handleClick: () => void;
+    getChoiceCoreComponent(): typeof RadioCore | typeof CheckboxCore;
+    getLabel(): React.ReactNode;
+    getDescription(id?: string): React.ReactNode;
+    render(): React.ReactElement;
+}
+export {};

package/dist/components/choice-internal.js.flow

@@ -0,0 +1,100 @@
+/**
+ * Flowtype definitions for choice-internal
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
+import CheckboxCore from "./checkbox-core";
+import RadioCore from "./radio-core";
+declare type Props = {
+  ...AriaProps,
+  ...{
+    /**
+     * Whether this choice is checked.
+     */
+    checked: boolean,
+
+    /**
+     * Whether this choice option is disabled.
+     */
+    disabled: boolean,
+
+    /**
+     * Whether this choice is in error mode.
+     */
+    error: boolean,
+
+    /**
+     * Returns the new checked state of the component.
+     */
+    onChange: (newCheckedState: boolean) => mixed,
+
+    /**
+     * Used for accessibility purposes, where the label id should match the
+     * input id.
+     */
+    id?: string,
+
+    /**
+     * Optional additional styling.
+     */
+    style?: StyleType,
+
+    /**
+     * Adds CSS classes to the Button.
+     */
+    className?: string,
+
+    /**
+     * Optional id for testing purposes.
+     */
+    testId?: string,
+
+    /**
+     * Label for the field.
+     */
+    label?: React.Node,
+
+    /**
+     * Optional description for the field.
+     */
+    description?: React.Node,
+
+    /**
+     * Auto-populated by parent's groupName prop if in a group.
+     */
+    groupName?: string,
+
+    /**
+     * Takes either "radio" or "checkbox" value.
+     */
+    variant: "radio" | "checkbox",
+    ...
+  },
+};
+declare type DefaultProps = {
+  checked: $PropertyType<Props, "checked">,
+  disabled: $PropertyType<Props, "disabled">,
+  error: $PropertyType<Props, "error">,
+  ...
+};
+/**
+ * This is a potentially labeled 🔘 or ☑️ item. This is an internal component
+ * that's wrapped by Checkbox and Radio. Choice is a wrapper for Checkbox and
+ * Radio with many of its props auto-populated, to be used with CheckboxGroup
+ * and RadioGroup. This design allows for more explicit prop typing. For
+ * example, we can make onChange a required prop on Checkbox but not on Choice
+ * (because for Choice, that prop would be auto-populated by CheckboxGroup).
+ */
+declare export default class ChoiceInternal extends React.Component<Props> {
+  static defaultProps: DefaultProps;
+  handleLabelClick: (event: React.SyntheticEvent<>) => void;
+  handleClick: () => void;
+  getChoiceCoreComponent(): typeof RadioCore | typeof CheckboxCore;
+  getLabel(): React.Node;
+  getDescription(id?: string): React.Node;
+  render(): React.Element<>;
+}