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

package/es/common/components/shared/spinner/Spinner.js

@@ -7,20 +7,19 @@ var _dec, _class, _class2, _temp;
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { Text } from '@instructure/ui-text';
 import { Spinner } from '@instructure/ui-spinner';
-import { Heading } from '@instructure/ui-heading';
 import { PresentationContent } from '@instructure/ui-a11y-content';
 import { themeable } from '@instructure/ui-themeable';
 import t from '@instructure/quiz-i18n/es/format-message';
 var styles = {
-  componentId: 'ebGcj',
+  componentId: 'cJgyM',
   template: function template(theme) {
-    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', "}");
+    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}";
   },
-  'wrapper': 'ebGcj_gasz',
-  'left': 'ebGcj_bZBM',
-  'right': 'ebGcj_qrQc',
-  'mainText': 'ebGcj_fBqo'
+  'wrapper': 'cJgyM_gasz',
+  'left': 'cJgyM_bZBM',
+  'right': 'cJgyM_qrQc'
 };
 import theme from "./theme.js";
 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
   _createClass(QuizzesSpinner, [{
     key: "mainText",
     value: function mainText() {
-      return this.props.mainText || t('Loading...');
+      var _this$props = this.props,
+          color = _this$props.color,
+          mainText = _this$props.mainText,
+          fontSize = _this$props.fontSize;
+      return /*#__PURE__*/React.createElement(Text, {
+        size: fontSize,
+        color: color
+      }, mainText || t('Loading...'));
     }
   }, {
     key: "render",
     value: function render() {
+      var _this$props2 = this.props,
+          size = _this$props2.size,
+          minHeight = _this$props2.minHeight;
       return /*#__PURE__*/React.createElement("div", {
-        className: styles.wrapper
+        className: styles.wrapper,
+        style: {
+          minHeight: minHeight
+        }
       }, /*#__PURE__*/React.createElement("div", {
         className: styles.left
       }, /*#__PURE__*/React.createElement(Spinner, {
         renderTitle: this.mainText(),
-        size: "large"
+        size: size
       })), /*#__PURE__*/React.createElement("div", {
         className: styles.right
-      }, /*#__PURE__*/React.createElement(PresentationContent, null, /*#__PURE__*/React.createElement(Heading, {
-        level: "h2",
-        as: "h1"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.mainText
-      }, this.mainText())))));
+      }, /*#__PURE__*/React.createElement(PresentationContent, null, this.mainText())));
     }
   }]);
 
   QuizzesSpinner.displayName = "QuizzesSpinner";
   return QuizzesSpinner;
 }(Component), _class2.propTypes = {
-  mainText: PropTypes.string
+  mainText: PropTypes.string,
+  fontSize: PropTypes.oneOf(['x-small', 'small', 'medium', 'large', 'x-large', 'xx-large']),
+  size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
+  color: PropTypes.string,
+  minHeight: PropTypes.string
 }, _class2.defaultProps = {
-  mainText: null
+  mainText: null,
+  size: 'large',
+  fontSize: 'xx-large',
+  minHeight: '500px',
+  color: 'primary'
 }, _temp)) || _class);
 export default QuizzesSpinner;

package/es/common/components/shared/spinner/theme.js

