@khanacademy/wonder-blocks-form 4.9.2 → 4.9.4

package/src/components/checkbox-core.tsx

@@ -1,239 +0,0 @@
-import * as React from "react";
-import {StyleSheet} from "aphrodite";
-
-import {mix, color, spacing} from "@khanacademy/wonder-blocks-tokens";
-import {addStyle} from "@khanacademy/wonder-blocks-core";
-import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
-import checkIcon from "@phosphor-icons/core/bold/check-bold.svg";
-import minusIcon from "@phosphor-icons/core/bold/minus-bold.svg";
-
-import type {ChoiceCoreProps, Checked} from "../util/types";
-
-// `AriaChecked` and `mapCheckedToAriaChecked()` are used to convert the
-// `checked` prop value to a value that a screen reader can understand via the
-// `aria-checked` attribute
-type AriaChecked = "true" | "false" | "mixed";
-
-function mapCheckedToAriaChecked(value: Checked): AriaChecked {
-    switch (value) {
-        case true:
-            return "true";
-        case false:
-            return "false";
-        default:
-            return "mixed";
-    }
-}
-
-const {blue, red, white, offWhite, offBlack16, offBlack32, offBlack50} = color;
-
-// The checkbox size
-const size = spacing.medium_16;
-// The check icon size
-const checkSize = spacing.small_12;
-
-const StyledInput = addStyle("input");
-
-/**
- * The internal stateless ☑️ Checkbox
- */
-const CheckboxCore = React.forwardRef(function CheckboxCore(
-    props: ChoiceCoreProps,
-    ref: React.ForwardedRef<HTMLInputElement>,
-) {
-    const {checked, disabled, error, groupName, id, testId, ...sharedProps} =
-        props;
-
-    const innerRef = React.useRef<HTMLInputElement>(null);
-
-    React.useEffect(() => {
-        // Keep the indeterminate state in sync with the checked prop
-        if (innerRef.current != null) {
-            innerRef.current.indeterminate = checked == null;
-        }
-    }, [checked, innerRef]);
-
-    const handleChange: () => void = () => {
-        // Empty because change is handled by ClickableBehavior
-        return;
-    };
-
-    const stateStyles = _generateStyles(checked, error);
-
-    const defaultStyle = [
-        sharedStyles.inputReset,
-        sharedStyles.default,
-        !disabled && stateStyles.default,
-        disabled && sharedStyles.disabled,
-    ];
-
-    const checkboxIcon = (
-        <PhosphorIcon
-            color={disabled ? offBlack32 : white}
-            icon={checked ? checkIcon : minusIcon}
-            size="small"
-            style={[
-                sharedStyles.checkboxIcon,
-                // The check icon is smaller than the checkbox, as per design.
-                {
-                    width: checkSize,
-                    height: checkSize,
-                },
-            ]}
-        />
-    );
-
-    const ariaChecked = mapCheckedToAriaChecked(checked);
-
-    return (
-        <React.Fragment>
-            <StyledInput
-                {...sharedProps}
-                ref={(node) => {
-                    // @ts-expect-error: current is not actually read-only
-                    innerRef.current = node;
-                    if (typeof ref === "function") {
-                        ref(node);
-                    } else if (ref != null) {
-                        ref.current = node;
-                    }
-                }}
-                type="checkbox"
-                aria-checked={ariaChecked}
-                aria-invalid={error}
-                checked={checked ?? undefined}
-                disabled={disabled}
-                id={id}
-                name={groupName}
-                // Need to specify because this is a controlled React form
-                // component, but we handle the click via ClickableBehavior
-                onChange={handleChange}
-                style={defaultStyle}
-                data-testid={testId}
-            />
-            {checked || checked == null ? checkboxIcon : <></>}
-        </React.Fragment>
-    );
-});
-
-const sharedStyles = StyleSheet.create({
-    // Reset the default styled input element
-    inputReset: {
-        appearance: "none",
-        WebkitAppearance: "none",
-        MozAppearance: "none",
-    },
-
-    default: {
-        height: size,
-        width: size,
-        minHeight: size,
-        minWidth: size,
-        margin: 0,
-        outline: "none",
-        boxSizing: "border-box",
-        borderStyle: "solid",
-        borderWidth: 1,
-        borderRadius: 3,
-    },
-
-    disabled: {
-        cursor: "auto",
-        backgroundColor: offWhite,
-        borderColor: offBlack16,
-        borderWidth: 1,
-    },
-
-    checkboxIcon: {
-        position: "absolute",
-        pointerEvents: "none",
-        // This margin is to center the check icon in the checkbox.
-        margin: (size - checkSize) / 2,
-    },
-});
-
-const fadedBlue = mix(color.fadedBlue16, white);
-const activeBlue = color.activeBlue;
-const fadedRed = mix(color.fadedRed8, white);
-const activeRed = color.activeRed;
-
-const colors = {
-    default: {
-        faded: fadedBlue,
-        base: blue,
-        active: activeBlue,
-    },
-    error: {
-        faded: fadedRed,
-        base: red,
-        active: activeRed,
-    },
-} as const;
-
-const styles: Record<string, any> = {};
-
-const _generateStyles = (checked: Checked, error: boolean) => {
-    // "hash" the parameters
-    const styleKey = `${String(checked)}-${String(error)}`;
-    if (styles[styleKey]) {
-        return styles[styleKey];
-    }
-
-    const palette = error ? colors.error : colors.default;
-
-    let newStyles: Record<string, any> = {};
-    if (checked || checked == null) {
-        newStyles = {
-            default: {
-                backgroundColor: palette.base,
-                borderWidth: 0,
-
-                // Focus and hover have the same style. Focus style only shows
-                // up with keyboard navigation.
-                ":focus-visible": {
-                    boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.base}`,
-                },
-
-                ":hover": {
-                    boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.base}`,
-                },
-
-                ":active": {
-                    boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.active}`,
-                    background: palette.active,
-                },
-            },
-        };
-    } else {
-        newStyles = {
-            default: {
-                backgroundColor: error ? fadedRed : white,
-                borderColor: error ? red : offBlack50,
-
-                // Focus and hover have the same style. Focus style only shows
-                // up with keyboard navigation.
-                ":focus-visible": {
-                    backgroundColor: error ? fadedRed : white,
-                    borderColor: palette.base,
-                    borderWidth: 2,
-                },
-
-                ":hover": {
-                    backgroundColor: error ? fadedRed : white,
-                    borderColor: palette.base,
-                    borderWidth: 2,
-                },
-
-                ":active": {
-                    backgroundColor: palette.faded,
-                    borderColor: error ? activeRed : blue,
-                    borderWidth: 2,
-                },
-            },
-        };
-    }
-    styles[styleKey] = StyleSheet.create(newStyles);
-    return styles[styleKey];
-};
-
-export default CheckboxCore;

package/src/components/checkbox-group.tsx

@@ -1,174 +0,0 @@
-import * as React from "react";
-
-import {View, addStyle} from "@khanacademy/wonder-blocks-core";
-import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {spacing} from "@khanacademy/wonder-blocks-tokens";
-import {LabelMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
-import type {StyleType} from "@khanacademy/wonder-blocks-core";
-
-import styles from "./group-styles";
-import Choice from "./choice";
-
-// Keep synced with CheckboxGroupProps in ../util/types.js
-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;
-};
-
-const StyledFieldset = addStyle("fieldset");
-const StyledLegend = addStyle("legend");
-
-/**
- * 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>
- * ```
- */
-const CheckboxGroup = React.forwardRef(function CheckboxGroup(
-    props: CheckboxGroupProps,
-    ref: React.ForwardedRef<HTMLFieldSetElement>,
-) {
-    const {
-        children,
-        label,
-        description,
-        errorMessage,
-        groupName,
-        onChange,
-        selectedValues,
-        style,
-        testId,
-    } = props;
-
-    const handleChange = (
-        changedValue: string,
-        originalCheckedState: boolean,
-    ) => {
-        if (originalCheckedState) {
-            const index = selectedValues.indexOf(changedValue);
-            const updatedSelection = [
-                ...selectedValues.slice(0, index),
-                ...selectedValues.slice(index + 1),
-            ];
-            onChange(updatedSelection);
-        } else {
-            onChange([...selectedValues, changedValue]);
-        }
-    };
-
-    const allChildren = React.Children.toArray(children).filter(Boolean);
-
-    return (
-        <StyledFieldset data-testid={testId} style={styles.fieldset} ref={ref}>
-            {/* We have a View here because fieldset cannot be used with flexbox*/}
-            <View style={style}>
-                {label && (
-                    <StyledLegend style={styles.legend}>
-                        <LabelMedium>{label}</LabelMedium>
-                    </StyledLegend>
-                )}
-                {description && (
-                    <LabelSmall style={styles.description}>
-                        {description}
-                    </LabelSmall>
-                )}
-                {errorMessage && (
-                    <LabelSmall style={styles.error}>{errorMessage}</LabelSmall>
-                )}
-                {(label || description || errorMessage) && (
-                    <Strut size={spacing.small_12} />
-                )}
-
-                {allChildren.map((child, index) => {
-                    // @ts-expect-error [FEI-5019] - TS2339 - Property 'props' does not exist on type 'ReactChild | ReactFragment | ReactPortal'.
-                    const {style, value} = child.props;
-                    const checked = selectedValues.includes(value);
-                    // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
-                    return React.cloneElement(child, {
-                        checked: checked,
-                        error: !!errorMessage,
-                        groupName: groupName,
-                        id: `${groupName}-${value}`,
-                        key: value,
-                        onChange: () => handleChange(value, checked),
-                        style: [index > 0 && styles.defaultLineGap, style],
-                        variant: "checkbox",
-                    });
-                })}
-            </View>
-        </StyledFieldset>
-    );
-});
-
-export default CheckboxGroup;

package/src/components/checkbox.tsx

@@ -1,99 +0,0 @@
-import * as React from "react";
-
-import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
-import type {Checked} from "../util/types";
-
-import ChoiceInternal from "./choice-internal";
-
-// Keep synced with ChoiceComponentProps in ../util/types.js
-type ChoiceComponentProps = AriaProps & {
-    /**
-     * Whether this component is checked or indeterminate
-     */
-    checked: Checked;
-    /**
-     * 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;
-};
-
-/**
- * ☑️ 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} />
- * ```
- */
-const Checkbox = React.forwardRef(function Checkbox(
-    props: ChoiceComponentProps,
-    ref: React.ForwardedRef<HTMLInputElement>,
-) {
-    const {disabled = false, error = false} = props;
-
-    return (
-        <ChoiceInternal
-            {...props}
-            variant="checkbox"
-            disabled={disabled}
-            error={error}
-            ref={ref}
-        />
-    );
-});
-
-export default Checkbox;

package/src/components/choice-internal.tsx

@@ -1,184 +0,0 @@
-import * as React from "react";
-import {StyleSheet} from "aphrodite";
-
-import {View, UniqueIDProvider} from "@khanacademy/wonder-blocks-core";
-import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
-import {LabelMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
-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 | null | undefined;
-    /** 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";
-};
-
-/**
- * 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).
- */ const ChoiceInternal = React.forwardRef(function ChoiceInternal(
-    props: Props,
-    ref: React.ForwardedRef<HTMLInputElement>,
-) {
-    const {
-        checked,
-        description,
-        disabled = false,
-        error = false,
-        id,
-        label,
-        onChange,
-        style,
-        className,
-        variant,
-        ...coreProps
-    } = props;
-
-    const handleClick: () => void = () => {
-        // Radio buttons cannot be unchecked
-        if (variant === "radio" && checked) {
-            return;
-        }
-        onChange(!checked);
-    };
-
-    const getChoiceCoreComponent = ():
-        | typeof RadioCore
-        | typeof CheckboxCore => {
-        if (variant === "radio") {
-            return RadioCore;
-        } else {
-            return CheckboxCore;
-        }
-    };
-
-    const getLabel = (id: string): React.ReactNode => {
-        return (
-            <LabelMedium
-                style={[styles.label, disabled && styles.disabledLabel]}
-            >
-                <label htmlFor={id}>{label}</label>
-            </LabelMedium>
-        );
-    };
-
-    const getDescription = (id?: string): React.ReactNode => {
-        return (
-            <LabelSmall style={styles.description} id={id}>
-                {description}
-            </LabelSmall>
-        );
-    };
-
-    const ChoiceCore = getChoiceCoreComponent();
-
-    return (
-        <UniqueIDProvider mockOnFirstRender={true} scope="choice">
-            {(ids) => {
-                // A choice element should always have a unique ID set
-                // so that the label can always refer to this element.
-                // This guarantees that clicking on the label will
-                // always click on the choice as well. If an ID is
-                // passed in as a prop, use that one. Otherwise,
-                // create a unique ID using the provider.
-                const uniqueId = id || ids.get("main");
-
-                // Create a unique ID for the description section to be
-                // used by this element's `aria-describedby`.
-                const descriptionId = description
-                    ? ids.get("description")
-                    : undefined;
-
-                return (
-                    <View style={style} className={className}>
-                        <View
-                            style={styles.wrapper}
-                            // We are resetting the tabIndex=0 from handlers
-                            // because the ChoiceCore component will receive
-                            // focus on basis of it being an input element.
-                            tabIndex={-1}
-                        >
-                            <ChoiceCore
-                                {...coreProps}
-                                id={uniqueId}
-                                checked={checked}
-                                aria-describedby={descriptionId}
-                                onClick={handleClick}
-                                disabled={disabled}
-                                error={error}
-                                ref={ref}
-                            />
-                            <Strut size={spacing.xSmall_8} />
-                            {label && getLabel(uniqueId)}
-                        </View>
-                        {description && getDescription(descriptionId)}
-                    </View>
-                );
-            }}
-        </UniqueIDProvider>
-    );
-});
-
-const styles = StyleSheet.create({
-    wrapper: {
-        flexDirection: "row",
-        alignItems: "flex-start",
-        outline: "none",
-    },
-    label: {
-        // NOTE: The checkbox/radio button (height 16px) should be center
-        // aligned with the first line of the label. However, LabelMedium has a
-        // declared line height of 20px, so we need to adjust the top to get the
-        // desired alignment.
-        marginTop: -2,
-    },
-    disabledLabel: {
-        color: color.offBlack32,
-    },
-    description: {
-        // 16 for icon + 8 for spacing strut
-        marginLeft: spacing.medium_16 + spacing.xSmall_8,
-        marginTop: spacing.xxxSmall_4,
-        color: color.offBlack64,
-    },
-});
-
-export default ChoiceInternal;