@khanacademy/perseus 1.1.2 → 1.2.0

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "1.1.2",
+    "version": "1.2.0",
     "publishConfig": {
         "access": "public"
     },
@@ -35,16 +35,16 @@
         "@khanacademy/wonder-blocks-color": "^1.1.20",
         "@khanacademy/wonder-blocks-core": "^4.3.0",
         "@khanacademy/wonder-blocks-data": "^7.0.0",
-        "@khanacademy/wonder-blocks-dropdown": "^2.6.7",
+        "@khanacademy/wonder-blocks-dropdown": "^2.10.1",
         "@khanacademy/wonder-blocks-form": "^2.4.5",
         "@khanacademy/wonder-blocks-i18n": "^1.2.3",
         "@khanacademy/wonder-blocks-layout": "^1.4.9",
         "@khanacademy/wonder-blocks-link": "^3.8.5",
         "@khanacademy/wonder-blocks-modal": "^2.3.1",
-        "@khanacademy/wonder-blocks-popover": "^1.1.10",
+        "@khanacademy/wonder-blocks-popover": "^1.1.24",
         "@khanacademy/wonder-blocks-progress-spinner": "^1.1.31",
         "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-        "@khanacademy/wonder-blocks-tooltip": "^1.3.10",
+        "@khanacademy/wonder-blocks-tooltip": "^1.4.0",
         "@khanacademy/wonder-blocks-typography": "^1.1.31",
         "@khanacademy/wonder-stuff-core": "^0.1.2",
         "aphrodite": "^1.2.5",
@@ -68,16 +68,16 @@
         "@khanacademy/wonder-blocks-color": "^1.1.20",
         "@khanacademy/wonder-blocks-core": "^4.3.0",
         "@khanacademy/wonder-blocks-data": "^7.0.0",
-        "@khanacademy/wonder-blocks-dropdown": "^2.6.7",
+        "@khanacademy/wonder-blocks-dropdown": "^2.10.1",
         "@khanacademy/wonder-blocks-form": "^2.4.5",
         "@khanacademy/wonder-blocks-i18n": "^1.2.3",
         "@khanacademy/wonder-blocks-layout": "^1.4.9",
         "@khanacademy/wonder-blocks-link": "^3.8.5",
         "@khanacademy/wonder-blocks-modal": "^2.3.1",
-        "@khanacademy/wonder-blocks-popover": "^1.1.10",
+        "@khanacademy/wonder-blocks-popover": "^1.1.24",
         "@khanacademy/wonder-blocks-progress-spinner": "^1.1.31",
         "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-        "@khanacademy/wonder-blocks-tooltip": "^1.3.10",
+        "@khanacademy/wonder-blocks-tooltip": "^1.4.0",
         "@khanacademy/wonder-blocks-typography": "^1.1.31",
         "@khanacademy/wonder-stuff-core": "^0.1.2",
         "aphrodite": "^1.2.5",

package/src/__tests__/__snapshots__/renderer_test.jsx.snap

@@ -385,11 +385,17 @@ exports[`renderer snapshots correct answer: correct answer 1`] = `
               <div
                 class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
               >
+                <span
+                  aria-atomic="true"
+                  aria-live="polite"
+                  aria-relevant="additions text"
+                  class="srOnly_19bpjuy"
+                  data-test-id="dropdown-live-region"
+                />
                 <button
                   aria-expanded="false"
                   aria-haspopup="listbox"
                   class="button_vr44p2-o_O-shared_u51dsh-o_O-default_kjzwx1-o_O-focus_1qpi544"
-                  tabindex="0"
                   type="button"
                 >
                   <span
@@ -456,11 +462,17 @@ exports[`renderer snapshots incorrect answer: incorrect answer 1`] = `
               <div
                 class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
               >
+                <span
+                  aria-atomic="true"
+                  aria-live="polite"
+                  aria-relevant="additions text"
+                  class="srOnly_19bpjuy"
+                  data-test-id="dropdown-live-region"
+                />
                 <button
                   aria-expanded="false"
                   aria-haspopup="listbox"
                   class="button_vr44p2-o_O-shared_u51dsh-o_O-default_kjzwx1-o_O-focus_1qpi544"
-                  tabindex="0"
                   type="button"
                 >
                   <span
