@khanacademy/perseus 1.4.1 → 2.0.0

package/src/components/possible-answers.jsx

@@ -1,36 +0,0 @@
-// @flow
-/**
- * In review mode (currently only visible in the sat-mission), NumericInput and
- * InputNumber use this component to display the set of correct answers.
- */
-
-import * as i18n from "@khanacademy/wonder-blocks-i18n";
-import PropTypes from "prop-types";
-import * as React from "react";
-import _ from "underscore";
-
-class PossibleAnswers extends React.Component<$FlowFixMe> {
-    static propTypes = {
-        answers: PropTypes.arrayOf(PropTypes.string),
-    };
-
-    render(): React.Node {
-        // It's redundant to show duplicate answers.
-        // So, remove duplicates from the given list of answer strings.
-        const answers = _.uniq(this.props.answers);
-
-        const answerComponents = _.map(answers, (answer) => {
-            // Plus, now that our answers are distinct, we can safely use the
-            // answer string as a key.
-            return <dd key={answer}>{answer}</dd>;
-        });
-        return (
-            <dl className="perseus-possible-answers">
-                <dt>{i18n.doNotTranslate("Correct Answer")}</dt>
-                {answerComponents}
-            </dl>
-        );
-    }
-}
-
-export default PossibleAnswers;

package/src/styles/widgets/definition.less

@@ -1,86 +0,0 @@
-@import "../variables.less";
-@import "../util.less";
-
-// HACK(michaelpolyak): As the Definition widget may be rendered within an
-// Article or an Exercise, we need to support the "legacy" way of styling for
-// the specific responsive rendering context. In order to match the surrounding
-// Perseus content styling, we copy and apply styles defined in
-// `perseus-renderer.less`, `articles.less` (both of which are now moved into
-// Perseus).
-
-// Desktop exercise styles
-.framework-perseus:not(.perseus-article):not(.perseus-mobile) {
-    .perseus-widget-definition {
-        .legacy-typography;
-    }
-}
-
-// Mobile exercise styles
-.framework-perseus:not(.perseus-article).perseus-mobile {
-    .perseus-widget-definition {
-        @desktop-width-min: 1200px;
-        @tablet-width-max: (@desktop-width-min - 1);
-
-        // Phone styles
-        @media (max-width: @pure-sm-max) {
-            font-size: 18px;
-            line-height: 1.4;
-        }
-
-        // Tablet styles
-        @media (min-width: @pure-md-min) and (max-width: @tablet-width-max) {
-            font-size: 20px;
-            line-height: 1.5;
-        }
-
-        // "Desktop" (resolution) styles (while rendering on a mobile device,
-        // ie. `this.props.apiOptions.isMobile` is `true`)
-        @media (min-width: @desktop-width-min) {
-            font-size: 22px;
-            line-height: 1.4;
-        }
-    }
-}
-
-// Default article styles
-.bibliotron-article.framework-perseus.perseus-article {
-    .perseus-widget-definition {
-        font-size: 18px;
-        line-height: 1.4;
-    }
-}
-
-// Desktop article styles
-.bibliotron-article.framework-perseus.perseus-article:not(.perseus-mobile) {
-    .perseus-widget-definition {
-        font-size: 20px;
-        line-height: 30px;
-    }
-}
-
-// Mobile article styles
-.bibliotron-article.framework-perseus.perseus-article.perseus-mobile {
-    .perseus-widget-definition {
-        @desktop-width-min: 1200px;
-        @tablet-width-max: (@desktop-width-min - 1);
-
-        // Phone styles
-        @media (max-width: @pure-sm-max) {
-            font-size: 18px;
-            line-height: 1.4;
-        }
-
-        // Tablet styles
-        @media (min-width: @pure-md-min) and (max-width: @tablet-width-max) {
-            font-size: 20px;
-            line-height: 1.5;
-        }
-
-        // "Desktop" (resolution) styles (while rendering on a mobile device,
-        // ie. `this.props.apiOptions.isMobile` is `true`)
-        @media (min-width: @desktop-width-min) {
-            font-size: 22px;
-            line-height: 1.4;
-        }
-    }
-}

package/src/widgets/radio/__stories__/sat-styles.stories.jsx

