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

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

@@ -1,3 +1,4 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
@@ -5,24 +6,14 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
-import React, { Component } from 'react';
+/** @jsx jsx */
+import { Component } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { themeable } from '@instructure/ui-themeable';
-var styles = {
-  componentId: 'CixOW',
-  template: function template(theme) {
-    return "\n\n.CixOW_bZNM{display:flex;flex-flow:column}\n\n.CixOW_dlMM{padding-bottom:".concat(theme.firstNumberSummaryPadding || 'inherit', "}\n\n.CixOW_dWEq{padding-top:").concat(theme.secondNumberSummaryPadding || 'inherit', "}\n\n.CixOW_fJqn{color:").concat(theme.numberSummaryColor || 'inherit', ";font-size:").concat(theme.numberSummaryFontSize || 'inherit', ";font-weight:").concat(theme.numberSummaryFontWeight || 'inherit', ";margin:auto}\n\n.CixOW_EKnN{border-color:").concat(theme.verticalDotsBorderColor || 'inherit', ";border-left:dotted ").concat(theme.verticalDotsBorderWidth || 'inherit', ";height:1.5rem;margin:auto}");
-  },
-  'column': 'CixOW_bZNM',
-  'firstNumberSummary': 'CixOW_dlMM',
-  'secondNumberSummary': 'CixOW_dWEq',
-  'numberSummary': 'CixOW_fJqn',
-  'verticalDots': 'CixOW_EKnN'
-};
-import theme from "./theme.js";
+import { withStyle, jsx } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 import t from '@instructure/quiz-i18n/es/format-message';
-export var PositionSummary = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var PositionSummary = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(PositionSummary, _Component);
 
   var _super = _createSuper(PositionSummary);
@@ -36,16 +27,16 @@ export var PositionSummary = (_dec = themeable(theme, styles), _dec(_class = (_t
   _createClass(PositionSummary, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.column
-      }, /*#__PURE__*/React.createElement("div", {
-        className: classNames([styles.numberSummary, styles.firstNumberSummary])
+      return jsx("div", {
+        css: this.props.styles.column
+      }, jsx("div", {
+        css: _objectSpread(_objectSpread({}, this.props.styles.numberSummary), this.props.styles.firstNumberSummary)
       }, t('{first, number}', {
         first: this.props.firstPosition
-      })), /*#__PURE__*/React.createElement("div", {
-        className: styles.verticalDots
-      }), /*#__PURE__*/React.createElement("div", {
-        className: classNames([styles.numberSummary, styles.secondNumberSummary])
+      })), jsx("div", {
+        css: this.props.styles.verticalDots
+      }), jsx("div", {
+        css: _objectSpread(_objectSpread({}, this.props.styles.numberSummary), this.props.styles.secondNumberSummary)
       }, t('{last, number}', {
         last: this.props.lastPosition
       })));
@@ -56,6 +47,7 @@ export var PositionSummary = (_dec = themeable(theme, styles), _dec(_class = (_t
   return PositionSummary;
 }(Component), _class2.propTypes = {
   firstPosition: PropTypes.number.isRequired,
-  lastPosition: PropTypes.number.isRequired
+  lastPosition: PropTypes.number.isRequired,
+  styles: PropTypes.object
 }, _temp)) || _class);
 export default PositionSummary;

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

@@ -0,0 +1,28 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    column: {
+      display: 'flex',
+      flexFlow: 'column'
+    },
+    firstNumberSummary: {
+      paddingBottom: "".concat(componentTheme.firstNumberSummaryPadding)
+    },
+    secondNumberSummary: {
+      paddingTop: "".concat(componentTheme.secondNumberSummaryPadding)
+    },
+    numberSummary: {
+      color: componentTheme.numberSummaryColor,
+      fontSize: componentTheme.numberSummaryFontSize,
+      fontWeight: componentTheme.numberSummaryFontWeight,
+      margin: 'auto'
+    },
+    verticalDots: {
+      margin: 'auto',
+      height: '1.5rem',
+      borderLeft: "dotted ".concat(componentTheme.verticalDotsBorderWidth),
+      borderColor: componentTheme.verticalDotsBorderColor
+    }
+  };
+};
+
+export default generateStyle;

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

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
       spacing = _ref.spacing,
       borders = _ref.borders,
@@ -12,4 +12,6 @@ export default function generator(_ref) {
     verticalDotsBorderWidth: borders.widthSmall,
     verticalDotsBorderColor: colors.licorice
   };
-}
+};
+
+export default generateComponentTheme;

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

