@instructure/quiz-core 17.19.2-rc.5 → 17.19.3-rc.2

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

@@ -0,0 +1,78 @@
+"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;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+// 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);
+
+  function Pin() {
+    var _this;
+
+    (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.props.scrollToItem(_this.props.position)(_this.props.sessionItemId);
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(Pin, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        variant: "link",
+        onClick: this.scroll,
+        size: "small",
+        margin: "0",
+        fluidWidth: true
+      }, (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;

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

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 = {
+  propValues: {
+    taking: [false, true],
+    sidebarOpen: [false, true],
+    totalPointsPossible: [null, 421]
+  },
+  getComponentProps: function getComponentProps(props) {
+    return {
+      children: [_ref, _ref2],
+      scrollToItem: function scrollToItem() {
+        return Function.prototype;
+      },
+      pinnedItems: (0, _immutable.List)([{
+        sessionItemId: '11',
+        position: 1
+      }]),
+      role: "Wat",
+      title: "Temp",
+      toggleSidebar: Function.prototype,
+      screenreaderNotification: Function.prototype,
+      shouldCloseOnBlur: false
+    };
+  }
+};
+exports.default = _default;

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

@@ -0,0 +1,338 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Sidebar = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _immutable = require("immutable");
+
+var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiView = require("@instructure/ui-view");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _keyboardClickable = _interopRequireDefault(require("../../../../util/keyboardClickable.js"));
+
+var _windowChecks = require("../../../../util/windowChecks.js");
+
+var _CustomPropTypes = _interopRequireDefault(require("../../../../util/CustomPropTypes.js"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _noop = _interopRequireDefault(require("../../../../util/noop.js"));
+
+var _Pin = _interopRequireDefault(require("./Pin.js"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'jUsaR',
+  template: function template(theme) {
+    return "\n\n.jUsaR_bObp{background-color:".concat(theme.sidebarBackgroundColor || 'inherit', ";border:").concat(theme.sidebarBorderWidth || 'inherit', " solid ").concat(theme.sidebarBorderColor || 'inherit', ";box-sizing:border-box;color:").concat(theme.sidebarColor || 'inherit', ";height:100%;overflow:hidden;position:relative;transition:").concat(theme.sidebarTransitionDuration || 'inherit', " ease;width:").concat(theme.sidebarWidthClosed || 'inherit', ";z-index:").concat(theme.sidebarZIndex || 'inherit', "}\n\n.jUsaR_crKy{display:flex;flex-direction:column;height:100%}\n\n.jUsaR_eYGv{overflow-x:hidden;overflow-y:auto}\n\n.jUsaR_eeTU{border-bottom:").concat(theme.sidebarHeaderBorderWidth || 'inherit', " solid ").concat(theme.sidebarHeaderBorderColor || 'inherit', ";border-right:").concat(theme.actionableInfoBorderWidth || 'inherit', " solid ").concat(theme.sidebarBackgroundColor || 'inherit', ";text-align:center}\n\n[dir=ltr] .jUsaR_eeTU,[dir=rtl] .jUsaR_eeTU{text-align:center}\n\n.jUsaR_eeTU:hover{border-right:").concat(theme.actionableInfoBorderWidth || 'inherit', " solid ").concat(theme.actionableInfoHoverBorderColor || 'inherit', "}\n\n.jUsaR_difO{color:").concat(theme.descriptionFontColor || 'inherit', ";display:none;font-size:").concat(theme.descriptionFontSize || 'inherit', "}\n\n.jUsaR_cjDf{display:flex;flex-direction:row;flex-shrink:0;padding:").concat(theme.headerSpacingPadding || 'inherit', "}\n\n.jUsaR_fuFE{border-bottom:solid ").concat(theme.sidebarHeaderBorderWidth || 'inherit', ";border-color:").concat(theme.sidebarHeaderBorderColor || 'inherit', "}\n\n.jUsaR_cvRx{margin-left:auto}\n\n.jUsaR_fwEb{background-color:").concat(theme.pinnedSectionBackgroundColor || 'inherit', ";width:100%}\n\n.jUsaR_fwEb .jUsaR_cjDf{flex-grow:1}\n\n.jUsaR_ftzv{padding-top:").concat(theme.questionNavigatorPadding || 'inherit', "}\n\n.jUsaR_bObp.jUsaR_eNNp{opacity:1;transition:").concat(theme.sidebarTransitionDuration || 'inherit', " ease;width:").concat(theme.sidebarWidthOpen || 'inherit', "}\n\n.jUsaR_eNNp .jUsaR_difO{cursor:pointer;display:inline-block}\n\n.jUsaR_eNNp .jUsaR_eeTU,[dir=ltr] .jUsaR_eNNp .jUsaR_eeTU,[dir=rtl] .jUsaR_eNNp .jUsaR_eeTU{text-align:inherit}\n\n.jUsaR_eQGE{display:none}\n\n.jUsaR_eQGE.jUsaR_cvRx{display:block;margin:auto}\n\n.jUsaR_eYHq{height:100%}\n\n@media screen and (--phoneBreakPoint){.jUsaR_eYHq{position:relative}.jUsaR_bObp{position:absolute;width:0}.jUsaR_bObp,.jUsaR_bObp.jUsaR_eNNp{transition:").concat(theme.sidebarTransitionDuration || 'inherit', " ease}.jUsaR_bObp.jUsaR_eNNp{display:inline;max-width:100vw;width:100vw}}\n\n@media print{.jUsaR_eYHq{display:none}}");
+  },
+  'sidebar': 'jUsaR_bObp',
+  'sidebarWrapper': 'jUsaR_crKy',
+  'sidebarContent': 'jUsaR_eYGv',
+  'actionableInfo': 'jUsaR_eeTU',
+  'description': 'jUsaR_difO',
+  'headerSpacing': 'jUsaR_cjDf',
+  'headerBottomBorder': 'jUsaR_fuFE',
+  'iconWrapper': 'jUsaR_cvRx',
+  'pinnedSection': 'jUsaR_fwEb',
+  'questionNavigatorPadding': 'jUsaR_ftzv',
+  'sidebarIsOpen': 'jUsaR_eNNp',
+  'sidebarClosed': 'jUsaR_eQGE',
+  'commonContainer': 'jUsaR_eYHq'
+};
+
+var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconPinSolid, null);
+
+var Sidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(Sidebar, _Component);
+
+  var _super = (0, _createSuper2.default)(Sidebar);
+
+  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.scrollToTitle = function () {
+      _this.props.scrollToItem(null)('title');
+    };
+
+    _this.scrollToInfo = function () {
+      _this.props.scrollToItem(null)('instructions');
+    };
+
+    _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, [{
+    key: "handleTransitionEnd",
+    value: function handleTransitionEnd() {
+      // when the sidebar finishes its transition, fire a "windowResized" event
+      // so that elements (such as hotspot canvas) know to update their size
+      var resizeEvent = window.document.createEvent('UIEvents');
+      resizeEvent.initUIEvent('resize', true, false, window, 0);
+      window.dispatchEvent(resizeEvent);
+    } // ============
+    //  RENDERING
+    // ============
+
+  }, {
+    key: "renderTitle",
+    value: function renderTitle() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.actionableInfo
+      }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        icon: _uiIcons.IconQuizTitleLine,
+        onClick: this.scrollToTitle,
+        onKeyDown: _keyboardClickable.default,
+        variant: "icon"
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Scroll to title'))), /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, /*#__PURE__*/_react.default.createElement("span", {
+        className: styles.description,
+        onClick: this.scrollToTitle,
+        tabIndex: "-1"
+      }, this.props.title || (0, _formatMessage.default)('Title'))));
+    }
+  }, {
+    key: "renderInstructions",
+    value: function renderInstructions() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.actionableInfo
+      }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        icon: _uiIcons.IconQuizInstructionsLine,
+        onClick: this.scrollToInfo,
+        onKeyDown: _keyboardClickable.default,
+        "data-automation": "sidebar-instructions-button",
+        variant: "icon"
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Scroll to instructions'))), /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, /*#__PURE__*/_react.default.createElement("span", {
+        className: styles.description,
+        "data-automation": "sidebar-instructions-text",
+        onClick: this.scrollToInfo,
+        tabIndex: "-1"
+      }, (0, _formatMessage.default)('Instructions'))));
+    }
+  }, {
+    key: "renderSidebarHeader",
+    value: function renderSidebarHeader() {
+      var sidebarOpen = this.props.sidebarOpen;
+      var SidebarIcon = sidebarOpen ? _uiIcons.IconMoveStartLine : _uiIcons.IconMoveEndLine;
+      var closedClasses = (0, _classnames.default)(styles.questionNavigatorPadding, (0, _defineProperty2.default)({}, styles.sidebarClosed, !this.props.sidebarOpen));
+      var iconClasses = (0, _classnames.default)(styles.iconWrapper, (0, _defineProperty2.default)({}, styles.sidebarClosed, !sidebarOpen));
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)(styles.headerSpacing, styles.headerBottomBorder)
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: closedClasses
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "small"
+      }, (0, _formatMessage.default)('Question Navigator'))), /*#__PURE__*/_react.default.createElement("div", {
+        className: iconClasses
+      }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        variant: "icon",
+        onClick: this.toggleSidebar,
+        size: "small",
+        margin: "none",
+        "data-automation": "sidebar-toggle-button"
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "small"
+      }, /*#__PURE__*/_react.default.createElement(SidebarIcon, null)), /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, sidebarOpen ? (0, _formatMessage.default)('Close Menu') : (0, _formatMessage.default)('Open Menu')))));
+    }
+  }, {
+    key: "renderTotalPointsPossible",
+    value: function renderTotalPointsPossible() {
+      var _this$props = this.props,
+          sidebarOpen = _this$props.sidebarOpen,
+          totalPointsPossible = _this$props.totalPointsPossible;
+
+      if (typeof totalPointsPossible !== 'number') {
+        return null;
+      }
+
+      var pointsText = /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        key: "pointsText",
+        size: "small",
+        weight: "bold"
+      }, (0, _formatMessage.default)("{\n      totalPointsPossible, plural,\n       one {# pt}\n       other {# pts}\n      }", {
+        totalPointsPossible: totalPointsPossible
+      }));
+
+      var responsiveText = pointsText;
+
+      if (sidebarOpen) {
+        responsiveText = /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+          size: "small"
+        }, _formatMessage.default.rich('Total question points = <points/>', {
+          points: function points() {
+            return pointsText;
+          }
+        }));
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        borderWidth: "0 0 small 0",
+        padding: "small x-small",
+        textAlign: sidebarOpen ? 'start' : 'center'
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+        alt: (0, _formatMessage.default)('Total question points = {totalPointsPossible}', {
+          totalPointsPossible: totalPointsPossible
+        })
+      }, responsiveText));
+    }
+  }, {
+    key: "renderPinned",
+    value: function renderPinned() {
+      var _this$props2 = this.props,
+          sidebarOpen = _this$props2.sidebarOpen,
+          taking = _this$props2.taking,
+          pinnedItems = _this$props2.pinnedItems,
+          scrollToItem = _this$props2.scrollToItem;
+
+      if (!taking) {
+        return;
+      }
+
+      var closedClasses = (0, _classnames.default)((0, _defineProperty2.default)({}, styles.sidebarClosed, !sidebarOpen));
+      var iconClasses = (0, _classnames.default)(styles.iconWrapper, (0, _defineProperty2.default)({}, styles.sidebarClosed, !sidebarOpen));
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)(styles.pinnedSection, styles.headerBottomBorder)
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.headerSpacing
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: closedClasses
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "small"
+      }, (0, _formatMessage.default)('Pinned Questions'))), /*#__PURE__*/_react.default.createElement("div", {
+        className: iconClasses,
+        "aria-hidden": sidebarOpen
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "x-small",
+        "aria-label": (0, _formatMessage.default)('Pinned Questions'),
+        role: "img"
+      }, _ref))), /*#__PURE__*/_react.default.createElement("div", {
+        className: closedClasses
+      }, pinnedItems.map(function (pin) {
+        return /*#__PURE__*/_react.default.createElement(_Pin.default, {
+          key: pin.sessionItemId,
+          scrollToItem: scrollToItem,
+          position: pin.position,
+          sessionItemId: pin.sessionItemId
+        });
+      }).toArray()));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var sidebarClassList = (0, _classnames.default)(styles.sidebar, (0, _defineProperty2.default)({}, styles.sidebarIsOpen, this.props.sidebarOpen));
+      return /*#__PURE__*/_react.default.createElement(_uiView.View, null, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.commonContainer
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: sidebarClassList,
+        onTransitionEnd: this.handleTransitionEnd,
+        "data-automation": this.props.sidebarOpen ? 'sdk-sidebar-open' : 'sdk-sidebar-closed'
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.sidebarWrapper,
+        ref: this.refWrapper,
+        role: this.props.role,
+        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,
+        id: _quizCommon.SIDEBAR_NAV_ID
+      }, this.renderSidebarHeader(), this.renderTotalPointsPossible(), this.renderPinned(), this.renderTitle(), this.renderInstructions(), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.sidebarContent
+      }, this.props.children)))));
+    }
+  }]);
+  Sidebar.displayName = "Sidebar";
+  return Sidebar;
+}(_react.Component), _class2.propTypes = {
+  children: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.arrayOf(_propTypes.default.element), _propTypes.default.node]).isRequired,
+  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
+}, _class2.defaultProps = {
+  taking: false,
+  title: null,
+  pinnedItems: (0, _immutable.List)(),
+  role: 'navigation',
+  totalPointsPossible: null,
+  shouldCloseOnBlur: (0, _windowChecks.onPhone)()
+}, _temp)) || _class);
+exports.Sidebar = Sidebar;
+var _default = Sidebar;
+exports.default = _default;

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

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+var _uiColorUtils = require("@instructure/ui-color-utils");
+
+function generator(_ref) {
+  var colors = _ref.colors,
+      spacing = _ref.spacing,
+      typography = _ref.typography,
+      borders = _ref.borders,
+      breakpoints = _ref.breakpoints,
+      transitions = _ref.transitions;
+  return {
+    sidebarWidthClosed: spacing.xxLarge,
+    sidebarWidthOpen: '22rem',
+    sidebarBackgroundColor: colors.white,
+    sidebarBorderWidth: borders.widthSmall,
+    sidebarBorderColor: colors.tiara,
+    sidebarColor: colors.oxford,
+    sidebarZIndex: '5555',
+    sidebarTransitionDuration: transitions.duration,
+    infoHolderFontSize: typography.fontSizeXSmall,
+    infoHolderBorderWidth: borders.widthSmall,
+    infoHolderBorderColor: colors.tiara,
+    infoHolderPadding: spacing.small,
+    actionableInfoHoverBorderColor: colors.electric,
+    actionableInfoBorderWidth: borders.widthLarge,
+    questionNavigatorPadding: spacing.xxxSmall,
+    headerSpacingPadding: "".concat(spacing.small, " ").concat(spacing.xSmall),
+    pinnedSectionBackgroundColor: colors.porcelain,
+    sidebarHeaderBorderWidth: borders.widthSmall,
+    sidebarHeaderBorderColor: colors.tiara,
+    descriptionFontSize: typography.fontSizeXSmall,
+    descriptionFontColor: colors.slate,
+    phoneBreakPoint: "max-width: ".concat(breakpoints.medium),
+    focusBorderColor: colors.brand,
+    focusOutlineColor: (0, _uiColorUtils.alpha)(colors.brand, 50)
+  };
+}
+
+generator.canvas = function (variables) {
+  return {
+    focusBorderColor: variables['ic-brand-primary'],
+    focusOutlineColor: (0, _uiColorUtils.alpha)(variables['ic-brand-primary'], 50)
+  };
+};

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

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SidebarItem = exports.mapDispatchToProps = exports.mapStateToProps = 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 _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var mapStateToProps = function mapStateToProps(state, props) {
+  var displayPosition = props.quizEntry ? props.quizEntry.positionToDisplay(props.position) : (0, _formatMessage.default)('{position, number}', {
+    position: props.position
+  });
+  return {
+    displayPosition: displayPosition,
+    preventScrollToItem: (0, _calls.fileUploading)(state) && (0, _quizSessions.isOneQuestionAtATime)(state)
+  };
+};
+
+exports.mapStateToProps = mapStateToProps;
+
+var 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;