@instructure/quiz-core 21.1.1 → 21.2.0

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

@@ -4,53 +4,53 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.PositionSummary = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+exports["default"] = exports.PositionSummary = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _emotion = require("@instructure/emotion");
-var _styles = _interopRequireDefault(require("./styles.js"));
-var _theme = _interopRequireDefault(require("./theme.js"));
+var _styles = _interopRequireDefault(require("./styles"));
+var _theme = _interopRequireDefault(require("./theme"));
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 var _quizCommon = require("@instructure/quiz-common");
 var _dec, _class, _PositionSummary;
 /** @jsx jsx */
-var PositionSummary = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _theme.default), _dec(_class = (_PositionSummary = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(PositionSummary, _Component);
-  var _super = (0, _createSuper2.default)(PositionSummary);
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var PositionSummary = exports.PositionSummary = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_PositionSummary = /*#__PURE__*/function (_Component) {
   function PositionSummary() {
-    (0, _classCallCheck2.default)(this, PositionSummary);
-    return _super.apply(this, arguments);
+    (0, _classCallCheck2["default"])(this, PositionSummary);
+    return _callSuper(this, PositionSummary, arguments);
   }
-  (0, _createClass2.default)(PositionSummary, [{
+  (0, _inherits2["default"])(PositionSummary, _Component);
+  return (0, _createClass2["default"])(PositionSummary, [{
     key: "render",
     value: function render() {
       return (0, _emotion.jsx)("div", {
         css: this.props.styles.column
       }, (0, _emotion.jsx)("div", {
-        css: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.props.styles.numberSummary), this.props.styles.firstNumberSummary)
-      }, (0, _formatMessage.default)('{first, number}', {
+        css: _objectSpread(_objectSpread({}, this.props.styles.numberSummary), this.props.styles.firstNumberSummary)
+      }, (0, _formatMessage["default"])('{first, number}', {
         first: this.props.firstPosition
       })), (0, _emotion.jsx)("div", {
         css: this.props.styles.verticalDots
       }), (0, _emotion.jsx)("div", {
-        css: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.props.styles.numberSummary), this.props.styles.secondNumberSummary)
-      }, (0, _formatMessage.default)('{last, number}', {
+        css: _objectSpread(_objectSpread({}, this.props.styles.numberSummary), this.props.styles.secondNumberSummary)
+      }, (0, _formatMessage["default"])('{last, number}', {
         last: this.props.lastPosition
       })));
     }
   }]);
-  PositionSummary.displayName = "PositionSummary";
-  return PositionSummary;
-}(_react.Component), _PositionSummary.displayName = 'PositionSummary', _PositionSummary.componentId = "Quizzes".concat(_PositionSummary.displayName), _PositionSummary.propTypes = {
-  firstPosition: _propTypes.default.number.isRequired,
-  lastPosition: _propTypes.default.number.isRequired,
-  styles: _propTypes.default.object
-}, _PositionSummary)) || _class);
-exports.PositionSummary = PositionSummary;
-var _default = PositionSummary;
-exports.default = _default;
+}(_react.Component), (0, _defineProperty2["default"])(_PositionSummary, "displayName", 'PositionSummary'), (0, _defineProperty2["default"])(_PositionSummary, "componentId", "Quizzes".concat(_PositionSummary.displayName)), (0, _defineProperty2["default"])(_PositionSummary, "propTypes", {
+  firstPosition: _propTypes["default"].number.isRequired,
+  lastPosition: _propTypes["default"].number.isRequired,
+  styles: _propTypes["default"].object
+}), _PositionSummary)) || _class);
+var _default = exports["default"] = PositionSummary;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var generateStyle = function generateStyle(componentTheme) {
   return {
     column: {
@@ -30,5 +30,4 @@ var generateStyle = function generateStyle(componentTheme) {
     }
   };
 };
-var _default = generateStyle;
-exports.default = _default;
+var _default = exports["default"] = generateStyle;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
     spacing = _ref.spacing,
@@ -19,5 +19,4 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     verticalDotsBorderColor: colors.licorice
   };
 };
-var _default = generateComponentTheme;
-exports.default = _default;
+var _default = exports["default"] = generateComponentTheme;

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

