@instructure/quiz-core 20.4.0 → 20.4.1-rc.1

package/es/common/components/resources/positionBox/PositionBox.js

@@ -5,21 +5,15 @@ 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 { Heading } from '@instructure/ui-heading';
 import { ScreenReaderContent, PresentationContent } from '@instructure/ui-a11y-content';
-import { themeable } from '@instructure/ui-themeable';
-var styles = {
-  componentId: 'kJotW',
-  template: function template(theme) {
-    return "\n\n.kJotW_cESy{align-items:center;background-color:".concat(theme.positionBackgroundColor || 'inherit', ";display:flex;height:").concat(theme.positionDimension || 'inherit', ";justify-content:center;margin-left:-1.2rem;margin-right:").concat(theme.positionMargin || 'inherit', ";min-width:").concat(theme.positionDimension || 'inherit', ";padding:0 ").concat(theme.positionPadding || 'inherit', ";z-index:").concat(theme.positionZIndex || 'inherit', "}\n\nbody.tox-fullscreen .kJotW_cESy{z-index:0}\n\n.kJotW_bUkG{color:").concat(theme.positionTextColor || 'inherit', ";font-size:").concat(theme.positionTextFontSize || 'inherit', "}\n\n@media print{.kJotW_cESy{-webkit-print-color-adjust:exact;color-adjust:exact}}");
-  },
-  'position': 'kJotW_cESy',
-  'positionText': 'kJotW_bUkG'
-};
-import theme from "./theme.js";
-export var PositionBox = (_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 PositionBox = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(PositionBox, _Component);
 
   var _super = _createSuper(PositionBox);
@@ -33,16 +27,16 @@ export var PositionBox = (_dec = themeable(theme, styles), _dec(_class = (_temp
   _createClass(PositionBox, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.position
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.positionText,
+      return jsx("div", {
+        css: this.props.styles.position
+      }, jsx("div", {
+        css: this.props.styles.positionText,
         "data-automation": "sdk-position-box-text"
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, {
+      }, jsx(ScreenReaderContent, {
         as: "div"
-      }, /*#__PURE__*/React.createElement(Heading, {
+      }, jsx(Heading, {
         level: this.props.headingLevel
-      }, this.props.headingText)), /*#__PURE__*/React.createElement(PresentationContent, null, this.props.position)));
+      }, this.props.headingText)), jsx(PresentationContent, null, this.props.position)));
     }
   }]);
 
@@ -51,7 +45,9 @@ export var PositionBox = (_dec = themeable(theme, styles), _dec(_class = (_temp
 }(Component), _class2.propTypes = {
   headingText: PropTypes.string.isRequired,
   headingLevel: PropTypes.string,
-  position: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
+  position: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   headingLevel: 'h2'
 }, _temp)) || _class);

package/es/common/components/resources/positionBox/styles.js

@@ -0,0 +1,27 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+var generateStyle = function generateStyle(componentTheme) {
+  var printMq = '@media print';
+  return {
+    position: _defineProperty({
+      height: componentTheme.positionDimension,
+      minWidth: componentTheme.positionDimension,
+      marginLeft: '-1.2rem',
+      marginRight: componentTheme.positionMargin,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: componentTheme.positionBackgroundColor,
+      padding: "0 ".concat(componentTheme.positionPadding),
+      zIndex: componentTheme.positionZIndex
+    }, printMq, {
+      colorAdjust: 'exact'
+    }),
+    positionText: {
+      fontSize: componentTheme.positionTextFontSize,
+      color: componentTheme.positionTextColor
+    }
+  };
+};
+
+export default generateStyle;

package/es/common/components/resources/positionBox/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       colors = _ref.colors,
       typography = _ref.typography;
@@ -11,4 +11,6 @@ export default function generator(_ref) {
     positionTextColor: colors.porcelain,
     positionTextFontSize: typography.fontSizeMedium
   };
-}
+};
+
+export default generateComponentTheme;

package/es/common/components/resources/quiz/AddContent/Body/presenter.js

@@ -5,7 +5,8 @@ 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 first from 'lodash/first';
@@ -14,24 +15,16 @@ import { IconButton } from '@instructure/ui-buttons';
 import { Grid } from '@instructure/ui-grid';
 import { View } from '@instructure/ui-view';
 import { Text } from '@instructure/ui-text';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import InteractionTypes from "../../../../shared/InteractionTypes/index.js";
 import t from '@instructure/quiz-i18n/es/format-message';
 import { BUILD_TRAY_OPEN, BUILD_TRAY_POSITION, BUILD_TRAY_STIMULUS_ID } from '@instructure/quiz-common';
