@khanacademy/perseus 2.0.0 → 2.1.0

package/src/styles/khan-exercise.css

@@ -16,8 +16,6 @@ div.subhint {
     border: 1px solid #aaaaaa;
     background: #f9f9f9;
     display: none;
-    -moz-border-radius: 4px;
-    -webkit-border-radius: 4px;
     border-radius: 4px;
     margin-left: 20px;
     margin-right: 20px;
@@ -39,8 +37,6 @@ div.definition {
     border: 1px solid #aaaaaa;
     background: #f9f9f9;
     display: none;
-    -moz-border-radius: 4px;
-    -webkit-border-radius: 4px;
     border-radius: 4px;
     margin-left: 20px;
     margin-right: 20px;
@@ -152,9 +148,6 @@ body.debug .graphie { outline: 1px dashed #fdd; }
     padding-bottom: 40px;
 }
 #scratchpad div {
-    -moz-box-sizing: border-box;
-    -ms-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
     box-sizing: border-box;
     border: 1px solid #ccc;
     height: 100%;
@@ -232,7 +225,6 @@ body.debug .graphie { outline: 1px dashed #fdd; }
 
 #answer_area .calculator .history input {
     box-sizing: border-box;
-    -moz-box-sizing: border-box;
     display: block;
     font: inherit;
     margin: 5px 3px 3px;
@@ -362,8 +354,6 @@ body.debug .graphie { outline: 1px dashed #fdd; }
   list-style: none;
   border: 1px solid rgba(0, 0, 0, 0.3);
   padding-left: 10px;
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
   border-radius: 5px;
   line-height: 22px;
   margin-bottom: 3px;
@@ -407,8 +397,6 @@ var, div.graphie {
   padding: 2px 5px;
   border: 1px solid #999;
   border-radius: 4px;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
   float: left;
   cursor: pointer;
   color: white;
@@ -606,7 +594,7 @@ html.exercise-browser {
 	top: 12px;
 	padding: 0px;
 	border: none;
-	-webkit-box-shadow: none;
+	box-shadow: none;
 	overflow: visible;
 }
 
@@ -729,9 +717,6 @@ html.exercise-browser {
 
 #timelinecontainer .simple-button {
   -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -o-user-select: none;
   user-select: none;
   white-space: nowrap;
 }
@@ -754,8 +739,6 @@ html.exercise-browser {
   width: 200px;
   height: 100px;
   border: 1px solid #aaa;
-  -webkit-box-shadow: 0 0 3px #ccc;
-  -moz-box-shadow: 0 0 3px #ccc;
   box-shadow: 0 0 3px #ccc;
   margin-left: 14px; /* to line up with other titles */
   margin-bottom: 8px;
@@ -800,8 +783,6 @@ html.exercise-browser {
 	z-index: 2;
 
 	box-shadow: 0 1px 2px #ccc;
-	-moz-box-shadow: 0 1px 2px #ccc;
-	-webkit-box-shadow: 0 1px 2px #ccc;
 }
 
 .sortable > ul {
@@ -813,8 +794,6 @@ html.exercise-browser {
 	border: 1px solid #b9b9b9;
 	border-bottom-color: #939393;
 	border-radius: 4px;
-	-moz-border-radius: 4px;
-	-webkit-border-radius: 4px;
 	cursor: pointer;
 	margin-right: 4px;
 	min-width: 65px;
@@ -823,9 +802,6 @@ html.exercise-browser {
 	font-size: 1.2em;
 	float: left;
 	-webkit-user-select: none;
-	-khtml-user-select: none;
-	-moz-user-select: none;
-	-o-user-select: none;
 	user-select: none;
 }
 
@@ -844,10 +820,6 @@ html.exercise-browser {
 .sortable > ul > li:hover {
 	border-color: #ffa500;
 	box-shadow: 0 0 4px #c56f00;
-	-moz-box-shadow: 0 0 4px #c56f00;
-	-ms-box-shadow: 0 0 4px #c56f00;
-	-o-box-shadow: 0 0 4px #c56f00;
-	-webkit-box-shadow: 0 0 4px #c56f00;
 }
 
 .sortable > ul > li:active, .sortable > ul > li.dragging {
@@ -861,8 +833,6 @@ html.exercise-browser {
     border: 0;
     border-bottom: 0;
     box-shadow: 0 0 0;
-    -moz-box-shadow: 0 0 0;
-    -webkit-box-shadow: 0 0 0;
     padding-right: 0;
 }
 
@@ -895,8 +865,6 @@ html.exercise-browser {
 .qhint {
   border: 1px solid #aaaaaa;
   background: #f9f9f9;
-  -moz-border-radius: 4px;
-  -webkit-border-radius: 4px;
   border-radius: 4px;
   margin-right: 20px;
   margin-bottom: 20px;

package/src/styles/perseus-renderer.less

@@ -23,10 +23,7 @@
 // often, allowing selection makes for an awkward mobile experience
 // where you constantly highlight elements unintentionally.
 .no-select {
-    -moz-user-select: -moz-none;
-    -khtml-user-select: none;
-    -webkit-user-select: none;
-    -o-user-select: none;
+	-webkit-user-select: none;
     user-select: none;
 }
 
@@ -472,8 +469,6 @@
 
     &.widget-highlight {
         @highlight: 0px 0px 0px 2px rgba(255, 165, 0, 1);
-        -webkit-box-shadow: @highlight;
-        -moz-box-shadow:    @highlight;
         box-shadow:         @highlight;
         transition: all 0.15s;
     }
@@ -594,10 +589,6 @@
 
 .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
           box-shadow: @shadow;
-       -o-box-shadow: @shadow;
-      -ms-box-shadow: @shadow;
-     -moz-box-shadow: @shadow;
-  -webkit-box-shadow: @shadow;
 }
 
 .perseus-math-input.mq-editable-field.mq-math-mode {

package/src/styles/widgets/expression.less

@@ -113,8 +113,6 @@
 }
 
 .perseus-widget-expression-old > .output > .placeholder  > .error {
-    -webkit-border-radius: 10px;
-    -moz-border-radius: 10px;
     border-radius: 10px;
     background: #f7f7f7;
     border: 1px solid #ddd;

package/src/styles/widgets/orderer.less

@@ -11,6 +11,7 @@
         padding: 0 10px;
         cursor: pointer;
         position: relative;
+        -webkit-user-select: none;
         user-select: none;
         width: auto;
 
@@ -69,7 +70,6 @@
 
     &.layout-vertical .bank,  &.layout-vertical .draggable-box {
         box-sizing: border-box;
-        -moz-box-sizing: border-box;
         float: left;
         max-width: 50%;
     }

package/src/styles/widgets/plotter.less

@@ -3,11 +3,7 @@
         position: absolute;
     }
     span.rotate  {
-        -moz-transform: rotate(-90deg);
-        -o-transform: rotate(-90deg);
-        -webkit-transform: rotate(-90deg);
         transform: rotate(-90deg);
-        -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
     }
 }
 

package/src/styles/widgets/sortable.less

@@ -2,10 +2,6 @@
     border-color: @color;
     @darker: darken(@color, 11%);
     box-shadow: 0 0 4px @darker;
-    -moz-box-shadow: 0 0 4px @darker;
-    -ms-box-shadow: 0 0 4px @darker;
-    -o-box-shadow: 0 0 4px @darker;
-    -webkit-box-shadow: 0 0 4px @darker;
 }
 
 .draggy-boxy-thing {
@@ -16,8 +12,6 @@
         border-bottom: 1px solid #aaa;
 
         box-shadow: 0 1px 2px #ccc;
-        -moz-box-shadow: 0 1px 2px #ccc;
-        -webkit-box-shadow: 0 1px 2px #ccc;
     }
 
     // TODO(jack): Make this work for the orderer too.
@@ -34,12 +28,6 @@
         border: 1px solid #b9b9b9;
         border-bottom-color: #939393;
         border-radius: 4px;
-        -moz-border-radius: 4px;
-        -webkit-border-radius: 4px;
-        -webkit-user-select: none;
-        -khtml-user-select: none;
-        -moz-user-select: none;
-        -o-user-select: none;
         cursor: pointer;
         touch-action: none;
 
@@ -73,8 +61,6 @@
                 border: 1px solid #b9b9b9;
                 border-bottom-color: #939393;
                 border-radius: 4px;
-                -moz-border-radius: 4px;
-                -webkit-border-radius: 4px;
                 height: 100%;
                 width: 100%;
                 z-index: -1;

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"

package/src/widgets/__tests__/__snapshots__/number-line_test.jsx.snap

@@ -236,7 +236,7 @@ exports[`number-line widget should snapshot on mobile: first mobile render 1`] =
                     style="position: absolute; left: 0px; top: 0px;"
                   >
                     <div
-                      style="position: absolute; width: 24px; height: 24px; left: 17.999999999999993px; top: 28px; webkit-filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5)); filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5)); transform: translateX(0px) translateY(0px) translateZ(0);"
+                      style="position: absolute; width: 24px; height: 24px; left: 17.999999999999993px; top: 28px; filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5)); transform: translateX(0px) translateY(0px) translateZ(0);"
                     >
                       <svg
                         height="24"

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

@@ -63,7 +63,7 @@ exports[`video widget should snapshot on mobile: first mobile render 1`] = `
                   class="default_xu2jcg-o_O-inlineStyles_sc01dy"
                 />
                 <a
-                  class="shared_ken7mo-o_O-resting_nelfll visited-no-recolor"
+                  class="shared_htyo3s-o_O-resting_nelfll visited-no-recolor"
                   href="/transcript/videoNotFound"
                   rel="noopener noreferrer"
                   target="_blank"
@@ -143,7 +143,7 @@ exports[`video widget should snapshot: first render 1`] = `
                   class="default_xu2jcg-o_O-inlineStyles_sc01dy"
                 />
                 <a
-                  class="shared_ken7mo-o_O-resting_nelfll visited-no-recolor"
+                  class="shared_htyo3s-o_O-resting_nelfll visited-no-recolor"
                   href="/transcript/videoNotFound"
                   rel="noopener noreferrer"
                   target="_blank"

package/src/widgets/simulator.jsx

@@ -448,8 +448,6 @@ class Simulator extends React.Component<$FlowFixMe, $FlowFixMe> {
 
         const highlight = "0px 0px 0px 2px rgba(255, 165, 0, 1)";
         const highlightStyle = _.extend({}, inputStyle, {
-            WebkitBoxShadow: highlight,
-            MozBoxShadow: highlight,
             boxShadow: highlight,
             transition: "all 0.15s",
         });