@khanacademy/perseus 1.4.1 → 2.0.1

package/src/types.js

@@ -142,7 +142,6 @@ type StubTagEditorType = $FlowFixMe; // from "./components/stub-tag-editor.jsx";
 export type APIOptions = $ReadOnly<{|
     isArticle?: boolean,
 
-    satStyling?: boolean,
     // This should actually be required since renderer.jsx sets defaults for
     // any missing properties in this object using this.getApiOptions() before
     // passing the prop on to other components.
@@ -232,19 +231,6 @@ export type APIOptions = $ReadOnly<{|
     // Whether to use the Draft.js editor or the legacy textarea
     useDraftEditor?: boolean,
 
-    // 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?: {|
-        // TODO(Nicole): Remove this after landing wonderblock-ifying
-        // the radio widget
-        primaryProductColor?: string,
-    |},
-
     // The color used for the hint progress indicator (eg. 1 / 3)
     hintProgressColor?: string,
 
@@ -399,13 +385,11 @@ export type APIOptionsWithDefaults = $ReadOnly<{|
     onFocusChange: $NonMaybeType<APIOptions["onFocusChange"]>,
     onInputError: $NonMaybeType<APIOptions["onInputError"]>,
     readOnly: $NonMaybeType<APIOptions["readOnly"]>,
-    satStyling: $NonMaybeType<APIOptions["satStyling"]>,
     setDrawingAreaAvailable: $NonMaybeType<
         APIOptions["setDrawingAreaAvailable"],
     >,
     showAlignmentOptions: $NonMaybeType<APIOptions["showAlignmentOptions"]>,
     staticRender: $NonMaybeType<APIOptions["staticRender"]>,
-    styling: $NonMaybeType<APIOptions["styling"]>,
     useDraftEditor: $NonMaybeType<APIOptions["useDraftEditor"]>,
 |}>;
 

package/src/widget-container.jsx

@@ -68,6 +68,10 @@ class WidgetContainer extends React.Component<Props, State> {
             "perseus-widget-container": true,
             "widget-highlight": this.props.shouldHighlight,
             "widget-nohighlight": !this.props.shouldHighlight,
+            // HACK(matthewc): perseus-widget-container is setting a font-size
+            // but we want the definition prompt to match the surrounding font
+            // I'm sorry, but there's a time crunch
+            "perseus-widget__definition": this.props.type === "definition",
         });
 
         const type = this.props.type;

package/src/widgets/__stories__/definition.stories.jsx

@@ -2,6 +2,7 @@
 import * as React from "react";
 
 import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui.jsx";
+import ArticleRenderer from "../../article-renderer.jsx";
 
 export default {
     title: "Perseus/Widgets/Definition",
@@ -71,12 +72,37 @@ const question2 = {
     },
 };
 
+const article = {
+    content:
+        "###Backstory\n\nDuring World War II, in August of 1943, the [[☃ definition 1]] launched a massive bombing campaign on Milan and its outskirts. The explosions and the ensuing fires killed over 700 people and destroyed many of the city’s most important buildings and monuments, including a significant portion of Santa Maria delle Grazie. Miraculously, the wall with the painting survived, probably because it had been shored up with sandbags and mattresses, but the roof of the refectory was blown off and the other walls were decimated. The _Last Supper_ remained exposed to the elements, covered only with a tarp, for several months, until the refectory (the dining room of the monastery where the _Last Supper_ was painted), was rebuilt and a team of restorers began working to preserve and restore the painting.",
+    images: {},
+    widgets: {
+        "definition 1": {
+            alignment: "default",
+            graded: true,
+            options: {
+                definition:
+                    "The Allies, led by the United Kingdom, the United States, and the Soviet Union, were the group of countries who opposed the Axis powers (Germany, Japan, and Italy) during World War II.",
+                static: false,
+                togglePrompt: "Allies",
+            },
+            static: false,
+            type: "definition",
+            version: {major: 0, minor: 0},
+        },
+    },
+};
+
 type StoryArgs = {||};
 
 export const Question1 = (args: StoryArgs): React.Node => {
     return <RendererWithDebugUI question={question1} />;
 };
 