@@ -1,56 +1,56 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Pin = void 0;
+exports["default"] = exports.Pin = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 var _uiLink = require("@instructure/ui-link");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 // Component exists to prevent the recreation of the scroll function with each render,
 // which would cause a new rerender on each data change
-var Pin = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(Pin, _Component);
-  var _super = (0, _createSuper2.default)(Pin);
+var Pin = exports.Pin = /*#__PURE__*/function (_Component) {
   function Pin() {
     var _this;
-    (0, _classCallCheck2.default)(this, Pin);
+    (0, _classCallCheck2["default"])(this, Pin);
     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.scroll = function () {
+    _this = _callSuper(this, Pin, [].concat(args));
+    (0, _defineProperty2["default"])(_this, "scroll", function () {
       _this.props.scrollToItem(_this.props.position)(_this.props.sessionItemId);
-    };
+    });
     return _this;
   }
-  (0, _createClass2.default)(Pin, [{
+  (0, _inherits2["default"])(Pin, _Component);
+  return (0, _createClass2["default"])(Pin, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+      return /*#__PURE__*/_react["default"].createElement(_uiLink.Link, {
         onClick: this.scroll,
         isWithinText: false,
         display: "block"
-      }, (0, _formatMessage.default)('Question {position, number}', {
+      }, (0, _formatMessage["default"])('Question {position, number}', {
         position: this.props.position
       }));
     }
   }]);
-  Pin.displayName = "Pin";
-  return Pin;
 }(_react.Component);
-exports.Pin = Pin;
-Pin.propTypes = {
-  scrollToItem: _propTypes.default.func.isRequired,
-  sessionItemId: _propTypes.default.string.isRequired,
-  position: _propTypes.default.number.isRequired
-};
-var _default = Pin;
-exports.default = _default;
+(0, _defineProperty2["default"])(Pin, "propTypes", {
+  scrollToItem: _propTypes["default"].func.isRequired,
+  sessionItemId: _propTypes["default"].string.isRequired,
+  position: _propTypes["default"].number.isRequired
+});
+var _default = exports["default"] = Pin;

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

@@ -4,16 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _immutable = require("immutable");
-var _ref = /*#__PURE__*/_react.default.createElement("div", {
-  key: "1"
-}, "child1");
-var _ref2 = /*#__PURE__*/_react.default.createElement("div", {
-  key: "2"
-}, "child2");
-var _default = {
+var _default = exports["default"] = {
   propValues: {
     taking: [false, true],
     sidebarOpen: [false, true],
@@ -21,7 +15,11 @@ var _default = {
   },
   getComponentProps: function getComponentProps(props) {
     return {
-      children: [_ref, _ref2],
+      children: [/*#__PURE__*/_react["default"].createElement("div", {
+        key: "1"
+      }, "child1"), /*#__PURE__*/_react["default"].createElement("div", {
+        key: "2"
+      }, "child2")],
       scrollToItem: function scrollToItem() {
         return Function.prototype;
       },
@@ -36,5 +34,4 @@ var _default = {
       shouldCloseOnBlur: false
     };
   }
-};
-exports.default = _default;
+};

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateExternalStyle = void 0;
-var generateExternalStyle = function generateExternalStyle(componentTheme) {
+var generateExternalStyle = exports.generateExternalStyle = function generateExternalStyle(componentTheme) {
   return {
     sidebar: {
       borderTop: "".concat(componentTheme.sidebarBorderWidth, " solid ").concat(componentTheme.sidebarBorderColor),
@@ -13,5 +13,4 @@ var generateExternalStyle = function generateExternalStyle(componentTheme) {
       borderLeft: "".concat(componentTheme.sidebarBorderWidth, " solid ").concat(componentTheme.sidebarBorderColor)
     }
   };
-};
-exports.generateExternalStyle = generateExternalStyle;
+};

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

@@ -4,12 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Sidebar = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+exports["default"] = exports.Sidebar = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _immutable = require("immutable");
@@ -25,56 +26,48 @@ var _uiHeading = require("@instructure/ui-heading");
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 var _uiTooltip = require("@instructure/ui-tooltip");
 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 _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;
 /** @jsx jsx */
 /* eslint "jsx-a11y/click-events-have-key-events": "warn" */
-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, _quizCommon.withStyleOverrides)(_styles.default, _theme.default), _dec(_class = (_Sidebar = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(Sidebar, _Component);
-  var _super = (0, _createSuper2.default)(Sidebar);
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var Sidebar = exports.Sidebar = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_Sidebar = /*#__PURE__*/function (_Component) {
   function Sidebar() {
     var _this;
-    (0, _classCallCheck2.default)(this, Sidebar);
+    (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.scrollToTitle = function (e) {
+    _this = _callSuper(this, Sidebar, [].concat(args));
+    (0, _defineProperty2["default"])(_this, "scrollToTitle", function (e) {
       e.preventDefault(); // prevent default link navigation
       _this.props.scrollToItem(null)(_quizCommon.TITLE_SCROLL_KEY);
-    };
-    _this.scrollToInfo = function (e) {
+    });
+    (0, _defineProperty2["default"])(_this, "scrollToInfo", function (e) {
       e.preventDefault(); // prevent default link navigation
       _this.props.scrollToItem(null)(_quizCommon.INSTRUCTIONS_SCROLL_KEY);
-    };
-    _this.scrollToResults = function (e) {
+    });
+    (0, _defineProperty2["default"])(_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');
+    });
+    (0, _defineProperty2["default"])(_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) {
+    });
+    (0, _defineProperty2["default"])(_this, "refWrapper", function (c) {
       _this.sidebarWrapper = c;
-    };
-    _this.handleBlur = function () {
+    });
+    (0, _defineProperty2["default"])(_this, "handleBlur", function () {
       var isOpen = _this.props.sidebarOpen;
       setTimeout(function () {
         var focusNotInSidebar = _this.sidebarWrapper !== null && !_this.sidebarWrapper.contains(document.activeElement);
@@ -82,10 +75,11 @@ var Sidebar = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _them
           _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();
@@ -103,13 +97,15 @@ var Sidebar = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _them
       var resizeEvent = window.document.createEvent('UIEvents');
       resizeEvent.initUIEvent('resize', true, false, window, 0);
       window.dispatchEvent(resizeEvent);
-    } // ============
+    }
+
+    // ============
     //  RENDERING
     // ============
   }, {
     key: "renderTitle",
     value: function renderTitle() {
-      var navigationText = (0, _formatMessage.default)('Navigate to title');
+      var navigationText = (0, _formatMessage["default"])('Navigate to title');
       if (this.props.grading) {
         return;
       }
@@ -127,19 +123,21 @@ var Sidebar = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _them
         margin: "small",
         forceButtonRole: false,
         onClick: this.scrollToTitle,
-        renderIcon: _ref,
+        renderIcon: (0, _emotion.jsx)(_uiIcons.IconQuizTitleLine, {
+          color: "primary"
+        }),
         "data-automation": "sidebar-title-button"
       }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, navigationText))), (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, (0, _emotion.jsx)("span", {
         css: this.props.styles.sidebar.description,
         "data-automation": "sidebar-title-text",
         onClick: this.scrollToTitle,
         tabIndex: "-1"
-      }, this.props.title || (0, _formatMessage.default)('Title'))));
+      }, this.props.title || (0, _formatMessage["default"])('Title'))));
     }
   }, {
     key: "renderInstructions",
     value: function renderInstructions() {
-      var navigationText = (0, _formatMessage.default)('Navigate to instructions');
+      var navigationText = (0, _formatMessage["default"])('Navigate to instructions');
       if (this.props.grading) {
         return;
       }
@@ -157,19 +155,21 @@ var Sidebar = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _them
         margin: "small",
         forceButtonRole: false,
         onClick: this.scrollToInfo,
-        renderIcon: _ref2,
+        renderIcon: (0, _emotion.jsx)(_uiIcons.IconQuizInstructionsLine, {
+          color: "primary"
+        }),
         "data-automation": "sidebar-instructions-button"
       }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, navigationText))), (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, (0, _emotion.jsx)("span", {
         css: this.props.styles.sidebar.description,
         "data-automation": "sidebar-instructions-text",
         onClick: this.scrollToInfo,
         tabIndex: "-1"
-      }, (0, _formatMessage.default)('Instructions'))));
+      }, (0, _formatMessage["default"])('Instructions'))));
     }
   }, {
     key: "renderResults",
     value: function renderResults() {
-      var navigationText = (0, _formatMessage.default)('Navigate to results');
+      var navigationText = (0, _formatMessage["default"])('Navigate to results');
       if (!this.props.grading) {
         return;
       }
@@ -186,14 +186,16 @@ var Sidebar = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _them
         margin: "small",
         forceButtonRole: false,
         onClick: this.scrollToResults,
-        renderIcon: _ref3,
+        renderIcon: (0, _emotion.jsx)(_uiIcons.IconQuizInstructionsLine, {
+          color: "primary"
+        }),
         "data-automation": "sidebar-results-button"
       }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, navigationText))), (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, (0, _emotion.jsx)("span", {
         css: this.props.styles.sidebar.description,
         "data-automation": "sidebar-results-text",
         onClick: this.scrollToResults,
         tabIndex: "-1"
-      }, (0, _formatMessage.default)('Results'))));
+      }, (0, _formatMessage["default"])('Results'))));
     }
   }, {
     key: "renderSidebarHeader",
@@ -203,13 +205,13 @@ var Sidebar = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _them
         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)