-var styles = {
-  componentId: 'GmYGC',
-  template: function template(theme) {
-    return "\n\n.GmYGC_bHWS{border-bottom:solid ".concat(theme.popoverHeaderBoxBorderWidth || 'inherit', " ").concat(theme.popoverHeaderBoxBorderColor || 'inherit', "}\n\n.GmYGC_cqxf{margin:1rem;margin-bottom:0.25rem}\n\n.GmYGC_cdWv{margin-left:").concat(theme.popoverContentMargin || 'inherit', ";margin-right:").concat(theme.popoverContentMargin || 'inherit', "}\n\n@media (-ms-high-contrast:none),screen and (-ms-high-contrast:active){.GmYGC_cdWv{width:22rem}}\n\n@media screen and (--phoneBreakPoint) and (-ms-high-contrast:active),screen and (--phoneBreakPoint) and (-ms-high-contrast:none){.GmYGC_cdWv{width:11rem}}");
-  },
-  'popoverHeaderBox': 'GmYGC_bHWS',
-  'popoverHeader': 'GmYGC_cqxf',
-  'popoverContent': 'GmYGC_cdWv'
-};
-import theme from "./theme.js";
-
-var _ref = /*#__PURE__*/React.createElement(IconBankLine, null);
-
-export var AddContentBody = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+
+var _ref = jsx(IconBankLine, null);
+
+export var AddContentBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(AddContentBody, _Component);
 
   var _super = _createSuper(AddContentBody);
