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

package/es/building/components/layout/Sidebar/SidebarItem/presenter.js

@@ -5,23 +5,18 @@ 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 { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import { chooseDragConnection, usingIE } from "../../../../../common/components/shared/drag_and_drop/dragAndDropUtils.js";
 import DragHandle from "../../../../../common/components/shared/drag_and_drop/DragHandle/index.js";
 import DragAndDropZone from "../../../../../common/components/shared/drag_and_drop/DragAndDropZone/index.js";
 import CommonSidebarItem from "../../../../../common/components/layout/sidebar/SidebarItem/index.js";
-var styles = {
-  componentId: 'beYOg',
-  template: function template(theme) {
-    return "\n\n.beYOg_cpvQ{transform:translateZ(0)}";
-  },
-  'sidebarItemWrapper': 'beYOg_cpvQ'
-};
-import theme from "./theme.js";
-export var BuildingSidebarItem = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var BuildingSidebarItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(BuildingSidebarItem, _Component);
 
   var _super = _createSuper(BuildingSidebarItem);
@@ -45,10 +40,8 @@ export var BuildingSidebarItem = (_dec = themeable(theme, styles), _dec(_class =
           sidebarOpen = _this$props.sidebarOpen;
 
       if (sidebarOpen) {
-        var dragHandle =
-        /*#__PURE__*/
-        // This wrapper div is necessary for drag and drop
-        React.createElement("div", null, /*#__PURE__*/React.createElement(DragHandle, {
+        var dragHandle = // This wrapper div is necessary for drag and drop
+        jsx("div", null, jsx(DragHandle, {
           onSidebar: true,
           displayPosition: this.props.displayPosition,
           quizEntry: this.props.quizEntry,
@@ -81,11 +74,11 @@ export var BuildingSidebarItem = (_dec = themeable(theme, styles), _dec(_class =
         draggingOver: draggingOver,
         draggingAboveHalf: draggingAboveHalf
       };
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.sidebarItemWrapper
-      }, /*#__PURE__*/React.createElement(DragAndDropZone, Object.assign({}, propsForDnDZone, {
+      return jsx("div", null, jsx("div", {
+        css: this.props.styles.sidebarItemWrapper
+      }, jsx(DragAndDropZone, Object.assign({}, propsForDnDZone, {
         location: "above"
-      })), /*#__PURE__*/React.createElement(CommonSidebarItem, {
+      })), jsx(CommonSidebarItem, {
         itemId: this.props.itemId,
         itemBody: this.props.itemBody,
         itemName: this.props.itemName,
@@ -94,9 +87,9 @@ export var BuildingSidebarItem = (_dec = themeable(theme, styles), _dec(_class =
         pointsPossible: this.props.pointsPossible,
         quizEntry: this.props.quizEntry,
         sidebarOpen: this.props.sidebarOpen
-      }, this.renderDragHandle()), /*#__PURE__*/React.createElement(DragAndDropZone, Object.assign({}, propsForDnDZone, {
+      }, this.renderDragHandle()), jsx(DragAndDropZone, Object.assign({}, propsForDnDZone, {
         location: "below"
-      })));
+      }))));
     }
   }, {
     key: "render",
@@ -139,7 +132,8 @@ export var BuildingSidebarItem = (_dec = themeable(theme, styles), _dec(_class =
   sidebarOpen: PropTypes.bool.isRequired,
   // Passed in by connect
   draggingOver: PropTypes.bool.isRequired,
-  draggingAboveHalf: PropTypes.bool.isRequired
+  draggingAboveHalf: PropTypes.bool.isRequired,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   disableDraggingOverride: false,
   inStimulus: false,

package/es/building/components/layout/Sidebar/SidebarItem/styles.js

@@ -0,0 +1,11 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    sidebarItemWrapper: {
+      transform: 'translate3d(0, 0, 0)'
+      /* for drag and drop preview to work */
+
+    }
+  };
+};
+
+export default generateStyle;

package/es/building/components/layout/Sidebar/SidebarItem/theme.js

@@ -1,3 +1,5 @@
-export default function generator() {
+var generateComponentTheme = function generateComponentTheme() {
   return {};
-}
+};
+
+export default generateComponentTheme;

package/es/building/components/layout/Sidebar/Stimulus/presenter.js

@@ -5,23 +5,18 @@ 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 { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import { chooseDragConnection, usingIE } from "../../../../../common/components/shared/drag_and_drop/dragAndDropUtils.js";
 import DragHandle from "../../../../../common/components/shared/drag_and_drop/DragHandle/index.js";
 import DragAndDropZone from "../../../../../common/components/shared/drag_and_drop/DragAndDropZone/index.js";
 import CommonStimulus from "../../../../../common/components/layout/sidebar/Stimulus/index.js";
-var styles = {
-  componentId: 'fyovm',
-  template: function template(theme) {
-    return "\n\n.fyovm_drae{transform:translateZ(0)}";
-  },
-  'sidebarStimulusWrapper': 'fyovm_drae'
-};
-import theme from "./theme.js";
-export var BuildingStimulus = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var BuildingStimulus = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(BuildingStimulus, _Component);
 
   var _super = _createSuper(BuildingStimulus);
@@ -48,10 +43,8 @@ export var BuildingStimulus = (_dec = themeable(theme, styles), _dec(_class = (_
           sidebarOpen = _this$props2.sidebarOpen;
 
       if (sidebarOpen) {
-        var dragHandle =
-        /*#__PURE__*/
-        // This wrapper div is necessary for drag and drop
-        React.createElement("div", null, /*#__PURE__*/React.createElement(DragHandle, {
+        var dragHandle = // This wrapper div is necessary for drag and drop
+        jsx("div", null, jsx(DragHandle, {
           disabled: this.shouldDisableDragHandle(),
           displayPosition: this.props.displayPosition,
           onSidebar: true,
@@ -72,7 +65,7 @@ export var BuildingStimulus = (_dec = themeable(theme, styles), _dec(_class = (_
   }, {
     key: "renderStimulus",
     value: function renderStimulus() {
-      return /*#__PURE__*/React.createElement(CommonStimulus, {
+      return jsx(CommonStimulus, {
         displayPosition: this.props.displayPosition,
         draggingOver: this.props.draggingOver,
         draggingAboveHalf: this.props.draggingAboveHalf,
@@ -96,15 +89,15 @@ export var BuildingStimulus = (_dec = themeable(theme, styles), _dec(_class = (_
         draggingAboveHalf: this.props.draggingAboveHalf,
         dropIntoEmptyStimulus: this.props.dropIntoEmptyStimulus
       };
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.sidebarStimulusWrapper
-      }, /*#__PURE__*/React.createElement(DragAndDropZone, Object.assign({}, propsForDnDZone, {
+      return jsx("div", null, jsx("div", {
+        css: this.props.styles.sidebarStimulusWrapper
+      }, jsx(DragAndDropZone, Object.assign({}, propsForDnDZone, {
         location: "above"
-      })), this.renderStimulus(), /*#__PURE__*/React.createElement(DragAndDropZone, Object.assign({}, propsForDnDZone, {
+      })), this.renderStimulus(), jsx(DragAndDropZone, Object.assign({}, propsForDnDZone, {
         location: "in"
-      })), /*#__PURE__*/React.createElement(DragAndDropZone, Object.assign({}, propsForDnDZone, {
+      })), jsx(DragAndDropZone, Object.assign({}, propsForDnDZone, {
         location: "below"
-      })));
+      }))));
     }
   }, {
     key: "render",
@@ -147,7 +140,8 @@ export var BuildingStimulus = (_dec = themeable(theme, styles), _dec(_class = (_
   // Passed in by connect
   draggingAboveHalf: PropTypes.bool.isRequired,
   draggingOver: PropTypes.bool.isRequired,
-  dropIntoEmptyStimulus: PropTypes.bool
+  dropIntoEmptyStimulus: PropTypes.bool,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   draggingAboveHalf: false,
   dropIntoEmptyStimulus: false,

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

@@ -0,0 +1,11 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    sidebarStimulusWrapper: {
+      transform: 'translate3d(0, 0, 0)'
+      /* for drag and drop preview to work */
+
+    }
+  };
+};
+
+export default generateStyle;

package/es/building/components/layout/Sidebar/Stimulus/theme.js

@@ -1,3 +1,5 @@
-export default function generator() {
+var generateComponentTheme = function generateComponentTheme() {
   return {};
-}
+};
+
+export default generateComponentTheme;

package/es/building/components/layout/Sidebar/presenter.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,33 +5,23 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
+
 /* eslint "array-callback-return": "warn" */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import SidebarItem from "./SidebarItem/index.js";
 import Stimulus from "./Stimulus/index.js";
 import Sidebar from "../../../../common/components/layout/sidebar/Sidebar/index.js";
 import generateDisplayPositions from "../../../../common/util/generateDisplayPositions.js";
 import { extractTextFromHtml } from '@instructure/quiz-interactions';
-var styles = {
-  componentId: 'bAyez',
-  template: function template(theme) {
-    return "\n\n.bAyez_eUtI{padding:".concat(theme.bottomPadding || 'inherit', "}\n\n.bAyez_bBLs,.bAyez_fYKY .bAyez_blUq,.bAyez_eNNp .bAyez_eyTz{display:none}");
-  },
-  'bottomPadding': 'bAyez_eUtI',
-  'hide': 'bAyez_bBLs',
-  'sidebarIsClosed': 'bAyez_fYKY',
-  'openItems': 'bAyez_blUq',
-  'sidebarIsOpen': 'bAyez_eNNp',
-  'closedItems': 'bAyez_eyTz'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 import { SIDEBAR_ITEM_REF } from '@instructure/quiz-common';
 import t from '@instructure/quiz-i18n/es/format-message';
-export var BuildingSidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var BuildingSidebar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(BuildingSidebar, _Component);
 
   var _super = _createSuper(BuildingSidebar);
@@ -57,7 +46,7 @@ export var BuildingSidebar = (_dec = themeable(theme, styles), _dec(_class = (_t
     _this.renderItem = function () {
       var isOver = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : _this.props.isOver;
       return function (quizEntry, displayPosition, sidebarIsOpen) {
-        return /*#__PURE__*/React.createElement(SidebarItem, {
+        return jsx(SidebarItem, {
           key: _this.setKey(quizEntry.id),
           ref: _this.setRef(quizEntry.id),
           inStimulus: quizEntry.isInStimulus,
@@ -95,6 +84,16 @@ export var BuildingSidebar = (_dec = themeable(theme, styles), _dec(_class = (_t
   }
 
   _createClass(BuildingSidebar, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.makeStyles();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles();
+    }
+  }, {
     key: "getItemBody",
     value: function getItemBody(quizEntry) {
       switch (quizEntry.entryType) {
@@ -149,7 +148,7 @@ export var BuildingSidebar = (_dec = themeable(theme, styles), _dec(_class = (_t
   }, {
     key: "renderStimulus",
     value: function renderStimulus(quizEntry, displayPosition, sidebarIsOpen) {
-      return /*#__PURE__*/React.createElement(Stimulus, {
+      return jsx(Stimulus, {
         key: this.setKey(quizEntry.id),
         ref: this.setRef(quizEntry.id),
         displayPosition: displayPosition,
@@ -190,33 +189,36 @@ export var BuildingSidebar = (_dec = themeable(theme, styles), _dec(_class = (_t
   }, {
     key: "render",
     value: function render() {
-      var _classnames2;
-
-      var dndClasses = classnames(styles.bottomPadding, _defineProperty({}, styles.hide, !this.props.isOver));
-      var sidebarClasses = classnames((_classnames2 = {}, _defineProperty(_classnames2, styles.sidebarIsOpen, this.props.sidebarOpen), _defineProperty(_classnames2, styles.sidebarIsClosed, !this.props.sidebarOpen), _classnames2));
+      var openClass = !this.props.sidebarOpen ? 'sidebarIsClosed' : 'sidebarIsOpen';
+      var isOverClass = !this.props.isOver ? 'hide' : '';
       return this.props.connectDropTarget(
-      /*#__PURE__*/
-
       /* React DnD requires a native element node like our div below */
-      React.createElement("div", {
-        className: sidebarClasses
-      }, /*#__PURE__*/React.createElement(Sidebar, {
+      jsx("div", {
+        style: {
+          display: 'flex'
+        }
+      }, jsx("div", {
+        className: openClass
+      }, jsx(Sidebar, {
         role: this.props.role,
         scrollToItem: this.scrollToItem,
         sidebarOpen: this.props.sidebarOpen,
         toggleSidebar: this.props.toggleSidebar,
         screenreaderNotification: this.props.screenreaderNotification,
         totalPointsPossible: this.props.totalPointsPossible
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         ref: this.storeStartQuizEntriesRef
-      }), /*#__PURE__*/React.createElement("div", {
-        className: styles.closedItems
-      }, this.renderSidebarItems(false)), /*#__PURE__*/React.createElement("div", {
-        className: styles.openItems
-      }, this.renderSidebarItems(true)), /*#__PURE__*/React.createElement("div", {
+      }), jsx("div", {
+        className: "closedItems",
+        css: this.props.styles.closedItems
+      }, this.renderSidebarItems(false)), jsx("div", {
+        className: "openItems",
+        css: this.props.styles.openItems
+      }, this.renderSidebarItems(true)), jsx("div", {
         ref: this.storeEndQuizEntriesRef,
-        className: dndClasses
-      }))));
+        className: isOverClass,
+        css: this.props.styles.bottomPadding
+      })))));
     }
   }]);
 
@@ -231,7 +233,9 @@ export var BuildingSidebar = (_dec = themeable(theme, styles), _dec(_class = (_t
   sidebarOpen: PropTypes.bool.isRequired,
   toggleSidebar: PropTypes.func.isRequired,
   screenreaderNotification: PropTypes.func.isRequired,
-  totalPointsPossible: PropTypes.number.isRequired
+  totalPointsPossible: PropTypes.number.isRequired,
+  styles: PropTypes.object,
+  makeStyles: PropTypes.func
 }, _class2.defaultProps = {
   isOver: false,
   role: 'navigation'

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

@@ -0,0 +1,28 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+
+var generateStyle = function generateStyle(componentTheme, props) {
+  return {
+    /* this class is to allow space for dragging an item
+    below a stimulus at the bottom of a long quiz */
+    bottomPadding: _objectSpread({
+      padding: componentTheme.bottomPadding
+    }, !props.isOver && {
+      display: 'none'
+    }),
+    hide: {
+      display: 'none'
+    },
+    closedItems: _objectSpread({
+      display: 'block'
+    }, props.sidebarOpen && {
+      display: 'none'
+    }),
+    openItems: _objectSpread({
+      display: 'block'
+    }, !props.sidebarOpen && {
+      display: 'none'
+    })
+  };
+};
+
+export default generateStyle;

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

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

package/es/building/components/layout/header/BuildingButtons/presenter.js

@@ -5,26 +5,19 @@ 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 { IconButton } from '@instructure/ui-buttons';
 import { Menu } from '@instructure/ui-menu';
 import { IconExportLine, IconMoreSolid, IconImportLine, IconBankLine, IconPrinterLine, IconSpeedGraderLine } from '@instructure/ui-icons';
 import PrintTrigger from "../../../../../common/components/shared/PrintTrigger/index.js";
 import { PRINT_CURRENT_PAGE, PRINT_BLANK } from '@instructure/quiz-common';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
-var styles = {
-  componentId: 'exAHi',
-  template: function template(theme) {
-    return "\n\n.exAHi_cKjJ{color:".concat(theme.quizSavingColor || 'inherit', ";margin:").concat(theme.quizSavingMargin || 'inherit', "}\n\n.exAHi_dxna{align-items:center;display:flex;height:100%;margin-right:").concat(theme.buttonsHolderMargin || 'inherit', "}\n\n.exAHi_cLWx{font-size:").concat(theme.menuIconFontSize || 'inherit', ";margin-right:").concat(theme.menuIconMargin || 'inherit', ";vertical-align:middle}");
-  },
-  'quizSaving': 'exAHi_cKjJ',
-  'buttonsHolder': 'exAHi_dxna',
-  'menuIcon': 'exAHi_cLWx'
-};
-import theme from "./theme.js";
-export var BuildingButtons = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var BuildingButtons = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(BuildingButtons, _Component);
 
   var _super = _createSuper(BuildingButtons);
@@ -83,8 +76,8 @@ export var BuildingButtons = (_dec = themeable(theme, styles), _dec(_class = (_t
     key: "renderSavingMessage",
     value: function renderSavingMessage() {
       if (this.props.quizSaving) {
-        return /*#__PURE__*/React.createElement("div", {
-          className: styles.quizSaving
+        return jsx("div", {
+          css: this.props.styles.quizSaving
         }, t('Saving...'));
       }
     }
@@ -100,43 +93,43 @@ export var BuildingButtons = (_dec = themeable(theme, styles), _dec(_class = (_t
       var menuItems = [];
 
       if (this.props.speedgraderLink) {
-        menuItems.push( /*#__PURE__*/React.createElement(Menu.Item, {
+        menuItems.push(jsx(Menu.Item, {
           key: "speedgrader",
           onSelect: this.openSpeedgraderLink
-        }, /*#__PURE__*/React.createElement(IconSpeedGraderLine, {
-          className: styles.menuIcon
+        }, jsx(IconSpeedGraderLine, {
+          css: this.props.styles.menuIcon
         }), t('Speedgrader')));
       }
 
-      menuItems.push( /*#__PURE__*/React.createElement(Menu.Item, {
+      menuItems.push(jsx(Menu.Item, {
         key: "import",
         disabled: !this.props.canImport,
         onSelect: this.props.openModal,
         "data-automation": "sdk-import-content-menuitem"
-      }, /*#__PURE__*/React.createElement(IconImportLine, {
-        className: styles.menuIcon,
+      }, jsx(IconImportLine, {
+        css: this.props.styles.menuIcon,
         "data-automation": "sdk-import-content-icon"
       }), t('Import Content')));
 
       if (this.props.contentExportEnabled) {
-        menuItems.push( /*#__PURE__*/React.createElement(Menu.Item, {
+        menuItems.push(jsx(Menu.Item, {
           key: "export",
           disabled: !this.props.canExport,
           onSelect: this.startQuizExportJob,
           "data-automation": "sdk-export-content-menuitem"
-        }, /*#__PURE__*/React.createElement(IconExportLine, {
-          className: styles.menuIcon,
+        }, jsx(IconExportLine, {
+          css: this.props.styles.menuIcon,
           "data-automation": "sdk-export-content-icon"
         }), t('Export Content')));
       }
 
       if (this.props.enableItemBanking) {
-        menuItems.push( /*#__PURE__*/React.createElement(Menu.Item, {
+        menuItems.push(jsx(Menu.Item, {
           key: "banks",
           onSelect: this.props.navigateToBanks,
           "data-automation": "sdk-manage-item-banks-menuitem"
-        }, /*#__PURE__*/React.createElement(IconBankLine, {
-          className: styles.menuIcon,
+        }, jsx(IconBankLine, {
+          css: this.props.styles.menuIcon,
           "data-automation": "sdk-manage-item-banks-icon"
         }), t('Manage Item Banks')));
       }
@@ -145,26 +138,26 @@ export var BuildingButtons = (_dec = themeable(theme, styles), _dec(_class = (_t
         {
           /* eslint-disable react/jsx-no-bind */
         }
-        menuItems.push( /*#__PURE__*/React.createElement(Menu.Item, {
+        menuItems.push(jsx(Menu.Item, {
           key: "printKey",
           disabled: !this.props.hasQuestions || this.props.isEditing,
           onSelect: function onSelect() {
             return handlePrint(PRINT_CURRENT_PAGE);
           },
           "data-automation": "sdk-print-key-menuitem"
-        }, /*#__PURE__*/React.createElement(IconPrinterLine, {
-          className: styles.menuIcon,
+        }, jsx(IconPrinterLine, {
+          css: this.props.styles.menuIcon,
           "data-automation": "sdk-print-icon"
         }), t('Print Key (With Answers)')));
-        menuItems.push( /*#__PURE__*/React.createElement(Menu.Item, {
+        menuItems.push(jsx(Menu.Item, {
           key: "printBlank",
           disabled: !this.props.hasQuestions || this.props.isEditing,
           onSelect: function onSelect() {
             return handlePrint(PRINT_BLANK);
           },
           "data-automation": "sdk-print-blank-menuitem"
-        }, /*#__PURE__*/React.createElement(IconPrinterLine, {
-          className: styles.menuIcon,
+        }, jsx(IconPrinterLine, {
+          css: this.props.styles.menuIcon,
           "data-automation": "sdk-print-blank-icon"
         }), t('Print Blank Quiz')));
         {
@@ -173,8 +166,8 @@ export var BuildingButtons = (_dec = themeable(theme, styles), _dec(_class = (_t
       }
 
       if (menuItems.length < 1) return;
-      return /*#__PURE__*/React.createElement(Menu, {
-        trigger: /*#__PURE__*/React.createElement(IconButton, {
+      return jsx(Menu, {
+        trigger: jsx(IconButton, {
           renderIcon: IconMoreSolid,
           withBackground: false,
           withBorder: false,
@@ -188,9 +181,9 @@ export var BuildingButtons = (_dec = themeable(theme, styles), _dec(_class = (_t
     value: function render() {
       var _this2 = this;
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.buttonsHolder
-      }, this.renderSavingMessage(), /*#__PURE__*/React.createElement(PrintTrigger, {
+      return jsx("div", {
+        css: this.props.styles.buttonsHolder
+      }, this.renderSavingMessage(), jsx(PrintTrigger, {
         render: function render(handlePrint) {
           return _this2.renderMenu(handlePrint);
         },
@@ -222,7 +215,8 @@ export var BuildingButtons = (_dec = themeable(theme, styles), _dec(_class = (_t
   setBanksTrayButtonRef: PropTypes.func.isRequired,
   speedgraderLink: PropTypes.string,
   startExport: PropTypes.func.isRequired,
-  contextUuid: PropTypes.string
+  contextUuid: PropTypes.string,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   activeQuizId: null,
   addInfo: function addInfo() {},

package/es/building/components/layout/header/BuildingButtons/styles.js

@@ -0,0 +1,21 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    quizSaving: {
+      color: componentTheme.quizSavingColor,
+      margin: componentTheme.quizSavingMargin
+    },
+    buttonsHolder: {
+      height: '100%',
+      marginRight: componentTheme.buttonsHolderMargin,
+      display: 'flex',
+      alignItems: 'center'
+    },
+    menuIcon: {
+      verticalAlign: 'middle',
+      marginRight: componentTheme.menuIconMargin,
+      fontSize: componentTheme.menuIconFontSize
+    }
+  };
+};
+
+export default generateStyle;

package/es/building/components/layout/header/BuildingButtons/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
       spacing = _ref.spacing,
       typography = _ref.typography;
@@ -9,4 +9,6 @@ export default function generator(_ref) {
     menuIconMargin: spacing.xSmall,
     menuIconFontSize: typography.fontSizeLarge
   };
-}
+};
+
+export default generateComponentTheme;