@khanacademy/perseus 2.0.0 → 2.0.1

package/package.json

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

package/src/styles/articles.less

@@ -55,7 +55,12 @@
 
     @paragraphSpacing: 32px;
     .perseus-widget-container {
-        .legacy-typography;
+        // HACK(matthewc): to get around this fixed font-size
+        // since we want the definition widget to match
+        // surrounding text
+        &:not(.perseus-widget__definition) {
+            .legacy-typography;
+        }
 
         &.widget-float-left,
         &.widget-float-right {

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/__tests__/__snapshots__/definition_test.js.snap

@@ -27,7 +27,7 @@ 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"
           >
             <button
               aria-controls="uid-popover-0-wb-id"
@@ -79,7 +79,7 @@ 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"
           >
             <button
               aria-controls="uid-popover-1-wb-id"