@instructure/quiz-core 20.3.0 → 20.3.1-rc.1

package/es/common/components/PrintFontSizeModal/presenter.js

@@ -5,24 +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 { Modal, ModalHeader, ModalBody, ModalFooter } from '@instructure/quiz-common';
 import { Heading } from '@instructure/ui-heading';
 import { Button, CloseButton } from '@instructure/ui-buttons';
-import { themeable } from '@instructure/ui-themeable';
-var styles = {
-  componentId: 'ccksF',
-  template: function template(theme) {
-    return "\n\n.ccksF_fatK{border-bottom:solid ".concat(theme.separatorBorderWidth || 'inherit', ";border-color:").concat(theme.separatorColor || 'inherit', ";margin:").concat(theme.separatorMargin || 'inherit', " 0;padding:0;width:100%}");
-  },
-  'separator': 'ccksF_fatK'
-};
-import theme from "./theme.js";
+import { withStyle, jsx } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 import t from '@instructure/quiz-i18n/es/format-message';
 import { RadioInputGroup, RadioInput } from '@instructure/ui-radio-input';
 import { Checkbox } from '@instructure/ui-checkbox';
-export var PrintFontSizeModal = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var PrintFontSizeModal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(PrintFontSizeModal, _Component);
 
   var _super = _createSuper(PrintFontSizeModal);
