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

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

@@ -1,139 +1,79 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Sidebar = void 0;
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
 var _react = require("react");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _immutable = require("immutable");
-
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
-
 var _uiIcons = require("@instructure/ui-icons");
-
 var _uiA11yContent = require("@instructure/ui-a11y-content");
-
 var _uiButtons = require("@instructure/ui-buttons");
-
 var _uiLink = require("@instructure/ui-link");
-
 var _uiText = require("@instructure/ui-text");
-
 var _uiView = require("@instructure/ui-view");
-
 var _emotion = require("@instructure/emotion");
-
 var _uiHeading = require("@instructure/ui-heading");
-
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
-
 var _quizCommon = require("@instructure/quiz-common");
-
-var _windowChecks = require("../../../../util/windowChecks.js");
-
-var _CustomPropTypes = _interopRequireDefault(require("../../../../util/CustomPropTypes.js"));
-
-var _noop = _interopRequireDefault(require("../../../../util/noop.js"));
-
-var _Pin = _interopRequireDefault(require("./Pin.js"));
-
-var _styles = _interopRequireDefault(require("./styles.js"));
-
-var _theme = _interopRequireDefault(require("./theme.js"));
-
-var _dec, _class, _class2, _temp;
-
-var _ref = (0, _emotion.jsx)(_uiIcons.IconQuizTitleLine, {
-  color: "primary"
-});
-
-var _ref2 = (0, _emotion.jsx)(_uiIcons.IconQuizInstructionsLine, {
-  color: "primary"
-});
-
-var _ref3 = (0, _emotion.jsx)(_uiIcons.IconQuizInstructionsLine, {
-  color: "primary"
-});
-
-var _ref4 = (0, _emotion.jsx)(_uiIcons.IconPinSolid, null);
-
-var Sidebar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(Sidebar, _Component);
-
-  var _super = (0, _createSuper2.default)(Sidebar);
-
+var _windowChecks = require("../../../../util/windowChecks");
+var _CustomPropTypes = _interopRequireDefault(require("../../../../util/CustomPropTypes"));
+var _noop = _interopRequireDefault(require("../../../../util/noop"));
+var _Pin = _interopRequireDefault(require("./Pin"));
+var _styles = _interopRequireDefault(require("./styles"));
+var _theme = _interopRequireDefault(require("./theme"));
+var _dec, _class, _Sidebar, _IconQuizTitleLine, _IconQuizInstructions, _IconQuizInstructions2, _IconPinSolid;
+/** @jsx jsx */
+/* eslint "jsx-a11y/click-events-have-key-events": "warn" */
+var Sidebar = exports.Sidebar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_Sidebar = /*#__PURE__*/function (_Component) {
   function Sidebar() {
     var _this;
-
     (0, _classCallCheck2.default)(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 = (0, _callSuper2.default)(this, Sidebar, [].concat(args));
     _this.scrollToTitle = function (e) {
       e.preventDefault(); // prevent default link navigation
-
       _this.props.scrollToItem(null)(_quizCommon.TITLE_SCROLL_KEY);
     };
-
     _this.scrollToInfo = function (e) {
       e.preventDefault(); // prevent default link navigation
-
       _this.props.scrollToItem(null)(_quizCommon.INSTRUCTIONS_SCROLL_KEY);
     };
-
     _this.scrollToResults = function (e) {
       e.preventDefault(); // prevent default link navigation
-
       _this.props.scrollToItem(null)(_quizCommon.RESULTS_SCROLL_KEY);
     };
-
     _this.toggleSidebar = function () {
       var msg = _this.props.sidebarOpen ? (0, _formatMessage.default)('Closed Sidebar') : (0, _formatMessage.default)('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;
   }
-
-  (0, _createClass2.default)(Sidebar, [{
+  (0, _inherits2.default)(Sidebar, _Component);
+  return (0, _createClass2.default)(Sidebar, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.props.makeStyles();
@@ -151,17 +91,17 @@ var Sidebar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
       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 (0, _emotion.jsx)("div", {
         css: this.props.styles.sidebar.actionableInfo
       }, (0, _emotion.jsx)(_uiLink.Link, {
@@ -169,7 +109,9 @@ var Sidebar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
         margin: "small",
         forceButtonRole: false,
         onClick: this.scrollToTitle,
-        renderIcon: _ref
+        renderIcon: _IconQuizTitleLine || (_IconQuizTitleLine = (0, _emotion.jsx)(_uiIcons.IconQuizTitleLine, {
+          color: "primary"
+        }))
       }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Navigate to title'))), (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, (0, _emotion.jsx)("span", {
         css: this.props.styles.sidebar.description,
         onClick: this.scrollToTitle,
@@ -182,7 +124,6 @@ var Sidebar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
       if (this.props.grading) {
         return;
       }
-
       return (0, _emotion.jsx)("div", {
         css: this.props.styles.sidebar.actionableInfo
       }, (0, _emotion.jsx)(_uiLink.Link, {
@@ -190,7 +131,9 @@ var Sidebar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
         margin: "small",
         forceButtonRole: false,
         onClick: this.scrollToInfo,
-        renderIcon: _ref2,
+        renderIcon: _IconQuizInstructions || (_IconQuizInstructions = (0, _emotion.jsx)(_uiIcons.IconQuizInstructionsLine, {
+          color: "primary"
+        })),
         "data-automation": "sidebar-instructions-button"
       }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Navigate to instructions'))), (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, (0, _emotion.jsx)("span", {
         css: this.props.styles.sidebar.description,
@@ -205,7 +148,6 @@ var Sidebar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
       if (!this.props.grading) {
         return;
       }
-
       return (0, _emotion.jsx)("div", {
         css: this.props.styles.sidebar.actionableInfo
       }, (0, _emotion.jsx)(_uiLink.Link, {
@@ -213,7 +155,9 @@ var Sidebar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
         margin: "small",
         forceButtonRole: false,
         onClick: this.scrollToResults,
-        renderIcon: _ref3,
+        renderIcon: _IconQuizInstructions2 || (_IconQuizInstructions2 = (0, _emotion.jsx)(_uiIcons.IconQuizInstructionsLine, {
+          color: "primary"
+        })),
         "data-automation": "sidebar-results-button"
       }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Navigate to results'))), (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, (0, _emotion.jsx)("span", {
         css: this.props.styles.sidebar.description,
@@ -226,8 +170,8 @@ var Sidebar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
     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 ? _uiIcons.IconMoveStartLine : _uiIcons.IconMoveEndLine;
       return (0, _emotion.jsx)("div", {
         css: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles.headerSpacing), styles.headerBottomBorder)
@@ -253,13 +197,11 @@ var Sidebar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
     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 = (0, _emotion.jsx)(_uiText.Text, {
         key: "pointsText",
         size: "small",
@@ -268,7 +210,6 @@ var Sidebar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
         totalPointsPossible: totalPointsPossible
       }));
       var responsiveText = pointsText;
-
       if (sidebarOpen) {
         responsiveText = (0, _emotion.jsx)(_uiText.Text, {
           size: "small"
@@ -278,7 +219,6 @@ var Sidebar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
           }
         }));
       }
-
       return (0, _emotion.jsx)(_uiView.View, {
         borderWidth: "0 0 small 0",
         padding: "small x-small",
@@ -293,16 +233,14 @@ var Sidebar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
     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 (0, _emotion.jsx)("div", {
         css: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles.pinnedSection), styles.headerBottomBorder)
       }, (0, _emotion.jsx)("div", {
@@ -319,7 +257,7 @@ var Sidebar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
         size: "x-small",
         "aria-label": (0, _formatMessage.default)('Pinned Questions'),
         role: "img"
-      }, _ref4))), (0, _emotion.jsx)("div", {
+      }, _IconPinSolid || (_IconPinSolid = (0, _emotion.jsx)(_uiIcons.IconPinSolid, null))))), (0, _emotion.jsx)("div", {
         css: styles.buttonWrapper
       }, pinnedItems.map(function (pin) {
         return (0, _emotion.jsx)(_Pin.default, {
@@ -347,7 +285,8 @@ var Sidebar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
         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.default,
@@ -357,9 +296,7 @@ var Sidebar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
       }, this.props.children)))));
     }
   }]);
-  Sidebar.displayName = "Sidebar";
-  return Sidebar;
-}(_react.Component), _class2.propTypes = {
+}(_react.Component), _Sidebar.propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.arrayOf(_propTypes.default.element), _propTypes.default.node]).isRequired,
   grading: _propTypes.default.bool,
   taking: _propTypes.default.bool,
