@khanacademy/perseus 2.0.0 → 2.1.0

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "2.0.0",
+    "version": "2.1.0",
     "publishConfig": {
         "access": "public"
     },
@@ -23,30 +23,30 @@
     "dependencies": {
         "@khanacademy/kas": "^0.2.7",
         "@khanacademy/kmath": "^0.0.8",
-        "@khanacademy/math-input": "^0.6.7",
+        "@khanacademy/math-input": "^0.6.8",
         "@khanacademy/perseus-linter": "^0.2.5",
         "@khanacademy/pure-markdown": "^0.1.5",
         "@khanacademy/simple-markdown": "^0.8.6",
         "mathquill": "git+https://git@github.com/Khan/mathquill.git#a9ae54e057c5c1acc8244a5627acbff29901d992"
     },
     "devDependencies": {
-        "@khanacademy/wonder-blocks-button": "^3.0.14",
-        "@khanacademy/wonder-blocks-clickable": "^2.4.5",
-        "@khanacademy/wonder-blocks-color": "^1.2.1",
-        "@khanacademy/wonder-blocks-core": "^4.7.0",
-        "@khanacademy/wonder-blocks-data": "^10.1.0",
-        "@khanacademy/wonder-blocks-dropdown": "^2.10.7",
-        "@khanacademy/wonder-blocks-form": "^3.1.11",
-        "@khanacademy/wonder-blocks-i18n": "^1.2.4",
-        "@khanacademy/wonder-blocks-layout": "^1.4.16",
-        "@khanacademy/wonder-blocks-link": "^3.9.1",
-        "@khanacademy/wonder-blocks-modal": "^3.0.7",
-        "@khanacademy/wonder-blocks-popover": "^1.1.30",
-        "@khanacademy/wonder-blocks-progress-spinner": "^1.1.40",
+        "@khanacademy/wonder-blocks-button": "^4.0.8",
+        "@khanacademy/wonder-blocks-clickable": "^3.0.8",
+        "@khanacademy/wonder-blocks-color": "^2.0.1",
+        "@khanacademy/wonder-blocks-core": "^5.0.4",
+        "@khanacademy/wonder-blocks-data": "^11.0.8",
+        "@khanacademy/wonder-blocks-dropdown": "^3.0.8",
+        "@khanacademy/wonder-blocks-form": "^4.0.8",
+        "@khanacademy/wonder-blocks-i18n": "^2.0.2",
+        "@khanacademy/wonder-blocks-layout": "^2.0.8",
+        "@khanacademy/wonder-blocks-link": "^4.0.8",
+        "@khanacademy/wonder-blocks-modal": "^4.0.8",
+        "@khanacademy/wonder-blocks-popover": "^2.0.8",
+        "@khanacademy/wonder-blocks-progress-spinner": "^2.0.8",
         "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-        "@khanacademy/wonder-blocks-tooltip": "^1.4.6",
-        "@khanacademy/wonder-blocks-typography": "^1.1.38",
-        "@khanacademy/wonder-stuff-core": "^1.2.1",
+        "@khanacademy/wonder-blocks-tooltip": "^2.0.8",
+        "@khanacademy/wonder-blocks-typography": "^2.0.5",
+        "@khanacademy/wonder-stuff-core": "^1.2.2",
         "aphrodite": "^1.2.5",
         "classnames": "^1.1.4",
         "create-react-class": "^15.6.3",
@@ -63,23 +63,23 @@
         "underscore": "^1.4.4"
     },
     "peerDependencies": {
-        "@khanacademy/wonder-blocks-button": "^3.0.14",
-        "@khanacademy/wonder-blocks-clickable": "^2.4.5",
-        "@khanacademy/wonder-blocks-color": "^1.2.1",
-        "@khanacademy/wonder-blocks-core": "^4.7.0",
-        "@khanacademy/wonder-blocks-data": "^10.1.0",
-        "@khanacademy/wonder-blocks-dropdown": "^2.10.7",
-        "@khanacademy/wonder-blocks-form": "^3.1.11",
-        "@khanacademy/wonder-blocks-i18n": "^1.2.4",
-        "@khanacademy/wonder-blocks-layout": "^1.4.16",
-        "@khanacademy/wonder-blocks-link": "^3.9.1",
-        "@khanacademy/wonder-blocks-modal": "^3.0.7",
-        "@khanacademy/wonder-blocks-popover": "^1.1.30",
-        "@khanacademy/wonder-blocks-progress-spinner": "^1.1.40",
+        "@khanacademy/wonder-blocks-button": "^4.0.8",
+        "@khanacademy/wonder-blocks-clickable": "^3.0.8",
+        "@khanacademy/wonder-blocks-color": "^2.0.1",
+        "@khanacademy/wonder-blocks-core": "^5.0.4",
+        "@khanacademy/wonder-blocks-data": "^11.0.8",
+        "@khanacademy/wonder-blocks-dropdown": "^3.0.8",
+        "@khanacademy/wonder-blocks-form": "^4.0.8",
+        "@khanacademy/wonder-blocks-i18n": "^2.0.2",
+        "@khanacademy/wonder-blocks-layout": "^2.0.8",
+        "@khanacademy/wonder-blocks-link": "^4.0.8",
+        "@khanacademy/wonder-blocks-modal": "^4.0.8",
+        "@khanacademy/wonder-blocks-popover": "^2.0.8",
+        "@khanacademy/wonder-blocks-progress-spinner": "^2.0.8",
         "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-        "@khanacademy/wonder-blocks-tooltip": "^1.4.6",
-        "@khanacademy/wonder-blocks-typography": "^1.1.38",
-        "@khanacademy/wonder-stuff-core": "^1.2.1",
+        "@khanacademy/wonder-blocks-tooltip": "^2.0.8",
+        "@khanacademy/wonder-blocks-typography": "^2.0.5",
+        "@khanacademy/wonder-stuff-core": "^1.2.2",
         "aphrodite": "^1.2.5",
         "classnames": "^1.1.4",
         "create-react-class": "^15.6.3",

package/src/components/graph.jsx

@@ -28,8 +28,6 @@ const defaultInstructionsStyle = {
     position: "absolute",
     zIndex: 1,
     transition: "opacity .25s ease-in-out",
-    "-moz-transition": "opacity .25s ease-in-out",
-    "-webkit-transition": "opacity .25s ease-in-out",
 };
 
 const instructionsTextStyle = {

package/src/components/math-input.jsx

@@ -1,174 +1,50 @@
-/* eslint-disable react/sort-comp */
 // @flow
 import classNames from "classnames";
 import $ from "jquery";
 import MathQuill from "mathquill";
-import PropTypes from "prop-types";
 import * as React from "react";
 import ReactDOM from "react-dom";
 import _ from "underscore";
 
 import TexButtons from "./tex-buttons.jsx";
 
-const PT = PropTypes;
+import type {ButtonSetsType} from "./tex-buttons.jsx";
+
+type ButtonsVisibleType = "always" | "never" | "focused";
+
+type Props = {|
+    className?: string,
+    value: string,
+    onChange: $FlowFixMe,
+    convertDotToTimes: boolean,
+    buttonsVisible: ButtonsVisibleType,
+    buttonSets: ButtonSetsType,
+    labelText?: string,
+    onFocus?: () => void,
+    onBlur?: () => void,
+|};
+
+type DefaultProps = {|
+    value: Props["value"],
+    convertDotToTimes: Props["convertDotToTimes"],
+    buttonsVisible: Props["buttonsVisible"],
+|};
+
+type State = {|
+    focused: boolean,
+|};
 
 // A WYSIWYG math input that calls `onChange(LaTeX-string)`
-class MathInput extends React.Component<$FlowFixMe, $FlowFixMe> {
+class MathInput extends React.Component<Props, State> {
     mouseDown: boolean;
 
-    static propTypes = {
-        value: PT.string,
-        onChange: PT.func.isRequired,
-        convertDotToTimes: PT.bool,
-        buttonsVisible: PT.oneOf(["always", "never", "focused"]),
-        buttonSets: TexButtons.buttonSetsType.isRequired,
-        labelText: PropTypes.string,
-        onFocus: PT.func,
-        onBlur: PT.func,
-    };
-
-    static defaultProps: $FlowFixMe = {
+    static defaultProps: DefaultProps = {
         value: "",
         convertDotToTimes: false,
         buttonsVisible: "focused",
     };
 
-    state: $FlowFixMe = {focused: false};
-
-    render(): React.Node {
-        let className = classNames({
-            "perseus-math-input": true,
-
-            // mathquill usually adds these itself but react removes them when
-            // updating the component.
-            "mq-editable-field": true,
-            "mq-math-mode": true,
-        });
-
-        if (this.props.className) {
-            className = className + " " + this.props.className;
-        }
-
-        let buttons = null;
-        if (this._shouldShowButtons()) {
-            buttons = (
-                <TexButtons
-                    sets={this.props.buttonSets}
-                    className="math-input-buttons absolute"
-                    convertDotToTimes={this.props.convertDotToTimes}
-                    onInsert={this.insert}
-                />
-            );
-        }
-
-        return (
-            <div style={{display: "inline-block"}}>
-                <div style={{display: "inline-block"}}>
-                    <span
-                        className={className}
-                        // eslint-disable-next-line react/no-string-refs
-                        ref="mathinput"
-                        aria-label={this.props.labelText}
-                        onFocus={this.handleFocus}
-                        onBlur={this.handleBlur}
-                    />
-                </div>
-                <div style={{position: "relative"}} onBlur={this.handleBlur}>
-                    {buttons}
-                </div>
-            </div>
-        );
-    }
-
-    // handlers:
-    // keep track of two related bits of state:
-    // * this.state.focused - whether the buttons are currently shown
-    // * this.mouseDown - whether a mouse click is active that started in the
-    //   buttons div
-
-    handleFocus: () => void = () => {
-        this.setState({focused: true});
-        // TODO(joel) fix properly - we should probably allow onFocus handlers
-        // to this property, but we need to work correctly with them.
-        // if (this.props.onFocus) {
-        //     this.props.onFocus();
-        // }
-    };
-
-    handleMouseDown: (MouseEvent) => void = (event) => {
-        // $FlowFixMe[incompatible-use]
-        // $FlowFixMe[incompatible-call]
-        const focused = ReactDOM.findDOMNode(this).contains(event.target);
-        this.mouseDown = focused;
-        if (!focused) {
-            this.setState({focused: false});
-        }
-    };
-
-    handleMouseUp: (MouseEvent) => void = () => {
-        // this mouse click started in the buttons div so we should focus the
-        // input
-        if (this.mouseDown) {
-            this.focus();
-        }
-        this.mouseDown = false;
-    };
-
-    handleBlur: (SyntheticFocusEvent<>) => void = (e) => {
-        // TODO(michaelpolyak): Consider trapping focus within the button group.
-        // Focusing back on the input when TAB out of the last button in the
-        // group. This will probably require ESCAPE key handling to enable to
-        // close (blur) the button group in order to focus on next page element.
-        if (
-            !this.mouseDown &&
-            // $FlowFixMe[incompatible-use]
-            // $FlowFixMe[incompatible-call]
-            !ReactDOM.findDOMNode(this).contains(e.relatedTarget)
-        ) {
-            this.setState({focused: false});
-        }
-    };
-
-    _shouldShowButtons: () => boolean = () => {
-        if (this.props.buttonsVisible === "always") {
-            return true;
-        }
-        if (this.props.buttonsVisible === "never") {
-            return false;
-        }
-        return this.state.focused;
-    };
-
-    insert: ($FlowFixMe) => void = (value) => {
-        const input = this.mathField();
-        if (_(value).isFunction()) {
-            value(input);
-        } else if (value[0] === "\\") {
-            input.cmd(value).focus();
-        } else {
-            input.write(value).focus();
-        }
-        input.focus();
-    };
-
-    mathField: ($FlowFixMe) => $FlowFixMe = (options) => {
-        // The MathQuill API is now "versioned" through its own "InterVer"
-        // system.
-        // See: https://github.com/mathquill/mathquill/pull/459
-        const MQ = MathQuill.getInterface(2);
-
-        // MathQuill.MathField takes a DOM node, MathQuill-ifies it if it's
-        // seeing that node for the first time, then returns the associated
-        // MathQuill object for that node. It is stable - will always return
-        // the same object when called on the same DOM node.
-        // eslint-disable-next-line react/no-string-refs
-        return MQ.MathField(ReactDOM.findDOMNode(this.refs.mathinput), options);
-    };
-
-    componentWillUnmount() {
-        window.removeEventListener("mousedown", this.handleMouseDown);
-        window.removeEventListener("mouseup", this.handleMouseUp);
-    }
+    state: State = {focused: false};
 
     componentDidMount() {
         window.addEventListener("mousedown", this.handleMouseDown);
@@ -268,6 +144,96 @@ class MathInput extends React.Component<$FlowFixMe, $FlowFixMe> {
         initialized = true;
     }
 
+    componentWillUnmount() {
+        window.removeEventListener("mousedown", this.handleMouseDown);
+        window.removeEventListener("mouseup", this.handleMouseUp);
+    }
+
+    // handlers:
+    // keep track of two related bits of state:
+    // * this.state.focused - whether the buttons are currently shown
+    // * this.mouseDown - whether a mouse click is active that started in the
+    //   buttons div
+
+    handleFocus: () => void = () => {
+        this.setState({focused: true});
+        // TODO(joel) fix properly - we should probably allow onFocus handlers
+        // to this property, but we need to work correctly with them.
+        // if (this.props.onFocus) {
+        //     this.props.onFocus();
+        // }
+    };
+
+    handleMouseDown: (MouseEvent) => void = (event) => {
+        // $FlowFixMe[incompatible-use]
+        // $FlowFixMe[incompatible-call]
+        const focused = ReactDOM.findDOMNode(this).contains(event.target);
+        this.mouseDown = focused;
+        if (!focused) {
+            this.setState({focused: false});
+        }
+    };
+
+    handleMouseUp: (MouseEvent) => void = () => {
+        // this mouse click started in the buttons div so we should focus the
+        // input
+        if (this.mouseDown) {
+            this.focus();
+        }
+        this.mouseDown = false;
+    };
+
+    handleBlur: (SyntheticFocusEvent<>) => void = (e) => {
+        // TODO(michaelpolyak): Consider trapping focus within the button group.
+        // Focusing back on the input when TAB out of the last button in the
+        // group. This will probably require ESCAPE key handling to enable to
+        // close (blur) the button group in order to focus on next page element.
+        if (
+            !this.mouseDown &&
+            // $FlowFixMe[incompatible-use]
+            // $FlowFixMe[incompatible-call]
+            !ReactDOM.findDOMNode(this).contains(e.relatedTarget)
+        ) {
+            this.setState({focused: false});
+        }
+    };
+
+    _shouldShowButtons: () => boolean = () => {
+        if (this.props.buttonsVisible === "always") {
+            return true;
+        }
+        if (this.props.buttonsVisible === "never") {
+            return false;
+        }
+        return this.state.focused;
+    };
+
+    insert: ($FlowFixMe) => void = (value) => {
+        const input = this.mathField();
+        if (_(value).isFunction()) {
+            value(input);
+        } else if (value[0] === "\\") {
+            input.cmd(value).focus();
+        } else {
+            input.write(value).focus();
+        }
+        input.focus();
+    };
+
+    mathField: ($FlowFixMe) => $FlowFixMe = (options) => {
+        // The MathQuill API is now "versioned" through its own "InterVer"
+        // system.
+        // See: https://github.com/mathquill/mathquill/pull/459
+        const MQ = MathQuill.getInterface(2);
+
+        // MathQuill.MathField takes a DOM node, MathQuill-ifies it if it's
+        // seeing that node for the first time, then returns the associated
+        // MathQuill object for that node. It is stable - will always return
+        // the same object when called on the same DOM node.
+        // eslint-disable-next-line react/no-string-refs
+        return MQ.MathField(ReactDOM.findDOMNode(this.refs.mathinput), options);
+    };
+
     focus: () => void = () => {
         this.mathField().focus();
         this.setState({focused: true});
@@ -277,6 +243,51 @@ class MathInput extends React.Component<$FlowFixMe, $FlowFixMe> {
         this.mathField().blur();
         this.setState({focused: false});
     };
+
+    render(): React.Node {
+        let className = classNames({
+            "perseus-math-input": true,
+
+            // mathquill usually adds these itself but react removes them when
+            // updating the component.
+            "mq-editable-field": true,
+            "mq-math-mode": true,
+        });
+
+        if (this.props.className) {
+            className = className + " " + this.props.className;
+        }
+
+        let buttons = null;
+        if (this._shouldShowButtons()) {
+            buttons = (
+                <TexButtons
+                    sets={this.props.buttonSets}
+                    className="math-input-buttons absolute"
+                    convertDotToTimes={this.props.convertDotToTimes}
+                    onInsert={this.insert}
+                />
+            );
+        }
+
+        return (
+            <div style={{display: "inline-block"}}>
+                <div style={{display: "inline-block"}}>
+                    <span
+                        className={className}
+                        // eslint-disable-next-line react/no-string-refs
+                        ref="mathinput"
+                        aria-label={this.props.labelText}
+                        onFocus={this.handleFocus}
+                        onBlur={this.handleBlur}
+                    />
+                </div>
+                <div style={{position: "relative"}} onBlur={this.handleBlur}>
+                    {buttons}
+                </div>
+            </div>
+        );
+    }
 }
 
 export default MathInput;

package/src/components/tex-buttons.jsx

@@ -252,24 +252,22 @@ const buttonSets: ButtonSets = {
     ],
 };
 
+export type ButtonSetsType = $ReadOnlyArray<$Keys<typeof buttonSets>>;
+
 type TexButtonProps = {|
-    sets: $ReadOnlyArray<$Keys<typeof buttonSets>>,
+    sets: ButtonSetsType,
     onInsert: (Inserter) => void,
     className?: string,
     convertDotToTimes?: boolean,
 |};
 
-const buttonSetsType = PropTypes.arrayOf(PropTypes.oneOf(_(buttonSets).keys()));
+const buttonSetsPropType = PropTypes.arrayOf(
+    PropTypes.oneOf(_(buttonSets).keys()),
+);
 
 class TexButtons extends React.Component<TexButtonProps> {
-    static propTypes = {
-        sets: buttonSetsType.isRequired,
-        onInsert: PropTypes.func.isRequired,
-        className: PropTypes.string,
-    };
-
     static buttonSets: typeof buttonSets = buttonSets;
-    static buttonSetsType: $FlowFixMe = buttonSetsType;
+    static buttonSetsType: $FlowFixMe = buttonSetsPropType;
 
     render(): React.Node {
         // Always show buttonSets in the same order. Note: Technically it's ok

package/src/components/tooltip.jsx

@@ -345,9 +345,6 @@ const Tooltip = createReactClass({
                             top: settings["top"],
                             left: settings.tooltipLeft,
                             border: "1px solid " + this.props.borderColor,
-                            WebkitBoxShadow:
-                                "0 1px 3px " + this.props.borderColor,
-                            MozBoxShadow: "0 1px 3px " + this.props.borderColor,
                             boxShadow: "0 1px 3px " + this.props.borderColor,
                             zIndex: zIndex - 1,
                         }}

package/src/components/zoomable.jsx

@@ -253,14 +253,8 @@ class Zoomable extends React.Component<Props, State> {
         const transitionStyle = visible
             ? {
                   transitionProperty: property,
-                  WebkitTransitionProperty: property,
-                  msTransitionProperty: property,
                   transitionDuration: "0.3s",
-                  WebkitTransitionDuration: "0.3s",
-                  msTransitionDuration: "0.3s",
                   transitionTimingFunction: "ease-out",
-                  WebkitTransitionTimingfunction: "ease-out",
-                  msTransitionTmingFunction: "ease-out",
               }
             : {};
 
@@ -276,11 +270,7 @@ class Zoomable extends React.Component<Props, State> {
             width: "100%",
             height: zoomed ? expandedHeight : compactHeight,
             transform: transform,
-            WebkitTransform: transform,
-            msTransform: transform,
             transformOrigin: "0 0",
-            WebkitTransformOrigin: "0 0",
-            msTransformOrigin: "0 0",
             opacity: visible ? 1 : 0,
             WebkitTapHighlightColor: "transparent",
             ...transitionStyle,

package/src/interactive2/movable-point.jsx

@@ -326,7 +326,6 @@ _.extend(MovablePoint.prototype, {
                     const svgElem = state.visibleShape.wrapper;
                     if (state.shadow) {
                         const filter = "none";
-                        svgElem.style.webkitFilter = filter;
                         svgElem.style.filter = filter;
                     }
 
@@ -352,7 +351,6 @@ _.extend(MovablePoint.prototype, {
                             const filter =
                                 "drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5))";
 
-                            content.style.webkitFilter = filter;
                             content.style.filter = filter;
                         }
                     }
@@ -402,7 +400,6 @@ _.extend(MovablePoint.prototype, {
                     if (state.shadow) {
                         const filter =
                             "drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5))";
-                        svgElem.style.webkitFilter = filter;
                         svgElem.style.filter = filter;
                     }
 
@@ -422,7 +419,6 @@ _.extend(MovablePoint.prototype, {
                                 "tooltip-content",
                             )[0];
 
-                        content.style.webkitFilter = "none";
                         content.style.filter = "none";
 
                         this._tooltip.firstChild.addEventListener(

package/src/interactive2/wrapped-ellipse.js

@@ -55,7 +55,6 @@ const WrappedEllipse = function (
     if (options.shadow) {
         const filter = "drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5))";
         const wrapper = this.wrapper;
-        wrapper.style.webkitFilter = filter;
         wrapper.style.filter = filter;
 
         this.moveTo = function (point) {

package/src/styles/articles.less

@@ -55,7 +55,12 @@
 
     @paragraphSpacing: 32px;
     .perseus-widget-container {
-        .legacy-typography;
+        // HACK(matthewc): to get around this fixed font-size
+        // since we want the definition widget to match
+        // surrounding text
+        &:not(.perseus-widget__definition) {
+            .legacy-typography;
+        }
 
         &.widget-float-left,
         &.widget-float-right {
@@ -699,8 +704,6 @@ img.zoom-img {
 }
 
 .zoom-transition {
-    -webkit-transition: transform @zoomAnimationDurationMs ease;
-    -ms-transition:     transform @zoomAnimationDurationMs ease;
     transition:         transform @zoomAnimationDurationMs ease;
 }
 
@@ -736,8 +739,6 @@ img.zoom-img {
     bottom: 0;
     background: white;
     opacity: 0;
-    -webkit-transition: opacity @zoomAnimationDurationMs;
-    -ms-transition:     opacity @zoomAnimationDurationMs;
     transition:         opacity @zoomAnimationDurationMs;
 }