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

package/es/reporting/components/quizAnalysis/QuizAnalysisOverview.js

@@ -56,8 +56,8 @@ export var QuizAnalysisOverview = (_dec = withStyle(generateStyle, generateCompo
   }
 
   _createClass(QuizAnalysisOverview, [{
-    key: "defaulMetrics",
-    value: function defaulMetrics() {
+    key: "defaultMetrics",
+    value: function defaultMetrics() {
       var quizAnalysis = this.props.quizAnalysis;
       var formattedElapsedTime = jsx(FormattedDuration, {
         fontSize: "x-large",
@@ -67,25 +67,25 @@ export var QuizAnalysisOverview = (_dec = withStyle(generateStyle, generateCompo
         key: "highScore",
         renderLabel: t('High Score'),
         renderValue: quizAnalysis.highScore(),
-        css: this.props.styles.metric,
+        customStyles: this.props.styles.metric,
         isGroupChild: true
       }), jsx(MetricsListItem, {
         key: "lowScore",
         renderLabel: t('Low Score'),
         renderValue: quizAnalysis.lowScore(),
-        css: this.props.styles.metric,
+        customStyles: this.props.styles.metric,
         isGroupChild: true
       }), jsx(MetricsListItem, {
         key: "meanScore",
         renderLabel: t('Mean Score'),
         renderValue: quizAnalysis.meanScore(),
-        css: this.props.styles.metric,
+        customStyles: this.props.styles.metric,
         isGroupChild: true
       }), jsx(MetricsListItem, {
         key: "standardDeviation",
         renderLabel: t('Standard Deviation'),
         renderValue: quizAnalysis.standardDeviation(),
-        css: this.props.styles.metric,
+        customStyles: this.props.styles.metric,
         isGroupChild: true
       }), jsx(MetricsListItem, {
         key: "meanElapsedTime",
@@ -93,13 +93,13 @@ export var QuizAnalysisOverview = (_dec = withStyle(generateStyle, generateCompo
         renderValue: jsx(Text, {
           size: "x-large"
         }, formattedElapsedTime),
-        css: this.props.styles.metric,
+        customStyles: this.props.styles.metric,
         isGroupChild: true
       }), jsx(MetricsListItem, {
         key: "cronbachsAlpha",
         renderLabel: t('Cronbach\'s Alpha'),
         renderValue: quizAnalysis.cronbachsAlpha(),
-        css: this.props.styles.metric,
+        customStyles: this.props.styles.metric,
         isGroupChild: true
       }));
     }
@@ -112,7 +112,7 @@ export var QuizAnalysisOverview = (_dec = withStyle(generateStyle, generateCompo
           quizAnalysis = _this$props.quizAnalysis,
           quizTitle = _this$props.quizTitle;
       if (!quizAnalysis.isLoaded()) return _ref2;
-      var list = React.Children.count(this.props.children) === 0 ? this.defaulMetrics() : jsx(MetricGroup, null, this.props.children);
+      var list = React.Children.count(this.props.children) === 0 ? this.defaultMetrics() : jsx(MetricGroup, null, this.props.children);
       return jsx(Card, {
         css: this.props.styles.root
       }, jsx(Heading, {

package/es/reporting/components/resources/QuizAndItemAnalysis/presenter.js

@@ -5,11 +5,12 @@ 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 t from '@instructure/quiz-i18n/es/format-message';
 import { withI18nSupport } from '@instructure/quiz-common';
 import Spinner from "../../../../common/components/shared/spinner/Spinner.js";
@@ -18,20 +19,12 @@ import FormattedDuration from "../../../../common/components/shared/FormattedDur
 import ItemAnalysisRow from "../../../../reporting/components/itemAnalysis/ItemAnalysisRow/index.js";
 import QuizAnalysisOverview from "../../../../reporting/components/quizAnalysis/QuizAnalysisOverview.js";
 import MetricsListItem from "../../MetricsListItem/index.js";
-var styles = {
-  componentId: 'cNnNG',
-  template: function template(theme) {
-    return "\n\n.cNnNG_nvdO{margin:".concat(theme.titleMarginTop || 'inherit', " ").concat(theme.titleMarginLeftRight || 'inherit', " ").concat(theme.titleMarginBottom || 'inherit', " ").concat(theme.titleMarginLeftRight || 'inherit', "}\n\n.cNnNG_bwKH{color:").concat(theme.emptyTextColor || 'inherit', ";font-size:").concat(theme.emptyTextFontSize || 'inherit', ";padding:").concat(theme.emptyTextPadding || 'inherit', ";text-align:center}\n\n[dir=ltr] .cNnNG_bwKH,[dir=rtl] .cNnNG_bwKH{text-align:center}\n\n.cNnNG_eiMu{justify-content:center}");
-  },
-  'title': 'cNnNG_nvdO',
-  'emptyText': 'cNnNG_bwKH',
-  'metric': 'cNnNG_eiMu'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 
-var _ref2 = /*#__PURE__*/React.createElement(Spinner, null);
+var _ref2 = jsx(Spinner, null);
 
-export var QuizAndItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_withI18nSupport) {
+export var QuizAndItemAnalysis = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_withI18nSupport) {
   _inherits(QuizAndItemAnalysis, _withI18nSupport);
 
   var _super = _createSuper(QuizAndItemAnalysis);
@@ -70,9 +63,9 @@ export var QuizAndItemAnalysis = (_dec = themeable(theme, styles), _dec(_class =
       var mean = t.rich('{score}<0>/{possible, number} pts</0>', {
         0: function _(_ref) {
           var children = _ref.children;
-          return /*#__PURE__*/React.createElement("span", {
+          return jsx("span", {
             key: "mean",
-            className: styles.metricNote
+            css: _this.props.styles.metricNote
           }, children);
         },
         score: itemAnalysis.meanScore(this.locale) || 0,
@@ -81,41 +74,41 @@ export var QuizAndItemAnalysis = (_dec = themeable(theme, styles), _dec(_class =
       this.props.itemMetrics.forEach(function (key) {
         switch (key) {
           case 'difficultyIndex':
-            metrics.push( /*#__PURE__*/React.createElement(MetricsListItem, {
+            metrics.push(jsx(MetricsListItem, {
               key: "difficultyIndex",
               renderLabel: t('Difficulty Index'),
               renderValue: itemAnalysis.difficultyIndex(_this.locale),
-              className: styles.metric,
+              customStyles: _this.props.styles.metric,
               isGroupChild: true
             }));
             break;
 
           case 'discriminationIndex':
-            metrics.push( /*#__PURE__*/React.createElement(MetricsListItem, {
+            metrics.push(jsx(MetricsListItem, {
               key: "discriminationIndex",
               renderLabel: t('Discrimination Index'),
               renderValue: itemAnalysis.discriminationIndex(_this.locale),
-              className: styles.metric,
+              customStyles: _this.props.styles.metric,
               isGroupChild: true
             }));
             break;
 
           case 'rpb':
-            metrics.push( /*#__PURE__*/React.createElement(MetricsListItem, {
+            metrics.push(jsx(MetricsListItem, {
               key: "rpb",
               renderLabel: t('RPB'),
               renderValue: itemAnalysis.pointBiserial(_this.locale),
-              className: styles.metric,
+              customStyles: _this.props.styles.metric,
               isGroupChild: true
             }));
             break;
 
           case 'meanEarnedScore':
-            metrics.push( /*#__PURE__*/React.createElement(MetricsListItem, {
+            metrics.push(jsx(MetricsListItem, {
               key: "meanEarnedScore",
               renderLabel: t('Mean Earned Score'),
               renderValue: mean,
-              className: styles.metric,
+              customStyles: _this.props.styles.metric,
               isGroupChild: true
             }));
             break;
@@ -126,68 +119,70 @@ export var QuizAndItemAnalysis = (_dec = themeable(theme, styles), _dec(_class =
   }, {
     key: "generateQuizAnalysisMetrics",
     value: function generateQuizAnalysisMetrics(quizAnalysis) {
+      var _this2 = this;
+
       var metrics = [];
-      var formattedElapsedTime = /*#__PURE__*/React.createElement(FormattedDuration, {
+      var formattedElapsedTime = jsx(FormattedDuration, {
         seconds: quizAnalysis.meanElapsedTime()
       });
       this.props.quizMetrics.forEach(function (key) {
         switch (key) {
           case 'highScore':
-            metrics.push( /*#__PURE__*/React.createElement(MetricsListItem, {
+            metrics.push(jsx(MetricsListItem, {
               key: "highScore",
               renderLabel: t('High Score'),
               renderValue: quizAnalysis.highScore(),
-              className: styles.metric,
+              customStyles: _this2.props.styles.metric,
               isGroupChild: true
             }));
             break;
 
           case 'lowScore':
-            metrics.push( /*#__PURE__*/React.createElement(MetricsListItem, {
+            metrics.push(jsx(MetricsListItem, {
               key: "lowScore",
               renderLabel: t('Low Score'),
               renderValue: quizAnalysis.lowScore(),
-              className: styles.metric,
+              customStyles: _this2.props.styles.metric,
               isGroupChild: true
             }));
             break;
 
           case 'meanScore':
-            metrics.push( /*#__PURE__*/React.createElement(MetricsListItem, {
+            metrics.push(jsx(MetricsListItem, {
               key: "meanScore",
               renderLabel: t('Mean Score'),
               renderValue: quizAnalysis.meanScore(),
-              className: styles.metric,
+              customStyles: _this2.props.styles.metric,
               isGroupChild: true
             }));
             break;
 
           case 'standardDeviation':
-            metrics.push( /*#__PURE__*/React.createElement(MetricsListItem, {
+            metrics.push(jsx(MetricsListItem, {
               key: "standardDeviation",
               renderLabel: t('Standard Deviation'),
               renderValue: quizAnalysis.standardDeviation(),
-              className: styles.metric,
+              customStyles: _this2.props.styles.metric,
               isGroupChild: true
             }));
             break;
 
           case 'meanElapsedTime':
-            metrics.push( /*#__PURE__*/React.createElement(MetricsListItem, {
+            metrics.push(jsx(MetricsListItem, {
               key: "meanElapsedTime",
               renderLabel: t('Mean Elapsed Time'),
               renderValue: formattedElapsedTime,
-              className: styles.metric,
+              customStyles: _this2.props.styles.metric,
               isGroupChild: true
             }));
             break;
 
           case 'cronbachsAlpha':
-            metrics.push( /*#__PURE__*/React.createElement(MetricsListItem, {
+            metrics.push(jsx(MetricsListItem, {
               key: "cronbachsAlpha",
               renderLabel: t('Cronbach\'s Alpha'),
               renderValue: quizAnalysis.cronbachsAlpha(),
-              className: styles.metric,
+              customStyles: _this2.props.styles.metric,
               isGroupChild: true
             }));
             break;
@@ -198,7 +193,7 @@ export var QuizAndItemAnalysis = (_dec = themeable(theme, styles), _dec(_class =
   }, {
     key: "renderItemAnalysisRows",
     value: function renderItemAnalysisRows() {
-      var _this2 = this;
+      var _this3 = this;
 
       var _this$props = this.props,
           animateDelay = _this$props.animateDelay,
@@ -213,16 +208,16 @@ export var QuizAndItemAnalysis = (_dec = themeable(theme, styles), _dec(_class =
         return;
       }
 
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-        className: styles.title
-      }, /*#__PURE__*/React.createElement(Heading, {
+      return jsx("div", null, jsx("div", {
+        css: this.props.styles.title
+      }, jsx(Heading, {
         level: "h3",
         as: "h2",
         color: "primary"
       }, t('Item Analysis'))), itemAnalyses.toArray().map(function (itemAnalysis, i) {
-        var itemMetrics = _this2.generateItemAnalysisMetrics(itemAnalysis);
+        var itemMetrics = _this3.generateItemAnalysisMetrics(itemAnalysis);
 
-        return /*#__PURE__*/React.createElement(ItemAnalysisRow, {
+        return jsx(ItemAnalysisRow, {
           animateDelay: animateDelay,
           animateDuration: animateDuration,
           expanded: openRows[itemAnalysis.itemId],
@@ -232,16 +227,16 @@ export var QuizAndItemAnalysis = (_dec = themeable(theme, styles), _dec(_class =
           position: i + 1,
           quizId: activeQuizId,
           toggleExpanded: toggleItemAnalysisRowExpanded,
-          outcomesEndpoint: _this2.props.outcomesEndpoint,
-          outcomesToken: _this2.props.outcomesToken
+          outcomesEndpoint: _this3.props.outcomesEndpoint,
+          outcomesToken: _this3.props.outcomesToken
         }, itemMetrics);
       }));
     }
   }, {
     key: "renderNotFound",
     value: function renderNotFound() {
-      return /*#__PURE__*/React.createElement(Card, {
-        className: styles.emptyText
+      return jsx(Card, {
+        css: this.props.styles.emptyText
       }, t('This report is no longer in use, please use the new Quiz and Item Analysis report.  ' + 'Reports generated before { lastReportDate } from this link will be available ' + 'until the summer of 2024. New reports cannot be generated from this link.', {
         lastReportDate: this.formatDateShort(new Date('2024-01-31'))
       }));
@@ -255,9 +250,9 @@ export var QuizAndItemAnalysis = (_dec = themeable(theme, styles), _dec(_class =
           quiz = _this$props2.quiz,
           quizAnalysis = _this$props2.quizAnalysis;
       var quizMetrics = this.generateQuizAnalysisMetrics(quizAnalysis);
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         className: "fs-mask"
-      }, /*#__PURE__*/React.createElement(QuizAnalysisOverview, {
+      }, jsx(QuizAnalysisOverview, {
         animateDelay: animateDelay,
         animateDuration: animateDuration,
         quizAnalysis: quizAnalysis,
@@ -295,7 +290,8 @@ export var QuizAndItemAnalysis = (_dec = themeable(theme, styles), _dec(_class =
   getExistingQuiz: PropTypes.func.isRequired,
   getItemAnalyses: PropTypes.func.isRequired,
   getQuizAnalysis: PropTypes.func.isRequired,
-  locale: PropTypes.string
+  locale: PropTypes.string,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   animateDelay: void 0,
   animateDuration: void 0,

package/es/reporting/components/resources/QuizAndItemAnalysis/styles.js

@@ -0,0 +1,18 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    title: {
+      margin: "".concat(componentTheme.titleMarginTop, " ").concat(componentTheme.titleMarginLeftRight, " ").concat(componentTheme.titleMarginBottom, " ").concat(componentTheme.titleMarginLeftRight)
+    },
+    emptyText: {
+      padding: componentTheme.emptyTextPadding,
+      fontSize: componentTheme.emptyTextFontSize,
+      textAlign: 'center',
+      color: componentTheme.emptyTextColor
+    },
+    metric: {
+      justifyContent: 'center'
+    }
+  };
+};
+
+export default generateStyle;

package/es/reporting/components/resources/QuizAndItemAnalysis/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       typography = _ref.typography,
       colors = _ref.colors;
@@ -10,4 +10,6 @@ export default function generator(_ref) {
     emptyTextFontSize: typography.fontSizeLarge,
     emptyTextColor: colors.ash
   };
-}
+};
+
+export default generateComponentTheme;

package/lib/banks/components/BankEntryRow/presenter.js

@@ -57,8 +57,6 @@ var _index2 = _interopRequireDefault(require("../../../common/components/shared/
 
 var _QuizEntry = _interopRequireDefault(require("../../../common/records/QuizEntry.js"));
 
-var _Overlay = _interopRequireDefault(require("../../../common/components/shared/overlay/Overlay.js"));
-
 var _index3 = _interopRequireDefault(require("../../../common/components/resources/item/ItemShow/index.js"));
 
 var _index4 = _interopRequireDefault(require("../../../common/components/resources/stimulus/StimulusShowInfo/index.js"));
@@ -69,6 +67,8 @@ var _styles = _interopRequireDefault(require("./styles.js"));
 
 var _theme = _interopRequireDefault(require("./theme.js"));
 
+var _index6 = _interopRequireDefault(require("../../../common/components/shared/overlay/index.js"));
+
 var _dec, _class, _class2, _temp;
 
 var _ref2 = (0, _emotion.jsx)("div", null);
@@ -307,7 +307,7 @@ var BankEntryRow = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
       // or title plain text
 
       if (itemOrStimulus.itemBody) {
-        return (0, _emotion.jsx)(_quizRce.RichContentRendererEmotion, {
+        return (0, _emotion.jsx)(_quizRce.RichContentRenderer, {
           customStyles: this.props.styles.stem,
           content: itemOrStimulus.itemBody
         });
@@ -385,7 +385,7 @@ var BankEntryRow = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
     key: "render",
     value: function render() {
       var isExpanded = this.props.isExpanded;
-      return (0, _emotion.jsx)(_Overlay.default, {
+      return (0, _emotion.jsx)(_index6.default, {
         onClick: this.props.toggleExpanded,
         tabIndex: "-1",
         ariaLabel: this.entryIdentifier()

package/lib/building/components/resources/ItemFeedbackModal/presenter.js

@@ -118,7 +118,7 @@ var ItemFeedbackModal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
   }, {
     key: "renderContent",
     value: function renderContent() {
-      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_quizRce.RichContentRendererEmotion, {
+      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_quizRce.RichContentRenderer, {
         customStyles: this.props.styles.itemStem,
         content: this.props.item.itemBody
       }), this.renderRichContentInput('correct', (0, _formatMessage.default)('For a correct answer')), this.renderRichContentInput('incorrect', (0, _formatMessage.default)('For an incorrect answer')), this.renderRichContentInput('neutral', (0, _formatMessage.default)('Provide general feedback (regardless of answer)')));

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

@@ -23,7 +23,7 @@ var _emotion = require("@instructure/emotion");
 
 var _quizRce = require("@instructure/quiz-rce");
 
-var _index = _interopRequireDefault(require("../../../../../../common/components/shared/overlayEmotion/index.js"));
+var _index = _interopRequireDefault(require("../../../../../../common/components/shared/overlay/index.js"));
 
 var _makeScrollable = _interopRequireDefault(require("../../../../../../common/components/shared/functionality/makeScrollable.js"));
 
@@ -75,7 +75,7 @@ var QuizInstructionsShow = (_dec = (0, _emotion.withStyle)(_styles.default, _the
         hideOverlay: this.props.contentLocked
       }, (0, _emotion.jsx)("div", {
         "data-automation": "instructions-show-text"
-      }, (0, _emotion.jsx)(_quizRce.RichContentRendererEmotion, {
+      }, (0, _emotion.jsx)(_quizRce.RichContentRenderer, {
         customStyles: this.props.styles.instructionsShowText,
         content: this.props.instructions || (0, _formatMessage.default)('Add Instructions...')
       }))));

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

@@ -25,7 +25,7 @@ var _uiTruncateText = require("@instructure/ui-truncate-text");
 
 var _uiText = require("@instructure/ui-text");
 
-var _index = _interopRequireDefault(require("../../../../../../common/components/shared/overlayEmotion/index.js"));
+var _index = _interopRequireDefault(require("../../../../../../common/components/shared/overlay/index.js"));
 
 var _makeScrollable = _interopRequireDefault(require("../../../../../../common/components/shared/functionality/makeScrollable.js"));
 

package/lib/building/components/resources/quizEntry/QuizEntryShow/presenter.js

@@ -41,7 +41,7 @@ var _fitbCopyHelper = require("../../../../../common/util/fitbCopyHelper.js");
 
 var _Item = _interopRequireDefault(require("../../../../../common/records/Item.js"));
 
-var _index = _interopRequireDefault(require("../../../../../common/components/shared/overlayEmotion/index.js"));
+var _index = _interopRequireDefault(require("../../../../../common/components/shared/overlay/index.js"));
 
 var _index2 = _interopRequireDefault(require("../../ActionButtons/index.js"));
 

package/lib/common/components/resources/quiz/instructions/Instructions.js

@@ -50,7 +50,7 @@ var QuizInstructions = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.d
         "data-testid": "instructionsWrapper",
         css: this.props.styles.wrapper,
         tabIndex: "-1"
-      }, (0, _emotion.jsx)(_quizRce.RichContentRendererEmotion, {
+      }, (0, _emotion.jsx)(_quizRce.RichContentRenderer, {
         customStyles: this.props.styles.text,
         content: this.props.quiz.instructions
       }));

package/lib/common/components/resources/sessionItemResult/SessionItemResult/presenter.js

@@ -211,7 +211,7 @@ var SessionItemResult = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
           margin: "xx-small small"
         }, formattedFeedbackTitle), (0, _emotion.jsx)("div", {
           css: this.props.styles.textPadding
-        }, (0, _emotion.jsx)(_quizRce.RichContentRendererEmotion, {
+        }, (0, _emotion.jsx)(_quizRce.RichContentRenderer, {
           customStyles: this.props.styles.itemFeedbackText,
           content: feedbackContent
         })));
@@ -255,7 +255,7 @@ var SessionItemResult = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
             tabIndex: "0"
           }, (0, _emotion.jsx)("div", {
             css: this.props.styles.itemFeedbackLabel
-          }, (0, _formatMessage.default)('Feedback from grader')), (0, _emotion.jsx)(_quizRce.RichContentRendererEmotion, {
+          }, (0, _formatMessage.default)('Feedback from grader')), (0, _emotion.jsx)(_quizRce.RichContentRenderer, {
             customStyles: this.props.styles.itemFeedbackText,
             content: graderFeedback.content
           }));

package/lib/common/components/resources/stimulus/StimulusShow/index.js

@@ -35,7 +35,7 @@ var _styles = _interopRequireDefault(require("./styles.js"));
 
 var _theme = _interopRequireDefault(require("./theme.js"));
 
-var _index3 = _interopRequireDefault(require("../../../shared/overlayEmotion/index.js"));
+var _index3 = _interopRequireDefault(require("../../../shared/overlay/index.js"));
 
 var _dec, _class, _class2, _temp;
 

package/lib/common/components/shared/{overlayEmotion → overlay}/index.js

@@ -29,17 +29,17 @@ var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var OverlayEmotion = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(OverlayEmotion, _Component);
+var Overlay = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(Overlay, _Component);
 
-  var _super = (0, _createSuper2.default)(OverlayEmotion);
+  var _super = (0, _createSuper2.default)(Overlay);
 
-  function OverlayEmotion() {
-    (0, _classCallCheck2.default)(this, OverlayEmotion);
+  function Overlay() {
+    (0, _classCallCheck2.default)(this, Overlay);
     return _super.apply(this, arguments);
   }
 
-  (0, _createClass2.default)(OverlayEmotion, [{
+  (0, _createClass2.default)(Overlay, [{
     key: "overlayDiv",
     value: function overlayDiv() {
       if (this.props.hideOverlay) {
@@ -76,8 +76,8 @@ var OverlayEmotion = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
       }, this.overlayDiv(), children));
     }
   }]);
-  OverlayEmotion.displayName = "OverlayEmotion";
-  return OverlayEmotion;
+  Overlay.displayName = "Overlay";
+  return Overlay;
 }(_react.Component), _class2.propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.arrayOf(_propTypes.default.element)]).isRequired,
   hideOverlay: _propTypes.default.bool,
@@ -92,5 +92,5 @@ var OverlayEmotion = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
   wrapperStyles: {},
   ariaLabel: void 0
 }, _temp)) || _class);
-var _default = OverlayEmotion;
+var _default = Overlay;
 exports.default = _default;

package/{es/common/components/shared/overlayEmotion → lib/common/components/shared/overlay}/styles.js

@@ -1,4 +1,16 @@
+"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 {
     root: {
       position: 'relative',
@@ -12,12 +24,15 @@ var generateStyle = function generateStyle(componentTheme) {
       zIndex: componentTheme.overlayZIndex,
       height: '100%',
       width: '100%',
-      '&:hover': {
+      '&:hover': (0, _defineProperty2.default)({
         boxSizing: 'border-box',
         borderLeft: "".concat(componentTheme.overlayBarSize, " solid ").concat(componentTheme.overlayBarColor)
-      }
+      }, printMq, {
+        borderLeft: 'none'
+      })
     }
   };
 };
 
-export default generateStyle;
+var _default = generateStyle;
+exports.default = _default;

package/lib/common/components/shared/overlay/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 colors = _ref.colors,
       borders = _ref.borders,
       spacing = _ref.spacing;
@@ -14,4 +14,7 @@ function generator(_ref) {
     overlayBarColor: colors.electric,
     overlayBarSize: '0.3rem'
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;