@@ -377,7 +314,7 @@ var Sidebar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
   shouldCloseOnBlur: _propTypes.default.bool,
   makeStyles: _propTypes.default.func,
   styles: _propTypes.default.object
-}, _class2.defaultProps = {
+}, _Sidebar.defaultProps = {
   grading: false,
   taking: false,
   title: null,
@@ -385,7 +322,5 @@ var Sidebar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
   role: 'navigation',
   totalPointsPossible: null,
   shouldCloseOnBlur: (0, _windowChecks.onPhone)()
-}, _temp)) || _class);
-exports.Sidebar = Sidebar;
-var _default = Sidebar;
-exports.default = _default;
+}, _Sidebar)) || _class);
+var _default = exports.default = Sidebar;

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

@@ -1,19 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var generateStyle = function generateStyle(componentTheme, props) {
-  var _commonContainer;
-
   var mq = "@media screen and (".concat(componentTheme.phoneBreakPoint, ")");
   var mp = '@media print';
   return {
@@ -57,7 +51,6 @@ var generateStyle = function generateStyle(componentTheme, props) {
         textAlign: 'inherit'
       })
     }),
-
     /* Decrease z-index when RCE editor is in fullscreen mode */
     globalStyles: {
       sidebar: {
@@ -114,15 +107,13 @@ var generateStyle = function generateStyle(componentTheme, props) {
     }, !props.sidebarOpen && {
       display: 'none'
     }),
-    commonContainer: (_commonContainer = {
+    commonContainer: (0, _defineProperty2.default)((0, _defineProperty2.default)({
       height: '100%'
-    }, (0, _defineProperty2.default)(_commonContainer, mq, {
+    }, mq, {
       position: 'relative'
-    }), (0, _defineProperty2.default)(_commonContainer, mp, {
+    }), mp, {
       display: 'none'
-    }), _commonContainer)
+    })
   };
 };
