@khanacademy/perseus 12.0.1 → 12.1.0

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "12.0.1",
+    "version": "12.1.0",
     "publishConfig": {
         "access": "public"
     },
@@ -24,7 +24,7 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.3",
         "@khanacademy/kmath": "^0.1.4",
-        "@khanacademy/math-input": "^14.1.1",
+        "@khanacademy/math-input": "^14.2.0",
         "@khanacademy/perseus-core": "1.1.2",
         "@khanacademy/perseus-linter": "^0.3.6",
         "@khanacademy/pure-markdown": "^0.2.8",
@@ -57,7 +57,7 @@
         "jquery": "^2.1.1",
         "katex": "^0.11.1",
         "lodash.debounce": "^4.0.8",
-        "mathquill": "git+https://git@github.com/Khan/mathquill.git#32d9f351aaa68537170b3120a52e99b8def3a2c3",
+        "mathquill": "git+https://git@github.com/Khan/mathquill.git#48410e80d760bbd5105544d4a4ab459a28dc2cbc",
         "perseus-build-settings": "^0.2.1",
         "prop-types": "^15.6.1",
         "react": "16.14.0",

package/src/__tests__/item-renderer.test.tsx

@@ -1,6 +1,6 @@
 import {StatefulKeypadContextProvider} from "@khanacademy/math-input";
 import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
-import {fireEvent, render, screen, waitFor} from "@testing-library/react";
+import {fireEvent, render, screen} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import * as React from "react";
 import "@testing-library/jest-dom"; // Imports custom matchers
@@ -88,7 +88,6 @@ export const renderQuestion = (
                 area. Without both of these, it fails to render anything! */}
                 <div id="workarea" />
                 <div id="hintsarea" />
-
                 <Peripherals />
             </StatefulKeypadContextProvider>
         </RenderStateRoot>,
@@ -312,23 +311,6 @@ describe("item renderer", () => {
             );
         });
 
-        it("should activate the keypad when widget with input is focused", async () => {
-            // Arrange
-            const {renderer} = renderQuestion(itemWithInput, {
-                isMobile: true,
-                customKeypad: true,
-                useV2Keypad: true,
-            });
-
-            // Act
-            renderer.focus();
-
-            // Assert
-            await waitFor(() => {
-                expect(screen.getByLabelText("7")).toBeVisible();
-            });
-        });
-
         it("should provide current and previous focus paths on focus change to, and away from, a single widget", () => {
             // Arrange
             const onFocusChange = jest.fn();

package/src/styles/widgets/image.less

@@ -1,5 +1,6 @@
 .perseus-image-widget {
-    margin: 0;
+    margin-left: auto;
+    margin-right: auto;
 
     .perseus-image-title {
         text-align: center;
@@ -10,11 +11,6 @@
         padding-left: 16px;
         position: relative;
 
-        // This offsets the paragraph's padding
-        // So that the caption sits much closer
-        // to the image
-        top: -12px;
-
         &::before {
             content: "";
             position: absolute;

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

@@ -72,6 +72,7 @@ export const Question2 = (args: StoryArgs): React.ReactElement => {
                     imageOptions != null
                         ? {
                               ...imageOptions,
+                              alignment: "full-width",
                               title: args.title,
                               caption:
                                   "There is neither happiness nor unhappiness in this world; there is only the comparison of one state with another. Only a man who has felt ultimate despair is capable of feeling ultimate bliss. It is necessary to have wished for death in order to know how good it is to live.....the sum of all human wisdom will be contained in these two words: Wait and Hope",

package/src/widgets/__tests__/__snapshots__/group.test.tsx.snap

@@ -1146,6 +1146,7 @@ exports[`group widget should snapshot: initial render 1`] = `
                         >
                           <figure
                             class="perseus-image-widget"
+                            style="max-width: 380px;"
                           >
                             <div
                               class="fixed-to-responsive svg-image"

package/src/widgets/__tests__/__snapshots__/image.test.ts.snap

@@ -26,6 +26,7 @@ exports[`image widget - isMobile %b should snapshot: first render 1`] = `
               >
                 <figure
                   class="perseus-image-widget"
+                  style="max-width: 420px;"
                 >
                   <div
                     class="fixed-to-responsive svg-image"
@@ -207,6 +208,7 @@ exports[`image widget - isMobile %b should snapshot: first render 2`] = `
               >
                 <figure
                   class="perseus-image-widget"
+                  style="max-width: 420px;"
                 >
                   <div
                     class="perseus-image-title"

package/src/widgets/image.tsx

@@ -220,7 +220,12 @@ class ImageWidget extends React.Component<Props> {
             }
 
             return (
-                <figure className="perseus-image-widget">
+                <figure
+                    className="perseus-image-widget"
+                    style={{
+                        maxWidth: backgroundImage.width,
+                    }}
+                >
                     {image}
                     {alt}
                     {titleAndCaption}
@@ -260,7 +265,12 @@ class ImageWidget extends React.Component<Props> {
         }
 
         return (
-            <figure className="perseus-image-widget">
+            <figure
+                className="perseus-image-widget"
+                style={{
+                    maxWidth: backgroundImage.width,
+                }}
+            >
                 {title}
                 {image}
                 {alt}