@@ -1,6 +1,3 @@
-export default function generator(_ref) {
-  var typography = _ref.typography;
-  return {
-    mainTextFontSize: typography.fontSizeXXLarge
-  };
+export default function generator() {
+  return {};
 }

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

@@ -9,27 +9,18 @@ var _dec, _class, _class2, _temp;
 import { Heading } from '@instructure/ui-heading';
 import React, { Component } from 'react';
 var styles = {
-  componentId: 'bCOJX',
+  componentId: 'bnyej',
   template: function template(theme) {
-    return "\n\n.bCOJX_eDnN{display:flex;flex-basis:45%;flex-direction:column;overflow:hidden}\n\n.bCOJX_eKXQ{padding:".concat(theme.cardWrapperPadding || 'inherit', ";position:relative}\n\n.bCOJX_eoBe{font-size:").concat(theme.metricNumberContextFontSize || 'inherit', ";font-weight:").concat(theme.metricNumberContextFontWeight || 'inherit', "}\n\n.bCOJX_eIAv{display:flex;position:relative}\n\n.bCOJX_ePHw{flex-basis:91%;overflow:hidden;padding-bottom:10px;text-overflow:ellipsis;white-space:nowrap}\n\n.bCOJX_dzsH{overflow:visible;text-overflow:unset;white-space:normal}\n\n.bCOJX_byoJ{position:absolute;right:7px;top:-8px}\n\n.bCOJX_evBt{flex-wrap:wrap;justify-content:space-between}\n\n.bCOJX_pAQb,.bCOJX_evBt{display:flex;flex-direction:row}\n\n.bCOJX_zefc{display:flex;flex-basis:55%;justify-content:flex-end}\n\n.bCOJX_dPzc{flex-direction:column}\n\n.bCOJX_dPzc,.bCOJX_dzph{display:flex;flex-basis:100%}\n\n.bCOJX_dzph{align-items:flex-start;box-sizing:border-box;column-gap:5px;justify-content:space-between;padding:0 30px 0 25px}\n\n.bCOJX_eobd{padding-top:1rem}\n\n.bCOJX_NpIG{position:absolute;right:").concat(theme.viewPadding || 'inherit', ";top:").concat(theme.viewPadding || 'inherit', "}\n\n.bCOJX_csiQ{display:flex;flex-basis:100%}\n\n.bCOJX_fjVl{display:flex;flex-basis:50%}\n\n.bCOJX_eZLI{display:flex;flex-basis:40%}\n\n@media screen and (--tabletBreakPoint){.bCOJX_zefc{flex-basis:100%;justify-content:flex-start}.bCOJX_ePHw{flex-basis:94%}.bCOJX_eDnN{flex-basis:100%}.bCOJX_dzph{padding:0}.bCOJX_eDnN h3{padding-right:30px}.bCOJX_NpIG{right:17px}.bCOJX_eIAv{margin-bottom:20px}.bCOJX_byoJ{right:-7px}.bCOJX_dzph{flex-wrap:wrap}}");
+    return "\n\n.bnyej_eKXQ{padding:".concat(theme.cardWrapperPadding || 'inherit', ";position:relative}\n\n.bnyej_bwlc{align-items:flex-start;gap:24px;justify-content:space-between;row-gap:32px}\n\n.bnyej_bwlc,.bnyej_bqdH{display:flex;flex-direction:row;flex-wrap:wrap}\n\n.bnyej_bqdH{align-items:center;row-gap:24px}\n\n.bnyej_NpIG{position:absolute;right:").concat(theme.viewPaddingRight || 'inherit', ";top:").concat(theme.viewPaddingTop || 'inherit', "}\n\n.bnyej_eoBe{font-size:").concat(theme.metricNumberContextFontSize || 'inherit', ";font-weight:").concat(theme.metricNumberContextFontWeight || 'inherit', "}\n\n.bnyej_fFDJ{display:none}\n\n.bnyej_esVF{min-height:48px}\n\n.bnyej_eTZq{position:relative}\n\n.bnyej_eTZq:after{background:linear-gradient(180deg,hsla(0,0%,100%,0),#fff);content:\"\";height:48px;left:0;position:absolute;top:0;width:100%}");
   },
-  'heading': 'bCOJX_eDnN',
-  'cardWrapper': 'bCOJX_eKXQ',
-  'metricNumberContext': 'bCOJX_eoBe',
-  'bodyPresentation': 'bCOJX_eIAv',
-  'bodyExcerpt': 'bCOJX_ePHw',
-  'bodyExcerptExpanded': 'bCOJX_dzsH',
-  'bodyExpandButtonWrapper': 'bCOJX_byoJ',
-  'innerWrapper': 'bCOJX_evBt',
-  'expandableInnerWrapper': 'bCOJX_pAQb',
-  'metricsWithControls': 'bCOJX_zefc',
-  'metricGroup': 'bCOJX_dPzc',
-  'metricsRow': 'bCOJX_dzph',
-  'metricsRowPaginated': 'bCOJX_eobd',
-  'itemCardToggleButtonWrapper': 'bCOJX_NpIG',
-  'expandableContent': 'bCOJX_csiQ',
-  'tableColumn': 'bCOJX_fjVl',
-  'performanceColumn': 'bCOJX_eZLI'
+  'cardWrapper': 'bnyej_eKXQ',
+  'itemCardInnerContainer': 'bnyej_bwlc',
+  'metricsContainer': 'bnyej_bqdH',
+  'itemCardToggleButtonWrapper': 'bnyej_NpIG',
+  'metricNumberContext': 'bnyej_eoBe',
+  'hiddenMetrics': 'bnyej_fFDJ',
+  'itemBody': 'bnyej_esVF',
+  'hiddenItemBody': 'bnyej_eTZq'
 };
 import t from '@instructure/quiz-i18n/es/format-message';
 import ExpandButton from "../../../../../common/components/shared/ExpandButton/index.js";
@@ -44,6 +35,8 @@ import classnames from 'classnames';
 import { interactionTypesNameDictionary } from "../../../../../common/util/interactionTypeMetadata.js";
 import AnswerSummaryTable from "../AnswerSummaryTable/index.js";
 import { itemAnalysisPropType } from "../propTypes.js";
+import { RichContentRenderer } from '@instructure/quiz-rce';
+import { Flex } from '@instructure/ui-flex';
 var supportedTables = ['choice', 'true-false', 'multi-answer'];
 export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(NewItemAnalysis, _Component);
@@ -61,9 +54,7 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
 
     _this = _super.call.apply(_super, [this].concat(args));
     _this.state = {
-      bodyToggable: false,
       bodyExpanded: false,
-      itemExpanded: false,
       metricsExpanded: false
     };
 
@@ -74,39 +65,10 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
       });
     };
 
