@khanacademy/perseus 20.2.0 → 20.3.0

package/dist/es/index.css

@@ -2363,7 +2363,7 @@ img.zoom-img {
 }
 .framework-perseus .perseus-renderer > .paragraph > ul:not(.perseus-widget-radio),
 .framework-perseus .perseus-renderer > .paragraph > ol {
-  margin: -11px 0px 22px 0px;
+  margin: 0px 0px 22px 0px;
 }
 .framework-perseus .paragraph ul:not(.perseus-widget-radio, .indicatorContainer) {
   padding-left: 35px;

package/dist/es/index.js

@@ -2,7 +2,7 @@ import * as KAS from '@khanacademy/kas';
 import { keyTranslator, CursorContext, createMathField, getCursorContext, DesktopKeypad, convertDotToTimesByLocale, mathQuillInstance, KeypadInput, KeypadType, KeyArray, keypadElementPropType } from '@khanacademy/math-input';
 import * as PerseusLinter from '@khanacademy/perseus-linter';
 import { linterContextDefault, Rule, linterContextProps } from '@khanacademy/perseus-linter';
-import { View, RenderStateRoot, useUniqueIdWithMock, Text as Text$1 } from '@khanacademy/wonder-blocks-core';
+import { View, RenderStateRoot, UniqueIDProvider, useUniqueIdWithMock, Text as Text$1 } from '@khanacademy/wonder-blocks-core';
 import * as i18n from '@khanacademy/wonder-blocks-i18n';
 import Tooltip$1 from '@khanacademy/wonder-blocks-tooltip';
 import classNames from 'classnames';
@@ -28,6 +28,8 @@ import Button from '@khanacademy/wonder-blocks-button';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
 import Banner from '@khanacademy/wonder-blocks-banner';
 import { OptionItem, SingleSelect, MultiSelect } from '@khanacademy/wonder-blocks-dropdown';
+import caretDown from '@phosphor-icons/core/assets/regular/caret-down.svg';
+import caretUp from '@phosphor-icons/core/assets/regular/caret-up.svg';
 import debounce$2 from 'lodash.debounce';
 import { Point as Point$2, useMovable, useTransformContext, vec, Coordinates, Mafs } from 'mafs';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
@@ -24885,57 +24887,42 @@ class Explanation extends React.Component {
     };
   }
   render() {
-    const {
-      isArticle,
-      isMobile
-    } = this.props.apiOptions;
     const promptText = this.state.expanded ? this.props.hidePrompt : this.props.showPrompt;
-    let promptContainer;
-
-    // TODO(diedra): This isn't a valid href;
-    // change this to a button that looks like a link.
-    const href = "javascript:void(0)";
-    const onClick = this._onClick;
-    if (isMobile) {
-      promptContainer = /*#__PURE__*/React.createElement("div", {
-        className: css(styles$p.linkContainer)
-      }, /*#__PURE__*/React.createElement("a", {
-        className: css(styles$p.mobileExplanationLink),
-        href: href,
-        onClick: onClick,
-        role: "button",
-        "aria-expanded": this.state.expanded
-      }, promptText), this.state.expanded && /*#__PURE__*/React.createElement("svg", {
-        className: css(styles$p.disclosureArrow)
-      }, /*#__PURE__*/React.createElement("polygon", {
-        style: {
-          fill: backgroundColor
-        },
-        points: `0,${arrowHeight} ` + `${arrowWidth},${arrowHeight} ` + `${arrowWidth / 2},0`
-      })));
-    } else {
-      const viewStyling = isArticle ? [styles$p.explanationLink, styles$p.articleLink] : [styles$p.explanationLink, styles$p.exerciseLink];
-      promptContainer = /*#__PURE__*/React.createElement(Clickable, {
-        onClick: onClick,
-        "aria-expanded": this.state.expanded
-      }, () => /*#__PURE__*/React.createElement(View, {
-        style: viewStyling
-      }, `[${promptText}]`));
-    }
-    const expandedStyle = isMobile ? styles$p.contentExpandedMobile : styles$p.contentExpanded;
-    return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$p.container)
-    }, promptContainer, this.state.expanded && /*#__PURE__*/React.createElement("div", {
-      className: css(styles$p.content, isMobile && styles$p.contentMobile, this.state.expanded && expandedStyle)
-      // eslint-disable-next-line react/no-string-refs
-      ,
-      ref: "content"
+    const caretIcon = this.state.expanded ? caretUp : caretDown;
+    const allowTransition = window.matchMedia("(prefers-reduced-motion: no-preference)").matches;
+
+    // Special styling is needed to fit the button in a block of text without throwing off the line spacing.
+    // While the button is not normally included in a block of text, it needs to be able to accommodate such a case.
+    const buttonStyleOverrides = {
+      height: "22px",
+      marginLeft: "-2px",
+      padding: "0 2px"
+    };
+    const contentStyling = [styles$p.content, this.state.expanded ? styles$p.contentExpanded : styles$p.contentCollapsed, allowTransition && (this.state.expanded ? styles$p.transitionExpanded : styles$p.transitionCollapsed)];
+    return /*#__PURE__*/React.createElement(UniqueIDProvider, {
+      mockOnFirstRender: false,
+      scope: "explanation-widget"
+    }, ids => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      "aria-expanded": this.state.expanded,
+      "aria-controls": ids.get("content"),
+      endIcon: caretIcon,
+      kind: "tertiary",
+      onClick: this._onClick,
+      size: "large",
+      style: buttonStyleOverrides
+    }, promptText), /*#__PURE__*/React.createElement(View, {
+      id: ids.get("content"),
+      style: contentStyling,
+      "aria-hidden": !this.state.expanded,
+      testId: "content-container"
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles$p.contentWrapper
     }, /*#__PURE__*/React.createElement(Renderer, {
       apiOptions: this.props.apiOptions,
       content: this.props.explanation,
       widgets: this.props.widgets,
       linterContext: this.props.linterContext
-    })));
+    })))));
   }
 }
 Explanation.defaultProps = {
@@ -24947,94 +24934,44 @@ Explanation.defaultProps = {
 };
 const leftBorderSpacing = 23;
 const verticalContentPadding = 10;
-const arrowWidth = 30;
 const arrowHeight = 14;
-const backgroundColor = gray95;
 const styles$p = StyleSheet.create({
-  container: {
-    display: "inline",
+  content: {
+    borderLeft: "0px solid #ccc",
+    display: "inline-grid",
     position: "relative"
   },
-  linkContainer: {
-    display: "inline-block"
-  },
-  explanationLink: {
-    fontStyle: "italic",
-    color: "#007d96"
-  },
-  articleLink: {
-    // Copied from .body-text in articles.less
-    fontSize: 20,
-    lineHeight: "30px"
-  },
-  exerciseLink: {
-    // Copied from .legacy-typography in util.less
-    fontSize: 14,
-    lineHeight: "19.6px"
-  },
-  mobileExplanationLink: {
-    color: kaGreen$1,
-    borderBottom: `dashed 1px ${kaGreen$1}`,
-    textDecoration: "none",
-    // TODO(benkomalo): these should be pulled in from common typography
-    // shared files so we have a single place where the type hierarchy is
-    // defined; one off font sizes for individual components should be
-    // avoided.
-    [mediaQueries.xl]: {
-      fontSize: 22,
-      lineHeight: 1.4
-    },
-    [mediaQueries.lgOrSmaller]: {
-      fontSize: 20,
-      lineHeight: 1.5
-    },
-    [mediaQueries.smOrSmaller]: {
-      fontSize: 18,
-      lineHeight: 1.2
-    }
-  },
-  content: {
-    position: "relative",
-    transition: "margin-top 0.1s"
+  contentCollapsed: {
+    gridTemplateColumns: "0fr",
+    gridTemplateRows: "0fr",
+    marginBottom: 0,
+    marginTop: 0,
+    minWidth: "0",
+    paddingBottom: 0,
+    visibility: "hidden"
   },
   contentExpanded: {
-    borderLeft: "5px solid #ccc",
+    borderLeftWidth: "5px",
+    gridTemplateColumns: "1fr",
+    gridTemplateRows: "1fr",
     marginLeft: -leftBorderSpacing,
+    minWidth: "100%",
     paddingLeft: leftBorderSpacing,
     paddingBottom: verticalContentPadding,
+    visibility: "visible",
     // Note: we still use arrow height as the vertical margin, even on
     // desktop when there is no arrow, but it's good enough.
     marginBottom: arrowHeight,
     marginTop: arrowHeight
   },
-  contentExpandedMobile: {
-    boxSizing: "content-box",
-    paddingTop: 32,
-    paddingBottom: 32,
-    marginTop: arrowHeight
+  contentWrapper: {
+    overflow: "hidden"
   },
-  contentMobile: {
-    background: backgroundColor,
-    // TODO(benkomalo): this is to "full bleed" the background.
-    // The actual content padding differs depending on the host
-    // container, so this needs to be fixed eventually.
-    marginLeft: negativePhoneMargin,
-    marginRight: negativePhoneMargin,
-    paddingLeft: phoneMargin,
-    paddingRight: phoneMargin
-  },
-  disclosureArrow: {
-    // HACK - positioning at "bottom: 0", doesn't actually position it to
-    // the real bottom, because the container is `inline-block`, and it
-    // seems to position it to the baseline? We put in a generous
-    // fudge factor to position it down to be flush with the content box
-    // below it.
-    bottom: -(arrowHeight + 5),
-    height: arrowHeight,
-    left: "50%",
-    marginLeft: -(arrowWidth / 2),
-    position: "absolute",
-    width: arrowWidth
+  transitionCollapsed: {
+    transition: "all 0.25s step-end, grid-template-rows 0.25s, margin-top 0.25s, margin-bottom 0.25s, padding-bottom 0.25s"
+  },
+  transitionExpanded: {
+    transition: "grid-template-rows 0.5s, margin-top 0.5s, margin-bottom 0.5s, padding-bottom 0.5s"
   }
 });
 var Explanation$1 = {
@@ -41297,7 +41234,7 @@ const init = function init(options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "20.2.0";
+const libVersion = "20.3.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {