@instructure/quiz-core 20.11.2 → 20.11.3-rc.10

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/AfsPartsContainer/presenter.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AfsPartsContainer = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
@@ -21,23 +21,15 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _styles = _interopRequireDefault(require("./styles.js"));
 
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'DjkQc',
-  template: function template(theme) {
-    return "\n\n.DjkQc_SVtU{max-width:100%;width:calc(25% + 350px)}\n\n.DjkQc_ellB{margin-top:".concat(theme.marginOfTables || 'inherit', "}");
-  },
-  'tableContainer': 'DjkQc_SVtU',
-  'aggregateContainer': 'DjkQc_ellB'
-};
-var AfsPartsContainer = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var AfsPartsContainer = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(AfsPartsContainer, _Component);
 
   var _super = (0, _createSuper2.default)(AfsPartsContainer);
@@ -54,34 +46,44 @@ var AfsPartsContainer = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
     _this = _super.call.apply(_super, [this].concat(args));
 
     _this.renderAggregationTable = function () {
-      var _this$props = _this.props,
-          afsTable = _this$props.afsTable,
-          aggregationTable = _this$props.aggregationTable;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(styles.tableContainer, (0, _defineProperty2.default)({}, styles.aggregateContainer, afsTable))
-      }, aggregationTable);
+      return (0, _emotion.jsx)("div", {
+        css: _this.props.styles.tableContainer
+      }, _this.props.aggregationTable);
     };
 
     _this.renderAfsTable = function () {
       var afsTable = _this.props.afsTable;
-      return /*#__PURE__*/_react.default.createElement("div", null, afsTable);
+      return (0, _emotion.jsx)("div", null, afsTable);
     };
 
     _this.render = function () {
-      var _this$props2 = _this.props,
-          afsTable = _this$props2.afsTable,
-          aggregationTable = _this$props2.aggregationTable;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, afsTable && _this.renderAfsTable(), aggregationTable && _this.renderAggregationTable());
+      var _this$props = _this.props,
+          afsTable = _this$props.afsTable,
+          aggregationTable = _this$props.aggregationTable;
+      return (0, _emotion.jsx)(_react.default.Fragment, null, afsTable && _this.renderAfsTable(), aggregationTable && _this.renderAggregationTable());
     };
 
     return _this;
   }
 
+  (0, _createClass2.default)(AfsPartsContainer, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.makeStyles();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles();
+    }
+  }]);
   return AfsPartsContainer;
 }(_react.Component), _class2.propTypes = {
-  afsTable: _propTypes.default.node,
-  aggregationTable: _propTypes.default.node
-}.isRequired, _class2.defaultProps = {
+  afsTable: _propTypes.default.node.isRequired,
+  aggregationTable: _propTypes.default.node.isRequired,
+  styles: _propTypes.default.object,
+  makeStyles: _propTypes.default.func
+}, _class2.defaultProps = {
   afsTable: null,
   aggregationTable: null
 }, _temp)) || _class);

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/AfsPartsContainer/styles.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var generateStyle = function generateStyle(componentTheme, props) {
+  return {
+    tableContainer: (0, _objectSpread2.default)({
+      width: 'calc(25% + 350px)',
+      maxWidth: '100%'
+    }, props.afsTable && {
+      marginTop: componentTheme.marginOfTables
+    })
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/AfsPartsContainer/theme.js

@@ -3,11 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing;
   return {
     marginOfTables: spacing.medium
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/AggregationTable/presenter.js

@@ -104,7 +104,7 @@ var AggregationTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
       }, (0, _formatMessage.default)('Respondents')), /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
         id: percentageHeaderId,
         textAlign: "center"
-      }, (0, _formatMessage.default)('%'))));
+      }, (0, _formatMessage.default)('Percentage'))));
     };
 
     _this.renderRow = function (key, icon, label, count, percentage) {

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/ChoiceTypeTable/presenter.js

@@ -225,7 +225,7 @@ var ChoiceTypeTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
         id: percentageHeaderId,
         height: "47px",
         textAlign: "center"
-      }, (0, _formatMessage.default)('%')))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Body, null, choices.map(_this.renderRow))));
+      }, (0, _formatMessage.default)('Percentage')))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Body, null, choices.map(_this.renderRow))));
     };
 
     return _this;

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