@@ -1,191 +0,0 @@
-// @flow
-import {action} from "@storybook/addon-actions";
-import * as React from "react";
-
-import {generateChoice} from "../../__testdata__/base-radio_testdata.js";
-import BaseRadio from "../base-radio.jsx";
-
-type StoryArgs = {|
-    multipleSelect: boolean,
-    editMode: boolean,
-    countChoices: boolean,
-|};
-
-type Story = {|
-    title: string,
-    args: StoryArgs,
-|};
-
-export default ({
-    title: "Perseus/Widgets/Radio/SAT Base Radio",
-    args: {
-        multipleSelect: false,
-        editMode: false,
-        countChoices: false,
-    },
-}: Story);
-
-const defaultProps = {
-    apiOptions: {
-        satStyling: true,
-    },
-    choices: [
-        generateChoice({
-            content: "Content 1",
-        }),
-        generateChoice({
-            content: "Content 2",
-        }),
-        generateChoice({
-            content: "Content 3",
-            correct: true,
-        }),
-        generateChoice({
-            isNoneOfTheAbove: true,
-        }),
-    ],
-    deselectEnabled: false,
-    editMode: false,
-    labelWrap: false,
-    countChoices: false,
-    numCorrect: 1,
-    multipleSelect: false,
-
-    // A callback indicating that this choice has changed. Its argument is
-    // an object with two keys: `checked` and `crossedOut`. Each contains
-    // an array of boolean values, specifying the new checked and
-    // crossed-out value of each choice.
-    onChange: action("changed"),
-
-    // Whether this widget was the most recently used widget in this
-    // Renderer. Determines whether we'll auto-scroll the page upon
-    // entering review mode.
-    isLastUsedWidget: false,
-};
-
-export const Interactive = (args: StoryArgs): React.Node => {
-    const overwrittenProps = {...defaultProps, ...args};
-    return <BaseRadio {...overwrittenProps} />;
-};
-
-export const SingleSelectWithNothingSelected = (
-    args: StoryArgs,
-): React.Node => {
-    const overwrittenProps = {...defaultProps, multipleSelect: false};
-    return <BaseRadio {...overwrittenProps} />;
-};
-
-export const MultipleSelectWithNothingSelected = (
-    args: StoryArgs,
-): React.Node => {
-    const overwrittenProps = {...defaultProps, multipleSelect: true};
-    return <BaseRadio {...overwrittenProps} />;
-};
-
-export const MultipleSelectWithCountChoicesLabel = (
-    args: StoryArgs,
-): React.Node => {
-    const overwrittenProps = {
-        ...defaultProps,
-        multipleSelect: true,
-        numCorrect: 2,
-        countChoices: true,
-    };
-    return <BaseRadio {...overwrittenProps} />;
-};
-
-export const SingleSelected = (args: StoryArgs): React.Node => {
-    const choices = Array(4)
-        .fill(null)
-        .map((_, i) => generateChoice({content: `Choice ${i + 1}`}));
-    choices[1].checked = true;
-
-    const overwrittenProps = {...defaultProps, multipleSelect: false, choices};
-    return <BaseRadio {...overwrittenProps} />;
-};
-
-export const MultipleSelected = (args: StoryArgs): React.Node => {
-    const choices = Array(4)
-        .fill(null)
-        .map((_, i) => generateChoice({content: `Choice ${i + 1}`}));
-    choices[1].checked = true;
-    choices[2].checked = true;
-
-    const overwrittenProps = {...defaultProps, multipleSelect: true, choices};
-    return <BaseRadio {...overwrittenProps} />;
-};
-
-export const SingleKitchenSink = (args: StoryArgs): React.Node => {
-    const choices = Array(4)
-        .fill(null)
-        .map((_, i) => {
-            const choice = generateChoice({
-                content: `Choice ${i + 1}`,
-                rationale: "This is a neat rationale",
-                hasRationale: true,
-                showRationale: true,
-                correct: false,
-                showCorrectness: true,
-            });
-
-            return choice;
-        });
-    choices[1].checked = true;
-    choices[2].correct = true;
-
-    const rubricChoices = choices.map(({correct}) => ({
-        // note(matthew): reviewModeRubric.choices requires content,
-        // but I don't see how it's getting used and Flow gets mad
-        // when I use choice.content because it's not a string.
-        // reviewModeRubric could probably use a look over.
-        content: "",
-        correct,
-    }));
-
-    const overwrittenProps = {
-        ...defaultProps,
-        multipleSelect: false,
-        reviewModeRubric: {choices: rubricChoices},
-        choices,
-    };
-    return <BaseRadio {...overwrittenProps} />;
-};
-
-export const MultipleKitchenSink = (args: StoryArgs): React.Node => {
-    const choices = Array(4)
-        .fill(null)
-        .map((_, i) => {
-            const choice = generateChoice({
-                content: `Choice ${i + 1}`,
-                rationale: "This is a neat rationale",
-                hasRationale: true,
-                showRationale: true,
-                correct: false,
-                showCorrectness: true,
-            });
-
-            return choice;
-        });
-    choices[1].checked = true;
-    choices[2].checked = true;
-    choices[2].correct = true;
-    choices[3].correct = true;
-
-    const rubricChoices = choices.map((c) => ({
-        // note(matthew): reviewModeRubric.choices requires content,
-        // but I don't see how it's getting used and Flow gets mad
-        // when I use choice.content because it's not a string.
-        // reviewModeRubric could probably use a look over.
-        content: "",
-        correct: c.correct,
-    }));
-
-    const overwrittenProps = {
-        ...defaultProps,
-        multipleSelect: true,
-        numCorrect: 2,
-        reviewModeRubric: {choices: rubricChoices},
-        choices,
-    };
-    return <BaseRadio {...overwrittenProps} />;
-};

