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

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,

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

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

package/lib/building/components/layout/Sidebar/Stimulus/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/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.BuildingSidebar = 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,15 +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 _classnames3 = _interopRequireDefault(require("classnames"));
-
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _index = _interopRequireDefault(require("./SidebarItem/index.js"));
 
@@ -39,6 +33,8 @@ var _generateDisplayPositions = _interopRequireDefault(require("../../../../comm
 
 var _quizInteractions = require("@instructure/quiz-interactions");
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _quizCommon = require("@instructure/quiz-common");
@@ -47,19 +43,7 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'bAyez',
-  template: function template(theme) {
-    return "\n\n.bAyez_eUtI{padding:".concat(theme.bottomPadding || 'inherit', "}\n\n.bAyez_bBLs,.bAyez_fYKY .bAyez_blUq,.bAyez_eNNp .bAyez_eyTz{display:none}");
-  },
-  'bottomPadding': 'bAyez_eUtI',
-  'hide': 'bAyez_bBLs',
-  'sidebarIsClosed': 'bAyez_fYKY',
-  'openItems': 'bAyez_blUq',
-  'sidebarIsOpen': 'bAyez_eNNp',
-  'closedItems': 'bAyez_eyTz'
-};
-var BuildingSidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var BuildingSidebar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(BuildingSidebar, _Component);
 
   var _super = (0, _createSuper2.default)(BuildingSidebar);
@@ -84,7 +68,7 @@ var BuildingSidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
     _this.renderItem = function () {
       var isOver = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : _this.props.isOver;
       return function (quizEntry, displayPosition, sidebarIsOpen) {
-        return /*#__PURE__*/_react.default.createElement(_index.default, {
+        return (0, _emotion.jsx)(_index.default, {
           key: _this.setKey(quizEntry.id),
           ref: _this.setRef(quizEntry.id),
           inStimulus: quizEntry.isInStimulus,
@@ -122,6 +106,16 @@ var BuildingSidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   }
 
   (0, _createClass2.default)(BuildingSidebar, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.makeStyles();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles();
+    }
+  }, {
     key: "getItemBody",
     value: function getItemBody(quizEntry) {
       switch (quizEntry.entryType) {
@@ -176,7 +170,7 @@ var BuildingSidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   }, {
     key: "renderStimulus",
     value: function renderStimulus(quizEntry, displayPosition, sidebarIsOpen) {
-      return /*#__PURE__*/_react.default.createElement(_index2.default, {
+      return (0, _emotion.jsx)(_index2.default, {
         key: this.setKey(quizEntry.id),
         ref: this.setRef(quizEntry.id),
         displayPosition: displayPosition,
@@ -217,33 +211,36 @@ var BuildingSidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   }, {
     key: "render",
     value: function render() {
-      var _classnames2;
-
-      var dndClasses = (0, _classnames3.default)(styles.bottomPadding, (0, _defineProperty2.default)({}, styles.hide, !this.props.isOver));
-      var sidebarClasses = (0, _classnames3.default)((_classnames2 = {}, (0, _defineProperty2.default)(_classnames2, styles.sidebarIsOpen, this.props.sidebarOpen), (0, _defineProperty2.default)(_classnames2, styles.sidebarIsClosed, !this.props.sidebarOpen), _classnames2));
+      var openClass = !this.props.sidebarOpen ? 'sidebarIsClosed' : 'sidebarIsOpen';
+      var isOverClass = !this.props.isOver ? 'hide' : '';
       return this.props.connectDropTarget(
-      /*#__PURE__*/
-
       /* React DnD requires a native element node like our div below */
-      _react.default.createElement("div", {
-        className: sidebarClasses
-      }, /*#__PURE__*/_react.default.createElement(_index3.default, {
+      (0, _emotion.jsx)("div", {
+        style: {
+          display: 'flex'
+        }
+      }, (0, _emotion.jsx)("div", {
+        className: openClass
+      }, (0, _emotion.jsx)(_index3.default, {
         role: this.props.role,
         scrollToItem: this.scrollToItem,
         sidebarOpen: this.props.sidebarOpen,
         toggleSidebar: this.props.toggleSidebar,
         screenreaderNotification: this.props.screenreaderNotification,
         totalPointsPossible: this.props.totalPointsPossible
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _emotion.jsx)("div", {
         ref: this.storeStartQuizEntriesRef
-      }), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.closedItems
-      }, this.renderSidebarItems(false)), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.openItems
-      }, this.renderSidebarItems(true)), /*#__PURE__*/_react.default.createElement("div", {
+      }), (0, _emotion.jsx)("div", {
+        className: "closedItems",
+        css: this.props.styles.closedItems
+      }, this.renderSidebarItems(false)), (0, _emotion.jsx)("div", {
+        className: "openItems",
+        css: this.props.styles.openItems
+      }, this.renderSidebarItems(true)), (0, _emotion.jsx)("div", {
         ref: this.storeEndQuizEntriesRef,
-        className: dndClasses
-      }))));
+        className: isOverClass,
+        css: this.props.styles.bottomPadding
+      })))));
     }
   }]);
   BuildingSidebar.displayName = "BuildingSidebar";
@@ -257,7 +254,9 @@ var BuildingSidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   sidebarOpen: _propTypes.default.bool.isRequired,
   toggleSidebar: _propTypes.default.func.isRequired,
   screenreaderNotification: _propTypes.default.func.isRequired,
-  totalPointsPossible: _propTypes.default.number.isRequired
+  totalPointsPossible: _propTypes.default.number.isRequired,
+  styles: _propTypes.default.object,
+  makeStyles: _propTypes.default.func
 }, _class2.defaultProps = {
   isOver: false,
   role: 'navigation'

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

@@ -0,0 +1,38 @@
+"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 {
+    /* this class is to allow space for dragging an item
+    below a stimulus at the bottom of a long quiz */
+    bottomPadding: (0, _objectSpread2.default)({
+      padding: componentTheme.bottomPadding
+    }, !props.isOver && {
+      display: 'none'
+    }),
+    hide: {
+      display: 'none'
+    },
+    closedItems: (0, _objectSpread2.default)({
+      display: 'block'
+    }, props.sidebarOpen && {
+      display: 'none'
+    }),
+    openItems: (0, _objectSpread2.default)({
+      display: 'block'
+    }, !props.sidebarOpen && {
+      display: 'none'
+    })
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

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

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