@khanacademy/perseus 2.1.0 → 4.0.0

package/src/widgets/graded-group-answer-bar.tsx

@@ -0,0 +1,142 @@
+/**
+ * Renders answer bar for mobile graded groups. [STATELESS]
+ */
+import Button from "@khanacademy/wonder-blocks-button";
+import Color from "@khanacademy/wonder-blocks-color";
+import * as i18n from "@khanacademy/wonder-blocks-i18n";
+import * as React from "react";
+
+import InlineIcon from "../components/inline-icon";
+import {iconStar, iconTryAgain} from "../icon-paths";
+import {phoneMargin, negativePhoneMargin} from "../styles/constants";
+
+import type {APIOptions} from "../types";
+
+export type ANSWER_BAR_STATES = // Initial state before the question is answerable.  The user must complete
+    // each of the widgets before the answer bar becomes visible.
+    // The 'Check' button is active whenever the question is answerable or any
+    // of the input widgets have been modified after getting the answer wrong.
+    | "HIDDEN" // The 'Check' button is disabled and there is no message.  This occurs when
+    // some of the widgets haven't been filled in after the has already become
+    // visible.
+    | "ACTIVE" // This happens immediately after clicking 'Check' with a wrong answer.
+    // The 'Check' button is disabled and the 'Try Again' message is displayed.
+    | "INACTIVE" // Final state.  This occurs after the user submits the correct answer.
+    // The widgets in this grade-group are disabled.
+    | "INCORRECT"
+    | "CORRECT";
+
+type Props = {
+    answerBarState: ANSWER_BAR_STATES;
+    apiOptions: APIOptions;
+    onCheckAnswer: () => unknown;
+    // The function to call when clicking "Next question" after correctly
+    // answering one graded group out of a set. If this is null, the
+    // "Next question" button will not appear.
+    onNextQuestion?: () => unknown;
+};
+
+class GradedGroupAnswerBar extends React.Component<Props> {
+    render(): React.ReactNode {
+        const {apiOptions, answerBarState, onCheckAnswer, onNextQuestion} =
+            this.props;
+
+        const answerBarStyle = {
+            ...styles.answerBar,
+            backgroundColor:
+                answerBarState === "CORRECT" ? Color.offWhite : "white",
+            // Center the "Correct!" message only when there's no next question
+            justifyContent:
+                answerBarState === "CORRECT" && !onNextQuestion
+                    ? "center"
+                    : "space-between",
+        } as const;
+
+        const message =
+            answerBarState === "INCORRECT" ? (
+                <span style={styles.text}>
+                    <span style={styles.tryAgainIcon}>
+                        <InlineIcon {...iconTryAgain} />
+                    </span>
+                    <span style={{marginLeft: 8}}>{i18n._("Keep trying")}</span>
+                </span>
+            ) : (
+                <span />
+            ); // empty span keeps the button on the right side
+
+        if (answerBarState !== "CORRECT") {
+            const buttonLabel =
+                answerBarState === "INCORRECT"
+                    ? i18n._("Try again")
+                    : i18n._("Check");
+
+            return (
+                <div style={answerBarStyle}>
+                    {message}
+                    <Button
+                        disabled={
+                            apiOptions.readOnly || answerBarState !== "ACTIVE"
+                        }
+                        onClick={onCheckAnswer}
+                    >
+                        {buttonLabel}
+                    </Button>
+                </div>
+            );
+        }
+        return (
+            <div style={answerBarStyle}>
+                <span style={styles.text}>
+                    <span style={{fontSize: 28, color: Color.green}}>
+                        <InlineIcon {...iconStar} style={{marginBottom: 5}} />
+                    </span>
+                    <span
+                        role="alert"
+                        aria-label={i18n._("Correct!")}
+                        style={{marginLeft: 8}}
+                    >
+                        {i18n._("Correct!")}
+                    </span>
+                </span>
+                {onNextQuestion && (
+                    <Button onClick={onNextQuestion}>
+                        {i18n._("Next question")}
+                    </Button>
+                )}
+            </div>
+        );
+    }
+}
+
+const fontSize = 17;
+
+const styles = {
+    answerBar: {
+        display: "flex",
+        alignItems: "center",
+        height: 68, // so that we don't have calculate the vertical padding
+        marginLeft: negativePhoneMargin,
+        marginRight: negativePhoneMargin,
+        marginBottom: negativePhoneMargin,
+        marginTop: phoneMargin,
+        paddingLeft: phoneMargin,
+        paddingRight: 10,
+        borderTop: `1px solid ${Color.offBlack50}`,
+    },
+
+    tryAgainIcon: {
+        fontSize: 28,
+        color: "#63D9EA",
+        transform: "scale(-1,1) rotate(-268deg)",
+    },
+
+    text: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        fontWeight: "bold",
+        fontSize: fontSize,
+    },
+} as const;
+
+export default GradedGroupAnswerBar;

