@instructure/quiz-core 20.11.2 → 20.11.3-rc.10

package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/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,36 +5,21 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
 import { Heading } from '@instructure/ui-heading';
 import { PresentationContent } from '@instructure/ui-a11y-content';
-import React, { Component } from 'react';
-var styles = {
-  componentId: 'eObAE',
-  template: function template(theme) {
-    return "\n\n.eObAE_eKXQ{padding:".concat(theme.cardWrapperPadding || 'inherit', "}\n\n.eObAE_bwlc{gap:24px;justify-content:space-between;position:relative;row-gap:32px}\n\n.eObAE_bwlc,.eObAE_bqdH{align-items:flex-start;display:flex;flex-direction:row;flex-wrap:wrap}\n\n.eObAE_bqdH{row-gap:24px}\n\n.eObAE_eTaq{align-items:center;border:1px solid ").concat(theme.blankBorderColor || 'inherit', ";border-radius:").concat(theme.blankBorderRadius || 'inherit', ";display:inline-flex;height:").concat(theme.blankHeight || 'inherit', ";justify-content:center;min-width:").concat(theme.blankMinWidth || 'inherit', ";padding:2px 2px;vertical-align:middle}\n\n.eObAE_NpIG{position:absolute;right:").concat(theme.viewPaddingRight || 'inherit', ";top:0}\n\n.eObAE_eoBe{font-size:").concat(theme.metricNumberContextFontSize || 'inherit', ";font-weight:").concat(theme.metricNumberContextFontWeight || 'inherit', "}\n\n.eObAE_fFDJ{display:none}\n\n.eObAE_fxkJ{margin-top:-8px}\n\n.eObAE_esVF{min-height:48px}\n\n.eObAE_eTZq{position:relative}\n\n.eObAE_eTZq:after{background:linear-gradient(180deg,hsla(0,0%,100%,0),#fff);content:\"\";height:48px;left:0;position:absolute;top:0;width:100%}\n\n.eObAE_cVld{max-width:100%;width:calc(25% + 350px)}");
-  },
-  'cardWrapper': 'eObAE_eKXQ',
-  'itemCardInnerContainer': 'eObAE_bwlc',
-  'metricsContainer': 'eObAE_bqdH',
-  'blankSpace': 'eObAE_eTaq',
-  'itemCardToggleButtonWrapper': 'eObAE_NpIG',
-  'metricNumberContext': 'eObAE_eoBe',
-  'hiddenMetrics': 'eObAE_fFDJ',
-  'itemBodyToggleButtonWrapper': 'eObAE_fxkJ',
-  'itemBody': 'eObAE_esVF',
-  'hiddenItemBody': 'eObAE_eTZq',
-  'answerFrequencySummaryContainer': 'eObAE_cVld'
-};
+import PropTypes from 'prop-types';
+import { Component } from 'react';
+import generateStyle from "./styles.js";
 import t from '@instructure/quiz-i18n/es/format-message';
 import ExpandButton from "../../../../../common/components/shared/ExpandButton/index.js";
 import { Text } from '@instructure/ui-text';
-import { themeable } from '@instructure/ui-themeable';
-import theme from "./theme.js";
+import { withStyle, jsx, css } from '@instructure/emotion';
+import generateComponentTheme from "./theme.js";
 import { difficultyIndex, discriminationIndex, pearsonCorrelation } from "./popoverContent.js";
 import Card from "../../../../../common/components/shared/Card/index.js";
 import AnalysisMetric from "../AnalysisMetric/index.js";
 import AnalysisPopoverMetric from "../AnalysisPopoverMetric/index.js";
-import classnames from 'classnames';
 import { interactionTypesNameDictionary } from "../../../../../common/util/interactionTypeMetadata.js";
 import AnswerFrequencySummary from "../AnswerFrequencySummary/index.js";
 import { afsFlags, itemAnalysisPropType } from "../propTypes.js";
@@ -46,7 +30,7 @@ import { RICH_FILL_BLANK_SLUG } from '@instructure/quiz-common';
 var parser = new DOMParser();
 var parsererrorElement = 'parsererror';
 var parseType = 'text/html';
-export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var NewItemAnalysis = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(NewItemAnalysis, _Component);
 
   var _super = _createSuper(NewItemAnalysis);
