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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/es/common/components/shared/spinner/Spinner.js +33 -18
  2. package/es/common/components/shared/spinner/theme.js +2 -5
  3. package/es/reporting/components/resources/NewQuizAndItemAnalysis/ReportCard/presenter.js +80 -30
  4. package/es/reporting/components/resources/NewQuizAndItemAnalysis/ReportCard/theme.js +4 -2
  5. package/lib/common/components/shared/spinner/Spinner.js +34 -19
  6. package/lib/common/components/shared/spinner/theme.js +2 -5
  7. package/lib/reporting/components/resources/NewQuizAndItemAnalysis/ReportCard/presenter.js +79 -29
  8. package/lib/reporting/components/resources/NewQuizAndItemAnalysis/ReportCard/theme.js +4 -2
  9. package/package.json +9 -9
package/es/common/components/shared/spinner/Spinner.js CHANGED
@@ -7,20 +7,19 @@ var _dec, _class, _class2, _temp;
7
7
 
8
8
  import React, { Component } from 'react';
9
9
  import PropTypes from 'prop-types';
10
+ import { Text } from '@instructure/ui-text';
10
11
  import { Spinner } from '@instructure/ui-spinner';
11
- import { Heading } from '@instructure/ui-heading';
12
12
  import { PresentationContent } from '@instructure/ui-a11y-content';
13
13
  import { themeable } from '@instructure/ui-themeable';
14
14
  import t from '@instructure/quiz-i18n/es/format-message';
15
15
  var styles = {
16
- componentId: 'ebGcj',
16
+ componentId: 'cJgyM',
17
17
  template: function template(theme) {
18
- return "\n\n.ebGcj_gasz{align-items:center;display:inline-flex;flex:1 1 auto;height:100%;justify-content:center;min-height:500px;width:100%}\n\n:root .ebGcj_gasz,_:-ms-fullscreen{height:10rem}\n\n.ebGcj_bZBM .ebGcj_qrQc{flex:1 1 auto}\n\n.ebGcj_fBqo{font-size:".concat(theme.mainTextFontSize || 'inherit', "}");
18
+ return "\n\n.cJgyM_gasz{align-items:center;column-gap:10px;display:inline-flex;flex:1 1 auto;height:100%;justify-content:center;width:100%}\n\n:root .cJgyM_gasz,_:-ms-fullscreen{height:10rem}\n\n.cJgyM_bZBM .cJgyM_qrQc{flex:1 1 auto}";
19
19
  },
20
- 'wrapper': 'ebGcj_gasz',
21
- 'left': 'ebGcj_bZBM',
22
- 'right': 'ebGcj_qrQc',
23
- 'mainText': 'ebGcj_fBqo'
20
+ 'wrapper': 'cJgyM_gasz',
21
+ 'left': 'cJgyM_bZBM',
22
+ 'right': 'cJgyM_qrQc'
24
23
  };
25
24
  import theme from "./theme.js";
26
25
  export var QuizzesSpinner = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
@@ -37,34 +36,50 @@ export var QuizzesSpinner = (_dec = themeable(theme, styles), _dec(_class = (_te
37
36
  _createClass(QuizzesSpinner, [{
38
37
  key: "mainText",
39
38
  value: function mainText() {
40
- return this.props.mainText || t('Loading...');
39
+ var _this$props = this.props,
40
+ color = _this$props.color,
41
+ mainText = _this$props.mainText,
42
+ fontSize = _this$props.fontSize;
43
+ return /*#__PURE__*/React.createElement(Text, {
44
+ size: fontSize,
45
+ color: color
46
+ }, mainText || t('Loading...'));
41
47
  }
42
48
  }, {
43
49
  key: "render",
44
50
  value: function render() {
51
+ var _this$props2 = this.props,
52
+ size = _this$props2.size,
53
+ minHeight = _this$props2.minHeight;
45
54
  return /*#__PURE__*/React.createElement("div", {
46
- className: styles.wrapper
55
+ className: styles.wrapper,
56
+ style: {
57
+ minHeight: minHeight
58
+ }
47
59
  }, /*#__PURE__*/React.createElement("div", {
48
60
  className: styles.left
49
61
  }, /*#__PURE__*/React.createElement(Spinner, {
50
62
  renderTitle: this.mainText(),
51
- size: "large"
63
+ size: size
52
64
  })), /*#__PURE__*/React.createElement("div", {
53
65
  className: styles.right
54
- }, /*#__PURE__*/React.createElement(PresentationContent, null, /*#__PURE__*/React.createElement(Heading, {
55
- level: "h2",
56
- as: "h1"
57
- }, /*#__PURE__*/React.createElement("div", {
58
- className: styles.mainText
59
- }, this.mainText())))));
66
+ }, /*#__PURE__*/React.createElement(PresentationContent, null, this.mainText())));
60
67
  }
61
68
  }]);