@@ -1,4 +1,4 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
@@ -6,19 +6,20 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
+
 /* eslint "jsx-a11y/click-events-have-key-events": "warn" */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { List } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import classNames from 'classnames';
 import { IconMoveStartLine, IconMoveEndLine, IconPinSolid, IconQuizInstructionsLine, IconQuizTitleLine } from '@instructure/ui-icons';
 import { AccessibleContent, ScreenReaderContent, PresentationContent } from '@instructure/ui-a11y-content';
 import { IconButton } from '@instructure/ui-buttons';
 import { Link } from '@instructure/ui-link';
 import { Text } from '@instructure/ui-text';
 import { View } from '@instructure/ui-view';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx, Global } from '@instructure/emotion';
 import { Heading } from '@instructure/ui-heading';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { INSTRUCTIONS_SCROLL_KEY, RESULTS_SCROLL_KEY, SIDEBAR_NAV_ID, TITLE_SCROLL_KEY } from '@instructure/quiz-common';
@@ -26,43 +27,24 @@ import { onPhone } from "../../../../util/windowChecks.js";
 import CustomPropTypes from "../../../../util/CustomPropTypes.js";
 import noop from "../../../../util/noop.js";
 import Pin from "./Pin.js";
-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'
-};
-import theme from "./theme.js";
-
-var _ref = /*#__PURE__*/React.createElement(IconQuizTitleLine, {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+
+var _ref = jsx(IconQuizTitleLine, {
   color: "primary"
 });
 
-var _ref2 = /*#__PURE__*/React.createElement(IconQuizInstructionsLine, {
+var _ref2 = jsx(IconQuizInstructionsLine, {
   color: "primary"
 });
 
-var _ref3 = /*#__PURE__*/React.createElement(IconQuizInstructionsLine, {
+var _ref3 = jsx(IconQuizInstructionsLine, {
   color: "primary"
 });
 
-var _ref4 = /*#__PURE__*/React.createElement(IconPinSolid, null);
+var _ref4 = jsx(IconPinSolid, null);
 
-export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var Sidebar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(Sidebar, _Component);
 
   var _super = _createSuper(Sidebar);
@@ -123,6 +105,16 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
   }
 
   _createClass(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
@@ -141,16 +133,16 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
         return;
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.actionableInfo
-      }, /*#__PURE__*/React.createElement(Link, {
+      return jsx("div", {
+        css: this.props.styles.sidebar.actionableInfo
+      }, jsx(Link, {
         href: "#",
         margin: "small",
         forceButtonRole: false,
         onClick: this.scrollToTitle,
         renderIcon: _ref
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Navigate to title'))), /*#__PURE__*/React.createElement(PresentationContent, null, /*#__PURE__*/React.createElement("span", {
-        className: styles.description,
+      }, jsx(ScreenReaderContent, null, t('Navigate to title'))), jsx(PresentationContent, null, jsx("span", {
+        css: this.props.styles.sidebar.description,
         onClick: this.scrollToTitle,
         tabIndex: "-1"
       }, this.props.title || t('Title'))));
@@ -162,17 +154,17 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
         return;
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.actionableInfo
-      }, /*#__PURE__*/React.createElement(Link, {
+      return jsx("div", {
+        css: this.props.styles.sidebar.actionableInfo
+      }, jsx(Link, {
         href: "#",
         margin: "small",
         forceButtonRole: false,
         onClick: this.scrollToInfo,
         renderIcon: _ref2,
         "data-automation": "sidebar-instructions-button"
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Navigate to instructions'))), /*#__PURE__*/React.createElement(PresentationContent, null, /*#__PURE__*/React.createElement("span", {
-        className: styles.description,
+      }, jsx(ScreenReaderContent, null, t('Navigate to instructions'))), jsx(PresentationContent, null, jsx("span", {
+        css: this.props.styles.sidebar.description,
         "data-automation": "sidebar-instructions-text",
         onClick: this.scrollToInfo,
         tabIndex: "-1"
@@ -185,17 +177,17 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
         return;
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.actionableInfo
-      }, /*#__PURE__*/React.createElement(Link, {
+      return jsx("div", {
+        css: this.props.styles.sidebar.actionableInfo
+      }, jsx(Link, {
         href: "#",
         margin: "small",
         forceButtonRole: false,
         onClick: this.scrollToResults,
         renderIcon: _ref3,
         "data-automation": "sidebar-results-button"
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Navigate to results'))), /*#__PURE__*/React.createElement(PresentationContent, null, /*#__PURE__*/React.createElement("span", {
-        className: styles.description,
+      }, jsx(ScreenReaderContent, null, t('Navigate to results'))), jsx(PresentationContent, null, jsx("span", {
+        css: this.props.styles.sidebar.description,
         "data-automation": "sidebar-results-text",
         onClick: this.scrollToResults,
         tabIndex: "-1"
@@ -204,20 +196,20 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
   }, {
     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 ? IconMoveStartLine : IconMoveEndLine;
-      var closedClasses = classNames(styles.questionNavigatorPadding, _defineProperty({}, styles.sidebarClosed, !this.props.sidebarOpen));
-      var iconClasses = classNames(styles.iconWrapper, _defineProperty({}, styles.sidebarClosed, !sidebarOpen));
-      return /*#__PURE__*/React.createElement("div", {
-        className: classNames(styles.headerSpacing, styles.headerBottomBorder)
-      }, /*#__PURE__*/React.createElement("div", {
-        className: closedClasses
-      }, /*#__PURE__*/React.createElement(Heading, {
+      return jsx("div", {
+        css: _objectSpread(_objectSpread({}, styles.headerSpacing), styles.headerBottomBorder)
+      }, jsx("div", {
+        css: styles.questionNavigatorPadding
+      }, jsx(Heading, {
         level: "h5",
         as: "h2"
-      }, t('Question Navigator'))), /*#__PURE__*/React.createElement("div", {
-        className: iconClasses
-      }, /*#__PURE__*/React.createElement(IconButton, {
+      }, t('Question Navigator'))), jsx("div", {
+        css: styles.iconWrapper
+      }, jsx(IconButton, {
         onClick: this.toggleSidebar,
         size: "small",
         margin: "none",
@@ -231,15 +223,15 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
   }, {
     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.createElement(Text, {
+      var pointsText = jsx(Text, {
         key: "pointsText",
         size: "small",
         weight: "bold"
@@ -249,7 +241,7 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
       var responsiveText = pointsText;
 
       if (sidebarOpen) {
-        responsiveText = /*#__PURE__*/React.createElement(Text, {
+        responsiveText = jsx(Text, {
           size: "small"
         }, t.rich('Total question points = <points/>', {
           points: function points() {
@@ -258,11 +250,11 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
         }));
       }
 
-      return /*#__PURE__*/React.createElement(View, {
+      return jsx(View, {
         borderWidth: "0 0 small 0",
         padding: "small x-small",
         textAlign: sidebarOpen ? 'start' : 'center'
-      }, /*#__PURE__*/React.createElement(AccessibleContent, {
+      }, jsx(AccessibleContent, {
         alt: t('Total question points = {totalPointsPossible}', {
           totalPointsPossible: totalPointsPossible
         })
@@ -271,38 +263,37 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
   }, {
     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 = classNames(styles.buttonWrapper, _defineProperty({}, styles.sidebarClosed, !sidebarOpen));
-      var iconClasses = classNames(styles.iconWrapper, _defineProperty({}, styles.sidebarClosed, !sidebarOpen));
-      return /*#__PURE__*/React.createElement("div", {
-        className: classNames(styles.pinnedSection, styles.headerBottomBorder)
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.headerSpacing
-      }, /*#__PURE__*/React.createElement("div", {
-        className: closedClasses
-      }, /*#__PURE__*/React.createElement(Heading, {
+      return jsx("div", {
+        css: _objectSpread(_objectSpread({}, styles.pinnedSection), styles.headerBottomBorder)
+      }, jsx("div", {
+        css: styles.headerSpacing
+      }, jsx("div", {
+        css: styles.buttonWrapper
+      }, jsx(Heading, {
         level: "h5",
         as: "h2"
-      }, t('Pinned Questions'))), /*#__PURE__*/React.createElement("div", {
-        className: iconClasses,
+      }, t('Pinned Questions'))), jsx("div", {
+        css: styles.iconWrapper,
         "aria-hidden": sidebarOpen
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, jsx(Text, {
         size: "x-small",
         "aria-label": t('Pinned Questions'),
         role: "img"
-      }, _ref4))), /*#__PURE__*/React.createElement("div", {
-        className: closedClasses
+      }, _ref4))), jsx("div", {
+        css: styles.buttonWrapper
       }, pinnedItems.map(function (pin) {
-        return /*#__PURE__*/React.createElement(Pin, {
+        return jsx(Pin, {
           key: pin.sessionItemId,
           scrollToItem: scrollToItem,
           position: pin.position,
@@ -313,17 +304,18 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
   }, {
     key: "render",
     value: function render() {
-      var sidebarClassList = classNames(styles.sidebar, _defineProperty({}, styles.sidebarIsOpen, this.props.sidebarOpen));
-      return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement("div", {
-        className: styles.commonContainer,
+      return jsx(View, null, jsx("div", {
+        css: this.props.styles.commonContainer,
         id: "sidebar-wrapper",
         tabIndex: "-1"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: sidebarClassList,
+      }, jsx("div", {
+        css: this.props.styles.sidebar,
         onTransitionEnd: this.handleTransitionEnd,
         "data-automation": this.props.sidebarOpen ? 'sdk-sidebar-open' : 'sdk-sidebar-closed'
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.sidebarWrapper,
+      }, jsx(Global, {
+        styles: this.props.styles.globalStyles
+      }), 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
@@ -331,8 +323,8 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
         ,
         onClick: noop,
         id: SIDEBAR_NAV_ID
-      }, this.renderSidebarHeader(), this.renderTotalPointsPossible(), this.renderPinned(), this.renderTitle(), this.renderInstructions(), this.renderResults(), /*#__PURE__*/React.createElement("div", {
-        className: styles.sidebarContent
+      }, this.renderSidebarHeader(), this.renderTotalPointsPossible(), this.renderPinned(), this.renderTitle(), this.renderInstructions(), this.renderResults(), jsx("div", {
+        css: this.props.styles.sidebarContent
       }, this.props.children)))));
     }
   }]);
@@ -354,7 +346,9 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
   toggleSidebar: PropTypes.func.isRequired,
   screenreaderNotification: PropTypes.func.isRequired,
   totalPointsPossible: PropTypes.number,
-  shouldCloseOnBlur: PropTypes.bool
+  shouldCloseOnBlur: PropTypes.bool,
+  makeStyles: PropTypes.func,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   grading: false,
   taking: false,

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

@@ -0,0 +1,117 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+
+var generateStyle = function generateStyle(componentTheme, props) {
+  var _commonContainer;
+
+  var mq = "@media screen and (".concat(componentTheme.phoneBreakPoint, ")");
+  var mp = '@media print';
+  return {
+    sidebar: _objectSpread(_objectSpread(_defineProperty({
+      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 && _defineProperty({
+      width: componentTheme.sidebarWidthOpen,
+      opacity: 1
+    }, mq, {
+      width: '100vw',
+      maxWidth: '100vw'
+    })), {}, {
+      description: _objectSpread({
+        color: componentTheme.descriptionFontColor,
+        display: 'none',
+        fontSize: componentTheme.descriptionFontSize
+      }, props.sidebarOpen && {
+        cursor: 'pointer',
+        display: 'inline-block'
+      }),
+      actionableInfo: _objectSpread({
+        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: _objectSpread({
+      marginLeft: 'auto'
+    }, !props.sidebarOpen && {
+      display: 'block',
+      margin: 'auto'
+    }),
+    pinnedSection: {
+      width: '100%',
+      backgroundColor: componentTheme.pinnedSectionBackgroundColor,
+      headerSpacing: {
+        flexGrow: 1
+      }
+    },
+    questionNavigatorPadding: _objectSpread({
+      paddingTop: componentTheme.questionNavigatorPadding
+    }, !props.sidebarOpen && {
+      display: 'none'
+    }),
+    buttonWrapper: _objectSpread({
+      button: {
+        paddingLeft: componentTheme.pinnedQuestionSpacing,
+        paddingBottom: componentTheme.pinnedQuestionSpacing,
+        fontSize: componentTheme.pinnedQuestionFontSize,
+        display: 'block'
+      }
+    }, !props.sidebarOpen && {
+      display: 'none'
+    }),
+    commonContainer: (_commonContainer = {
+      height: '100%'
+    }, _defineProperty(_commonContainer, mq, {
+      position: 'relative'
+    }), _defineProperty(_commonContainer, mp, {
+      display: 'none'
+    }), _commonContainer)
+  };
+};
+
+export default generateStyle;

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

@@ -1,5 +1,6 @@
 import { alpha } from '@instructure/ui-color-utils';
-export default function generator(_ref) {
+
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
       spacing = _ref.spacing,
       typography = _ref.typography,
@@ -34,11 +35,6 @@ export default function generator(_ref) {
     focusBorderColor: colors.brand,
     focusOutlineColor: alpha(colors.brand, 50)
   };
-}
+};
 
-generator.canvas = function (variables) {
-  return {
-    focusBorderColor: variables['ic-brand-primary'],
-    focusOutlineColor: alpha(variables['ic-brand-primary'], 50)
-  };
-};
+export default generateComponentTheme;