@khanacademy/perseus 16.0.0 → 17.1.0

package/CHANGELOG.md

@@ -1,5 +1,79 @@
 # @khanacademy/perseus
 
+## 17.1.0
+
+### Minor Changes
+
+-   [#804](https://github.com/Khan/perseus/pull/804) [`2c295e2c`](https://github.com/Khan/perseus/commit/2c295e2c26ff2bf15e1e8e82bcc34e04e4b9bab0) Thanks [@nixterrimus](https://github.com/nixterrimus)! - Add pill that contains answer after selection in Label Image Widget
+
+*   [#804](https://github.com/Khan/perseus/pull/804) [`6f530d58`](https://github.com/Khan/perseus/commit/6f530d58b4368fb3c38d62d4dcf1f63cecf67d90) Thanks [@nixterrimus](https://github.com/nixterrimus)! - Use WB Pill + `react-popper` to get hovering answer pill in Label Image Widget
+
+-   [#804](https://github.com/Khan/perseus/pull/804) [`cccf1897`](https://github.com/Khan/perseus/commit/cccf1897da294e4b1fec804f2639c1c56bd68201) Thanks [@nixterrimus](https://github.com/nixterrimus)! - Adds "hide answers" toggle to hide answer pills on label image widget
+
+### Patch Changes
+
+-   [#804](https://github.com/Khan/perseus/pull/804) [`ce343147`](https://github.com/Khan/perseus/commit/ce343147f558c2f2a1dcbabae20bdba22c0de86d) Thanks [@nixterrimus](https://github.com/nixterrimus)! - For wide image, label image popovers only go above or below marker
+
+*   [#804](https://github.com/Khan/perseus/pull/804) [`1c8f2753`](https://github.com/Khan/perseus/commit/1c8f275391b02bef8e14d1daccef8fadea9066cd) Thanks [@nixterrimus](https://github.com/nixterrimus)! - Implement hover on label image pills
+
+-   [#856](https://github.com/Khan/perseus/pull/856) [`6c323dc3`](https://github.com/Khan/perseus/commit/6c323dc37e7cc972fe5a1ab7cbf90a23bf4dd3a0) Thanks [@nedredmond](https://github.com/nedredmond)! - Upgrade WB
+
+*   [#858](https://github.com/Khan/perseus/pull/858) [`7433c91b`](https://github.com/Khan/perseus/commit/7433c91bb05ad0441475f40bcd05a3076e7e19f1) Thanks [@nedredmond](https://github.com/nedredmond)! - Remove custom event listeners from label image widget and use WB's built-in functionality to achieve the same thing. Fixes a bug where answer choices were not dismissing as expected.
+
+-   [#804](https://github.com/Khan/perseus/pull/804) [`dd41dd0e`](https://github.com/Khan/perseus/commit/dd41dd0e8bc76a414bb5906bba4648f57547f188) Thanks [@nixterrimus](https://github.com/nixterrimus)! - Reverts Perseus global mobile styles for answer pill in label image widget
+
+*   [#804](https://github.com/Khan/perseus/pull/804) [`53612027`](https://github.com/Khan/perseus/commit/536120272b8cae3b01cdbe09a59488cc4704329d) Thanks [@nixterrimus](https://github.com/nixterrimus)! - Label image dot styles
+
+-   [#861](https://github.com/Khan/perseus/pull/861) [`bb9cd667`](https://github.com/Khan/perseus/commit/bb9cd667dbb4a38724ae174063021fdf18040f9b) Thanks [@nixterrimus](https://github.com/nixterrimus)! - Bug fix: dont hide chevron in label image on focus
+
+*   [#862](https://github.com/Khan/perseus/pull/862) [`4553af79`](https://github.com/Khan/perseus/commit/4553af79a26fc0e635d7dc03be74f39cb00a05f6) Thanks [@nedredmond](https://github.com/nedredmond)! - Darken green to match accessible pill color
+
+-   [#804](https://github.com/Khan/perseus/pull/804) [`07537aae`](https://github.com/Khan/perseus/commit/07537aae870866f4418055b5956e9387f85f72c4) Thanks [@nixterrimus](https://github.com/nixterrimus)! - Add periodicTableWithKey to `perseus-types`
+
+*   [#804](https://github.com/Khan/perseus/pull/804) [`bb81559e`](https://github.com/Khan/perseus/commit/bb81559e02359092ba4d48107010c476b5ae09d5) Thanks [@nixterrimus](https://github.com/nixterrimus)! - Give label image widget switch an accessible label.
+
+-   [#804](https://github.com/Khan/perseus/pull/804) [`fd09014c`](https://github.com/Khan/perseus/commit/fd09014c26e33d2c83a1e6ae3672027ac9583d41) Thanks [@nixterrimus](https://github.com/nixterrimus)! - Minor CSS change to label image
+
+*   [#860](https://github.com/Khan/perseus/pull/860) [`1f4e17ba`](https://github.com/Khan/perseus/commit/1f4e17ba77e1491523813655af18a70285a25989) Thanks [@nixterrimus](https://github.com/nixterrimus)! - Add hover states in label-image widget
+
+-   [#804](https://github.com/Khan/perseus/pull/804) [`f6be48a9`](https://github.com/Khan/perseus/commit/f6be48a96795858e009bea18cc1092d150f98b71) Thanks [@nixterrimus](https://github.com/nixterrimus)! - Change marker styles in label image widget
+
+*   [#804](https://github.com/Khan/perseus/pull/804) [`34f7696b`](https://github.com/Khan/perseus/commit/34f7696b537d28c4b2054a3995f567a9a6834f73) Thanks [@nixterrimus](https://github.com/nixterrimus)! - Allows a manually set direction to be used for label image, if and only if there's space
+
+-   [#848](https://github.com/Khan/perseus/pull/848) [`8857950b`](https://github.com/Khan/perseus/commit/8857950bdeeb6e13bc3766b1c6545289b21cbe2a) Thanks [@nixterrimus](https://github.com/nixterrimus)! - Add analytics for label image
+
+*   [#804](https://github.com/Khan/perseus/pull/804) [`ded7af48`](https://github.com/Khan/perseus/commit/ded7af488d57e6309f7244ca4b897ac680754d74) Thanks [@nixterrimus](https://github.com/nixterrimus)! - Update dot styling in label image widget
+
+-   [#804](https://github.com/Khan/perseus/pull/804) [`1906ec5a`](https://github.com/Khan/perseus/commit/1906ec5afb7fd7332a6cabc6afc79ee1f779f8ec) Thanks [@nixterrimus](https://github.com/nixterrimus)! - Match marker color after checking answers
+
+*   [#851](https://github.com/Khan/perseus/pull/851) [`5e4c21bd`](https://github.com/Khan/perseus/commit/5e4c21bda5717fb793386a810be3144d7b9a9011) Thanks [@nedredmond](https://github.com/nedredmond)! - Fix label image answer pill padding when correct answer registered
+
+-   [#804](https://github.com/Khan/perseus/pull/804) [`30ce593a`](https://github.com/Khan/perseus/commit/30ce593a2f1d552338ce0818cf754c13c22af281) Thanks [@nixterrimus](https://github.com/nixterrimus)! - Reduce motion on dot animation when option is enabled
+
+-   Updated dependencies [[`6c323dc3`](https://github.com/Khan/perseus/commit/6c323dc37e7cc972fe5a1ab7cbf90a23bf4dd3a0), [`2c295e2c`](https://github.com/Khan/perseus/commit/2c295e2c26ff2bf15e1e8e82bcc34e04e4b9bab0), [`1f4e17ba`](https://github.com/Khan/perseus/commit/1f4e17ba77e1491523813655af18a70285a25989), [`8857950b`](https://github.com/Khan/perseus/commit/8857950bdeeb6e13bc3766b1c6545289b21cbe2a)]:
+    -   @khanacademy/math-input@16.1.2
+    -   @khanacademy/perseus-core@1.4.1
+    -   @khanacademy/kas@0.3.7
+    -   @khanacademy/kmath@0.1.8
+    -   @khanacademy/perseus-linter@0.3.10
+    -   @khanacademy/pure-markdown@0.2.13
+    -   @khanacademy/simple-markdown@0.11.2
+
+## 17.0.0
+
+### Major Changes
+
+-   [#852](https://github.com/Khan/perseus/pull/852) [`204788f8`](https://github.com/Khan/perseus/commit/204788f8f583bda5ff94d74fd70ec542fedd3d6e) Thanks [@handeyeco](https://github.com/handeyeco)! - Remove ItemRenderer again
+
+*   [#838](https://github.com/Khan/perseus/pull/838) [`233fc9fc`](https://github.com/Khan/perseus/commit/233fc9fcd4c65d2ff0c8f1ebd1cb1b17b76cbe0c) Thanks [@handeyeco](https://github.com/handeyeco)! - Remove TexButtons and update ExpressionEditor
+
+### Patch Changes
+
+-   [#854](https://github.com/Khan/perseus/pull/854) [`2e2f2cc1`](https://github.com/Khan/perseus/commit/2e2f2cc1afe99613eb688ab1e4e1fccad0c8df57) Thanks [@handeyeco](https://github.com/handeyeco)! - Remove unused CSS images for next/prev steps
+
+-   Updated dependencies [[`41d3cd93`](https://github.com/Khan/perseus/commit/41d3cd93f78d4649c8a57b6fa4964c0c9f2c45b0), [`27f691aa`](https://github.com/Khan/perseus/commit/27f691aa11f061b54db487b5b35222431776260f), [`3803452b`](https://github.com/Khan/perseus/commit/3803452b0593649faf4043bf6e1d7681a14078e4), [`ef32b88f`](https://github.com/Khan/perseus/commit/ef32b88f5027154784fb496506d7c96ee3765eac), [`820febc5`](https://github.com/Khan/perseus/commit/820febc5814a5a10d7c1743be8aa9d220f2d9bd8), [`67a09051`](https://github.com/Khan/perseus/commit/67a09051c61df98b697349ad75760193e4228bfe)]:
+    -   @khanacademy/math-input@16.1.1
+
 ## 16.0.0
 
 ### Major Changes

package/dist/article-renderer.d.ts

@@ -5,13 +5,12 @@
 import * as React from "react";
 import { DependenciesContext } from "./dependencies";
 import Renderer from "./renderer";
-import type { KeypadProps } from "./mixins/provide-keypad";
 import type { PerseusRenderer } from "./perseus-types";
 import type { APIOptions, PerseusDependenciesV2 } from "./types";
 import type { KeypadAPI } from "@khanacademy/math-input";
 import type { KeypadContextRendererInterface } from "@khanacademy/perseus-core";
 import type { LinterContextProps } from "@khanacademy/perseus-linter";
-type Props = Partial<React.ContextType<typeof DependenciesContext>> & KeypadProps & {
+type Props = Partial<React.ContextType<typeof DependenciesContext>> & {
     apiOptions: APIOptions;
     json: PerseusRenderer | ReadonlyArray<PerseusRenderer>;
     /**

package/dist/components.d.ts

@@ -12,5 +12,4 @@ export { default as PropCheckBox } from "./components/prop-check-box";
 export { default as RangeInput } from "./components/range-input";
 export { default as SvgImage } from "./components/svg-image";
 export { default as TextInput } from "./components/text-input";
-export { default as TexButtons } from "./components/tex-buttons";
 export { default as TextListEditor } from "./components/text-list-editor";

package/dist/dependencies.d.ts

@@ -2,6 +2,7 @@ import * as React from "react";
 import type { PerseusDependencies, PerseusDependenciesV2 } from "./types";
 export declare const setDependencies: (dependencies: PerseusDependencies) => void;
 export declare const getDependencies: () => PerseusDependencies;
+export type DependencyProps = Partial<React.ContextType<typeof DependenciesContext>>;
 export declare const DependenciesContext: React.Context<PerseusDependenciesV2>;
 /**
  * useDependencies provides easy access to the current Perseus dependencies.

package/dist/es/index.css

@@ -675,30 +675,6 @@ div.timeline-total {
     width: 100px;
 }
 
-#previous-step {
-    margin: 5px;
-    cursor: pointer;
-    float: left;
-    width: 100px;
-}
-
-#next-step {
-    margin: 5px;
-    cursor: pointer;
-    float: right;
-    width: 80px;
-}
-
-#previous-step span {
-    background: url(/images/previous-step.png) no-repeat 0 50% transparent;
-    padding: 4px 0 4px 25px;
-}
-
-#next-step span {
-    background: url(/images/next-step.png) no-repeat 100% 50% transparent;
-    padding: 4px 25px 4px 0;
-}
-
 #next-problem {
     margin: 5px;
     cursor: pointer;
@@ -2819,6 +2795,26 @@ body.mobile .categorizer-container td.category input[type="radio"] + span:active
 .framework-perseus .perseus-label-image-widget-instructions div.paragraph {
   margin: 0;
 }
+.framework-perseus button[id*="perseus-label-image-widget-answer-pill"] div.paragraph,
+.framework-perseus div[id*="perseus-label-image-widget-answer-pill"] div.paragraph {
+  all: revert;
+}
+.framework-perseus button[id*="perseus-label-image-widget-answer-pill"] div.perseus-block-math-inner,
+.framework-perseus div[id*="perseus-label-image-widget-answer-pill"] div.perseus-block-math-inner {
+  margin: -5px 0 !important;
+}
+@media (max-width: 767px) {
+  [id*="perseus-label-image-widget-answer-pill"] div.paragraph {
+    all: revert;
+  }
+  [id*="perseus-label-image-widget-answer-pill"] > div.perseus-renderer-responsive {
+    all: revert;
+  }
+  .framework-perseus.perseus-mobile [id*="perseus-label-image-widget-answer-pill"] .perseus-renderer > .paragraph,
+  .framework-perseus.perseus-mobile [id*="perseus-label-image-widget-answer-pill"] .perseus-renderer > .paragraph .paragraph {
+    all: revert;
+  }
+}
 .framework-perseus:not(.perseus-article).perseus-mobile .perseus-label-image-widget-instructions {
   color: initial;
 }
@@ -3584,48 +3580,6 @@ body.mobile .framework-perseus table.perseus-widget-table-of-values.non-markdown
     font-size: 18px;
   }
 }
-/**
- * Styles for managing the popover animations.
- *
- * Ideally, we'd be generating these styles with Aphrodite (along with
- * CSSTransitionGroup's support for custom classnames), but the generated
- * styles have issues on mobile Safari.
- *   See: https://github.com/Khan/aphrodite/issues/68.
- *
- * If the animation durations change, the corresponding values in
- * echo-manager.js must change as well.
- */
-.echo-slide-and-fade-enter {
-  opacity: 1 !important;
-  transform: translate3d(0, 0, 0) !important;
-}
-.echo-slide-and-fade-enter.echo-slide-and-fade-enter-active {
-  opacity: 0 !important;
-  transform: translate3d(0, -33%, 0) !important;
-  /**
-         * TODO(charlie): These times are intentionally different, which means
-         * that the animation really "ends" after 400ms
-         * cubic-bezier(1, 0, 0.9, 1) (since the opacity goes to 0), even though
-         * the transform doesn't complete. There's probably a way to achieve the
-         * same effect by manipulating the transform's Bezier curve and total
-         * displacement.
-         */
-  transition: transform 800ms cubic-bezier(0, 1, 0.25, 1), opacity 400ms cubic-bezier(1, 0, 0.9, 1) !important;
-}
-.echo-fade-only-enter {
-  opacity: 1 !important;
-}
-.echo-fade-only-enter.echo-fade-only-enter-active {
-  opacity: 0 !important;
-  transition: opacity 300ms cubic-bezier(0.25, 0, 0.75, 1) !important;
-}
-.echo-long-fade-only-enter {
-  opacity: 1 !important;
-}
-.echo-long-fade-only-enter.echo-long-fade-only-enter-active {
-  opacity: 0 !important;
-  transition: opacity 400ms cubic-bezier(0.75, 0, 0.75, 1) !important;
-}
 .keypad-input {
   outline: none !important;
 }
@@ -3706,24 +3660,6 @@ body.mobile .framework-perseus table.perseus-widget-table-of-values.non-markdown
   color: white !important;
   display: inline-block !important;
 }
-/**
- * Styles for managing the popover animations.
- *
- * Ideally, we'd be generating these styles with Aphrodite (along with
- * CSSTransitionGroup's support for custom classnames), but the generated
- * styles have issues on mobile Safari.
- *   See: https://github.com/Khan/aphrodite/issues/68.
- *
- * If the animation durations change, the corresponding values in
- * popover-manager.js must change as well.
- */
-.popover-enter {
-  opacity: 0 !important;
-}
-.popover-enter.popover-enter-active {
-  opacity: 1 !important;
-  transition: opacity 200ms ease-out !important;
-}
 /*
  * MathQuill v0.10.1               http://mathquill.com
  * by Han, Jeanine, and Mary  maintainers@mathquill.com
@@ -4160,9 +4096,3 @@ body.mobile .framework-perseus table.perseus-widget-table-of-values.non-markdown
   margin-top: -0.1em;
 }
 
-.tabbar_item {
-  background-color: red;
-}
-.tabbar_item:focus {
-  background-color: green;
-}