@instructure/quiz-core 20.9.0 → 20.9.1-rc.0

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

@@ -2,14 +2,12 @@
 
 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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -19,7 +17,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -27,8 +25,6 @@ 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");
@@ -41,7 +37,7 @@ var _uiText = require("@instructure/ui-text");
 
 var _uiView = require("@instructure/ui-view");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _uiHeading = require("@instructure/ui-heading");
 
@@ -57,46 +53,27 @@ 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 styles = {
-  componentId: 'bPuQe',
-  template: function template(theme) {
-    return "\n\n.bPuQe_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\nbody.tox-fullscreen .bPuQe_bObp{z-index:0}\n\n.bPuQe_crKy{display:flex;flex-direction:column;height:100%}\n\n.bPuQe_eYGv{overflow-x:hidden;overflow-y:auto}\n\n.bPuQe_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] .bPuQe_eeTU,[dir=rtl] .bPuQe_eeTU{text-align:center}\n\n.bPuQe_eeTU:hover{border-right:").concat(theme.actionableInfoBorderWidth || 'inherit', " solid ").concat(theme.actionableInfoHoverBorderColor || 'inherit', "}\n\n.bPuQe_difO{color:").concat(theme.descriptionFontColor || 'inherit', ";display:none;font-size:").concat(theme.descriptionFontSize || 'inherit', "}\n\n.bPuQe_cjDf{display:flex;flex-direction:row;flex-shrink:0;padding:").concat(theme.headerSpacingPadding || 'inherit', "}\n\n.bPuQe_cjDf h2{padding-top:0.3em}\n\n.bPuQe_fuFE{border-bottom:solid ").concat(theme.sidebarHeaderBorderWidth || 'inherit', ";border-color:").concat(theme.sidebarHeaderBorderColor || 'inherit', "}\n\n.bPuQe_cvRx{margin-left:auto}\n\n.bPuQe_fwEb{background-color:").concat(theme.pinnedSectionBackgroundColor || 'inherit', ";width:100%}\n\n.bPuQe_fwEb .bPuQe_cjDf{flex-grow:1}\n\n.bPuQe_ftzv{padding-top:").concat(theme.questionNavigatorPadding || 'inherit', "}\n\n.bPuQe_bObp.bPuQe_eNNp{opacity:1;transition:").concat(theme.sidebarTransitionDuration || 'inherit', " ease;width:").concat(theme.sidebarWidthOpen || 'inherit', "}\n\n.bPuQe_eNNp .bPuQe_difO{cursor:pointer;display:inline-block}\n\n.bPuQe_eNNp .bPuQe_eeTU,[dir=ltr] .bPuQe_eNNp .bPuQe_eeTU,[dir=rtl] .bPuQe_eNNp .bPuQe_eeTU{text-align:inherit}\n\n.bPuQe_eQGE{display:none}\n\n.bPuQe_eQGE.bPuQe_cvRx{display:block;margin:auto}\n\n.bPuQe_nqth button{font-size:").concat(theme.pinnedQuestionFontSize || 'inherit', ";padding-bottom:").concat(theme.pinnedQuestionSpacing || 'inherit', ";padding-left:").concat(theme.pinnedQuestionSpacing || 'inherit', "}\n\n.bPuQe_eYHq{height:100%}\n\n@media screen and (--phoneBreakPoint){.bPuQe_eYHq{position:relative}.bPuQe_bObp{position:absolute;width:0}.bPuQe_bObp,.bPuQe_bObp.bPuQe_eNNp{transition:").concat(theme.sidebarTransitionDuration || 'inherit', " ease}.bPuQe_bObp.bPuQe_eNNp{display:inline;max-width:100vw;width:100vw}}\n\n@media print{.bPuQe_eYHq{display:none}}");
-  },
-  'sidebar': 'bPuQe_bObp',
-  'sidebarWrapper': 'bPuQe_crKy',
-  'sidebarContent': 'bPuQe_eYGv',
-  'actionableInfo': 'bPuQe_eeTU',
-  'description': 'bPuQe_difO',
-  'headerSpacing': 'bPuQe_cjDf',
-  'headerBottomBorder': 'bPuQe_fuFE',
-  'iconWrapper': 'bPuQe_cvRx',
-  'pinnedSection': 'bPuQe_fwEb',
-  'questionNavigatorPadding': 'bPuQe_ftzv',
-  'sidebarIsOpen': 'bPuQe_eNNp',
-  'sidebarClosed': 'bPuQe_eQGE',
-  'buttonWrapper': 'bPuQe_nqth',
-  'commonContainer': 'bPuQe_eYHq'
-};
-
-var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconQuizTitleLine, {
+var _ref = (0, _emotion.jsx)(_uiIcons.IconQuizTitleLine, {
   color: "primary"
 });
 
-var _ref2 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconQuizInstructionsLine, {
+var _ref2 = (0, _emotion.jsx)(_uiIcons.IconQuizInstructionsLine, {
   color: "primary"
 });
 
-var _ref3 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconQuizInstructionsLine, {
+var _ref3 = (0, _emotion.jsx)(_uiIcons.IconQuizInstructionsLine, {
   color: "primary"
 });
 
-var _ref4 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconPinSolid, null);
+var _ref4 = (0, _emotion.jsx)(_uiIcons.IconPinSolid, null);
 
-var Sidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+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);
@@ -157,6 +134,16 @@ var Sidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(
   }
 
   (0, _createClass2.default)(Sidebar, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.makeStyles();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles();
+    }
+  }, {
     key: "handleTransitionEnd",
     value: function handleTransitionEnd() {
       // when the sidebar finishes its transition, fire a "windowResized" event
@@ -175,16 +162,16 @@ var Sidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(
         return;
       }
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.actionableInfo
-      }, /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.sidebar.actionableInfo
+      }, (0, _emotion.jsx)(_uiLink.Link, {
         href: "#",
         margin: "small",
         forceButtonRole: false,
         onClick: this.scrollToTitle,
         renderIcon: _ref
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Navigate to title'))), /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, /*#__PURE__*/_react.default.createElement("span", {
-        className: styles.description,
+      }, (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,
         tabIndex: "-1"
       }, this.props.title || (0, _formatMessage.default)('Title'))));
