@khanacademy/perseus 0.3.4 → 0.4.0

package/src/widgets/radio/choice.jsx

@@ -1,33 +1,37 @@
 /* eslint-disable react/no-unsafe */
 // @flow
+import Button from "@khanacademy/wonder-blocks-button";
+import Clickable from "@khanacademy/wonder-blocks-clickable";
+import Color from "@khanacademy/wonder-blocks-color";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {Strut} from "@khanacademy/wonder-blocks-layout";
+import {Popover, PopoverContent} from "@khanacademy/wonder-blocks-popover";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
 import {StyleSheet, css} from "aphrodite";
 import classNames from "classnames";
 import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
-import {ClassNames} from "../../perseus-api.jsx";
+import Icon from "../../components/icon.jsx";
 import * as styleConstants from "../../styles/constants.js";
 import mediaQueries from "../../styles/media-queries.js";
-import sharedStyles from "../../styles/shared.js";
 
 import ChoiceIcon from "./choice-icon.jsx";
-import CrossOutMenuWrapper from "./cross-out-menu-wrapper.jsx";
 import OptionStatus from "./option-status.jsx";
-import ToggleableRadioButton from "./toggleable-radio-button.jsx";
-
-const focusedStyleMixin = {
-    backgroundColor: styleConstants.satSelectedBackgroundColor,
-    outline: `2px solid ${styleConstants.satBlue}`,
-    // Render the outline higher than the next element's border
-    zIndex: 1,
-};
+import {getChoiceLetter} from "./util.js";
 
 const intermediateCheckboxPadding = `16px 16px`;
 const intermediateCheckboxPaddingPhone = `12px 16px`;
 
 export const TouchIgnoreTimeout = 10;
 
+const ellipsisHorizontalIcon = {
+    path: "M27.218 6.82l0 13.578q0 2.852-1.984 4.836t-4.836 1.984l-13.578 0q-2.852 0-4.836-1.984t-1.984-4.836l0-13.578q0-2.852 1.984-4.836t4.836-1.984l13.578 0q2.852 0 4.836 1.984t1.984 4.836zm36.27 0l0 13.578q0 2.852-1.984 4.836t-4.836 1.984l-13.578 0q-2.852 0-4.836-1.984t-1.984-4.836l0-13.578q0-2.852 1.984-4.836t4.836-1.984l13.578 0q2.852 0 4.836 1.984t1.984 4.836zm36.27 0l0 13.578q0 2.852-1.984 4.836t-4.836 1.984l-13.578 0q-2.852 0-4.836-1.984t-1.984-4.836l0-13.578q0-2.852 1.984-4.836t4.836-1.984l13.578 0q2.852 0 4.836 1.984t1.984 4.836z",
+    width: 100,
+    height: 27.284,
+};
+
 type State = {|
     isInputFocused: boolean,
     isInputActive: boolean,
@@ -126,86 +130,6 @@ class Choice extends React.Component<$FlowFixMe, State> {
         }
     }
 