+        css: _objectSpread(_objectSpread({}, styles.headerSpacing), styles.headerBottomBorder)
       }, (0, _emotion.jsx)("div", {
         css: styles.questionNavigatorPadding
       }, (0, _emotion.jsx)(_uiHeading.Heading, {
         level: "h5",
         as: "h2"
-      }, (0, _formatMessage.default)('Question Navigator'))), (0, _emotion.jsx)("div", {
+      }, (0, _formatMessage["default"])('Question Navigator'))), (0, _emotion.jsx)("div", {
         css: styles.iconWrapper
       }, (0, _emotion.jsx)(_uiButtons.IconButton, {
         onClick: this.toggleSidebar,
@@ -218,7 +220,7 @@ var Sidebar = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _them
         renderIcon: SidebarIcon,
         withBackground: false,
         withBorder: false,
-        screenReaderLabel: sidebarOpen ? (0, _formatMessage.default)('Hide Question Navigator Menu') : (0, _formatMessage.default)('Show Question Navigator Menu'),
+        screenReaderLabel: sidebarOpen ? (0, _formatMessage["default"])('Hide Question Navigator Menu') : (0, _formatMessage["default"])('Show Question Navigator Menu'),
         "data-automation": "sidebar-toggle-button"
       })));
     }
@@ -235,14 +237,14 @@ var Sidebar = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _them
         key: "pointsText",
         size: "small",
         weight: "bold"
