@instructure/quiz-core 17.63.1-rc.1 → 17.63.1-rc.13

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerSummaryTable/ChoiceInfo/presenter.js

@@ -27,10 +27,6 @@ var _index = _interopRequireDefault(require("../Row/index.js"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _ref = /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
-  width: "46px"
-});
-
 var ChoiceInfo = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ChoiceInfo, _Component);
 
@@ -77,15 +73,26 @@ var ChoiceInfo = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this$props = this.props,
           choices = _this$props.choices,
-          noAnswer = _this$props.noAnswer;
+          noAnswer = _this$props.noAnswer,
+          itemId = _this$props.itemId;
       var numberOfChoices = choices.length;
+      var spacingHeaderId = "answer-frequency-summary-spacing-".concat(itemId);
+      var answerHeaderId = "answer-frequency-summary-answer-".concat(itemId);
+      var respondentsHeaderId = "answer-frequency-summary-respondents-".concat(itemId);
+      var percentageHeaderId = "answer-frequency-summary-percentage-".concat(itemId);
       return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_uiTable.Table, {
         caption: (0, _formatMessage.default)('Answer Frequency Summary')
-      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Head, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, null, _ref, /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Head, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+        id: spacingHeaderId,
+        width: "46px"
+      }), /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+        id: answerHeaderId,
         height: "47px"
       }, (0, _formatMessage.default)('Answer')), /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+        id: respondentsHeaderId,
         height: "47px"
       }, (0, _formatMessage.default)('Respondents')), /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+        id: percentageHeaderId,
         height: "47px",
         textAlign: "center"
       }, (0, _formatMessage.default)('%')))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Body, null, choices.map(this.renderRow), this.renderNoAnswer(noAnswer, numberOfChoices))));
@@ -97,6 +104,7 @@ var ChoiceInfo = /*#__PURE__*/function (_Component) {
 
 exports.ChoiceInfo = ChoiceInfo;
 ChoiceInfo.propTypes = {
+  itemId: _propTypes.default.number,
   choices: _propTypes.default.arrayOf(_propTypes.default.shape({
     body: _propTypes.default.string,
     correct: _propTypes.default.bool,

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

@@ -29,6 +29,8 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
 
 var _propTypes = require("../propTypes.js");
 
+var _quizInteractions = require("@instructure/quiz-interactions");
+
 var _dec, _class, _class2, _temp;
 
 var styles = {
@@ -62,12 +64,14 @@ var AnswerSummaryTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, sty
       var _this$props$answerSum = _this.props.answerSummary,
           choices = _this$props$answerSum.choices,
           no_answer = _this$props$answerSum.no_answer;
+      var itemId = _this.props.itemId;
       return /*#__PURE__*/_react.default.createElement("div", {
         className: styles.tableWrapper
       }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
         margin: "large 0 small 0",
         level: "h3"
       }, (0, _formatMessage.default)('Answer Frequency Summary')), /*#__PURE__*/_react.default.createElement(_presenter.ChoiceInfo, {
+        itemId: itemId,
         choices: choices,
         noAnswer: no_answer
       }));
@@ -78,6 +82,7 @@ var AnswerSummaryTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, sty
 
   return AnswerSummaryTable;
 }(_react.Component), _class2.propTypes = {
+  itemId: _quizInteractions.PropTypes.number,
   answerSummary: _propTypes.answerSummaryPropType
 }.isRequired, _temp)) || _class);
 exports.AnswerSummaryTable = AnswerSummaryTable;

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

@@ -41,7 +41,7 @@ var _index3 = _interopRequireDefault(require("../AnalysisMetric/index.js"));
 
 var _index4 = _interopRequireDefault(require("../AnalysisPopoverMetric/index.js"));
 
-var _classnames2 = _interopRequireDefault(require("classnames"));
+var _classnames3 = _interopRequireDefault(require("classnames"));
 
 var _interactionTypeMetadata = require("../../../../../common/util/interactionTypeMetadata.js");
 
@@ -49,30 +49,25 @@ var _index5 = _interopRequireDefault(require("../AnswerSummaryTable/index.js"));
 
 var _propTypes = require("../propTypes.js");
 
+var _quizRce = require("@instructure/quiz-rce");
+
+var _uiFlex = require("@instructure/ui-flex");
+
 var _dec, _class, _class2, _temp;
 
 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'
 };
 var supportedTables = ['choice', 'true-false', 'multi-answer'];
 var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
@@ -91,9 +86,7 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
 
     _this = _super.call.apply(_super, [this].concat(args));
     _this.state = {
-      bodyToggable: false,
       bodyExpanded: false,
-      itemExpanded: false,
       metricsExpanded: false
     };
 
@@ -104,39 +97,10 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       });
     };
 
-    _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 () {
@@ -145,26 +109,6 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       });
     };
 
