@khanacademy/perseus 1.4.1 → 2.0.0

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "1.4.1",
+    "version": "2.0.0",
     "publishConfig": {
         "access": "public"
     },

package/src/__stories__/hints-renderer.stories.jsx

@@ -1,5 +1,6 @@
 // @flow
 
+import {View} from "@khanacademy/wonder-blocks-core";
 import React from "react";
 
 import HintsRenderer from "../hints-renderer.jsx";
@@ -48,5 +49,12 @@ export default ({
 }: Story);
 
 export const Interactive = (args: StoryArgs): $FlowFixMe => {
-    return <HintsRenderer {...args} />;
+    return (
+        // Sorry for the hacks! The HintRenderer uses absolute positioning
+        // for the "1 / 3" label that is rendered left of the hint. So we shift
+        // everything over so we can see it.
+        <View style={{left: 80}}>
+            <HintsRenderer {...args} />
+        </View>
+    );
 };

package/src/__testdata__/graphie_testdata.js

@@ -0,0 +1,53 @@
+// @flow
+
+import type {PerseusItem} from "../perseus-types.js";
+
+export const itemWithPieChart: PerseusItem = {
+    answerArea: {
+        calculator: false,
+        chi2Table: false,
+        periodicTable: false,
+        tTable: false,
+        zTable: false,
+    },
+    hints: [],
+    itemDataVersion: {
+        major: 0,
+        minor: 1,
+    },
+    question: {
+        content: "[[☃ image 1]]",
+        images: {},
+        widgets: {
+            "image 1": {
+                alignment: "block",
+                graded: true,
+                options: {
+                    alt: "This chart presents a pie graph divided into 2 sectors: 28 percent are unsuccessful and 72 percent are successful.",
+                    backgroundImage: {
+                        height: 210,
+                        url: "web+graphie://cdn.kastatic.org/ka-perseus-graphie/7c0a5afb8670fad738df800ffe16c5e516b48777",
+                        width: 210,
+                    },
+                    box: [210, 210],
+                    caption: "Source: NASA “Current and Past Missions”",
+                    labels: [],
+                    range: [
+                        [0, 10],
+                        [0, 10],
+                    ],
+                    static: false,
+                    title: "Percentage of Successful Cometary Missions (1978-2014)",
+                },
+                static: false,
+                type: "image",
+                version: {
+                    major: 0,
+                    minor: 0,
+                },
+            },
+        },
+    },
+    _multi: null,
+    answer: null,
+};

package/src/__tests__/__snapshots__/perseus-markdown_test.jsx.snap

@@ -21,23 +21,14 @@ exports[`perseus markdown output should output columns 1`] = `
     <div
       className="perseus-column"
     >
-      <div
-        className="sat-header-grafting-area"
-      />
       <div
         className="perseus-column-content"
       >
-        <div
-          className="sat-skill-subscore-grafting-area"
-        />
         <div
           className="paragraph"
         >
           col2
         </div>
-        <div
-          className="sat-grafting-area"
-        />
       </div>
     </div>
   </div>,

package/src/__tests__/__snapshots__/renderer_test.jsx.snap

@@ -302,23 +302,14 @@ exports[`renderer rendering should render columns 1`] = `
           <div
             class="perseus-column"
           >
-            <div
-              class="sat-header-grafting-area"
-            />
             <div
               class="perseus-column-content"
             >
-              <div
-                class="sat-skill-subscore-grafting-area"
-              />
               <div
                 class="paragraph"
               >
                 Stuff in column 2
               </div>
-              <div
-                class="sat-grafting-area"
-              />
             </div>
           </div>
         </div>

package/src/components/__stories__/graphie.stories.jsx

@@ -1,6 +1,8 @@
 // @flow
 import * as React from "react";
 
+import {ItemRendererWithDebugUI} from "../../../../../testing/item-renderer-with-debug-ui.jsx";
+import {itemWithPieChart} from "../../__testdata__/graphie_testdata.js";
 import Graphie from "../graphie.jsx";
 
 type StoryArgs = {||};
@@ -25,4 +27,6 @@ export const SquareBoxSizeAndOtherwiseEmpty = (args: StoryArgs): React.Node => {
     );
 };
 
-//TODO(scottgrant): Add a wider range of stories here
+export const PieChartGraphieLabels = (args: StoryArgs): React.Node => {
+    return <ItemRendererWithDebugUI item={itemWithPieChart} />;
+};

package/src/hint-renderer.jsx

