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

package/es/common/components/shared/InteractionTypes/presenter.js

@@ -5,12 +5,13 @@ 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 ImmutablePropTypes from 'react-immutable-proptypes';
 import partial from 'lodash/partial';
 import { List } from 'immutable';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import { Button } from '@instructure/ui-buttons';
 import { Text } from '@instructure/ui-text';
 import { IconPlusLine } from '@instructure/ui-icons';
@@ -18,17 +19,9 @@ import { Grid } from '@instructure/ui-grid';
 import { PresentationContent } from '@instructure/ui-a11y-content';
 import { interactionTypeMetadata } from "../../../util/interactionTypeMetadata.js";
 import t from '@instructure/quiz-i18n/es/format-message';
-var styles = {
-  componentId: 'bLlES',
-  template: function template(theme) {
-    return "\n\n.bLlES_cvRx{padding-right:0.25rem}\n\n.bLlES_dsOT{width:10rem}\n\n.bLlES_cFIX{border-top:".concat(theme.stimulusDividerBorderWidth || 'inherit', " solid ").concat(theme.stimulusDividerBorderColor || 'inherit', ";margin-bottom:").concat(theme.stimulusDividerMarginBottom || 'inherit', ";margin-top:").concat(theme.stimulusDividerMarginTop || 'inherit', "}");
-  },
-  'iconWrapper': 'bLlES_cvRx',
-  'textWrapper': 'bLlES_dsOT',
-  'stimulusDivider': 'bLlES_cFIX'
-};
-import theme from "./theme.js";
-export var InteractionTypes = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var InteractionTypes = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(InteractionTypes, _Component);
 
   var _super = _createSuper(InteractionTypes);