@@ -527,11 +539,17 @@ exports[`renderer snapshots initial render: initial render 1`] = `
               <div
                 class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
               >
+                <span
+                  aria-atomic="true"
+                  aria-live="polite"
+                  aria-relevant="additions text"
+                  class="srOnly_19bpjuy"
+                  data-test-id="dropdown-live-region"
+                />
                 <button
                   aria-expanded="false"
                   aria-haspopup="listbox"
                   class="button_vr44p2-o_O-shared_u51dsh-o_O-default_kjzwx1"
-                  tabindex="0"
                   type="button"
                 >
                   <span

package/src/components/highlighting/ui/highlight-tooltip.jsx

@@ -13,12 +13,12 @@
  * still have to notify the tooltip to remeasure itself when the highlight
  * focus _changes_.
  */
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+import Tooltip from "@khanacademy/wonder-blocks-tooltip";
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
 import {Log} from "../../../logging/log.js";
-import {colors} from "../../../styles/global-styles.js";
-import NewTooltip from "../../new-tooltip/new-tooltip.jsx";
 
 import {getRelativeRect} from "./util.js";
 
@@ -36,8 +36,6 @@ type HighlightTooltipProps = {|
 |};
 
 class HighlightTooltip extends React.PureComponent<HighlightTooltipProps> {
-    _tooltip: ?React.ElementRef<typeof NewTooltip>;
-
     _getFocusRect(): ?Rect {
         const {focusNode, focusOffset, offsetParent} = this.props;
 
@@ -94,31 +92,36 @@ class HighlightTooltip extends React.PureComponent<HighlightTooltipProps> {
             return null;
         }
 
-        const content = (
-            <div className={css(styles.tooltipLabel)}>{this.props.label}</div>
+        // using div instead of TooltipContent because
+        // TooltipContent wouldn't let me overwrite
+        // user-select and onClick
+        const content: $FlowFixMe = (
+            <div
+                className={css(styles.tooltipLabel)}
+                onClick={this.props.onClick}
+            >
+                {this.props.label}
+            </div>
         );
 
+        const style = {
+            position: "absolute",
+            left: focusRect.left,
+            // offset the spacing WB provides around tooltips
+            top: `calc(${Math.round(focusRect.top)}px + 0.95em)`,
+            height: 0,
+        };
+
         return (
-            <NewTooltip
-                content={content}
-                color={colors.kaBlue}
-                inverted={true}
-                onClick={this.props.onClick}
+            <div
+                style={style}
                 onMouseEnter={this.props.onMouseEnter}
                 onMouseLeave={this.props.onMouseLeave}
-                toggleOnHover={false}
-                showOnMount={true}
-                ref={(e) => (this._tooltip = e)}
             >
-                <div
-                    style={{
-                        position: "absolute",
-                        left: focusRect.left,
-                        top: focusRect.top,
-                        height: focusRect.height,
-                    }}
-                />
-            </NewTooltip>
+                <Tooltip content={content} opened={true}>
+                    <div />
+                </Tooltip>
+            </div>
         );
     }
 }
@@ -131,6 +134,9 @@ const styles = StyleSheet.create({
         // we lose our reference to the _actual_ text they want to highlight,
         // and the "Add highlight" action fails.
         userSelect: "none",
+        fontFamily: `"Lato", sans-serif`,
+        padding: `10px ${Spacing.medium_16}px`,
+        cursor: "pointer",
     },
 });
 

package/src/components/highlighting/ui/selection-tracker.jsx

@@ -24,7 +24,7 @@ export type TrackedSelection = {|
     proposedHighlight: DOMHighlight,
 |};
 
-type SelectionTrackerProps = {
+type SelectionTrackerProps = {|
     // A function that builds a DOMHighlight from the given DOMRange, if
     // possible. If it would not currently be valid to add a highlight over the
     // given DOMRange, returns null.
@@ -38,17 +38,15 @@ type SelectionTrackerProps = {
     ) => React.Element<any>,
     // If false, will not track selections.
     enabled: boolean,
-    ...
-};
+|};
 
-type SelectionTrackerState = {
+type SelectionTrackerState = {|
     // The current state of the mouse button. We distinguish between down,
     // down and the selection has changed since going down, and up.
     mouseState: "down" | "down-and-selecting" | "up",
     // The current TrackedSelection, if any.
     trackedSelection: ?TrackedSelection,
-    ...
-};
+|};
 
 class SelectionTracker extends React.PureComponent<
     SelectionTrackerProps,
@@ -63,15 +61,15 @@ class SelectionTracker extends React.PureComponent<
         this._updateListeners(false, this.props.enabled);
     }
 
-    UNSAFE_componentWillReceiveProps(nextProps: SelectionTrackerProps) {
-        if (this.props.buildHighlight !== nextProps.buildHighlight) {
+    componentDidUpdate(prevProps: SelectionTrackerProps) {
+        if (this.props.buildHighlight !== prevProps.buildHighlight) {
             // The highlight-building function changed, so the
             // proposedHighlight we built with it might be different, or no
             // longer be valid. Update accordingly.
-            this._updateTrackedSelection(nextProps.buildHighlight);
+            this._updateTrackedSelection();
         }
 
-        this._updateListeners(this.props.enabled, nextProps.enabled);
+        this._updateListeners(prevProps.enabled, this.props.enabled);
     }
 
     componentWillUnmount() {
@@ -133,37 +131,28 @@ class SelectionTracker extends React.PureComponent<
     }
 
     /**
-     * Compute the current TrackedSelection from the document state.
+     * Compute and update the TrackedSelection to reflect the document state.
      */
-    _computeTrackedSelection(
-        buildHighlight: (domRange: DOMRange) => ?DOMHighlight,
-    ): ?TrackedSelection {
+    _updateTrackedSelection(): void {
         const focusAndRange = this._computeFocusAndRange();
         if (!focusAndRange) {
-            return null;
+            this.setState({trackedSelection: null});
+            return;
         }
 
         const {focusNode, focusOffset, range} = focusAndRange;
-        const proposedHighlight = buildHighlight(range);
+        const proposedHighlight = this.props.buildHighlight(range);
         if (!proposedHighlight) {
-            return null;
+            this.setState({trackedSelection: null});
+            return;
         }
 
-        return {focusNode, focusOffset, proposedHighlight};
-    }
-
-    /**
-     * Update the TrackedSelection to reflect the document state.
-     */
-    _updateTrackedSelection(
-        buildHighlight: (domRange: DOMRange) => ?DOMHighlight,
-    ) {
-        const trackedSelection = this._computeTrackedSelection(buildHighlight);
+        const trackedSelection = {focusNode, focusOffset, proposedHighlight};
         this.setState({trackedSelection});
     }
 
     _handleSelectionChange: () => void = () => {
-        this._updateTrackedSelection(this.props.buildHighlight);
+        this._updateTrackedSelection();
 
         if (this.state.mouseState === "down") {
             this.setState({

package/src/styles/articles.less

@@ -178,8 +178,6 @@
         position: relative;
 
         &:before {
-            background: linear-gradient(to right,
-                rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
             bottom: 0;
             content: "";
             position: absolute;

package/src/styles/perseus-renderer.less

@@ -107,7 +107,7 @@
     }
 
     div.paragraph {
-        font-family: "Noto Serif", serif;
+        font-family: "Lato", sans-serif;
         font-weight: 400;
         font-size: 18px;
         line-height: 22px;

package/src/widgets/__tests__/__snapshots__/dropdown_test.jsx.snap

@@ -23,11 +23,19 @@ exports[`Dropdown widget should snapshot when opened: dropdown open 1`] = `
               <div
                 class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
               >