@@ -93,20 +93,17 @@ class HintRenderer extends React.Component<Props> {
                         {i18n._("Hint #%(pos)s", {pos: pos + 1})}
                     </span>
                 )}
-                {!apiOptions.isMobile &&
-                    !apiOptions.satStyling &&
-                    totalHints &&
-                    pos != null && (
-                        <span
-                            className="perseus-hint-label"
-                            style={{
-                                display: "block",
-                                color: apiOptions.hintProgressColor,
-                            }}
-                        >
-                            {`${pos + 1} / ${totalHints}`}
-                        </span>
-                    )}
+                {!apiOptions.isMobile && totalHints != null && pos != null && (
+                    <span
+                        className="perseus-hint-label"
+                        style={{
+                            display: "block",
+                            color: apiOptions.hintProgressColor,
+                        }}
+                    >
+                        {`${pos + 1} / ${totalHints}`}
+                    </span>
+                )}
                 <Renderer
                     // eslint-disable-next-line react/no-string-refs
                     ref="renderer"

package/src/perseus-api.jsx

@@ -41,7 +41,6 @@ export const ApiOptions = {
     propTypes: (PropTypes.shape({
         isArticle: PropTypes.bool.isRequired,
 
-        satStyling: PropTypes.bool.isRequired,
         onInputError: PropTypes.func.isRequired,
         onFocusChange: PropTypes.func.isRequired,
         staticRender: PropTypes.bool.isRequired,
@@ -115,19 +114,6 @@ export const ApiOptions = {
         // Whether to use the Draft.js editor or the legacy textarea
         useDraftEditor: PropTypes.bool,
 
-        // Styling options that control the visual behavior of Perseus
-        // items.
-        // TODO(mdr): If we adopt this pattern, we'll need to think about
-        //     how to make individual `styling` options be optional, and
-        //     how to set their default values without overwriting provided
-        //     values. For now, though, you must either specify all fields
-        //     of `styling`, or omit the `styling` option entirely.
-        styling: PropTypes.shape({
-            // TODO(Nicole): Remove this after landing wonderblock-ifying
-            // the radio widget
-            primaryProductColor: PropTypes.string,
-        }),
-
         // The color used for the hint progress indicator (eg. 1 / 3)
         hintProgressColor: PropTypes.string,
 
@@ -181,16 +167,9 @@ export const ApiOptions = {
         onFocusChange: (...a: $ReadOnlyArray<any>) => mixed,
         onInputError: (...a: $ReadOnlyArray<any>) => mixed,
         readOnly: boolean,
-        satStyling: boolean,
         setDrawingAreaAvailable?: (...a: $ReadOnlyArray<any>) => mixed,
         showAlignmentOptions: boolean,
         staticRender: boolean,
-        styling?: {
-            // TODO(Nicole): Remove this after landing wonderblock-ifying
-            // the radio widget
-            primaryProductColor?: string,
-            ...
-        },
         trackInteraction?: (...a: $ReadOnlyArray<any>) => mixed,
         useDraftEditor?: boolean,
         widgetPlaceholder?: any,
@@ -200,7 +179,6 @@ export const ApiOptions = {
     defaults: ({
         isArticle: false,
         isMobile: false,
-        satStyling: false,
         onInputError: function () {},
         onFocusChange: function () {},
         staticRender: false,
@@ -217,7 +195,6 @@ export const ApiOptions = {
         },
         setDrawingAreaAvailable: function () {},
         useDraftEditor: false,
-        styling: {},
         canScrollPage: false,
         inModal: false,
         crossOutEnabled: false,

package/src/perseus-markdown.jsx

@@ -24,33 +24,8 @@ const rules = {
                         </div>
                     </div>
                     <div className="perseus-column">
-                        {/* HACK(#sat) This is a cheap way to allow a custom
-                         * header to be displayed in two-column items in the SAT
-                         * mission.
-                         * The header will be rendered into this div. Do not write
-                         * code outside of the SAT mission that relies on this
-                         * because this will be cleaned up with other SAT
-                         * technical debt. */}
-                        <div className="sat-header-grafting-area" />
-
                         <div className="perseus-column-content">
-                            {/* HACK(#sat) This is a cheap way to allow a
-                             * custom review-mode skill box to be displayed in
-                             * SAT.
-                             * Don't write code outside of the SAT mission that
-                             * relies on this div because we are still telling
-                             * ourselves this will be cleaned up along with other
-                             * SAT technical debt. */}
-                            <div className="sat-skill-subscore-grafting-area" />
                             {output(node.col2, state)}
-                            {/* HACK(#sat) This is a cheap way to allow hints
-                             * to be displayed in two-column items in the SAT
-                             * mission.
-                             * The hint renderer will be rendered into this div.
-                             * Do not write code outside of the SAT mission that
-                             * relies on this because this will be cleaned up with
-                             * other SAT technical debt. */}
-                            <div className="sat-grafting-area" />
                         </div>
                     </div>
                 </div>

package/src/styles/constants.js

@@ -55,27 +55,6 @@ export const pureMdMax = "1023px";
 export const pureLgMax = "1279px";
 // @tableBackgroundAccent: #f9f9f9; // for striping
 export const tableBackgroundAccent = "#F9F9F9";
-export const gtpBlue = "#4c00ff";
-export const gtpIncorrectColor = "#babec2";
-export const gtpCorrectColor = "#ffbe26";
-// @satBlue:               #0084ce;
-export const satBlue = "#0084CE";
-// @satSelectedBackgroundColor: #e4f3f9;
-export const satSelectedBackgroundColor = "#E4F3F9";
-// @satActiveBackgroundColor: #d0edf4;
-export const satActiveBackgroundColor = "#D0EDF4";
-// @satCorrectColor:       #009900;
-export const satCorrectColor = "#009900";
-// @satCorrectBorderColor: #00cc00;
-export const satCorrectBorderColor = "#00CC00";
-// @satCorrectBackgroundColor: #e4f7e4;
-export const satCorrectBackgroundColor = "#E4F7E4";
-// @satIncorrectColor:     #990000;
-export const satIncorrectColor = "#990000";
-// @satIncorrectBorderColor: #cc5252;
-export const satIncorrectBorderColor = "#CC5252";
-// @satIncorrectBackgroundColor: #f2ebeb;
-export const satIncorrectBackgroundColor = "#F2EBEB";
 // @zIndexScratchPad: 1;
 export const zIndexScratchPad = 1;
 // @zIndexAboveScratchpad: @zIndexScratchPad + 1;

package/src/styles/global-constants.js

@@ -321,12 +321,6 @@ export const collegeCareersMoreTopicColor = "#329A86";
 export const collegeCareersMoreHoverColor = "#218270";
 export const collegeCareersMoreLinkColor = "#218270";
 export const collegeCareersMoreLinkHoverColor = "#329A86";
-export const satDomainColor = "#0084CE";
-export const satSubjectColor = "#0084CE";
-export const satTopicColor = "#0084CE";
-export const satHoverColor = "#0084CE";
-export const satLinkColor = "#0084CE";
-export const satLinkHoverColor = "#0084CE";
 export const colorProficient = "#1C758A";
 export const colorPracticed = "rgb(158, 221, 235)";
 export const colorMastery1 = "rgb(90, 197, 221)";

package/src/styles/khan-exercise.css

@@ -372,7 +372,15 @@ body.debug .graphie { outline: 1px dashed #fdd; }
 #issue fieldset label { display: inline; }
 #issue fieldset li { margin-top: 0px; margin-bottom: 0px; }
 
-var, div.graphie { white-space: pre; }
+var, div.graphie {
+  white-space: pre;
+  /**
+   * Graphie didn't have a fixed font-size and was just using
+   * the surrounding font-size. However some labels are banking on
+   * specific dimensions, so we need to lock it to a specific size.
+   */
+  font-size: 14px;
+}
 
 #spinner { position: relative; top: 4px; left: 4px; }
 #issue-spinner { position: relative; top: 3px; }

package/src/styles/perseus-renderer.less

@@ -443,7 +443,6 @@
 }
 
 @import "./widgets/categorizer.less";
-@import "./widgets/definition.less";
 @import "./widgets/dropdown.less";
 @import "./widgets/expression.less";
 @import "./widgets/grapher.less";
@@ -722,264 +721,6 @@
 @satTopSpacingForTwoColumnLayout: 48px;
 @satTwoColumnLayoutSideMargin: 32px;
 
-// #sat-mission (below) matches when we're inside the SAT MVP product,
-// basically internal-only and in flux.
-#sat-mission {
-    @satContentWidth: 592px;
-
-    .content-area > div {
-        margin-left: auto;
-        margin-right: auto;
-        width: @satContentWidth;
-        .perseus-input-with-label {
-            display: flex;
-            align-items: center;
-            .perseus-input-label {
-                font-weight: 600;
-                padding-right: 10px;
-            }
-        }
-        .perseus-input-with-answer-blurb {
-            // numeric-inputs widgets use labels whereas input-number widgets
-            // use spans.
-            > span, > label {
-                display: inline-block;
-            }
-
-            .perseus-possible-answers {
-                color: rgb(0, 153, 0);
-                display: inline-block;
-                padding-right: 4px;
-
-                dt, dd {
-                    // If you just use inline, then screen readers (or at least
-                    // ChromeVox) won't read the answers as distinct items;
-                    // if 2 and 4 were both correct, then it would read them
-                    // concatenated as "twenty-four".
-                    display: inline-block;
-                }
-
-                dt {
-                    padding: 0 5px 0 13px;
-                    color: rgb(18, 18, 18);
-                    text-transform: uppercase;
-                }
-
-                dt::after {
-                    content: ":";
-                }
-
-                dd:not(:last-child)::after {
-                    // TODO(johnsullivan): Figure out a better way to do this list
-                    // joining.
-                    // TODO(mattdr): Joining in CSS makes semantic sense here
-                    // (they're definition list entries that we happen to be
-                    // rendering as a line of text joined by "or"), but CSS is
-                    // more difficult to internationalize. SAT is English-only
-                    // for now, though.
-                    content: "or";
-                    padding: 0 5px;
-                    color: rgb(18, 18, 18);
-                }
-            }
-        }
-
-        input.perseus-incorrect {
-            color: @satIncorrectColor;
-            background-color: @satIncorrectBackgroundColor;
-            border: solid 1px @satIncorrectBorderColor;
-        }
-
-        input.perseus-correct {
-            color: @satCorrectColor;
-            background-color: @satCorrectBackgroundColor;
-            border: solid 1px @satCorrectBorderColor;
-        }
-
-        input.perseus-unanswered {
-            background-color: #eee;
-            border: solid 1px #999;
-        }
-
-        &.perseus-renderer-two-columns {
-            width: 1024px;
-
-            // This prevents a strange blank space from appearing above
-            // passages.
-            // TODO(johnsullivan): Try and get rid of the wrapping div that's
-            // causing this instead of modifying its margin like this.
-            & > .paragraph {
-                margin: 0;
-            }
-
-            .perseus-two-columns {
-                display: flex;
-                justify-content: center;
-            }
-
-            .perseus-column {
-                // NOTE(emily): For some reason, these prefixes aren't being
-                // added by our auto-prefixer, and we need these prefixes to
-                // work in Safari <= 8.
-                display: -webkit-flex;
-                -webkit-flex-direction: column;
-
-                display: flex;
-                flex-direction: column;
-                // Should this be @articleMaxWidthTablet? or is this
-                // conceptually a different value?
-                width: 512px;
-
-                &:nth-child(1) {
-                    background: #eee;
-                    border-right: 1px solid #ddd;
-                    box-sizing: border-box;
-
-                    .perseus-column-content {
-                        padding-top: @satTopSpacingForTwoColumnLayout;
-                        padding-bottom: 22px;
-                        padding-left: 46px;
-                        padding-right: @satTwoColumnLayoutSideMargin;
-                    }
-
-                    .perseus-widget-passage-container {
-                        position: relative;
-                        .perseus-widget-passage-instructions div.paragraph {
-                            margin-top: 0;
-                        }
-                    }
-                    .perseus-widget-passage {
-                        // We've replaced the margin here with padding in the
-                        // parent element to stay consistent with non-passage
-                        // two-column mode.
-                        margin: 0;
-                    }
-
-                    & > .paragraph {
-                        margin-right: 40px;
-                    }
-
-                    blockquote {
-                        padding: 0;
-                        margin-right: 22px;
-
-                        & > .paragraph:nth-child(1) {
-                            margin-top: 0;
-                        }
-                    }
-                }
-
-                &:nth-child(2) {
-                    .perseus-column-content {
-                        padding-left: @satTwoColumnLayoutSideMargin;
-                        padding-right: @satTwoColumnLayoutSideMargin;
-                    }
-
-                    .perseus-group {
-                        margin-bottom: 20px;
-                    }
-                }
-            }
-
-            .perseus-column-content {
-                flex: 1 1 auto;
-                overflow-y: auto;
-
-                & > .paragraph {
-                    margin-top: 0;
-                }
-            }
-
-        }
-    }
-
-    input[type=text],
-    input[type=number] {
-        border: 1px solid #aaa;
-        font-family: @boldFontFamily;
-        font-size: 14px;
-        margin: 10px 0;
-        padding: 5px;
-
-        &:focus {
-            border-color: @satBlue;
-            box-shadow: 0 0 10px fade(@satBlue, 80%);
-            outline: none;
-        }
-    }
-
-    .valid-answer-mixin() {
-        input[type=text]:valid, input[type=number]:valid {
-            border: 1px solid @satBlue;
-            background: @satSelectedBackgroundColor;
-            color: initial;
-
-            &:focus {
-                box-shadow: 0 0 10px fade(@satBlue, 80%);
-            }
-        }
-    }
-
-    .invalid-answer-mixin() {
-        input[type=text]:valid, input[type=number]:valid {
-            color: @satIncorrectColor;
-            background-color: @satIncorrectBackgroundColor;
-            border: solid 1px @satIncorrectBorderColor;
-
-            &:focus {
-                box-shadow: 0 0 10px fade(@satIncorrectBorderColor, 80%);
-            }
-        }
-    }
-
-    // If a textbox appears inside a Perseus group widget, then the group
-    // widget's validity should override the item's validity when styling that
-    // item.
-    //
-    // That is, if a group widget is valid, but the item as a whole is
-    // invalid, inputs inside the valid group widget should still render as
-    // valid.
-    //
-    // This is implemented as a mixin and mixed into .valid-answer and
-    // .invalid-answer, in order to ensure that there's no ambiguity as to
-    // which selector takes precedence. Additionally, this ensures that these
-    // styles will only be applied when validity is relevant to the user (i.e.
-    // not in review mode).
-    .perseus-group-validity-override() {
-        .perseus-group-valid-answer {
-            .valid-answer-mixin();
-        }
-        .perseus-group-invalid-answer {
-            .invalid-answer-mixin();
-        }
-    }
-
-    .valid-answer {
-        .valid-answer-mixin();
-        .perseus-group-validity-override();
-    }
-    .invalid-answer {
-        .invalid-answer-mixin();
-        .perseus-group-validity-override();
-    }
-
-    #sat-route-task, #sat-route-section {
-        .content-area > .perseus-renderer-two-columns {
-            // Override column top margin to 0 (the first column will get
-            // the desired spacing by adding padding - to preserve the
-            // gray background)
-            margin-top: 0;
-
-            // Add spacing to the second column, by way of its first child.
-            // We want the margins to auto collapse, and so we can't add
-            // it to perseus-column because it's floated.
-            .perseus-column:nth-child(2) > .perseus-column-content > :first-child {
-                margin-top: @satTopSpacingForTwoColumnLayout;
-            }
-        }
-    }
-}
-
 .perseus-error {
     background: @red;
     border: 2px solid red;

package/src/styles/variables.less

@@ -41,17 +41,6 @@
 @pure-md-max: (@pure-lg-min - 1);
 @pure-lg-max: (@pure-xl-min - 1);
 
-// SAT variables
-@satBlue:               #0084ce;
-@satSelectedBackgroundColor: #e4f3f9;
-@satActiveBackgroundColor: #d0edf4;
-@satCorrectColor:       #009900;
-@satCorrectBorderColor: #00cc00;
-@satCorrectBackgroundColor: #e4f7e4;
-@satIncorrectColor:     #990000;
-@satIncorrectBorderColor: #cc5252;
-@satIncorrectBackgroundColor: #f2ebeb;
-
 // Layer variables
 @zIndexScratchPad: 1;
 @zIndexAboveScratchpad: @zIndexScratchPad + 1;

package/src/styles/variables.shared.less

@@ -311,16 +311,6 @@
 @collegeCareersMoreLinkColor:      @collegeCareersMoreDomainColor;
 @collegeCareersMoreLinkHoverColor: @collegeCareersMoreTopicColor;
 
-// NOTE(johnsullivan): SAT isn't really a part of the domain system so doesn't
-// get included in the .applyToDomains mixin. Currently these variables are
-// only used for KUI buttons.
-@satDomainColor:    #0084ce;
-@satSubjectColor:   #0084ce;
-@satTopicColor:     #0084ce;
-@satHoverColor:     @satDomainColor;
-@satLinkColor:      @satDomainColor;
-@satLinkHoverColor: @satTopicColor;
-
 // Exercise Colors
 // If you update these colours, please update thumbnail_handler.py's
 // get_domain_color method.