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

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

@@ -2,15 +2,11 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.SidebarItem = 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"));
@@ -19,21 +15,19 @@ 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"));
 
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _uiA11yContent = require("@instructure/ui-a11y-content");
 
 var _uiLink = require("@instructure/ui-link");
 
 var _uiFlex = require("@instructure/ui-flex");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _index = _interopRequireDefault(require("../PositionSummary/index.js"));
 
@@ -41,28 +35,13 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
 
 var _quizRce = require("@instructure/quiz-rce");
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'cwwgG',
-  template: function template(theme) {
-    return "\n\n.cwwgG_kQJA{border-bottom:".concat(theme.bottomBorderWidth || 'inherit', " solid ").concat(theme.bottomBorderColor || 'inherit', ";border-right:").concat(theme.hoverBorderWidth || 'inherit', " solid ").concat(theme.borderColor || 'inherit', "}\n\n.cwwgG_kQJA:hover{border-right:").concat(theme.hoverBorderWidth || 'inherit', " solid ").concat(theme.hoverBorderColor || 'inherit', "}\n\n.cwwgG_cdGL{color:").concat(theme.infoHeaderColor || 'inherit', ";display:flex;font-size:").concat(theme.infoHeaderFontSize || 'inherit', "}\n\n.cwwgG_ecuB{width:60%}\n\n.cwwgG_echV{width:40%}\n\n.cwwgG_doeu{font-size:").concat(theme.numberFontSize || 'inherit', ";font-weight:").concat(theme.numberFontWeight || 'inherit', "}\n\n.cwwgG_doeu,.cwwgG_esVF{color:").concat(theme.darkTextColor || 'inherit', "}\n\n.cwwgG_esVF{font-size:").concat(theme.itemBodyFontSize || 'inherit', ";margin-top:").concat(theme.itemBodyMarginTop || 'inherit', ";overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n\n.cwwgG_fBqo{cursor:pointer;position:relative}\n\n.cwwgG_eQGE{margin:0 ").concat(theme.sidebarClosedMargin || 'inherit', ";padding:").concat(theme.sidebarClosedPadding || 'inherit', " 0;text-align:center}\n\n[dir=ltr] .cwwgG_eQGE,[dir=rtl] .cwwgG_eQGE{text-align:center}\n\n.cwwgG_csre{display:flex;justify-content:flex-end}\n\n.cwwgG_cRFW{border-bottom:none}\n\n.cwwgG_eNNp{padding:").concat(theme.sidebarIsOpenPadding || 'inherit', "}\n\n.cwwgG_eNNp.cwwgG_cRFW{margin-left:10%}\n\n.cwwgG_eNNp .cwwgG_fBqo{font-size:").concat(theme.sidebarIsOpenMainTextFontSize || 'inherit', ";margin-top:").concat(theme.mainTextPaddingTop || 'inherit', "}");
-  },
-  'sidebarItem': 'cwwgG_kQJA',
-  'infoHeader': 'cwwgG_cdGL',
-  'interactionType': 'cwwgG_ecuB',
-  'pointsPossible': 'cwwgG_echV',
-  'displayNumber': 'cwwgG_doeu',
-  'itemBody': 'cwwgG_esVF',
-  'mainText': 'cwwgG_fBqo',
-  'sidebarClosed': 'cwwgG_eQGE',
-  'pinWrapper': 'cwwgG_csre',
-  'inStimulus': 'cwwgG_cRFW',
-  'sidebarIsOpen': 'cwwgG_eNNp'
-};
-var SidebarItem = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var SidebarItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SidebarItem, _Component);
 
   var _super = (0, _createSuper2.default)(SidebarItem);