-    _this.renderExpandItemCardButton = function () {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.itemCardToggleButtonWrapper
-      }, /*#__PURE__*/_react.default.createElement(_index.default, {
-        onClick: _this.handleToggle,
-        title: _this.state.metricsExpanded ? (0, _formatMessage.default)('collapse item card') : (0, _formatMessage.default)('expand item card'),
-        isExpanded: _this.state.metricsExpanded
-      }));
-    };
-
-    _this.renderBodyToggleButton = function () {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.bodyExpandButtonWrapper
-      }, /*#__PURE__*/_react.default.createElement(_index.default, {
-        onClick: _this.handleBodyToggle,
-        title: _this.state.bodyExpanded ? (0, _formatMessage.default)('collapse question stem') : (0, _formatMessage.default)('expand question stem'),
-        isExpanded: _this.state.bodyExpanded
-      }));
-    };
-
     _this.calculateValueWithPointsPossible = function (metricKey, metricValue) {
       var pointsPossible = _this.props.itemAnalysis.scores.points_possible;
       return _formatMessage.default.rich('{score, number}<s>/{possible, number} PTS</s>', {
@@ -180,103 +124,147 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       });
     };
 
-    _this.renderExpanded = function () {
-      var scores = _this.props.itemAnalysis.scores;
-      var classes = (0, _classnames2.default)(styles.metricsRow, styles.metricsRowPaginated);
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: classes
-      }, /*#__PURE__*/_react.default.createElement(_index4.default, {
-        metricKey: "pearson_correlation",
-        label: (0, _formatMessage.default)('Pearson Correlation Coefficient'),
-        value: _formatMessage.default.number(scores.pearson_correlation),
-        popoverDescription: _popoverContent.pearsonCorrelation
-      }));
-    };
-
-    return _this;
-  }
-
-  (0, _createClass2.default)(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 = (0, _classnames2.default)(styles.bodyExcerpt, (0, _defineProperty2.default)({}, styles.bodyExcerptExpanded, this.state.bodyExpanded));
-      var headingId = this.buildItemCardHeadingId();
-      var bodyId = this.buildItemCardBodyId();
-      var isSupportedTable = supportedTables.includes(metadata.interaction_type);
-      return /*#__PURE__*/_react.default.createElement(_index2.default, {
-        className: styles.cardWrapper
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.innerWrapper
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        id: headingId,
-        className: styles.heading
-      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
-        margin: "0 0 small 0",
+    _this.renderTitle = function (title) {
+      return /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        margin: "0 x-large small 0",
         level: "h3",
         weight: "bold",
         color: "primary"
-      }, metadata.item_title), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, title);
+    };
+
+    _this.renderInteractionType = function (interactionType) {
+      return /*#__PURE__*/_react.default.createElement(_uiText.Text, {
         size: "small",
         weight: "bold",
         transform: "capitalize"
-      }, this.mapInteractionTypeToTranslation(metadata.interaction_type)), /*#__PURE__*/_react.default.createElement("div", {
-        id: "itemBody",
-        className: styles.bodyPresentation
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        id: bodyId,
-        className: bodyClass
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
-        size: "small"
-      }, metadata.item_body)), this.state.bodyToggable && this.renderBodyToggleButton())), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.metricsWithControls
+      }, _this.mapInteractionTypeToTranslation(interactionType));
+    };
+
+    _this.renderRichContent = function (itemBody, itemBodyClass) {
+      return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+        direction: "row",
+        alignItems: "start"
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        shouldShrink: true,
+        shouldGrow: true
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.metricGroup
+        className: itemBodyClass
+      }, /*#__PURE__*/_react.default.createElement(_quizRce.RichContentRenderer, {
+        content: itemBody
+      }))), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        margin: "xx-small small none x-small",
+        size: "38px"
+      }, /*#__PURE__*/_react.default.createElement(_index.default, {
+        onClick: _this.handleBodyToggle,
+        title: _this.state.bodyExpanded ? (0, _formatMessage.default)('collapse question stem') : (0, _formatMessage.default)('expand question stem'),
+        isExpanded: _this.state.bodyExpanded
+      })));
+    };
+
+    _this.renderMetrics = function (scores, metricsClass) {
+      return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+        direction: "column"
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        overflowY: "visible"
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.metricsRow
+        className: styles.metricsContainer
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        margin: "none medium none none"
       }, /*#__PURE__*/_react.default.createElement(_index4.default, {
         metricKey: "difficulty_index",
         label: (0, _formatMessage.default)('Item Difficulty'),
         value: _formatMessage.default.number(scores.difficulty_index),
         popoverDescription: _popoverContent.difficultyIndex
-      }), /*#__PURE__*/_react.default.createElement(_index3.default, {
+      })), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        margin: "none medium none none"
+      }, /*#__PURE__*/_react.default.createElement(_index3.default, {
         metricKey: "mean",
         label: (0, _formatMessage.default)('Mean Earned Points'),
-        value: this.calculateValueWithPointsPossible('mean', scores.mean)
-      }), /*#__PURE__*/_react.default.createElement(_index3.default, {
+        value: _this.calculateValueWithPointsPossible('mean', scores.mean)
+      })), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        margin: "none medium none none"
+      }, /*#__PURE__*/_react.default.createElement(_index3.default, {
         metricKey: "median",
         label: (0, _formatMessage.default)('Median Earned Points'),
-        value: this.calculateValueWithPointsPossible('median', scores.median)
-      }), /*#__PURE__*/_react.default.createElement(_index4.default, {
+        value: _this.calculateValueWithPointsPossible('median', scores.median)
+      })), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        margin: "none large none none"
+      }, /*#__PURE__*/_react.default.createElement(_index4.default, {
         metricKey: "discrimination_index",
         label: (0, _formatMessage.default)('Discrimination Index'),
         value: _formatMessage.default.number(scores.discrimination_index),
         popoverDescription: _popoverContent.discriminationIndex
-      }), this.renderExpandItemCardButton()), this.state.metricsExpanded && this.renderExpanded()))), this.state.itemExpanded && /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.expandableInnerWrapper
+      })))), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        overflowY: "visible",
+        margin: "medium none none none"
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.expandableContent
+        className: metricsClass
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.tableColumn
-      }, isSupportedTable && /*#__PURE__*/_react.default.createElement(_index5.default, {
+        className: styles.metricsContainer
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        margin: "none medium none none"
+      }, /*#__PURE__*/_react.default.createElement(_index4.default, {
+        metricKey: "pearson_correlation",
+        label: (0, _formatMessage.default)('Corrected Item-Total Correlation Coefficient'),
+        value: _formatMessage.default.number(scores.pearson_correlation),
+        popoverDescription: _popoverContent.pearsonCorrelation
+      }))))));
+    };
+
+    _this.renderAnswerSummaryTable = function (itemId, answer_summary, isSupportedTable, metricsClass) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: metricsClass
+      }, isSupportedTable && /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+        direction: "row"
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        size: "55%"
+      }, /*#__PURE__*/_react.default.createElement(_index5.default, {
+        itemId: itemId,
         answerSummary: answer_summary
-      })), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.performanceColumn
       }))));
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(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 itemId = metadata.item_id;
+      var isSupportedTable = supportedTables.includes(metadata.interaction_type);
+      var metricsClass = (0, _classnames3.default)((0, _defineProperty2.default)({}, styles.hiddenMetrics, !this.state.metricsExpanded));
+      var itemBodyClass = (0, _classnames3.default)(styles.itemBody, (0, _defineProperty2.default)({}, styles.hiddenItemBody, !this.state.bodyExpanded));
+      return /*#__PURE__*/_react.default.createElement(_index2.default, {
+        className: styles.cardWrapper
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.itemCardToggleButtonWrapper
+      }, /*#__PURE__*/_react.default.createElement(_index.default, {
+        onClick: this.handleMetricToggle,
+        title: this.state.metricsExpanded ? (0, _formatMessage.default)('collapse item card') : (0, _formatMessage.default)('expand item card'),
+        isExpanded: this.state.metricsExpanded
+      })), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+        direction: "column"
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        overflowY: "visible"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.itemCardInnerContainer
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        shouldGrow: true,
+        shouldShrink: true,
+        size: "45%"
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+        direction: "column",
+        justifyItems: "start"
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, this.renderTitle(metadata.item_title)), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, this.renderInteractionType(metadata.interaction_type)), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        shouldShrink: true,
+        overflowY: "hidden",
+        size: !this.state.bodyExpanded ? '48px' : void 0
+      }, this.renderRichContent(metadata.item_body, itemBodyClass)))), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, this.renderMetrics(scores, metricsClass)))), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, this.renderAnswerSummaryTable(itemId, answer_summary, isSupportedTable, metricsClass))));
     }
   }]);
   NewItemAnalysis.displayName = "NewItemAnalysis";

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