package/src/widgets/radio/choice-icon/library-choice-icon.jsx

@@ -1,225 +0,0 @@
-// @flow
-/* 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.jsx";
-import {iconCheck, iconMinus} from "../../../icon-paths.js";
-import * as styleConstants from "../../../styles/constants.js";
-import FocusRing from "../focus-ring.jsx";
-
-import CrossOutLine from "./cross-out-line.jsx";
-import sharedStyles, {LIBRARY_ICON_SIZE} from "./shared-styles.js";
-
-type LibraryChoiceIconProps = {
-    letter: string,
-    checked: boolean,
-    crossedOut: boolean,
-    focused: boolean,
-    hovered: boolean,
-    pressed: boolean,
-    multipleSelect: boolean,
-    correct: ?boolean,
-    reviewMode: boolean,
-    showCorrectness: boolean,
-    primaryProductColor: string,
-    previouslyAnswered: boolean,
-    transparentBackground?: boolean,
-};
-
-function ChoiceInner(props: {
-    letter: string,
-    showCorrectness: boolean,
-    correct: ?boolean,
-}) {
-    const {letter, showCorrectness, correct} = props;
-
-    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,
-    primaryProductColor: string,
-    correct: ?boolean,
-    transparentBackground?: boolean,
-): {
-    backgroundColor: ?string,
-    borderColor: string,
-    color: string,
-    borderRadius: number,
-} {
-    let backgroundColor;
-    let borderColor;
-    let color;
-    if (!showCorrectness && pressed) {
-        borderColor = primaryProductColor;
-        color = primaryProductColor;
-        backgroundColor = transparentBackground
-            ? "transparent"
-            : styleConstants.white;
-    } else if (checked) {
-        // Note: kaGreen is not only the default product color,
-        // but also the "correctness" color
-        const bg =
-            showCorrectness && correct ? Color.green : primaryProductColor;
-        color = styleConstants.white;
-        backgroundColor = bg;
-        borderColor = bg;
-    } else {
-        borderColor = Color.offBlack64;
-        color = Color.offBlack64;
-    }
-
-    // define shape
-    let borderRadius;
-    if (multipleSelect) {
-        borderRadius = 3;
-    } else {
-        borderRadius = LIBRARY_ICON_SIZE;
-    }
-
-    return {backgroundColor, borderColor, color, borderRadius};
-}
-
-function LibraryChoiceIcon(props: LibraryChoiceIconProps): React.Node {
-    const {
-        checked,
-        crossedOut,
-        showCorrectness,
-        correct,
-        focused,
-        hovered,
-        multipleSelect,
-        primaryProductColor,
-        previouslyAnswered,
-        letter,
-        pressed,
-        transparentBackground,
-    } = props;
-
-    const dynamicStyles = getDynamicStyles(
-        checked,
-        showCorrectness,
-        pressed,
-        multipleSelect,
-        primaryProductColor,
-        correct,
-        transparentBackground,
-    );
-
-    return (
-        <div className={css(sharedStyles.iconWrapper)}>
-            <FocusRing
-                color={primaryProductColor}
-                visible={focused || hovered}
-                multipleSelect={multipleSelect}
-            >
-                <div
-                    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)}>
-                        <ChoiceInner
-                            letter={letter}
-                            showCorrectness={showCorrectness}
-                            correct={correct}
-                        />
-                    </div>
-                </div>
-            </FocusRing>
-            {crossedOut && <CrossOutLine color={dynamicStyles.borderColor} />}
-        </div>
-    );
-}
-
-const styles = StyleSheet.create({
-    innerWrapper: {
-        width: LIBRARY_ICON_SIZE,
-        height: LIBRARY_ICON_SIZE,
-
-        // Center the contents of the icon.
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    circle: {
-        // Make the circle
-        width: LIBRARY_ICON_SIZE,
-        height: LIBRARY_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: LIBRARY_ICON_SIZE,
-    },
-
-    circleIncorrect: {
-        fontSize: LIBRARY_ICON_SIZE,
-        borderColor: styleConstants.gray68,
-        color: styleConstants.gray68,
-    },
-
-    circleIncorrectAnswered: {
-        backgroundColor: Color.red,
-        borderColor: Color.red,
-        color: Color.white,
-    },
-});
-
-export default LibraryChoiceIcon;

package/src/widgets/radio/choice-icon/sat-choice-icon.jsx

@@ -1,120 +0,0 @@
-// @flow
-/* Component for rendering a letter icon in a SAT radio choice */
-
-import {StyleSheet, css} from "aphrodite";
-import * as React from "react";
-
-import * as styleConstants from "../../../styles/constants.js";
-
-import CrossOutLine from "./cross-out-line.jsx";
-import sharedStyles, {SAT_ICON_SIZE} from "./shared-styles.js";
-
-type SATChoiceIconProps = {
-    letter: string,
-    checked: boolean,
-    multipleSelect: boolean,
-    correct: boolean,
-    reviewMode: boolean,
-    crossedOut: boolean,
-};
-
-// TODO(amy): figure out a better scheme for specifying these
-// styles that isn't such a pain to grok. See some neat ideas
-// from MDR in https://phabricator.khanacademy.org/D35249.
-function constructSATStyles(
-    reviewMode: boolean,
-    correct: boolean,
-    checked: boolean,
-    multipleSelect: boolean,
-): {
-    color: string,
-    backgroundColor: ?string,
-    borderColor: string,
-    borderRadius: number,
-} {
-    let backgroundColor;
-    let borderColor = styleConstants.satBlue;
-    let color = styleConstants.satBlue;
-    if (reviewMode) {
-        if (correct) {
-            borderColor = styleConstants.satCorrectColor;
-            color = checked
-                ? styleConstants.white
-                : styleConstants.satCorrectColor;
-            backgroundColor = checked
-                ? styleConstants.satCorrectColor
-                : styleConstants.white;
-        } else if (checked) {
-            borderColor = styleConstants.satIncorrectColor;
-            color = styleConstants.white;
-            backgroundColor = styleConstants.satIncorrectColor;
-        }
-    } else if (checked) {
-        color = styleConstants.white;
-        backgroundColor = styleConstants.satBlue;
-    }
-
-    let borderRadius;
-    if (multipleSelect) {
-        borderRadius = 3;
-    } else {
-        borderRadius = SAT_ICON_SIZE;
-    }
-
-    return {color, backgroundColor, borderColor, borderRadius};
-}
-
-function SATChoiceIcon(props: SATChoiceIconProps): React.Node {
-    const {letter, crossedOut, reviewMode, correct, checked, multipleSelect} =
-        props;
-
-    const {color, backgroundColor, borderColor, borderRadius} =
-        constructSATStyles(reviewMode, correct, checked, multipleSelect);
-
-    return (
-        <div className={css(sharedStyles.iconWrapper)}>
-            <div
-                className={css(styles.satCircle)}
-                data-test-id="choice-icon__sat-choice-icon"
-                style={{backgroundColor, borderColor, borderRadius}}
-            />
-            <div style={{color}} className={css(styles.letter)}>
-                <span>{letter}</span>
-            </div>
-            {crossedOut && <CrossOutLine color={borderColor} sat={true} />}
-        </div>
-    );
-}
-
-const styles = StyleSheet.create({
-    satCircle: {
-        display: "block",
-        borderStyle: "solid",
-        borderWidth: 2,
-        content: `''`,
-        height: SAT_ICON_SIZE,
-        width: SAT_ICON_SIZE,
-        top: 1,
-        left: 1,
-    },
-    letter: {
-        // These properties make sure that this element has the exact
-        // same size as `circle` so that we can center things
-        // inside of it.
-        border: "2px solid transparent",
-        width: SAT_ICON_SIZE,
-        height: SAT_ICON_SIZE,
-        position: "absolute",
-        top: 1,
-
-        // Center contained items.
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-
-        fontFamily: styleConstants.boldFontFamily,
-        fontSize: 13,
-    },
-});
-
-export default SATChoiceIcon;