-      }, (0, _formatMessage.default)("{\n      totalPointsPossible, plural,\n       one {# pt}\n       other {# pts}\n      }", {
+      }, (0, _formatMessage["default"])("{\n      totalPointsPossible, plural,\n       one {# pt}\n       other {# pts}\n      }", {
         totalPointsPossible: totalPointsPossible
       }));
       var responsiveText = pointsText;
       if (sidebarOpen) {
         responsiveText = (0, _emotion.jsx)(_uiText.Text, {
           size: "small"
-        }, _formatMessage.default.rich('Total question points = <points/>', {
+        }, _formatMessage["default"].rich('Total question points = <points/>', {
           points: function points() {
             return pointsText;
           }
@@ -253,7 +255,7 @@ var Sidebar = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _them
         padding: "small x-small",
         textAlign: sidebarOpen ? 'start' : 'center'
       }, (0, _emotion.jsx)(_uiA11yContent.AccessibleContent, {
-        alt: (0, _formatMessage.default)('Total question points = {totalPointsPossible}', {
+        alt: (0, _formatMessage["default"])('Total question points = {totalPointsPossible}', {
           totalPointsPossible: totalPointsPossible
         })
       }, responsiveText));
@@ -271,7 +273,7 @@ var Sidebar = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _them
         return;
       }
       return (0, _emotion.jsx)("div", {
-        css: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles.pinnedSection), styles.headerBottomBorder)
+        css: _objectSpread(_objectSpread({}, styles.pinnedSection), styles.headerBottomBorder)
       }, (0, _emotion.jsx)("div", {
         css: styles.headerSpacing
       }, (0, _emotion.jsx)("div", {
@@ -279,17 +281,17 @@ var Sidebar = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _them
       }, (0, _emotion.jsx)(_uiHeading.Heading, {
         level: "h5",
         as: "h2"
-      }, (0, _formatMessage.default)('Pinned Questions'))), (0, _emotion.jsx)("div", {
+      }, (0, _formatMessage["default"])('Pinned Questions'))), (0, _emotion.jsx)("div", {
         css: styles.iconWrapper,
         "aria-hidden": sidebarOpen
       }, (0, _emotion.jsx)(_uiText.Text, {
         size: "x-small",
-        "aria-label": (0, _formatMessage.default)('Pinned Questions'),
+        "aria-label": (0, _formatMessage["default"])('Pinned Questions'),
         role: "img"
-      }, _ref4))), (0, _emotion.jsx)("div", {
+      }, (0, _emotion.jsx)(_uiIcons.IconPinSolid, null)))), (0, _emotion.jsx)("div", {
         css: styles.buttonWrapper
       }, pinnedItems.map(function (pin) {
-        return (0, _emotion.jsx)(_Pin.default, {
+        return (0, _emotion.jsx)(_Pin["default"], {
           key: pin.sessionItemId,
           scrollToItem: scrollToItem,
           position: pin.position,
@@ -318,35 +320,33 @@ var Sidebar = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _them
         // 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,
+        onClick: _noop["default"],
         id: _quizCommon.SIDEBAR_NAV_ID,
-        "aria-label": (0, _formatMessage.default)('Question Navigator')
+        "aria-label": (0, _formatMessage["default"])('Question Navigator')
       }, this.renderSidebarHeader(), this.renderTotalPointsPossible(), this.renderPinned(), this.renderTitle(), this.renderInstructions(), this.renderResults(), (0, _emotion.jsx)("div", {
         css: this.props.styles.sidebarContent
       }, this.props.children)))));
     }
   }]);