62
69
 
63
70
  QuizzesSpinner.displayName = "QuizzesSpinner";
64
71
  return QuizzesSpinner;
65
72
  }(Component), _class2.propTypes = {
66
- mainText: PropTypes.string
73
+ mainText: PropTypes.string,
74
+ fontSize: PropTypes.oneOf(['x-small', 'small', 'medium', 'large', 'x-large', 'xx-large']),
75
+ size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
76
+ color: PropTypes.string,
77
+ minHeight: PropTypes.string
67
78
  }, _class2.defaultProps = {
68
- mainText: null
79
+ mainText: null,
80
+ size: 'large',
81
+ fontSize: 'xx-large',
82
+ minHeight: '500px',
83
+ color: 'primary'
69
84
  }, _temp)) || _class);
70
85
  export default QuizzesSpinner;
package/es/common/components/shared/spinner/theme.js CHANGED
@@ -1,6 +1,3 @@
1
- export default function generator(_ref) {
2
- var typography = _ref.typography;
3
- return {
4
- mainTextFontSize: typography.fontSizeXXLarge
5
- };
1
+ export default function generator() {
2
+ return {};
6
3
  }
package/es/reporting/components/resources/NewQuizAndItemAnalysis/ReportCard/presenter.js CHANGED
@@ -14,22 +14,22 @@ import { Flex } from '@instructure/ui-flex';
14
14
  import { themeable } from '@instructure/ui-themeable';
15
15
  import Card from "../../../../../common/components/shared/Card/index.js";
16
16
  var styles = {
17
- componentId: 'eJSiT',
17
+ componentId: 'boQPo',
18
18
  template: function template(theme) {
19
- 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}");
19
+ 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}");
20
20
  },
21
- 'metricsContainer': 'eJSiT_bqdH',
22
- 'card': 'eJSiT_fbIL',
23
- 'dateContainer': 'eJSiT_blRb'
21
+ 'metricsContainer': 'boQPo_bqdH',
22
+ 'reportCard': 'boQPo_PFlN',
23
+ 'dateContainer': 'boQPo_blRb',
24
+ 'quizAnalysisSummary': 'boQPo_bxzy',
25
+ 'titleContainer': 'boQPo_dKIc',
26
+ 'spinnerContainer': 'boQPo_cGHR'
24
27
  };
25
28
  import theme from "./theme.js";
26
29
  import AnalysisMetric from "../AnalysisMetric/index.js";
27
30
  import Spinner from "../../../../../common/components/shared/spinner/Spinner.js";
28
31
  import { AnalysisUpdateDate } from "../AnalysisUpdateDate/index.js";
29
- import { quizAnalysisPropType } from "../propTypes.js";
30
-
31
- var _ref = /*#__PURE__*/React.createElement(Spinner, null);
32
-
32
+ import { itemAnalysisPropType, quizAnalysisPropType } from "../propTypes.js";
33
33
  export var NewQuizAndItemAnalysisReportCardPresenter = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