@@ -196,17 +183,17 @@ var Sidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(
         return;
       }
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.actionableInfo
-      }, /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.sidebar.actionableInfo
+      }, (0, _emotion.jsx)(_uiLink.Link, {
         href: "#",
         margin: "small",
         forceButtonRole: false,
         onClick: this.scrollToInfo,
         renderIcon: _ref2,
         "data-automation": "sidebar-instructions-button"
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Navigate to instructions'))), /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, /*#__PURE__*/_react.default.createElement("span", {
-        className: styles.description,
+      }, (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,
         "data-automation": "sidebar-instructions-text",
         onClick: this.scrollToInfo,
         tabIndex: "-1"
@@ -219,17 +206,17 @@ var Sidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(
         return;
       }
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.actionableInfo
-      }, /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.sidebar.actionableInfo
+      }, (0, _emotion.jsx)(_uiLink.Link, {
         href: "#",
         margin: "small",
         forceButtonRole: false,
         onClick: this.scrollToResults,
         renderIcon: _ref3,
         "data-automation": "sidebar-results-button"
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Navigate to results'))), /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, /*#__PURE__*/_react.default.createElement("span", {
-        className: styles.description,
+      }, (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,
         "data-automation": "sidebar-results-text",
         onClick: this.scrollToResults,
         tabIndex: "-1"
@@ -238,20 +225,20 @@ var Sidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(
   }, {
     key: "renderSidebarHeader",
     value: function renderSidebarHeader() {
-      var sidebarOpen = this.props.sidebarOpen;
+      var _this$props = this.props,
+          sidebarOpen = _this$props.sidebarOpen,
+          styles = _this$props.styles;
       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(_uiHeading.Heading, {
+      return (0, _emotion.jsx)("div", {
+        css: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, 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'))), /*#__PURE__*/_react.default.createElement("div", {
-        className: iconClasses
-      }, /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
+      }, (0, _formatMessage.default)('Question Navigator'))), (0, _emotion.jsx)("div", {
+        css: styles.iconWrapper
+      }, (0, _emotion.jsx)(_uiButtons.IconButton, {
         onClick: this.toggleSidebar,
         size: "small",
         margin: "none",
@@ -265,26 +252,25 @@ var Sidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(
   }, {
     key: "renderTotalPointsPossible",
     value: function renderTotalPointsPossible() {
-      var _this$props = this.props,
-          sidebarOpen = _this$props.sidebarOpen,
-          totalPointsPossible = _this$props.totalPointsPossible;
+      var _this$props2 = this.props,
+          sidebarOpen = _this$props2.sidebarOpen,
+          totalPointsPossible = _this$props2.totalPointsPossible;
 
       if (typeof totalPointsPossible !== 'number') {
         return null;
       }
 
-      var pointsText = /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      var pointsText = (0, _emotion.jsx)(_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, {
+        responsiveText = (0, _emotion.jsx)(_uiText.Text, {
           size: "small"
         }, _formatMessage.default.rich('Total question points = <points/>', {
           points: function points() {
@@ -293,11 +279,11 @@ var Sidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(
         }));
       }
 
-      return /*#__PURE__*/_react.default.createElement(_uiView.View, {
+      return (0, _emotion.jsx)(_uiView.View, {
         borderWidth: "0 0 small 0",
         padding: "small x-small",
         textAlign: sidebarOpen ? 'start' : 'center'
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+      }, (0, _emotion.jsx)(_uiA11yContent.AccessibleContent, {
         alt: (0, _formatMessage.default)('Total question points = {totalPointsPossible}', {
           totalPointsPossible: totalPointsPossible
         })
@@ -306,38 +292,37 @@ var Sidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(
   }, {
     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;
+      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;
 
       if (!taking) {
         return;
       }
 
-      var closedClasses = (0, _classnames.default)(styles.buttonWrapper, (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(_uiHeading.Heading, {
+      return (0, _emotion.jsx)("div", {
+        css: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles.pinnedSection), styles.headerBottomBorder)
+      }, (0, _emotion.jsx)("div", {
+        css: styles.headerSpacing
+      }, (0, _emotion.jsx)("div", {
+        css: styles.buttonWrapper
+      }, (0, _emotion.jsx)(_uiHeading.Heading, {
         level: "h5",
         as: "h2"
-      }, (0, _formatMessage.default)('Pinned Questions'))), /*#__PURE__*/_react.default.createElement("div", {
-        className: iconClasses,
+      }, (0, _formatMessage.default)('Pinned Questions'))), (0, _emotion.jsx)("div", {
+        css: styles.iconWrapper,
         "aria-hidden": sidebarOpen
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, (0, _emotion.jsx)(_uiText.Text, {
         size: "x-small",
         "aria-label": (0, _formatMessage.default)('Pinned Questions'),
         role: "img"
-      }, _ref4))), /*#__PURE__*/_react.default.createElement("div", {
-        className: closedClasses
+      }, _ref4))), (0, _emotion.jsx)("div", {
+        css: styles.buttonWrapper
       }, pinnedItems.map(function (pin) {
-        return /*#__PURE__*/_react.default.createElement(_Pin.default, {
+        return (0, _emotion.jsx)(_Pin.default, {
           key: pin.sessionItemId,
           scrollToItem: scrollToItem,
           position: pin.position,
@@ -348,17 +333,18 @@ var Sidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(
   }, {
     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,
+      return (0, _emotion.jsx)(_uiView.View, null, (0, _emotion.jsx)("div", {
+        css: this.props.styles.commonContainer,
         id: "sidebar-wrapper",
         tabIndex: "-1"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: sidebarClassList,
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.sidebar,
         onTransitionEnd: this.handleTransitionEnd,
         "data-automation": this.props.sidebarOpen ? 'sdk-sidebar-open' : 'sdk-sidebar-closed'
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.sidebarWrapper,
+      }, (0, _emotion.jsx)(_emotion.Global, {
+        styles: this.props.styles.globalStyles
+      }), (0, _emotion.jsx)("div", {
+        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
@@ -366,8 +352,8 @@ var Sidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(
         ,
         onClick: _noop.default,
         id: _quizCommon.SIDEBAR_NAV_ID
-      }, this.renderSidebarHeader(), this.renderTotalPointsPossible(), this.renderPinned(), this.renderTitle(), this.renderInstructions(), this.renderResults(), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.sidebarContent
+      }, this.renderSidebarHeader(), this.renderTotalPointsPossible(), this.renderPinned(), this.renderTitle(), this.renderInstructions(), this.renderResults(), (0, _emotion.jsx)("div", {
+        css: this.props.styles.sidebarContent
       }, this.props.children)))));
     }
   }]);
@@ -388,7 +374,9 @@ var Sidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(
   toggleSidebar: _propTypes.default.func.isRequired,
   screenreaderNotification: _propTypes.default.func.isRequired,
   totalPointsPossible: _propTypes.default.number,
-  shouldCloseOnBlur: _propTypes.default.bool
+  shouldCloseOnBlur: _propTypes.default.bool,
+  makeStyles: _propTypes.default.func,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   grading: false,
   taking: false,

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

@@ -0,0 +1,128 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+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 {
+    sidebar: (0, _objectSpread3.default)((0, _objectSpread3.default)((0, _defineProperty2.default)({
+      boxSizing: 'border-box',
+      width: componentTheme.sidebarWidthClosed,
+      backgroundColor: componentTheme.sidebarBackgroundColor,
+      border: "".concat(componentTheme.sidebarBorderWidth, " solid ").concat(componentTheme.sidebarBorderColor),
+      color: componentTheme.sidebarColor,
+      height: '100%',
+      overflow: 'hidden',
+      position: 'relative',
+      zIndex: componentTheme.sidebarZIndex,
+      transition: "".concat(componentTheme.sidebarTransitionDuration, " ease")
+    }, mq, {
+      position: 'absolute',
+      width: 0
+    }), props.sidebarOpen && (0, _defineProperty2.default)({
+      width: componentTheme.sidebarWidthOpen,
+      opacity: 1
+    }, mq, {
+      width: '100vw',
+      maxWidth: '100vw'
+    })), {}, {
+      description: (0, _objectSpread3.default)({
+        color: componentTheme.descriptionFontColor,
+        display: 'none',
+        fontSize: componentTheme.descriptionFontSize
+      }, props.sidebarOpen && {
+        cursor: 'pointer',
+        display: 'inline-block'
+      }),
+      actionableInfo: (0, _objectSpread3.default)({
+        borderBottom: "".concat(componentTheme.sidebarHeaderBorderWidth, " solid ").concat(componentTheme.sidebarHeaderBorderColor),
+        borderRight: "".concat(componentTheme.actionableInfoBorderWidth, " solid ").concat(componentTheme.sidebarBackgroundColor),
+        textAlign: 'center',
+        ':hover': {
+          borderRight: "".concat(componentTheme.actionableInfoBorderWidth, " solid ").concat(componentTheme.actionableInfoHoverBorderColor)
+        }
+      }, props.sidebarOpen && {
+        textAlign: 'inherit'
+      })
+    }),
+
+    /* Decrease z-index when RCE editor is in fullscreen mode */
+    globalStyles: {
+      sidebar: {
+        zIndex: 0
+      }
+    },
+    sidebarWrapper: {
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%'
+    },
+    sidebarContent: {
+      overflowY: 'auto',
+      overflowX: 'hidden'
+    },
+    headerSpacing: {
+      display: 'flex',
+      flexDirection: 'row',
+      padding: componentTheme.headerSpacingPadding,
+      flexShrink: 0,
+      h2: {
+        paddingTop: '0.3em'
+      }
+    },
+    headerBottomBorder: {
+      borderBottom: "solid ".concat(componentTheme.sidebarHeaderBorderWidth),
+      borderColor: componentTheme.sidebarHeaderBorderColor
+    },
+    iconWrapper: (0, _objectSpread3.default)({
+      marginLeft: 'auto'
+    }, !props.sidebarOpen && {
+      display: 'block',
+      margin: 'auto'
+    }),
+    pinnedSection: {
+      width: '100%',
+      backgroundColor: componentTheme.pinnedSectionBackgroundColor,
+      headerSpacing: {
+        flexGrow: 1
+      }
+    },
+    questionNavigatorPadding: (0, _objectSpread3.default)({
+      paddingTop: componentTheme.questionNavigatorPadding
+    }, !props.sidebarOpen && {
+      display: 'none'
+    }),
+    buttonWrapper: (0, _objectSpread3.default)({
+      button: {
+        paddingLeft: componentTheme.pinnedQuestionSpacing,
+        paddingBottom: componentTheme.pinnedQuestionSpacing,
+        fontSize: componentTheme.pinnedQuestionFontSize,
+        display: 'block'
+      }
+    }, !props.sidebarOpen && {
+      display: 'none'
+    }),
+    commonContainer: (_commonContainer = {
+      height: '100%'
+    }, (0, _defineProperty2.default)(_commonContainer, mq, {
+      position: 'relative'
+    }), (0, _defineProperty2.default)(_commonContainer, mp, {
+      display: 'none'
+    }), _commonContainer)
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

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

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
 var _uiColorUtils = require("@instructure/ui-color-utils");
 
-function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
       spacing = _ref.spacing,
       typography = _ref.typography,
@@ -42,11 +42,7 @@ function generator(_ref) {
     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)
-  };
-};
+var _default = generateComponentTheme;
+exports.default = _default;