@@ -64,7 +57,7 @@ export var InteractionTypes = (_dec = themeable(theme, styles), _dec(_class = (_
         automation = "sdk-interaction-button-".concat(intType.slug);
       }
 
-      return /*#__PURE__*/React.createElement(Button, {
+      return jsx(Button, {
         key: intType.slug,
         margin: "0 0 xx-small",
         onClick: onClick,
@@ -72,20 +65,20 @@ export var InteractionTypes = (_dec = themeable(theme, styles), _dec(_class = (_
         "data-automation": automation,
         display: "block",
         textAlign: "start"
-      }, /*#__PURE__*/React.createElement(Grid, {
+      }, jsx(Grid, {
         colSpacing: "none",
         vAlign: "middle"
-      }, /*#__PURE__*/React.createElement(Grid.Row, {
+      }, jsx(Grid.Row, {
         key: "iconrow"
-      }, /*#__PURE__*/React.createElement(Grid.Col, {
+      }, jsx(Grid.Col, {
         width: "auto"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.iconWrapper
-      }, /*#__PURE__*/React.createElement(Icon, {
+      }, jsx("div", {
+        css: _this.props.styles.iconWrapper
+      }, jsx(Icon, {
         title: title
-      }))), /*#__PURE__*/React.createElement(Grid.Col, null, /*#__PURE__*/React.createElement("div", {
-        className: styles.textWrapper
-      }, /*#__PURE__*/React.createElement(PresentationContent, null, /*#__PURE__*/React.createElement(Text, {
+      }))), jsx(Grid.Col, null, jsx("div", {
+        css: _this.props.styles.textWrapper
+      }, jsx(PresentationContent, null, jsx(Text, {
         color: "primary"
       }, name)))))));
     };
@@ -103,7 +96,7 @@ export var InteractionTypes = (_dec = themeable(theme, styles), _dec(_class = (_
           buttons[Math.floor(i / _this.props.columns)] = [];
         }
 
-        buttons[Math.floor(i / _this.props.columns)].push( /*#__PURE__*/React.createElement(Grid.Col, {
+        buttons[Math.floor(i / _this.props.columns)].push(jsx(Grid.Col, {
           width: 12 / _this.props.columns,
           key: intType.slug
         }, button));
@@ -112,7 +105,7 @@ export var InteractionTypes = (_dec = themeable(theme, styles), _dec(_class = (_
         var key = gridCols.map(function (gridCol) {
           return gridCol.key;
         }).join('-');
-        return /*#__PURE__*/React.createElement(Grid.Row, {
+        return jsx(Grid.Row, {
           key: key
         }, gridCols);
       });
@@ -120,16 +113,16 @@ export var InteractionTypes = (_dec = themeable(theme, styles), _dec(_class = (_
 
     _this.renderStimulusTypeButton = function () {
       if (_this.props.allowStimulusCreation) {
-        var dividerRow = /*#__PURE__*/React.createElement(Grid.Row, {
+        var dividerRow = jsx(Grid.Row, {
           key: "divider"
-        }, /*#__PURE__*/React.createElement(Grid.Col, {
+        }, jsx(Grid.Col, {
           key: "divider"
-        }, /*#__PURE__*/React.createElement("div", {
-          className: styles.stimulusDivider
+        }, jsx("div", {
+          css: _this.props.styles.stimulusDivider
         })));
-        var stimulusRow = /*#__PURE__*/React.createElement(Grid.Row, {
+        var stimulusRow = jsx(Grid.Row, {
           key: "stimulus"
-        }, /*#__PURE__*/React.createElement(Grid.Col, {
+        }, jsx(Grid.Col, {
           width: 12 / _this.props.columns,
           key: "stimulus"
         }, _this.renderInteractionTypeButton({
@@ -146,7 +139,7 @@ export var InteractionTypes = (_dec = themeable(theme, styles), _dec(_class = (_
   _createClass(InteractionTypes, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(Grid, {
+      return jsx(Grid, {
         rowSpacing: "none",
         colSpacing: "small",
         startAt: "medium"
@@ -161,7 +154,8 @@ export var InteractionTypes = (_dec = themeable(theme, styles), _dec(_class = (_
   addItem: PropTypes.func.isRequired,
   addStimulus: PropTypes.func.isRequired,
   allowStimulusCreation: PropTypes.bool,
-  types: ImmutablePropTypes.list
+  types: ImmutablePropTypes.list,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   allowStimulusCreation: true,
   types: List()

package/es/common/components/shared/InteractionTypes/styles.js

@@ -0,0 +1,17 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    iconWrapper: {
+      paddingRight: '0.25rem'
+    },
+    textWrapper: {
+      width: '10rem'
+    },
+    stimulusDivider: {
+      borderTop: "".concat(componentTheme.stimulusDividerBorderWidth, " solid ").concat(componentTheme.stimulusDividerBorderColor),
+      marginTop: componentTheme.stimulusDividerMarginTop,
+      marginBottom: componentTheme.stimulusDividerMarginBottom
+    }
+  };
+};
+
+export default generateStyle;

package/es/common/components/shared/InteractionTypes/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
       borders = _ref.borders,
       spacing = _ref.spacing;
@@ -8,4 +8,6 @@ export default function generator(_ref) {
     stimulusDividerMarginTop: spacing.xSmall,
     stimulusDividerMarginBottom: spacing.small
   };
-}
+};
+
+export default generateComponentTheme;

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

@@ -1,4 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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,35 +5,49 @@ 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';
+import { withStyle, jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
-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'
-};
-import theme from "./theme.js";
-export var DragAndDropZone = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var DragAndDropZone = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(DragAndDropZone, _Component);
 
   var _super = _createSuper(DragAndDropZone);
 
   function DragAndDropZone() {
+    var _this;
+
     _classCallCheck(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;
   }
 
   _createClass(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,
@@ -69,17 +82,12 @@ export var DragAndDropZone = (_dec = themeable(theme, styles), _dec(_class = (_t
   }, {
     key: "render",
     value: function render() {
-      var _classnames;
-
-      var _this$props2 = this.props,
-          inSidebar = _this$props2.inSidebar,
-          inStimulus = _this$props2.inStimulus;
-      var style = classnames((_classnames = {}, _defineProperty(_classnames, styles.DnDZone, !inSidebar), _defineProperty(_classnames, styles.sidebarDnDZone, inSidebar), _defineProperty(_classnames, styles.inSidebarStimulus, inSidebar && inStimulus), _classnames));
-      var wrapper = classnames(styles.wrapper, _defineProperty({}, styles.hide, !this.shouldRender()));
-      return /*#__PURE__*/React.createElement("div", {
-        className: wrapper
-      }, /*#__PURE__*/React.createElement("div", {
-        className: style
+      var wrapperClass = !this.shouldRender() ? 'wrapper hide' : 'wrapper';
+      return jsx("div", {
+        className: wrapperClass,
+        css: this.props.styles.wrapper
+      }, jsx("div", {
+        css: this.props.styles.dropZoneStyle
       }, t('Drop Question Here')));
     }
   }]);
@@ -93,7 +101,9 @@ export var DragAndDropZone = (_dec = themeable(theme, styles), _dec(_class = (_t
   inSidebar: PropTypes.bool,
   inStimulus: PropTypes.bool,
   location: PropTypes.oneOf(['above', 'below', 'in']).isRequired,
-  sidebarOpen: PropTypes.bool
+  sidebarOpen: PropTypes.bool,
+  makeStyles: PropTypes.func,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   draggingAboveHalf: false,
   draggingOver: false,

package/es/common/components/shared/drag_and_drop/DragAndDropZone/styles.js

@@ -0,0 +1,41 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+
+var generateStyle = function generateStyle(componentTheme, props, state) {
+  return {
+    dropZoneStyle: _objectSpread(_objectSpread(_objectSpread({}, !props.inSidebar && {
+      border: "".concat(componentTheme.DnDZoneBorderWidth, " dashed ").concat(componentTheme.DnDZoneBorderColor),
+      backgroundColor: componentTheme.DnDZoneBackgroundColor,
+      padding: componentTheme.DnDZonePadding,
+      display: 'flex',
+      justifyContent: 'center',
+      width: '100%'
+    }), props.inSidebar && {
+      border: "".concat(componentTheme.sidebarDnDZoneBorderWidth, " dashed ").concat(componentTheme.sidebarDnDZoneBorderColor),
+      backgroundColor: componentTheme.sidebarDnDZoneBackgroundColor,
+      padding: componentTheme.sidebarDnDZonePadding,
+      margin: componentTheme.sidebarDnDZoneMargin,
+      color: componentTheme.sidebarDnDZoneColor,
+      justifyContent: 'center',
+      textAlign: 'center',
+      width: '100%',
+      '&.inSidebarStimulus': {
+        marginLeft: '10%',
+        width: '90%'
+      }
+    }), props.inSidebar && props.inStimulus && {
+      marginLeft: '10%',
+      width: '90%'
+    }),
+    wrapper: _objectSpread({
+      justifyContent: 'center',
+      display: 'flex',
+      flex: '1 0 100%',
+      width: '100%'
+    }, !state.toRender && {
+      display: 'none',
+      width: '100%'
+    })
+  };
+};
+
+export default generateStyle;

package/es/common/components/shared/drag_and_drop/DragAndDropZone/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       colors = _ref.colors,
       borders = _ref.borders;
@@ -15,4 +15,6 @@ export default function generator(_ref) {
     sidebarDnDZoneMargin: spacing.xSmall,
     sidebarDnDZoneColor: colors.licorice
   };
-}
+};
+
+export default generateComponentTheme;

package/es/common/components/shared/file_selector/FileSelector.js

@@ -6,20 +6,15 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
 import { List } from 'immutable';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import Dropzone from 'react-dropzone';
-import { themeable } from '@instructure/ui-themeable';
-var styles = {
-  componentId: 'flcWS',
-  template: function template(theme) {
-    return "\n\n.flcWS_emRR{background-color:".concat(theme.dropzoneBackgroundColor || 'inherit', ";border:").concat(theme.dropzoneBorderWidth || 'inherit', " dashed ").concat(theme.dropzoneBorderColor || 'inherit', ";cursor:pointer;padding:").concat(theme.dropzonePadding || 'inherit', "}");
-  },
-  'dropzone': 'flcWS_emRR'
-};
-import theme from "./theme.js";
-export var FileSelector = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import { withStyle, jsx } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var FileSelector = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(FileSelector, _Component);
 
   var _super = _createSuper(FileSelector);
@@ -47,8 +42,9 @@ export var FileSelector = (_dec = themeable(theme, styles), _dec(_class = (_temp
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Dropzone, {
-        className: styles.dropzone,
+      return jsx("div", null, jsx(Dropzone, {
+        "data-testid": "file-dropzone",
+        css: this.props.styles.dropzone,
         multiple: this.props.multiple,
         onDrop: this.onDrop,
         accept: this.props.acceptAttribute
@@ -62,7 +58,8 @@ export var FileSelector = (_dec = themeable(theme, styles), _dec(_class = (_temp
   acceptAttribute: PropTypes.string.isRequired,
   content: PropTypes.node.isRequired,
   fileHandler: PropTypes.func.isRequired,
-  multiple: PropTypes.bool
+  multiple: PropTypes.bool,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   multiple: false
 }, _temp)) || _class);

package/es/common/components/shared/file_selector/styles.js

@@ -0,0 +1,12 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    dropzone: {
+      backgroundColor: componentTheme.dropzoneBackgroundColor,
+      border: "".concat(componentTheme.dropzoneBorderWidth, " dashed ").concat(componentTheme.dropzoneBorderColor),
+      cursor: 'pointer',
+      padding: componentTheme.dropzonePadding
+    }
+  };
+};
+
+export default generateStyle;

package/es/common/components/shared/file_selector/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;
@@ -8,4 +8,6 @@ export default function generator(_ref) {
     dropzoneBorderColor: colors.ash,
     dropzonePadding: spacing.medium
   };
-}
+};
+
+export default generateComponentTheme;

package/lib/building/components/layout/Sidebar/SidebarItem/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,13 +15,13 @@ 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 _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _dragAndDropUtils = require("../../../../../common/components/shared/drag_and_drop/dragAndDropUtils.js");
 
@@ -33,18 +31,13 @@ var _index2 = _interopRequireDefault(require("../../../../../common/components/s
 
 var _index3 = _interopRequireDefault(require("../../../../../common/components/layout/sidebar/SidebarItem/index.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'beYOg',
-  template: function template(theme) {
-    return "\n\n.beYOg_cpvQ{transform:translateZ(0)}";
-  },
-  'sidebarItemWrapper': 'beYOg_cpvQ'
-};
-var BuildingSidebarItem = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var BuildingSidebarItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(BuildingSidebarItem, _Component);
 
   var _super = (0, _createSuper2.default)(BuildingSidebarItem);
@@ -67,10 +60,8 @@ var BuildingSidebarItem = (_dec = (0, _uiThemeable.themeable)(_theme.default, st
           sidebarOpen = _this$props.sidebarOpen;
 
       if (sidebarOpen) {
-        var dragHandle =
-        /*#__PURE__*/
-        // This wrapper div is necessary for drag and drop
-        _react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_index.default, {
+        var dragHandle = // This wrapper div is necessary for drag and drop
+        (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_index.default, {
           onSidebar: true,
           displayPosition: this.props.displayPosition,
           quizEntry: this.props.quizEntry,
@@ -103,11 +94,11 @@ var BuildingSidebarItem = (_dec = (0, _uiThemeable.themeable)(_theme.default, st
         draggingOver: draggingOver,
         draggingAboveHalf: draggingAboveHalf
       };
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.sidebarItemWrapper
-      }, /*#__PURE__*/_react.default.createElement(_index2.default, Object.assign({}, propsForDnDZone, {
+      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)("div", {
+        css: this.props.styles.sidebarItemWrapper
+      }, (0, _emotion.jsx)(_index2.default, Object.assign({}, propsForDnDZone, {
         location: "above"
-      })), /*#__PURE__*/_react.default.createElement(_index3.default, {
+      })), (0, _emotion.jsx)(_index3.default, {
         itemId: this.props.itemId,
         itemBody: this.props.itemBody,
         itemName: this.props.itemName,
@@ -116,9 +107,9 @@ var BuildingSidebarItem = (_dec = (0, _uiThemeable.themeable)(_theme.default, st
         pointsPossible: this.props.pointsPossible,
         quizEntry: this.props.quizEntry,
         sidebarOpen: this.props.sidebarOpen
-      }, this.renderDragHandle()), /*#__PURE__*/_react.default.createElement(_index2.default, Object.assign({}, propsForDnDZone, {
+      }, this.renderDragHandle()), (0, _emotion.jsx)(_index2.default, Object.assign({}, propsForDnDZone, {
         location: "below"
-      })));
+      }))));
     }
   }, {
     key: "render",
@@ -160,7 +151,8 @@ var BuildingSidebarItem = (_dec = (0, _uiThemeable.themeable)(_theme.default, st
   sidebarOpen: _propTypes.default.bool.isRequired,
   // Passed in by connect
   draggingOver: _propTypes.default.bool.isRequired,
-  draggingAboveHalf: _propTypes.default.bool.isRequired
+  draggingAboveHalf: _propTypes.default.bool.isRequired,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   disableDraggingOverride: false,
   inStimulus: false,

package/lib/building/components/layout/Sidebar/SidebarItem/styles.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    sidebarItemWrapper: {
+      transform: 'translate3d(0, 0, 0)'
+      /* for drag and drop preview to work */
+
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/building/components/layout/Sidebar/SidebarItem/theme.js

@@ -3,8 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-function generator() {
+var generateComponentTheme = function generateComponentTheme() {
   return {};
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/building/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,13 +15,13 @@ 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 _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _dragAndDropUtils = require("../../../../../common/components/shared/drag_and_drop/dragAndDropUtils.js");
 
@@ -33,18 +31,13 @@ var _index2 = _interopRequireDefault(require("../../../../../common/components/s
 
 var _index3 = _interopRequireDefault(require("../../../../../common/components/layout/sidebar/Stimulus/index.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'fyovm',
-  template: function template(theme) {
-    return "\n\n.fyovm_drae{transform:translateZ(0)}";
-  },
-  'sidebarStimulusWrapper': 'fyovm_drae'
-};
-var BuildingStimulus = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var BuildingStimulus = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(BuildingStimulus, _Component);
 
   var _super = (0, _createSuper2.default)(BuildingStimulus);
@@ -70,10 +63,8 @@ var BuildingStimulus = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
           sidebarOpen = _this$props2.sidebarOpen;
 
       if (sidebarOpen) {
-        var dragHandle =
-        /*#__PURE__*/
-        // This wrapper div is necessary for drag and drop
-        _react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_index.default, {
+        var dragHandle = // This wrapper div is necessary for drag and drop
+        (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_index.default, {
           disabled: this.shouldDisableDragHandle(),
           displayPosition: this.props.displayPosition,
           onSidebar: true,
@@ -94,7 +85,7 @@ var BuildingStimulus = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
   }, {
     key: "renderStimulus",
     value: function renderStimulus() {
-      return /*#__PURE__*/_react.default.createElement(_index3.default, {
+      return (0, _emotion.jsx)(_index3.default, {
         displayPosition: this.props.displayPosition,
         draggingOver: this.props.draggingOver,
         draggingAboveHalf: this.props.draggingAboveHalf,
@@ -118,15 +109,15 @@ var BuildingStimulus = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
         draggingAboveHalf: this.props.draggingAboveHalf,
         dropIntoEmptyStimulus: this.props.dropIntoEmptyStimulus
       };
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.sidebarStimulusWrapper
-      }, /*#__PURE__*/_react.default.createElement(_index2.default, Object.assign({}, propsForDnDZone, {
+      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)("div", {
+        css: this.props.styles.sidebarStimulusWrapper
+      }, (0, _emotion.jsx)(_index2.default, Object.assign({}, propsForDnDZone, {
         location: "above"
-      })), this.renderStimulus(), /*#__PURE__*/_react.default.createElement(_index2.default, Object.assign({}, propsForDnDZone, {
+      })), this.renderStimulus(), (0, _emotion.jsx)(_index2.default, Object.assign({}, propsForDnDZone, {
         location: "in"
-      })), /*#__PURE__*/_react.default.createElement(_index2.default, Object.assign({}, propsForDnDZone, {
+      })), (0, _emotion.jsx)(_index2.default, Object.assign({}, propsForDnDZone, {
         location: "below"
-      })));
+      }))));
     }
   }, {
     key: "render",
@@ -168,7 +159,8 @@ var BuildingStimulus = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
   // Passed in by connect
   draggingAboveHalf: _propTypes.default.bool.isRequired,
   draggingOver: _propTypes.default.bool.isRequired,
-  dropIntoEmptyStimulus: _propTypes.default.bool
+  dropIntoEmptyStimulus: _propTypes.default.bool,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   draggingAboveHalf: false,
   dropIntoEmptyStimulus: false,