-    _this.buildItemCardHeadingId = function () {
-      return "itemCardHeading-".concat(_this.props.itemAnalysis.metadata.item_id);
-    };
-
-    _this.buildItemCardBodyId = function () {
-      return "itemCardBody-".concat(_this.props.itemAnalysis.metadata.item_id);
-    };
-
-    _this.bodyExceedsLimit = function (bodyElement, headingElement) {
-      if (!bodyElement || !headingElement) {
-        return;
-      }
-
-      return bodyElement.scrollWidth > headingElement.clientWidth || _this.state.bodyExpanded;
-    };
-
-    _this.handleBodyWidth = function () {
-      var bodyElement = document.getElementById(_this.buildItemCardBodyId());
-      var headingElement = document.getElementById(_this.buildItemCardHeadingId());
-
-      _this.setState({
-        bodyToggable: _this.bodyExceedsLimit(bodyElement, headingElement)
-      });
-    };
-
-    _this.handleToggle = function () {
+    _this.handleMetricToggle = function () {
       _this.setState({
         metricsExpanded: !_this.state.metricsExpanded
       });
-
-      _this.setState({
-        itemExpanded: !_this.state.itemExpanded
-      });
     };
 
     _this.handleBodyToggle = function () {
@@ -115,26 +77,6 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
       });
     };
 
-    _this.renderExpandItemCardButton = function () {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.itemCardToggleButtonWrapper
-      }, /*#__PURE__*/React.createElement(ExpandButton, {
-        onClick: _this.handleToggle,
-        title: _this.state.metricsExpanded ? t('collapse item card') : t('expand item card'),
-        isExpanded: _this.state.metricsExpanded
-      }));
-    };
-
-    _this.renderBodyToggleButton = function () {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.bodyExpandButtonWrapper
-      }, /*#__PURE__*/React.createElement(ExpandButton, {
-        onClick: _this.handleBodyToggle,
-        title: _this.state.bodyExpanded ? t('collapse question stem') : t('expand question stem'),
-        isExpanded: _this.state.bodyExpanded
-      }));
-    };
-
     _this.calculateValueWithPointsPossible = function (metricKey, metricValue) {
       var pointsPossible = _this.props.itemAnalysis.scores.points_possible;
       return t.rich('{score, number}<s>/{possible, number} PTS</s>', {
@@ -150,103 +92,145 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
       });
     };
 
