@khanacademy/perseus 7.0.2 → 7.1.0

package/package.json

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

package/src/__stories__/article-renderer.stories.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+import {passageArticle} from "../__testdata__/article-renderer.testdata";
+import ArticleRenderer from "../article-renderer";
+
+export default {
+    title: "Perseus/Renderers/Article Renderer",
+    argTypes: {
+        useNewStyles: {
+            control: "boolean",
+        },
+    },
+};
+
+export const PassageArticle = ({useNewStyles}): any => (
+    <ArticleRenderer json={passageArticle} useNewStyles={useNewStyles} />
+);

package/src/__testdata__/article-renderer.testdata.ts

@@ -0,0 +1,25 @@
+export const passageArticle = {
+    content:
+        "###Group/Pair Activity \n\nThis passage is adapted from Ed Yong, “Turtles Use the Earth’s Magnetic Field as Global GPS.” ©2011 by Kalmbach Publishing Co.\n\n[[☃ passage 1]]\n\n**Question 9**\n\nThe passage most strongly suggests that Adelita used which of the following to navigate her 9,000-mile journey?\n\nA) The current of the North Atlantic gyre\n\nB) Cues from electromagnetic coils designed by Putman and Lohmann\n\nC) The inclination and intensity of Earth’s magnetic field\n\nD) A simulated “magnetic signature” configured by Lohmann\n\n10) Which choice provides the best evidence for the answer to the previous question?\n\nA) Lines 1–2 (“In 1996...way”)\n\nB) Lines 20–21 (“Using...surface”)\n\nC) Lines 36–37 (“In the wild...stars”)\n\nD) Lines 43–45 (“Neither...it is”)\n\n**Question 12** \n\nBased on the passage, which choice best describes the relationship between Putman’s and Lohmann’s research?\n\nA) Putman’s research contradicts Lohmann’s.\n\nB) Putman’s research builds on Lohmann’s.\n\nC) Lohmann’s research confirms Putman’s.\n\nD) Lohmann’s research corrects Putman’s.",
+    images: {},
+    widgets: {
+        "passage 1": {
+            type: "passage",
+            alignment: "default",
+            static: false,
+            graded: true,
+            options: {
+                static: false,
+                passageTitle: "",
+                passageText:
+                    "In 1996, a loggerhead turtle called Adelita swam across 9,000 miles from Mexico to Japan, crossing the entire Pacific on her way. Wallace J. Nichols tracked this epic journey with a satellite tag. But Adelita herself had no such technology at her disposal. How did she steer a route across two oceans to find her destination?\n\nNathan Putman has the answer. By testing hatchling turtles in a special tank, he has found that they can use the Earth’s magnetic field as their own Global Positioning System (GPS). By sensing the field, they can work out both their latitude and longitude and head in the right direction.\n\nPutman works in the lab of Ken Lohmann, who has been studying the magnetic abilities of loggerheads for over 20 years. In his lab at the University of North Carolina, Lohmann places hatchlings in a large water tank surrounded by a large grid of electromagnetic coils. In 1991, he found that the babies started in the opposite direction if he used the coils to reverse the direction of the magnetic field around them. They could use the field as a compass to get their bearing.\n\nLater, Lohmann showed that they can also use the magnetic field to work out their position. For them, this is literally a matter of life or death. Hatchlings born off the sea coast of Florida spend their early lives in the North Atlantic gyre, a warm current that circles between North America and Africa. If they’re swept towards the cold waters outside the gyre, they die. Their magnetic sense keeps them safe.\n\nUsing his coil-surrounded tank, Lohmann could mimic the magnetic field at different parts of the Earth’s surface. If he simulated the field at the northern edge of the gyre, the hatchlings swam southwards. If he simulated the field at the gyre’s southern edge, the turtles swam west-northwest. These experiments showed that the turtles can use their magnetic sense to work out their latitude—their position on a north-south axis. Now, Putman has shown that they can also determine their longitude—their position on an east-west axis.\n\nHe tweaked his magnetic tanks to simulate the fields in two positions with the same latitude at opposite ends of the Atlantic. If the field simulated the west Atlantic near Puerto Rico, the turtles swam northeast. If the field matched that on the east Atlantic near the Cape Verde Islands, the turtles swam southwest. In the wild, both headings would keep them within the safe, warm embrace of the North Atlantic gyre.\nBefore now, we knew that several animal migrants, from loggerheads to reed warblers to sparrows, had some way of working out longitude, but no one knew how. By keeping the turtles in the same conditions, with only the magnetic fields around them changing, Putman clearly showed that they can use these fields to find their way. In the wild, they might well also use other landmarks like the position of the sea, sun and stars.\n\nPutman thinks that the turtles work out their position using two features of the Earth’s magnetic field that change over its surface. They can sense the field’s inclination, or the angle at which it dips towards the surface. At the poles, this angle is roughly 90 degrees and at the equator, it’s roughly zero degrees. They can also sense its intensity, which is strongest near the poles and weakest near the Equator. Different parts of the world have unique combinations of these two variables. Neither corresponds directly to either latitude or longitude, but together, they provide a “magnetic signature” that tells the turtle where it is.\n",
+                footnotes: "",
+                showLineNumbers: true,
+            },
+            version: {
+                major: 0,
+                minor: 0,
+            },
+        },
+    },
+};