34
34
  _inherits(NewQuizAndItemAnalysisReportCardPresenter, _Component);
35
35
 
@@ -70,20 +70,14 @@ export var NewQuizAndItemAnalysisReportCardPresenter = (_dec = themeable(theme,
70
70
  }));
71
71
  };
72
72
 
73
- return _this;
74
- }
75
-
76
- _createClass(NewQuizAndItemAnalysisReportCardPresenter, [{
77
- key: "renderContent",
78
- value: function renderContent() {
79
- var _this$props = this.props,
80
- name = _this$props.name,
81
- href = _this$props.href,
82
- quizAnalysis = _this$props.quizAnalysis;
83
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
84
- size: "medium",
85
- weight: "bold"
86
- }, name), this.renderMetrics(), /*#__PURE__*/React.createElement(Flex, {
73
+ _this.renderQuizAnalysisSummary = function () {
74
+ var _this$props = _this.props,
75
+ quizAnalysis = _this$props.quizAnalysis,
76
+ itemAnalyses = _this$props.itemAnalyses,
77
+ href = _this$props.href;
78
+ return /*#__PURE__*/React.createElement("div", {
79
+ className: styles.quizAnalysisSummary
80
+ }, _this.renderMetrics(), /*#__PURE__*/React.createElement(Flex, {
87
81
  direction: "row",
88
82
  justifyItems: "space-between"
89
83
  }, /*#__PURE__*/React.createElement("div", {
@@ -91,18 +85,66 @@ export var NewQuizAndItemAnalysisReportCardPresenter = (_dec = themeable(theme,
91
85
  }, /*#__PURE__*/React.createElement(AnalysisUpdateDate, {
92
86
  date: quizAnalysis.created_timestamp,
93
87
  multiline: true
94
- })), /*#__PURE__*/React.createElement(Link, {
88
+ })), quizAnalysis && itemAnalyses && /*#__PURE__*/React.createElement(Link, {
95
89
  href: href
96
90
  }, /*#__PURE__*/React.createElement(Text, {
97
91
  size: "small"
98
92
  }, t('View Report')))));
99
- }
100
- }, {
93
+ };
94
+
95
+ _this.renderSpinner = function (mainText) {
96
+ return /*#__PURE__*/React.createElement(Spinner, {
97
+ size: "x-small",
98
+ color: "brand",
99
+ minHeight: "0",
100
+ mainText: mainText,
101
+ fontSize: "x-small"
102
+ });
103
+ };
104
+
105
+ _this.renderReportCardFooter = function () {
106
+ var _this$props2 = _this.props,
107
+ generationInProgress = _this$props2.generationInProgress,
108
+ generateReports = _this$props2.generateReports,
109
+ analysisError = _this$props2.analysisError;
110
+ return /*#__PURE__*/React.createElement(Flex, {
111
+ direction: "row",
112
+ justifyItems: "space-between"
113
+ }, /*#__PURE__*/React.createElement(Flex.Item, {
114
+ shouldShrink: true
115
+ }, analysisError && !generationInProgress && /*#__PURE__*/React.createElement(Text, {
116
+ size: "x-small",
117
+ lineHeight: "fit",
118
+ weight: "bold",
119
+ color: "danger"
120
+ }, analysisError)), /*#__PURE__*/React.createElement(Flex.Item, null, generationInProgress ? _this.renderSpinner(t('Generation In Progress')) : /*#__PURE__*/React.createElement(Link, {
121
+ onClick: generateReports,
122
+ role: "button"
123
+ }, /*#__PURE__*/React.createElement(Text, {
124
+ size: "small"
125
+ }, t('Generate Report')))));
126
+ };
127
+
128
+ return _this;
129
+ }
130
+
131
+ _createClass(NewQuizAndItemAnalysisReportCardPresenter, [{
101
132
  key: "render",
102
133
  value: function render() {
134
+ var _this$props3 = this.props,
135
+ fetchInProgress = _this$props3.fetchInProgress,
136
+ name = _this$props3.name,
137
+ quizAnalysis = _this$props3.quizAnalysis;
103
138
  return /*#__PURE__*/React.createElement(Card, {
104
- className: styles.card
105
- }, this.props.quizAnalysis ? this.renderContent() : _ref);
139
+ className: styles.reportCard
140
+ }, /*#__PURE__*/React.createElement("div", {
141
+ className: styles.titleContainer
142
+ }, /*#__PURE__*/React.createElement(Text, {
143
+ size: "medium",
144
+ weight: "bold"
145
+ }, name)), !fetchInProgress && quizAnalysis && this.renderQuizAnalysisSummary(), fetchInProgress && /*#__PURE__*/React.createElement("div", {
146
+ className: styles.spinnerContainer
147
+ }, this.renderSpinner()), !fetchInProgress && this.renderReportCardFooter());
106
148
  }
107
149
  }]);
108
150
 
@@ -111,9 +153,17 @@ export var NewQuizAndItemAnalysisReportCardPresenter = (_dec = themeable(theme,
111
153
  }(Component), _class2.propTypes = {
112
154
  name: PropTypes.node,
113
155
  href: PropTypes.string,
114
- quizAnalysis: quizAnalysisPropType
156
+ quizAnalysis: quizAnalysisPropType,
157
+ itemAnalyses: PropTypes.arrayOf(itemAnalysisPropType),
158
+ fetchInProgress: PropTypes.bool.isRequired,
159
+ generationInProgress: PropTypes.bool.isRequired,
160
+ analysisError: PropTypes.string,
161
+ generateReports: PropTypes.func.isRequired
115
162
  }, _class2.defaultProps = {
116
163
  name: void 0,
117
164
  href: void 0,
118
- quizAnalysis: void 0
165
+ analysisError: void 0,
166
+ generationInProgress: void 0,
167
+ quizAnalysis: void 0,
168
+ itemAnalyses: void 0
119
169
  }, _temp)) || _class);
