@khanacademy/wonder-blocks-form 4.9.1 → 4.9.3

package/src/components/choice.tsx

@@ -1,157 +0,0 @@
-import * as React from "react";
-
-import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
-import Checkbox from "./checkbox";
-import Radio from "./radio";
-
-type Props = AriaProps & {
-    /** User-defined. Label for the field. */
-    label: React.ReactNode;
-    /** User-defined. Optional description for the field. */
-    description?: React.ReactNode;
-    /** User-defined. Should be distinct for each item in the group. */
-    value: string;
-    /** User-defined. Whether this choice option is disabled. Default false. */
-    disabled?: boolean;
-    /** User-defined. Optional id for testing purposes. */
-    testId?: string;
-    /** User-defined. Optional additional styling. */
-    style?: StyleType;
-    /**
-     * Auto-populated by parent. Whether this choice is checked.
-     * @ignore
-     */
-    checked?: boolean;
-    /**
-     * Auto-populated by parent. Whether this choice is in error mode (everything
-     * in a choice group would be in error mode at the same time).
-     * @ignore
-     */
-    error?: boolean;
-    /**
-     * Auto-populated by parent. Used for accessibility purposes, where the label
-     * id should match the input id.
-     * @ignore
-     */
-    id?: string;
-    /**
-     * Auto-populated by parent's groupName prop.
-     * @ignore
-     */
-    groupName?: string;
-    /**
-     * Auto-populated by parent. Returns the new checked state of the component.
-     * @ignore
-     */
-    onChange?: (newCheckedState: boolean) => unknown;
-    /**
-     * Auto-populated by parent.
-     * @ignore
-     */
-    variant?: "radio" | "checkbox";
-};
-
-/**
- * This is a labeled 🔘 or ☑️ item. Choice is meant to be used as children of
- * CheckboxGroup and RadioGroup because many of its props are auto-populated
- * and not shown in the documentation here. See those components for usage
- * examples.
- *
- * If you wish to use just a single field, use Checkbox or Radio with the
- * optional label and description props.
- *
- * ### Checkbox Usage
- *
- * ```jsx
- * import {Choice, CheckboxGroup} from "@khanacademy/wonder-blocks-form";
- *
- * const [selectedValues, setSelectedValues] = React.useState([]);
- *
- * // Checkbox usage
- * <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"
- *        description="Some choice description."
- *     />
- *     <Choice
- *        label="Choice 2"
- *        value="some-choice-value-2"
- *        description="Some choice description."
- *     />
- * </CheckboxGroup>
- * ```
- *
- * ### Radio 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}>
- *     selectedValues={selectedValue}
- * />
- *     // Add as many choices as necessary
- *     <Choice
- *        label="Choice 1"
- *        value="some-choice-value"
- *        description="Some choice description."
- *     />
- *     <Choice
- *        label="Choice 2"
- *        value="some-choice-value-2"
- *        description="Some choice description."
- *     />
- * </RadioGroup>
- * ```
- */
-const Choice = React.forwardRef(function Choice(
-    props: Props,
-    ref: React.ForwardedRef<HTMLInputElement>,
-) {
-    const {
-        checked = false,
-        disabled = false,
-        onChange = () => {},
-        // we don't need this going into the ChoiceComponent
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        value,
-        variant,
-        ...remainingProps
-    } = props;
-
-    const getChoiceComponent = (
-        variant?: string | null,
-    ): typeof Radio | typeof Checkbox => {
-        if (variant === "checkbox") {
-            return Checkbox;
-        } else {
-            return Radio;
-        }
-    };
-
-    const ChoiceComponent = getChoiceComponent(variant);
-    return (
-        <ChoiceComponent
-            {...remainingProps}
-            checked={checked}
-            disabled={disabled}
-            onChange={onChange}
-            ref={ref}
-        />
-    );
-});
-
-export default Choice;

package/src/components/field-heading.tsx