-    componentWillUnmount() {
-        if (this.justFinishedTimeoutID != null) {
-            // TODO(jeff, CP-3128): Use Wonder Blocks Timing API
-            // eslint-disable-next-line no-restricted-syntax
-            clearTimeout(this.justFinishedTimeoutID);
-        }
-    }
-
-    onInputFocus: () => void = () => {
-        this.setState({isInputFocused: true});
-    };
-
-    onInputBlur: () => void = () => {
-        this.setState({isInputFocused: false});
-    };
-
-    onInputMouseDown: (SyntheticMouseEvent<> | SyntheticTouchEvent<>) => void =
-        (e) => {
-            if (e.type === "mousedown" && this.justFinishedTouch) {
-                return;
-            }
-
-            this.setState({isInputActive: true});
-
-            // Simulate Chrome's radio button behavior in all browsers: when the
-            // mouse goes down or up, the radio button should become focused.
-            // That way, the newly-selected answer becomes highlighted after click.
-            if (this.props.apiOptions.satStyling && this._input) {
-                this._input.focus();
-            }
-        };
-
-    onInputMouseUp: (SyntheticMouseEvent<> | SyntheticTouchEvent<>) => void = (
-        e,
-    ) => {
-        if (e.type === "mouseup" && this.justFinishedTouch) {
-            return;
-        }
-
-        // NOTE(emily): We do some special handling here of touch events to
-        // make the "active" effect look better. In particular, when you click
-        // using touch events, we get a series of events going
-        // touchstart -> (delay) -> touchend -> mousedown -> mouseup -> click
-        // In order to make sure that we don't turn the active state off and on
-        // and off again during the touchend -> mousedown -> mouseup series, we
-        // set a flag (this.justFinishedTouch) after the touchend, and ignore
-        // the mousedown and mouseup events. Then, a little while later, we
-        // turn the flag off. Instead of turning the active state off right at
-        // the beginning, we wait for a little bit to sync it up better with
-        // the click event.
-        if (e.type === "touchend") {
-            this.justFinishedTouch = true;
-
-            // TODO(jeff, CP-3128): Use Wonder Blocks Timing API
-            /* eslint-disable no-restricted-syntax */
-            if (this.justFinishedTimeoutID != null) {
-                clearTimeout(this.justFinishedTimeoutID);
-            }
-            this.justFinishedTimeoutID = setTimeout(() => {
-                this.setState({isInputActive: false});
-                this.justFinishedTouch = false;
-            }, TouchIgnoreTimeout);
-            /* eslint-enable no-restricted-syntax */
-            return;
-        }
-
-        this.setState({isInputActive: false});
-
-        // Simulate Chrome's radio button behavior in all browsers: when the
-        // mouse goes down or up, the radio button should become focused.
-        // That way, the newly-selected answer becomes highlighted after click.
-        if (this.props.apiOptions.satStyling && this._input) {
-            this._input.focus();
-        }
-    };
-
-    onInputMouseOut: () => void = () => {
-        this.setState({isInputActive: false});
-    };
-
     inputRef: ($FlowFixMe) => void = (ref) => {
         this._input = ref;
     };
@@ -235,7 +159,10 @@ class Choice extends React.Component<$FlowFixMe, State> {
         );
     };
 
