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

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/ReportCard/presenter.js

@@ -2,15 +2,11 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NewQuizAndItemAnalysisReportCardPresenter = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -19,7 +15,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -33,13 +29,13 @@ var _uiFlex = require("@instructure/ui-flex");
 
 var _uiA11yContent = require("@instructure/ui-a11y-content");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
-var _index = _interopRequireDefault(require("../../../../../common/components/shared/Card/index.js"));
+var _index = _interopRequireDefault(require("../../../../../common/components/shared/CardEmotion/index.js"));
 
-var _theme = _interopRequireDefault(require("./theme.js"));
+var _styles = _interopRequireDefault(require("./styles.js"));
 
-var _classnames2 = _interopRequireDefault(require("classnames"));
+var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _index2 = _interopRequireDefault(require("../AnalysisMetric/index.js"));
 
@@ -55,20 +51,7 @@ var _index4 = require("../ExportButton/index.js");
 
 var _dec, _class, _class2, _temp;
 
-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'
-};
-var NewQuizAndItemAnalysisReportCardPresenter = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var NewQuizAndItemAnalysisReportCardPresenter = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(NewQuizAndItemAnalysisReportCardPresenter, _Component);
 
   var _super = (0, _createSuper2.default)(NewQuizAndItemAnalysisReportCardPresenter);
