@instructure/quiz-core 17.63.1-rc.3 → 17.63.1-rc.5

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

@@ -46,17 +46,17 @@ var _propTypes2 = require("../propTypes.js");
 var _dec, _class, _class2, _temp;
 
 var styles = {
-  componentId: 'eJSiT',
+  componentId: 'boQPo',
   template: function template(theme) {
-    return "\n\n.eJSiT_bqdH{column-gap:5px;display:flex;justify-content:space-between;padding:".concat(theme.metricsPadding || 'inherit', " 0}\n\n.eJSiT_fbIL{border-radius:").concat(theme.cardBorderRadius || 'inherit', ";box-shadow:").concat(theme.cardBoxShadow || 'inherit', ";display:inline-flex;flex-direction:column;margin:").concat(theme.cardMargin || 'inherit', ";padding:").concat(theme.cardPadding || 'inherit', ";width:").concat(theme.cardWidth || 'inherit', "}\n\n.eJSiT_blRb{max-width:160px;padding-right:10px}");
+    return "\n\n.boQPo_bqdH{column-gap:5px;display:flex;justify-content:space-between;padding-bottom:".concat(theme.metricsPadding || 'inherit', "}\n\n.boQPo_PFlN{border-radius:").concat(theme.cardBorderRadius || 'inherit', ";box-shadow:").concat(theme.cardBoxShadow || 'inherit', ";display:inline-flex;flex-direction:column;margin:").concat(theme.cardMargin || 'inherit', ";padding:").concat(theme.cardPadding || 'inherit', ";width:").concat(theme.cardWidth || 'inherit', "}\n\n.boQPo_blRb{max-width:160px;padding-right:10px}\n\n.boQPo_bxzy{border-bottom:1px solid ").concat(theme.quizSummaryBorderBottomColor || 'inherit', ";margin-bottom:15px;padding-bottom:15px}\n\n.boQPo_dKIc{padding-bottom:15px}\n\n.boQPo_cGHR{align-self:flex-end}");
   },
-  'metricsContainer': 'eJSiT_bqdH',
-  'card': 'eJSiT_fbIL',
-  'dateContainer': 'eJSiT_blRb'
+  'metricsContainer': 'boQPo_bqdH',
+  'reportCard': 'boQPo_PFlN',
+  'dateContainer': 'boQPo_blRb',
+  'quizAnalysisSummary': 'boQPo_bxzy',
+  'titleContainer': 'boQPo_dKIc',
+  'spinnerContainer': 'boQPo_cGHR'
 };
-
-var _ref = /*#__PURE__*/_react.default.createElement(_Spinner.default, null);
-
 var NewQuizAndItemAnalysisReportCardPresenter = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(NewQuizAndItemAnalysisReportCardPresenter, _Component);
 
@@ -97,20 +97,14 @@ var NewQuizAndItemAnalysisReportCardPresenter = (_dec = (0, _uiThemeable.themeab
       }));
     };
 
-    return _this;
-  }
-
-  (0, _createClass2.default)(NewQuizAndItemAnalysisReportCardPresenter, [{
-    key: "renderContent",
-    value: function renderContent() {
-      var _this$props = this.props,
-          name = _this$props.name,
-          href = _this$props.href,
-          quizAnalysis = _this$props.quizAnalysis;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
-        size: "medium",
-        weight: "bold"
-      }, name), this.renderMetrics(), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+    _this.renderQuizAnalysisSummary = function () {
+      var _this$props = _this.props,
+          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, {
         direction: "row",
         justifyItems: "space-between"
       }, /*#__PURE__*/_react.default.createElement("div", {
@@ -118,18 +112,66 @@ var NewQuizAndItemAnalysisReportCardPresenter = (_dec = (0, _uiThemeable.themeab
       }, /*#__PURE__*/_react.default.createElement(_index3.AnalysisUpdateDate, {
         date: quizAnalysis.created_timestamp,
         multiline: true
-      })), /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+      })), quizAnalysis && itemAnalyses && /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
         href: href
       }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
         size: "small"
       }, (0, _formatMessage.default)('View Report')))));