-    _this.renderExpanded = function () {
-      var scores = _this.props.itemAnalysis.scores;
-      var classes = classnames(styles.metricsRow, styles.metricsRowPaginated);
-      return /*#__PURE__*/React.createElement("div", {
-        className: classes
-      }, /*#__PURE__*/React.createElement(AnalysisPopoverMetric, {
-        metricKey: "pearson_correlation",
-        label: t('Pearson Correlation Coefficient'),
-        value: t.number(scores.pearson_correlation),
-        popoverDescription: pearsonCorrelation
-      }));
-    };
-
-    return _this;
-  }
-
-  _createClass(NewItemAnalysis, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.handleBodyWidth();
-      window.addEventListener('resize', this.handleBodyWidth);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      window.removeEventListener('resize', this.handleBodyWidth);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props$itemAnaly = this.props.itemAnalysis,
-          answer_summary = _this$props$itemAnaly.answer_summary,
-          metadata = _this$props$itemAnaly.metadata,
-          scores = _this$props$itemAnaly.scores;
-      var bodyClass = classnames(styles.bodyExcerpt, _defineProperty({}, styles.bodyExcerptExpanded, this.state.bodyExpanded));
-      var headingId = this.buildItemCardHeadingId();
-      var bodyId = this.buildItemCardBodyId();
-      var isSupportedTable = supportedTables.includes(metadata.interaction_type);
-      return /*#__PURE__*/React.createElement(Card, {
-        className: styles.cardWrapper
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.innerWrapper
-      }, /*#__PURE__*/React.createElement("div", {
-        id: headingId,
-        className: styles.heading
-      }, /*#__PURE__*/React.createElement(Heading, {
-        margin: "0 0 small 0",
+    _this.renderTitle = function (title) {
+      return /*#__PURE__*/React.createElement(Heading, {
+        margin: "0 x-large small 0",
         level: "h3",
         weight: "bold",
         color: "primary"
-      }, metadata.item_title), /*#__PURE__*/React.createElement(Text, {
+      }, title);
+    };
+
+    _this.renderInteractionType = function (interactionType) {
+      return /*#__PURE__*/React.createElement(Text, {
         size: "small",
         weight: "bold",
         transform: "capitalize"
-      }, this.mapInteractionTypeToTranslation(metadata.interaction_type)), /*#__PURE__*/React.createElement("div", {
-        id: "itemBody",
-        className: styles.bodyPresentation
-      }, /*#__PURE__*/React.createElement("div", {
-        id: bodyId,
-        className: bodyClass
-      }, /*#__PURE__*/React.createElement(Text, {
-        size: "small"
-      }, metadata.item_body)), this.state.bodyToggable && this.renderBodyToggleButton())), /*#__PURE__*/React.createElement("div", {
-        className: styles.metricsWithControls
+      }, _this.mapInteractionTypeToTranslation(interactionType));
+    };
+
+    _this.renderRichContent = function (itemBody, itemBodyClass) {
+      return /*#__PURE__*/React.createElement(Flex, {
+        direction: "row",
+        alignItems: "start"
+      }, /*#__PURE__*/React.createElement(Flex.Item, {
+        shouldShrink: true,
+        shouldGrow: true
       }, /*#__PURE__*/React.createElement("div", {
-        className: styles.metricGroup
+        className: itemBodyClass
+      }, /*#__PURE__*/React.createElement(RichContentRenderer, {
+        content: itemBody
+      }))), /*#__PURE__*/React.createElement(Flex.Item, {
+        margin: "xx-small small none x-small",
+        size: "38px"
+      }, /*#__PURE__*/React.createElement(ExpandButton, {
+        onClick: _this.handleBodyToggle,
+        title: _this.state.bodyExpanded ? t('collapse question stem') : t('expand question stem'),
+        isExpanded: _this.state.bodyExpanded
+      })));
+    };
+
+    _this.renderMetrics = function (scores, metricsClass) {
+      return /*#__PURE__*/React.createElement(Flex, {
+        direction: "column"
+      }, /*#__PURE__*/React.createElement(Flex.Item, {
+        overflowY: "visible"
       }, /*#__PURE__*/React.createElement("div", {
-        className: styles.metricsRow
+        className: styles.metricsContainer
+      }, /*#__PURE__*/React.createElement(Flex.Item, {
+        margin: "none medium none none"
       }, /*#__PURE__*/React.createElement(AnalysisPopoverMetric, {
         metricKey: "difficulty_index",
         label: t('Item Difficulty'),
         value: t.number(scores.difficulty_index),
         popoverDescription: difficultyIndex
-      }), /*#__PURE__*/React.createElement(AnalysisMetric, {
+      })), /*#__PURE__*/React.createElement(Flex.Item, {
+        margin: "none medium none none"
+      }, /*#__PURE__*/React.createElement(AnalysisMetric, {
         metricKey: "mean",
         label: t('Mean Earned Points'),
-        value: this.calculateValueWithPointsPossible('mean', scores.mean)
-      }), /*#__PURE__*/React.createElement(AnalysisMetric, {
+        value: _this.calculateValueWithPointsPossible('mean', scores.mean)
+      })), /*#__PURE__*/React.createElement(Flex.Item, {
+        margin: "none medium none none"
+      }, /*#__PURE__*/React.createElement(AnalysisMetric, {
         metricKey: "median",
         label: t('Median Earned Points'),
-        value: this.calculateValueWithPointsPossible('median', scores.median)
-      }), /*#__PURE__*/React.createElement(AnalysisPopoverMetric, {
+        value: _this.calculateValueWithPointsPossible('median', scores.median)
+      })), /*#__PURE__*/React.createElement(Flex.Item, {
+        margin: "none large none none"
+      }, /*#__PURE__*/React.createElement(AnalysisPopoverMetric, {
         metricKey: "discrimination_index",
         label: t('Discrimination Index'),
         value: t.number(scores.discrimination_index),
         popoverDescription: discriminationIndex
-      }), this.renderExpandItemCardButton()), this.state.metricsExpanded && this.renderExpanded()))), this.state.itemExpanded && /*#__PURE__*/React.createElement("div", {
-        className: styles.expandableInnerWrapper
+      })))), /*#__PURE__*/React.createElement(Flex.Item, {
+        overflowY: "visible",
+        margin: "medium none none none"
       }, /*#__PURE__*/React.createElement("div", {
-        className: styles.expandableContent
+        className: metricsClass
       }, /*#__PURE__*/React.createElement("div", {
-        className: styles.tableColumn
-      }, isSupportedTable && /*#__PURE__*/React.createElement(AnswerSummaryTable, {
+        className: styles.metricsContainer
+      }, /*#__PURE__*/React.createElement(Flex.Item, {
+        margin: "none medium none none"
+      }, /*#__PURE__*/React.createElement(AnalysisPopoverMetric, {
+        metricKey: "pearson_correlation",
+        label: t('Pearson Correlation Coefficient'),
+        value: t.number(scores.pearson_correlation),
+        popoverDescription: pearsonCorrelation
+      }))))));
+    };
+
+    _this.renderAnswerSummaryTable = function (answer_summary, isSupportedTable, metricsClass) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: metricsClass
+      }, isSupportedTable && /*#__PURE__*/React.createElement(Flex, {
+        direction: "row"
+      }, /*#__PURE__*/React.createElement(Flex.Item, {
+        size: "55%"
+      }, /*#__PURE__*/React.createElement(AnswerSummaryTable, {
         answerSummary: answer_summary
-      })), /*#__PURE__*/React.createElement("div", {
-        className: styles.performanceColumn
       }))));
