@khanacademy/perseus 1.4.0 → 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.0",
+    "version": "2.0.0",
     "publishConfig": {
         "access": "public"
     },
@@ -23,30 +23,30 @@
     "dependencies": {
         "@khanacademy/kas": "^0.2.7",
         "@khanacademy/kmath": "^0.0.8",
-        "@khanacademy/math-input": "^0.6.6",
-        "@khanacademy/perseus-linter": "^0.2.4",
-        "@khanacademy/pure-markdown": "^0.1.4",
+        "@khanacademy/math-input": "^0.6.7",
+        "@khanacademy/perseus-linter": "^0.2.5",
+        "@khanacademy/pure-markdown": "^0.1.5",
         "@khanacademy/simple-markdown": "^0.8.6",
         "mathquill": "git+https://git@github.com/Khan/mathquill.git#a9ae54e057c5c1acc8244a5627acbff29901d992"
     },
     "devDependencies": {
-        "@khanacademy/wonder-blocks-button": "^3.0.13",
-        "@khanacademy/wonder-blocks-clickable": "^2.4.4",
-        "@khanacademy/wonder-blocks-color": "^1.1.20",
-        "@khanacademy/wonder-blocks-core": "^4.6.2",
-        "@khanacademy/wonder-blocks-data": "^10.0.5",
-        "@khanacademy/wonder-blocks-dropdown": "^2.10.6",
-        "@khanacademy/wonder-blocks-form": "^3.1.10",
-        "@khanacademy/wonder-blocks-i18n": "^1.2.3",
-        "@khanacademy/wonder-blocks-layout": "^1.4.15",
-        "@khanacademy/wonder-blocks-link": "^3.8.17",
-        "@khanacademy/wonder-blocks-modal": "^3.0.5",
-        "@khanacademy/wonder-blocks-popover": "^1.1.28",
-        "@khanacademy/wonder-blocks-progress-spinner": "^1.1.39",
+        "@khanacademy/wonder-blocks-button": "^3.0.14",
+        "@khanacademy/wonder-blocks-clickable": "^2.4.5",
+        "@khanacademy/wonder-blocks-color": "^1.2.1",
+        "@khanacademy/wonder-blocks-core": "^4.7.0",
+        "@khanacademy/wonder-blocks-data": "^10.1.0",
+        "@khanacademy/wonder-blocks-dropdown": "^2.10.7",
+        "@khanacademy/wonder-blocks-form": "^3.1.11",
+        "@khanacademy/wonder-blocks-i18n": "^1.2.4",
+        "@khanacademy/wonder-blocks-layout": "^1.4.16",
+        "@khanacademy/wonder-blocks-link": "^3.9.1",
+        "@khanacademy/wonder-blocks-modal": "^3.0.7",
+        "@khanacademy/wonder-blocks-popover": "^1.1.30",
+        "@khanacademy/wonder-blocks-progress-spinner": "^1.1.40",
         "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-        "@khanacademy/wonder-blocks-tooltip": "^1.4.4",
-        "@khanacademy/wonder-blocks-typography": "^1.1.37",
-        "@khanacademy/wonder-stuff-core": "^1.2.0",
+        "@khanacademy/wonder-blocks-tooltip": "^1.4.6",
+        "@khanacademy/wonder-blocks-typography": "^1.1.38",
+        "@khanacademy/wonder-stuff-core": "^1.2.1",
         "aphrodite": "^1.2.5",
         "classnames": "^1.1.4",
         "create-react-class": "^15.6.3",
@@ -63,23 +63,23 @@
         "underscore": "^1.4.4"
     },
     "peerDependencies": {
-        "@khanacademy/wonder-blocks-button": "^3.0.13",
-        "@khanacademy/wonder-blocks-clickable": "^2.4.4",
-        "@khanacademy/wonder-blocks-color": "^1.1.20",
-        "@khanacademy/wonder-blocks-core": "^4.6.2",
-        "@khanacademy/wonder-blocks-data": "^10.0.5",
-        "@khanacademy/wonder-blocks-dropdown": "^2.10.6",
-        "@khanacademy/wonder-blocks-form": "^3.1.10",
-        "@khanacademy/wonder-blocks-i18n": "^1.2.3",
-        "@khanacademy/wonder-blocks-layout": "^1.4.15",
-        "@khanacademy/wonder-blocks-link": "^3.8.17",
-        "@khanacademy/wonder-blocks-modal": "^3.0.5",
-        "@khanacademy/wonder-blocks-popover": "^1.1.28",
-        "@khanacademy/wonder-blocks-progress-spinner": "^1.1.39",
+        "@khanacademy/wonder-blocks-button": "^3.0.14",
+        "@khanacademy/wonder-blocks-clickable": "^2.4.5",
+        "@khanacademy/wonder-blocks-color": "^1.2.1",
+        "@khanacademy/wonder-blocks-core": "^4.7.0",
+        "@khanacademy/wonder-blocks-data": "^10.1.0",
+        "@khanacademy/wonder-blocks-dropdown": "^2.10.7",
+        "@khanacademy/wonder-blocks-form": "^3.1.11",
+        "@khanacademy/wonder-blocks-i18n": "^1.2.4",
+        "@khanacademy/wonder-blocks-layout": "^1.4.16",
+        "@khanacademy/wonder-blocks-link": "^3.9.1",
+        "@khanacademy/wonder-blocks-modal": "^3.0.7",
+        "@khanacademy/wonder-blocks-popover": "^1.1.30",
+        "@khanacademy/wonder-blocks-progress-spinner": "^1.1.40",
         "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-        "@khanacademy/wonder-blocks-tooltip": "^1.4.4",
-        "@khanacademy/wonder-blocks-typography": "^1.1.37",
-        "@khanacademy/wonder-stuff-core": "^1.2.0",
+        "@khanacademy/wonder-blocks-tooltip": "^1.4.6",
+        "@khanacademy/wonder-blocks-typography": "^1.1.38",
+        "@khanacademy/wonder-stuff-core": "^1.2.1",
         "aphrodite": "^1.2.5",
         "classnames": "^1.1.4",
         "create-react-class": "^15.6.3",

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; }