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

package/es/building/components/resources/quiz/instructions/Edit/presenter.js

@@ -5,31 +5,25 @@ 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 { Button } from '@instructure/ui-buttons';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
-import wrapWithOutsideClick from "../../../../../../common/components/shared/functionality/componentWithOutsideClick.js";
 import CustomPropTypes from "../../../../../../common/util/CustomPropTypes.js";
 import elementsForSelectors from "../../../../../../common/util/ElementsForSelectors.js";
 import { INSTRUCTIONS_EDIT_ID } from '@instructure/quiz-common';
 import { RichContentInput } from '@instructure/quiz-rce';
-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'
-};
-import theme from "./theme.js"; // ===================================
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+import wrapWithOutsideClickEmotion from "../../../../../../common/components/shared/functionality/componentWithOutsideClickEmotion.js"; // ===================================
 // once editing is toggled this div
 // is rendered & has actions that
 // allow for canceling
 // ===================================
 
-var QuizInstructionsEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var QuizInstructionsEdit = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(QuizInstructionsEdit, _Component);
 
   var _super = _createSuper(QuizInstructionsEdit);
@@ -58,22 +52,20 @@ var QuizInstructionsEdit = (_dec = themeable(theme, styles), _dec(_class = (_tem
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.instructionsEditWrapper
-      }, /*#__PURE__*/React.createElement(RichContentInput, {
+      return jsx("div", {
+        css: this.props.styles.instructionsEditWrapper
+      }, jsx(RichContentInput, {
         label: "",
         textareaId: INSTRUCTIONS_EDIT_ID,
-        wrapperClassName: styles.instructionsEdit,
-        textareaClassName: styles.instructionsEditInput,
         defaultContent: this.props.inputValue,
         onKeyUp: this.props.onInputChange,
         onChange: this.props.onInputChange
-      }), /*#__PURE__*/React.createElement("div", {
-        className: styles.footer
-      }, /*#__PURE__*/React.createElement(Button, {
+      }), jsx("div", {
+        css: this.props.styles.footer
+      }, jsx(Button, {
         margin: "0 x-small",
         onClick: this.props.endEditing
-      }, t('Cancel')), /*#__PURE__*/React.createElement(Button, {
+      }, t('Cancel')), jsx(Button, {
         color: "primary",
         onClick: this.props.saveAndPreview,
         "data-automation": "instructions-done"
@@ -88,6 +80,7 @@ var QuizInstructionsEdit = (_dec = themeable(theme, styles), _dec(_class = (_tem
   inputValue: PropTypes.string.isRequired,
   onInputChange: PropTypes.func.isRequired,
   saveAndPreview: PropTypes.func.isRequired,
-  appContainer: CustomPropTypes.selectors.isRequired
+  appContainer: CustomPropTypes.selectors.isRequired,
+  styles: PropTypes.object
 }, _temp)) || _class);
-export default wrapWithOutsideClick(QuizInstructionsEdit);
+export default wrapWithOutsideClickEmotion(QuizInstructionsEdit);

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

@@ -0,0 +1,21 @@
+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'
+    }
+  };
+};
+
+export default generateStyle;

package/es/building/components/resources/quiz/instructions/Instructions/presenter.js

@@ -5,31 +5,23 @@ 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 { Heading } from '@instructure/ui-heading';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import QuizInstructionsEdit from "../Edit/index.js";
 import QuizInstructionsShow from "../Show/index.js";
 import EditButton from "../../editButton/EditButton.js";
-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'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 import t from '@instructure/quiz-i18n/es/format-message'; // ======================================
 // renders the editable quiz instructions
 // input/display component
 // ======================================
 
-export var QuizInstructions = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var QuizInstructions = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(QuizInstructions, _Component);
 
   var _super = _createSuper(QuizInstructions);
@@ -144,7 +136,7 @@ export var QuizInstructions = (_dec = themeable(theme, styles), _dec(_class = (_
         return;
       }
 
-      return /*#__PURE__*/React.createElement(QuizInstructionsEdit, {
+      return jsx(QuizInstructionsEdit, {
         endEditing: this.endEditing,
         inputValue: this.workingInstructions(),
         onInputChange: this.updateWorkingInstructions,
@@ -160,7 +152,7 @@ export var QuizInstructions = (_dec = themeable(theme, styles), _dec(_class = (_
       }
 
       var contentLocked = this.props.quiz.originalQuizLockedByBlueprint;
-      return /*#__PURE__*/React.createElement(QuizInstructionsShow, {
+      return jsx(QuizInstructionsShow, {
         ref: this.setRef('instructionsPreview'),
         instructions: this.props.quiz.instructions,
         switchOnEditing: this.props.switchOnEditing,
@@ -171,19 +163,19 @@ export var QuizInstructions = (_dec = themeable(theme, styles), _dec(_class = (_
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         tabIndex: "-1",
-        className: styles.topRow
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.flexContainer
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.label
-      }, /*#__PURE__*/React.createElement(Heading, {
+        css: this.props.styles.topRow
+      }, jsx("div", {
+        css: this.props.styles.flexContainer
+      }, jsx("div", {
+        css: this.props.styles.label
+      }, jsx(Heading, {
         level: "h4",
         as: "h2"
-      }, t('Instructions'))), /*#__PURE__*/React.createElement("div", null, this.editingRender(), this.showRender())), /*#__PURE__*/React.createElement("div", null, !this.props.isEditing && !this.isContentLocked() && /*#__PURE__*/React.createElement("div", {
-        className: styles.editButtonWrapper
-      }, /*#__PURE__*/React.createElement(EditButton, {
+      }, t('Instructions'))), jsx("div", null, this.editingRender(), this.showRender())), jsx("div", null, !this.props.isEditing && !this.isContentLocked() && jsx("div", {
+        css: this.props.styles.editButtonWrapper
+      }, jsx(EditButton, {
         screenreaderText: t('Edit Instructions'),
         scrollKey: this.props.scrollKey,
         onClick: this.toggleEditing,
@@ -206,8 +198,9 @@ export var QuizInstructions = (_dec = themeable(theme, styles), _dec(_class = (_
   scrollKey: PropTypes.string,
   switchOffEditing: PropTypes.func.isRequired,
   // Injected by makeEditable
-  switchOnEditing: PropTypes.func.isRequired // Injected by makeEditable
-
+  switchOnEditing: PropTypes.func.isRequired,
+  // Injected by makeEditable,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   scrollKey: void 0
 }, _temp)) || _class);

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

@@ -0,0 +1,33 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+var generateStyle = function generateStyle(componentTheme) {
+  var mp = '@media print';
+  return {
+    topRow: _defineProperty({
+      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
+    }
+  };
+};
+
+export default generateStyle;

package/es/building/components/resources/quiz/instructions/Show/index.js

@@ -5,28 +5,22 @@ 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 { themeable } from '@instructure/ui-themeable';
-import { RichContentRenderer } from '@instructure/quiz-rce';
-import Overlay from "../../../../../../common/components/shared/overlay/Overlay.js";
+import { withStyle, jsx } from '@instructure/emotion';
+import { RichContentRendererEmotion } from '@instructure/quiz-rce';
+import OverlayEmotion from "../../../../../../common/components/shared/overlayEmotion/index.js";
 import makeScrollable from "../../../../../../common/components/shared/functionality/makeScrollable.js";
-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'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 import t from '@instructure/quiz-i18n/es/format-message'; // ==========================================
 // this component shows the quiz instructions
 // has events that allow for toggling
 // editing and hover which shows an overlay
 // ==========================================
 
-export var QuizInstructionsShow = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var QuizInstructionsShow = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(QuizInstructionsShow, _Component);
 
   var _super = _createSuper(QuizInstructionsShow);
@@ -52,17 +46,17 @@ export var QuizInstructionsShow = (_dec = themeable(theme, styles), _dec(_class
   _createClass(QuizInstructionsShow, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("span", {
+      return jsx("span", {
         "data-automation": "sdk-quiz-instructions-show-wrapper"
-      }, /*#__PURE__*/React.createElement(Overlay, {
-        wrapperClassName: styles.instructionsShowWrapper,
+      }, jsx(OverlayEmotion, {
+        wrapperStyles: this.props.styles.instructionsShowWrapper,
         onClick: this.switchOnEditing,
         tabIndex: "-1",
         hideOverlay: this.props.contentLocked
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         "data-automation": "instructions-show-text"
-      }, /*#__PURE__*/React.createElement(RichContentRenderer, {
-        customStyles: styles.instructionsShowText,
+      }, jsx(RichContentRendererEmotion, {
+        customStyles: this.props.styles.instructionsShowText,
         content: this.props.instructions || t('Add Instructions...')
       }))));
     }
@@ -73,7 +67,8 @@ export var QuizInstructionsShow = (_dec = themeable(theme, styles), _dec(_class
 }(Component), _class2.propTypes = {
   instructions: PropTypes.string,
   switchOnEditing: PropTypes.func.isRequired,
-  contentLocked: PropTypes.bool
+  contentLocked: PropTypes.bool,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   contentLocked: false,
   instructions: null

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

@@ -0,0 +1,22 @@
+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
+    }
+  };
+};
+
+export default generateStyle;

package/es/building/components/resources/quiz/title/Show/index.js

@@ -5,28 +5,23 @@ 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 { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import { TruncateText } from '@instructure/ui-truncate-text';
 import { Text } from '@instructure/ui-text';
-import Overlay from "../../../../../../common/components/shared/overlay/Overlay.js";
+import OverlayEmotion from "../../../../../../common/components/shared/overlayEmotion/index.js";
 import makeScrollable from "../../../../../../common/components/shared/functionality/makeScrollable.js";
-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'
-};
-import theme from "./theme.js"; // ====================================
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js"; // ====================================
 // this component shows the quiz title
 // has events that allow for toggling
 // editing and hover which shows an
 // overlay
 // ====================================
 
-export var QuizTitleShow = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var QuizTitleShow = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(QuizTitleShow, _Component);
 
   var _super = _createSuper(QuizTitleShow);
@@ -52,19 +47,19 @@ export var QuizTitleShow = (_dec = themeable(theme, styles), _dec(_class = (_tem
   _createClass(QuizTitleShow, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("span", {
+      return jsx("span", {
         "data-automation": "sdk-quiz-title-show-wrapper"
-      }, /*#__PURE__*/React.createElement(Overlay, {
-        wrapperClassName: styles.titleShowWrapper,
+      }, jsx(OverlayEmotion, {
+        wrapperStyles: this.props.styles.titleShowWrapper,
         onClick: this.switchOnEditing,
         tabIndex: "-1",
         hideOverlay: this.props.contentLocked
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, jsx(Text, {
         color: "primary",
         size: "x-large"
-      }, /*#__PURE__*/React.createElement("span", {
+      }, jsx("span", {
         "data-automation": "sdk-quiz-title-show-title"
-      }, /*#__PURE__*/React.createElement(TruncateText, null, this.props.defaultTitle)))));
+      }, jsx(TruncateText, null, this.props.defaultTitle)))));
     }
   }]);
 
@@ -73,7 +68,8 @@ export var QuizTitleShow = (_dec = themeable(theme, styles), _dec(_class = (_tem
 }(Component), _class2.propTypes = {
   defaultTitle: PropTypes.string.isRequired,
   switchOnEditing: PropTypes.func.isRequired,
-  contentLocked: PropTypes.bool
+  contentLocked: PropTypes.bool,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   contentLocked: false
 }, _temp)) || _class);

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

@@ -0,0 +1,16 @@
+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'
+    }
+  };
+};
+
+export default generateStyle;

package/es/building/components/resources/quiz/title/Show/theme.js

@@ -1,6 +1,8 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing;
   return {
     titleShowWrapperLeftPadding: spacing.large
   };
-}
+};
+
+export default generateComponentTheme;

package/es/building/components/resources/quiz/title/Title/presenter.js

@@ -5,33 +5,24 @@ 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 { Heading } from '@instructure/ui-heading';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import EditButton from "../../editButton/EditButton.js";
 import QuizTitleEdit from "../Edit/index.js";
 import QuizTitleShow from "../Show/index.js";
-var styles = {
-  componentId: 'bpmxb',
-  template: function template(theme) {
-    return "\n\n.bpmxb_qYhL{border-bottom:".concat(theme.titleShowWrapperBottomBorder || 'inherit', ";display:flex;justify-content:space-between}\n\n.bpmxb_qYhL.bpmxb_cocM{border-bottom:solid;border-color:").concat(theme.titleEditWrapperBorderColor || 'inherit', ";border-width:").concat(theme.titleEditWrapperBorderWidth || 'inherit', "}\n\n.bpmxb_DlrZ{display:flex;flex-direction:column;flex-grow:1;min-width:0}\n\n.bpmxb_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.bpmxb_UraS{align-self:flex-end;margin-right:").concat(theme.editButtonWrapperRightMargin || 'inherit', ";padding-top:").concat(theme.labelPadding || 'inherit', "}\n\n@media print{.bpmxb_qYhL{display:none}}");
-  },
-  'topRow': 'bpmxb_qYhL',
-  'editing': 'bpmxb_cocM',
-  'flexContainer': 'bpmxb_DlrZ',
-  'label': 'bpmxb_blJt',
-  'editButtonWrapper': 'bpmxb_UraS'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 import t from '@instructure/quiz-i18n/es/format-message'; // ================================
 // renders the editable quiz title
 // input/display component
 // ================================
 
-export var QuizTitlePresenter = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var QuizTitlePresenter = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(QuizTitlePresenter, _Component);
 
   var _super = _createSuper(QuizTitlePresenter);
@@ -92,10 +83,20 @@ export var QuizTitlePresenter = (_dec = themeable(theme, styles), _dec(_class =
   }
 
   _createClass(QuizTitlePresenter, [{
-    key: "quizID",
-    // ===========
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.makeStyles();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles();
+    } // ===========
     //   helpers
     // ===========
+
+  }, {
+    key: "quizID",
     value: function quizID() {
       return this.props.quiz.id;
     }
@@ -132,7 +133,7 @@ export var QuizTitlePresenter = (_dec = themeable(theme, styles), _dec(_class =
     // ===============
     value: function renderEdit() {
       var quizTitleEditKey = 'quiz_title_edit';
-      return /*#__PURE__*/React.createElement(QuizTitleEdit, {
+      return jsx(QuizTitleEdit, {
         isValid: this.isValid(),
         showError: partial(this.props.showError, quizTitleEditKey),
         hideError: partial(this.props.hideError, quizTitleEditKey),
@@ -146,7 +147,7 @@ export var QuizTitlePresenter = (_dec = themeable(theme, styles), _dec(_class =
   }, {
     key: "renderShow",
     value: function renderShow() {
-      return /*#__PURE__*/React.createElement(QuizTitleShow, {
+      return jsx(QuizTitleShow, {
         switchOnEditing: this.props.switchOnEditing,
         defaultTitle: this.workingTitle(),
         contentLocked: this.isContentLocked(),
@@ -156,21 +157,20 @@ export var QuizTitlePresenter = (_dec = themeable(theme, styles), _dec(_class =
   }, {
     key: "render",
     value: function render() {
-      var classnames = "".concat(styles.topRow, " ").concat(this.props.isEditing ? styles.editing : '');
       var content = this.props.isEditing ? this.renderEdit() : this.renderShow();
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         tabIndex: "-1",
-        className: classnames
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.flexContainer
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.label
-      }, /*#__PURE__*/React.createElement(Heading, {
+        css: this.props.styles.topRow
+      }, jsx("div", {
+        css: this.props.styles.flexContainer
+      }, jsx("div", {
+        css: this.props.styles.label
+      }, jsx(Heading, {
         level: "h4",
         as: "h2"
-      }, t('Title'))), /*#__PURE__*/React.createElement("div", null, content)), /*#__PURE__*/React.createElement("div", null, !this.props.isEditing && !this.isContentLocked() && /*#__PURE__*/React.createElement("div", {
-        className: styles.editButtonWrapper
-      }, /*#__PURE__*/React.createElement(EditButton, {
+      }, t('Title'))), jsx("div", null, content)), jsx("div", null, !this.props.isEditing && !this.isContentLocked() && jsx("div", {
+        css: this.props.styles.editButtonWrapper
+      }, jsx(EditButton, {
         ref: this.handleEditButtonRef,
         screenreaderText: t('Edit Title'),
         scrollKey: this.props.scrollKey,
@@ -199,7 +199,9 @@ export var QuizTitlePresenter = (_dec = themeable(theme, styles), _dec(_class =
   // injected by makeEditable
   switchOnEditing: PropTypes.func.isRequired,
   // injected by makeEditable
-  workingQuiz: ImmutablePropTypes.record.isRequired
+  workingQuiz: ImmutablePropTypes.record.isRequired,
+  makeStyles: PropTypes.func,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   scrollKey: void 0
 }, _temp)) || _class);

package/es/building/components/resources/quiz/title/Title/styles.js

@@ -0,0 +1,39 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+
+var generateStyle = function generateStyle(componentTheme, props) {
+  var mp = '@media print';
+  return {
+    topRow: _objectSpread(_defineProperty({
+      display: 'flex',
+      justifyContent: 'space-between',
+      borderBottom: componentTheme.titleShowWrapperBottomBorder
+    }, mp, {
+      display: 'none'
+    }), props.isEditing && {
+      borderBottom: 'solid',
+      borderWidth: componentTheme.titleEditWrapperBorderWidth,
+      borderColor: componentTheme.titleEditWrapperBorderColor
+    }),
+    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
+    }
+  };
+};
+
+export default generateStyle;