package/es/reporting/components/resources/NewQuizAndItemAnalysis/ReportCard/theme.js CHANGED
@@ -1,12 +1,14 @@
1
1
  export default function generator(_ref) {
2
2
  var spacing = _ref.spacing,
3
- borders = _ref.borders;
3
+ borders = _ref.borders,
4
+ colors = _ref.colors;
4
5
  return {
5
6
  metricsPadding: spacing.medium,
6
7
  cardWidth: '16rem',
7
8
  cardPadding: spacing.medium,
8
9
  cardMargin: spacing.xSmall,
9
10
  cardBoxShadow: '1px 1px 3px 0 #ddd',
10
- cardBorderRadius: borders.radiusMedium
11
+ cardBorderRadius: borders.radiusMedium,
12
+ quizSummaryBorderBottomColor: colors.tiara
11
13
  };
12
14
  }
package/lib/common/components/shared/spinner/Spinner.js CHANGED
@@ -21,9 +21,9 @@ var _react = _interopRequireWildcard(require("react"));
21
21
 
22
22
  var _propTypes = _interopRequireDefault(require("prop-types"));
23
23
 
24
- var _uiSpinner = require("@instructure/ui-spinner");
24
+ var _uiText = require("@instructure/ui-text");
25
25
 
26
- var _uiHeading = require("@instructure/ui-heading");
26
+ var _uiSpinner = require("@instructure/ui-spinner");
27
27
 
28
28
  var _uiA11yContent = require("@instructure/ui-a11y-content");
29
29
 
@@ -36,14 +36,13 @@ var _theme = _interopRequireDefault(require("./theme.js"));
36
36
  var _dec, _class, _class2, _temp;
37
37
 
