@khanacademy/wonder-blocks-form 4.9.2 → 4.9.3

package/src/components/radio-core.tsx

@@ -1,171 +0,0 @@
-import * as React from "react";
-import {StyleSheet} from "aphrodite";
-
-import {mix, color} from "@khanacademy/wonder-blocks-tokens";
-import {addStyle} from "@khanacademy/wonder-blocks-core";
-
-import type {ChoiceCoreProps, Checked} from "../util/types";
-
-const {blue, red, white, offWhite, offBlack16, offBlack32, offBlack50} = color;
-
-const StyledInput = addStyle("input");
-
-/**
- * The internal stateless 🔘 Radio button
- */ const RadioCore = React.forwardRef(function RadioCore(
-    props: ChoiceCoreProps,
-    ref: React.ForwardedRef<HTMLInputElement>,
-) {
-    const handleChange = () => {
-        // Empty because change is handled by ClickableBehavior
-        return;
-    };
-
-    const {checked, disabled, error, groupName, id, testId, ...sharedProps} =
-        props;
-
-    const stateStyles = _generateStyles(checked, error);
-    const defaultStyle = [
-        sharedStyles.inputReset,
-        sharedStyles.default,
-        !disabled && stateStyles.default,
-        disabled && sharedStyles.disabled,
-    ];
-
-    return (
-        <React.Fragment>
-            <StyledInput
-                {...sharedProps}
-                type="radio"
-                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}
-                ref={ref}
-            />
-            {disabled && checked && <span style={disabledChecked} />}
-        </React.Fragment>
-    );
-});
-
-const size = 16; // circle with a different color. Here, we add that center circle. // If the checkbox is disabled and selected, it has a border but also an inner
-const disabledChecked = {
-    position: "absolute",
-    top: size / 4,
-    left: size / 4,
-    height: size / 2,
-    width: size / 2,
-    borderRadius: "50%",
-    backgroundColor: offBlack32,
-} as const;
-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: "50%",
-    },
-    disabled: {
-        cursor: "auto",
-        backgroundColor: offWhite,
-        borderColor: offBlack16,
-        borderWidth: 1,
-    },
-});
-const fadedBlue = mix(color.fadedBlue16, white);
-const fadedRed = mix(color.fadedRed8, white);
-const colors = {
-    default: {
-        faded: fadedBlue,
-        base: blue,
-        active: color.activeBlue,
-    },
-    error: {
-        faded: fadedRed,
-        base: red,
-        active: color.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) {
-        newStyles = {
-            default: {
-                backgroundColor: white,
-                borderColor: palette.base,
-                borderWidth: size / 4,
-
-                // 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}`,
-                    borderColor: 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 ? color.activeRed : blue,
-                    borderWidth: 2,
-                },
-            },
-        };
-    }
-    styles[styleKey] = StyleSheet.create(newStyles);
-    return styles[styleKey];
-};
-
-export default RadioCore;

package/src/components/radio-group.tsx

@@ -1,159 +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 RadioGroupProps in ../util/types.js
-type RadioGroupProps = {
-    /**
-     * 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;
-    /**
-     * Custom styling for this group of checkboxes.
-     */
-    style?: StyleType;
-    /**
-     * Callback for when the selected value of the radio group has changed.
-     */
-    onChange: (selectedValue: string) => unknown;
-    /**
-     * Value of the selected radio item.
-     */
-    selectedValue: string;
-    /**
-     * Test ID used for e2e testing.
-     */
-    testId?: string;
-};
-
-const StyledFieldset = addStyle("fieldset");
-const StyledLegend = addStyle("legend");
-
-/**
- * A radio group allows only single selection. Like CheckboxGroup, 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. The use of the groupName prop is
- * important to maintain expected keyboard navigation behavior for
- * accessibility.
- *
- * ### Usage
- *
- * ```jsx
- * import {Choice, RadioGroup} from "@khanacademy/wonder-blocks-form";
- *
- * const [selectedValue, setSelectedValue] = React.useState("");
- *
- * <RadioGroup
- *     label="some-label"
- *     description="some-description"
- *     groupName="some-group-name"
- *     onChange={setSelectedValue}
- *     selectedValue={selectedValue}
- * >
- *     // 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."
- *     />
- * </RadioGroup>
- * ```
- */
-const RadioGroup = React.forwardRef(function RadioGroup(
-    props: RadioGroupProps,
-    ref: React.ForwardedRef<HTMLFieldSetElement>,
-) {
-    const {
-        children,
-        label,
-        description,
-        errorMessage,
-        groupName,
-        onChange,
-        selectedValue,
-        style,
-        testId,
-    } = props;
-
-    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 = selectedValue === 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: () => onChange(value),
-                        style: [index > 0 && styles.defaultLineGap, style],
-                        variant: "radio",
-                    });
-                })}
-            </View>
-        </StyledFieldset>
-    );
-});
-
-export default RadioGroup;

package/src/components/radio.tsx

@@ -1,82 +0,0 @@
-import * as React from "react";
-
-import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
-import ChoiceInternal from "./choice-internal";
-
-// Keep synced with ChoiceComponentProps in ../util/types.js
-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;
-};
-
-/**
- * 🔘 A nicely styled radio button for all your non-AMFM radio button needs. Can
- * optionally take label and description props.
- *
- * This component should not really be used by itself because radio buttons are
- * often grouped together. See RadioGroup.
- */ const Radio = React.forwardRef(function Radio(
-    props: ChoiceComponentProps,
-    ref: React.ForwardedRef<HTMLInputElement>,
-) {
-    const {disabled = false, error = false, ...otherProps} = props;
-
-    return (
-        <ChoiceInternal
-            {...otherProps}
-            variant="radio"
-            disabled={disabled}
-            error={error}
-            ref={ref}
-        />
-    );
-});
-
-export default Radio;