@@ -91,9 +75,9 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
       return t.rich('{score, number}<s>/{possible, number} PTS</s>', {
         s: function s(_ref) {
           var children = _ref.children;
-          return /*#__PURE__*/React.createElement("span", {
+          return jsx("span", {
             key: metricKey,
-            className: styles.metricNumberContext
+            css: _this.props.styles.metricNumberContext
           }, children);
         },
         score: metricValue,
@@ -102,7 +86,7 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
     };
 
     _this.renderTitle = function (title) {
-      return /*#__PURE__*/React.createElement(Heading, {
+      return jsx(Heading, {
         margin: "0 x-large small 0",
         level: "h3",
         color: "primary"
@@ -110,7 +94,7 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
     };
 
     _this.renderInteractionType = function (interactionType) {
-      return /*#__PURE__*/React.createElement(Text, {
+      return jsx(Text, {
         size: "medium",
         weight: "bold",
         transform: "capitalize"
@@ -138,85 +122,88 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
         return _this.isBlank(span);
       }).forEach(function (span, index) {
         var newSpan = span.cloneNode();
-        newSpan.setAttribute('class', styles.blankSpace);
+        newSpan.setAttribute('style', css(_this.props.styles.blankSpace).styles);
         newSpan.innerHTML = "".concat(index + 1);
         span.replaceWith(newSpan);
       });
       return tempDoc.querySelector('body').innerHTML;
     };
 
-    _this.renderRichContent = function (itemBody, itemBodyClass, itemId) {
-      return /*#__PURE__*/React.createElement(Flex, {
+    _this.renderRichContent = function (itemBody, itemId) {
+      return jsx(Flex, {
         direction: "row",
         alignItems: "start"
-      }, /*#__PURE__*/React.createElement(Flex.Item, {
+      }, jsx(Flex.Item, {
         shouldShrink: true,
         shouldGrow: true
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         id: _this.itemCardBodyId(itemId),
-        className: itemBodyClass
-      }, /*#__PURE__*/React.createElement(RichContentRenderer, {
+        css: _this.props.styles.itemBody
+      }, jsx(RichContentRenderer, {
         content: itemBody
-      }))), /*#__PURE__*/React.createElement(Flex.Item, {
+      }))), jsx(Flex.Item, {
         margin: "none none none x-small"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.itemBodyToggleButtonWrapper
-      }, _this.isBodyHigherThanContainer() && /*#__PURE__*/React.createElement(PresentationContent, null, /*#__PURE__*/React.createElement(ExpandButton, {
+      }, jsx("div", {
+        css: _this.props.styles.itemBodyToggleButtonWrapper
+      }, _this.isBodyHigherThanContainer() && jsx(PresentationContent, null, jsx(ExpandButton, {
         onClick: _this.handleBodyToggle,
         title: _this.state.bodyExpanded ? t('collapse question stem') : t('expand question stem'),
         isExpanded: _this.state.bodyExpanded
       })))));
     };
 
-    _this.renderMetrics = function (scores, metricsClass) {
-      return /*#__PURE__*/React.createElement(Flex, {
+    _this.renderMetrics = function (scores) {
+      return jsx(Flex, {
         direction: "column"
-      }, /*#__PURE__*/React.createElement(Flex.Item, {
+      }, jsx(Flex.Item, {
         overflowY: "visible"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.metricsContainer
-      }, /*#__PURE__*/React.createElement(Flex.Item, {
+      }, jsx(Flex, {
+        wrap: "wrap",
+        direction: "row",
+        alignItems: "start",
+        gap: "medium"
+      }, jsx(Flex.Item, {
         margin: "none medium none none"
-      }, /*#__PURE__*/React.createElement(AnalysisPopoverMetric, {
+      }, jsx(AnalysisPopoverMetric, {
         metricKey: "difficulty_index",
         label: t('Item Difficulty'),
         value: scores.difficulty_index,
         popoverDescription: difficultyIndex
-      })), /*#__PURE__*/React.createElement(Flex.Item, {
+      })), jsx(Flex.Item, {
         margin: "none medium none none"
-      }, /*#__PURE__*/React.createElement(AnalysisMetric, {
+      }, jsx(AnalysisMetric, {
         metricKey: "mean",
         label: t('Mean Earned Points'),
         value: _this.calculateValueWithPointsPossible('mean', scores.mean)
-      })), /*#__PURE__*/React.createElement(Flex.Item, {
+      })), jsx(Flex.Item, {
         margin: "none medium none none"
-      }, /*#__PURE__*/React.createElement(AnalysisMetric, {
+      }, jsx(AnalysisMetric, {
         metricKey: "median",
         label: t('Median Earned Points'),
         value: _this.calculateValueWithPointsPossible('median', scores.median)
-      })), /*#__PURE__*/React.createElement(Flex.Item, {
+      })), jsx(Flex.Item, {
         margin: "none large none none"
-      }, /*#__PURE__*/React.createElement(AnalysisPopoverMetric, {
+      }, jsx(AnalysisPopoverMetric, {
         metricKey: "discrimination_index",
         label: t('Discrimination Index'),
         value: scores.discrimination_index,
         popoverDescription: discriminationIndex
-      })))), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement("div", {
-        className: styles.itemCardToggleButtonWrapper
-      }, /*#__PURE__*/React.createElement(ExpandButton, {
+      })))), jsx(Flex.Item, null, jsx("div", {
+        css: _this.props.styles.itemCardToggleButtonWrapper
+      }, jsx(ExpandButton, {
         onClick: _this.handleMetricToggle,
         title: _this.state.metricsExpanded ? t('collapse item card') : t('expand item card'),
         isExpanded: _this.state.metricsExpanded
-      }))), /*#__PURE__*/React.createElement(Flex.Item, {
+      }))), jsx(Flex.Item, {
         overflowY: "visible",
         margin: "medium none none none"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: metricsClass
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.metricsContainer
-      }, /*#__PURE__*/React.createElement(Flex.Item, {
+      }, jsx("div", {
+        css: _this.props.styles.hiddenWhenNotExpanded
+      }, jsx("div", {
+        css: _this.props.styles.metricsContainer
+      }, jsx(Flex.Item, {
         margin: "none medium none none"
-      }, /*#__PURE__*/React.createElement(AnalysisPopoverMetric, {
+      }, jsx(AnalysisPopoverMetric, {
         metricKey: "pearson_correlation",
         label: t('Corrected Item-Total Correlation Coefficient'),
         value: scores.pearson_correlation,
@@ -224,10 +211,10 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
       }))))));
     };
 
-    _this.renderAnswerSummaryTable = function (itemId, answer_summary, metricsClass, interactionType, afsFlags) {
-      return /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement("div", {
-        className: metricsClass
-      }, /*#__PURE__*/React.createElement(AnswerFrequencySummary, {
+    _this.renderAnswerSummaryTable = function (itemId, answer_summary, interactionType, afsFlags) {
+      return jsx(Flex.Item, null, jsx("div", {
+        css: _this.props.styles.hiddenWhenNotExpanded
+      }, jsx(AnswerFrequencySummary, {
         itemId: itemId,
         answerSummary: answer_summary,
         interactionType: interactionType,
@@ -247,10 +234,24 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
   }
 
   _createClass(NewItemAnalysis, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles({
+        metricsExpanded: this.state.metricsExpanded,
+        itemCardBodyHeight: this.state.itemCardBodyHeight,
+        bodyExpanded: this.state.bodyExpanded
+      });
+    }
+  }, {
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
 
+      this.props.makeStyles({
+        metricsExpanded: this.state.metricsExpanded,
+        itemCardBodyHeight: this.state.itemCardBodyHeight,
+        bodyExpanded: this.state.bodyExpanded
+      });
       ensureRCEContentIsLoaded().then(function () {
         return _this2.calculateItemCardBodyHeight(_this2.props.itemAnalysis.metadata.item_id);
       });
@@ -291,31 +292,29 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
           scores = itemAnalysis.scores;
       var itemId = metadata.item_id;
       var interactionType = metadata.interaction_type;
-      var metricsClass = classnames(_defineProperty({}, styles.hiddenMetrics, !this.state.metricsExpanded));
-      var itemBodyClass = classnames(styles.itemBody, _defineProperty({}, styles.hiddenItemBody, this.isBodyHigherThanContainer() && !this.state.bodyExpanded));
       var title = (_metadata$item_title = metadata.item_title) !== null && _metadata$item_title !== void 0 ? _metadata$item_title : t('Untitled item');
       var itemBodyEnhanced = this.shouldEnhanceItemBody() ? this.enhanceItemBody(metadata.item_body) : metadata.item_body;
-      return /*#__PURE__*/React.createElement(Card, {
-        className: styles.cardWrapper
-      }, /*#__PURE__*/React.createElement(Flex, {
+      return jsx(Card, {
+        css: this.props.styles.cardWrapper
+      }, jsx(Flex, {
         direction: "column"
-      }, /*#__PURE__*/React.createElement(Flex.Item, {
+      }, jsx(Flex.Item, {
         overflowY: "visible"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.itemCardInnerContainer
-      }, /*#__PURE__*/React.createElement(Flex.Item, {
+      }, jsx("div", {
+        css: this.props.styles.itemCardInnerContainer
+      }, jsx(Flex.Item, {
         shouldGrow: true,
         shouldShrink: true,
         size: "45%"
-      }, /*#__PURE__*/React.createElement(Flex, {
+      }, jsx(Flex, {
         direction: "column",
         justifyItems: "start"
-      }, /*#__PURE__*/React.createElement(Flex.Item, null, this.renderTitle(title)), /*#__PURE__*/React.createElement(Flex.Item, null, this.renderInteractionType(metadata.interaction_type)), /*#__PURE__*/React.createElement(Flex.Item, {
+      }, jsx(Flex.Item, null, this.renderTitle(title)), jsx(Flex.Item, null, this.renderInteractionType(metadata.interaction_type)), jsx(Flex.Item, {
         shouldShrink: true,
         padding: "small xx-small none none",
         overflowY: "hidden",
         size: !this.state.bodyExpanded ? '60px' : void 0
-      }, this.renderRichContent(itemBodyEnhanced, itemBodyClass, itemId)))), /*#__PURE__*/React.createElement(Flex.Item, null, this.renderMetrics(scores, metricsClass)))), this.renderAnswerSummaryTable(itemId, answer_summary, metricsClass, interactionType, afsFlags)));
+      }, this.renderRichContent(itemBodyEnhanced, itemId)))), jsx(Flex.Item, null, this.renderMetrics(scores)))), this.renderAnswerSummaryTable(itemId, answer_summary, interactionType, afsFlags)));
     }
   }]);
 
@@ -323,5 +322,7 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
   return NewItemAnalysis;
 }(Component), _class2.propTypes = {
   itemAnalysis: itemAnalysisPropType,
-  afsFlags: afsFlags
-}.isRequired, _temp)) || _class);
+  afsFlags: afsFlags,
+  styles: PropTypes.object,
+  makeStyles: PropTypes.func
+}, _temp)) || _class);

package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/styles.js

@@ -0,0 +1,75 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+
+var generateStyle = function generateStyle(componentTheme, props, state) {
+  var isBodyHigherThanContainer = state.itemCardBodyHeight > 48;
+  return {
+    cardWrapper: {
+      padding: componentTheme.cardWrapperPadding
+    },
+    itemCardInnerContainer: {
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'flex-start',
+      flexWrap: 'wrap',
+      gap: '24px',
+      rowGap: '32px'
+    },
+    metricsContainer: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      flexWrap: 'wrap',
+      rowGap: '24px'
+    },
+    hiddenWhenNotExpanded: _objectSpread({
+      display: 'block'
+    }, !state.metricsExpanded && {
+      display: 'none'
+    }),
+    blankSpace: {
+      display: 'inline-flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: componentTheme.blankHeight,
+      minWidth: componentTheme.blankMinWidth,
+      verticalAlign: 'middle',
+      border: "1px solid ".concat(componentTheme.blankBorderColor),
+      borderRadius: componentTheme.blankBorderRadius,
+      padding: '2px 2px'
+    },
+    itemCardToggleButtonWrapper: {
+      position: 'absolute',
+      top: '0',
+      right: componentTheme.viewPaddingRight
+    },
+    metricNumberContext: {
+      fontSize: componentTheme.metricNumberContextFontSize,
+      fontWeight: componentTheme.metricNumberContextFontWeight
+    },
+    itemBodyToggleButtonWrapper: {
+      marginTop: '-8px'
+    },
+    itemBody: _objectSpread({
+      minHeight: '48px'
+    }, isBodyHigherThanContainer && !state.bodyExpanded && {
+      position: 'relative',
+      ':after': {
+        left: '0',
+        top: '0',
+        content: '""',
+        height: '48px',
+        width: '100%',
+        position: 'absolute',
+        background: 'linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff)'
+      }
+    }),
+    answerFrequencySummaryContainer: {
+      width: 'calc(25% + 350px)',
+      maxWidth: '100%'
+    }
+  };
+};
+
+export default generateStyle;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       breakpoints = _ref.breakpoints,
       typography = _ref.typography,
@@ -14,4 +14,6 @@ export default function generator(_ref) {
     blankMinWidth: '20px',
     blankHeight: '20px'
   };
-}
+};
+
+export default generateComponentTheme;

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

@@ -5,6 +5,9 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
+
+/* eslint-disable-next-line no-unused-vars */
 import React, { Component } from 'react';
 import { Heading } from '@instructure/ui-heading';
 import NewItemAnalysis from "./NewItemAnalysis/index.js";
@@ -24,24 +27,18 @@ import errorImage from './downForRepair.svg';
 import { PresentationContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { csvFormat } from "./exportFormats.js";
 import { ExportButton } from "./ExportButton/index.js";
-import { themeable } from '@instructure/ui-themeable';
-var styles = {
-  componentId: 'edRct',
-  template: function template(theme) {
-    return "\n\n.edRct_bJHk{align-items:flex-end;display:flex;flex-direction:row;flex-wrap:wrap;gap:".concat(theme.headerButtonsGap || 'inherit', ";justify-content:flex-end}");
-  },
-  'headerButtonsContainer': 'edRct_bJHk'
-};
-import theme from "./theme.js";
-
-var _ref = /*#__PURE__*/React.createElement(Flex.Item, {
+import { withStyle, jsx } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+
+var _ref = jsx(Flex.Item, {
   align: "center"
-}, /*#__PURE__*/React.createElement(PresentationContent, null, /*#__PURE__*/React.createElement(Img, {
+}, jsx(PresentationContent, null, jsx(Img, {
   src: errorImage,
   alt: ""
 })));
 
-export var NewQuizAndItemAnalysisPresenter = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var NewQuizAndItemAnalysisPresenter = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(NewQuizAndItemAnalysisPresenter, _Component);
 
   var _super = _createSuper(NewQuizAndItemAnalysisPresenter);
@@ -59,14 +56,14 @@ export var NewQuizAndItemAnalysisPresenter = (_dec = themeable(theme, styles), _
 
     _this.renderItemAnalyses = function () {
       var itemAnalyses = _this.props.itemAnalyses || [];
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, {
+      return jsx(React.Fragment, null, jsx(Heading, {
         level: "h2",
         themeOverride: {
           h2FontWeight: 700
         },
         color: "primary"
-      }, t('Item Analysis')), /*#__PURE__*/React.createElement("div", null, itemAnalyses.map(function (itemAnalysis) {
-        return /*#__PURE__*/React.createElement(NewItemAnalysis, {
+      }, t('Item Analysis')), jsx("div", null, itemAnalyses.map(function (itemAnalysis) {
+        return jsx(NewItemAnalysis, {
           key: itemAnalysis.metadata.item_id,
           itemAnalysis: itemAnalysis
         });
@@ -74,29 +71,29 @@ export var NewQuizAndItemAnalysisPresenter = (_dec = themeable(theme, styles), _
     };
 
     _this.renderSpinner = function () {
-      return /*#__PURE__*/React.createElement(Flex, {
+      return jsx(Flex, {
         padding: "medium",
         justifyItems: "center",
         alignItems: "center"
-      }, /*#__PURE__*/React.createElement(Spinner, {
+      }, jsx(Spinner, {
         renderTitle: t('Loading item analyses data')
       }));
     };
 
     _this.renderBodyOnFailedFetch = function () {
-      return /*#__PURE__*/React.createElement(Flex, {
+      return jsx(Flex, {
         alignItems: "end",
         width: "82.5rem",
         margin: "auto",
         direction: "column"
-      }, _ref, /*#__PURE__*/React.createElement(Flex.Item, {
+      }, _ref, jsx(Flex.Item, {
         align: "center"
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, jsx(Text, {
         size: "x-large",
         color: "primary"
-      }, t('Error'))), /*#__PURE__*/React.createElement(Flex.Item, {
+      }, t('Error'))), jsx(Flex.Item, {
         align: "center"
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, getFailedToFetchReports()), /*#__PURE__*/React.createElement(Text, {
+      }, jsx(ScreenReaderContent, null, getFailedToFetchReports()), jsx(Text, {
         size: "x-small",
         color: "primary"
       }, getFailedToFetchReports())));
@@ -106,14 +103,14 @@ export var NewQuizAndItemAnalysisPresenter = (_dec = themeable(theme, styles), _
       var _quizAnalysis$metadat;
 
       var quizAnalysis = _this.props.quizAnalysis;
-      return /*#__PURE__*/React.createElement(Flex, {
+      return jsx(Flex, {
         alignItems: "center",
         width: "auto",
         margin: "small auto",
         direction: "column"
-      }, /*#__PURE__*/React.createElement(Flex.Item, {
+      }, jsx(Flex.Item, {
         overflowY: "hidden"
-      }, /*#__PURE__*/React.createElement(Heading, {
+      }, jsx(Heading, {
         level: "h2",
         themeOverride: {
           h2FontWeight: 700
@@ -130,14 +127,14 @@ export var NewQuizAndItemAnalysisPresenter = (_dec = themeable(theme, styles), _
           quizAnalysis = _this$props.quizAnalysis;
       var shouldShowError = analysisError && !generationInProgress;
       var timeStamp = quizAnalysis === null || quizAnalysis === void 0 ? void 0 : quizAnalysis.created_timestamp;
-      return /*#__PURE__*/React.createElement(Flex, {
+      return jsx(Flex, {
         alignItems: "end",
         width: "auto",
         margin: "small auto",
         direction: "column"
-      }, /*#__PURE__*/React.createElement(Flex.Item, null, timeStamp && /*#__PURE__*/React.createElement(AnalysisUpdateDate, {
+      }, jsx(Flex.Item, null, timeStamp && jsx(AnalysisUpdateDate, {
         date: timeStamp
-      })), /*#__PURE__*/React.createElement(Flex.Item, null, shouldShowError && /*#__PURE__*/React.createElement(Text, {
+      })), jsx(Flex.Item, null, shouldShowError && jsx(Text, {
         size: "x-small",
         weight: "medium",
         color: "danger"
@@ -146,20 +143,20 @@ export var NewQuizAndItemAnalysisPresenter = (_dec = themeable(theme, styles), _
 
     _this.renderRightSide = function () {
       var exportEnabled = _this.props.exportEnabled;
-      return /*#__PURE__*/React.createElement(Flex, {
+      return jsx(Flex, {
         alignItems: "center",
         justifyItems: "end",
         width: "auto",
         direction: "row",
         wrap: "wrap-reverse"
-      }, /*#__PURE__*/React.createElement(Flex.Item, {
+      }, jsx(Flex.Item, {
         padding: "0 small 0 0",
         margin: "0 0 0 auto"
-      }, _this.renderUpdateDateWithError()), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement("div", {
-        className: styles.headerButtonsContainer
-      }, exportEnabled && /*#__PURE__*/React.createElement(Flex.Item, {
+      }, _this.renderUpdateDateWithError()), jsx(Flex.Item, null, jsx("div", {
+        css: _this.props.styles.headerButtonsContainer
+      }, exportEnabled && jsx(Flex.Item, {
         margin: "0 0 0 auto"
-      }, _this.renderExport()), /*#__PURE__*/React.createElement(Flex.Item, {
+      }, _this.renderExport()), jsx(Flex.Item, {
         margin: "0 0 0 auto"
       }, _this.renderGenerationButton()))));
     };
@@ -168,7 +165,7 @@ export var NewQuizAndItemAnalysisPresenter = (_dec = themeable(theme, styles), _
       var _this$props2 = _this.props,
           quizAnalysis = _this$props2.quizAnalysis,
           generationInProgress = _this$props2.generationInProgress;
-      return /*#__PURE__*/React.createElement(ExportButton, {
+      return jsx(ExportButton, {
         quizAnalysis: quizAnalysis,
         generationInProgress: generationInProgress,
         handleExport: _this.handleExport
@@ -185,14 +182,14 @@ export var NewQuizAndItemAnalysisPresenter = (_dec = themeable(theme, styles), _
     };
 
     _this.renderTop = function () {
-      return /*#__PURE__*/React.createElement(Flex, {
+      return jsx(Flex, {
         justifyItems: "space-between",
         alignItems: "center",
         wrap: "wrap",
         width: "auto",
         margin: "0 auto small 0",
         direction: "row"
-      }, /*#__PURE__*/React.createElement(Flex.Item, null, _this.renderHeader()), /*#__PURE__*/React.createElement(Flex.Item, {
+      }, jsx(Flex.Item, null, _this.renderHeader()), jsx(Flex.Item, {
         margin: "0 0 0 auto"
       }, _this.renderRightSide()));
     };
@@ -203,25 +200,25 @@ export var NewQuizAndItemAnalysisPresenter = (_dec = themeable(theme, styles), _
 
     _this.renderTopOnFailedFetch = function () {
       var exportEnabled = _this.props.exportEnabled;
-      return /*#__PURE__*/React.createElement(Flex, {
+      return jsx(Flex, {
         direction: "row",
         justifyItems: "end",
         wrap: "wrap",
         width: "auto",
         margin: "auto"
-      }, exportEnabled && /*#__PURE__*/React.createElement(Flex.Item, {
+      }, exportEnabled && jsx(Flex.Item, {
         overflowY: "visible"
-      }, _this.renderExport()), /*#__PURE__*/React.createElement(Flex.Item, {
+      }, _this.renderExport()), jsx(Flex.Item, {
         overflowY: "visible"
       }, _this.renderGenerationButton()));
     };
 
     _this.renderOngoingGenerationButton = function () {
-      return /*#__PURE__*/React.createElement(Button, {
+      return jsx(Button, {
         color: "primary-inverse",
         interaction: "disabled",
         margin: "auto"
-      }, /*#__PURE__*/React.createElement(QuizzesSpinner, {
+      }, jsx(QuizzesSpinner, {
         size: "x-small",
         color: "brand",
         minHeight: "0",
@@ -231,14 +228,14 @@ export var NewQuizAndItemAnalysisPresenter = (_dec = themeable(theme, styles), _
     };
 
     _this.renderStartGenerationButton = function () {
-      return /*#__PURE__*/React.createElement(Button, {
+      return jsx(Button, {
         color: "secondary",
         margin: "auto",
         onClick: _this.handleGeneration,
         themeOverride: {
           lineHeight: '24px'
         }
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, jsx(Text, {
         size: "medium"
       }, t('Generate Report')));
     };
@@ -246,7 +243,7 @@ export var NewQuizAndItemAnalysisPresenter = (_dec = themeable(theme, styles), _
     _this.renderGenerationButton = function () {
       var generationInProgress = _this.props.generationInProgress;
       var buttonVariant = generationInProgress ? _this.renderOngoingGenerationButton() : _this.renderStartGenerationButton();
-      return /*#__PURE__*/React.createElement(React.Fragment, null, buttonVariant);
+      return jsx(React.Fragment, null, buttonVariant);
     };
 
     _this.renderBody = function () {
@@ -254,7 +251,7 @@ export var NewQuizAndItemAnalysisPresenter = (_dec = themeable(theme, styles), _
           fetchInProgress = _this$props4.fetchInProgress,
           quizAnalysis = _this$props4.quizAnalysis; // TODO need to refactor the NewQuizAnalysis to move out spinner logic
 
-      return /*#__PURE__*/React.createElement(React.Fragment, null, (fetchInProgress || quizAnalysis) && /*#__PURE__*/React.createElement(NewQuizAnalysis, {
+      return jsx(React.Fragment, null, (fetchInProgress || quizAnalysis) && jsx(NewQuizAnalysis, {
         quizAnalysis: quizAnalysis,
         fetchInProgress: fetchInProgress
       }), fetchInProgress ? _this.renderSpinner() : _this.renderItemAnalyses());
@@ -286,7 +283,7 @@ export var NewQuizAndItemAnalysisPresenter = (_dec = themeable(theme, styles), _
       var _this$props5 = this.props,
           analysisFetchError = _this$props5.analysisFetchError,
           fetchInProgress = _this$props5.fetchInProgress;
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         className: "fs-mask"
       }, !fetchInProgress && (analysisFetchError ? this.renderTopOnFailedFetch() : this.renderTopOnSuccessfulFetch()), analysisFetchError ? this.renderBodyOnFailedFetch() : this.renderBodyOnSuccessfulFetch());
     }
@@ -303,7 +300,8 @@ export var NewQuizAndItemAnalysisPresenter = (_dec = themeable(theme, styles), _
   analysisError: PropTypes.string,
   generateReports: PropTypes.func.isRequired,
   exportReports: PropTypes.func.isRequired,
-  exportEnabled: PropTypes.bool.isRequired
+  exportEnabled: PropTypes.bool.isRequired,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   analysisError: void 0,
   quizAnalysis: void 0,