38
38
  var styles = {
39
- componentId: 'ebGcj',
39
+ componentId: 'cJgyM',
40
40
  template: function template(theme) {
41
- return "\n\n.ebGcj_gasz{align-items:center;display:inline-flex;flex:1 1 auto;height:100%;justify-content:center;min-height:500px;width:100%}\n\n:root .ebGcj_gasz,_:-ms-fullscreen{height:10rem}\n\n.ebGcj_bZBM .ebGcj_qrQc{flex:1 1 auto}\n\n.ebGcj_fBqo{font-size:".concat(theme.mainTextFontSize || 'inherit', "}");
41
+ return "\n\n.cJgyM_gasz{align-items:center;column-gap:10px;display:inline-flex;flex:1 1 auto;height:100%;justify-content:center;width:100%}\n\n:root .cJgyM_gasz,_:-ms-fullscreen{height:10rem}\n\n.cJgyM_bZBM .cJgyM_qrQc{flex:1 1 auto}";
42
42
  },
43
- 'wrapper': 'ebGcj_gasz',
44
- 'left': 'ebGcj_bZBM',
45
- 'right': 'ebGcj_qrQc',
46
- 'mainText': 'ebGcj_fBqo'
43
+ 'wrapper': 'cJgyM_gasz',
44
+ 'left': 'cJgyM_bZBM',
45
+ 'right': 'cJgyM_qrQc'
47
46
  };
48
47
  var QuizzesSpinner = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
49
48
  (0, _inherits2.default)(QuizzesSpinner, _Component);
@@ -58,34 +57,50 @@ var QuizzesSpinner = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles)
58
57
  (0, _createClass2.default)(QuizzesSpinner, [{
59
58
  key: "mainText",
60
59
  value: function mainText() {
61
- return this.props.mainText || (0, _formatMessage.default)('Loading...');
60
+ var _this$props = this.props,
61
+ color = _this$props.color,
62
+ mainText = _this$props.mainText,
63
+ fontSize = _this$props.fontSize;
64
+ return /*#__PURE__*/_react.default.createElement(_uiText.Text, {
65
+ size: fontSize,
66
+ color: color
67
+ }, mainText || (0, _formatMessage.default)('Loading...'));
62
68
  }
63
69
  }, {
64
70
  key: "render",
65
71
  value: function render() {
72
+ var _this$props2 = this.props,
73
+ size = _this$props2.size,
74
+ minHeight = _this$props2.minHeight;
66
75
  return /*#__PURE__*/_react.default.createElement("div", {
67
- className: styles.wrapper
76
+ className: styles.wrapper,
77
+ style: {
78
+ minHeight: minHeight
79
+ }
68
80
  }, /*#__PURE__*/_react.default.createElement("div", {
69
81
  className: styles.left
70
82
  }, /*#__PURE__*/_react.default.createElement(_uiSpinner.Spinner, {
71
83
  renderTitle: this.mainText(),
72
- size: "large"
84
+ size: size
73
85
  })), /*#__PURE__*/_react.default.createElement("div", {
74
86
  className: styles.right
75
- }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
76
- level: "h2",
77
- as: "h1"
78
- }, /*#__PURE__*/_react.default.createElement("div", {
79
- className: styles.mainText
80
- }, this.mainText())))));
87
+ }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, this.mainText())));
81
88
  }
82
89
  }]);
83
90
  QuizzesSpinner.displayName = "QuizzesSpinner";
84
91
  return QuizzesSpinner;
85
92
  }(_react.Component), _class2.propTypes = {
86
- mainText: _propTypes.default.string
93
+ mainText: _propTypes.default.string,
94
+ fontSize: _propTypes.default.oneOf(['x-small', 'small', 'medium', 'large', 'x-large', 'xx-large']),
95
+ size: _propTypes.default.oneOf(['x-small', 'small', 'medium', 'large']),
96
+ color: _propTypes.default.string,
97
+ minHeight: _propTypes.default.string
87
98
  }, _class2.defaultProps = {
88
- mainText: null
99
+ mainText: null,
100
+ size: 'large',
101
+ fontSize: 'xx-large',
102
+ minHeight: '500px',
103
+ color: 'primary'
89
104
  }, _temp)) || _class);