-    renderChoiceIcon: () => React.Node = () => {
+    renderChoiceIcon: (args: {|
+        isFocused: boolean,
+        isPressed: boolean,
+    |}) => React.Node = ({isFocused, isPressed}) => {
         const {radioStyleVersion, primaryProductColor} =
             this.props.apiOptions.styling;
         const finalStyles =
@@ -252,8 +179,8 @@ class Choice extends React.Component<$FlowFixMe, State> {
                 pos={this.props.pos}
                 correct={this.props.correct}
                 crossedOut={this.props.crossedOut}
-                pressed={this.state.isInputActive}
-                focused={this.state.isInputFocused}
+                pressed={isPressed}
+                focused={isFocused}
                 checked={this.props.checked}
                 showCorrectness={this.props.showCorrectness}
                 reviewMode={this.props.reviewMode}
@@ -264,26 +191,6 @@ class Choice extends React.Component<$FlowFixMe, State> {
         );
     };
 
-    _setChecked: (boolean) => void = (willBeChecked) => {
-        if (willBeChecked) {
-            // If we're checking a crossed-out option, let's also uncross it.
-            this._sendChange({checked: true, crossedOut: false});
-        } else {
-            this._sendChange({checked: false});
-        }
-    };
-
-    // NOTE(mdr): This method expects to be auto-bound. If this component is
-    //     converted to an ES6 class, take care to auto-bind this method!
-    _setCrossedOut: (boolean) => void = (willBeCrossedOut) => {
-        if (willBeCrossedOut) {
-            // If we're crossing out a checked option, let's also uncheck it.
-            this._sendChange({checked: false, crossedOut: true});
-        } else {
-            this._sendChange({crossedOut: false});
-        }
-    };
-
     // Call `this.props.onChange` with the given values. Any keys that are not
     // specified will be filled in with the current value. (For example, if
     // `checked` is specified but `crossedOut` is not, then `crossedOut` will
@@ -291,15 +198,11 @@ class Choice extends React.Component<$FlowFixMe, State> {
     //
     // This enables us to use shorthand inside this component, while
     // maintaining a consistent API for the parent.
-    _sendChange: ($FlowFixMe) => void = (newValues) => {
-        const checked =
-            newValues.checked != null ? newValues.checked : this.props.checked;
-
-        const crossedOut =
-            newValues.crossedOut != null
-                ? newValues.crossedOut
-                : this.props.crossedOut;
-
+    _sendChange: ({|checked?: boolean, crossedOut?: boolean|}) => void = (
+        newValues,
+    ) => {
+        const checked = newValues.checked ?? this.props.checked;
+        const crossedOut = newValues.crossedOut ?? this.props.crossedOut;
         this.props.onChange({checked, crossedOut});
     };
 
@@ -312,99 +215,6 @@ class Choice extends React.Component<$FlowFixMe, State> {
 
     render(): React.Node {
         const sat = this.props.apiOptions.satStyling;
-        const isMobile = this.props.apiOptions.isMobile;
-
-        const {radioStyleVersion} = this.props.apiOptions.styling;
-        const finalStyles =
-            typeof radioStyleVersion === "undefined"
-                ? false
-                : radioStyleVersion === "final";
-
-        const className = classNames(
-            this.props.className,
-            "checkbox-label",
-            css(
-                styles.label,
-                isMobile && sharedStyles.disableTextSelection,
-                !sat && styles.responsiveLabel,
-                sat && styles.satLabel,
-            ),
-        );
-
-        const satRadioMenuContainer = classNames(
-            css(
-                this.state.isInputFocused && styles.satDescriptionInputFocused,
-                this.state.isInputActive && styles.satDescriptionInputActive,
-            ),
-        );
-
-        // If we're showing an answer to be incorrect, we render it as
-        // unchecked, regardless of the `checked` state we've stored.
-        //
-        // This is because the existence of a selected radio button makes it
-        // impossible to tab-navigate to any other choices (standard radio
-        // behavior), but the selected answer is now disabled and not tabbable,
-        // which means that non-mouse/non-touch users can't select another
-        // answer to try again!
-        //
-        // (This behavior is only necessary for type "radio", but we also apply
-        // it for type "checkbox", for consistency.)
-        const showingIncorrectness =
-            this.props.showCorrectness && !this.props.correct;
-        const inputIsChecked = this.props.checked && !showingIncorrectness;
-
-        // There's two different input components we could use (the builtin
-        // input component, or the ToggleableRadioButton component). These are
-        // the props that we will pass to either.
-        const commonInputProps = {
-            type: this.props.type,
-            name: this.props.groupName,
-            id: `${this.props.groupName}-choice-${this.props.pos}`,
-            checked: inputIsChecked,
-            disabled: this.props.disabled,
-            onFocus: this.onInputFocus,
-            onBlur: this.onInputBlur,
-            className: css(
-                // intermediate styles are not different for radio and
-                // checkbox, and have a separate active state.
-                !finalStyles && sharedStyles.perseusInteractive,
-                !finalStyles && styles.input,
-                !finalStyles && sharedStyles.responsiveInput,
-                !finalStyles && !sat && sharedStyles.responsiveRadioInput,
-                !finalStyles &&
-                    !sat &&
-                    this.state.isInputActive &&
-                    sharedStyles.responsiveRadioInputActive,
-                finalStyles && sharedStyles.perseusSrOnly,
-                sat && sharedStyles.perseusSrOnly,
-                sat && this.props.reviewMode && styles.satReviewInput,
-            ),
-        };
-
-        let input = null;
-        if (this.props.type === "radio") {
-            // This is a special radio button that allows a user to deselect
-            // it by merely clicking/selecting it again.
-            input = (
-                <ToggleableRadioButton
-                    onChecked={(willBeChecked) =>
-                        this._setChecked(willBeChecked)
-                    }
-                    goToPrevChoice={this.props.goToPrevChoice}
-                    goToNextChoice={this.props.goToNextChoice}
-                    inputRef={this.inputRef}
-                    {...commonInputProps}
-                />
-            );
-        } else {
-            input = (
-                <input
-                    onChange={(event) => this._setChecked(event.target.checked)}
-                    ref={this.inputRef}
-                    {...commonInputProps}
-                />
-            );
-        }
 
         const {reviewMode, correct, checked} = this.props;
         // HACK: while most of the styling for rendering SAT items is handled
@@ -428,25 +238,6 @@ class Choice extends React.Component<$FlowFixMe, State> {
             ),
         );
 
-        const checkboxContentClassName = classNames(
-            "checkbox",
-            css(
-                sharedStyles.perseusInteractive,
-                !sat && styles.choiceIconWrapper,
-                sat && styles.satCheckboxOptionContent,
-            ),
-        );
-
-        const checkboxAndOptionClassName = classNames(
-            "checkbox-and-option",
-            css(
-                !sat && styles.intermediateResponsiveCheckbox,
-                !sat &&
-                    reviewMode &&
-                    styles.intermediateResponsiveCheckboxReview,
-            ),
-        );
-
         const rationaleClassName = classNames(
             "perseus-radio-rationale-content",
             css(
@@ -456,97 +247,163 @@ class Choice extends React.Component<$FlowFixMe, State> {
             ),
         );
 
-        // In edit mode, we must allow selection of the contentEditable
-        // element inside, therefore we cannot use a label, which makes
-        // selection of anything inside automatically select the input
-        // element instead
-        const LabelOrDiv = this.props.editMode ? "div" : "label";
-
-        // We only show cross-out in certain products, and
-        // only when you're still _answering_ the question. We also show this
-        // for the SAT product area.
-        const crossOutEnabled = this.props.apiOptions.crossOutEnabled;
-        const showCrossOutMenu = crossOutEnabled && !this.props.showCorrectness;
-
         // We want to show the choices as dimmed out when the choices are
         // disabled. However, we don't want to do this in the SAT product and
         // we also don't want to do this when we're in review mode in the
         // content library.
         const showDimmed =
             (!sat && !reviewMode && this.props.apiOptions.readOnly) ||
-            (showCrossOutMenu && this.props.crossedOut);
+            this.props.crossedOut;
 
         return (
-            <div className={sat ? satRadioMenuContainer : undefined}>
-                <CrossOutMenuWrapper
-                    enabled={showCrossOutMenu}
-                    pos={this.props.pos}
-                    primaryProductColor={
-                        this.props.apiOptions.styling.primaryProductColor
-                    }
-                    crossedOut={this.props.crossedOut}
-                    onCrossedOutChange={this._setCrossedOut}
-                    isSatProduct={sat}
+            <div
+                style={{
+                    dispay: "flex",
+                    flexDirection: "column",
+                }}
+            >
+                <div
+                    style={{
+                        display: "flex",
+                        flexDirection: "row",
+                        width: "100%",
+                        opacity: showDimmed ? 0.5 : 1.0,
+                    }}
                 >
-                    <LabelOrDiv
-                        htmlFor={
-                            !this.props.editMode
-                                ? commonInputProps.id
-                                : undefined
+                    <Clickable
+                        onClick={() => {
+                            // If we're checking a crossed-out option, let's
+                            // also uncross it.
+                            this._sendChange({
+                                checked: true,
+                                crossedOut: false,
+                            });
+                        }}
+                        className={descriptionClassName}
+                        disabled={
+                            this.props.disabled ||
+                            this.props.apiOptions.staticRender ||
+                            this.props.apiOptions.readOnly
                         }
-                        className={className}
-                        style={{opacity: showDimmed ? 0.5 : 1.0}}
+                        aria-label={`Select Choice ${getChoiceLetter(
+                            this.props.pos,
+                        )}`}
+                        aria-checked={this.props.checked}
+                        role={"checkbox"}
+                        style={{flex: 1}}
                     >
-                        <div
-                            className={descriptionClassName}
-                            onMouseDown={this.onInputMouseDown}
-                            onMouseUp={this.onInputMouseUp}
-                            onMouseOut={this.onInputMouseOut}
-                            onTouchStart={this.onInputMouseDown}
-                            onTouchEnd={this.onInputMouseUp}
-                        >
-                            <div className={checkboxAndOptionClassName}>
-                                <span className={checkboxContentClassName}>
-                                    {input}
-                                    {this.renderChoiceIcon()}
+                        {({hovered, focused, pressed}) => (
+                            <div
+                                style={{
+                                    display: "flex",
+                                    flexDirection: "row",
+                                    justifyContent: "center",
+                                    alignContent: "center",
+                                    paddingTop: Spacing.xSmall_8,
+                                    paddingBottom: Spacing.xSmall_8,
+                                }}
+                            >
+                                <span>
+                                    {this.renderChoiceIcon({
+                                        isFocused: focused,
+                                        isPressed: pressed,
+                                    })}
                                 </span>
-                                {/* A pseudo-label. <label> is slightly broken on iOS,
-                            so this works around that. Unfortunately, it is
-                            simplest to just work around that everywhere. */}
                                 <span
-                                    className={classNames(
-                                        ClassNames.RADIO.OPTION_CONTENT,
-                                        ClassNames.INTERACTIVE,
-                                        css(
-                                            sat && styles.satRadioOptionContent,
-                                            sat &&
-                                                reviewMode &&
-                                                styles.satReviewRadioOptionContent,
-                                        ),
-                                    )}
-                                    style={{cursor: "default"}}
+                                    style={{
+                                        paddingLeft: Spacing.small_12,
+                                        textAlign: "left",
+                                        flex: 1,
+                                        paddingTop: 4,
+                                    }}
                                 >
-                                    <div
-                                        className={css(
-                                            styles.optionStatusContainer,
-                                        )}
-                                    >
-                                        {this.renderOptionStatus()}
-                                    </div>
+                                    <div>{this.renderOptionStatus()}</div>
                                     <div>{this.props.content}</div>
                                 </span>
                             </div>
-                            {this.props.showRationale && (
-                                <div
-                                    className={rationaleClassName}
-                                    data-test-id={`perseus-radio-rationale-content-${this.props.pos}`}
+                        )}
+                    </Clickable>
+
+                    {this.props.apiOptions.crossOutEnabled && !reviewMode && (
+                        <Popover
+                            dismissEnabled
+                            content={({close}) => (
+                                <PopoverContent
+                                    title="Cross out"
+                                    content="Cross out option"
+                                    closeButtonVisible
+                                    actions={
+                                        <View>
+                                            <Strut size={Spacing.medium_16} />
+                                            <Button
+                                                kind="primary"
+                                                aria-label={`Cross out Choice ${getChoiceLetter(
+                                                    this.props.pos,
+                                                )}`}
+                                                disabled={
+                                                    this.props.apiOptions
+                                                        .readOnly || reviewMode
+                                                }
+                                                onClick={() => {
+                                                    if (
+                                                        !this.props.crossedOut
+                                                    ) {
+                                                        // If we're crossing
+                                                        // out a checked
+                                                        // option, let's also
+                                                        // uncheck it.
+                                                        this._sendChange({
+                                                            checked: false,
+                                                            crossedOut: true,
+                                                        });
+                                                    } else {
+                                                        this._sendChange({
+                                                            crossedOut: false,
+                                                        });
+                                                    }
+                                                    close();
+                                                }}
+                                            >
+                                                {this.props.crossedOut
+                                                    ? "Bring back"
+                                                    : "Cross out"}
+                                            </Button>
+                                        </View>
+                                    }
+                                />
+                            )}
+                        >
+                            {({open}) => (
+                                <Clickable
+                                    onClick={open}
+                                    aria-label={`Open menu for Choice ${getChoiceLetter(
+                                        this.props.pos,
+                                    )}`}
+                                    disabled={
+                                        this.props.apiOptions.staticRender
+                                    }
                                 >
-                                    {this.props.rationale}
-                                </div>
+                                    {({hovered, focused, pressed}) => (
+                                        <Icon
+                                            icon={ellipsisHorizontalIcon}
+                                            size={3}
+                                            color={Color.offBlack64}
+                                        />
+                                    )}
+                                </Clickable>
                             )}
-                        </div>
-                    </LabelOrDiv>
-                </CrossOutMenuWrapper>
+                        </Popover>
+                    )}
+                </div>
+
+                {this.props.showRationale && (
+                    <div
+                        className={rationaleClassName}
+                        data-test-id={`perseus-radio-rationale-content-${this.props.pos}`}
+                    >
+                        {this.props.rationale}
+                    </div>
+                )}
             </div>
         );
     }
@@ -567,16 +424,6 @@ const styles = StyleSheet.create({
         padding: "17px 14px",
     },
 
-    satDescriptionInputFocused: {
-        ...focusedStyleMixin,
-        display: "block",
-    },
-
-    satDescriptionInputActive: {
-        ...focusedStyleMixin,
-        backgroundColor: styleConstants.satActiveBackgroundColor,
-    },
-
     satDescriptionCorrect: {
         color: styleConstants.satCorrectColor,
     },
@@ -590,53 +437,6 @@ const styles = StyleSheet.create({
         backgroundColor: styleConstants.satIncorrectBackgroundColor,
     },
 
-    input: {
-        display: "inline-block",
-        width: 20,
-        margin: 3,
-        marginLeft: -20,
-        marginRight: 0,
-        float: "none",
-    },
-
-    satReviewInput: {
-        pointerEvents: "none",
-    },
-
-    satRadioOptionContent: {
-        userSelect: "text",
-        display: "block",
-        marginLeft: 45,
-        // Overriding here, not sure why typically set
-        // to "cursor: default" in js
-        cursor: "inherit",
-    },
-
-    satReviewRadioOptionContent: {
-        fontWeight: "bold",
-    },
-
-    satCheckboxOptionContent: {
-        position: "absolute",
-        display: "block",
-        top: "50%",
-        margin: "-16px 0 0 0",
-        width: "auto",
-    },
-
-    choiceIconWrapper: {
-        display: "flex",
-        marginRight: 12,
-
-        // NOTE(mdr): Without this style, the bubbles shrink on iOS
-        //     when answer text gets long.
-        flexShrink: 0,
-    },
-
-    optionStatusContainer: {
-        display: "block",
-    },
-
     rationale: {
         display: "block",
     },
@@ -655,38 +455,6 @@ const styles = StyleSheet.create({
         marginTop: 13,
         marginLeft: 45,
     },
-
-    label: {
-        display: "block",
-        transition: "opacity 0.2s ease-out",
-    },
-
-    responsiveLabel: {
-        WebkitTapHighlightColor: "transparent",
-        display: "flex",
-
-        // Ensure that all items consume the full height of the choice.
-        // That way, the cross-out menu click target is full-height,
-        // which makes it easier to click!
-        alignItems: "stretch",
-    },
-
-    satLabel: {
-        cursor: "pointer",
-    },
-
-    intermediateResponsiveCheckbox: {
-        display: "flex",
-        alignItems: "center",
-
-        padding: intermediateCheckboxPadding,
-        [mediaQueries.smOrSmaller]: {
-            padding: intermediateCheckboxPaddingPhone,
-        },
-    },
-    intermediateResponsiveCheckboxReview: {
-        alignItems: "flex-start",
-    },
 });
 
 export default Choice;