@instructure/quiz-core 21.2.0 → 22.0.0

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

@@ -26,62 +26,74 @@ var _uiText = require("@instructure/ui-text");
 var _quizCommon = require("@instructure/quiz-common");
 var _dec, _class, _ChoiceTypeTable;
 /** @jsx jsx */
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _callSuper(_this, derived, args) {
+  function isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+    try {
+      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    } catch (e) {
+      return false;
+    }
+  }
+  derived = (0, _getPrototypeOf2["default"])(derived);
+  return (0, _possibleConstructorReturn2["default"])(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], (0, _getPrototypeOf2["default"])(_this).constructor) : derived.apply(_this, args));
+}
 var correctAttribute = 'correct';
 var incorrectAttribute = 'incorrect';
 var ChoiceTypeTable = exports.ChoiceTypeTable = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_ChoiceTypeTable = /*#__PURE__*/function (_Component) {
   function ChoiceTypeTable() {
-    var _this;
+    var _this2;
     (0, _classCallCheck2["default"])(this, ChoiceTypeTable);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _callSuper(this, ChoiceTypeTable, [].concat(args));
-    (0, _defineProperty3["default"])(_this, "rowStyleMap", (0, _defineProperty3["default"])((0, _defineProperty3["default"])({}, correctAttribute, _this.props.styles.correctRow), incorrectAttribute, _this.props.styles.incorrectRow));
-    (0, _defineProperty3["default"])(_this, "renderIcon", function (correct) {
-      var iconStyles = [_this.props.styles.iconWrapper, correct ? _this.props.styles.iconCorrect : {}];
+    _this2 = _callSuper(this, ChoiceTypeTable, [].concat(args));
+    (0, _defineProperty3["default"])(_this2, "rowStyleMap", (0, _defineProperty3["default"])((0, _defineProperty3["default"])({}, correctAttribute, _this2.props.styles.correctRow), incorrectAttribute, _this2.props.styles.incorrectRow));
+    (0, _defineProperty3["default"])(_this2, "renderIcon", function (correct) {
+      var iconStyles = [_this2.props.styles.iconWrapper, correct ? _this2.props.styles.iconCorrect : {}];
       return (0, _emotion.jsx)("div", {
         css: iconStyles
       }, correct ? (0, _emotion.jsx)(_uiIcons.IconCheckSolid, null) : (0, _emotion.jsx)(_uiIcons.IconXSolid, null));
     });
-    (0, _defineProperty3["default"])(_this, "renderFirstCell", function (content) {
+    (0, _defineProperty3["default"])(_this2, "renderFirstCell", function (content) {
       return (0, _emotion.jsx)("div", {
-        css: _this.props.styles.firstTextContainer
+        css: _this2.props.styles.firstTextContainer
       }, content);
     });
-    (0, _defineProperty3["default"])(_this, "renderCell", function (content) {
+    (0, _defineProperty3["default"])(_this2, "renderCell", function (content) {
       return (0, _emotion.jsx)("div", {
-        css: _this.props.styles.textContainer
+        css: _this2.props.styles.textContainer
       }, content);
     });
-    (0, _defineProperty3["default"])(_this, "answerLabel", function (correct) {
+    (0, _defineProperty3["default"])(_this2, "answerLabel", function (correct) {
       return correct ? (0, _formatMessage["default"])('Correct answer') : (0, _formatMessage["default"])('Incorrect answer');
     });
-    (0, _defineProperty3["default"])(_this, "extractChoiceText", function (choiceBody, correct) {
+    (0, _defineProperty3["default"])(_this2, "extractChoiceText", function (choiceBody, correct) {
       var text = (0, _quizInteractions.extractTextFromHtml)(choiceBody);
       if (text.trim().length > 0) return text;
-      return _this.answerLabel(correct);
+      return _this2.answerLabel(correct);
     });
-    (0, _defineProperty3["default"])(_this, "nextChoiceIsCorrect", function (choices, choiceIndex) {
+    (0, _defineProperty3["default"])(_this2, "nextChoiceIsCorrect", function (choices, choiceIndex) {
       var _choices$choiceIndex;
       return (_choices$choiceIndex = choices[choiceIndex]) === null || _choices$choiceIndex === void 0 ? void 0 : _choices$choiceIndex.correct;
     });
-    (0, _defineProperty3["default"])(_this, "getDataIconAttribute", function (correct, choiceIndex) {
-      var choices = _this.props.choices;
-      if (_this.nextChoiceIsCorrect(choices, choiceIndex + 1) && !correct) {
+    (0, _defineProperty3["default"])(_this2, "getDataIconAttribute", function (correct, choiceIndex) {
+      var choices = _this2.props.choices;
+      if (_this2.nextChoiceIsCorrect(choices, choiceIndex + 1) && !correct) {
         return '';
       }
       return correct ? correctAttribute : incorrectAttribute;
     });
-    (0, _defineProperty3["default"])(_this, "renderRow", function (choice, choiceIndex) {
+    (0, _defineProperty3["default"])(_this2, "renderRow", function (choice, choiceIndex) {
       var correct = choice.correct,
         body = choice.body;
-      var extractedBody = _this.extractChoiceText(body, correct);
-      var screenReaderContent = "".concat(_this.answerLabel(correct), ": ").concat(extractedBody);
+      var extractedBody = _this2.extractChoiceText(body, correct);
+      var screenReaderContent = "".concat(_this2.answerLabel(correct), ": ").concat(extractedBody);
       return (0, _emotion.jsx)(_uiTable.Table.Row, {
         key: choiceIndex
       }, (0, _emotion.jsx)(_uiTable.Table.RowHeader, {
@@ -96,32 +108,32 @@ var ChoiceTypeTable = exports.ChoiceTypeTable = (_dec = (0, _quizCommon.withStyl
         textAlign: "center",
         align: "stretch"
       }, (0, _emotion.jsx)("div", {
-        "data-icon": _this.getDataIconAttribute(correct, choiceIndex),
-        css: _this.props.styles.iconWrapper
-      }, _this.renderIcon(correct))), (0, _emotion.jsx)(_quizCommon.Flex.Item, {
+        "data-icon": _this2.getDataIconAttribute(correct, choiceIndex),
+        css: _this2.props.styles.iconWrapper
+      }, _this2.renderIcon(correct))), (0, _emotion.jsx)(_quizCommon.Flex.Item, {
         shouldShrink: true,
         shouldGrow: true
-      }, (0, _emotion.jsx)(_uiText.Text, null, _this.renderFirstCell(extractedBody))))), (0, _emotion.jsx)(_uiTable.Table.Cell, {
+      }, (0, _emotion.jsx)(_uiText.Text, null, _this2.renderFirstCell(extractedBody))))), (0, _emotion.jsx)(_uiTable.Table.Cell, {
         themeOverride: {
           padding: '0'
         }
-      }, _this.renderCell(choice.count)), (0, _emotion.jsx)(_uiTable.Table.Cell, {
+      }, _this2.renderCell(choice.count)), (0, _emotion.jsx)(_uiTable.Table.Cell, {
         themeOverride: {
           padding: '0'
         },
         textAlign: "center"
-      }, _this.renderCell("".concat(choice.percentage, "%"))));
+      }, _this2.renderCell("".concat(choice.percentage, "%"))));
     });
-    (0, _defineProperty3["default"])(_this, "componentDidMount", function () {
-      _this.applyStylesToTable();
-      _this.props.makeStyles();
+    (0, _defineProperty3["default"])(_this2, "componentDidMount", function () {
+      _this2.applyStylesToTable();
+      _this2.props.makeStyles();
     });
-    (0, _defineProperty3["default"])(_this, "componentDidUpdate", function () {
-      _this.props.makeStyles();
+    (0, _defineProperty3["default"])(_this2, "componentDidUpdate", function () {
+      _this2.props.makeStyles();
     });
-    (0, _defineProperty3["default"])(_this, "applyStylesToTable", function () {
-      if (_this.tableRef) {
-        var _iterator = _createForOfIteratorHelper(_this.tableRef.rows),
+    (0, _defineProperty3["default"])(_this2, "applyStylesToTable", function () {
+      if (_this2.tableRef) {
+        var _iterator = _createForOfIteratorHelper(_this2.tableRef.rows),
           _step;
         try {
           var _loop = function _loop() {
@@ -132,17 +144,17 @@ var ChoiceTypeTable = exports.ChoiceTypeTable = (_dec = (0, _quizCommon.withStyl
             var th = row.querySelectorAll('th');
             if (icon) {
               td.forEach(function (cell) {
-                cell.setAttribute('style', (0, _emotion.css)(_this.rowStyleMap[icon].td).styles);
+                cell.setAttribute('style', (0, _emotion.css)(_this2.rowStyleMap[icon].td).styles);
               });
               th.forEach(function (cell) {
-                cell.setAttribute('style', (0, _emotion.css)(_this.rowStyleMap[icon].th).styles);
+                cell.setAttribute('style', (0, _emotion.css)(_this2.rowStyleMap[icon].th).styles);
               });
               if (icon === correctAttribute) {
-                row.querySelector('th:first-child').setAttribute('style', (0, _emotion.css)(_this.props.styles.correctRow.thFirstChild).styles);
-                row.querySelector('td:last-child').setAttribute('style', (0, _emotion.css)(_this.props.styles.correctRow.tdLastChild).styles);
+                row.querySelector('th:first-child').setAttribute('style', (0, _emotion.css)(_this2.props.styles.correctRow.thFirstChild).styles);
+                row.querySelector('td:last-child').setAttribute('style', (0, _emotion.css)(_this2.props.styles.correctRow.tdLastChild).styles);
               }
             }
-            row.setAttribute('style', (0, _emotion.css)(_this.rowStyleMap[icon]).styles);
+            row.setAttribute('style', (0, _emotion.css)(_this2.rowStyleMap[icon]).styles);
           };
           for (_iterator.s(); !(_step = _iterator.n()).done;) {
             _loop();
@@ -154,22 +166,22 @@ var ChoiceTypeTable = exports.ChoiceTypeTable = (_dec = (0, _quizCommon.withStyl
         }
       }
     });
-    (0, _defineProperty3["default"])(_this, "setTableRef", function (el) {
-      return _this.tableRef = el;
+    (0, _defineProperty3["default"])(_this2, "setTableRef", function (el) {
+      return _this2.tableRef = el;
     });
-    (0, _defineProperty3["default"])(_this, "render", function () {
-      var _this$props = _this.props,
-        choices = _this$props.choices,
-        itemId = _this$props.itemId;
+    (0, _defineProperty3["default"])(_this2, "render", function () {
+      var _this2$props = _this2.props,
+        choices = _this2$props.choices,
+        itemId = _this2$props.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);
-      var containerStyles = [_this.props.styles.tableContainer, !_this.nextChoiceIsCorrect(choices, 0) ? _this.props.styles.headerGrayBottomBorder : {}];
+      var containerStyles = [_this2.props.styles.tableContainer, !_this2.nextChoiceIsCorrect(choices, 0) ? _this2.props.styles.headerGrayBottomBorder : {}];
       return (0, _emotion.jsx)("div", {
         css: containerStyles
       }, (0, _emotion.jsx)(_uiTable.Table, {
         caption: (0, _formatMessage["default"])('Answer Frequency Summary'),
-        elementRef: _this.setTableRef
+        elementRef: _this2.setTableRef
       }, (0, _emotion.jsx)(_uiTable.Table.Head, null, (0, _emotion.jsx)(_uiTable.Table.Row, null, (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
         id: answerHeaderId,
         height: "47px",
@@ -184,9 +196,9 @@ var ChoiceTypeTable = exports.ChoiceTypeTable = (_dec = (0, _quizCommon.withStyl
         id: percentageHeaderId,
         height: "47px",
         textAlign: "center"
-      }, (0, _formatMessage["default"])('Percentage')))), (0, _emotion.jsx)(_uiTable.Table.Body, null, choices.map(_this.renderRow))));
+      }, (0, _formatMessage["default"])('Percentage')))), (0, _emotion.jsx)(_uiTable.Table.Body, null, choices.map(_this2.renderRow))));
     });
-    return _this;
+    return _this2;
   }
   (0, _inherits2["default"])(ChoiceTypeTable, _Component);
   return (0, _createClass2["default"])(ChoiceTypeTable);

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

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var generateStyle = function generateStyle(componentTheme, props) {
   var tableContainerStyles = props.tableContainerStyles || {
     width: 'calc(25% + 350px)',

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

@@ -9,8 +9,8 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     colors = _ref.colors;
   return {
     tableBottomPadding: spacing.medium,
-    colorGreen: colors.shamrock,
-    colorGray: colors.tiara,
+    colorGreen: colors.contrasts.green4570,
+    colorGray: colors.contrasts.grey1214,
     cellPadding: '0.75rem 0.75rem'
   };
 };

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

@@ -22,26 +22,38 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _quizCommon = require("@instructure/quiz-common");
 var _dec, _class, _ExpandableCard;
 /** @jsx jsx */
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _callSuper(_this, derived, args) {
+  function isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+    try {
+      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    } catch (e) {
+      return false;
+    }
+  }
+  derived = (0, _getPrototypeOf2["default"])(derived);
+  return (0, _possibleConstructorReturn2["default"])(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], (0, _getPrototypeOf2["default"])(_this).constructor) : derived.apply(_this, args));
+}
 var ExpandableCard = exports.ExpandableCard = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_ExpandableCard = /*#__PURE__*/function (_Component) {
   function ExpandableCard() {
-    var _this;
+    var _this2;
     (0, _classCallCheck2["default"])(this, ExpandableCard);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _callSuper(this, ExpandableCard, [].concat(args));
-    (0, _defineProperty2["default"])(_this, "state", {
+    _this2 = _callSuper(this, ExpandableCard, [].concat(args));
+    (0, _defineProperty2["default"])(_this2, "state", {
       bodyExpanded: false
     });
-    (0, _defineProperty2["default"])(_this, "handleBodyToggle", function () {
-      _this.setState({
-        bodyExpanded: !_this.state.bodyExpanded
+    (0, _defineProperty2["default"])(_this2, "handleBodyToggle", function () {
+      _this2.setState({
+        bodyExpanded: !_this2.state.bodyExpanded
       });
     });
-    (0, _defineProperty2["default"])(_this, "renderGroup", function () {
-      var headLine = _this.props.headLine;
+    (0, _defineProperty2["default"])(_this2, "renderGroup", function () {
+      var headLine = _this2.props.headLine;
       return (0, _emotion.jsx)(_quizCommon.Flex, {
         direction: "row",
         alignItems: "start"
@@ -52,15 +64,15 @@ var ExpandableCard = exports.ExpandableCard = (_dec = (0, _quizCommon.withStyleO
       }, headLine), (0, _emotion.jsx)(_quizCommon.Flex.Item, {
         margin: "none none none x-small"
       }, (0, _emotion.jsx)(_ExpandButton["default"], {
-        onClick: _this.handleBodyToggle,
-        title: _this.state.bodyExpanded ? (0, _formatMessage["default"])('collapse group result') : (0, _formatMessage["default"])('expand group result'),
-        isExpanded: _this.state.bodyExpanded
+        onClick: _this2.handleBodyToggle,
+        title: _this2.state.bodyExpanded ? (0, _formatMessage["default"])('collapse group result') : (0, _formatMessage["default"])('expand group result'),
+        isExpanded: _this2.state.bodyExpanded
       })));
     });
-    (0, _defineProperty2["default"])(_this, "renderBody", function () {
-      var _this$props = _this.props,
-        content = _this$props.content,
-        styles = _this$props.styles;
+    (0, _defineProperty2["default"])(_this2, "renderBody", function () {
+      var _this2$props = _this2.props,
+        content = _this2$props.content,
+        styles = _this2$props.styles;
       var bodyContainer = styles.bodyContainer;
       return (0, _emotion.jsx)(_quizCommon.Flex.Item, {
         shouldShrink: true,
@@ -69,10 +81,10 @@ var ExpandableCard = exports.ExpandableCard = (_dec = (0, _quizCommon.withStyleO
         css: bodyContainer
       }, content));
     });
-    (0, _defineProperty2["default"])(_this, "render", function () {
-      var styles = _this.props.styles;
+    (0, _defineProperty2["default"])(_this2, "render", function () {
+      var styles = _this2.props.styles;
       var groupWrapper = styles.groupWrapper;
-      var bodyExpanded = _this.state.bodyExpanded;
+      var bodyExpanded = _this2.state.bodyExpanded;
       return (0, _emotion.jsx)("div", {
         css: groupWrapper
       }, (0, _emotion.jsx)(_Card["default"], null, (0, _emotion.jsx)(_quizCommon.Flex, {
@@ -89,9 +101,9 @@ var ExpandableCard = exports.ExpandableCard = (_dec = (0, _quizCommon.withStyleO
         shouldShrink: true,
         padding: "x-small small x-small small",
         overflowY: "hidden"
-      }, _this.renderGroup()), bodyExpanded && _this.renderBody())))));
+      }, _this2.renderGroup()), bodyExpanded && _this2.renderBody())))));
     });
-    return _this;
+    return _this2;
   }
   (0, _inherits2["default"])(ExpandableCard, _Component);
   return (0, _createClass2["default"])(ExpandableCard);

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

@@ -26,63 +26,75 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _quizCommon = require("@instructure/quiz-common");
 var _dec, _class, _MetricPopover;
 /** @jsx jsx */
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _callSuper(_this, derived, args) {
+  function isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+    try {
+      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    } catch (e) {
+      return false;
+    }
+  }
+  derived = (0, _getPrototypeOf2["default"])(derived);
+  return (0, _possibleConstructorReturn2["default"])(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], (0, _getPrototypeOf2["default"])(_this).constructor) : derived.apply(_this, args));
+}
 var MetricPopover = exports.MetricPopover = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_MetricPopover = /*#__PURE__*/function (_Component) {
   function MetricPopover() {
-    var _this;
+    var _this2;
     (0, _classCallCheck2["default"])(this, MetricPopover);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _callSuper(this, MetricPopover, [].concat(args));
-    (0, _defineProperty2["default"])(_this, "state", {
+    _this2 = _callSuper(this, MetricPopover, [].concat(args));
+    (0, _defineProperty2["default"])(_this2, "state", {
       isContentVisible: false
     });
-    (0, _defineProperty2["default"])(_this, "showPopover", function () {
-      _this.setState({
+    (0, _defineProperty2["default"])(_this2, "showPopover", function () {
+      _this2.setState({
         isContentVisible: true
       });
     });
-    (0, _defineProperty2["default"])(_this, "hidePopover", function () {
-      _this.setState({
+    (0, _defineProperty2["default"])(_this2, "hidePopover", function () {
+      _this2.setState({
         isContentVisible: false
       });
     });
-    (0, _defineProperty2["default"])(_this, "render", function () {
+    (0, _defineProperty2["default"])(_this2, "render", function () {
       return (0, _emotion.jsx)(_uiPopover.Popover, {
-        renderTrigger: _this.renderPopoverTrigger(),
+        renderTrigger: _this2.renderPopoverTrigger(),
         on: "click",
-        screenReaderLabel: _this.props.screenReaderLabel,
+        screenReaderLabel: _this2.props.screenReaderLabel,
         shouldContainFocus: true,
         shouldReturnFocus: true,
-        onShowContent: _this.showPopover,
-        onHideContent: _this.hidePopover,
-        isShowingContent: _this.state.isContentVisible
+        onShowContent: _this2.showPopover,
+        onHideContent: _this2.hidePopover,
+        isShowingContent: _this2.state.isContentVisible
       }, (0, _emotion.jsx)(_uiView.View, {
         padding: "medium",
         as: "div",
         display: "block",
         width: "248px"
       }, (0, _emotion.jsx)("div", {
-        css: _this.props.styles.closeIconContainer
+        css: _this2.props.styles.closeIconContainer
       }, (0, _emotion.jsx)(_uiButtons.CloseButton, {
-        onClick: _this.hidePopover,
+        onClick: _this2.hidePopover,
         screenReaderLabel: (0, _formatMessage["default"])('Close popover')
       })), (0, _emotion.jsx)("div", {
-        css: _this.props.styles.headerContainer
+        css: _this2.props.styles.headerContainer
       }, (0, _emotion.jsx)(_uiHeading.Heading, {
         level: "h3"
-      }, _this.props.title)), (0, _emotion.jsx)("div", null, _this.props.subtitle && (0, _emotion.jsx)(_uiHeading.Heading, {
+      }, _this2.props.title)), (0, _emotion.jsx)("div", null, _this2.props.subtitle && (0, _emotion.jsx)(_uiHeading.Heading, {
         themeOverride: {
           h5FontWeight: 700
         },
         level: "h5"
-      }, _this.props.subtitle), (0, _emotion.jsx)(_uiText.Text, {
+      }, _this2.props.subtitle), (0, _emotion.jsx)(_uiText.Text, {
         size: "small"
-      }, _this.props.body))));
+      }, _this2.props.body))));
     });
-    return _this;
+    return _this2;
   }
   (0, _inherits2["default"])(MetricPopover, _Component);
   return (0, _createClass2["default"])(MetricPopover, [{

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

@@ -19,8 +19,20 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _quizCommon = require("@instructure/quiz-common");
 var _dec, _class, _BlankIcon;
 /** @jsx jsx */
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _callSuper(_this, derived, args) {
+  function isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+    try {
+      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    } catch (e) {
+      return false;
+    }
+  }
+  derived = (0, _getPrototypeOf2["default"])(derived);
+  return (0, _possibleConstructorReturn2["default"])(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], (0, _getPrototypeOf2["default"])(_this).constructor) : derived.apply(_this, args));
+}
 var BlankIcon = exports.BlankIcon = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_BlankIcon = /*#__PURE__*/function (_Component) {
   function BlankIcon() {
     (0, _classCallCheck2["default"])(this, BlankIcon);

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

@@ -7,7 +7,7 @@ exports["default"] = void 0;
 var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors;
   return {
-    blankBorderColor: colors.tiara,
+    blankBorderColor: colors.contrasts.grey1214,
     blankBorderRadius: '14px',
     blankMinWidth: '20px',
     blankHeight: '20px'