@@ -101,7 +94,7 @@ export var AddContentBody = (_dec = themeable(theme, styles), _dec(_class = (_te
     };
 
     _this.renderBankButton = function () {
-      return /*#__PURE__*/React.createElement(IconButton, {
+      return jsx(IconButton, {
         size: "large",
         onClick: _this.openBankTray,
         "data-automation": "sdk-add-banked-content-button",
@@ -111,17 +104,17 @@ export var AddContentBody = (_dec = themeable(theme, styles), _dec(_class = (_te
 
     _this.renderPopoverHeader = function () {
       var text = _this.props.showHeaderText ? t('Insert Content') : '';
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.popoverHeaderBox
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.popoverHeader
-      }, /*#__PURE__*/React.createElement(Grid, {
+      return jsx("div", {
+        css: _this.props.styles.popoverHeaderBox
+      }, jsx("div", {
+        css: _this.props.styles.popoverHeader
+      }, jsx(Grid, {
         vAlign: "middle",
         colSpacing: "none",
         rowSpacing: "none"
-      }, /*#__PURE__*/React.createElement(Grid.Row, null, /*#__PURE__*/React.createElement(Grid.Col, null, /*#__PURE__*/React.createElement(Text, {
+      }, jsx(Grid.Row, null, jsx(Grid.Col, null, jsx(Text, {
         color: "primary"
-      }, text)), /*#__PURE__*/React.createElement(Grid.Col, {
+      }, text)), jsx(Grid.Col, {
         width: "auto"
       }, _this.renderBankButton())))));
     };
@@ -132,13 +125,13 @@ export var AddContentBody = (_dec = themeable(theme, styles), _dec(_class = (_te
   _createClass(AddContentBody, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.popoverContent,
+      return jsx("div", {
+        css: this.props.styles.popoverContent,
         role: "dialog",
         "aria-label": t('Insert Content')
-      }, this.renderPopoverHeader(), /*#__PURE__*/React.createElement(View, {
+      }, this.renderPopoverHeader(), jsx(View, {
         padding: "small"
-      }, /*#__PURE__*/React.createElement(InteractionTypes, {
+      }, jsx(InteractionTypes, {
         columns: 2,
         addItem: this.addItem,
         addStimulus: this.addStimulus,
@@ -166,7 +159,9 @@ export var AddContentBody = (_dec = themeable(theme, styles), _dec(_class = (_te
   setNextQuizEntry: PropTypes.func.isRequired,
   setUi: PropTypes.func.isRequired,
   showHeaderText: PropTypes.bool,
-  stimulusId: PropTypes.string
+  stimulusId: PropTypes.string,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   editingQuizEntry: void 0,
   interactionTypes: void 0,

package/es/common/components/resources/quiz/AddContent/Body/styles.js

@@ -0,0 +1,28 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+var generateStyle = function generateStyle(componentTheme) {
+  var _popoverContent;
+
+  var ieMq = '@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)'; // IE11 only
+
+  var mobileMq = "@media screen and (".concat(componentTheme.phoneBreakPoint, ") and (-ms-high-contrast: active), screen and (").concat(componentTheme.phoneBreakPoint, ") and (-ms-high-contrast: none)");
+  return {
+    popoverHeaderBox: {
+      borderBottom: "solid ".concat(componentTheme.popoverHeaderBoxBorderWidth, " ").concat(componentTheme.popoverHeaderBoxBorderColor)
+    },
+    popoverHeader: {
+      margin: '1rem',
+      marginBottom: '0.25rem'
+    },
+    popoverContent: (_popoverContent = {
+      marginLeft: componentTheme.popoverContentMargin,
+      marginRight: componentTheme.popoverContentMargin
+    }, _defineProperty(_popoverContent, ieMq, {
+      width: '22rem'
+    }), _defineProperty(_popoverContent, mobileMq, {
+      width: '11rem'
+    }), _popoverContent)
+  };
+};
+
+export default generateStyle;

package/es/common/components/resources/quiz/AddContent/Body/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,
@@ -10,4 +10,6 @@ export default function generator(_ref) {
     popoverHeaderBoxBorderWidth: borders.widthSmall,
     popoverHeaderBoxBorderColor: colors.tiara
   };
-}
+};
+
+export default generateComponentTheme;

package/es/common/components/resources/quiz/AddContent/Button/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,26 +5,17 @@ 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 { IconPlusLine } from '@instructure/ui-icons';
 import { PresentationContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
 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';
-var styles = {
-  componentId: 'cIWJr',
-  template: function template(theme) {
-    return "\n\n.cIWJr_ePYF{background-color:".concat(theme.newItemButtonBackgroundColor || 'inherit', ";border:none;border-radius:").concat(theme.newItemButtonBorderRadius || 'inherit', ";box-shadow:").concat(theme.newItemButtonBoxShadow || 'inherit', ";color:").concat(theme.newItemButtonColor || 'inherit', ";font-size:").concat(theme.newItemButtonFontSize || 'inherit', ";font-weight:").concat(theme.newItemButtonFontWeight || 'inherit', ";line-height:0;margin:").concat(theme.newItemButtonMargin || 'inherit', ";padding:").concat(theme.newItemButtonPadding || 'inherit', ";text-align:center;transform:rotate(0deg);transition:").concat(theme.newItemButtonTransition || 'inherit', ";z-index:").concat(theme.newItemButtonZIndex || 'inherit', "}\n\n[dir=ltr] .cIWJr_ePYF,[dir=rtl] .cIWJr_ePYF{text-align:center}\n\n.cIWJr_ePYF:focus{outline:").concat(theme.newItemButtonFocusOutline || 'inherit', ";outline-offset:").concat(theme.newItemButtonFocusOutlineOffset || 'inherit', "}\n\n.cIWJr_ePYF.cIWJr_cwUE{background-color:").concat(theme.newItemButtonEditingBackgroundColor || 'inherit', ";transform:rotate(45deg);transition:").concat(theme.newItemButtonTransition || 'inherit', "}\n\n.cIWJr_ekys{display:flex;justify-content:center;margin-top:-1.5rem;width:100%;z-index:").concat(theme.newItemButtonHolderZIndex || 'inherit', "}\n\n.cIWJr_egTu{display:flex;justify-content:center;width:100%;z-index:").concat(theme.attachQuestionButtonHolderZIndex || 'inherit', "}\n\n@media print{.cIWJr_egTu,.cIWJr_ekys{display:none}}");
-  },
-  'newItemButton': 'cIWJr_ePYF',
-  'newItemButtonEditing': 'cIWJr_cwUE',
-  'newItemButtonHolder': 'cIWJr_ekys',
-  'attachQuestionButtonHolder': 'cIWJr_egTu'
-};
-import theme from "./theme.js";
-export var AddContentButton = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var AddContentButton = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(AddContentButton, _Component);
 
   var _super = _createSuper(AddContentButton);
@@ -49,6 +39,16 @@ export var AddContentButton = (_dec = themeable(theme, styles), _dec(_class = (_
   }
 
   _createClass(AddContentButton, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.makeStyles();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles();
+    }
+  }, {
     key: "focus",
     value: function focus() {
       this.buttonElem.focus();
@@ -56,9 +56,9 @@ export var AddContentButton = (_dec = themeable(theme, styles), _dec(_class = (_
   }, {
     key: "renderStimulus",
     value: function renderStimulus() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.attachQuestionButtonHolder
-      }, /*#__PURE__*/React.createElement(Button, {
+      return jsx("div", {
+        css: this.props.styles.attachQuestionButtonHolder
+      }, jsx(Button, {
         ref: this.storeButtonElemRef,
         color: "primary",
         margin: "medium",
@@ -69,18 +69,16 @@ export var AddContentButton = (_dec = themeable(theme, styles), _dec(_class = (_
   }, {
     key: "renderNonStimulus",
     value: function renderNonStimulus() {
-      var _classNames;
-
-      var buttonClasses = classNames((_classNames = {}, _defineProperty(_classNames, styles.newItemButton, true), _defineProperty(_classNames, "newItemButton_".concat(this.props.position), this.props.position !== null), _defineProperty(_classNames, styles.newItemButtonEditing, this.props.isEditing), _classNames));
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.newItemButtonHolder
-      }, /*#__PURE__*/React.createElement("button", {
+      return jsx("div", {
+        css: this.props.styles.newItemButtonHolder
+      }, jsx("button", {
         ref: this.storeButtonElemRef,
         onClick: this.props.onClick,
-        className: buttonClasses,
+        css: this.props.styles.newItemButton,
+        className: this.props.position !== null ? "newItemButton_".concat(this.props.position) : null,
         "data-automation": "sdk-add-content-button",
         "aria-expanded": this.props.isEditing
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Add Content')), /*#__PURE__*/React.createElement(PresentationContent, null, /*#__PURE__*/React.createElement(IconPlusLine, {
+      }, jsx(ScreenReaderContent, null, t('Add Content')), jsx(PresentationContent, null, jsx(IconPlusLine, {
         title: t('Add Content')
       }))));
     }
@@ -97,7 +95,10 @@ export var AddContentButton = (_dec = themeable(theme, styles), _dec(_class = (_
   isEditing: PropTypes.bool.isRequired,
   onClick: PropTypes.func,
   position: PropTypes.number,
-  useStimulusTrigger: PropTypes.bool.isRequired
+  useStimulusTrigger: PropTypes.bool.isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: PropTypes.object,
+  makeStyles: PropTypes.func
 }, _class2.defaultProps = {
   onClick: Function.prototype,
   position: null

package/es/common/components/resources/quiz/AddContent/Button/styles.js

@@ -0,0 +1,51 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+
+var generateStyle = function generateStyle(componentTheme, props) {
+  var printMq = '@media print';
+  return {
+    newItemButton: _objectSpread({
+      border: 'none',
+      margin: componentTheme.newItemButtonMargin,
+      padding: componentTheme.newItemButtonPadding,
+      backgroundColor: componentTheme.newItemButtonBackgroundColor,
+      borderRadius: componentTheme.newItemButtonBorderRadius,
+      lineHeight: 0,
+      fontSize: componentTheme.newItemButtonFontSize,
+      fontWeight: componentTheme.newItemButtonFontWeight,
+      textAlign: 'center',
+      color: componentTheme.newItemButtonColor,
+      boxShadow: componentTheme.newItemButtonBoxShadow,
+      transform: 'rotate(0deg)',
+      transition: componentTheme.newItemButtonTransition,
+      zIndex: componentTheme.newItemButtonZIndex,
+      ':focus': {
+        outline: componentTheme.newItemButtonFocusOutline,
+        outlineOffset: componentTheme.newItemButtonFocusOutlineOffset
+      }
+    }, props.isEditing && {
+      backgroundColor: componentTheme.newItemButtonEditingBackgroundColor,
+      transform: 'rotate(45deg)',
+      transition: componentTheme.newItemButtonTransition
+    }),
+    newItemButtonHolder: _defineProperty({
+      display: 'flex',
+      justifyContent: 'center',
+      width: '100%',
+      zIndex: componentTheme.newItemButtonHolderZIndex,
+      marginTop: '-1.5rem'
+    }, printMq, {
+      display: 'none'
+    }),
+    attachQuestionButtonHolder: _defineProperty({
+      display: 'flex',
+      justifyContent: 'center',
+      width: '100%',
+      zIndex: componentTheme.attachQuestionButtonHolderZIndex
+    }, printMq, {
+      display: 'none'
+    })
+  };
+};
+
+export default generateStyle;

package/es/common/components/resources/quiz/AddContent/Button/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,
@@ -21,4 +21,6 @@ export default function generator(_ref) {
     newItemButtonHolderZIndex: '2222',
     newItemButtonTransition: "background-color ".concat(transitions.duration, " linear, transform ").concat(transitions.duration, " ease")
   };
-}
+};
+
+export default generateComponentTheme;

package/es/common/components/resources/quiz/AddContent/Popover/presenter.js

@@ -5,27 +5,20 @@ 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 { Popover } from '@instructure/ui-popover';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import CustomPropTypes from "../../../../../util/CustomPropTypes.js";
 import elementsForSelectors from "../../../../../util/ElementsForSelectors.js";
 import { onPhone, onTablet } from "../../../../../util/windowChecks.js";
 import AddContentButton from "../Button/index.js";
 import AddContentBody from "../Body/index.js";
 import { DELETED_QUIZ_ENTRY } from '@instructure/quiz-common';
-var styles = {
-  componentId: 'bgZYv',
-  template: function template(theme) {
-    return "\n\n.bgZYv_NbWo{height:1px;position:relative}\n\n.bgZYv_NbWo,.bgZYv_ljGg{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;width:100%}\n\nbody.tox-fullscreen .bgZYv_NbWo,body.tox-fullscreen .bgZYv_ljGg{z-index:0}\n\n.bgZYv_bRWN{border-bottom:solid ".concat(theme.borderLineBorderWidth || 'inherit', " ").concat(theme.borderLineBorderColor || 'inherit', ";top:0;width:100%}");
-  },
-  'addContentContainer': 'bgZYv_NbWo',
-  'attachQuestionContainer': 'bgZYv_ljGg',
-  'borderLine': 'bgZYv_bRWN'
-};
-import theme from "./theme.js";
-export var AddContentPopover = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var AddContentPopover = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(AddContentPopover, _Component);
 
   var _super = _createSuper(AddContentPopover);
@@ -58,7 +51,7 @@ export var AddContentPopover = (_dec = themeable(theme, styles), _dec(_class = (
     };
 
     _this.renderPopoverButton = function () {
-      return /*#__PURE__*/React.createElement(Popover, {
+      return jsx(Popover, {
         on: "click",
         onShowContent: _this.showContent,
         onHideContent: _this.hideContent,
@@ -66,7 +59,7 @@ export var AddContentPopover = (_dec = themeable(theme, styles), _dec(_class = (
         shouldCloseOnEscape: true,
         shouldContainFocus: true,
         renderTrigger: _this.renderAddContentButton()
-      }, /*#__PURE__*/React.createElement(AddContentBody, {
+      }, jsx(AddContentBody, {
         allowStimulusCreation: _this.props.allowStimulusCreation,
         onOpenBankTray: _this.props.switchOffEditing,
         onAddItem: _this.props.switchOffEditing,
@@ -107,7 +100,7 @@ export var AddContentPopover = (_dec = themeable(theme, styles), _dec(_class = (
     key: "renderAddContentButton",
     value: function renderAddContentButton() {
       var onClick = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : null;
-      return /*#__PURE__*/React.createElement(AddContentButton, {
+      return jsx(AddContentButton, {
         ref: this.storePopoverTriggerRef,
         onClick: onClick,
         isEditing: this.props.isEditing,
@@ -122,13 +115,12 @@ export var AddContentPopover = (_dec = themeable(theme, styles), _dec(_class = (
   }, {
     key: "render",
     value: function render() {
-      var borderLine = this.props.useStimulusTrigger ? null : /*#__PURE__*/React.createElement("div", {
-        className: styles.borderLine
+      var borderLine = this.props.useStimulusTrigger ? null : jsx("div", {
+        css: this.props.styles.borderLine
       });
-      var wrapperClass = this.props.useStimulusTrigger ? styles.attachQuestionContainer : styles.addContentContainer;
       var button = this.props.isMobile ? this.renderModalButton() : this.renderPopoverButton();
-      return /*#__PURE__*/React.createElement("div", {
-        className: wrapperClass,
+      return jsx("div", {
+        css: this.props.styles.wrapper,
         "data-automation": "sdk-build-add-content"
       }, borderLine, button);
     }
@@ -150,7 +142,9 @@ export var AddContentPopover = (_dec = themeable(theme, styles), _dec(_class = (
   stimulusId: PropTypes.string,
   switchOffEditing: PropTypes.func.isRequired,
   switchOnEditing: PropTypes.func.isRequired,
-  useStimulusTrigger: PropTypes.bool
+  useStimulusTrigger: PropTypes.bool,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   allowStimulusCreation: true,
   isMobile: onPhone() || onTablet(),

package/es/common/components/resources/quiz/AddContent/Popover/styles.js

@@ -0,0 +1,28 @@
+var generateStyle = function generateStyle(componentTheme, props) {
+  var attachQuestionContainer = {
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexWrap: 'wrap'
+  };
+  var addContentContainer = {
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+    position: 'relative',
+    height: '1px'
+  };
+  return {
+    wrapper: props.useStimulusTrigger ? attachQuestionContainer : addContentContainer,
+    borderLine: {
+      top: 0,
+      width: '100%',
+      borderBottom: "solid ".concat(componentTheme.borderLineBorderWidth, " ").concat(componentTheme.borderLineBorderColor)
+    }
+  };
+};
+
+export default generateStyle;

package/es/common/components/resources/quiz/AddContent/Popover/theme.js

@@ -1,8 +1,10 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
       borders = _ref.borders;
   return {
     borderLineBorderWidth: borders.widthMedium,
     borderLineBorderColor: colors.porcelain
   };
-}
+};
+
+export default generateComponentTheme;

package/lib/common/components/resources/positionBox/PositionBox.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,21 +23,15 @@ var _uiHeading = require("@instructure/ui-heading");
 
 var _uiA11yContent = require("@instructure/ui-a11y-content");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
+
+var _styles = _interopRequireDefault(require("./styles.js"));
 
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'kJotW',
-  template: function template(theme) {
-    return "\n\n.kJotW_cESy{align-items:center;background-color:".concat(theme.positionBackgroundColor || 'inherit', ";display:flex;height:").concat(theme.positionDimension || 'inherit', ";justify-content:center;margin-left:-1.2rem;margin-right:").concat(theme.positionMargin || 'inherit', ";min-width:").concat(theme.positionDimension || 'inherit', ";padding:0 ").concat(theme.positionPadding || 'inherit', ";z-index:").concat(theme.positionZIndex || 'inherit', "}\n\nbody.tox-fullscreen .kJotW_cESy{z-index:0}\n\n.kJotW_bUkG{color:").concat(theme.positionTextColor || 'inherit', ";font-size:").concat(theme.positionTextFontSize || 'inherit', "}\n\n@media print{.kJotW_cESy{-webkit-print-color-adjust:exact;color-adjust:exact}}");
-  },
-  'position': 'kJotW_cESy',
-  'positionText': 'kJotW_bUkG'
-};
-var PositionBox = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var PositionBox = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(PositionBox, _Component);
 
   var _super = (0, _createSuper2.default)(PositionBox);
@@ -52,16 +44,16 @@ var PositionBox = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
   (0, _createClass2.default)(PositionBox, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.position
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.positionText,
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.position
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.positionText,
         "data-automation": "sdk-position-box-text"
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, {
+      }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, {
         as: "div"
-      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+      }, (0, _emotion.jsx)(_uiHeading.Heading, {
         level: this.props.headingLevel
-      }, this.props.headingText)), /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, this.props.position)));
+      }, this.props.headingText)), (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, this.props.position)));
     }
   }]);
   PositionBox.displayName = "PositionBox";
@@ -69,7 +61,9 @@ var PositionBox = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
 }(_react.Component), _class2.propTypes = {
   headingText: _propTypes.default.string.isRequired,
   headingLevel: _propTypes.default.string,
-  position: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
+  position: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   headingLevel: 'h2'
 }, _temp)) || _class);