@@ -2,15 +2,11 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NewItemAnalysis = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -23,7 +19,11 @@ var _uiHeading = require("@instructure/ui-heading");
 
 var _uiA11yContent = require("@instructure/ui-a11y-content");
 
-var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = require("react");
+
+var _styles = _interopRequireDefault(require("./styles.js"));
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
@@ -31,7 +31,7 @@ var _index = _interopRequireDefault(require("../../../../../common/components/sh
 
 var _uiText = require("@instructure/ui-text");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _theme = _interopRequireDefault(require("./theme.js"));
 
@@ -43,13 +43,11 @@ var _index3 = _interopRequireDefault(require("../AnalysisMetric/index.js"));
 
 var _index4 = _interopRequireDefault(require("../AnalysisPopoverMetric/index.js"));
 
-var _classnames3 = _interopRequireDefault(require("classnames"));
-
 var _interactionTypeMetadata = require("../../../../../common/util/interactionTypeMetadata.js");
 
 var _index5 = _interopRequireDefault(require("../AnswerFrequencySummary/index.js"));
 
-var _propTypes = require("../propTypes.js");
+var _propTypes2 = require("../propTypes.js");
 
 var _uiFlex = require("@instructure/ui-flex");
 
@@ -61,27 +59,10 @@ var _quizCommon = require("@instructure/quiz-common");
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'eObAE',
-  template: function template(theme) {
-    return "\n\n.eObAE_eKXQ{padding:".concat(theme.cardWrapperPadding || 'inherit', "}\n\n.eObAE_bwlc{gap:24px;justify-content:space-between;position:relative;row-gap:32px}\n\n.eObAE_bwlc,.eObAE_bqdH{align-items:flex-start;display:flex;flex-direction:row;flex-wrap:wrap}\n\n.eObAE_bqdH{row-gap:24px}\n\n.eObAE_eTaq{align-items:center;border:1px solid ").concat(theme.blankBorderColor || 'inherit', ";border-radius:").concat(theme.blankBorderRadius || 'inherit', ";display:inline-flex;height:").concat(theme.blankHeight || 'inherit', ";justify-content:center;min-width:").concat(theme.blankMinWidth || 'inherit', ";padding:2px 2px;vertical-align:middle}\n\n.eObAE_NpIG{position:absolute;right:").concat(theme.viewPaddingRight || 'inherit', ";top:0}\n\n.eObAE_eoBe{font-size:").concat(theme.metricNumberContextFontSize || 'inherit', ";font-weight:").concat(theme.metricNumberContextFontWeight || 'inherit', "}\n\n.eObAE_fFDJ{display:none}\n\n.eObAE_fxkJ{margin-top:-8px}\n\n.eObAE_esVF{min-height:48px}\n\n.eObAE_eTZq{position:relative}\n\n.eObAE_eTZq:after{background:linear-gradient(180deg,hsla(0,0%,100%,0),#fff);content:\"\";height:48px;left:0;position:absolute;top:0;width:100%}\n\n.eObAE_cVld{max-width:100%;width:calc(25% + 350px)}");
-  },
-  'cardWrapper': 'eObAE_eKXQ',
-  'itemCardInnerContainer': 'eObAE_bwlc',
-  'metricsContainer': 'eObAE_bqdH',
-  'blankSpace': 'eObAE_eTaq',
-  'itemCardToggleButtonWrapper': 'eObAE_NpIG',
-  'metricNumberContext': 'eObAE_eoBe',
-  'hiddenMetrics': 'eObAE_fFDJ',
-  'itemBodyToggleButtonWrapper': 'eObAE_fxkJ',
-  'itemBody': 'eObAE_esVF',
-  'hiddenItemBody': 'eObAE_eTZq',
-  'answerFrequencySummaryContainer': 'eObAE_cVld'
-};
 var parser = new DOMParser();
 var parsererrorElement = 'parsererror';
 var parseType = 'text/html';
-var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var NewItemAnalysis = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(NewItemAnalysis, _Component);
 
   var _super = (0, _createSuper2.default)(NewItemAnalysis);
@@ -126,9 +107,9 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       return _formatMessage.default.rich('{score, number}<s>/{possible, number} PTS</s>', {
         s: function s(_ref) {
           var children = _ref.children;
-          return /*#__PURE__*/_react.default.createElement("span", {
+          return (0, _emotion.jsx)("span", {
             key: metricKey,
-            className: styles.metricNumberContext
+            css: _this.props.styles.metricNumberContext
           }, children);
         },
         score: metricValue,
@@ -137,7 +118,7 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
     };
 
     _this.renderTitle = function (title) {
-      return /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+      return (0, _emotion.jsx)(_uiHeading.Heading, {
         margin: "0 x-large small 0",
         level: "h3",
         color: "primary"
@@ -145,7 +126,7 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
     };
 
     _this.renderInteractionType = function (interactionType) {
-      return /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      return (0, _emotion.jsx)(_uiText.Text, {
         size: "medium",
         weight: "bold",
         transform: "capitalize"
@@ -173,85 +154,88 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
         return _this.isBlank(span);
       }).forEach(function (span, index) {
         var newSpan = span.cloneNode();
-        newSpan.setAttribute('class', styles.blankSpace);
+        newSpan.setAttribute('style', (0, _emotion.css)(_this.props.styles.blankSpace).styles);
         newSpan.innerHTML = "".concat(index + 1);
         span.replaceWith(newSpan);
       });
       return tempDoc.querySelector('body').innerHTML;
     };
 
-    _this.renderRichContent = function (itemBody, itemBodyClass, itemId) {
-      return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+    _this.renderRichContent = function (itemBody, itemId) {
+      return (0, _emotion.jsx)(_uiFlex.Flex, {
         direction: "row",
         alignItems: "start"
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         shouldShrink: true,
         shouldGrow: true
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _emotion.jsx)("div", {
         id: _this.itemCardBodyId(itemId),
-        className: itemBodyClass
-      }, /*#__PURE__*/_react.default.createElement(_quizRce.RichContentRenderer, {
+        css: _this.props.styles.itemBody
+      }, (0, _emotion.jsx)(_quizRce.RichContentRenderer, {
         content: itemBody
-      }))), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+      }))), (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         margin: "none none none x-small"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.itemBodyToggleButtonWrapper
-      }, _this.isBodyHigherThanContainer() && /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, /*#__PURE__*/_react.default.createElement(_index.default, {
+      }, (0, _emotion.jsx)("div", {
+        css: _this.props.styles.itemBodyToggleButtonWrapper
+      }, _this.isBodyHigherThanContainer() && (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, (0, _emotion.jsx)(_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, {
+    _this.renderMetrics = function (scores) {
+      return (0, _emotion.jsx)(_uiFlex.Flex, {
         direction: "column"
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         overflowY: "visible"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.metricsContainer
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+      }, (0, _emotion.jsx)(_uiFlex.Flex, {
+        wrap: "wrap",
+        direction: "row",
+        alignItems: "start",
+        gap: "medium"
+      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         margin: "none medium none none"
-      }, /*#__PURE__*/_react.default.createElement(_index4.default, {
+      }, (0, _emotion.jsx)(_index4.default, {
         metricKey: "difficulty_index",
         label: (0, _formatMessage.default)('Item Difficulty'),
         value: scores.difficulty_index,
         popoverDescription: _popoverContent.difficultyIndex
-      })), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+      })), (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         margin: "none medium none none"
-      }, /*#__PURE__*/_react.default.createElement(_index3.default, {
+      }, (0, _emotion.jsx)(_index3.default, {
         metricKey: "mean",
         label: (0, _formatMessage.default)('Mean Earned Points'),
         value: _this.calculateValueWithPointsPossible('mean', scores.mean)
-      })), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+      })), (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         margin: "none medium none none"
-      }, /*#__PURE__*/_react.default.createElement(_index3.default, {
+      }, (0, _emotion.jsx)(_index3.default, {
         metricKey: "median",
         label: (0, _formatMessage.default)('Median Earned Points'),
         value: _this.calculateValueWithPointsPossible('median', scores.median)
-      })), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+      })), (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         margin: "none large none none"
-      }, /*#__PURE__*/_react.default.createElement(_index4.default, {
+      }, (0, _emotion.jsx)(_index4.default, {
         metricKey: "discrimination_index",
         label: (0, _formatMessage.default)('Discrimination Index'),
         value: scores.discrimination_index,
         popoverDescription: _popoverContent.discriminationIndex
-      })))), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.itemCardToggleButtonWrapper
-      }, /*#__PURE__*/_react.default.createElement(_index.default, {
+      })))), (0, _emotion.jsx)(_uiFlex.Flex.Item, null, (0, _emotion.jsx)("div", {
+        css: _this.props.styles.itemCardToggleButtonWrapper
+      }, (0, _emotion.jsx)(_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.Item, {
+      }))), (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         overflowY: "visible",
         margin: "medium none none none"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: metricsClass
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.metricsContainer
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+      }, (0, _emotion.jsx)("div", {
+        css: _this.props.styles.hiddenWhenNotExpanded
+      }, (0, _emotion.jsx)("div", {
+        css: _this.props.styles.metricsContainer
+      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         margin: "none medium none none"
-      }, /*#__PURE__*/_react.default.createElement(_index4.default, {
+      }, (0, _emotion.jsx)(_index4.default, {
         metricKey: "pearson_correlation",
         label: (0, _formatMessage.default)('Corrected Item-Total Correlation Coefficient'),
         value: scores.pearson_correlation,
@@ -259,10 +243,10 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       }))))));
     };
 