@@ -109,18 +104,18 @@ export var PrintFontSizeModal = (_dec = themeable(theme, styles), _dec(_class =
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(Modal, {
+      return jsx(Modal, {
         open: this.props.isOpen,
         onDismiss: this.props.onCancel,
         onExited: this.props.onExited,
         size: "small",
         label: this.text.printQuiz
-      }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(Heading, null, this.text.printQuiz), /*#__PURE__*/React.createElement(CloseButton, {
+      }, jsx(ModalHeader, null, jsx(Heading, null, this.text.printQuiz), jsx(CloseButton, {
         onClick: this.props.onCancel,
         placement: "end",
         offset: "medium",
         screenReaderLabel: this.text.close
-      })), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(RadioInputGroup, {
+      })), jsx(ModalBody, null, jsx(RadioInputGroup, {
         onChange: this.handleFontSizeChange,
         name: "print-font-size",
         value: this.state.selectedFontSize,
@@ -128,7 +123,7 @@ export var PrintFontSizeModal = (_dec = themeable(theme, styles), _dec(_class =
         description: t('Text size'),
         "data-automation": "print-font-size-modal-radio-group"
       }, this.sizes.map(function (size) {
-        var label = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, size.label), " ", /*#__PURE__*/React.createElement("p", {
+        var label = jsx("div", null, jsx("span", null, size.label), " ", jsx("p", {
           "aria-hidden": "true",
           style: {
             fontSize: "".concat(size.size, "rem"),
@@ -138,25 +133,25 @@ export var PrintFontSizeModal = (_dec = themeable(theme, styles), _dec(_class =
         }, t('Printed quiz question')));
         var key = "print-font-size-modal-radio-button-key-".concat(size.value);
         var dataAutomation = "print-font-size-modal-radio-button-".concat(size.value);
-        return /*#__PURE__*/React.createElement(RadioInput, {
+        return jsx(RadioInput, {
           key: key,
           "data-automation": dataAutomation,
           inline: true,
           label: label,
           value: size.value
         });
-      })), /*#__PURE__*/React.createElement("div", {
-        className: styles.separator
-      }), /*#__PURE__*/React.createElement(Checkbox, {
+      })), jsx("div", {
+        css: this.props.styles.separator
+      }), jsx(Checkbox, {
         label: this.text.rememberTextSizeSetting,
         checked: this.state.rememberTextSizeSetting,
         onChange: this.handleRememberFontSize
-      })), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+      })), jsx(ModalFooter, null, jsx(Button, {
         "data-automation": "sdk-print-font-size-cancel-button",
         color: "primary-inverse",
         onClick: this.props.onCancel,
         margin: "0 x-small 0 0"
-      }, this.text.cancel), /*#__PURE__*/React.createElement(Button, {
+      }, this.text.cancel), jsx(Button, {
         "data-automation": "sdk-print-font-size-print-preview-button",
         color: "primary",
         onClick: this.handleSubmit,
@@ -172,7 +167,9 @@ export var PrintFontSizeModal = (_dec = themeable(theme, styles), _dec(_class =
   persistedPrintFontSize: PropTypes.string,
   onSubmit: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
-  onExited: PropTypes.func.isRequired
+  onExited: PropTypes.func.isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   isOpen: false,
   persistedPrintFontSize: 'medium'

package/es/common/components/PrintFontSizeModal/styles.js

@@ -0,0 +1,13 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    separator: {
+      width: '100%',
+      margin: "".concat(componentTheme.separatorMargin, " 0"),
+      padding: 0,
+      borderBottom: "solid ".concat(componentTheme.separatorBorderWidth),
+      borderColor: componentTheme.separatorColor
+    }
+  };
+};
+
+export default generateStyle;

package/es/common/components/PrintFontSizeModal/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
       borders = _ref.borders,
       spacing = _ref.spacing;
@@ -7,4 +7,6 @@ export default function generator(_ref) {
     separatorBorderWidth: borders.widthSmall,
     separatorMargin: spacing.medium
   };
-}
+};
+
+export default generateComponentTheme;

package/es/common/components/alerts/presenter.js

@@ -5,24 +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 partial from 'lodash/partial';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { Alert } from '@instructure/ui-alerts';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
-var styles = {
-  componentId: 'cYPGH',
-  template: function template(theme) {
-    return "\n\n.cYPGH_ddjo{box-sizing:border-box;padding-left:".concat(theme.alertsPadding || 'inherit', ";padding-right:").concat(theme.alertsPadding || 'inherit', ";padding-top:").concat(theme.alertsTopPadding || 'inherit', ";pointer-events:none;position:fixed;width:100%;z-index:").concat(theme.alertsZIndex || 'inherit', "}\n\n.cYPGH_eVxh{pointer-events:auto}\n\n@media screen and (--phoneBreakPoint){.cYPGH_ddjo{padding:").concat(theme.alertsMobilePadding || 'inherit', "}}");
-  },
-  'alerts': 'cYPGH_ddjo',
-  'alertHolder': 'cYPGH_eVxh'
-};
-import theme from "./theme.js";
-export var Alerts = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var Alerts = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(Alerts, _Component);
 
   var _super = _createSuper(Alerts);
@@ -46,10 +40,10 @@ export var Alerts = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
       }
 
       if (alert.variant === 'stickyerror') {
-        return /*#__PURE__*/React.createElement("div", {
+        return jsx("div", {
           key: alert.uuid,
-          className: styles.alertHolder
-        }, /*#__PURE__*/React.createElement(Alert, {
+          css: _this.props.styles.alertHolder
+        }, jsx(Alert, {
           variant: "error",
           onDismiss: closeAlert,
           renderCloseButtonLabel: t('Close'),
@@ -57,10 +51,10 @@ export var Alerts = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
         }, alert.message));
       }
 
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         key: alert.uuid,
-        className: styles.alertHolder
-      }, /*#__PURE__*/React.createElement(Alert, {
+        css: _this.props.styles.alertHolder
+      }, jsx(Alert, {
         variant: alert.variant,
         onDismiss: closeAlert,
         renderCloseButtonLabel: t('Close'),
@@ -74,7 +68,7 @@ export var Alerts = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
   _createClass(Alerts, [{
     key: "renderScreenreaderAlert",
     value: function renderScreenreaderAlert(alert) {
-      return /*#__PURE__*/React.createElement(ScreenReaderContent, {
+      return jsx(ScreenReaderContent, {
         key: alert.uuid
       }, alert.message);
     }
@@ -91,16 +85,16 @@ export var Alerts = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
       });
 
       if (hasStickyErrors) {
-        return /*#__PURE__*/React.createElement("div", {
-          className: styles.alerts,
+        return jsx("div", {
+          css: this.props.styles.alerts,
           style: {
             zIndex: '99999'
           }
         }, this.renderAlerts());
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.alerts
+      return jsx("div", {
+        css: this.props.styles.alerts
       }, this.renderAlerts());
     }
   }]);
@@ -109,7 +103,9 @@ export var Alerts = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
   return Alerts;
 }(Component), _class2.propTypes = {
   removeAlert: PropTypes.func.isRequired,
-  alerts: ImmutablePropTypes.list.isRequired
+  alerts: ImmutablePropTypes.list.isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   sidebarOpen: false
 }, _temp)) || _class);

package/es/common/components/alerts/styles.js

@@ -0,0 +1,24 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+var generateStyle = function generateStyle(componentTheme) {
+  var mq = "@media screen and (".concat(componentTheme.phoneBreakPoint, ")");
+  return {
+    alerts: _defineProperty({
+      position: 'fixed',
+      pointerEvents: 'none',
+      width: '100%',
+      boxSizing: 'border-box',
+      zIndex: componentTheme.alertsZIndex,
+      paddingLeft: componentTheme.alertsPadding,
+      paddingRight: componentTheme.alertsPadding,
+      paddingTop: componentTheme.alertsTopPadding
+    }, mq, {
+      padding: componentTheme.alertsMobilePadding
+    }),
+    alertHolder: {
+      pointerEvents: 'auto'
+    }
+  };
+};
+
+export default generateStyle;

package/es/common/components/alerts/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var breakpoints = _ref.breakpoints,
       spacing = _ref.spacing;
   return {
@@ -8,4 +8,6 @@ export default function generator(_ref) {
     alertsZIndex: '7777',
     phoneBreakPoint: "max-width: ".concat(breakpoints.medium)
   };
-}
+};
+
+export default generateComponentTheme;

package/es/common/components/shared/CardEmotion/CardContent/index.js

@@ -31,7 +31,7 @@ export var CardContent = (_dec = withStyle(generateStyle, generateComponentTheme
       return jsx(View, {
         as: "div"
       }, jsx("div", Object.assign({
-        css: _objectSpread(_objectSpread({}, this.props.styles.content), this.props.style)
+        css: _objectSpread(_objectSpread({}, this.props.styles.content), this.props.customStyles)
       }, omit(this.props, Object.keys(CardContent.propTypes))), this.props.children));
     }
   }]);
@@ -40,9 +40,9 @@ export var CardContent = (_dec = withStyle(generateStyle, generateComponentTheme
   return CardContent;
 }(Component), _class2.propTypes = {
   children: PropTypes.node.isRequired,
-  style: PropTypes.object,
+  customStyles: PropTypes.object,
   styles: PropTypes.object
 }, _class2.defaultProps = {
-  style: {}
+  customStyles: {}
 }, _temp)) || _class);
 export default CardContent;

package/es/common/components/shared/CardEmotion/CardWrapper/index.js

@@ -31,7 +31,7 @@ export var CardWrapper = (_dec = withStyle(generateStyle, generateComponentTheme
         as: "div",
         height: "100%"
       }, jsx("div", {
-        css: _objectSpread(_objectSpread({}, this.props.styles.wrapper), this.props.style)
+        css: _objectSpread(_objectSpread({}, this.props.styles.wrapper), this.props.customStyles)
       }, this.props.children));
     }
   }]);
@@ -40,9 +40,9 @@ export var CardWrapper = (_dec = withStyle(generateStyle, generateComponentTheme
   return CardWrapper;
 }(Component), _class2.propTypes = {
   children: PropTypes.node.isRequired,
-  style: PropTypes.object,
+  customStyles: PropTypes.object,
   styles: PropTypes.object
 }, _class2.defaultProps = {
-  style: {}
+  customStyles: {}
 }, _temp)) || _class);
 export default CardWrapper;

package/es/common/components/shared/CardEmotion/index.js

@@ -16,13 +16,13 @@ export function Card(_ref) {
 }
 Card.propTypes = {
   children: PropTypes.node.isRequired,
-  style: PropTypes.object,
+  customStyles: PropTypes.object,
   wrapperClassName: PropTypes.object,
   wrapped: PropTypes.bool
 };
 Card.defaultProps = {
   wrapped: false,
-  style: null,
+  customStyles: null,
   wrapperClassName: null
 };
 export default Card;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/ReportCard/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,37 +5,25 @@ 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 t from '@instructure/quiz-i18n/es/format-message';
 import { Text } from '@instructure/ui-text';
 import { Link } from '@instructure/ui-link';
 import { Flex } from '@instructure/ui-flex';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
-import { themeable } from '@instructure/ui-themeable';
-import Card from "../../../../../common/components/shared/Card/index.js";
-var styles = {
-  componentId: 'ebhXI',
-  template: function template(theme) {
-    return "\n\n.ebhXI_bqdH{column-gap:26px;display:flex;justify-content:flex-start;padding-bottom:".concat(theme.metricsPadding || 'inherit', ";row-gap:8px}\n\n.ebhXI_PFlN{display:inline-flex;flex-direction:column;margin:").concat(theme.cardMargin || 'inherit', ";padding:").concat(theme.cardPadding || 'inherit', ";width:").concat(theme.cardWidth || 'inherit', "}\n\n.ebhXI_dJIh{height:").concat(theme.cardHeight || 'inherit', "}\n\n.ebhXI_eWEX{align-items:flex-end;align-self:flex-end;display:flex;height:100%;justify-content:flex-end}\n\n.ebhXI_blRb{max-width:160px;padding-right:10px}\n\n.ebhXI_bxzy{border-bottom:1px solid ").concat(theme.quizSummaryBorderBottomColor || 'inherit', ";margin-bottom:15px;padding-bottom:15px}\n\n.ebhXI_dKIc{padding-bottom:15px}\n\n@media only screen and (max-width:25rem){.ebhXI_dJIh{height:auto}.ebhXI_PFlN{max-width:").concat(theme.cardWidth || 'inherit', ";width:auto}.ebhXI_bqdH{flex-wrap:wrap}}");
-  },
-  'metricsContainer': 'ebhXI_bqdH',
-  'reportCard': 'ebhXI_PFlN',
-  'emptyReportCard': 'ebhXI_dJIh',
-  'emptyCardBodyContainer': 'ebhXI_eWEX',
-  'dateContainer': 'ebhXI_blRb',
-  'quizAnalysisSummary': 'ebhXI_bxzy',
-  'titleContainer': 'ebhXI_dKIc'
-};
-import theme from "./theme.js";
-import classnames from 'classnames';
+import { withStyle, jsx } from '@instructure/emotion';
+import Card from "../../../../../common/components/shared/CardEmotion/index.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 import AnalysisMetric from "../AnalysisMetric/index.js";
 import Spinner from "../../../../../common/components/shared/spinner/Spinner.js";
 import { AnalysisUpdateDate } from "../AnalysisUpdateDate/index.js";
 import { itemAnalysisPropType, quizAnalysisPropType } from "../propTypes.js";
 import { csvFormat } from "../exportFormats.js";
 import { ExportButton } from "../ExportButton/index.js";
-export var NewQuizAndItemAnalysisReportCardPresenter = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var NewQuizAndItemAnalysisReportCardPresenter = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(NewQuizAndItemAnalysisReportCardPresenter, _Component);
 
   var _super = _createSuper(NewQuizAndItemAnalysisReportCardPresenter);
@@ -69,19 +56,19 @@ export var NewQuizAndItemAnalysisReportCardPresenter = (_dec = themeable(theme,
       var _quizAnalysis$scores, _quizAnalysis$scores2, _quizAnalysis$scores3;
 
       var quizAnalysis = _this.props.quizAnalysis;
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.metricsContainer
-      }, /*#__PURE__*/React.createElement(AnalysisMetric, {
+      return jsx("div", {
+        css: _this.props.styles.metricsContainer
+      }, jsx(AnalysisMetric, {
         metricKey: "highscore",
         label: t('High Score'),
         value: (_quizAnalysis$scores = quizAnalysis.scores) === null || _quizAnalysis$scores === void 0 ? void 0 : _quizAnalysis$scores.max_percentage,
         suffix: "%"
-      }), /*#__PURE__*/React.createElement(AnalysisMetric, {
+      }), jsx(AnalysisMetric, {
         metricKey: "lowscore",
         label: t('Low Score'),
         value: (_quizAnalysis$scores2 = quizAnalysis.scores) === null || _quizAnalysis$scores2 === void 0 ? void 0 : _quizAnalysis$scores2.min_percentage,
         suffix: "%"
-      }), /*#__PURE__*/React.createElement(AnalysisMetric, {
+      }), jsx(AnalysisMetric, {
         metricKey: "meanscore",
         label: t('Mean Score'),
         value: (_quizAnalysis$scores3 = quizAnalysis.scores) === null || _quizAnalysis$scores3 === void 0 ? void 0 : _quizAnalysis$scores3.mean_percentage,
@@ -94,31 +81,31 @@ export var NewQuizAndItemAnalysisReportCardPresenter = (_dec = themeable(theme,
           quizAnalysis = _this$props.quizAnalysis,
           itemAnalyses = _this$props.itemAnalyses,
           href = _this$props.href;
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.quizAnalysisSummary
-      }, _this.renderMetrics(), /*#__PURE__*/React.createElement(Flex, {
+      return jsx("div", {
+        css: _this.props.styles.quizAnalysisSummary
+      }, _this.renderMetrics(), jsx(Flex, {
         direction: "row",
         justifyItems: "space-between"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.dateContainer
-      }, /*#__PURE__*/React.createElement(AnalysisUpdateDate, {
+      }, jsx("div", {
+        css: _this.props.styles.dateContainer
+      }, jsx(AnalysisUpdateDate, {
         date: quizAnalysis.created_timestamp,
         multiline: true
-      })), quizAnalysis && itemAnalyses && /*#__PURE__*/React.createElement(Link, {
+      })), quizAnalysis && itemAnalyses && jsx(Link, {
         href: href,
         "data-automation": "sdk-new-ia-report-card-view-report-button"
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('View Quiz and Item Analysis Report')), /*#__PURE__*/React.createElement(Text, {
+      }, jsx(ScreenReaderContent, null, t('View Quiz and Item Analysis Report')), jsx(Text, {
         size: "small",
         "aria-hidden": "true"
       }, t('View Report')))));
     };
 
     _this.renderSpinner = function (mainText) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.emptyCardBodyContainer
-      }, /*#__PURE__*/React.createElement(Flex, {
+      return jsx("div", {
+        css: _this.props.styles.emptyCardBodyContainer
+      }, jsx(Flex, {
         direction: "row"
-      }, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Spinner, {
+      }, jsx(Flex.Item, null, jsx(Spinner, {
         size: "x-small",
         color: "brand",
         minHeight: "0",
@@ -129,11 +116,11 @@ export var NewQuizAndItemAnalysisReportCardPresenter = (_dec = themeable(theme,
     };
 
     _this.renderGenerateReportButton = function () {
-      return /*#__PURE__*/React.createElement(Link, {
+      return jsx(Link, {
         onClick: _this.handleGeneration,
         role: "button",
         "data-automation": "sdk-new-ia-report-card-generate-report-button"
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Generate Quiz and Item Analysis Report')), /*#__PURE__*/React.createElement(Text, {
+      }, jsx(ScreenReaderContent, null, t('Generate Quiz and Item Analysis Report')), jsx(Text, {
         size: "small",
         "aria-hidden": "true"
       }, t('Generate Report')));
@@ -143,19 +130,19 @@ export var NewQuizAndItemAnalysisReportCardPresenter = (_dec = themeable(theme,
       var _this$props2 = _this.props,
           generationInProgress = _this$props2.generationInProgress,
           analysisError = _this$props2.analysisError;
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.emptyCardBodyContainer
-      }, /*#__PURE__*/React.createElement(Flex, {
+      return jsx("div", {
+        css: _this.props.styles.emptyCardBodyContainer
+      }, jsx(Flex, {
         direction: "row",
         justifyItems: "space-between"
-      }, /*#__PURE__*/React.createElement(Flex.Item, {
+      }, jsx(Flex.Item, {
         shouldShrink: true,
         size: analysisError && !generationInProgress ? '40%' : null
-      }, analysisError && !generationInProgress && /*#__PURE__*/React.createElement(Text, {
+      }, analysisError && !generationInProgress && jsx(Text, {
         size: "x-small",
         weight: "bold",
         color: "danger"
-      }, analysisError)), /*#__PURE__*/React.createElement(Flex.Item, {
+      }, analysisError)), jsx(Flex.Item, {
         shouldShrink: analysisError && !generationInProgress
       }, generationInProgress ? _this.renderSpinner(t('Generation In Progress')) : _this.renderGenerateReportButton())));
     };
@@ -164,7 +151,7 @@ export var NewQuizAndItemAnalysisReportCardPresenter = (_dec = themeable(theme,
       var _this$props3 = _this.props,
           quizAnalysis = _this$props3.quizAnalysis,
           generationInProgress = _this$props3.generationInProgress;
-      return /*#__PURE__*/React.createElement(ExportButton, {
+      return jsx(ExportButton, {
         quizAnalysis: quizAnalysis,
         generationInProgress: generationInProgress,
         handleExport: _this.handleExport
@@ -176,31 +163,41 @@ export var NewQuizAndItemAnalysisReportCardPresenter = (_dec = themeable(theme,
           name = _this$props4.name,
           exportEnabled = _this$props4.exportEnabled,
           fetchInProgress = _this$props4.fetchInProgress;
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.titleContainer
-      }, /*#__PURE__*/React.createElement(Flex, {
+      return jsx("div", {
+        css: _this.props.styles.titleContainer
+      }, jsx(Flex, {
         direction: "row",
         wrap: "wrap",
         justifyItems: "space-between"
-      }, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Text, {
+      }, jsx(Flex.Item, null, jsx(Text, {
         size: "medium",
         weight: "bold"
-      }, name)), exportEnabled && !fetchInProgress && /*#__PURE__*/React.createElement(Flex.Item, null, _this.renderExport())));
+      }, name)), exportEnabled && !fetchInProgress && jsx(Flex.Item, null, _this.renderExport())));
     };
 
     return _this;
   }
 
   _createClass(NewQuizAndItemAnalysisReportCardPresenter, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.makeStyles();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles();
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this$props5 = this.props,
           fetchInProgress = _this$props5.fetchInProgress,
           quizAnalysis = _this$props5.quizAnalysis,
-          analysisError = _this$props5.analysisError;
-      var reportCardStyles = classnames(styles.reportCard, _defineProperty({}, styles.emptyReportCard, !quizAnalysis && !analysisError));
-      return /*#__PURE__*/React.createElement(Card, {
-        className: reportCardStyles
+          styles = _this$props5.styles;
+      return jsx(Card, {
+        css: styles.reportCard,
+        customStyles: styles.reportCard
       }, this.renderReportCardHeader(), !fetchInProgress && quizAnalysis && this.renderQuizAnalysisSummary(), fetchInProgress && this.renderSpinner(), !fetchInProgress && this.renderReportCardFooter());
     }
   }]);
@@ -217,7 +214,9 @@ export var NewQuizAndItemAnalysisReportCardPresenter = (_dec = themeable(theme,
   analysisError: PropTypes.string,
   generateReports: PropTypes.func.isRequired,
   exportReports: PropTypes.func.isRequired,
-  exportEnabled: PropTypes.bool.isRequired
+  exportEnabled: PropTypes.bool.isRequired,
+  styles: PropTypes.object,
+  makeStyles: PropTypes.func
 }, _class2.defaultProps = {
   name: void 0,
   href: void 0,

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

@@ -0,0 +1,53 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+var generateStyle = function generateStyle(componentTheme, props) {
+  var msMaxWidth = 'max-width: 25rem';
+  var mq = "@media only screen and (".concat(msMaxWidth, ")");
+  return {
+    metricsContainer: _defineProperty({
+      paddingBottom: componentTheme.metricsPadding,
+      display: 'flex',
+      justifyContent: 'flex-start',
+      columnGap: '26px',
+      rowGap: '8px'
+    }, mq, {
+      flexWrap: 'wrap'
+    }),
+    reportCard: _objectSpread(_defineProperty({
+      width: componentTheme.cardWidth,
+      padding: componentTheme.cardPadding,
+      margin: componentTheme.cardMargin,
+      display: 'inline-flex',
+      flexDirection: 'column'
+    }, mq, {
+      width: 'initial',
+      maxWidth: componentTheme.cardWidth
+    }), !props.quizAnalysis && !props.analysisError && _defineProperty({
+      height: componentTheme.cardHeight
+    }, mq, {
+      height: 'initial'
+    })),
+    emptyCardBodyContainer: {
+      display: 'flex',
+      justifyContent: 'flex-end',
+      alignItems: 'flex-end',
+      alignSelf: 'flex-end',
+      height: '100%'
+    },
+    dateContainer: {
+      maxWidth: '160px',
+      paddingRight: '10px'
+    },
+    quizAnalysisSummary: {
+      borderBottom: "1px solid ".concat(componentTheme.quizSummaryBorderBottomColor),
+      paddingBottom: '15px',
+      marginBottom: '15px'
+    },
+    titleContainer: {
+      paddingBottom: '15px'
+    }
+  };
+};
+
+export default generateStyle;

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

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       colors = _ref.colors;
   return {
@@ -9,4 +9,6 @@ export default function generator(_ref) {
     cardMargin: spacing.xSmall,
     quizSummaryBorderBottomColor: colors.tiara
   };
-}
+};
+
+export default generateComponentTheme;