-
-var _default = generateStyle;
-exports.default = _default;
+var _default = exports.default = generateStyle;

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

@@ -4,16 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _uiColorUtils = require("@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',
@@ -43,6 +41,4 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     focusOutlineColor: (0, _uiColorUtils.alpha)(colors.brand, 50)
   };
 };
-
-var _default = generateComponentTheme;
-exports.default = _default;
+var _default = exports.default = generateComponentTheme;

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

@@ -1,27 +1,18 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.SidebarItem = exports.mapDispatchToProps = exports.mapStateToProps = void 0;
-
+exports.mapStateToProps = exports.mapDispatchToProps = exports.default = exports.SidebarItem = void 0;
 var _redux = require("redux");
-
-var _quizSessions = require("../../../../selectors/quizSessions.js");
-
-var _calls = require("../../../../selectors/calls.js");
-
-var _reactRedux = require("../../../../react-redux.js");
-
-var _presenter = require("./presenter.js");
-
-var _scrolling = require("../../../../actions/scrolling.js");
-
+var _quizSessions = require("../../../../selectors/quizSessions");
+var _calls = require("../../../../selectors/calls");
+var _reactRedux = require("../../../../react-redux");
+var _presenter = require("./presenter");
+var _scrolling = require("../../../../actions/scrolling");
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
-
-var mapStateToProps = function mapStateToProps(state, props) {
+var mapStateToProps = exports.mapStateToProps = function mapStateToProps(state, props) {
   var displayPosition = props.quizEntry ? props.quizEntry.positionToDisplay(props.position) : (0, _formatMessage.default)('{position, number}', {
     position: props.position
   });
@@ -30,17 +21,10 @@ var mapStateToProps = function mapStateToProps(state, props) {
     preventScrollToItem: (0, _calls.fileUploading)(state) && (0, _quizSessions.isOneQuestionAtATime)(state)
   };
 };
-
-exports.mapStateToProps = mapStateToProps;
-
-var mapDispatchToProps = function mapDispatchToProps(dispatch, props) {
+var mapDispatchToProps = exports.mapDispatchToProps = function mapDispatchToProps(dispatch, props) {
   return {
     scrollToItem: props.scrollToItem || (0, _redux.bindActionCreators)(_scrolling.scrollToItem, dispatch)
   };
 };
-
-exports.mapDispatchToProps = mapDispatchToProps;
-var SidebarItem = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_presenter.SidebarItem);
-exports.SidebarItem = SidebarItem;
-var _default = SidebarItem;
-exports.default = _default;
+var SidebarItem = exports.SidebarItem = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_presenter.SidebarItem);
+var _default = exports.default = SidebarItem;

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

