@instructure/quiz-core 20.10.1-rc.0 → 20.10.1-rc.2

package/es/common/components/shared/functionality/componentWithOutsideClickEmotion.js

@@ -0,0 +1,85 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import ReactDOM from 'react-dom';
+import debounce from 'lodash/debounce';
+import reduxStore from "../../../../reduxStore.js";
+import React from 'react'; // ======================================================
+// this component extends another component and will run
+// the 'clickedOutside' function defined on that component
+// if users click outside of it
+// clickedOutside: called when the user clicks outside node
+// ignoreClickOutsideIf: if returns true then do not run
+// the clickedOutside callback
+// ======================================================
+
+var wrapWithOutsideClickEmotion = function wrapWithOutsideClickEmotion(ComposedComponent) {
+  return /*#__PURE__*/function (_React$Component) {
+    _inherits(wrappedWithOutsideClick, _React$Component);
+
+    var _super = _createSuper(wrappedWithOutsideClick);
+
+    function wrappedWithOutsideClick(props) {
+      var _this;
+
+      _classCallCheck(this, wrappedWithOutsideClick);
+
+      _this = _super.call(this, props);
+      _this.checkForOutsideClick = _this.checkForOutsideClick.bind(_assertThisInitialized(_this));
+      return _this;
+    }
+
+    _createClass(wrappedWithOutsideClick, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        this.mouseDownEventCb = debounce(this.checkForOutsideClick, 300, {
+          leading: true,
+          trailing: false
+        });
+        document.addEventListener('click', this.mouseDownEventCb, true);
+      }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        document.removeEventListener('click', this.mouseDownEventCb, true);
+      }
+    }, {
+      key: "checkcomponentRef",
+      value: function checkcomponentRef() {
+        return this.composedComponentRef && this.composedComponentRef.current;
+      }
+    }, {
+      key: "checkForOutsideClick",
+      value: function checkForOutsideClick(e) {
+        var isModalOpen = reduxStore.getAppState().getIn(['modal', 'isOpen']);
+
+        if (this.checkcomponentRef() && this.composedComponentRef.current.ignoreClickOutsideIf && this.composedComponentRef.current.ignoreClickOutsideIf(e) || isModalOpen) {
+          return;
+        }
+
+        if (this.checkcomponentRef() && this.composedComponentRef.current.clickedOutside) {
+          var domNode = ReactDOM.findDOMNode(this);
+
+          if (!(domNode && domNode.contains(e.target))) {
+            this.composedComponentRef.current.clickedOutside(e);
+          }
+        }
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        this.composedComponentRef = /*#__PURE__*/React.createRef();
+        return /*#__PURE__*/React.createElement(ComposedComponent, Object.assign({
+          ref: this.composedComponentRef
+        }, this.props));
+      }
+    }]);
+
+    wrappedWithOutsideClick.displayName = "wrappedWithOutsideClick";
+    return wrappedWithOutsideClick;
+  }(React.Component);
+};
+
+export default wrapWithOutsideClickEmotion;

package/es/common/components/shared/overlayEmotion/index.js