@@ -12,7 +12,8 @@ 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/lib/reporting/components/resources/NewQuizAndItemAnalysis/NewQuizAnalysis/presenter.js

@@ -44,16 +44,16 @@ var _propTypes = require("../propTypes.js");
 var _dec, _class, _class2, _temp;
 
 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'
 };
 var stdDevPopoverTexts = {
   title: 'Lorem ipsum ',
@@ -128,6 +128,7 @@ var NewQuizAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
         className: styles.heading
       }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
         level: "h4",
+        margin: "0 x-large 0 0",
         color: "primary"
       }, (0, _formatMessage.default)('Quiz summary:'), " ", metadata === null || metadata === void 0 ? void 0 : metadata.quiz_title)), /*#__PURE__*/_react.default.createElement("div", {
         className: styles.metricGroup

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

@@ -9,7 +9,8 @@ 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/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);
 
@@ -73,6 +73,12 @@ var NewQuizAndItemAnalysisReportCardPresenter = (_dec = (0, _uiThemeable.themeab
 
     _this = _super.call.apply(_super, [this].concat(args));
 
+    _this.handleGeneration = function (_event) {
+      var filter = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 'last_attempt';
+
+      _this.props.generateReports(filter);
+    };
+
     _this.renderMetrics = function () {
       var _quizAnalysis$scores, _quizAnalysis$scores2, _quizAnalysis$scores3;
 
@@ -97,20 +103,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 +118,65 @@ 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,
+          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: _this.handleGeneration,
+        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 +184,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;