-export const MultipleDefintions = (args: StoryArgs): React.Node => {
+export const MultipleDefinitions = (args: StoryArgs): React.Node => {
     return <RendererWithDebugUI question={question2} />;
 };
+
+export const ArticleDefintion = (args: StoryArgs): React.Node => {
+    return <ArticleRenderer json={article} useNewStyles />;
+};

package/src/widgets/__stories__/input-number.stories.jsx

@@ -100,17 +100,3 @@ export const Percent = (args: InputNumberOptions): React.Node => {
     return <RendererWithDebugUI question={question} />;
 };
 Percent.args = question3.widgets["input-number 1"].options;
-
-export const RationalWithSatStyling = (
-    args: InputNumberOptions,
-): React.Node => {
-    const question = updateWidgetOptions(question1, "input-number 1", args);
-    return (
-        <RendererWithDebugUI
-            question={question}
-            apiOptions={{satStyling: true}}
-            reviewMode={true}
-        />
-    );
-};
-Rational.args = question1.widgets["input-number 1"].options;

package/src/widgets/__stories__/radio.stories.jsx

@@ -17,7 +17,6 @@ type StoryArgs = {|
     static: boolean,
 
     // API Options
-    satStyling: boolean,
     crossOutEnabled: boolean,
 
     // Renderer Options
@@ -33,7 +32,6 @@ export default ({
     title: "Perseus/Widgets/Radio",
     args: {
         static: false,
-        satStyling: false,
         crossOutEnabled: false,
         reviewMode: false,
     },
@@ -57,7 +55,6 @@ const applyStoryArgs = (
 
 const buildApiOptions = (args: StoryArgs): APIOptions => {
     return {
-        satStyling: args.satStyling,
         crossOutEnabled: args.crossOutEnabled,
     };
 };

package/src/widgets/__tests__/__snapshots__/definition_test.js.snap

@@ -27,27 +27,22 @@ exports[`Definition widget should have a default snapshot: first render 1`] = `
         >
           The Governor and Council of the Massachusetts had much conference many days; and at last . . . . concluded a peace and friendship with 
           <div
-            class="perseus-widget-container widget-nohighlight widget-inline"
+            class="perseus-widget-container widget-nohighlight perseus-widget__definition widget-inline"
           >
-            <span
+            <button
               aria-controls="uid-popover-0-wb-id"
+              aria-disabled="false"
               aria-expanded="false"
-              class="perseus-widget-definition"
+              class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4"
               id="uid-popover-0-wb-id-anchor"
+              type="button"
             >
-              <button
-                aria-disabled="false"
-                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1hl5pu8"
-                role="button"
-                type="button"
+              <span
+                style="color: rgb(24, 101, 242);"
               >
-                <span
-                  class="text_f1191h-o_O-LabelLarge_5s82ln-o_O-text_m8a8ki-o_O-textWithFocus_e296pg"
-                >
-                  the Pequots
-                </span>
-              </button>
-            </span>
+                the Pequots
+              </span>
+            </button>
           </div>
           , upon these conditions.
         </div>
@@ -84,27 +79,22 @@ exports[`Definition widget should have an open state snapshot: open state 1`] =
         >
           The Governor and Council of the Massachusetts had much conference many days; and at last . . . . concluded a peace and friendship with 
           <div
-            class="perseus-widget-container widget-nohighlight widget-inline"
+            class="perseus-widget-container widget-nohighlight perseus-widget__definition widget-inline"
           >
-            <span
+            <button
               aria-controls="uid-popover-1-wb-id"
+              aria-disabled="false"
               aria-expanded="true"
-              class="perseus-widget-definition"
+              class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4"
               id="uid-popover-1-wb-id-anchor"
+              type="button"
             >
-              <button
-                aria-disabled="false"
-                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1hl5pu8"
-                role="button"
-                type="button"
+              <span
+                style="color: rgb(24, 101, 242); border-bottom: 2px solid #1865f2;"
               >
-                <span
-                  class="text_f1191h-o_O-LabelLarge_5s82ln-o_O-text_m8a8ki-o_O-textWithFocus_e296pg-o_O-focus_15mc0l2"
-                >
-                  the Pequots
-                </span>
-              </button>
-            </span>
+                the Pequots
+              </span>
+            </button>
           </div>
           , upon these conditions.
         </div>

package/src/widgets/__tests__/__snapshots__/group_test.jsx.snap

@@ -58,15 +58,9 @@ exports[`group widget should snapshot: initial render 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"
               >
@@ -1270,9 +1264,6 @@ exports[`group widget should snapshot: initial render 1`] = `
                   </div>
                 </div>
               </div>
-              <div
-                class="sat-grafting-area"
-              />
             </div>
           </div>
         </div>

package/src/widgets/__tests__/__snapshots__/image_test.jsx.snap

@@ -117,15 +117,9 @@ exports[`image widget - isMobile %b should snapshot: first render 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"
               >
@@ -191,9 +185,6 @@ exports[`image widget - isMobile %b should snapshot: first render 1`] = `
                 </span>
                 ?
               </div>
-              <div
-                class="sat-grafting-area"
-              />
             </div>
           </div>
         </div>
@@ -335,15 +326,9 @@ exports[`image widget - isMobile %b should snapshot: first render 2`] = `
           <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"
               >
@@ -409,9 +394,6 @@ exports[`image widget - isMobile %b should snapshot: first render 2`] = `
                 </span>
                 ?
               </div>
-              <div
-                class="sat-grafting-area"
-              />
             </div>
           </div>
         </div>