-    }
-  }, {
+    };
+
+    _this.renderSpinner = function (mainText) {
+      return /*#__PURE__*/_react.default.createElement(_Spinner.default, {
+        size: "x-small",
+        color: "brand",
+        minHeight: "0",
+        mainText: mainText,
+        fontSize: "x-small"
+      });
+    };
+
+    _this.renderReportCardFooter = function () {
+      var _this$props2 = _this.props,
+          generationInProgress = _this$props2.generationInProgress,
+          generateReports = _this$props2.generateReports,
+          analysisError = _this$props2.analysisError;
+      return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+        direction: "row",
+        justifyItems: "space-between"
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        shouldShrink: true
+      }, analysisError && !generationInProgress && /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "x-small",
+        lineHeight: "fit",
+        weight: "bold",
+        color: "danger"
+      }, analysisError)), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, generationInProgress ? _this.renderSpinner((0, _formatMessage.default)('Generation In Progress')) : /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+        onClick: generateReports,
+        role: "button"
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "small"
+      }, (0, _formatMessage.default)('Generate Report')))));
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(NewQuizAndItemAnalysisReportCardPresenter, [{
     key: "render",
     value: function render() {
+      var _this$props3 = this.props,
+          fetchInProgress = _this$props3.fetchInProgress,
+          name = _this$props3.name,
+          quizAnalysis = _this$props3.quizAnalysis;
       return /*#__PURE__*/_react.default.createElement(_index.default, {
-        className: styles.card
-      }, this.props.quizAnalysis ? this.renderContent() : _ref);
+        className: styles.reportCard
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.titleContainer
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "medium",
+        weight: "bold"
+      }, name)), !fetchInProgress && quizAnalysis && this.renderQuizAnalysisSummary(), fetchInProgress && /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.spinnerContainer
+      }, this.renderSpinner()), !fetchInProgress && this.renderReportCardFooter());
     }
   }]);
   NewQuizAndItemAnalysisReportCardPresenter.displayName = "NewQuizAndItemAnalysisReportCardPresenter";
@@ -137,10 +179,18 @@ var NewQuizAndItemAnalysisReportCardPresenter = (_dec = (0, _uiThemeable.themeab
 }(_react.Component), _class2.propTypes = {
   name: _propTypes.default.node,
   href: _propTypes.default.string,
-  quizAnalysis: _propTypes2.quizAnalysisPropType
+  quizAnalysis: _propTypes2.quizAnalysisPropType,
+  itemAnalyses: _propTypes.default.arrayOf(_propTypes2.itemAnalysisPropType),
+  fetchInProgress: _propTypes.default.bool.isRequired,
+  generationInProgress: _propTypes.default.bool.isRequired,
+  analysisError: _propTypes.default.string,
+  generateReports: _propTypes.default.func.isRequired
 }, _class2.defaultProps = {
   name: void 0,
   href: void 0,
-  quizAnalysis: void 0
+  analysisError: void 0,
+  generationInProgress: void 0,
+  quizAnalysis: void 0,
+  itemAnalyses: void 0
 }, _temp)) || _class);
 exports.NewQuizAndItemAnalysisReportCardPresenter = NewQuizAndItemAnalysisReportCardPresenter;

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

@@ -7,13 +7,15 @@ exports.default = generator;
 
 function generator(_ref) {
   var spacing = _ref.spacing,
-      borders = _ref.borders;
+      borders = _ref.borders,
+      colors = _ref.colors;
   return {
     metricsPadding: spacing.medium,
     cardWidth: '16rem',
     cardPadding: spacing.medium,
     cardMargin: spacing.xSmall,
     cardBoxShadow: '1px 1px 3px 0 #ddd',
-    cardBorderRadius: borders.radiusMedium
+    cardBorderRadius: borders.radiusMedium,
+    quizSummaryBorderBottomColor: colors.tiara
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "17.63.1-rc.3+bb9038eca",
+  "version": "17.63.1-rc.5+3b1ed689c",
   "license": "MIT",
   "description": "The Quiz React SDK by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
@@ -41,11 +41,11 @@
   ],
   "dependencies": {
     "@instructure/outcomes-ui": "^2.1.9",
-    "@instructure/quiz-common": "17.63.1-rc.3+bb9038eca",
-    "@instructure/quiz-i18n": "17.63.1-rc.3+bb9038eca",
-    "@instructure/quiz-interactions": "17.63.1-rc.3+bb9038eca",
-    "@instructure/quiz-number-input": "17.63.1-rc.3+bb9038eca",
-    "@instructure/quiz-rce": "17.63.1-rc.3+bb9038eca",
+    "@instructure/quiz-common": "17.63.1-rc.5+3b1ed689c",
+    "@instructure/quiz-i18n": "17.63.1-rc.5+3b1ed689c",
+    "@instructure/quiz-interactions": "17.63.1-rc.5+3b1ed689c",
+    "@instructure/quiz-number-input": "17.63.1-rc.5+3b1ed689c",
+    "@instructure/quiz-rce": "17.63.1-rc.5+3b1ed689c",
     "@instructure/ui-a11y-content": "^7.20.0",
     "@instructure/ui-alerts": "^7.20.0",
     "@instructure/ui-avatar": "^7.20.0",
@@ -106,7 +106,7 @@
     "eventemitter3": "^3.1.0",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "17.63.1-rc.3+bb9038eca",
+    "instructure-validations": "17.63.1-rc.5+3b1ed689c",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -157,7 +157,7 @@
     "intl": "^1.2.4",
     "jquery": "^2.2.3",
     "most-subject": "^5.3.0",
-    "quiz-presets": "17.63.1-rc.3+bb9038eca",
+    "quiz-presets": "17.63.1-rc.5+3b1ed689c",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -173,5 +173,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "bb9038eca17319245eda3bfde7b7a77b61c8498a"
+  "gitHead": "3b1ed689cbb9d38d69287f541dfa2396cc315f28"
 }