@khanacademy/perseus 19.1.5 → 19.1.7

package/src/widgets/radio/choice-icon/choice-icon.tsx

@@ -1,218 +0,0 @@
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-/* Component for rendering a letter icon in a library radio choice */
-
-import Color from "@khanacademy/wonder-blocks-color";
-import {StyleSheet, css} from "aphrodite";
-import * as React from "react";
-
-import InlineIcon from "../../../components/inline-icon";
-import {iconCheck, iconMinus} from "../../../icon-paths";
-import * as styleConstants from "../../../styles/constants";
-import FocusRing from "../focus-ring";
-import {getChoiceLetter} from "../util";
-
-import CrossOutLine from "./cross-out-line";
-import sharedStyles, {CHOICE_ICON_SIZE} from "./shared-styles";
-
-type ChoiceIconProps = {
-    pos: number;
-    checked: boolean;
-    crossedOut: boolean;
-    focused: boolean;
-    hovered: boolean;
-    pressed: boolean;
-    correct: boolean;
-    showCorrectness: boolean;
-    multipleSelect: boolean;
-    reviewMode: boolean;
-    previouslyAnswered: boolean;
-};
-
-type ChoiceInnerProps = {
-    pos: number;
-    showCorrectness: boolean;
-    correct: boolean | null | undefined;
-};
-
-function ChoiceInner(props: ChoiceInnerProps) {
-    const {pos, showCorrectness, correct} = props;
-    const letter = getChoiceLetter(pos);
-
-    if (!showCorrectness) {
-        return letter;
-    }
-    if (correct) {
-        return (
-            <InlineIcon
-                {...iconCheck}
-                style={{
-                    position: "relative",
-                    top: -1,
-                }}
-            />
-        );
-    }
-    return <InlineIcon {...iconMinus} />;
-}
-
-// Handle dynamic styling of the multiple choice icon. Most
-// MC icon styles are constant, but we do allow the caller
-// to specify the selected color, and thus must control styles
-// related to the selected state dynamically.
-function getDynamicStyles(
-    checked: boolean,
-    showCorrectness: boolean,
-    pressed: boolean,
-    multipleSelect: boolean,
-    correct?: boolean | null,
-): {
-    backgroundColor: string | null | undefined;
-    borderColor: string;
-    color: string;
-    borderRadius: number;
-} {
-    let backgroundColor;
-    let borderColor;
-    let color;
-    if (!showCorrectness && pressed) {
-        borderColor = Color.blue;
-        color = Color.blue;
-        backgroundColor = "transparent";
-    } else if (checked) {
-        const bg = showCorrectness && correct ? Color.green : Color.blue;
-        color = styleConstants.white;
-        backgroundColor = bg;
-        borderColor = bg;
-    } else {
-        borderColor = Color.offBlack64;
-        color = Color.offBlack64;
-    }
-
-    // define shape
-    let borderRadius;
-    if (multipleSelect) {
-        borderRadius = 3;
-    } else {
-        borderRadius = CHOICE_ICON_SIZE;
-    }
-
-    return {backgroundColor, borderColor, color, borderRadius};
-}
-
-const ChoiceIcon = function (props: ChoiceIconProps): React.ReactElement {
-    const {
-        checked,
-        crossedOut,
-        showCorrectness,
-        correct,
-        focused,
-        hovered,
-        multipleSelect,
-        pos,
-        previouslyAnswered,
-        pressed,
-    } = props;
-
-    const dynamicStyles = getDynamicStyles(
-        checked,
-        showCorrectness,
-        pressed,
-        multipleSelect,
-        correct,
-    );
-
-    return (
-        <div className={css(sharedStyles.iconWrapper)}>
-            <FocusRing
-                color={Color.blue}
-                visible={focused || hovered}
-                multipleSelect={multipleSelect}
-            >
-                <div
-                    // @ts-expect-error - TS2322 - Type '{ backgroundColor: string | null | undefined; borderColor: string; color: string; borderRadius: number; }' is not assignable to type 'Properties<string | number, string & {}>'.
-                    style={dynamicStyles}
-                    data-test-id="choice-icon__library-choice-icon"
-                    className={css(
-                        styles.circle,
-                        showCorrectness && correct && styles.circleCorrect,
-                        showCorrectness && !correct && styles.circleIncorrect,
-                        showCorrectness &&
-                            !correct &&
-                            (checked || previouslyAnswered) &&
-                            styles.circleIncorrectAnswered,
-                    )}
-                    // used in BaseRadio editMode to check
-                    // if we actually clicked on the radio icon
-                    data-is-radio-icon={true}
-                >
-                    <div className={css(styles.innerWrapper)}>
-                        {/* @ts-expect-error - TS2786 - 'ChoiceInner' cannot be used as a JSX component. */}
-                        <ChoiceInner
-                            pos={pos}
-                            showCorrectness={showCorrectness}
-                            correct={correct}
-                        />
-                    </div>
-                </div>
-            </FocusRing>
-            {crossedOut && <CrossOutLine color={dynamicStyles.borderColor} />}
-        </div>
-    );
-};
-
-const styles = StyleSheet.create({
-    innerWrapper: {
-        width: CHOICE_ICON_SIZE,
-        height: CHOICE_ICON_SIZE,
-
-        // Center the contents of the icon.
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    circle: {
-        // Make the circle
-        width: CHOICE_ICON_SIZE,
-        height: CHOICE_ICON_SIZE,
-        boxSizing: "border-box",
-        borderStyle: "solid",
-        borderWidth: 2,
-
-        // The default icons have letters in them. Style those letters.
-        fontFamily: styleConstants.baseFontFamily,
-        // NOTE(emily): We explicitly set the font weight instead of using the
-        // "bold font family" so that characters which fall back to the default
-        // font get bolded too.
-        fontWeight: "bold",
-        fontSize: 12,
-
-        // Center the icon wrapper.
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        // HACK(emily): I don't know why adding this line height makes the text
-        // appear centered better than any other value, but it does. In
-        // particular, at large zoom levels this line height does almost
-        // nothing, but at the default size this shifts the letter down one
-        // pixel so it is much better centered.
-        lineHeight: "1px",
-    },
-
-    circleCorrect: {
-        fontSize: CHOICE_ICON_SIZE,
-    },
-
-    circleIncorrect: {
-        fontSize: CHOICE_ICON_SIZE,
-        borderColor: styleConstants.gray68,
-        color: styleConstants.gray68,
-    },
-
-    circleIncorrectAnswered: {
-        backgroundColor: Color.red,
-        borderColor: Color.red,
-        color: Color.white,
-    },
-});
-
-export default ChoiceIcon;

package/src/widgets/radio/choice-icon/cross-out-line.tsx

@@ -1,51 +0,0 @@
-/* Component for rendering a letter icon in radio choice */
-
-import {StyleSheet, css} from "aphrodite";
-import * as React from "react";
-
-import {CHOICE_ICON_SIZE} from "./shared-styles";
-
-// The "cross-out line" SVG is a bit bigger than the choice icon, to provide
-// extra space for the cute rounded line cap.
-const CROSS_OUT_LINE_PADDING = 2;
-const CROSS_OUT_LINE_SIZE = CHOICE_ICON_SIZE + CROSS_OUT_LINE_PADDING * 2;
-
-/**
- * The "cross-out line" that appears over the icon when the choice has been
- * `crossedOut`.
- */
-const CrossOutLine = function (props: {color: string}): React.ReactElement {
-    return (
-        <svg
-            width={CROSS_OUT_LINE_SIZE}
-            height={CROSS_OUT_LINE_SIZE}
-            viewBox={`0 0 ${CROSS_OUT_LINE_SIZE} ${CROSS_OUT_LINE_SIZE}`}
-            className={css(styles.crossOutLine)}
-            data-test-id="choice-icon__cross-out-line"
-        >
-            <line
-                // The line stretches from the bottom-left to top-right.
-                // We don't quite go to the _very_ corner, because the cute
-                // rounded line cap needs to bleed into our padding.
-                x1={CROSS_OUT_LINE_PADDING}
-                x2={CROSS_OUT_LINE_SIZE - CROSS_OUT_LINE_PADDING}
-                y1={CROSS_OUT_LINE_SIZE - CROSS_OUT_LINE_PADDING}
-                y2={CROSS_OUT_LINE_PADDING}
-                stroke={props.color}
-                strokeWidth="2"
-                strokeLinecap="round"
-            />
-        </svg>
-    );
-};
-
-const styles = StyleSheet.create({
-    crossOutLine: {
-        // Center the icon within the container.
-        position: "absolute",
-        top: `0px`,
-        left: `0px`,
-    },
-});
-
-export default CrossOutLine;

package/src/widgets/radio/choice-icon/shared-styles.ts

@@ -1,15 +0,0 @@
-import {StyleSheet} from "aphrodite";
-
-import type {StyleDeclaration} from "aphrodite";
-
-const CHOICE_ICON_SIZE = 24;
-
-const styles: StyleDeclaration = StyleSheet.create({
-    iconWrapper: {
-        display: "inline-block",
-        position: "relative",
-    },
-});
-
-export {CHOICE_ICON_SIZE};
-export default styles;

package/src/widgets/radio/choice-none-above.tsx

@@ -1,56 +0,0 @@
-import * as i18n from "@khanacademy/wonder-blocks-i18n";
-import * as React from "react";
-
-import Renderer from "../../renderer";
-
-import Choice from "./choice";
-
-import type {ChoiceProps} from "./choice";
-
-type Props = ChoiceProps & {
-    showContent?: boolean;
-};
-
-type WithForwardRef = {
-    forwardedRef: React.ForwardedRef<HTMLButtonElement>;
-};
-
-type PropsWithForwardRef = Props & WithForwardRef;
-
-const ChoiceNoneAbove = function (
-    props: PropsWithForwardRef,
-): React.ReactElement {
-    const {showContent, content, forwardedRef, ...rest} = props;
-
-    const choiceProps = {
-        ...rest,
-        content: showContent ? (
-            content
-        ) : (
-            // We use a Renderer here because that is how
-            // `this.props.content` is wrapped otherwise.
-            // We pass in a key here so that we avoid a semi-spurious
-            // react warning when we render this in the same place
-            // as the previous choice content renderer.
-            // Note this destroys state, but since all we're doing
-            // is outputting "None of the above", that is okay.
-            //
-            // todo(matthewc): this seems like way overkill
-            // just to render a string
-            <Renderer
-                key="noneOfTheAboveRenderer"
-                content={i18n._("None of the above")}
-            />
-        ),
-    } as const;
-
-    return <Choice {...choiceProps} ref={forwardedRef} />;
-};
-
-ChoiceNoneAbove.defaultProps = {
-    showContent: true,
-};
-
-export default React.forwardRef<HTMLButtonElement, Props>((props, ref) => (
-    <ChoiceNoneAbove {...props} forwardedRef={ref} />
-));

package/src/widgets/radio/choice.jsx.fixture.ts

@@ -1,45 +0,0 @@
-export const instances: ReadonlyArray<unknown> = [
-    {} as Record<any, any>,
-    {
-        content: "Plain Content",
-    },
-    {
-        content: "Correct Content (Review)",
-        correct: true,
-        reviewMode: true,
-    },
-    {
-        content: "Incorrect Content (Review)",
-        correct: false,
-        reviewMode: true,
-    },
-    {
-        content: "Content (Review, correctness not specified)",
-        reviewMode: true,
-    },
-    {
-        content: "Content with Rationale",
-        rationale: "This is some additional information",
-        showRationale: true,
-    },
-    {
-        content: "Correct Content with Rationale (Review)",
-        correct: true,
-        rationale: "This is some additional information",
-        reviewMode: true,
-        showRationale: true,
-    },
-    {
-        content: "Incorrect Content with Rationale (Review)",
-        correct: false,
-        rationale: "This is some additional information",
-        reviewMode: true,
-        showRationale: true,
-    },
-    {
-        content: "Content with Rationale (Review, correctness not specified)",
-        rationale: "This is some additional information",
-        reviewMode: true,
-        showRationale: true,
-    },
-];