+                <span
+                  aria-atomic="true"
+                  aria-live="polite"
+                  aria-relevant="additions text"
+                  class="srOnly_19bpjuy"
+                  data-test-id="dropdown-live-region"
+                >
+                  3 items
+                </span>
                 <button
                   aria-expanded="true"
                   aria-haspopup="listbox"
                   class="button_vr44p2-o_O-shared_u51dsh-o_O-default_kjzwx1-o_O-focus_1qpi544"
-                  tabindex="0"
                   type="button"
                 >
                   <span
@@ -94,11 +102,17 @@ exports[`Dropdown widget should snapshot: initial render 1`] = `
               <div
                 class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
               >
+                <span
+                  aria-atomic="true"
+                  aria-live="polite"
+                  aria-relevant="additions text"
+                  class="srOnly_19bpjuy"
+                  data-test-id="dropdown-live-region"
+                />
                 <button
                   aria-expanded="false"
                   aria-haspopup="listbox"
                   class="button_vr44p2-o_O-shared_u51dsh-o_O-default_kjzwx1"
-                  tabindex="0"
                   type="button"
                 >
                   <span

package/src/components/new-tooltip/README.md

@@ -1,3 +0,0 @@
-# `NewTooltip`: KA tooltip component
-
-This is a wrapper around [Wonderblock's popover component](https://github.com/Khan/wonder-blocks). It is API compatiable with Perseus and remains for compatiability and legacy reasons. If you are anyone but the Perseus group at Khan Academy please use the wonderblocks component directly.