@@ -1,80 +1,53 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.SidebarItem = void 0;
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
 var _react = require("react");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
-
 var _uiA11yContent = require("@instructure/ui-a11y-content");
-
 var _uiLink = require("@instructure/ui-link");
-
 var _uiFlex = require("@instructure/ui-flex");
-
 var _emotion = require("@instructure/emotion");
-
-var _index = _interopRequireDefault(require("../PositionSummary/index.js"));
-
+var _PositionSummary = _interopRequireDefault(require("../PositionSummary"));
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
-
 var _quizRce = require("@instructure/quiz-rce");
-
-var _styles = _interopRequireDefault(require("./styles.js"));
-
-var _theme = _interopRequireDefault(require("./theme.js"));
-
-var _dec, _class, _class2, _temp;
-
-var SidebarItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(SidebarItem, _Component);
-
-  var _super = (0, _createSuper2.default)(SidebarItem);
-
+var _styles = _interopRequireDefault(require("./styles"));
+var _theme = _interopRequireDefault(require("./theme"));
+var _dec, _class, _SidebarItem;
+/** @jsx jsx */
+var SidebarItem = exports.SidebarItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_SidebarItem = /*#__PURE__*/function (_Component) {
   function SidebarItem() {
     var _this;
-
     (0, _classCallCheck2.default)(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 = (0, _callSuper2.default)(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;
   }
-
-  (0, _createClass2.default)(SidebarItem, [{
+  (0, _inherits2.default)(SidebarItem, _Component);
+  return (0, _createClass2.default)(SidebarItem, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.props.makeStyles();
@@ -83,39 +56,37 @@ var SidebarItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
       this.props.makeStyles();
-    } // ============
-    //   ACTIONS
-    // ============
-
+    }
   }, {
     key: "getPointsText",
+    value:
     // ============
     //   HELPERS
     // ============
-    value: function getPointsText(points) {
+
+    function getPointsText(points) {
       return (0, _formatMessage.default)("{\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 (0, _emotion.jsx)(_index.default, {
+        return (0, _emotion.jsx)(_PositionSummary.default, {
           firstPosition: position,
           lastPosition: position + quizEntry.sizeOfBank - 1
         });
       }
-
       return (0, _emotion.jsx)("span", {
         css: this.props.styles.displayNumber
       }, displayPosition);
@@ -124,9 +95,9 @@ var SidebarItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
     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 ? (0, _formatMessage.default)('Navigate to question at position {displayPosition}, unanswered', {
         displayPosition: displayPosition
       }) : (0, _formatMessage.default)('Navigate to question at position {displayPosition}', {
@@ -156,10 +127,10 @@ var SidebarItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
     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 (0, _emotion.jsx)("div", {
         className: "sidebarIsOpen",
         css: styles.sidebarItem
@@ -194,9 +165,7 @@ var SidebarItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
       return this.props.sidebarOpen ? this.renderOpen() : this.renderClosed();
     }
   }]);
-  SidebarItem.displayName = "SidebarItem";
-  return SidebarItem;
-}(_react.Component), _class2.propTypes = {
+}(_react.Component), _SidebarItem.propTypes = {
   // Passed in by Sidebar
   children: _propTypes.default.element,
   displayPosition: _propTypes.default.string.isRequired,
@@ -216,13 +185,11 @@ var SidebarItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
   scrollToItem: _propTypes.default.func.isRequired,
   styles: _propTypes.default.object,
   makeStyles: _propTypes.default.func
-}, _class2.defaultProps = {
+}, _SidebarItem.defaultProps = {
   children: null,
   inStimulus: false,
   itemBody: '',
   quizEntry: null,
   isAnswered: null
-}, _temp)) || _class);
-exports.SidebarItem = SidebarItem;
-var _default = SidebarItem;
-exports.default = _default;
+}, _SidebarItem)) || _class);
+var _default = exports.default = SidebarItem;