@@ -62,6 +62,7 @@ var OverlayEmotion = (_dec = withStyle(generateStyle, generateComponentTheme), _
           }
         }
       }), jsx("div", {
+        className: "overlay",
         css: [this.props.styles.root, wrapperStyles],
         "data-testid": "overlay-wrapper",
         tabIndex: tabIndex,

package/lib/building/components/resources/quiz/instructions/Edit/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,18 +15,16 @@ 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 _uiButtons = require("@instructure/ui-buttons");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
-var _componentWithOutsideClick = _interopRequireDefault(require("../../../../../../common/components/shared/functionality/componentWithOutsideClick.js"));
-
 var _CustomPropTypes = _interopRequireDefault(require("../../../../../../common/util/CustomPropTypes.js"));
 
 var _ElementsForSelectors = _interopRequireDefault(require("../../../../../../common/util/ElementsForSelectors.js"));
@@ -37,24 +33,20 @@ var _quizCommon = require("@instructure/quiz-common");
 
 var _quizRce = require("@instructure/quiz-rce");
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
+var _componentWithOutsideClickEmotion = _interopRequireDefault(require("../../../../../../common/components/shared/functionality/componentWithOutsideClickEmotion.js"));
+
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'evnrd',
-  template: function template(theme) {
-    return "\n\n.evnrd_dCmx{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;min-height:4rem;padding:".concat(theme.instructionsEditWrapperPadding || 'inherit', ";position:relative;width:100%}\n\n.evnrd_cjWK{display:flex;justify-content:flex-end;margin-top:").concat(theme.footerTopMargin || 'inherit', "}");
-  },
-  'instructionsEditWrapper': 'evnrd_dCmx',
-  'footer': 'evnrd_cjWK'
-};
 // ===================================
 // once editing is toggled this div
 // is rendered & has actions that
 // allow for canceling
 // ===================================
-var QuizInstructionsEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var QuizInstructionsEdit = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(QuizInstructionsEdit, _Component);
 
   var _super = (0, _createSuper2.default)(QuizInstructionsEdit);
@@ -82,22 +74,20 @@ var QuizInstructionsEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, s
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.instructionsEditWrapper
-      }, /*#__PURE__*/_react.default.createElement(_quizRce.RichContentInput, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.instructionsEditWrapper
+      }, (0, _emotion.jsx)(_quizRce.RichContentInput, {
         label: "",
         textareaId: _quizCommon.INSTRUCTIONS_EDIT_ID,
-        wrapperClassName: styles.instructionsEdit,
-        textareaClassName: styles.instructionsEditInput,
         defaultContent: this.props.inputValue,
         onKeyUp: this.props.onInputChange,
         onChange: this.props.onInputChange
-      }), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.footer
-      }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      }), (0, _emotion.jsx)("div", {
+        css: this.props.styles.footer
+      }, (0, _emotion.jsx)(_uiButtons.Button, {
         margin: "0 x-small",
         onClick: this.props.endEditing
-      }, (0, _formatMessage.default)('Cancel')), /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      }, (0, _formatMessage.default)('Cancel')), (0, _emotion.jsx)(_uiButtons.Button, {
         color: "primary",
         onClick: this.props.saveAndPreview,
         "data-automation": "instructions-done"
@@ -111,9 +101,10 @@ var QuizInstructionsEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, s
   inputValue: _propTypes.default.string.isRequired,
   onInputChange: _propTypes.default.func.isRequired,
   saveAndPreview: _propTypes.default.func.isRequired,
-  appContainer: _CustomPropTypes.default.selectors.isRequired
+  appContainer: _CustomPropTypes.default.selectors.isRequired,
+  styles: _propTypes.default.object
 }, _temp)) || _class);
 
-var _default = (0, _componentWithOutsideClick.default)(QuizInstructionsEdit);
+var _default = (0, _componentWithOutsideClickEmotion.default)(QuizInstructionsEdit);
 
 exports.default = _default;

