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

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

@@ -0,0 +1,37 @@
+"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 printMq = '@media print';
+  return {
+    position: (0, _defineProperty2.default)({
+      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
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

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

@@ -3,9 +3,9 @@
 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,
       colors = _ref.colors,
       typography = _ref.typography;
@@ -18,4 +18,7 @@ function generator(_ref) {
     positionTextColor: colors.porcelain,
     positionTextFontSize: typography.fontSizeMedium
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/common/components/resources/quiz/AddContent/Body/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"));
 
@@ -35,7 +33,7 @@ var _uiView = require("@instructure/ui-view");
 
 var _uiText = require("@instructure/ui-text");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _index = _interopRequireDefault(require("../../../../shared/InteractionTypes/index.js"));
 
@@ -43,23 +41,15 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
 
 var _quizCommon = require("@instructure/quiz-common");
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-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'
-};
-
-var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconBankLine, null);
+var _ref = (0, _emotion.jsx)(_uiIcons.IconBankLine, null);
 
-var AddContentBody = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var AddContentBody = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(AddContentBody, _Component);
 
   var _super = (0, _createSuper2.default)(AddContentBody);
@@ -129,7 +119,7 @@ var AddContentBody = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles)
     };
 
     _this.renderBankButton = function () {
-      return /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
+      return (0, _emotion.jsx)(_uiButtons.IconButton, {
         size: "large",
         onClick: _this.openBankTray,
         "data-automation": "sdk-add-banked-content-button",
@@ -139,17 +129,17 @@ var AddContentBody = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles)
 
     _this.renderPopoverHeader = function () {
       var text = _this.props.showHeaderText ? (0, _formatMessage.default)('Insert Content') : '';
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.popoverHeaderBox
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.popoverHeader
-      }, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid, {
+      return (0, _emotion.jsx)("div", {
+        css: _this.props.styles.popoverHeaderBox
+      }, (0, _emotion.jsx)("div", {
+        css: _this.props.styles.popoverHeader
+      }, (0, _emotion.jsx)(_uiGrid.Grid, {
         vAlign: "middle",
         colSpacing: "none",
         rowSpacing: "none"
-      }, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Row, null, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, null, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, (0, _emotion.jsx)(_uiGrid.Grid.Row, null, (0, _emotion.jsx)(_uiGrid.Grid.Col, null, (0, _emotion.jsx)(_uiText.Text, {
         color: "primary"
-      }, text)), /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, {
+      }, text)), (0, _emotion.jsx)(_uiGrid.Grid.Col, {
         width: "auto"
       }, _this.renderBankButton())))));
     };
@@ -160,13 +150,13 @@ var AddContentBody = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles)
   (0, _createClass2.default)(AddContentBody, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.popoverContent,
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.popoverContent,
         role: "dialog",
         "aria-label": (0, _formatMessage.default)('Insert Content')
-      }, this.renderPopoverHeader(), /*#__PURE__*/_react.default.createElement(_uiView.View, {
+      }, this.renderPopoverHeader(), (0, _emotion.jsx)(_uiView.View, {
         padding: "small"
-      }, /*#__PURE__*/_react.default.createElement(_index.default, {
+      }, (0, _emotion.jsx)(_index.default, {
         columns: 2,
         addItem: this.addItem,
         addStimulus: this.addStimulus,
@@ -193,7 +183,9 @@ var AddContentBody = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles)
   setNextQuizEntry: _propTypes.default.func.isRequired,
   setUi: _propTypes.default.func.isRequired,
   showHeaderText: _propTypes.default.bool,
-  stimulusId: _propTypes.default.string
+  stimulusId: _propTypes.default.string,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   editingQuizEntry: void 0,
   interactionTypes: void 0,

package/lib/common/components/resources/quiz/AddContent/Body/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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/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
+    }, (0, _defineProperty2.default)(_popoverContent, ieMq, {
+      width: '22rem'
+    }), (0, _defineProperty2.default)(_popoverContent, mobileMq, {
+      width: '11rem'
+    }), _popoverContent)
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/common/components/resources/quiz/AddContent/Body/theme.js

@@ -3,9 +3,9 @@
 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,
       colors = _ref.colors,
       borders = _ref.borders,
@@ -17,4 +17,7 @@ function generator(_ref) {
     popoverHeaderBoxBorderWidth: borders.widthSmall,
     popoverHeaderBoxBorderColor: colors.tiara
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/common/components/resources/quiz/AddContent/Button/index.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.AddContentButton = 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,37 +15,27 @@ 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 _classnames = _interopRequireDefault(require("classnames"));
-
 var _uiIcons = require("@instructure/ui-icons");
 
 var _uiA11yContent = require("@instructure/ui-a11y-content");
 
 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 _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-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'
-};
-var AddContentButton = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var AddContentButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(AddContentButton, _Component);
 
   var _super = (0, _createSuper2.default)(AddContentButton);
@@ -73,6 +59,16 @@ var AddContentButton = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
   }
 
   (0, _createClass2.default)(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();
@@ -80,9 +76,9 @@ var AddContentButton = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
   }, {
     key: "renderStimulus",
     value: function renderStimulus() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.attachQuestionButtonHolder
-      }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.attachQuestionButtonHolder
+      }, (0, _emotion.jsx)(_uiButtons.Button, {
         ref: this.storeButtonElemRef,
         color: "primary",
         margin: "medium",
@@ -93,18 +89,16 @@ var AddContentButton = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
   }, {
     key: "renderNonStimulus",
     value: function renderNonStimulus() {
-      var _classNames;
-
-      var buttonClasses = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, styles.newItemButton, true), (0, _defineProperty2.default)(_classNames, "newItemButton_".concat(this.props.position), this.props.position !== null), (0, _defineProperty2.default)(_classNames, styles.newItemButtonEditing, this.props.isEditing), _classNames));
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.newItemButtonHolder
-      }, /*#__PURE__*/_react.default.createElement("button", {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.newItemButtonHolder
+      }, (0, _emotion.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.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Add Content')), /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, /*#__PURE__*/_react.default.createElement(_uiIcons.IconPlusLine, {
+      }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Add Content')), (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, (0, _emotion.jsx)(_uiIcons.IconPlusLine, {
         title: (0, _formatMessage.default)('Add Content')
       }))));
     }