-  Sidebar.displayName = "Sidebar";
-  return Sidebar;
-}(_react.Component), _Sidebar.displayName = 'Sidebar', _Sidebar.componentId = "Quizzes".concat(_Sidebar.displayName), _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,
-  scrollToItem: _CustomPropTypes.default.higherOrderFunction.isRequired,
-  sidebarOpen: _propTypes.default.bool.isRequired,
-  pinnedItems: _reactImmutableProptypes.default.listOf(_propTypes.default.shape({
-    sessionItemId: _propTypes.default.string.isRequired,
-    position: _propTypes.default.number.isRequired
+}(_react.Component), (0, _defineProperty2["default"])(_Sidebar, "displayName", 'Sidebar'), (0, _defineProperty2["default"])(_Sidebar, "componentId", "Quizzes".concat(_Sidebar.displayName)), (0, _defineProperty2["default"])(_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,
+  scrollToItem: _CustomPropTypes["default"].higherOrderFunction.isRequired,
+  sidebarOpen: _propTypes["default"].bool.isRequired,
+  pinnedItems: _reactImmutableProptypes["default"].listOf(_propTypes["default"].shape({
+    sessionItemId: _propTypes["default"].string.isRequired,
+    position: _propTypes["default"].number.isRequired
   })).isRequired,
-  role: _propTypes.default.string,
-  title: _propTypes.default.string,
-  toggleSidebar: _propTypes.default.func.isRequired,
-  screenreaderNotification: _propTypes.default.func.isRequired,
-  totalPointsPossible: _propTypes.default.number,
-  shouldCloseOnBlur: _propTypes.default.bool,
-  makeStyles: _propTypes.default.func,
-  styles: _propTypes.default.object
-}, _Sidebar.defaultProps = {
+  role: _propTypes["default"].string,
+  title: _propTypes["default"].string,
+  toggleSidebar: _propTypes["default"].func.isRequired,
+  screenreaderNotification: _propTypes["default"].func.isRequired,
+  totalPointsPossible: _propTypes["default"].number,
+  shouldCloseOnBlur: _propTypes["default"].bool,
+  makeStyles: _propTypes["default"].func,
+  styles: _propTypes["default"].object
+}), (0, _defineProperty2["default"])(_Sidebar, "defaultProps", {
   grading: false,
   taking: false,
   title: null,
@@ -354,7 +354,5 @@ var Sidebar = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _them
   role: 'navigation',
   totalPointsPossible: null,
   shouldCloseOnBlur: (0, _windowChecks.onPhone)()
-}, _Sidebar)) || _class);
-exports.Sidebar = Sidebar;
-var _default = Sidebar;
-exports.default = _default;
+}), _Sidebar)) || _class);
+var _default = exports["default"] = Sidebar;