+    };
+
+    return _this;
+  }
+
+  _createClass(NewItemAnalysis, [{
+    key: "render",
+    value: function render() {
+      var _this$props$itemAnaly = this.props.itemAnalysis,
+          answer_summary = _this$props$itemAnaly.answer_summary,
+          metadata = _this$props$itemAnaly.metadata,
+          scores = _this$props$itemAnaly.scores;
+      var isSupportedTable = supportedTables.includes(metadata.interaction_type);
+      var metricsClass = classnames(_defineProperty({}, styles.hiddenMetrics, !this.state.metricsExpanded));
+      var itemBodyClass = classnames(styles.itemBody, _defineProperty({}, styles.hiddenItemBody, !this.state.bodyExpanded));
+      return /*#__PURE__*/React.createElement(Card, {
+        className: styles.cardWrapper
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.itemCardToggleButtonWrapper
+      }, /*#__PURE__*/React.createElement(ExpandButton, {
+        onClick: this.handleMetricToggle,
+        title: this.state.metricsExpanded ? t('collapse item card') : t('expand item card'),
+        isExpanded: this.state.metricsExpanded
+      })), /*#__PURE__*/React.createElement(Flex, {
+        direction: "column"
+      }, /*#__PURE__*/React.createElement(Flex.Item, {
+        overflowY: "visible"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.itemCardInnerContainer
+      }, /*#__PURE__*/React.createElement(Flex.Item, {
+        shouldGrow: true,
+        shouldShrink: true,
+        size: "45%"
+      }, /*#__PURE__*/React.createElement(Flex, {
+        direction: "column",
+        justifyItems: "start"
+      }, /*#__PURE__*/React.createElement(Flex.Item, null, this.renderTitle(metadata.item_title)), /*#__PURE__*/React.createElement(Flex.Item, null, this.renderInteractionType(metadata.interaction_type)), /*#__PURE__*/React.createElement(Flex.Item, {
+        shouldShrink: true,
+        overflowY: "hidden",
+        size: !this.state.bodyExpanded ? '48px' : void 0
+      }, this.renderRichContent(metadata.item_body, itemBodyClass)))), /*#__PURE__*/React.createElement(Flex.Item, null, this.renderMetrics(scores, metricsClass)))), /*#__PURE__*/React.createElement(Flex.Item, null, this.renderAnswerSummaryTable(answer_summary, isSupportedTable, metricsClass))));
     }
   }]);
 

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