90
105
  exports.QuizzesSpinner = QuizzesSpinner;
91
106
  var _default = QuizzesSpinner;
package/lib/common/components/shared/spinner/theme.js CHANGED
@@ -5,9 +5,6 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = generator;
7
7
 
8
- function generator(_ref) {
9
- var typography = _ref.typography;
10
- return {
11
- mainTextFontSize: typography.fontSizeXXLarge
12
- };
8
+ function generator() {
9
+ return {};
13
10
  }
package/lib/reporting/components/resources/NewQuizAndItemAnalysis/ReportCard/presenter.js CHANGED
@@ -46,17 +46,17 @@ var _propTypes2 = require("../propTypes.js");
46
46
  var _dec, _class, _class2, _temp;
47
47
 
48
48
  var styles = {
49
- componentId: 'eJSiT',
49
+ componentId: 'boQPo',
50
50
  template: function template(theme) {
51
- 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}");
51
+ 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}");
52
52
  },
53
- 'metricsContainer': 'eJSiT_bqdH',
54
- 'card': 'eJSiT_fbIL',
55
- 'dateContainer': 'eJSiT_blRb'
53
+ 'metricsContainer': 'boQPo_bqdH',
54
+ 'reportCard': 'boQPo_PFlN',
55
+ 'dateContainer': 'boQPo_blRb',
56
+ 'quizAnalysisSummary': 'boQPo_bxzy',
57
+ 'titleContainer': 'boQPo_dKIc',
58
+ 'spinnerContainer': 'boQPo_cGHR'
56
59
  };
57
-
58
- var _ref = /*#__PURE__*/_react.default.createElement(_Spinner.default, null);
59
-
60
60
  var NewQuizAndItemAnalysisReportCardPresenter = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
61
61
  (0, _inherits2.default)(NewQuizAndItemAnalysisReportCardPresenter, _Component);
62
62
 
@@ -97,20 +97,14 @@ var NewQuizAndItemAnalysisReportCardPresenter = (_dec = (0, _uiThemeable.themeab
97
97
  }));
98
98
  };
99
99
 
100
- return _this;
101
- }
102
-
103
- (0, _createClass2.default)(NewQuizAndItemAnalysisReportCardPresenter, [{
104
- key: "renderContent",
105
- value: function renderContent() {
106
- var _this$props = this.props,
107
- name = _this$props.name,
108
- href = _this$props.href,
109
- quizAnalysis = _this$props.quizAnalysis;
110
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
111
- size: "medium",
112
- weight: "bold"
113
- }, name), this.renderMetrics(), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
100
+ _this.renderQuizAnalysisSummary = function () {
101
+ var _this$props = _this.props,
102
+ quizAnalysis = _this$props.quizAnalysis,
103
+ itemAnalyses = _this$props.itemAnalyses,
104
+ href = _this$props.href;
105
+ return /*#__PURE__*/_react.default.createElement("div", {
106
+ className: styles.quizAnalysisSummary
107
+ }, _this.renderMetrics(), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
114
108
  direction: "row",
115
109
  justifyItems: "space-between"
116
110
  }, /*#__PURE__*/_react.default.createElement("div", {
@@ -118,18 +112,66 @@ var NewQuizAndItemAnalysisReportCardPresenter = (_dec = (0, _uiThemeable.themeab
118
112
  }, /*#__PURE__*/_react.default.createElement(_index3.AnalysisUpdateDate, {
119
113
  date: quizAnalysis.created_timestamp,
120
114
  multiline: true
121
- })), /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
115
+ })), quizAnalysis && itemAnalyses && /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
122
116
  href: href
123
117
  }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
124
118
  size: "small"
125
119
  }, (0, _formatMessage.default)('View Report')))));