-    _this.renderAnswerSummaryTable = function (itemId, answer_summary, metricsClass, interactionType, afsFlags) {
-      return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement("div", {
-        className: metricsClass
-      }, /*#__PURE__*/_react.default.createElement(_index5.default, {
+    _this.renderAnswerSummaryTable = function (itemId, answer_summary, interactionType, afsFlags) {
+      return (0, _emotion.jsx)(_uiFlex.Flex.Item, null, (0, _emotion.jsx)("div", {
+        css: _this.props.styles.hiddenWhenNotExpanded
+      }, (0, _emotion.jsx)(_index5.default, {
         itemId: itemId,
         answerSummary: answer_summary,
         interactionType: interactionType,
@@ -282,10 +266,24 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   }
 
   (0, _createClass2.default)(NewItemAnalysis, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles({
+        metricsExpanded: this.state.metricsExpanded,
+        itemCardBodyHeight: this.state.itemCardBodyHeight,
+        bodyExpanded: this.state.bodyExpanded
+      });
+    }
+  }, {
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
 
+      this.props.makeStyles({
+        metricsExpanded: this.state.metricsExpanded,
+        itemCardBodyHeight: this.state.itemCardBodyHeight,
+        bodyExpanded: this.state.bodyExpanded
+      });
       (0, _rceChecker.ensureRCEContentIsLoaded)().then(function () {
         return _this2.calculateItemCardBodyHeight(_this2.props.itemAnalysis.metadata.item_id);
       });
@@ -326,37 +324,37 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
           scores = itemAnalysis.scores;
       var itemId = metadata.item_id;
       var interactionType = 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.isBodyHigherThanContainer() && !this.state.bodyExpanded));
       var title = (_metadata$item_title = metadata.item_title) !== null && _metadata$item_title !== void 0 ? _metadata$item_title : (0, _formatMessage.default)('Untitled item');
       var itemBodyEnhanced = this.shouldEnhanceItemBody() ? this.enhanceItemBody(metadata.item_body) : metadata.item_body;
-      return /*#__PURE__*/_react.default.createElement(_index2.default, {
-        className: styles.cardWrapper
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+      return (0, _emotion.jsx)(_index2.default, {
+        css: this.props.styles.cardWrapper
+      }, (0, _emotion.jsx)(_uiFlex.Flex, {
         direction: "column"
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         overflowY: "visible"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.itemCardInnerContainer
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.itemCardInnerContainer
+      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         shouldGrow: true,
         shouldShrink: true,
         size: "45%"
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+      }, (0, _emotion.jsx)(_uiFlex.Flex, {
         direction: "column",
         justifyItems: "start"
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, this.renderTitle(title)), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, this.renderInteractionType(metadata.interaction_type)), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, null, this.renderTitle(title)), (0, _emotion.jsx)(_uiFlex.Flex.Item, null, this.renderInteractionType(metadata.interaction_type)), (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         shouldShrink: true,
         padding: "small xx-small none none",
         overflowY: "hidden",
         size: !this.state.bodyExpanded ? '60px' : void 0
-      }, this.renderRichContent(itemBodyEnhanced, itemBodyClass, itemId)))), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, this.renderMetrics(scores, metricsClass)))), this.renderAnswerSummaryTable(itemId, answer_summary, metricsClass, interactionType, afsFlags)));
+      }, this.renderRichContent(itemBodyEnhanced, itemId)))), (0, _emotion.jsx)(_uiFlex.Flex.Item, null, this.renderMetrics(scores)))), this.renderAnswerSummaryTable(itemId, answer_summary, interactionType, afsFlags)));
     }
   }]);
   NewItemAnalysis.displayName = "NewItemAnalysis";
   return NewItemAnalysis;
 }(_react.Component), _class2.propTypes = {
-  itemAnalysis: _propTypes.itemAnalysisPropType,
-  afsFlags: _propTypes.afsFlags
-}.isRequired, _temp)) || _class);
+  itemAnalysis: _propTypes2.itemAnalysisPropType,
+  afsFlags: _propTypes2.afsFlags,
+  styles: _propTypes.default.object,
+  makeStyles: _propTypes.default.func
+}, _temp)) || _class);
 exports.NewItemAnalysis = NewItemAnalysis;

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

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var generateStyle = function generateStyle(componentTheme, props, state) {
+  var isBodyHigherThanContainer = state.itemCardBodyHeight > 48;
+  return {
+    cardWrapper: {
+      padding: componentTheme.cardWrapperPadding
+    },
+    itemCardInnerContainer: {
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'flex-start',
+      flexWrap: 'wrap',
+      gap: '24px',
+      rowGap: '32px'
+    },
+    metricsContainer: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      flexWrap: 'wrap',
+      rowGap: '24px'
+    },
+    hiddenWhenNotExpanded: (0, _objectSpread2.default)({
+      display: 'block'
+    }, !state.metricsExpanded && {
+      display: 'none'
+    }),
+    blankSpace: {
+      display: 'inline-flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: componentTheme.blankHeight,
+      minWidth: componentTheme.blankMinWidth,
+      verticalAlign: 'middle',
+      border: "1px solid ".concat(componentTheme.blankBorderColor),
+      borderRadius: componentTheme.blankBorderRadius,
+      padding: '2px 2px'
+    },
+    itemCardToggleButtonWrapper: {
+      position: 'absolute',
+      top: '0',
+      right: componentTheme.viewPaddingRight
+    },
+    metricNumberContext: {
+      fontSize: componentTheme.metricNumberContextFontSize,
+      fontWeight: componentTheme.metricNumberContextFontWeight
+    },
+    itemBodyToggleButtonWrapper: {
+      marginTop: '-8px'
+    },
+    itemBody: (0, _objectSpread2.default)({
+      minHeight: '48px'
+    }, isBodyHigherThanContainer && !state.bodyExpanded && {
+      position: 'relative',
+      ':after': {
+        left: '0',
+        top: '0',
+        content: '""',
+        height: '48px',
+        width: '100%',
+        position: 'absolute',
+        background: 'linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff)'
+      }
+    }),
+    answerFrequencySummaryContainer: {
+      width: 'calc(25% + 350px)',
+      maxWidth: '100%'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       breakpoints = _ref.breakpoints,
       typography = _ref.typography,
@@ -21,4 +21,7 @@ function generator(_ref) {
     blankMinWidth: '20px',
     blankHeight: '20px'
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;