@@ -5,7 +5,8 @@ export default function generator(_ref) {
   return {
     tabletBreakPoint: "max-width: ".concat(breakpoints.large),
     cardWrapperPadding: spacing.medium,
-    viewPadding: spacing.small,
+    viewPaddingRight: spacing.large,
+    viewPaddingTop: spacing.medium,
     metricNumberContextFontSize: typography.fontSizeMedium,
     metricNumberContextFontWeight: typography.fontWeightNormal
   };

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

@@ -8,16 +8,16 @@ var _dec, _class, _class2, _temp;
 import { Heading } from '@instructure/ui-heading';
 import React, { Component } from 'react';
 var styles = {
-  componentId: 'bnEXV',
+  componentId: 'fQZVs',
   template: function template(theme) {
-    return "\n\n.bnEXV_eDnN{display:flex;justify-content:space-between;padding-bottom:".concat(theme.headingPadding || 'inherit', "}\n\n.bnEXV_eKXQ{padding:").concat(theme.cardWrapperPadding || 'inherit', ";position:relative}\n\n.bnEXV_crZr{padding-top:").concat(theme.metricGroupPaddingTop || 'inherit', "}\n\n.bnEXV_bTHH{position:absolute;right:").concat(theme.viewPadding || 'inherit', ";top:").concat(theme.viewPadding || 'inherit', "}\n\n.bnEXV_dPzc,.bnEXV_cpZE{column-gap:").concat(theme.metricsColumnGap || 'inherit', ";display:flex;flex-wrap:wrap;justify-content:flex-start;row-gap:1.5rem}");
+    return "\n\n.fQZVs_eDnN{display:flex;justify-content:space-between;padding-bottom:".concat(theme.headingPadding || 'inherit', "}\n\n.fQZVs_eKXQ{padding:").concat(theme.cardWrapperPadding || 'inherit', ";position:relative}\n\n.fQZVs_crZr{padding-top:").concat(theme.metricGroupPaddingTop || 'inherit', "}\n\n.fQZVs_bTHH{position:absolute;right:").concat(theme.viewPaddingRight || 'inherit', ";top:").concat(theme.viewPaddingTop || 'inherit', "}\n\n.fQZVs_dPzc,.fQZVs_cpZE{column-gap:").concat(theme.metricsColumnGap || 'inherit', ";display:flex;flex-wrap:wrap;justify-content:flex-start;row-gap:1.5rem}");
   },
-  'heading': 'bnEXV_eDnN',
-  'cardWrapper': 'bnEXV_eKXQ',
-  'container': 'bnEXV_crZr',
-  'expandButtonContainer': 'bnEXV_bTHH',
-  'metricGroup': 'bnEXV_dPzc',
-  'metricsWrapper': 'bnEXV_cpZE'
+  'heading': 'fQZVs_eDnN',
+  'cardWrapper': 'fQZVs_eKXQ',
+  'container': 'fQZVs_crZr',
+  'expandButtonContainer': 'fQZVs_bTHH',
+  'metricGroup': 'fQZVs_dPzc',
+  'metricsWrapper': 'fQZVs_cpZE'
 };
 import t from '@instructure/quiz-i18n/es/format-message';
 import ExpandButton from "../../../../../common/components/shared/ExpandButton/index.js";
@@ -102,6 +102,7 @@ export var NewQuizAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
         className: styles.heading
       }, /*#__PURE__*/React.createElement(Heading, {
         level: "h4",
+        margin: "0 x-large 0 0",
         color: "primary"
       }, t('Quiz summary:'), " ", metadata === null || metadata === void 0 ? void 0 : metadata.quiz_title)), /*#__PURE__*/React.createElement("div", {
         className: styles.metricGroup

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

@@ -2,7 +2,8 @@ export default function generator(_ref) {
   var spacing = _ref.spacing;
   return {
     metricGroupPaddingTop: spacing.medium,
-    viewPadding: spacing.small,
+    viewPaddingRight: spacing.large,
+    viewPaddingTop: spacing.medium,
     headingPadding: spacing.medium,
     cardWrapperPadding: spacing.medium,
     metricsColumnGap: '82px'

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

@@ -14,22 +14,22 @@ import { Flex } from '@instructure/ui-flex';
 import { themeable } from '@instructure/ui-themeable';
 import Card from "../../../../../common/components/shared/Card/index.js";
 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'
 };
 import theme 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 { quizAnalysisPropType } from "../propTypes.js";
-
-var _ref = /*#__PURE__*/React.createElement(Spinner, null);
-
+import { itemAnalysisPropType, quizAnalysisPropType } from "../propTypes.js";
 export var NewQuizAndItemAnalysisReportCardPresenter = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(NewQuizAndItemAnalysisReportCardPresenter, _Component);
 
@@ -70,20 +70,14 @@ export var NewQuizAndItemAnalysisReportCardPresenter = (_dec = themeable(theme,
       }));
     };
 
-    return _this;
-  }
-
-  _createClass(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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
-        size: "medium",
-        weight: "bold"
-      }, name), this.renderMetrics(), /*#__PURE__*/React.createElement(Flex, {
+    _this.renderQuizAnalysisSummary = function () {
+      var _this$props = _this.props,
+          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, {
         direction: "row",
         justifyItems: "space-between"
       }, /*#__PURE__*/React.createElement("div", {
@@ -91,18 +85,66 @@ export var NewQuizAndItemAnalysisReportCardPresenter = (_dec = themeable(theme,
       }, /*#__PURE__*/React.createElement(AnalysisUpdateDate, {
         date: quizAnalysis.created_timestamp,
         multiline: true
-      })), /*#__PURE__*/React.createElement(Link, {
+      })), quizAnalysis && itemAnalyses && /*#__PURE__*/React.createElement(Link, {
         href: href
       }, /*#__PURE__*/React.createElement(Text, {
         size: "small"
       }, t('View Report')))));
-    }
-  }, {
+    };
+
+    _this.renderSpinner = function (mainText) {
+      return /*#__PURE__*/React.createElement(Spinner, {
+        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.createElement(Flex, {
+        direction: "row",
+        justifyItems: "space-between"
+      }, /*#__PURE__*/React.createElement(Flex.Item, {
+        shouldShrink: true
+      }, analysisError && !generationInProgress && /*#__PURE__*/React.createElement(Text, {
+        size: "x-small",
+        lineHeight: "fit",
+        weight: "bold",
+        color: "danger"
+      }, analysisError)), /*#__PURE__*/React.createElement(Flex.Item, null, generationInProgress ? _this.renderSpinner(t('Generation In Progress')) : /*#__PURE__*/React.createElement(Link, {
+        onClick: generateReports,
+        role: "button"
+      }, /*#__PURE__*/React.createElement(Text, {
+        size: "small"
+      }, t('Generate Report')))));
+    };
+
+    return _this;
+  }
+
+  _createClass(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.createElement(Card, {
-        className: styles.card
-      }, this.props.quizAnalysis ? this.renderContent() : _ref);
+        className: styles.reportCard
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.titleContainer
+      }, /*#__PURE__*/React.createElement(Text, {
+        size: "medium",
+        weight: "bold"
+      }, name)), !fetchInProgress && quizAnalysis && this.renderQuizAnalysisSummary(), fetchInProgress && /*#__PURE__*/React.createElement("div", {
+        className: styles.spinnerContainer
+      }, this.renderSpinner()), !fetchInProgress && this.renderReportCardFooter());
     }
   }]);
 
@@ -111,9 +153,17 @@ export var NewQuizAndItemAnalysisReportCardPresenter = (_dec = themeable(theme,
 }(Component), _class2.propTypes = {
   name: PropTypes.node,
   href: PropTypes.string,
-  quizAnalysis: quizAnalysisPropType
+  quizAnalysis: quizAnalysisPropType,
+  itemAnalyses: PropTypes.arrayOf(itemAnalysisPropType),
+  fetchInProgress: PropTypes.bool.isRequired,
+  generationInProgress: PropTypes.bool.isRequired,
+  analysisError: PropTypes.string,
+  generateReports: PropTypes.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);