126
- }
127
- }, {
120
+ };
121
+
122
+ _this.renderSpinner = function (mainText) {
123
+ return /*#__PURE__*/_react.default.createElement(_Spinner.default, {
124
+ size: "x-small",
125
+ color: "brand",
126
+ minHeight: "0",
127
+ mainText: mainText,
128
+ fontSize: "x-small"
129
+ });
130
+ };
131
+
132
+ _this.renderReportCardFooter = function () {
133
+ var _this$props2 = _this.props,
134
+ generationInProgress = _this$props2.generationInProgress,
135
+ generateReports = _this$props2.generateReports,
136
+ analysisError = _this$props2.analysisError;
137
+ return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
138
+ direction: "row",
139
+ justifyItems: "space-between"
140
+ }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
141
+ shouldShrink: true
142
+ }, analysisError && !generationInProgress && /*#__PURE__*/_react.default.createElement(_uiText.Text, {
143
+ size: "x-small",
144
+ lineHeight: "fit",
145
+ weight: "bold",
146
+ color: "danger"
147
+ }, analysisError)), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, generationInProgress ? _this.renderSpinner((0, _formatMessage.default)('Generation In Progress')) : /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
148
+ onClick: generateReports,
149
+ role: "button"
150
+ }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
151
+ size: "small"
152
+ }, (0, _formatMessage.default)('Generate Report')))));
153
+ };
154
+
155
+ return _this;
156
+ }
157
+
158
+ (0, _createClass2.default)(NewQuizAndItemAnalysisReportCardPresenter, [{
128
159
  key: "render",
129
160
  value: function render() {
161
+ var _this$props3 = this.props,
162
+ fetchInProgress = _this$props3.fetchInProgress,
163
+ name = _this$props3.name,
164
+ quizAnalysis = _this$props3.quizAnalysis;
130
165
  return /*#__PURE__*/_react.default.createElement(_index.default, {
131
- className: styles.card
132
- }, this.props.quizAnalysis ? this.renderContent() : _ref);
166
+ className: styles.reportCard
167
+ }, /*#__PURE__*/_react.default.createElement("div", {
168
+ className: styles.titleContainer
169
+ }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
170
+ size: "medium",
171
+ weight: "bold"
172
+ }, name)), !fetchInProgress && quizAnalysis && this.renderQuizAnalysisSummary(), fetchInProgress && /*#__PURE__*/_react.default.createElement("div", {
173
+ className: styles.spinnerContainer
174
+ }, this.renderSpinner()), !fetchInProgress && this.renderReportCardFooter());
133
175
  }
134
176
  }]);
135
177
  NewQuizAndItemAnalysisReportCardPresenter.displayName = "NewQuizAndItemAnalysisReportCardPresenter";
@@ -137,10 +179,18 @@ var NewQuizAndItemAnalysisReportCardPresenter = (_dec = (0, _uiThemeable.themeab
137
179
  }(_react.Component), _class2.propTypes = {
138
180
  name: _propTypes.default.node,
139
181
  href: _propTypes.default.string,
140
- quizAnalysis: _propTypes2.quizAnalysisPropType
182
+ quizAnalysis: _propTypes2.quizAnalysisPropType,
183
+ itemAnalyses: _propTypes.default.arrayOf(_propTypes2.itemAnalysisPropType),
184
+ fetchInProgress: _propTypes.default.bool.isRequired,
185
+ generationInProgress: _propTypes.default.bool.isRequired,
186
+ analysisError: _propTypes.default.string,
187
+ generateReports: _propTypes.default.func.isRequired
141
188
  }, _class2.defaultProps = {
142
189
  name: void 0,
143
190
  href: void 0,
144
- quizAnalysis: void 0
191
+ analysisError: void 0,
192
+ generationInProgress: void 0,
193
+ quizAnalysis: void 0,
194
+ itemAnalyses: void 0
145
195
  }, _temp)) || _class);
146
196
  exports.NewQuizAndItemAnalysisReportCardPresenter = NewQuizAndItemAnalysisReportCardPresenter;