@@ -101,19 +84,19 @@ var NewQuizAndItemAnalysisReportCardPresenter = (_dec = (0, _uiThemeable.themeab
       var _quizAnalysis$scores, _quizAnalysis$scores2, _quizAnalysis$scores3;
 
       var quizAnalysis = _this.props.quizAnalysis;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.metricsContainer
-      }, /*#__PURE__*/_react.default.createElement(_index2.default, {
+      return (0, _emotion.jsx)("div", {
+        css: _this.props.styles.metricsContainer
+      }, (0, _emotion.jsx)(_index2.default, {
         metricKey: "highscore",
         label: (0, _formatMessage.default)('High Score'),
         value: (_quizAnalysis$scores = quizAnalysis.scores) === null || _quizAnalysis$scores === void 0 ? void 0 : _quizAnalysis$scores.max_percentage,
         suffix: "%"
-      }), /*#__PURE__*/_react.default.createElement(_index2.default, {
+      }), (0, _emotion.jsx)(_index2.default, {
         metricKey: "lowscore",
         label: (0, _formatMessage.default)('Low Score'),
         value: (_quizAnalysis$scores2 = quizAnalysis.scores) === null || _quizAnalysis$scores2 === void 0 ? void 0 : _quizAnalysis$scores2.min_percentage,
         suffix: "%"
-      }), /*#__PURE__*/_react.default.createElement(_index2.default, {
+      }), (0, _emotion.jsx)(_index2.default, {
         metricKey: "meanscore",
         label: (0, _formatMessage.default)('Mean Score'),
         value: (_quizAnalysis$scores3 = quizAnalysis.scores) === null || _quizAnalysis$scores3 === void 0 ? void 0 : _quizAnalysis$scores3.mean_percentage,
@@ -126,31 +109,31 @@ var NewQuizAndItemAnalysisReportCardPresenter = (_dec = (0, _uiThemeable.themeab
           quizAnalysis = _this$props.quizAnalysis,
           itemAnalyses = _this$props.itemAnalyses,
           href = _this$props.href;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.quizAnalysisSummary
-      }, _this.renderMetrics(), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+      return (0, _emotion.jsx)("div", {
+        css: _this.props.styles.quizAnalysisSummary
+      }, _this.renderMetrics(), (0, _emotion.jsx)(_uiFlex.Flex, {
         direction: "row",
         justifyItems: "space-between"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.dateContainer
-      }, /*#__PURE__*/_react.default.createElement(_index3.AnalysisUpdateDate, {
+      }, (0, _emotion.jsx)("div", {
+        css: _this.props.styles.dateContainer
+      }, (0, _emotion.jsx)(_index3.AnalysisUpdateDate, {
         date: quizAnalysis.created_timestamp,
         multiline: true
-      })), quizAnalysis && itemAnalyses && /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+      })), quizAnalysis && itemAnalyses && (0, _emotion.jsx)(_uiLink.Link, {
         href: href,
         "data-automation": "sdk-new-ia-report-card-view-report-button"
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('View Quiz and Item Analysis Report')), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('View Quiz and Item Analysis Report')), (0, _emotion.jsx)(_uiText.Text, {
         size: "small",
         "aria-hidden": "true"
       }, (0, _formatMessage.default)('View Report')))));
     };
 
     _this.renderSpinner = function (mainText) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.emptyCardBodyContainer
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+      return (0, _emotion.jsx)("div", {
+        css: _this.props.styles.emptyCardBodyContainer
+      }, (0, _emotion.jsx)(_uiFlex.Flex, {
         direction: "row"
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement(_Spinner.default, {
+      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, null, (0, _emotion.jsx)(_Spinner.default, {
         size: "x-small",
         color: "brand",
         minHeight: "0",
@@ -161,11 +144,11 @@ var NewQuizAndItemAnalysisReportCardPresenter = (_dec = (0, _uiThemeable.themeab
     };
 
     _this.renderGenerateReportButton = function () {
-      return /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+      return (0, _emotion.jsx)(_uiLink.Link, {
         onClick: _this.handleGeneration,
         role: "button",
         "data-automation": "sdk-new-ia-report-card-generate-report-button"
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Generate Quiz and Item Analysis Report')), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Generate Quiz and Item Analysis Report')), (0, _emotion.jsx)(_uiText.Text, {
         size: "small",
         "aria-hidden": "true"
       }, (0, _formatMessage.default)('Generate Report')));
@@ -175,19 +158,19 @@ var NewQuizAndItemAnalysisReportCardPresenter = (_dec = (0, _uiThemeable.themeab
       var _this$props2 = _this.props,
           generationInProgress = _this$props2.generationInProgress,
           analysisError = _this$props2.analysisError;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.emptyCardBodyContainer
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+      return (0, _emotion.jsx)("div", {
+        css: _this.props.styles.emptyCardBodyContainer
+      }, (0, _emotion.jsx)(_uiFlex.Flex, {
         direction: "row",
         justifyItems: "space-between"
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         shouldShrink: true,
         size: analysisError && !generationInProgress ? '40%' : null
-      }, analysisError && !generationInProgress && /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, analysisError && !generationInProgress && (0, _emotion.jsx)(_uiText.Text, {
         size: "x-small",
         weight: "bold",
         color: "danger"
-      }, analysisError)), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+      }, analysisError)), (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         shouldShrink: analysisError && !generationInProgress
       }, generationInProgress ? _this.renderSpinner((0, _formatMessage.default)('Generation In Progress')) : _this.renderGenerateReportButton())));
     };
@@ -196,7 +179,7 @@ var NewQuizAndItemAnalysisReportCardPresenter = (_dec = (0, _uiThemeable.themeab
       var _this$props3 = _this.props,
           quizAnalysis = _this$props3.quizAnalysis,
           generationInProgress = _this$props3.generationInProgress;
-      return /*#__PURE__*/_react.default.createElement(_index4.ExportButton, {
+      return (0, _emotion.jsx)(_index4.ExportButton, {
         quizAnalysis: quizAnalysis,
         generationInProgress: generationInProgress,
         handleExport: _this.handleExport
@@ -208,31 +191,41 @@ var NewQuizAndItemAnalysisReportCardPresenter = (_dec = (0, _uiThemeable.themeab
           name = _this$props4.name,
           exportEnabled = _this$props4.exportEnabled,
           fetchInProgress = _this$props4.fetchInProgress;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.titleContainer
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+      return (0, _emotion.jsx)("div", {
+        css: _this.props.styles.titleContainer
+      }, (0, _emotion.jsx)(_uiFlex.Flex, {
         direction: "row",
         wrap: "wrap",
         justifyItems: "space-between"
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, null, (0, _emotion.jsx)(_uiText.Text, {
         size: "medium",
         weight: "bold"
-      }, name)), exportEnabled && !fetchInProgress && /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, _this.renderExport())));
+      }, name)), exportEnabled && !fetchInProgress && (0, _emotion.jsx)(_uiFlex.Flex.Item, null, _this.renderExport())));
     };
 
     return _this;
   }
 
   (0, _createClass2.default)(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 = (0, _classnames2.default)(styles.reportCard, (0, _defineProperty2.default)({}, styles.emptyReportCard, !quizAnalysis && !analysisError));
-      return /*#__PURE__*/_react.default.createElement(_index.default, {
-        className: reportCardStyles
+          styles = _this$props5.styles;
+      return (0, _emotion.jsx)(_index.default, {
+        css: styles.reportCard,
+        customStyles: styles.reportCard
       }, this.renderReportCardHeader(), !fetchInProgress && quizAnalysis && this.renderQuizAnalysisSummary(), fetchInProgress && this.renderSpinner(), !fetchInProgress && this.renderReportCardFooter());
     }
   }]);
@@ -248,7 +241,9 @@ var NewQuizAndItemAnalysisReportCardPresenter = (_dec = (0, _uiThemeable.themeab
   analysisError: _propTypes.default.string,
   generateReports: _propTypes.default.func.isRequired,
   exportReports: _propTypes.default.func.isRequired,
-  exportEnabled: _propTypes.default.bool.isRequired
+  exportEnabled: _propTypes.default.bool.isRequired,
+  styles: _propTypes.default.object,
+  makeStyles: _propTypes.default.func
 }, _class2.defaultProps = {
   name: void 0,
   href: void 0,

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

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var generateStyle = function generateStyle(componentTheme, props) {
+  var msMaxWidth = 'max-width: 25rem';
+  var mq = "@media only screen and (".concat(msMaxWidth, ")");
+  return {
+    metricsContainer: (0, _defineProperty2.default)({
+      paddingBottom: componentTheme.metricsPadding,
+      display: 'flex',
+      justifyContent: 'flex-start',
+      columnGap: '26px',
+      rowGap: '8px'
+    }, mq, {
+      flexWrap: 'wrap'
+    }),
+    reportCard: (0, _objectSpread3.default)((0, _defineProperty2.default)({
+      width: componentTheme.cardWidth,
+      padding: componentTheme.cardPadding,
+      margin: componentTheme.cardMargin,
+      display: 'inline-flex',
+      flexDirection: 'column'
+    }, mq, {
+      width: 'initial',
+      maxWidth: componentTheme.cardWidth
+    }), !props.quizAnalysis && !props.analysisError && (0, _defineProperty2.default)({
+      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'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       colors = _ref.colors;
   return {
@@ -16,4 +16,7 @@ function generator(_ref) {
     cardMargin: spacing.xSmall,
     quizSummaryBorderBottomColor: colors.tiara
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/reporting/components/resources/ReportCard/index.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,7 +15,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -25,9 +23,11 @@ var _uiText = require("@instructure/ui-text");
 
 var _uiLink = require("@instructure/ui-link");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
+
+var _index = _interopRequireDefault(require("../../../../common/components/shared/CardEmotion/index.js"));
 
-var _index = _interopRequireDefault(require("../../../../common/components/shared/Card/index.js"));
+var _styles = _interopRequireDefault(require("./styles.js"));
 
 var _theme = _interopRequireDefault(require("./theme.js"));
 
@@ -37,15 +37,7 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'fnaXq',
-  template: function template(theme) {
-    return "\n\n.fnaXq_fbIL{display:inline-flex;flex-direction:column;height:".concat(theme.cardHeight || 'inherit', ";margin:").concat(theme.cardMargin || 'inherit', ";padding:").concat(theme.cardPadding || 'inherit', ";width:").concat(theme.cardWidth || 'inherit', "}\n\n.fnaXq_ebWM{padding-top:").concat(theme.detailPadding || 'inherit', "}\n\n@media only screen and (max-width:25rem){.fnaXq_fbIL{max-width:").concat(theme.cardWidth || 'inherit', ";width:auto}}");
-  },
-  'card': 'fnaXq_fbIL',
-  'details': 'fnaXq_ebWM'
-};
-var ReportCard = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var ReportCard = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ReportCard, _Component);
 
   var _super = (0, _createSuper2.default)(ReportCard);
@@ -62,24 +54,24 @@ var ReportCard = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _d
           name = _this$props.name,
           details = _this$props.details,
           href = _this$props.href;
-      return /*#__PURE__*/_react.default.createElement(_index.default, {
-        className: styles.card
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      return (0, _emotion.jsx)(_index.default, {
+        customStyles: this.props.styles.card
+      }, (0, _emotion.jsx)(_uiText.Text, {
         size: "medium",
         weight: "bold"
-      }, name), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.details
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, name), (0, _emotion.jsx)("div", {
+        css: this.props.styles.details
+      }, (0, _emotion.jsx)(_uiText.Text, {
         size: "small",
         color: "secondary"
-      }, details)), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+      }, details)), (0, _emotion.jsx)(_uiFlex.Flex, {
         direction: "row",
         justifyItems: "end",
         alignItems: "end",
         height: "100%"
-      }, /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+      }, (0, _emotion.jsx)(_uiLink.Link, {
         href: href
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, (0, _emotion.jsx)(_uiText.Text, {
         size: "small",
         "data-automation": name
       }, (0, _formatMessage.default)('View Report')))));
@@ -90,7 +82,8 @@ var ReportCard = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _d
 }(_react.Component), _class2.propTypes = {
   name: _propTypes.default.node,
   details: _propTypes.default.node,
-  href: _propTypes.default.string
+  href: _propTypes.default.string,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   name: void 0,
   details: void 0,

package/lib/reporting/components/resources/ReportCard/styles.js

@@ -0,0 +1,34 @@
+"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 msMaxWidth = 'max-width: 25rem';
+  var mq = "@media screen and (".concat(msMaxWidth, ")");
+  return {
+    card: (0, _defineProperty2.default)({
+      height: componentTheme.cardHeight,
+      width: componentTheme.cardWidth,
+      padding: componentTheme.cardPadding,
+      margin: componentTheme.cardMargin,
+      display: 'inline-flex',
+      flexDirection: 'column'
+    }, mq, {
+      width: 'initial',
+      maxWidth: componentTheme.cardWidth
+    }),
+    details: {
+      paddingTop: componentTheme.detailPadding
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/reporting/components/resources/ReportCard/theme.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       borders = _ref.borders;
   return {
@@ -15,4 +15,7 @@ function generator(_ref) {
     cardMargin: spacing.xSmall,
     detailPadding: borders.xxSmall
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/reporting/components/resources/ReportList/index.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,30 +15,23 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _uiHeading = require("@instructure/ui-heading");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'dedqg',
-  template: function template(theme) {
-    return "\n\n.dedqg_xNcP{box-sizing:border-box;height:100%;padding:".concat(theme.pagePadding || 'inherit', "}\n\n.dedqg_biBD{display:flex;flex-wrap:wrap;margin:").concat(theme.childrenMargin || 'inherit', "}\n\n.dedqg_nvdO{margin-bottom:").concat(theme.titleMarginBottom || 'inherit', "}");
-  },
-  'page': 'dedqg_xNcP',
-  'children': 'dedqg_biBD',
-  'title': 'dedqg_nvdO'
-};
-var ReportList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var ReportList = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ReportList, _Component);
 
   var _super = (0, _createSuper2.default)(ReportList);
@@ -57,15 +48,15 @@ var ReportList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _d
           children = _this$props.children,
           headingLevel = _this$props.headingLevel,
           headingAs = _this$props.headingAs;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.page
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: styles.title
-      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.page
+      }, (0, _emotion.jsx)("span", {
+        css: this.props.styles.title
+      }, (0, _emotion.jsx)(_uiHeading.Heading, {
         level: headingLevel,
         as: headingAs
-      }, (0, _formatMessage.default)('Reports'))), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.children
+      }, (0, _formatMessage.default)('Reports'))), (0, _emotion.jsx)("div", {
+        css: this.props.styles.children
       }, children));
     }
   }]);
@@ -74,7 +65,8 @@ var ReportList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _d
 }(_react.Component), _class2.propTypes = {
   children: _propTypes.default.node.isRequired,
   headingLevel: _propTypes.default.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'reset']),
-  headingAs: _propTypes.default.elementType
+  headingAs: _propTypes.default.elementType,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   headingLevel: 'h2',
   headingAs: 'h1'

package/lib/reporting/components/resources/ReportList/styles.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    page: {
+      boxSizing: 'border-box',
+      padding: componentTheme.pagePadding,
+      height: '100%'
+    },
+    children: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      margin: componentTheme.childrenMargin
+    },
+    title: {
+      marginBottom: componentTheme.titleMarginBottom
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/reporting/components/resources/ReportList/theme.js

@@ -3,13 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing;
   return {
     pagePadding: spacing.large,
     childrenMargin: spacing.xSmall,
     titleMarginBottom: spacing.xSmall
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;