@khanacademy/perseus 6.5.0 → 6.6.0

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

package/src/widgets/passage.tsx

@@ -509,12 +509,13 @@ 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 className="perseus-widget-passage-container">
+                <div id={"perseus-widget-passage-container" + joinedTitle}>
                     {this._renderInstructions(parseState)}
-                    <div className="perseus-widget-passage">
+                    <div id={"perseus-widget-passage" + joinedTitle}>
                         {hasTitle && (
                             <h3 className="passage-title">
                                 <Renderer
@@ -567,6 +568,16 @@ 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)",

package/src/widgets/sequence.tsx

@@ -1,36 +1,33 @@
-import {
-    linterContextProps,
-    linterContextDefault,
-} from "@khanacademy/perseus-linter";
-import PropTypes from "prop-types";
+import {linterContextDefault} from "@khanacademy/perseus-linter";
 import * as React from "react";
 import _ from "underscore";
 
 import InlineIcon from "../components/inline-icon";
 import {iconOk} from "../icon-paths";
 import * as Changeable from "../mixins/changeable";
-import {ApiOptions} from "../perseus-api";
+import {PerseusSequenceWidgetOptions} from "../perseus-types";
 import Renderer from "../renderer";
 import Util from "../util";
 
-import type {WidgetExports} from "../types";
-
-class Sequence extends React.Component<any, any> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        apiOptions: ApiOptions.propTypes,
-        json: PropTypes.arrayOf(
-            PropTypes.shape({
-                content: PropTypes.string,
-                images: PropTypes.objectOf(PropTypes.any),
-                widgets: PropTypes.objectOf(PropTypes.any),
-            }),
-        ),
-        trackInteraction: PropTypes.func.isRequired,
-        linterContext: linterContextProps,
-    };
+import type {WidgetExports, WidgetProps} from "../types";
+
+type Rubric = PerseusSequenceWidgetOptions;
+
+type ExternalProps = WidgetProps<PerseusSequenceWidgetOptions, Rubric>;
+
+type Props = ExternalProps;
+
+type DefaultProps = {
+    json: Props["json"];
+    linterContext: Props["linterContext"];
+};
+
+type State = {
+    visible: number;
+};
 
-    static defaultProps: any = {
+class Sequence extends React.Component<Props, State> {
+    static defaultProps: DefaultProps = {
         json: [
             {
                 content: "",
@@ -41,7 +38,7 @@ class Sequence extends React.Component<any, any> {
         linterContext: linterContextDefault,
     };
 
-    state: any = {
+    state = {
         visible: 1,
     };