@khanacademy/perseus 7.2.0 → 7.2.1

package/src/styles/widgets/sortable.less

@@ -32,7 +32,7 @@
         touch-action: none;
 
         &.placeholder {
-            background:#ddd;
+            background: #ddd;
             border: 1px solid #ccc;
         }
 

package/src/styles/widgets/table.less

@@ -8,7 +8,8 @@
         height: 23px;
     }
 
-    th, td {
+    th,
+    td {
         border: 2px solid black;
         border-width: 0 2px;
 

package/src/styles/widgets/transformer.less

@@ -7,7 +7,8 @@
         position: relative;
         overflow: hidden;
 
-        > img, > .unresponsive-svg-image {
+        > img,
+        > .unresponsive-svg-image {
             position: absolute;
             // Preserves background image alignment (if image is a graph,
             // it can extend up and to the right to allow for axis labels)

package/src/styles/widgets/unit.less

@@ -1,4 +1,5 @@
-.old-unit-input input, .unit-editor-canonical {
+.old-unit-input input,
+.unit-editor-canonical {
     border: 1px solid #a4a4a4;
     border-radius: 5px;
     // box-sizing: border-box;

package/src/widgets/__stories__/plotter.stories.tsx

@@ -0,0 +1,27 @@
+import {View} from "@khanacademy/wonder-blocks-core";
+import * as React from "react";
+
+import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
+import {question1} from "../__testdata__/plotter.testdata";
+
+import type {PerseusRenderer} from "../../perseus-types";
+
+export default {
+    title: "Perseus/Widgets/Plotter",
+};
+
+type StoryArgs = Record<any, any>;
+
+const Template = (props: {question: PerseusRenderer}): React.ReactElement => (
+    <View
+        style={{
+            paddingLeft: 20,
+        }}
+    >
+        <RendererWithDebugUI question={props.question} />
+    </View>
+);
+
+export const Basic = (args: StoryArgs): React.ReactElement => {
+    return <Template question={question1} />;
+};

package/src/widgets/__testdata__/plotter.testdata.ts

@@ -0,0 +1,36 @@
+import type {PerseusRenderer} from "../../perseus-types";
+
+export const question1: PerseusRenderer = {
+    content:
+        "The elementary school principal asked teachers to report the number of students absent in each grade during the past week.\n\n**Create a bar graph to show how many students were absent in each grade.**\n\nSchool grade | Number of absent students  \n:- | :-: \n$1^{\\text{st}} \\text{ grade}$ | $15$ \n$2^{\\text{nd}} \\text{ grade}$ |$25$ \n$3^{\\text{rd}} \\text{ grade}$ | $5$  \n$4^{\\text{th}} \\text{ grade}$ | $10$  \n$5^{\\text{th}} \\text{ grade}$ | $10$  \n\n[[☃ plotter 1]]\n\n",
+    images: {},
+    widgets: {
+        // This is the actual problem from the server
+        // I don't know why the type is incorrect
+        // @ts-expect-error - TS2322
+        "plotter 1": {
+            alignment: "default",
+            graded: true,
+            options: {
+                categories: [
+                    "$1^{\\text{st}} \\text{}$",
+                    "$2^{\\text{nd}} \\text{}$",
+                    "$3^{\\text{rd}} \\text{}$",
+                    "$4^{\\text{th}} \\text{}$",
+                    "$5^{\\text{th}} \\text{}$",
+                ],
+                correct: [15, 25, 5, 10, 10],
+                labelInterval: 1,
+                labels: ["School grade", "Number of absent students"],
+                maxY: 30,
+                scaleY: 5,
+                snapsPerLine: 1,
+                starting: [0, 0, 0, 0, 0],
+                type: "bar",
+            },
+            static: false,
+            type: "plotter",
+            version: {major: 0, minor: 0},
+        },
+    },
+};