package/lib/reporting/components/resources/NewQuizAndItemAnalysis/ReportCard/theme.js CHANGED
@@ -7,13 +7,15 @@ exports.default = generator;
7
7
 
8
8
  function generator(_ref) {
9
9
  var spacing = _ref.spacing,
10
- borders = _ref.borders;
10
+ borders = _ref.borders,
11
+ colors = _ref.colors;
11
12
  return {
12
13
  metricsPadding: spacing.medium,
13
14
  cardWidth: '16rem',
14
15
  cardPadding: spacing.medium,
15
16
  cardMargin: spacing.xSmall,
16
17
  cardBoxShadow: '1px 1px 3px 0 #ddd',
17
- cardBorderRadius: borders.radiusMedium
18
+ cardBorderRadius: borders.radiusMedium,
19
+ quizSummaryBorderBottomColor: colors.tiara
18
20
  };
19
21
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/quiz-core",
3
- "version": "17.63.1-rc.3+bb9038eca",
3
+ "version": "17.63.1-rc.4+d5b17d3d0",
4
4
  "license": "MIT",
5
5
  "description": "The Quiz React SDK by Instructure Inc.",
6
6
  "author": "Instructure, Inc. Engineering and Product Design",
@@ -41,11 +41,11 @@
41
41
  ],
42
42
  "dependencies": {
43
43
  "@instructure/outcomes-ui": "^2.1.9",
44
- "@instructure/quiz-common": "17.63.1-rc.3+bb9038eca",
45
- "@instructure/quiz-i18n": "17.63.1-rc.3+bb9038eca",
46
- "@instructure/quiz-interactions": "17.63.1-rc.3+bb9038eca",
47
- "@instructure/quiz-number-input": "17.63.1-rc.3+bb9038eca",
48
- "@instructure/quiz-rce": "17.63.1-rc.3+bb9038eca",
44
+ "@instructure/quiz-common": "17.63.1-rc.4+d5b17d3d0",
45
+ "@instructure/quiz-i18n": "17.63.1-rc.4+d5b17d3d0",
46
+ "@instructure/quiz-interactions": "17.63.1-rc.4+d5b17d3d0",
47
+ "@instructure/quiz-number-input": "17.63.1-rc.4+d5b17d3d0",
48
+ "@instructure/quiz-rce": "17.63.1-rc.4+d5b17d3d0",
49
49
  "@instructure/ui-a11y-content": "^7.20.0",
50
50
  "@instructure/ui-alerts": "^7.20.0",
51
51
  "@instructure/ui-avatar": "^7.20.0",
@@ -106,7 +106,7 @@
106
106
  "eventemitter3": "^3.1.0",
107
107
  "humps": "^2.0.0",
108
108
  "immutable": "^3.8.1",
109
- "instructure-validations": "17.63.1-rc.3+bb9038eca",
109
+ "instructure-validations": "17.63.1-rc.4+d5b17d3d0",
110
110
  "ipaddr.js": "^1.5.4",
111
111
  "isomorphic-fetch": "^2.2.0",
112
112
  "isuuid": "^0.1.0",
@@ -157,7 +157,7 @@
157
157
  "intl": "^1.2.4",
158
158
  "jquery": "^2.2.3",
159
159
  "most-subject": "^5.3.0",
160
- "quiz-presets": "17.63.1-rc.3+bb9038eca",
160
+ "quiz-presets": "17.63.1-rc.4+d5b17d3d0",
161
161
  "react": "^16.8.6",
162
162
  "react-addons-test-utils": "^15.6.2",
163
163
  "react-dom": "^16.8.6",
@@ -173,5 +173,5 @@
173
173
  "publishConfig": {
174
174
  "access": "public"
175
175
  },
176
- "gitHead": "bb9038eca17319245eda3bfde7b7a77b61c8498a"
176
+ "gitHead": "d5b17d3d081eaf1eedc84b1bf597eb972ecccb20"
177
177
  }