package/src/article-renderer.tsx

@@ -34,6 +34,9 @@ class ArticleRenderer extends React.Component<any, any> {
         ]).isRequired,
 
         // Whether to use the new Bibliotron styles for articles
+        /**
+         * @deprecated Does nothing
+         */
         useNewStyles: PropTypes.bool,
         linterContext: PerseusLinter.linterContextProps,
         legacyPerseusLint: PropTypes.arrayOf(PropTypes.string),
@@ -167,7 +170,6 @@ class ArticleRenderer extends React.Component<any, any> {
         const classes = classNames({
             "framework-perseus": true,
             "perseus-article": true,
-            "bibliotron-article": this.props.useNewStyles,
             // NOTE(charlie): For exercises, this is applied outside of Perseus
             // (in webapp).
             [ApiClassNames.MOBILE]: apiOptions.isMobile,

package/src/styles/articles.less

@@ -3,49 +3,7 @@
 @import "./util.less";
 
 // Article Renderer
-// TODO(oliver): These are the old article styles. When we transition over
-// to the new styles we should remove these!
-.framework-perseus.perseus-article:not(.bibliotron-article) {
-    .perseus-widget-container {
-        &.widget-float-left {
-            float: left;
-            padding-right: 1em;
-            max-width: 50%;
-            width: 100%;
-        }
-
-        &.widget-float-right {
-            float: right;
-            padding-left: 1em;
-            max-width: 50%;
-            width: 100%;
-        }
-    }
-
-    .perseus-renderer > .paragraph {
-        margin-left: auto;
-        margin-right: auto;
-        max-width: 700px;
-    }
-
-    .paragraph.perseus-paragraph-full-width {
-        margin-left: 0;
-        margin-right: 0;
-        max-width: none;
-
-        > .paragraph {
-            margin: 0;
-            max-width: none;
-        }
-    }
-}
-
-// TODO(oliver): These are the new article styles. When we transition over
-// to the new styles we should remove the `.bibliotron-article` and delete
-// the above style rules.
-// NOTE(charlie): See below for the new, XOM Manatee beta typography styles,
-// which are applied to articles and exercises.
-.bibliotron-article.framework-perseus.perseus-article:not(.perseus-mobile) {
+.framework-perseus.perseus-article:not(.perseus-mobile) {
     @textColor: #21242c;
     .body-text() {
         color: @textColor;
@@ -87,25 +45,28 @@
         .body-text;
         margin: 0 auto;
         max-width: @articleMaxWidth;
-    }
-    .perseus-renderer > .paragraph .paragraph {
-        // These are actual paragraphs
-        .body-text;
-        margin-bottom: @paragraphSpacing;
-        margin-top: 0;
+
+        .paragraph {
+            // These are actual paragraphs
+            .body-text;
+            margin-bottom: @paragraphSpacing;
+            margin-top: 0;
+        }
 
         // Inline math should have the same font-size as the surrounding text.
         // There is no wrapping element around .katex to indicate that it is
         // inline, so we rely on the "actual paragraph" check above
         // (a .paragraph that contains another .paragraph instead of a
         // .perseus-block-math).
-        .katex, mjx-container {
+        .katex {
             font-size: 100%;
         }
+
+        ul:not(.perseus-widget-radio) {
+            .body-text;
+        }
     }
-    .perseus-renderer > .paragraph ul:not(.perseus-widget-radio) {
-        .body-text;
-    }
+
     table {
         .body-text;
         margin-bottom: @paragraphSpacing;
@@ -293,15 +254,42 @@
     .choice-text(14px, 1.25);
 }
 
-// TODO(charlie): We're now applying the article typography styles to our
-// exercise content as well. We should remove the `.perseus-article` check and
-// merge these into `perseus-renderer.less`. However, we don't want to show them for
-// non-Bibliotron articles, so for now, we'll leave them here and enable them
-// explicitly for: (1) Bibliotron articles, and (2) all exercises.
-// TODO(charlie): When the XOM Manatee beta has concluded, we can remove the
-// namespacing and delete the above styles in full (assuming we ship the beta).
-.bibliotron-article.framework-perseus.perseus-article.perseus-mobile,
-.framework-perseus:not(.perseus-article).perseus-mobile {
+.framework-perseus.perseus-mobile {
+    .perseus-article {
+        .perseus-widget-container {
+            &.widget-float-left {
+                float: left;
+                padding-right: 1em;
+                max-width: 50%;
+                width: 100%;
+            }
+
+            &.widget-float-right {
+                float: right;
+                padding-left: 1em;
+                max-width: 50%;
+                width: 100%;
+            }
+        }
+
+        .perseus-renderer > .paragraph {
+            margin-left: auto;
+            margin-right: auto;
+            max-width: 700px;
+        }
+
+        .paragraph.perseus-paragraph-full-width {
+            margin-left: 0;
+            margin-right: 0;
+            max-width: none;
+
+            > .paragraph {
+                margin: 0;
+                max-width: none;
+            }
+        }
+    }
+
     @baseUnit: 16px;
 
     // TODO(charlie): Pure defines XL as 1280px. However, Bibliotron and our new

package/src/styles/widgets/passage.less

@@ -1,6 +1,8 @@
-// this selector increases specificity to beat out other stylesheets while still
-//   allowing for more than one passage widget on a page
-[id^="perseus-widget-passage-container"] {
+// first one is to beat out specificity of article styles
+.framework-perseus.perseus-article
+    .perseus-renderer
+    .perseus-widget-passage-container,
+.perseus-widget-passage-container {
     // NOTE(mdr): This is similar to Wonder Blocks "BodySerif" typesetting, but
     //     not quite: it's a bit smaller, for consistency with the sorta-small
     //     type styles in rest of the Perseus.
@@ -10,7 +12,7 @@
     @font-size: 16px;
     @line-height: 20px;
 
-    [id^="perseus-widget-passage"] {
+    .perseus-widget-passage {
         line-height: @line-height;
         margin: 22px;
         position: relative;
@@ -49,7 +51,7 @@
         // note(matthewc): If you need to change any of this,
         // check that line numbers line up correctly.
         // The margin should probably be 0 or the line height
-        .passage-text div.paragraph {
+        > .passage-text div.paragraph {
             font-weight: 400;
             font-size: @font-size;
             line-height: @line-height;

package/src/widgets/__tests__/__snapshots__/passage-ref.test.ts.snap

@@ -17,7 +17,7 @@ exports[`passage-ref widget should render with invalid reference 1`] = `
         >
           <div>
             <div
-              id="perseus-widget-passage-container-"
+              class="perseus-widget-passage-container"
             >
               <div
                 class="perseus-widget-passage-instructions"
@@ -26,7 +26,7 @@ exports[`passage-ref widget should render with invalid reference 1`] = `
 
               </div>
               <div
-                id="perseus-widget-passage-"
+                class="perseus-widget-passage"
               >
                 <h3
                   class="perseus-sr-only"
@@ -158,7 +158,7 @@ exports[`passage-ref widget should render with multi-line reference 1`] = `
         >
           <div>
             <div
-              id="perseus-widget-passage-container-"
+              class="perseus-widget-passage-container"
             >
               <div
                 class="perseus-widget-passage-instructions"
@@ -167,7 +167,7 @@ exports[`passage-ref widget should render with multi-line reference 1`] = `
 
               </div>
               <div
-                id="perseus-widget-passage-"
+                class="perseus-widget-passage"
               >
                 <h3
                   class="perseus-sr-only"
@@ -304,7 +304,7 @@ exports[`passage-ref widget should render with single-line reference 1`] = `
         >
           <div>
             <div
-              id="perseus-widget-passage-container-"
+              class="perseus-widget-passage-container"
             >
               <div
                 class="perseus-widget-passage-instructions"
@@ -313,7 +313,7 @@ exports[`passage-ref widget should render with single-line reference 1`] = `
 
               </div>
               <div
-                id="perseus-widget-passage-"
+                class="perseus-widget-passage"
               >
                 <h3
                   class="perseus-sr-only"

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

@@ -97,7 +97,7 @@ exports[`passage widget should snapshot multiple passages (mobile: false) 1`] =
         >
           <div>
             <div
-              id="perseus-widget-passage-container-passage-1"
+              class="perseus-widget-passage-container"
             >
               <div
                 class="perseus-widget-passage-instructions"
@@ -136,7 +136,7 @@ exports[`passage widget should snapshot multiple passages (mobile: false) 1`] =
                 </div>
               </div>
               <div
-                id="perseus-widget-passage-passage-1"
+                class="perseus-widget-passage"
               >
                 <h3
                   class="passage-title"
@@ -590,7 +590,7 @@ exports[`passage widget should snapshot multiple passages (mobile: false) 1`] =
         >
           <div>
             <div
-              id="perseus-widget-passage-container-passage-2"
+              class="perseus-widget-passage-container"
             >
               <div
                 class="perseus-widget-passage-instructions"
@@ -626,7 +626,7 @@ exports[`passage widget should snapshot multiple passages (mobile: false) 1`] =
                 </div>
               </div>
               <div
-                id="perseus-widget-passage-passage-2"
+                class="perseus-widget-passage"
               >
                 <h3
                   class="passage-title"
@@ -956,7 +956,7 @@ exports[`passage widget should snapshot multiple passages (mobile: true) 1`] = `
         >
           <div>
             <div
-              id="perseus-widget-passage-container-passage-1"
+              class="perseus-widget-passage-container"
             >
               <div
                 class="perseus-widget-passage-instructions"
@@ -995,7 +995,7 @@ exports[`passage widget should snapshot multiple passages (mobile: true) 1`] = `
                 </div>
               </div>
               <div
-                id="perseus-widget-passage-passage-1"
+                class="perseus-widget-passage"
               >
                 <h3
                   class="passage-title"
@@ -1449,7 +1449,7 @@ exports[`passage widget should snapshot multiple passages (mobile: true) 1`] = `
         >
           <div>
             <div
-              id="perseus-widget-passage-container-passage-2"
+              class="perseus-widget-passage-container"
             >
               <div
                 class="perseus-widget-passage-instructions"
@@ -1485,7 +1485,7 @@ exports[`passage widget should snapshot multiple passages (mobile: true) 1`] = `
                 </div>
               </div>
               <div
-                id="perseus-widget-passage-passage-2"
+                class="perseus-widget-passage"
               >
                 <h3
                   class="passage-title"
@@ -1778,7 +1778,7 @@ exports[`passage widget should snapshot simple passage (mobile: false) 1`] = `
         >
           <div>
             <div
-              id="perseus-widget-passage-container-"
+              class="perseus-widget-passage-container"
             >
               <div
                 class="perseus-widget-passage-instructions"
@@ -1787,7 +1787,7 @@ exports[`passage widget should snapshot simple passage (mobile: false) 1`] = `
 
               </div>
               <div
-                id="perseus-widget-passage-"
+                class="perseus-widget-passage"
               >
                 <h3
                   class="perseus-sr-only"
@@ -1875,7 +1875,7 @@ exports[`passage widget should snapshot simple passage (mobile: true) 1`] = `
         >
           <div>
             <div
-              id="perseus-widget-passage-container-"
+              class="perseus-widget-passage-container"
             >
               <div
                 class="perseus-widget-passage-instructions"
@@ -1884,7 +1884,7 @@ exports[`passage widget should snapshot simple passage (mobile: true) 1`] = `
 
               </div>
               <div
-                id="perseus-widget-passage-"
+                class="perseus-widget-passage"
               >
                 <h3
                   class="perseus-sr-only"

package/src/widgets/passage.tsx

@@ -509,13 +509,12 @@ export class Passage extends React.Component<PassageProps, PassageState> {
         );
         // Check if the title has any non-empty text in it.
         const hasTitle = /\S/.test(this.props.passageTitle);
-        const joinedTitle = joinString(this.props.passageTitle);
 
         return (
             <div>
-                <div id={"perseus-widget-passage-container" + joinedTitle}>
+                <div className="perseus-widget-passage-container">
                     {this._renderInstructions(parseState)}
-                    <div id={"perseus-widget-passage" + joinedTitle}>
+                    <div className="perseus-widget-passage">
                         {hasTitle && (
                             <h3 className="passage-title">
                                 <Renderer
@@ -568,16 +567,6 @@ export class Passage extends React.Component<PassageProps, PassageState> {
     }
 }
 
-// That's All, Folks! => -thats-all-folks
-const joinString = (title: string): string =>
-    "-" +
-    title
-        .toLowerCase()
-        .replace(/[^\w\s]/gi, "")
-        .trim()
-        .split(/\s+/)
-        .join("-");
-
 export default {
     name: "passage",
     displayName: "Passage (SAT only)",