@@ -120,7 +114,10 @@ var AddContentButton = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
   isEditing: _propTypes.default.bool.isRequired,
   onClick: _propTypes.default.func,
   position: _propTypes.default.number,
-  useStimulusTrigger: _propTypes.default.bool.isRequired
+  useStimulusTrigger: _propTypes.default.bool.isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: _propTypes.default.object,
+  makeStyles: _propTypes.default.func
 }, _class2.defaultProps = {
   onClick: Function.prototype,
   position: null

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

@@ -0,0 +1,62 @@
+"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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var generateStyle = function generateStyle(componentTheme, props) {
+  var printMq = '@media print';
+  return {
+    newItemButton: (0, _objectSpread2.default)({
+      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: (0, _defineProperty2.default)({
+      display: 'flex',
+      justifyContent: 'center',
+      width: '100%',
+      zIndex: componentTheme.newItemButtonHolderZIndex,
+      marginTop: '-1.5rem'
+    }, printMq, {
+      display: 'none'
+    }),
+    attachQuestionButtonHolder: (0, _defineProperty2.default)({
+      display: 'flex',
+      justifyContent: 'center',
+      width: '100%',
+      zIndex: componentTheme.attachQuestionButtonHolderZIndex
+    }, printMq, {
+      display: 'none'
+    })
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/common/components/resources/quiz/AddContent/Button/theme.js

@@ -3,9 +3,9 @@
 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,
       colors = _ref.colors,
       borders = _ref.borders,
@@ -28,4 +28,7 @@ function generator(_ref) {
     newItemButtonHolderZIndex: '2222',
     newItemButtonTransition: "background-color ".concat(transitions.duration, " linear, transform ").concat(transitions.duration, " ease")
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/common/components/resources/quiz/AddContent/Popover/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 _uiPopover = require("@instructure/ui-popover");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _CustomPropTypes = _interopRequireDefault(require("../../../../../util/CustomPropTypes.js"));
 
@@ -37,20 +35,13 @@ var _index2 = _interopRequireDefault(require("../Body/index.js"));
 
 var _quizCommon = require("@instructure/quiz-common");
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-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'
-};
-var AddContentPopover = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var AddContentPopover = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(AddContentPopover, _Component);
 
   var _super = (0, _createSuper2.default)(AddContentPopover);
@@ -83,7 +74,7 @@ var AddContentPopover = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
     };
 
     _this.renderPopoverButton = function () {
-      return /*#__PURE__*/_react.default.createElement(_uiPopover.Popover, {
+      return (0, _emotion.jsx)(_uiPopover.Popover, {
         on: "click",
         onShowContent: _this.showContent,
         onHideContent: _this.hideContent,
@@ -91,7 +82,7 @@ var AddContentPopover = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
         shouldCloseOnEscape: true,
         shouldContainFocus: true,
         renderTrigger: _this.renderAddContentButton()
-      }, /*#__PURE__*/_react.default.createElement(_index2.default, {
+      }, (0, _emotion.jsx)(_index2.default, {
         allowStimulusCreation: _this.props.allowStimulusCreation,
         onOpenBankTray: _this.props.switchOffEditing,
         onAddItem: _this.props.switchOffEditing,
@@ -132,7 +123,7 @@ var AddContentPopover = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
     key: "renderAddContentButton",
     value: function renderAddContentButton() {
       var onClick = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : null;
-      return /*#__PURE__*/_react.default.createElement(_index.default, {
+      return (0, _emotion.jsx)(_index.default, {
         ref: this.storePopoverTriggerRef,
         onClick: onClick,
         isEditing: this.props.isEditing,
@@ -147,13 +138,12 @@ var AddContentPopover = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
   }, {
     key: "render",
     value: function render() {
-      var borderLine = this.props.useStimulusTrigger ? null : /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.borderLine
+      var borderLine = this.props.useStimulusTrigger ? null : (0, _emotion.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.default.createElement("div", {
-        className: wrapperClass,
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.wrapper,
         "data-automation": "sdk-build-add-content"
       }, borderLine, button);
     }
@@ -174,7 +164,9 @@ var AddContentPopover = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
   stimulusId: _propTypes.default.string,
   switchOffEditing: _propTypes.default.func.isRequired,
   switchOnEditing: _propTypes.default.func.isRequired,
-  useStimulusTrigger: _propTypes.default.bool
+  useStimulusTrigger: _propTypes.default.bool,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   allowStimulusCreation: true,
   isMobile: (0, _windowChecks.onPhone)() || (0, _windowChecks.onTablet)(),

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

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+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)
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

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

@@ -3,13 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
       borders = _ref.borders;
   return {
     borderLineBorderWidth: borders.widthMedium,
     borderLineBorderColor: colors.porcelain
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;