package/lib/building/components/resources/quiz/instructions/Edit/styles.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    instructionsEditWrapper: {
+      position: 'relative',
+      width: '100%',
+      minHeight: '4rem',
+      boxSizing: 'border-box',
+      padding: componentTheme.instructionsEditWrapperPadding,
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center'
+    },
+    footer: {
+      marginTop: componentTheme.footerTopMargin,
+      display: 'flex',
+      justifyContent: 'flex-end'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/building/components/resources/quiz/instructions/Instructions/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 _uiHeading = require("@instructure/ui-heading");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _index = _interopRequireDefault(require("../Edit/index.js"));
 
@@ -33,27 +31,19 @@ var _index2 = _interopRequireDefault(require("../Show/index.js"));
 
 var _EditButton = _interopRequireDefault(require("../../editButton/EditButton.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: 'bIKna',
-  template: function template(theme) {
-    return "\n\n.bIKna_qYhL{display:flex;justify-content:space-between}\n\n.bIKna_DlrZ{display:flex;flex-direction:column;flex-grow:1;min-width:0}\n\n.bIKna_blJt{color:".concat(theme.labelColor || 'inherit', ";font-size:").concat(theme.labelFontSize || 'inherit', ";padding:").concat(theme.labelPadding || 'inherit', ";padding-bottom:").concat(theme.labelBottomPadding || 'inherit', ";padding-left:").concat(theme.labelLeftPadding || 'inherit', "}\n\n.bIKna_UraS{align-self:flex-end;margin-right:").concat(theme.editButtonWrapperRightMargin || 'inherit', ";padding-top:").concat(theme.labelPadding || 'inherit', "}\n\n@media print{.bIKna_qYhL{display:none}}");
-  },
-  'topRow': 'bIKna_qYhL',
-  'flexContainer': 'bIKna_DlrZ',
-  'label': 'bIKna_blJt',
-  'editButtonWrapper': 'bIKna_UraS'
-};
 // ======================================
 // renders the editable quiz instructions
 // input/display component
 // ======================================
-var QuizInstructions = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var QuizInstructions = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(QuizInstructions, _Component);
 
   var _super = (0, _createSuper2.default)(QuizInstructions);
@@ -168,7 +158,7 @@ var QuizInstructions = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
         return;
       }
 
-      return /*#__PURE__*/_react.default.createElement(_index.default, {
+      return (0, _emotion.jsx)(_index.default, {
         endEditing: this.endEditing,
         inputValue: this.workingInstructions(),
         onInputChange: this.updateWorkingInstructions,
@@ -184,7 +174,7 @@ var QuizInstructions = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
       }
 
       var contentLocked = this.props.quiz.originalQuizLockedByBlueprint;
-      return /*#__PURE__*/_react.default.createElement(_index2.default, {
+      return (0, _emotion.jsx)(_index2.default, {
         ref: this.setRef('instructionsPreview'),
         instructions: this.props.quiz.instructions,
         switchOnEditing: this.props.switchOnEditing,
@@ -195,19 +185,19 @@ var QuizInstructions = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _emotion.jsx)("div", {
         tabIndex: "-1",
-        className: styles.topRow
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.flexContainer
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.label
-      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        css: this.props.styles.topRow
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.flexContainer
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.label
+      }, (0, _emotion.jsx)(_uiHeading.Heading, {
         level: "h4",
         as: "h2"
-      }, (0, _formatMessage.default)('Instructions'))), /*#__PURE__*/_react.default.createElement("div", null, this.editingRender(), this.showRender())), /*#__PURE__*/_react.default.createElement("div", null, !this.props.isEditing && !this.isContentLocked() && /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.editButtonWrapper
-      }, /*#__PURE__*/_react.default.createElement(_EditButton.default, {
+      }, (0, _formatMessage.default)('Instructions'))), (0, _emotion.jsx)("div", null, this.editingRender(), this.showRender())), (0, _emotion.jsx)("div", null, !this.props.isEditing && !this.isContentLocked() && (0, _emotion.jsx)("div", {
+        css: this.props.styles.editButtonWrapper
+      }, (0, _emotion.jsx)(_EditButton.default, {
         screenreaderText: (0, _formatMessage.default)('Edit Instructions'),
         scrollKey: this.props.scrollKey,
         onClick: this.toggleEditing,
@@ -229,8 +219,9 @@ var QuizInstructions = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
   scrollKey: _propTypes.default.string,
   switchOffEditing: _propTypes.default.func.isRequired,
   // Injected by makeEditable
-  switchOnEditing: _propTypes.default.func.isRequired // Injected by makeEditable
-
+  switchOnEditing: _propTypes.default.func.isRequired,
+  // Injected by makeEditable,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   scrollKey: void 0
 }, _temp)) || _class);

package/lib/building/components/resources/quiz/instructions/Instructions/styles.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var generateStyle = function generateStyle(componentTheme) {
+  var mp = '@media print';
+  return {
+    topRow: (0, _defineProperty2.default)({
+      display: 'flex',
+      justifyContent: 'space-between'
+    }, mp, {
+      display: 'none'
+    }),
+    flexContainer: {
+      display: 'flex',
+      flexDirection: 'column',
+      flexGrow: '1',
+      minWidth: '0'
+    },
+    label: {
+      padding: componentTheme.labelPadding,
+      paddingLeft: componentTheme.labelLeftPadding,
+      paddingBottom: componentTheme.labelBottomPadding,
+      fontSize: componentTheme.labelFontSize,
+      color: componentTheme.labelColor
+    },
+    editButtonWrapper: {
+      alignSelf: 'flex-end',
+      marginRight: componentTheme.editButtonWrapperRightMargin,
+      paddingTop: componentTheme.labelPadding
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/building/components/resources/quiz/instructions/Show/index.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,38 +15,32 @@ 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 _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _quizRce = require("@instructure/quiz-rce");
 
-var _Overlay = _interopRequireDefault(require("../../../../../../common/components/shared/overlay/Overlay.js"));
+var _index = _interopRequireDefault(require("../../../../../../common/components/shared/overlayEmotion/index.js"));
 
 var _makeScrollable = _interopRequireDefault(require("../../../../../../common/components/shared/functionality/makeScrollable.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: 'cCwUt',
-  template: function template(theme) {
-    return "\n\n.cCwUt_edzr{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;min-height:4rem;padding:".concat(theme.instructionsShowWrapperPadding || 'inherit', ";position:relative;width:100%}\n\n.cCwUt_espM{font-size:").concat(theme.instructionsShowTextFontSize || 'inherit', ";overflow:hidden;white-space:normal}");
-  },
-  'instructionsShowWrapper': 'cCwUt_edzr',
-  'instructionsShowText': 'cCwUt_espM'
-};
 // ==========================================
 // this component shows the quiz instructions
 // has events that allow for toggling
 // editing and hover which shows an overlay
 // ==========================================
-var QuizInstructionsShow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var QuizInstructionsShow = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(QuizInstructionsShow, _Component);
 
   var _super = (0, _createSuper2.default)(QuizInstructionsShow);
@@ -74,17 +66,17 @@ var QuizInstructionsShow = (_dec = (0, _uiThemeable.themeable)(_theme.default, s
   (0, _createClass2.default)(QuizInstructionsShow, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement("span", {
+      return (0, _emotion.jsx)("span", {
         "data-automation": "sdk-quiz-instructions-show-wrapper"
-      }, /*#__PURE__*/_react.default.createElement(_Overlay.default, {
-        wrapperClassName: styles.instructionsShowWrapper,
+      }, (0, _emotion.jsx)(_index.default, {
+        wrapperStyles: this.props.styles.instructionsShowWrapper,
         onClick: this.switchOnEditing,
         tabIndex: "-1",
         hideOverlay: this.props.contentLocked
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _emotion.jsx)("div", {
         "data-automation": "instructions-show-text"
-      }, /*#__PURE__*/_react.default.createElement(_quizRce.RichContentRenderer, {
-        customStyles: styles.instructionsShowText,
+      }, (0, _emotion.jsx)(_quizRce.RichContentRendererEmotion, {
+        customStyles: this.props.styles.instructionsShowText,
         content: this.props.instructions || (0, _formatMessage.default)('Add Instructions...')
       }))));
     }
@@ -94,7 +86,8 @@ var QuizInstructionsShow = (_dec = (0, _uiThemeable.themeable)(_theme.default, s
 }(_react.Component), _class2.propTypes = {
   instructions: _propTypes.default.string,
   switchOnEditing: _propTypes.default.func.isRequired,
-  contentLocked: _propTypes.default.bool
+  contentLocked: _propTypes.default.bool,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   contentLocked: false,
   instructions: null

package/lib/building/components/resources/quiz/instructions/Show/styles.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    instructionsShowWrapper: {
+      position: 'relative',
+      width: '100%',
+      minHeight: '4rem',
+      boxSizing: 'border-box',
+      padding: componentTheme.instructionsShowWrapperPadding,
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center'
+    },
+    instructionsShowText: {
+      label: 'instructionsShowText',
+      whiteSpace: 'normal',
+      overflow: 'hidden',
+      fontSize: componentTheme.instructionsShowTextFontSize
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/building/components/resources/quiz/title/Show/index.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,38 +15,33 @@ 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 _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _uiTruncateText = require("@instructure/ui-truncate-text");
 
 var _uiText = require("@instructure/ui-text");
 
-var _Overlay = _interopRequireDefault(require("../../../../../../common/components/shared/overlay/Overlay.js"));
+var _index = _interopRequireDefault(require("../../../../../../common/components/shared/overlayEmotion/index.js"));
 
 var _makeScrollable = _interopRequireDefault(require("../../../../../../common/components/shared/functionality/makeScrollable.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'bTfJQ',
-  template: function template(theme) {
-    return "\n\n.bTfJQ_VGME{box-sizing:border-box;display:flex;flex-direction:column;height:5rem;justify-content:center;padding-left:".concat(theme.titleShowWrapperLeftPadding || 'inherit', ";position:relative;width:100%}");
-  },
-  'titleShowWrapper': 'bTfJQ_VGME'
-};
 // ====================================
 // this component shows the quiz title
 // has events that allow for toggling
 // editing and hover which shows an
 // overlay
 // ====================================
-var QuizTitleShow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var QuizTitleShow = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(QuizTitleShow, _Component);
 
   var _super = (0, _createSuper2.default)(QuizTitleShow);
@@ -74,19 +67,19 @@ var QuizTitleShow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   (0, _createClass2.default)(QuizTitleShow, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement("span", {
+      return (0, _emotion.jsx)("span", {
         "data-automation": "sdk-quiz-title-show-wrapper"
-      }, /*#__PURE__*/_react.default.createElement(_Overlay.default, {
-        wrapperClassName: styles.titleShowWrapper,
+      }, (0, _emotion.jsx)(_index.default, {
+        wrapperStyles: this.props.styles.titleShowWrapper,
         onClick: this.switchOnEditing,
         tabIndex: "-1",
         hideOverlay: this.props.contentLocked
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, (0, _emotion.jsx)(_uiText.Text, {
         color: "primary",
         size: "x-large"
-      }, /*#__PURE__*/_react.default.createElement("span", {
+      }, (0, _emotion.jsx)("span", {
         "data-automation": "sdk-quiz-title-show-title"
-      }, /*#__PURE__*/_react.default.createElement(_uiTruncateText.TruncateText, null, this.props.defaultTitle)))));
+      }, (0, _emotion.jsx)(_uiTruncateText.TruncateText, null, this.props.defaultTitle)))));
     }
   }]);
   QuizTitleShow.displayName = "QuizTitleShow";
@@ -94,7 +87,8 @@ var QuizTitleShow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
 }(_react.Component), _class2.propTypes = {
   defaultTitle: _propTypes.default.string.isRequired,
   switchOnEditing: _propTypes.default.func.isRequired,
-  contentLocked: _propTypes.default.bool
+  contentLocked: _propTypes.default.bool,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   contentLocked: false
 }, _temp)) || _class);

package/lib/building/components/resources/quiz/title/Show/styles.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    titleShowWrapper: {
+      position: 'relative',
+      width: '100%',
+      height: '5rem',
+      boxSizing: 'border-box',
+      paddingLeft: componentTheme.titleShowWrapperLeftPadding,
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/building/components/resources/quiz/title/Show/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 {
     titleShowWrapperLeftPadding: spacing.large
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;