@@ -96,6 +75,19 @@ var SidebarItem = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
   }
 
   (0, _createClass2.default)(SidebarItem, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.makeStyles();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles();
+    } // ============
+    //   ACTIONS
+    // ============
+
+  }, {
     key: "getPointsText",
     // ============
     //   HELPERS
@@ -118,14 +110,14 @@ var SidebarItem = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
           sidebarOpen = _this$props.sidebarOpen;
 
       if (!sidebarOpen && quizEntry && quizEntry.sizeOfBank > 1) {
-        return /*#__PURE__*/_react.default.createElement(_index.default, {
+        return (0, _emotion.jsx)(_index.default, {
           firstPosition: position,
           lastPosition: position + quizEntry.sizeOfBank - 1
         });
       }
 
-      return /*#__PURE__*/_react.default.createElement("span", {
-        className: styles.displayNumber
+      return (0, _emotion.jsx)("span", {
+        css: this.props.styles.displayNumber
       }, displayPosition);
     }
   }, {
@@ -140,7 +132,7 @@ var SidebarItem = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
       }) : (0, _formatMessage.default)('Navigate to question at position {displayPosition}', {
         displayPosition: displayPosition
       });
-      return /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+      return (0, _emotion.jsx)(_uiLink.Link, {
         href: "#",
         size: "small",
         margin: "0 small",
@@ -149,16 +141,15 @@ var SidebarItem = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
         onClick: this.scrollToItem,
         "data-automation-item-id": itemId,
         "data-automation": "sdk-sidebar-item-button"
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+      }, (0, _emotion.jsx)(_uiA11yContent.AccessibleContent, {
         alt: screenReaderContent
       }, this.renderPosition()));
     }
   }, {
     key: "renderClosed",
     value: function renderClosed() {
-      var contentWrapperClasses = (0, _classnames.default)(styles.sidebarItem, styles.sidebarClosed, (0, _defineProperty2.default)({}, styles.inStimulus, this.props.inStimulus));
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: contentWrapperClasses
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.sidebarItem
       }, this.renderButton());
     }
   }, {
@@ -167,32 +158,34 @@ var SidebarItem = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
       var _this$props3 = this.props,
           children = _this$props3.children,
           itemName = _this$props3.itemName,
-          inStimulus = _this$props3.inStimulus,
-          pointsPossible = _this$props3.pointsPossible;
-      var contentWrapperClasses = (0, _classnames.default)(styles.sidebarItem, styles.sidebarIsOpen, (0, _defineProperty2.default)({}, styles.inStimulus, inStimulus));
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: contentWrapperClasses
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+          pointsPossible = _this$props3.pointsPossible,
+          styles = _this$props3.styles;
+      return (0, _emotion.jsx)("div", {
+        className: "sidebarIsOpen",
+        css: styles.sidebarItem
+      }, (0, _emotion.jsx)(_uiFlex.Flex, {
         justifyItems: "space-between"
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, this.renderButton()), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, null, this.renderButton()), (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         shouldGrow: true,
         shouldShrink: true,
         onClick: this.scrollToItem,
         tabIndex: "-1"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.mainText
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.infoHeader
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.interactionType
-      }, itemName), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.pointsPossible
-      }, this.getPointsText(pointsPossible || 0))), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.itemBody
-      }, /*#__PURE__*/_react.default.createElement(_quizRce.RichContentRenderer, {
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.mainText
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.infoHeader
+      }, (0, _emotion.jsx)("div", {
+        className: "interactionType",
+        css: this.props.styles.interactionType
+      }, itemName), (0, _emotion.jsx)("div", {
+        className: "pointsPossible",
+        css: this.props.styles.pointsPossible
+      }, this.getPointsText(pointsPossible || 0))), (0, _emotion.jsx)("div", {
+        css: this.props.styles.itemBody
+      }, (0, _emotion.jsx)(_quizRce.RichContentRenderer, {
         content: this.props.itemBody
-      })))), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.pinWrapper
+      })))), (0, _emotion.jsx)(_uiFlex.Flex.Item, null, (0, _emotion.jsx)("div", {
+        css: this.props.styles.pinWrapper
       }, children))));
     }
   }, {
@@ -210,6 +203,7 @@ var SidebarItem = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
   itemId: _propTypes.default.string.isRequired,
   itemBody: _propTypes.default.string,
   itemName: _propTypes.default.string.isRequired,
+  // eslint-disable-next-line react/no-unused-prop-types
   inStimulus: _propTypes.default.bool,
   isAnswered: _propTypes.default.bool,
   position: _propTypes.default.number.isRequired,
@@ -219,7 +213,9 @@ var SidebarItem = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
   // not used on Take
   sidebarOpen: _propTypes.default.bool.isRequired,
   // from connect
-  scrollToItem: _propTypes.default.func.isRequired
+  scrollToItem: _propTypes.default.func.isRequired,
+  styles: _propTypes.default.object,
+  makeStyles: _propTypes.default.func
 }, _class2.defaultProps = {
   children: null,
   inStimulus: false,

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

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var generateStyle = function generateStyle(componentTheme, props) {
+  return {
+    sidebarItem: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
+      borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.borderColor),
+      borderBottom: "".concat(componentTheme.bottomBorderWidth, " solid ").concat(componentTheme.bottomBorderColor),
+      '&:hover': {
+        borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.hoverBorderColor)
+      },
+      padding: componentTheme.sidebarIsOpenPadding
+    }, props.inStimulus && {
+      borderBottom: 'none'
+    }), props.sidebarOpen && props.inStimulus && {
+      marginLeft: '10%'
+    }), !props.sidebarOpen && {
+      padding: "".concat(componentTheme.sidebarClosedPadding, " 0"),
+      margin: "0 ".concat(componentTheme.sidebarClosedMargin),
+      textAlign: 'center'
+    }),
+    infoHeader: {
+      fontSize: componentTheme.infoHeaderFontSize,
+      display: 'flex',
+      color: componentTheme.infoHeaderColor
+    },
+    interactionType: {
+      width: '60%'
+    },
+    pointsPossible: {
+      width: '40%'
+    },
+    displayNumber: {
+      color: componentTheme.darkTextColor,
+      fontSize: componentTheme.numberFontSize,
+      fontWeight: componentTheme.numberFontWeight
+    },
+    itemBody: {
+      fontSize: componentTheme.itemBodyFontSize,
+      color: componentTheme.darkTextColor,
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      marginTop: componentTheme.itemBodyMarginTop
+    },
+    mainText: (0, _objectSpread2.default)({
+      position: 'relative',
+      cursor: 'pointer'
+    }, props.sidebarOpen && {
+      fontSize: componentTheme.sidebarIsOpenMainTextFontSize,
+      marginTop: componentTheme.mainTextPaddingTop
+    }),
+    pinWrapper: {
+      display: 'flex',
+      justifyContent: 'flex-end'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var borders = _ref.borders,
       colors = _ref.colors,
       typography = _ref.typography,
@@ -30,4 +30,7 @@ function generator(_ref) {
     sidebarIsOpenPadding: "".concat(spacing.small, " 0 ").concat(spacing.medium, " 0"),
     sidebarItemLogoFontSize: typography.fontSizeMedium
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

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

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,7 +15,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"));
 
@@ -25,7 +23,7 @@ var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-p
 
 var _uiIcons = require("@instructure/ui-icons");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _uiLink = require("@instructure/ui-link");
 
@@ -39,31 +37,22 @@ var _index2 = _interopRequireDefault(require("./Title/index.js"));
 
 var _index3 = _interopRequireDefault(require("./Summary/index.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'cqghd',
-  template: function template(theme) {
-    return "\n\n.cqghd_kQJA{border-bottom:".concat(theme.sidebarItemBorderWidth || 'inherit', " solid ").concat(theme.sidebarItemBorderColor || 'inherit', "}\n\n.cqghd_cESm{border-right:").concat(theme.hoverBorderWidth || 'inherit', " solid ").concat(theme.borderColor || 'inherit', ";padding:").concat(theme.sidebarClosedButtonPadding || 'inherit', ";text-align:center}\n\n[dir=ltr] .cqghd_cESm,[dir=rtl] .cqghd_cESm{text-align:center}\n\n.cqghd_cESm:hover{border-right:").concat(theme.hoverBorderWidth || 'inherit', " solid ").concat(theme.hoverBorderColor || 'inherit', "}\n\n.cqghd_faDl{border-right:").concat(theme.hoverBorderWidth || 'inherit', " solid ").concat(theme.borderColor || 'inherit', ";padding:").concat(theme.sidebarHeaderPadding || 'inherit', " 0}\n\n.cqghd_faDl:hover{border-right:").concat(theme.hoverBorderWidth || 'inherit', " solid ").concat(theme.hoverBorderColor || 'inherit', "}\n\n.cqghd_bTns{margin-left:5%}\n\n.cqghd_cdGL{color:").concat(theme.sidebarIsOpenInfoHeaderColor || 'inherit', ";font-size:").concat(theme.sidebarIsOpenInfoHeaderFontSize || 'inherit', ";margin-bottom:").concat(theme.sidebarIsOpenInfoHeaderMargin || 'inherit', ";padding-left:").concat(theme.sidebarIsOpenInfoHeaderPadding || 'inherit', "}");
-  },
-  'sidebarItem': 'cqghd_kQJA',
-  'sidebarItemClosedButton': 'cqghd_cESm',
-  'stimulusHeader': 'cqghd_faDl',
-  'stimulusBody': 'cqghd_bTns',
-  'infoHeader': 'cqghd_cdGL'
-};
 var DISPLAY_AS_SUMMARY_LIMIT = 5;
 exports.DISPLAY_AS_SUMMARY_LIMIT = DISPLAY_AS_SUMMARY_LIMIT;
 
-var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconTextLeftLine, {
+var _ref = (0, _emotion.jsx)(_uiIcons.IconTextLeftLine, {
   color: "primary"
 });
 
-var SidebarStimulus = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var SidebarStimulus = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SidebarStimulus, _Component);
 
   var _super = (0, _createSuper2.default)(SidebarStimulus);
@@ -93,6 +82,16 @@ var SidebarStimulus = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   }
 
   (0, _createClass2.default)(SidebarStimulus, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.makeStyles();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles();
+    }
+  }, {
     key: "renderCollection",
     value: function renderCollection() {
       if (this.props.isDragging) {
@@ -105,7 +104,7 @@ var SidebarStimulus = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
           isShowingItems = _this$props.isShowingItems,
           renderSidebarItem = _this$props.renderSidebarItem,
           sidebarOpen = _this$props.sidebarOpen;
-      return /*#__PURE__*/_react.default.createElement(_index.default, {
+      return (0, _emotion.jsx)(_index.default, {
         firstPosition: displayPosition,
         isOver: isOver,
         isShowingItems: isShowingItems,
@@ -119,23 +118,23 @@ var SidebarStimulus = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
     key: "renderButton",
     value: function renderButton() {
       var displayPosition = this.props.displayPosition;
-      return /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+      return (0, _emotion.jsx)(_uiLink.Link, {
         href: "#",
         margin: "small",
         forceButtonRole: false,
         onClick: this.scrollToItem,
         renderIcon: _ref
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Navigate to stimulus at position { displayPosition }', {
+      }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Navigate to stimulus at position { displayPosition }', {
         displayPosition: displayPosition
       })));
     }
   }, {
     key: "renderClosed",
     value: function renderClosed() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.sidebarItem
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.sidebarItemClosedButton
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.sidebarItem
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.sidebarItemClosedButton
       }, this.renderButton()), this.renderCollection());
     }
   }, {
@@ -148,24 +147,24 @@ var SidebarStimulus = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
           isShowingItems = _this$props2.isShowingItems,
           sidebarOpen = _this$props2.sidebarOpen,
           stimulus = _this$props2.stimulus;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.sidebarItem
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.stimulusHeader
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.infoHeader
-      }, (0, _formatMessage.default)('Stimulus')), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.stimulusBody
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.sidebarItem
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.stimulusHeader
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.infoHeader
+      }, (0, _formatMessage.default)('Stimulus')), (0, _emotion.jsx)("div", {
+        css: this.props.styles.stimulusBody
+      }, (0, _emotion.jsx)(_uiFlex.Flex, {
         justifyItems: "space-between"
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, this.renderButton()), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, null, this.renderButton()), (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         shouldGrow: true,
         shouldShrink: true,
         onClick: this.scrollToItem,
         tabIndex: "-1"
-      }, /*#__PURE__*/_react.default.createElement(_index2.default, {
+      }, (0, _emotion.jsx)(_index2.default, {
         title: stimulus.title
-      })), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, children)), /*#__PURE__*/_react.default.createElement(_index3.default, {
+      })), (0, _emotion.jsx)(_uiFlex.Flex.Item, null, children)), (0, _emotion.jsx)(_index3.default, {
         startPosition: displayPosition,
         isDragging: isDragging,
         isShowingItems: isShowingItems,
@@ -196,7 +195,9 @@ var SidebarStimulus = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   scrollToItem: _propTypes.default.func.isRequired,
   sidebarOpen: _propTypes.default.bool.isRequired,
   stimulus: _reactImmutableProptypes.default.record.isRequired,
-  stimulusParent: _reactImmutableProptypes.default.record.isRequired
+  stimulusParent: _reactImmutableProptypes.default.record.isRequired,
+  styles: _propTypes.default.object,
+  makeStyles: _propTypes.default.func
 }, _class2.defaultProps = {
   children: null,
   isDragging: false,

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

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    sidebarItem: {
+      borderBottom: "".concat(componentTheme.sidebarItemBorderWidth, " solid ").concat(componentTheme.sidebarItemBorderColor)
+    },
+    sidebarItemClosedButton: {
+      borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.borderColor),
+      padding: componentTheme.sidebarClosedButtonPadding,
+      textAlign: 'center',
+      '&:hover': {
+        borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.hoverBorderColor)
+      }
+    },
+    stimulusHeader: {
+      padding: "".concat(componentTheme.sidebarHeaderPadding, " 0"),
+      borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.borderColor),
+      '&:hover:': {
+        borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.hoverBorderColor)
+      }
+    },
+    stimulusBody: {
+      marginLeft: '5%'
+    },
+    infoHeader: {
+      fontSize: componentTheme.sidebarIsOpenInfoHeaderFontSize,
+      color: componentTheme.sidebarIsOpenInfoHeaderColor,
+      marginBottom: componentTheme.sidebarIsOpenInfoHeaderMargin,
+      paddingLeft: componentTheme.sidebarIsOpenInfoHeaderPadding
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
       spacing = _ref.spacing,
       borders = _ref.borders,
@@ -23,4 +23,7 @@ function generator(_ref) {
     sidebarIsOpenInfoHeaderMargin: spacing.xSmall,
     sidebarIsOpenInfoHeaderColor: colors.ash
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/common/components/shared/drag_and_drop/DragAndDropZone/index.js

@@ -2,15 +2,11 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.DragAndDropZone = 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"));
@@ -19,42 +15,56 @@ 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"));
 
-var _classnames3 = _interopRequireDefault(require("classnames"));
-
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'cSfbM',
-  template: function template(theme) {
-    return "\n\n.cSfbM_ffKt{background-color:".concat(theme.DnDZoneBackgroundColor || 'inherit', ";border:").concat(theme.DnDZoneBorderWidth || 'inherit', " dashed ").concat(theme.DnDZoneBorderColor || 'inherit', ";display:flex;padding:").concat(theme.DnDZonePadding || 'inherit', "}\n\n.cSfbM_ffKt,.cSfbM_dDZW{justify-content:center;width:100%}\n\n.cSfbM_dDZW{background-color:").concat(theme.sidebarDnDZoneBackgroundColor || 'inherit', ";border:").concat(theme.sidebarDnDZoneBorderWidth || 'inherit', " dashed ").concat(theme.sidebarDnDZoneBorderColor || 'inherit', ";color:").concat(theme.sidebarDnDZoneColor || 'inherit', ";margin:").concat(theme.sidebarDnDZoneMargin || 'inherit', ";padding:").concat(theme.sidebarDnDZonePadding || 'inherit', ";text-align:center}\n\n[dir=ltr] .cSfbM_dDZW,[dir=rtl] .cSfbM_dDZW{text-align:center}\n\n.cSfbM_dDZW.cSfbM_baAw{margin-left:10%;width:90%}\n\n.cSfbM_gasz{display:flex;flex:1 0 100%;justify-content:center;width:100%}\n\n.cSfbM_bBLs{display:none;width:100%}");
-  },
-  'DnDZone': 'cSfbM_ffKt',
-  'sidebarDnDZone': 'cSfbM_dDZW',
-  'inSidebarStimulus': 'cSfbM_baAw',
-  'wrapper': 'cSfbM_gasz',
-  'hide': 'cSfbM_bBLs'
-};
-var DragAndDropZone = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var DragAndDropZone = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(DragAndDropZone, _Component);
 
   var _super = (0, _createSuper2.default)(DragAndDropZone);
 
   function DragAndDropZone() {
+    var _this;
+
     (0, _classCallCheck2.default)(this, DragAndDropZone);
-    return _super.apply(this, arguments);
+
+    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.state = {
+      toRender: false
+    };
+    return _this;
   }
 
   (0, _createClass2.default)(DragAndDropZone, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.makeStyles({
+        toRender: this.shouldRender()
+      });
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles({
+        toRender: this.shouldRender()
+      });
+    }
+  }, {
     key: "shouldRender",
     value: function shouldRender() {
       var _this$props = this.props,
@@ -89,17 +99,12 @@ var DragAndDropZone = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   }, {
     key: "render",
     value: function render() {
-      var _classnames;
-
-      var _this$props2 = this.props,
-          inSidebar = _this$props2.inSidebar,
-          inStimulus = _this$props2.inStimulus;
-      var style = (0, _classnames3.default)((_classnames = {}, (0, _defineProperty2.default)(_classnames, styles.DnDZone, !inSidebar), (0, _defineProperty2.default)(_classnames, styles.sidebarDnDZone, inSidebar), (0, _defineProperty2.default)(_classnames, styles.inSidebarStimulus, inSidebar && inStimulus), _classnames));
-      var wrapper = (0, _classnames3.default)(styles.wrapper, (0, _defineProperty2.default)({}, styles.hide, !this.shouldRender()));
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: wrapper
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: style
+      var wrapperClass = !this.shouldRender() ? 'wrapper hide' : 'wrapper';
+      return (0, _emotion.jsx)("div", {
+        className: wrapperClass,
+        css: this.props.styles.wrapper
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.dropZoneStyle
       }, (0, _formatMessage.default)('Drop Question Here')));
     }
   }]);
@@ -112,7 +117,9 @@ var DragAndDropZone = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   inSidebar: _propTypes.default.bool,
   inStimulus: _propTypes.default.bool,
   location: _propTypes.default.oneOf(['above', 'below', 'in']).isRequired,
-  sidebarOpen: _propTypes.default.bool
+  sidebarOpen: _propTypes.default.bool,
+  makeStyles: _propTypes.default.func,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   draggingAboveHalf: false,
   draggingOver: false,