@@ -1,169 +0,0 @@
-import * as React from "react";
-import {StyleSheet} from "aphrodite";
-
-import {View, addStyle, StyleType} 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";
-
-type Props = {
-    /**
-     * The form field component.
-     */
-    field: React.ReactNode;
-    /**
-     * The title for the label element.
-     */
-    label: React.ReactNode;
-    /**
-     * The text for the description element.
-     */
-    description?: React.ReactNode;
-    /**
-     * Whether this field is required to continue.
-     */
-    required?: boolean;
-    /**
-     * The message for the error element.
-     */
-    error?: React.ReactNode;
-    /**
-     * Custom styles for the field heading container.
-     */
-    style?: StyleType;
-    /**
-     * A unique id to link the label (and optional error) to the field.
-     *
-     * The label will assume that the field will have its id formatted as `${id}-field`.
-     * The field can assume that the error will have its id formatted as `${id}-error`.
-     */
-    id?: string;
-    /**
-     * Optional test ID for e2e testing.
-     */
-    testId?: string;
-    /**
-     * Change the field’s sub-components to fit a dark background.
-     */
-    light?: boolean;
-};
-
-const StyledSpan = addStyle("span");
-
-/**
- * A FieldHeading is an element that provides a label, description, and error element
- * to present better context and hints to any type of form field component.
- */
-export default class FieldHeading extends React.Component<Props> {
-    renderLabel(): React.ReactNode {
-        const {label, id, required, testId, light} = this.props;
-
-        const requiredIcon = (
-            <StyledSpan
-                style={light ? styles.lightRequired : styles.required}
-                aria-hidden={true}
-            >
-                {" "}
-                *
-            </StyledSpan>
-        );
-
-        return (
-            <React.Fragment>
-                <LabelMedium
-                    style={light ? styles.lightLabel : styles.label}
-                    tag="label"
-                    htmlFor={id && `${id}-field`}
-                    testId={testId && `${testId}-label`}
-                >
-                    {label}
-                    {required && requiredIcon}
-                </LabelMedium>
-                <Strut size={spacing.xxxSmall_4} />
-            </React.Fragment>
-        );
-    }
-
-    maybeRenderDescription(): React.ReactNode | null | undefined {
-        const {description, testId, light} = this.props;
-
-        if (!description) {
-            return null;
-        }
-
-        return (
-            <React.Fragment>
-                <LabelSmall
-                    style={light ? styles.lightDescription : styles.description}
-                    testId={testId && `${testId}-description`}
-                >
-                    {description}
-                </LabelSmall>
-                <Strut size={spacing.xxxSmall_4} />
-            </React.Fragment>
-        );
-    }
-
-    maybeRenderError(): React.ReactNode | null | undefined {
-        const {error, id, testId, light} = this.props;
-
-        if (!error) {
-            return null;
-        }
-
-        return (
-            <React.Fragment>
-                <Strut size={spacing.small_12} />
-                <LabelSmall
-                    style={light ? styles.lightError : styles.error}
-                    role="alert"
-                    id={id && `${id}-error`}
-                    testId={testId && `${testId}-error`}
-                >
-                    {error}
-                </LabelSmall>
-            </React.Fragment>
-        );
-    }
-
-    render(): React.ReactNode {
-        const {field, style} = this.props;
-
-        return (
-            <View style={style}>
-                {this.renderLabel()}
-                {this.maybeRenderDescription()}
-                <Strut size={spacing.xSmall_8} />
-                {field}
-                {this.maybeRenderError()}
-            </View>
-        );
-    }
-}
-
-const styles = StyleSheet.create({
-    label: {
-        color: color.offBlack,
-    },
-    lightLabel: {
-        color: color.white,
-    },
-    description: {
-        color: color.offBlack64,
-    },
-    lightDescription: {
-        color: color.white64,
-    },
-    error: {
-        color: color.red,
-    },
-    lightError: {
-        color: color.fadedRed,
-    },
-    required: {
-        color: color.red,
-    },
-    lightRequired: {
-        color: color.fadedRed,
-    },
-});

package/src/components/group-styles.ts

@@ -1,33 +0,0 @@
-import {StyleSheet} from "aphrodite";
-
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
-
-import type {StyleDeclaration} from "aphrodite";
-
-const styles: StyleDeclaration = StyleSheet.create({
-    fieldset: {
-        border: "none",
-        padding: 0,
-        margin: 0,
-    },
-
-    legend: {
-        padding: 0,
-    },
-
-    description: {
-        marginTop: spacing.xxxSmall_4,
-        color: color.offBlack64,
-    },
-
-    error: {
-        marginTop: spacing.xxxSmall_4,
-        color: color.red,
-    },
-
-    defaultLineGap: {
-        marginTop: spacing.xSmall_8,
-    },
-});
-
-export default styles;

package/src/components/labeled-text-field.tsx

