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

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

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

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

@@ -21,9 +21,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _uiSpinner = require("@instructure/ui-spinner");
+var _uiText = require("@instructure/ui-text");
 
-var _uiHeading = require("@instructure/ui-heading");
+var _uiSpinner = require("@instructure/ui-spinner");
 
 var _uiA11yContent = require("@instructure/ui-a11y-content");
 
@@ -36,14 +36,13 @@ var _theme = _interopRequireDefault(require("./theme.js"));
 var _dec, _class, _class2, _temp;
 
 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'
 };
 var QuizzesSpinner = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(QuizzesSpinner, _Component);
@@ -58,34 +57,50 @@ var QuizzesSpinner = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles)
   (0, _createClass2.default)(QuizzesSpinner, [{
     key: "mainText",
     value: function mainText() {
-      return this.props.mainText || (0, _formatMessage.default)('Loading...');
+      var _this$props = this.props,
+          color = _this$props.color,
+          mainText = _this$props.mainText,
+          fontSize = _this$props.fontSize;
+      return /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: fontSize,
+        color: color
+      }, mainText || (0, _formatMessage.default)('Loading...'));
     }
   }, {
     key: "render",
     value: function render() {
+      var _this$props2 = this.props,
+          size = _this$props2.size,
+          minHeight = _this$props2.minHeight;
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.wrapper
+        className: styles.wrapper,
+        style: {
+          minHeight: minHeight
+        }
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: styles.left
       }, /*#__PURE__*/_react.default.createElement(_uiSpinner.Spinner, {
         renderTitle: this.mainText(),
-        size: "large"
+        size: size
       })), /*#__PURE__*/_react.default.createElement("div", {
         className: styles.right
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
-        level: "h2",
-        as: "h1"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.mainText
-      }, this.mainText())))));
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, this.mainText())));
     }
   }]);
   QuizzesSpinner.displayName = "QuizzesSpinner";
   return QuizzesSpinner;
 }(_react.Component), _class2.propTypes = {
-  mainText: _propTypes.default.string
+  mainText: _propTypes.default.string,
+  fontSize: _propTypes.default.oneOf(['x-small', 'small', 'medium', 'large', 'x-large', 'xx-large']),
+  size: _propTypes.default.oneOf(['x-small', 'small', 'medium', 'large']),
+  color: _propTypes.default.string,
+  minHeight: _propTypes.default.string
 }, _class2.defaultProps = {
-  mainText: null
+  mainText: null,
+  size: 'large',
+  fontSize: 'xx-large',
+  minHeight: '500px',
+  color: 'primary'
 }, _temp)) || _class);
 exports.QuizzesSpinner = QuizzesSpinner;
 var _default = QuizzesSpinner;

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

@@ -5,9 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = generator;
 
-function generator(_ref) {
-  var typography = _ref.typography;
-  return {
-    mainTextFontSize: typography.fontSizeXXLarge
-  };
+function generator() {
+  return {};
 }

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,145 @@ 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)('Pearson Correlation Coefficient'),
+        value: _formatMessage.default.number(scores.pearson_correlation),
+        popoverDescription: _popoverContent.pearsonCorrelation
+      }))))));
+    };
+
+    _this.renderAnswerSummaryTable = function (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, {
         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 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(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'