@khanacademy/perseus 13.0.0 → 13.2.0

package/src/widgets/__tests__/__snapshots__/graded-group-set-jipt.test.ts.snap

@@ -242,7 +242,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
                 type="button"
               >
                 <span
-                  class="text_f1191h-o_O-LabelLarge_5s82ln-o_O-text_m8a8ki"
+                  class="text_f1191h-o_O-LabelLarge_5s82ln-o_O-text_6kf3xs"
                 >
                   Check
                 </span>
@@ -470,7 +470,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
                 type="button"
               >
                 <span
-                  class="text_f1191h-o_O-LabelLarge_5s82ln-o_O-text_m8a8ki"
+                  class="text_f1191h-o_O-LabelLarge_5s82ln-o_O-text_6kf3xs"
                 >
                   Check
                 </span>
@@ -698,7 +698,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
                 type="button"
               >
                 <span
-                  class="text_f1191h-o_O-LabelLarge_5s82ln-o_O-text_m8a8ki"
+                  class="text_f1191h-o_O-LabelLarge_5s82ln-o_O-text_6kf3xs"
                 >
                   Check
                 </span>

package/src/widgets/__tests__/__snapshots__/graded-group-set.test.ts.snap

@@ -308,7 +308,7 @@ exports[`graded group widget should snapshot 1`] = `
                 type="button"
               >
                 <span
-                  class="text_f1191h-o_O-LabelLarge_5s82ln-o_O-text_m8a8ki"
+                  class="text_f1191h-o_O-LabelLarge_5s82ln-o_O-text_6kf3xs"
                 >
                   Check
                 </span>

package/src/widgets/__tests__/__snapshots__/graded-group.test.ts.snap

@@ -443,7 +443,7 @@ exports[`graded-group should snapshot: initial render (mobile: false) 1`] = `
               type="button"
             >
               <span
-                class="text_f1191h-o_O-LabelLarge_5s82ln-o_O-text_m8a8ki"
+                class="text_f1191h-o_O-LabelLarge_5s82ln-o_O-text_6kf3xs"
               >
                 Check
               </span>

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

@@ -3638,7 +3638,7 @@ exports[`single-choice question reviewMode: true should snapshot the same: first
                       </button>
                     </div>
                     <div
-                      class="perseus-radio-rationale-content rationale_1w3tmyh"
+                      class="perseus-radio-rationale-content rationale_1ctj0s0"
                       data-test-id="perseus-radio-rationale-content-0"
                     >
                       <div
@@ -3834,7 +3834,7 @@ exports[`single-choice question reviewMode: true should snapshot the same: first
                       </button>
                     </div>
                     <div
-                      class="perseus-radio-rationale-content rationale_1w3tmyh"
+                      class="perseus-radio-rationale-content rationale_1ctj0s0"
                       data-test-id="perseus-radio-rationale-content-1"
                     >
                       <div
@@ -4014,7 +4014,7 @@ exports[`single-choice question reviewMode: true should snapshot the same: first
                       </button>
                     </div>
                     <div
-                      class="perseus-radio-rationale-content rationale_1w3tmyh"
+                      class="perseus-radio-rationale-content rationale_1ctj0s0"
                       data-test-id="perseus-radio-rationale-content-2"
                     >
                       <div
@@ -4195,7 +4195,7 @@ exports[`single-choice question reviewMode: true should snapshot the same: first
                       </button>
                     </div>
                     <div
-                      class="perseus-radio-rationale-content rationale_1w3tmyh"
+                      class="perseus-radio-rationale-content rationale_1ctj0s0"
                       data-test-id="perseus-radio-rationale-content-3"
                     >
                       <div

package/src/widgets/__tests__/matcher.test.tsx

@@ -9,7 +9,7 @@ import {question1} from "../__testdata__/matcher.testdata";
 import {renderQuestion} from "./renderQuestion";
 
 import type {APIOptions} from "../../types";
-import type {Matcher} from "enzyme-matchers/lib/types/Matcher";
+import type {Matcher} from "../matcher";
 
 describe("matcher widget", () => {
     beforeEach(() => {

package/src/widgets/__tests__/video.test.ts

@@ -2,7 +2,7 @@ import "@testing-library/jest-dom";
 
 import {testDependencies} from "../../../../../testing/test-dependencies";
 import * as Dependencies from "../../dependencies";
-import {question1} from "../__testdata__/video.testdata";
+import {question1, question2} from "../__testdata__/video.testdata";
 
 import {renderQuestion} from "./renderQuestion";
 
@@ -50,4 +50,20 @@ describe("video widget", () => {
         // Assert
         expect(container).toMatchSnapshot("first mobile render");
     });
+
+    it("vimeo widget should contain dnt param", () => {
+        // Arrange
+        const apiOptions: APIOptions = {
+            isMobile: false,
+        };
+
+        // Act
+        renderQuestion(question2, apiOptions);
+
+        // Assert
+        // eslint-disable-next-line testing-library/no-node-access
+        expect(document.getElementsByTagName("iframe")[0].src).toContain(
+            "dnt=1",
+        );
+    });
 });

package/src/widgets/matcher.tsx

@@ -28,7 +28,7 @@ type State = {
     texRendererLoaded: boolean;
 };
 
-class Matcher extends React.Component<any, any> {
+export class Matcher extends React.Component<any, any> {
     static propTypes = {
         apiOptions: ApiOptions.propTypes,
         labels: PropTypes.array,

package/src/widgets/radio/choice.tsx

@@ -346,6 +346,7 @@ const styles = StyleSheet.create({
         padding: intermediateCheckboxPadding,
         paddingTop: 0,
         marginLeft: 54,
+        color: Color.offBlack64,
         [mediaQueries.smOrSmaller]: {
             padding: intermediateCheckboxPaddingPhone,
             paddingTop: 0,

package/src/widgets/video.tsx

@@ -24,6 +24,7 @@ const DEFAULT_HEIGHT = 720;
 const KA_EMBED = "{host}/embed_video?slug={slug}" + "&internal_video_only=1";
 const IS_URL = /^https?:\/\//;
 const IS_KA_SITE = /(khanacademy\.org|localhost)/;
+const IS_VIMEO = /(vimeo\.com)/;
 
 type UserInput = null;
 type Rubric = PerseusVideoWidgetOptions;
@@ -75,6 +76,16 @@ class Video extends React.Component<Props> {
 
         if (IS_URL.test(location)) {
             url = location;
+            if (IS_VIMEO.test(url)) {
+                // If this is a vimeo video, we need to add the query string
+                // parameter "dnt" so that analytics/tracking cookies aren't set.
+                // https://help.vimeo.com/hc/en-us/articles/12426260232977-Player-parameters-overview
+                if (url.indexOf("?") === -1) {
+                    url += "?dnt=1";
+                } else {
+                    url += "&dnt=1";
+                }
+            }
         } else {
             url = KA_EMBED.replace("{slug}", location);
             let embedHostname = "https://www.khanacademy.org";