@@ -1,317 +0,0 @@
-import * as React from "react";
-
-import {IDProvider, StyleType} from "@khanacademy/wonder-blocks-core";
-
-import FieldHeading from "./field-heading";
-import TextField from "./text-field";
-import type {NumericInputProps} from "./text-field";
-import {OmitConstrained} from "../util/types";
-
-type WithForwardRef = {
-    forwardedRef: React.ForwardedRef<HTMLInputElement>;
-};
-
-type CommonProps = {
-    /**
-     * An optional unique identifier for the TextField.
-     * If no id is specified, a unique id will be auto-generated.
-     */
-    id?: string;
-    /**
-     * Provide a label for the TextField.
-     */
-    label: React.ReactNode;
-    /**
-     * Provide a description for the TextField.
-     */
-    description?: React.ReactNode;
-    /**
-     * The input value.
-     */
-    value: string;
-    /**
-     * Makes a read-only input field that cannot be focused. Defaults to false.
-     */
-    disabled: boolean;
-    /**
-     * Whether this field is required to to continue, or the error message to
-     * render if this field is left blank.
-     *
-     * This can be a boolean or a string.
-     *
-     * String:
-     * Please pass in a translated string to use as the error message that will
-     * render if the user leaves this field blank. If this field is required,
-     * and a string is not passed in, a default untranslated string will render
-     * upon error.
-     * Note: The string will not be used if a `validate` prop is passed in.
-     *
-     * Example message: i18n._("A password is required to log in.")
-     *
-     * Boolean:
-     * True/false indicating whether this field is required. Please do not pass
-     * in `true` if possible - pass in the error string instead.
-     * If `true` is passed, and a `validate` prop is not passed, that means
-     * there is no corresponding message and the default untranlsated message
-     * will be used.
-     */
-    required?: boolean | string;
-    /**
-     * Identifies the element or elements that describes this text field.
-     */
-    ariaDescribedby?: string | undefined;
-    /**
-     * Provide a validation for the input value.
-     * Return a string error message or null | void for a valid input.
-     */
-    validate?: (value: string) => string | null | undefined;
-    /**
-     * Called when the TextField input is validated.
-     */
-    onValidate?: (errorMessage?: string | null | undefined) => unknown;
-    /**
-     * Called when the value has changed.
-     */
-    onChange: (newValue: string) => unknown;
-    /**
-     * Called when a key is pressed.
-     */
-    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => unknown;
-    /**
-     * Called when the element has been focused.
-     */
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
-    /**
-     * Called when the element has been blurred.
-     */
-    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
-    /**
-     * Provide hints or examples of what to enter.
-     */
-    placeholder?: string;
-    /**
-     * Change the field’s sub-components to fit a dark background.
-     */
-    light: boolean;
-    /**
-     * Custom styles for the container.
-     *
-     * Note: This style is passed to the field heading container
-     * due to scenarios where we would like to set a specific
-     * width for the text field. If we apply the style directly
-     * to the text field, the container would not be affected.
-     * For example, setting text field to "width: 50%" would not
-     * affect the container since text field is a child of the container.
-     * In this case, the container would maintain its width ocuppying
-     * unnecessary space when the text field is smaller.
-     */
-    style?: StyleType;
-    /**
-     * Optional test ID for e2e testing.
-     */
-    testId?: string;
-    /**
-     * Specifies if the TextField is read-only.
-     */
-    readOnly?: boolean;
-    /**
-     * Specifies if the TextField allows autocomplete.
-     */
-    autoComplete?: string;
-};
-
-type OtherInputProps = CommonProps & {
-    /**
-     * Determines the type of input. Defaults to text.
-     */
-    type: "text" | "password" | "email" | "tel";
-};
-
-type FullNumericInputProps = NumericInputProps & CommonProps;
-type Props = OtherInputProps | FullNumericInputProps;
-type PropsWithForwardRef = Props & WithForwardRef;
-
-type DefaultProps = {
-    type: PropsWithForwardRef["type"];
-    disabled: PropsWithForwardRef["disabled"];
-    light: PropsWithForwardRef["light"];
-};
-
-type State = {
-    /**
-     * Displayed when the validation fails.
-     */
-    error: string | null | undefined;
-    /**
-     * The user focuses on the textfield.
-     */
-    focused: boolean;
-};
-
-/**
- * A LabeledTextField is an element used to accept a single line of text
- * from the user paired with a label, description, and error field elements.
- */
-class LabeledTextField extends React.Component<PropsWithForwardRef, State> {
-    static defaultProps: DefaultProps = {
-        type: "text",
-        disabled: false,
-        light: false,
-    };
-
-    constructor(props: PropsWithForwardRef) {
-        super(props);
-        this.state = {
-            error: null,
-            focused: false,
-        };
-    }
-
-    handleValidate: (errorMessage?: string | null | undefined) => unknown = (
-        errorMessage,
-    ) => {
-        const {onValidate} = this.props;
-        this.setState({error: errorMessage}, () => {
-            if (onValidate) {
-                onValidate(errorMessage);
-            }
-        });
-    };
-
-    handleFocus: (event: React.FocusEvent<HTMLInputElement>) => unknown = (
-        event,
-    ) => {
-        const {onFocus} = this.props;
-        this.setState({focused: true}, () => {
-            if (onFocus) {
-                onFocus(event);
-            }
-        });
-    };
-
-    handleBlur: (event: React.FocusEvent<HTMLInputElement>) => unknown = (
-        event,
-    ) => {
-        const {onBlur} = this.props;
-        this.setState({focused: false}, () => {
-            if (onBlur) {
-                onBlur(event);
-            }
-        });
-    };
-
-    render(): React.ReactNode {
-        const {
-            id,
-            type,
-            label,
-            description,
-            value,
-            disabled,
-            required,
-            validate,
-            onChange,
-            onKeyDown,
-            placeholder,
-            light,
-            style,
-            testId,
-            readOnly,
-            autoComplete,
-            forwardedRef,
-            ariaDescribedby,
-            // NOTE: We are not using this prop, but we need to remove it from
-            // `otherProps` so it doesn't override the `handleValidate` function
-            // call. We use `otherProps` due to a limitation in TypeScript where
-            // we can't easily extract the props when using a discriminated
-            // union.
-            /* eslint-disable @typescript-eslint/no-unused-vars */
-            onValidate,
-            onFocus,
-            onBlur,
-            /* eslint-enable @typescript-eslint/no-unused-vars */
-            // numeric input props
-            ...otherProps
-        } = this.props;
-
-        return (
-            <IDProvider id={id} scope="labeled-text-field">
-                {(uniqueId) => (
-                    <FieldHeading
-                        id={uniqueId}
-                        testId={testId}
-                        style={style}
-                        light={light}
-                        field={
-                            <TextField
-                                id={`${uniqueId}-field`}
-                                aria-describedby={
-                                    ariaDescribedby
-                                        ? ariaDescribedby
-                                        : `${uniqueId}-error`
-                                }
-                                aria-required={required ? "true" : "false"}
-                                required={required}
-                                testId={testId && `${testId}-field`}
-                                type={type}
-                                value={value}
-                                placeholder={placeholder}
-                                disabled={disabled}
-                                validate={validate}
-                                onValidate={this.handleValidate}
-                                onChange={onChange}
-                                onKeyDown={onKeyDown}
-                                onFocus={this.handleFocus}
-                                onBlur={this.handleBlur}
-                                light={light}
-                                readOnly={readOnly}
-                                autoComplete={autoComplete}
-                                ref={forwardedRef}
-                                {...otherProps}
-                            />
-                        }
-                        label={label}
-                        description={description}
-                        required={!!required}
-                        error={(!this.state.focused && this.state.error) || ""}
-                    />
-                )}
-            </IDProvider>
-        );
-    }
-}
-
-type ExportProps = OmitConstrained<
-    JSX.LibraryManagedAttributes<
-        typeof LabeledTextField,
-        React.ComponentProps<typeof LabeledTextField>
-    >,
-    "forwardedRef"
->;
-
-/**
- * A LabeledTextField is an element used to accept a single line of text
- * from the user paired with a label, description, and error field elements.
- *
- * ### Usage
- *
- * ```jsx
- * import {LabeledTextField} from "@khanacademy/wonder-blocks-form";
- *
- * const [value, setValue] = React.useState("");
- *
- * <LabeledTextField
- *     label="Label"
- *     description="Hello, this is the description for this field"
- *     placeholder="Placeholder"
- *     value={value}
- *     onChange={setValue}
- * />
- * ```
- */
-
-export default React.forwardRef<HTMLInputElement, ExportProps>((props, ref) => (
-    <LabeledTextField {...props} forwardedRef={ref} />
-)) as React.ForwardRefExoticComponent<
-    ExportProps & React.RefAttributes<HTMLInputElement>
->;