@instructure/quiz-core 20.17.2-rc.1 → 20.17.2-rc.11

package/es/common/components/layout/sidebar/Sidebar/index.js

@@ -1,13 +1,10 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-
-var _dec, _class, _class2, _temp;
-
+var _dec, _class, _Sidebar, _IconQuizTitleLine, _IconQuizInstructions, _IconQuizInstructions2, _IconPinSolid;
 /** @jsx jsx */
-
 /* eslint "jsx-a11y/click-events-have-key-events": "warn" */
 import { Component } from 'react';
 import PropTypes from 'prop-types';
@@ -23,88 +20,53 @@ import { withStyle, jsx, Global } from '@instructure/emotion';
 import { Heading } from '@instructure/ui-heading';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { INSTRUCTIONS_SCROLL_KEY, RESULTS_SCROLL_KEY, SIDEBAR_NAV_ID, TITLE_SCROLL_KEY } from '@instructure/quiz-common';
-import { onPhone } from "../../../../util/windowChecks.js";
-import CustomPropTypes from "../../../../util/CustomPropTypes.js";
-import noop from "../../../../util/noop.js";
-import Pin from "./Pin.js";
-import generateStyle from "./styles.js";
-import generateComponentTheme from "./theme.js";
-
-var _ref = jsx(IconQuizTitleLine, {
-  color: "primary"
-});
-
-var _ref2 = jsx(IconQuizInstructionsLine, {
-  color: "primary"
-});
-
-var _ref3 = jsx(IconQuizInstructionsLine, {
-  color: "primary"
-});
-
-var _ref4 = jsx(IconPinSolid, null);
-
-export var Sidebar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
-  _inherits(Sidebar, _Component);
-
-  var _super = _createSuper(Sidebar);
-
+import { onPhone } from '../../../../util/windowChecks';
+import CustomPropTypes from '../../../../util/CustomPropTypes';
+import noop from '../../../../util/noop';
+import Pin from './Pin';
+import generateStyle from './styles';
+import generateComponentTheme from './theme';
+export var Sidebar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Sidebar = /*#__PURE__*/function (_Component) {
   function Sidebar() {
     var _this;
-
     _classCallCheck(this, Sidebar);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
+    _this = _callSuper(this, Sidebar, [].concat(args));
     _this.scrollToTitle = function (e) {
       e.preventDefault(); // prevent default link navigation
-
       _this.props.scrollToItem(null)(TITLE_SCROLL_KEY);
     };
-
     _this.scrollToInfo = function (e) {
       e.preventDefault(); // prevent default link navigation
-
       _this.props.scrollToItem(null)(INSTRUCTIONS_SCROLL_KEY);
     };
-
     _this.scrollToResults = function (e) {
       e.preventDefault(); // prevent default link navigation
-
       _this.props.scrollToItem(null)(RESULTS_SCROLL_KEY);
     };
-
     _this.toggleSidebar = function () {
       var msg = _this.props.sidebarOpen ? t('Closed Sidebar') : t('Opened Sidebar');
-
       _this.props.screenreaderNotification(msg);
-
       _this.props.toggleSidebar();
     };
-
     _this.refWrapper = function (c) {
       _this.sidebarWrapper = c;
     };
-
     _this.handleBlur = function () {
       var isOpen = _this.props.sidebarOpen;
       setTimeout(function () {
         var focusNotInSidebar = _this.sidebarWrapper !== null && !_this.sidebarWrapper.contains(document.activeElement);
-
         if (_this.props.shouldCloseOnBlur && focusNotInSidebar && isOpen) {
           _this.toggleSidebar();
         }
       });
     };
-
     return _this;
   }
-
-  _createClass(Sidebar, [{
+  _inherits(Sidebar, _Component);
+  return _createClass(Sidebar, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.props.makeStyles();
@@ -122,17 +84,17 @@ export var Sidebar = (_dec = withStyle(generateStyle, generateComponentTheme), _
       var resizeEvent = window.document.createEvent('UIEvents');
       resizeEvent.initUIEvent('resize', true, false, window, 0);
       window.dispatchEvent(resizeEvent);
-    } // ============
+    }
+
+    // ============
     //  RENDERING
     // ============
-
   }, {
     key: "renderTitle",
     value: function renderTitle() {
       if (this.props.grading) {
         return;
       }
-
       return jsx("div", {
         css: this.props.styles.sidebar.actionableInfo
       }, jsx(Link, {
@@ -140,7 +102,9 @@ export var Sidebar = (_dec = withStyle(generateStyle, generateComponentTheme), _
         margin: "small",
         forceButtonRole: false,
         onClick: this.scrollToTitle,
-        renderIcon: _ref
+        renderIcon: _IconQuizTitleLine || (_IconQuizTitleLine = jsx(IconQuizTitleLine, {
+          color: "primary"
+        }))
       }, jsx(ScreenReaderContent, null, t('Navigate to title'))), jsx(PresentationContent, null, jsx("span", {
         css: this.props.styles.sidebar.description,
         onClick: this.scrollToTitle,
@@ -153,7 +117,6 @@ export var Sidebar = (_dec = withStyle(generateStyle, generateComponentTheme), _
       if (this.props.grading) {
         return;
       }
-
       return jsx("div", {
         css: this.props.styles.sidebar.actionableInfo
       }, jsx(Link, {
@@ -161,7 +124,9 @@ export var Sidebar = (_dec = withStyle(generateStyle, generateComponentTheme), _
         margin: "small",
         forceButtonRole: false,
         onClick: this.scrollToInfo,
-        renderIcon: _ref2,
+        renderIcon: _IconQuizInstructions || (_IconQuizInstructions = jsx(IconQuizInstructionsLine, {
+          color: "primary"
+        })),
         "data-automation": "sidebar-instructions-button"
       }, jsx(ScreenReaderContent, null, t('Navigate to instructions'))), jsx(PresentationContent, null, jsx("span", {
         css: this.props.styles.sidebar.description,
@@ -176,7 +141,6 @@ export var Sidebar = (_dec = withStyle(generateStyle, generateComponentTheme), _
       if (!this.props.grading) {
         return;
       }
-
       return jsx("div", {
         css: this.props.styles.sidebar.actionableInfo
       }, jsx(Link, {
@@ -184,7 +148,9 @@ export var Sidebar = (_dec = withStyle(generateStyle, generateComponentTheme), _
         margin: "small",
         forceButtonRole: false,
         onClick: this.scrollToResults,
-        renderIcon: _ref3,
+        renderIcon: _IconQuizInstructions2 || (_IconQuizInstructions2 = jsx(IconQuizInstructionsLine, {
+          color: "primary"
+        })),
         "data-automation": "sidebar-results-button"
       }, jsx(ScreenReaderContent, null, t('Navigate to results'))), jsx(PresentationContent, null, jsx("span", {
         css: this.props.styles.sidebar.description,
@@ -197,8 +163,8 @@ export var Sidebar = (_dec = withStyle(generateStyle, generateComponentTheme), _
     key: "renderSidebarHeader",
     value: function renderSidebarHeader() {
       var _this$props = this.props,
-          sidebarOpen = _this$props.sidebarOpen,
-          styles = _this$props.styles;
+        sidebarOpen = _this$props.sidebarOpen,
+        styles = _this$props.styles;
       var SidebarIcon = sidebarOpen ? IconMoveStartLine : IconMoveEndLine;
       return jsx("div", {
         css: _objectSpread(_objectSpread({}, styles.headerSpacing), styles.headerBottomBorder)
@@ -224,13 +190,11 @@ export var Sidebar = (_dec = withStyle(generateStyle, generateComponentTheme), _
     key: "renderTotalPointsPossible",
     value: function renderTotalPointsPossible() {
       var _this$props2 = this.props,
-          sidebarOpen = _this$props2.sidebarOpen,
-          totalPointsPossible = _this$props2.totalPointsPossible;
-
+        sidebarOpen = _this$props2.sidebarOpen,
+        totalPointsPossible = _this$props2.totalPointsPossible;
       if (typeof totalPointsPossible !== 'number') {
         return null;
       }
-
       var pointsText = jsx(Text, {
         key: "pointsText",
         size: "small",
@@ -239,7 +203,6 @@ export var Sidebar = (_dec = withStyle(generateStyle, generateComponentTheme), _
         totalPointsPossible: totalPointsPossible
       }));
       var responsiveText = pointsText;
-
       if (sidebarOpen) {
         responsiveText = jsx(Text, {
           size: "small"
@@ -249,7 +212,6 @@ export var Sidebar = (_dec = withStyle(generateStyle, generateComponentTheme), _
           }
         }));
       }
-
       return jsx(View, {
         borderWidth: "0 0 small 0",
         padding: "small x-small",
@@ -264,16 +226,14 @@ export var Sidebar = (_dec = withStyle(generateStyle, generateComponentTheme), _
     key: "renderPinned",
     value: function renderPinned() {
       var _this$props3 = this.props,
-          sidebarOpen = _this$props3.sidebarOpen,
-          taking = _this$props3.taking,
-          pinnedItems = _this$props3.pinnedItems,
-          scrollToItem = _this$props3.scrollToItem,
-          styles = _this$props3.styles;
-
+        sidebarOpen = _this$props3.sidebarOpen,
+        taking = _this$props3.taking,
+        pinnedItems = _this$props3.pinnedItems,
+        scrollToItem = _this$props3.scrollToItem,
+        styles = _this$props3.styles;
       if (!taking) {
         return;
       }
-
       return jsx("div", {
         css: _objectSpread(_objectSpread({}, styles.pinnedSection), styles.headerBottomBorder)
       }, jsx("div", {
@@ -290,7 +250,7 @@ export var Sidebar = (_dec = withStyle(generateStyle, generateComponentTheme), _
         size: "x-small",
         "aria-label": t('Pinned Questions'),
         role: "img"
-      }, _ref4))), jsx("div", {
+      }, _IconPinSolid || (_IconPinSolid = jsx(IconPinSolid, null))))), jsx("div", {
         css: styles.buttonWrapper
       }, pinnedItems.map(function (pin) {
         return jsx(Pin, {
@@ -318,7 +278,8 @@ export var Sidebar = (_dec = withStyle(generateStyle, generateComponentTheme), _
         css: this.props.styles.sidebarWrapper,
         ref: this.refWrapper,
         role: this.props.role,
-        onBlur: this.handleBlur // for some reason, without a click handler here, a random item will
+        onBlur: this.handleBlur
+        // for some reason, without a click handler here, a random item will
         // take the click and scroll to itself when the nav is clicked by SR
         ,
         onClick: noop,
@@ -328,10 +289,7 @@ export var Sidebar = (_dec = withStyle(generateStyle, generateComponentTheme), _
       }, this.props.children)))));
     }
   }]);
-
-  Sidebar.displayName = "Sidebar";
-  return Sidebar;
-}(Component), _class2.propTypes = {
+}(Component), _Sidebar.propTypes = {
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element), PropTypes.node]).isRequired,
   grading: PropTypes.bool,
   taking: PropTypes.bool,
@@ -349,7 +307,7 @@ export var Sidebar = (_dec = withStyle(generateStyle, generateComponentTheme), _
   shouldCloseOnBlur: PropTypes.bool,
   makeStyles: PropTypes.func,
   styles: PropTypes.object
-}, _class2.defaultProps = {
+}, _Sidebar.defaultProps = {
   grading: false,
   taking: false,
   title: null,
@@ -357,5 +315,5 @@ export var Sidebar = (_dec = withStyle(generateStyle, generateComponentTheme), _
   role: 'navigation',
   totalPointsPossible: null,
   shouldCloseOnBlur: onPhone()
-}, _temp)) || _class);
+}, _Sidebar)) || _class);
 export default Sidebar;

package/es/common/components/layout/sidebar/Sidebar/styles.js

@@ -1,9 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-
 var generateStyle = function generateStyle(componentTheme, props) {
-  var _commonContainer;
-
   var mq = "@media screen and (".concat(componentTheme.phoneBreakPoint, ")");
   var mp = '@media print';
   return {
@@ -47,7 +44,6 @@ var generateStyle = function generateStyle(componentTheme, props) {
         textAlign: 'inherit'
       })
     }),
-
     /* Decrease z-index when RCE editor is in fullscreen mode */
     globalStyles: {
       sidebar: {
@@ -104,14 +100,13 @@ var generateStyle = function generateStyle(componentTheme, props) {
     }, !props.sidebarOpen && {
       display: 'none'
     }),
-    commonContainer: (_commonContainer = {
+    commonContainer: _defineProperty(_defineProperty({
       height: '100%'
-    }, _defineProperty(_commonContainer, mq, {
+    }, mq, {
       position: 'relative'
-    }), _defineProperty(_commonContainer, mp, {
+    }), mp, {
       display: 'none'
-    }), _commonContainer)
+    })
   };
 };
-
 export default generateStyle;

package/es/common/components/layout/sidebar/Sidebar/theme.js

@@ -1,12 +1,11 @@
 import { alpha } from '@instructure/ui-color-utils';
-
 var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
-      spacing = _ref.spacing,
-      typography = _ref.typography,
-      borders = _ref.borders,
-      breakpoints = _ref.breakpoints,
-      transitions = _ref.transitions;
+    spacing = _ref.spacing,
+    typography = _ref.typography,
+    borders = _ref.borders,
+    breakpoints = _ref.breakpoints,
+    transitions = _ref.transitions;
   return {
     sidebarWidthClosed: spacing.xxLarge,
     sidebarWidthOpen: '22rem',
@@ -36,5 +35,4 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     focusOutlineColor: alpha(colors.brand, 50)
   };
 };
-
 export default generateComponentTheme;

package/es/common/components/layout/sidebar/SidebarItem/index.js

@@ -1,9 +1,9 @@
 import { bindActionCreators } from 'redux';
-import { isOneQuestionAtATime } from "../../../../selectors/quizSessions.js";
-import { fileUploading } from "../../../../selectors/calls.js";
-import { connect } from "../../../../react-redux.js";
-import { SidebarItem as SidebarItemPresenter } from "./presenter.js";
-import { scrollToItem as scrollToItemAction } from "../../../../actions/scrolling.js";
+import { isOneQuestionAtATime } from '../../../../selectors/quizSessions';
+import { fileUploading } from '../../../../selectors/calls';
+import { connect } from '../../../../react-redux';
+import { SidebarItem as SidebarItemPresenter } from './presenter';
+import { scrollToItem as scrollToItemAction } from '../../../../actions/scrolling';
 import t from '@instructure/quiz-i18n/es/format-message';
 export var mapStateToProps = function mapStateToProps(state, props) {
   var displayPosition = props.quizEntry ? props.quizEntry.positionToDisplay(props.position) : t('{position, number}', {

package/es/common/components/layout/sidebar/SidebarItem/presenter.js

@@ -1,10 +1,8 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-
-var _dec, _class, _class2, _temp;
-
+var _dec, _class, _SidebarItem;
 /** @jsx jsx */
 import { Component } from 'react';
 import PropTypes from 'prop-types';
@@ -13,45 +11,36 @@ import { AccessibleContent } from '@instructure/ui-a11y-content';
 import { Link } from '@instructure/ui-link';
 import { Flex } from '@instructure/ui-flex';
 import { withStyle, jsx } from '@instructure/emotion';
-import PositionSummary from "../PositionSummary/index.js";
+import PositionSummary from '../PositionSummary';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { RichContentRenderer } from '@instructure/quiz-rce';
-import generateStyle from "./styles.js";
-import generateComponentTheme from "./theme.js";
-export var SidebarItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
-  _inherits(SidebarItem, _Component);
-
-  var _super = _createSuper(SidebarItem);
-
+import generateStyle from './styles';
+import generateComponentTheme from './theme';
+export var SidebarItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_SidebarItem = /*#__PURE__*/function (_Component) {
   function SidebarItem() {
     var _this;
-
     _classCallCheck(this, SidebarItem);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
+    _this = _callSuper(this, SidebarItem, [].concat(args));
+    // ============
+    //   ACTIONS
+    // ============
     _this.scrollToItem = function (e) {
       e.preventDefault(); // prevent default link navigation
-
       if (_this.props.preventScrollToItem) {
         return;
-      } // this can be a real scroll or a oqaat change
+      }
+      // this can be a real scroll or a oqaat change
       // depending on whether is is oqaat or not
-
-
       _this.props.scrollToItem(_this.props.itemId);
-
       e.stopPropagation();
     };
-
     return _this;
   }
-
-  _createClass(SidebarItem, [{
+  _inherits(SidebarItem, _Component);
+  return _createClass(SidebarItem, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.props.makeStyles();
@@ -60,39 +49,37 @@ export var SidebarItem = (_dec = withStyle(generateStyle, generateComponentTheme
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
       this.props.makeStyles();
-    } // ============
-    //   ACTIONS
-    // ============
-
+    }
   }, {
     key: "getPointsText",
+    value:
     // ============
     //   HELPERS
     // ============
-    value: function getPointsText(points) {
+
+    function getPointsText(points) {
       return t("{\n      points, plural,\n        one {# point}\n      other {# points}\n    }", {
         points: points
       });
-    } // =============
+    }
+
+    // =============
     //   RENDERING
     // =============
-
   }, {
     key: "renderPosition",
     value: function renderPosition() {
       var _this$props = this.props,
-          displayPosition = _this$props.displayPosition,
-          position = _this$props.position,
-          quizEntry = _this$props.quizEntry,
-          sidebarOpen = _this$props.sidebarOpen;
-
+        displayPosition = _this$props.displayPosition,
+        position = _this$props.position,
+        quizEntry = _this$props.quizEntry,
+        sidebarOpen = _this$props.sidebarOpen;
       if (!sidebarOpen && quizEntry && quizEntry.sizeOfBank > 1) {
         return jsx(PositionSummary, {
           firstPosition: position,
           lastPosition: position + quizEntry.sizeOfBank - 1
         });
       }
-
       return jsx("span", {
         css: this.props.styles.displayNumber
       }, displayPosition);
@@ -101,9 +88,9 @@ export var SidebarItem = (_dec = withStyle(generateStyle, generateComponentTheme
     key: "renderButton",
     value: function renderButton() {
       var _this$props2 = this.props,
-          displayPosition = _this$props2.displayPosition,
-          itemId = _this$props2.itemId,
-          isAnswered = _this$props2.isAnswered;
+        displayPosition = _this$props2.displayPosition,
+        itemId = _this$props2.itemId,
+        isAnswered = _this$props2.isAnswered;
       var screenReaderContent = !isAnswered && isAnswered !== null ? t('Navigate to question at position {displayPosition}, unanswered', {
         displayPosition: displayPosition
       }) : t('Navigate to question at position {displayPosition}', {
@@ -133,10 +120,10 @@ export var SidebarItem = (_dec = withStyle(generateStyle, generateComponentTheme
     key: "renderOpen",
     value: function renderOpen() {
       var _this$props3 = this.props,
-          children = _this$props3.children,
-          itemName = _this$props3.itemName,
-          pointsPossible = _this$props3.pointsPossible,
-          styles = _this$props3.styles;
+        children = _this$props3.children,
+        itemName = _this$props3.itemName,
+        pointsPossible = _this$props3.pointsPossible,
+        styles = _this$props3.styles;
       return jsx("div", {
         className: "sidebarIsOpen",
         css: styles.sidebarItem
@@ -171,10 +158,7 @@ export var SidebarItem = (_dec = withStyle(generateStyle, generateComponentTheme
       return this.props.sidebarOpen ? this.renderOpen() : this.renderClosed();
     }
   }]);
-
-  SidebarItem.displayName = "SidebarItem";
-  return SidebarItem;
-}(Component), _class2.propTypes = {
+}(Component), _SidebarItem.propTypes = {
   // Passed in by Sidebar
   children: PropTypes.element,
   displayPosition: PropTypes.string.isRequired,
@@ -194,11 +178,11 @@ export var SidebarItem = (_dec = withStyle(generateStyle, generateComponentTheme
   scrollToItem: PropTypes.func.isRequired,
   styles: PropTypes.object,
   makeStyles: PropTypes.func
-}, _class2.defaultProps = {
+}, _SidebarItem.defaultProps = {
   children: null,
   inStimulus: false,
   itemBody: '',
   quizEntry: null,
   isAnswered: null
-}, _temp)) || _class);
+}, _SidebarItem)) || _class);
 export default SidebarItem;

package/es/common/components/layout/sidebar/SidebarItem/styles.js

@@ -1,5 +1,4 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-
 var generateStyle = function generateStyle(componentTheme, props) {
   return {
     sidebarItem: _objectSpread(_objectSpread(_objectSpread({
@@ -55,5 +54,4 @@ var generateStyle = function generateStyle(componentTheme, props) {
     }
   };
 };
-
 export default generateStyle;

package/es/common/components/layout/sidebar/SidebarItem/theme.js

@@ -1,8 +1,8 @@
 var generateComponentTheme = function generateComponentTheme(_ref) {
   var borders = _ref.borders,
-      colors = _ref.colors,
-      typography = _ref.typography,
-      spacing = _ref.spacing;
+    colors = _ref.colors,
+    typography = _ref.typography,
+    spacing = _ref.spacing;
   return {
     borderColor: colors.white,
     bottomBorderColor: colors.tiara,
@@ -24,5 +24,4 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     sidebarItemLogoFontSize: typography.fontSizeMedium
   };
 };
-
 export default generateComponentTheme;

package/es/common/components/layout/sidebar/Stimulus/Collection/index.js

@@ -1,6 +1,6 @@
-import { connect } from "../../../../../react-redux.js";
-import { setSidebarStimulusIsShowing } from "../../../../../actions/sidebar.js";
-import Collection from "./presenter.js";
+import { connect } from '../../../../../react-redux';
+import { setSidebarStimulusIsShowing } from '../../../../../actions/sidebar';
+import Collection from './presenter';
 export default connect(null, {
   setSidebarStimulusIsShowing: setSidebarStimulusIsShowing
 })(Collection);