package/src/widgets/graded-group-set.tsx

@@ -0,0 +1,296 @@
+import {linterContextDefault} from "@khanacademy/perseus-linter";
+import Color from "@khanacademy/wonder-blocks-color";
+import * as i18n from "@khanacademy/wonder-blocks-i18n";
+import {StyleSheet, css} from "aphrodite";
+import * as React from "react";
+
+import {getDependencies} from "../dependencies";
+import * as Changeable from "../mixins/changeable";
+import {
+    gray76,
+    tableBackgroundAccent,
+    phoneMargin,
+    negativePhoneMargin,
+} from "../styles/constants";
+import a11y from "../util/a11y";
+
+import {GradedGroup} from "./graded-group";
+
+import type {
+    PerseusGradedGroupSetWidgetOptions,
+    PerseusGradedGroupWidgetOptions,
+} from "../perseus-types";
+import type {FocusPath, WidgetExports, WidgetProps} from "../types";
+
+type IndicatorsProps = {
+    currentGroup: number;
+    gradedGroups: ReadonlyArray<PerseusGradedGroupWidgetOptions>;
+    onChangeCurrentGroup: (groupNumber: number) => void;
+};
+
+class Indicators extends React.Component<IndicatorsProps> {
+    handleKeyDown = (e: React.KeyboardEvent, i: number) => {
+        if (e.key === "Enter" || e.key === " ") {
+            this.props.onChangeCurrentGroup(i);
+        }
+    };
+
+    render(): React.ReactNode {
+        return (
+            <ul className={css(styles.indicatorContainer)}>
+                {this.props.gradedGroups.map(({title}, i) => (
+                    <li
+                        role="button"
+                        aria-label={i18n._("Skip to %(title)s", {
+                            title,
+                        })}
+                        key={title}
+                        className={css(
+                            styles.indicator,
+                            i === this.props.currentGroup &&
+                                styles.selectedIndicator,
+                        )}
+                        tabIndex={0}
+                        onClick={() => this.props.onChangeCurrentGroup(i)}
+                        onKeyDown={(e) => this.handleKeyDown(e, i)}
+                    >
+                        {i === this.props.currentGroup && (
+                            <span className={css(a11y.srOnly)}>
+                                {i18n._("Current")}
+                            </span>
+                        )}
+                    </li>
+                ))}
+            </ul>
+        );
+    }
+}
+
+type RenderProps = PerseusGradedGroupSetWidgetOptions; // no transform
+type Rubric = PerseusGradedGroupSetWidgetOptions;
+
+type Props = Changeable.ChangeableProps &
+    WidgetProps<RenderProps, Rubric> & {
+        trackInteraction: () => void;
+    };
+
+type DefaultProps = {
+    gradedGroups: Props["gradedGroups"];
+    linterContext: Props["linterContext"];
+};
+
+type State = {
+    currentGroup: number;
+};
+
+// TODO(jared): find a better name for this :) and for GradedGroup; the names
+// are currently a little confusing.
+class GradedGroupSet extends React.Component<Props, State> {
+    // @ts-expect-error [FEI-5003] - TS2564 - Property '_childGroup' has no initializer and is not definitely assigned in the constructor.
+    _childGroup: GradedGroup;
+
+    static defaultProps: DefaultProps = {
+        gradedGroups: [],
+        linterContext: linterContextDefault,
+    };
+
+    state: State = {
+        currentGroup: 0,
+    };
+
+    shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
+        nextProps.gradedGroups as ReadonlyArray<PerseusGradedGroupWidgetOptions>;
+        return nextProps !== this.props || nextState !== this.state;
+    }
+
+    change: (...args: ReadonlyArray<unknown>) => any = (...args) => {
+        // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
+        return Changeable.change.apply(this, args);
+    };
+
+    // Mobile API
+    getInputPaths: () => ReadonlyArray<ReadonlyArray<string>> = () => {
+        return this._childGroup.getInputPaths();
+    };
+
+    setInputValue: (arg1: FocusPath, arg2: any, arg3: any) => any = (
+        path,
+        newValue,
+        cb,
+    ) => {
+        return this._childGroup.setInputValue(path, newValue, cb);
+    };
+
+    focus: () => boolean = () => {
+        return this._childGroup.focus();
+    };
+
+    focusInputPath: (arg1: FocusPath) => void = (path) => {
+        this._childGroup.focusInputPath(path);
+    };
+
+    blurInputPath: (arg1: FocusPath) => void = (path) => {
+        this._childGroup.blurInputPath(path);
+    };
+
+    handleNextQuestion: () => void = () => {
+        const {currentGroup} = this.state;
+        const numGroups = this.props.gradedGroups.length;
+
+        if (currentGroup < numGroups - 1) {
+            this.setState({currentGroup: currentGroup + 1});
+        }
+    };
+
+    render(): React.ReactNode {
+        // When used in the context of TranslationEditor, render the
+        // GradedGroup widget one below another instead of using an indicator
+        // to click and switch between different graded groups. Translators
+        // prefer to see all strings/labels on all GradedGroups readily visible
+        // together instead of clicking on indicators to switch between them.
+        const {JIPT} = getDependencies();
+        if (JIPT.useJIPT && this.props.gradedGroups.length > 1) {
+            return (
+                <div className={css(styles.container)}>
+                    {this.props.gradedGroups.map((gradedGroup, i) => {
+                        return (
+                            // TODO(jeremy): Don't spread this.props, instead
+                            // pass in all props GradedGroup needs explicilty
+                            // $FlowFixMe[prop-missing]
+                            // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
+                            <GradedGroup
+                                key={i}
+                                {...this.props}
+                                {...gradedGroup}
+                                inGradedGroupSet={false}
+                                linterContext={this.props.linterContext}
+                            />
+                        );
+                    })}
+                </div>
+            );
+        }
+
+        const currentGroup = this.props.gradedGroups[this.state.currentGroup];
+
+        if (!currentGroup) {
+            return <span>{i18n.doNotTranslate("No current group...")}</span>;
+        }
+
+        const numGroups = this.props.gradedGroups.length;
+        const handleNextQuestion =
+            this.state.currentGroup < numGroups - 1
+                ? this.handleNextQuestion
+                : null;
+
+        return (
+            <div className={css(styles.container)}>
+                <div className={css(styles.top)}>
+                    <div className={css(styles.title)}>
+                        {currentGroup.title}
+                    </div>
+                    <div className={css(styles.spacer)} />
+                    <Indicators
+                        currentGroup={this.state.currentGroup}
+                        gradedGroups={this.props.gradedGroups}
+                        onChangeCurrentGroup={(currentGroup) =>
+                            this.setState({currentGroup})
+                        }
+                    />
+                </div>
+                {/* TODO(jeremy): Don't spread this.props, instead
+                    pass in all props GradedGroup needs explicitly */}
+                {/* $FlowFixMe[prop-missing] */}
+                {/* @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call. */}
+                <GradedGroup
+                    key={this.state.currentGroup}
+                    // @ts-expect-error [FEI-5003] - TS2322 - Type 'GradedGroup | null' is not assignable to type 'GradedGroup'.
+                    //  Type 'null' is not assignable to type 'GradedGroup'.
+                    ref={(comp) => (this._childGroup = comp)}
+                    // We should pass in the set of props explicitly
+                    {...this.props}
+                    {...currentGroup}
+                    inGradedGroupSet={true}
+                    // $FlowFixMe[incompatible-type]
+                    title={null}
+                    // $FlowFixMe[incompatible-type]
+                    onNextQuestion={handleNextQuestion}
+                    linterContext={this.props.linterContext}
+                />
+            </div>
+        );
+    }
+}
+
+const traverseChildWidgets: (arg1: any, arg2: any) => any = function (
+    props,
+    traverseRenderer,
+) {
+    // NOTE(jared): I have no idea how this works
+    return {
+        groups: props.gradedGroups.map(traverseRenderer),
+    };
+};
+
+export default {
+    name: "graded-group-set",
+    displayName: "Graded group set (articles only)",
+    widget: GradedGroupSet,
+    traverseChildWidgets: traverseChildWidgets,
+    // TODO(michaelpolyak): This widget should be available for articles only
+    hidden: false,
+    tracking: "all",
+    isLintable: true,
+} as WidgetExports<typeof GradedGroupSet>;
+
+const styles = StyleSheet.create({
+    top: {
+        display: "flex",
+        flexDirection: "row",
+    },
+    spacer: {
+        flex: 1,
+    },
+
+    title: {
+        fontSize: 12,
+        color: Color.offBlack64,
+        textTransform: "uppercase",
+        marginBottom: 11,
+        letterSpacing: 0.8,
+    },
+
+    indicatorContainer: {
+        display: "flex",
+        flexDirection: "row",
+        listStyle: "none",
+        margin: "unset",
+    },
+
+    indicator: {
+        width: 10,
+        height: 10,
+        borderRadius: "100%",
+        border: "3px solid",
+        borderColor: Color.blue,
+        marginLeft: 5,
+        cursor: "pointer",
+    },
+
+    selectedIndicator: {
+        backgroundColor: Color.blue,
+    },
+
+    container: {
+        borderTop: `1px solid ${gray76}`,
+        borderBottom: `1px solid ${gray76}`,
+        backgroundColor: tableBackgroundAccent,
+        marginLeft: negativePhoneMargin,
+        marginRight: negativePhoneMargin,
+        paddingBottom: phoneMargin,
+        paddingLeft: phoneMargin,
+        paddingRight: phoneMargin,
+        paddingTop: 10,
+        width: "auto",
+    },
+});