@instructure/quiz-core 21.1.1 → 22.0.0

package/es/reporting/components/charts/QuintileDistribution/presenter.js

@@ -1,8 +1,24 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _dec, _class, _QuintileDistribution;
+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 = _getPrototypeOf(derived);
+  return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));
+}
 /** @jsx jsx */
 /* eslint "no-mixed-operators": "warn" */
 import { Component } from 'react';
@@ -11,27 +27,25 @@ import { jsx, css } from '@instructure/emotion';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { Table } from '@instructure/ui-table';
 import t from '@instructure/quiz-i18n/es/format-message';
-import Distribution from "../Distribution/index.js";
-import generateStyle from "./styles.js";
-import generateComponentTheme from "./theme.js";
+import Distribution from '../Distribution';
+import generateStyle from './styles';
+import generateComponentTheme from './theme';
 import { withStyleOverrides } from '@instructure/quiz-common';
 export var QuintileDistribution = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_QuintileDistribution = /*#__PURE__*/function (_Component) {
-  _inherits(QuintileDistribution, _Component);
-  var _super = _createSuper(QuintileDistribution);
   function QuintileDistribution() {
-    var _this;
+    var _this2;
     _classCallCheck(this, QuintileDistribution);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _this._calculateAxis = function (_, _2, xAxis) {
-      xAxis.tickFormat(_this.calculateLabelForIndex);
-    };
-    _this.calculateLabelForIndex = function (d) {
-      var numBars = _this.props.visualDistribution.length;
-      if (_this.props.calculateLabelForColumn) {
-        return _this.props.calculateLabelForColumn(d, numBars);
+    _this2 = _callSuper(this, QuintileDistribution, [].concat(args));
+    _defineProperty(_this2, "_calculateAxis", function (_, _2, xAxis) {
+      xAxis.tickFormat(_this2.calculateLabelForIndex);
+    });
+    _defineProperty(_this2, "calculateLabelForIndex", function (d) {
+      var numBars = _this2.props.visualDistribution.length;
+      if (_this2.props.calculateLabelForColumn) {
+        return _this2.props.calculateLabelForColumn(d, numBars);
       }
       var lower = Math.floor(d * 100 / numBars);
       var upper = Math.floor((d + 1) * 100 / numBars - (d < numBars - 1 ? 1 : 0));
@@ -39,12 +53,12 @@ export var QuintileDistribution = (_dec = withStyleOverrides(generateStyle, gene
         lower: lower,
         upper: upper
       });
-    };
+    });
     // updateChart
-    _this._renderNumbers = function (svg, x, y, applyTransition, barContainer, height) {
-      var chartData = _this.props.visualDistribution;
+    _defineProperty(_this2, "_renderNumbers", function (svg, x, y, applyTransition, barContainer, height) {
+      var chartData = _this2.props.visualDistribution;
       var numbers = barContainer.selectAll('text').data(chartData);
-      var texts = numbers.enter().insert('text', 'rect').attr('style', css(_this.props.styles.barLabel).styles).text(function (d) {
+      var texts = numbers.enter().insert('text', 'rect').attr('style', css(_this2.props.styles.barLabel).styles).text(function (d) {
         return d;
       }).attr('x', function (d, i) {
         return x(i) + x.bandwidth() / 2;
@@ -57,29 +71,30 @@ export var QuintileDistribution = (_dec = withStyleOverrides(generateStyle, gene
         });
       }, function (transition) {
         return transition.delay(function (d, i) {
-          return (_this.props.animateDelay || 0) * (1 + i / _this.props.visualDistribution.length);
+          return (_this2.props.animateDelay || 0) * (1 + i / _this2.props.visualDistribution.length);
         });
       });
       numbers.exit().remove();
-    };
-    _this._renderTable = function () {
+    });
+    _defineProperty(_this2, "_renderTable", function () {
       return jsx(ScreenReaderContent, null, jsx(Table, {
         caption: t('Score percentiles chart data')
       }, jsx(Table.Head, null, jsx(Table.Row, null, jsx(Table.ColHeader, {
         id: "score-percentiles-chart-data-score-percentile-range"
       }, t('Score Percentile Range')), jsx(Table.ColHeader, {
         id: "score-percentiles-chart-data-count"
-      }, t('Count')))), jsx(Table.Body, null, _this.renderTableRows())));
-    };
-    return _this;
+      }, t('Count')))), jsx(Table.Body, null, _this2.renderTableRows())));
+    });
+    return _this2;
   }
-  _createClass(QuintileDistribution, [{
+  _inherits(QuintileDistribution, _Component);
+  return _createClass(QuintileDistribution, [{
     key: "renderTableRows",
     value: function renderTableRows() {
-      var _this2 = this;
+      var _this3 = this;
       var chartData = this.props.visualDistribution;
       return chartData.map(function (count, index) {
-        var label = _this2.calculateLabelForIndex(index);
+        var label = _this3.calculateLabelForIndex(index);
         return jsx(Table.Row, {
           key: "".concat(label, ":").concat(count)
         }, jsx(Table.RowHeader, null, label), jsx(Table.Cell, null, count));
@@ -96,9 +111,7 @@ export var QuintileDistribution = (_dec = withStyleOverrides(generateStyle, gene
       return jsx(Distribution, props);
     }
   }]);
-  QuintileDistribution.displayName = "QuintileDistribution";
-  return QuintileDistribution;
-}(Component), _QuintileDistribution.displayName = 'QuintileDistribution', _QuintileDistribution.componentId = "Quizzes".concat(_QuintileDistribution.displayName), _QuintileDistribution.propTypes = {
+}(Component), _defineProperty(_QuintileDistribution, "displayName", 'QuintileDistribution'), _defineProperty(_QuintileDistribution, "componentId", "Quizzes".concat(_QuintileDistribution.displayName)), _defineProperty(_QuintileDistribution, "propTypes", {
   animateDelay: PropTypes.number,
   animateDuration: PropTypes.number,
   barPaddingInner: PropTypes.number,
@@ -125,7 +138,7 @@ export var QuintileDistribution = (_dec = withStyleOverrides(generateStyle, gene
    * */
   calculateLabelForColumn: PropTypes.func,
   styles: PropTypes.object
-}, _QuintileDistribution.defaultProps = {
+}), _defineProperty(_QuintileDistribution, "defaultProps", {
   animateDelay: 200,
   animateDuration: 900,
   barPaddingInner: 0.375,
@@ -137,5 +150,5 @@ export var QuintileDistribution = (_dec = withStyleOverrides(generateStyle, gene
   summaryDistribution: void 0,
   visualDistribution: [],
   calculateLabelForColumn: null
-}, _QuintileDistribution)) || _class);
+}), _QuintileDistribution)) || _class);
 export default QuintileDistribution;

package/es/reporting/components/charts/QuintileDistribution/theme.js

@@ -2,7 +2,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
     typography = _ref.typography;
   return {
-    barLabelColor: colors.textDarkest,
+    barLabelColor: colors.contrasts.grey125125,
     barLabelFontFamily: typography.fontFamily,
     barLabelFontSize: typography.fontSizeSmall
   };

package/es/reporting/components/itemAnalysis/AnswerFrequencySummary/AnswerFrequencySummary.examples.js

@@ -1,5 +1,5 @@
 import { fromJS } from 'immutable';
-import ItemAnalysis from "../../../../common/records/ItemAnalysis.js";
+import ItemAnalysis from '../../../../common/records/ItemAnalysis';
 var standardItemAnalysis = new ItemAnalysis(fromJS({
   itemId: '3',
   itemAnalysis: {

package/es/reporting/components/itemAnalysis/AnswerFrequencySummary/index.js

@@ -1,8 +1,24 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _dec, _class, _AnswerFrequencySummary;
+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 = _getPrototypeOf(derived);
+  return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));
+}
 /** @jsx jsx */
 import { Component } from 'react';
 import PropTypes from 'prop-types';
@@ -15,36 +31,33 @@ import { Table } from '@instructure/ui-table';
 import { jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { extractTextFromHtml } from '@instructure/quiz-interactions';
-import generateComponentTheme from "./theme.js";
-import generateStyle from "./styles.js";
+import generateComponentTheme from './theme';
+import generateStyle from './styles';
 import { withStyleOverrides } from '@instructure/quiz-common';
-var _ref = jsx(IconCheckSolid, null);
-var _ref2 = jsx(IconXSolid, null);
 export var AnswerFrequencySummary = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
-  _inherits(AnswerFrequencySummary, _Component);
-  var _super = _createSuper(AnswerFrequencySummary);
   function AnswerFrequencySummary() {
-    var _this;
+    var _this2;
     _classCallCheck(this, AnswerFrequencySummary);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _this.renderAnswerTableRow = function (choiceInfo, choiceIndex) {
-      var choiceSum = _this.props.itemAnalysis.choiceCountSum();
-      var choiceBody = _this.renderChoiceBody(choiceInfo);
+    _this2 = _callSuper(this, AnswerFrequencySummary, [].concat(args));
+    _defineProperty(_this2, "renderAnswerTableRow", function (choiceInfo, choiceIndex) {
+      var choiceSum = _this2.props.itemAnalysis.choiceCountSum();
+      var choiceBody = _this2.renderChoiceBody(choiceInfo);
       return jsx(Table.Row, {
         key: choiceIndex
-      }, jsx(Table.Cell, null, _this.isCorrect(choiceInfo) ? _ref : _ref2, jsx(ScreenReaderContent, null, _this.getBarTitle(choiceInfo))), jsx(Table.RowHeader, null, jsx("span", {
+      }, jsx(Table.Cell, null, _this2.isCorrect(choiceInfo) ? jsx(IconCheckSolid, null) : jsx(IconXSolid, null), jsx(ScreenReaderContent, null, _this2.getBarTitle(choiceInfo))), jsx(Table.RowHeader, null, jsx("span", {
         "data-testid": "answer-textfield",
         title: choiceBody
       }, choiceBody)), jsx(Table.Cell, null, t.number(Math.floor(choiceInfo.get('choiceCount')))), jsx(Table.Cell, null, choiceSum > 0 ? t.number(choiceInfo.get('choiceCount') / choiceSum, 'percent') : 0), jsx(Table.Cell, {
         "aria-hidden": "true"
-      }, _this.renderBarPlot(choiceInfo)));
-    };
-    return _this;
+      }, _this2.renderBarPlot(choiceInfo)));
+    });
+    return _this2;
   }
-  _createClass(AnswerFrequencySummary, [{
+  _inherits(AnswerFrequencySummary, _Component);
+  return _createClass(AnswerFrequencySummary, [{
     key: "getBarStyles",
     value: function getBarStyles(choiceInfo) {
       var highest = this.props.itemAnalysis.choiceCountMax();
@@ -108,10 +121,8 @@ export var AnswerFrequencySummary = (_dec = withStyleOverrides(generateStyle, ge
       }, t('Percentage')))), jsx(Table.Body, null, choiceInfo.toArray().map(this.renderAnswerTableRow), this.renderAnswerTableRow(this.unansweredChoiceInfo, choiceInfo.size))));
     }
   }]);
-  AnswerFrequencySummary.displayName = "AnswerFrequencySummary";
-  return AnswerFrequencySummary;
-}(Component), _AnswerFrequencySummary.displayName = 'AnswerFrequencySummary', _AnswerFrequencySummary.componentId = "Quizzes".concat(_AnswerFrequencySummary.displayName), _AnswerFrequencySummary.propTypes = {
+}(Component), _defineProperty(_AnswerFrequencySummary, "displayName", 'AnswerFrequencySummary'), _defineProperty(_AnswerFrequencySummary, "componentId", "Quizzes".concat(_AnswerFrequencySummary.displayName)), _defineProperty(_AnswerFrequencySummary, "propTypes", {
   itemAnalysis: ImmutablePropTypes.record.isRequired,
   styles: PropTypes.object
-}, _AnswerFrequencySummary)) || _class);
+}), _AnswerFrequencySummary)) || _class);
 export default AnswerFrequencySummary;

package/es/reporting/components/itemAnalysis/AnswerFrequencySummary/styles.js

@@ -1,13 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  to {\n    opacity: 1;\n    transform: translate3d(0, 0, 0);\n  }"]);
-  _templateObject = function _templateObject() {
-    return data;
-  };
-  return data;
-}
+var _templateObject;
 import { keyframes } from '@instructure/emotion';
-var contentAnimation = keyframes(_templateObject());
+var contentAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  to {\n    opacity: 1;\n    transform: translate3d(0, 0, 0);\n  }"])));
 var generateStyle = function generateStyle(componentTheme, props) {
   var contentCellStyles = {
     borderBottomColor: componentTheme.contentCellBorderColor,

package/es/reporting/components/itemAnalysis/AnswerFrequencySummary/theme.js

@@ -6,20 +6,20 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     borders = _ref.borders,
     transitions = _ref.transitions;
   return {
-    contentCellBorderColor: colors.tiara,
+    contentCellBorderColor: colors.contrasts.grey1214,
     answerRowCellPadding: spacing.xSmall,
-    answerRowCorrectBackgroundColor: colors.white,
-    answerRowAnswerIconColor: colors.shamrock,
+    answerRowCorrectBackgroundColor: colors.contrasts.white1010,
+    answerRowAnswerIconColor: colors.contrasts.green4570,
     answerRowCorrectTextFieldFontWeight: typography.fontWeightBold,
-    answerRowCorrectBarBackgroundColor: colors.shamrock,
+    answerRowCorrectBarBackgroundColor: colors.contrasts.green4570,
     answerIconFontSize: typography.fontSizeXSmall,
-    answerIconColor: colors.ash,
+    answerIconColor: colors.contrasts.grey4570,
     answerTextfieldFontWeight: typography.fontWeightNormal,
-    respondentLinkColor: colors.ash,
-    respondentLinkPresentColor: colors.electric,
+    respondentLinkColor: colors.contrasts.grey4570,
+    respondentLinkPresentColor: colors.contrasts.blue4570,
     answerRatioPaddingLeft: spacing.small,
     barMinWidth: borders.widthSmall,
-    barBackgroundColor: colors.licorice,
+    barBackgroundColor: colors.contrasts.grey125125,
     phoneBreakPoint: "max-width: ".concat(breakpoints.medium),
     barTransition: "width ".concat(transitions.duration)
   };

package/es/reporting/components/itemAnalysis/ItemAnalysisRow/ItemAnalysisRow.examples.js

@@ -1,5 +1,5 @@
 import { fromJS } from 'immutable';
-import ItemAnalysis from "../../../../common/records/ItemAnalysis.js";
+import ItemAnalysis from '../../../../common/records/ItemAnalysis';
 var standardItemAnalysis = new ItemAnalysis(fromJS({
   itemId: '3',
   itemBody: 'This is the item body',

package/es/reporting/components/itemAnalysis/ItemAnalysisRow/index.js

@@ -1,7 +1,7 @@
 import { bindActionCreators } from 'redux';
-import { connect } from "../../../../common/react-redux.js";
-import { screenreaderNotification as screenreaderNotificationAction } from "../../../../common/actions/alerts.js";
-import ItemAnalysisRow from "./presenter.js";
+import { connect } from '../../../../common/react-redux';
+import { screenreaderNotification as screenreaderNotificationAction } from '../../../../common/actions/alerts';
+import ItemAnalysisRow from './presenter';
 export var mapDispatchToProps = function mapDispatchToProps(dispatch) {
   return {
     screenreaderNotification: bindActionCreators(screenreaderNotificationAction, dispatch)

package/es/reporting/components/itemAnalysis/ItemAnalysisRow/presenter.js

@@ -1,8 +1,24 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _dec, _class, _ItemAnalysisRow;
+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 = _getPrototypeOf(derived);
+  return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));
+}
 /** @jsx jsx */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
@@ -13,48 +29,46 @@ import { Heading } from '@instructure/ui-heading';
 import { ScreenReaderContent, PresentationContent } from '@instructure/ui-a11y-content';
 import { jsx } from '@instructure/emotion';
 import { RichContentRenderer } from '@instructure/quiz-rce';
-import Card from "../../../../common/components/shared/Card/index.js";
-import ExpandButton from "../../../../common/components/shared/ExpandButton/index.js";
-import Spinner from "../../../../common/components/shared/spinner/Spinner.js";
-import AnswerFrequencySummary from "../AnswerFrequencySummary/index.js";
-import QuintileDistribution from "../../charts/QuintileDistribution/index.js";
-import Legend from "../../charts/Legend/index.js";
-import Caption from "../../Caption/index.js";
-import MetricsListItem from "../../MetricsListItem/index.js";
+import Card from '../../../../common/components/shared/Card';
+import ExpandButton from '../../../../common/components/shared/ExpandButton';
+import Spinner from '../../../../common/components/shared/spinner/Spinner';
+import AnswerFrequencySummary from '../AnswerFrequencySummary';
+import QuintileDistribution from '../../charts/QuintileDistribution';
+import Legend from '../../charts/Legend';
+import Caption from '../../Caption';
+import MetricsListItem from '../../MetricsListItem';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { liveRegion, withI18nSupport, withStyleOverrides } from '@instructure/quiz-common';
-import generateStyle from "./styles.js";
-import generateComponentTheme from "./theme.js";
-var _ref2 = jsx(Spinner, null);
+import generateStyle from './styles';
+import generateComponentTheme from './theme';
 export var ItemAnalysisRow = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_ItemAnalysisRow = /*#__PURE__*/function (_withI18nSupport) {
-  _inherits(ItemAnalysisRow, _withI18nSupport);
-  var _super = _createSuper(ItemAnalysisRow);
   function ItemAnalysisRow() {
-    var _this;
+    var _this2;
     _classCallCheck(this, ItemAnalysisRow);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _this.toggleExpanded = function () {
-      _this.props.toggleExpanded(_this.props.itemId);
-      var _this$props = _this.props,
-        position = _this$props.position,
-        expanded = _this$props.expanded;
+    _this2 = _callSuper(this, ItemAnalysisRow, [].concat(args));
+    _defineProperty(_this2, "toggleExpanded", function () {
+      _this2.props.toggleExpanded(_this2.props.itemId);
+      var _this2$props = _this2.props,
+        position = _this2$props.position,
+        expanded = _this2$props.expanded;
       var text = t("{\n      expanded, select,\n      false {Expanded question {position, number}}\n      other {Collapsed question {position, number}}\n    }", {
         position: position,
         expanded: expanded
       });
-      _this.props.screenreaderNotification(text);
-    };
-    return _this;
+      _this2.props.screenreaderNotification(text);
+    });
+    return _this2;
   }
-  _createClass(ItemAnalysisRow, [{
+  _inherits(ItemAnalysisRow, _withI18nSupport);
+  return _createClass(ItemAnalysisRow, [{
     key: "renderExpandButton",
     value: function renderExpandButton() {
-      var _this$props2 = this.props,
-        position = _this$props2.position,
-        expanded = _this$props2.expanded;
+      var _this$props = this.props,
+        position = _this$props.position,
+        expanded = _this$props.expanded;
       var title = t("{\n      expanded, select,\n      false {Expand question {position, number} details}\n      other {Collapse question {position, number} details}\n    }", {
         position: position,
         expanded: expanded
@@ -97,13 +111,13 @@ export var ItemAnalysisRow = (_dec = withStyleOverrides(generateStyle, generateC
   }, {
     key: "defaultMetricsList",
     value: function defaultMetricsList() {
-      var _this2 = this;
+      var _this3 = this;
       var mean = t.rich('{score}<0>/{possible, number} pts</0>', {
         0: function _(_ref) {
           var children = _ref.children;
           return jsx("span", {
             key: "mean",
-            css: _this2.props.styles.metricNote
+            css: _this3.props.styles.metricNote
           }, children);
         },
         score: this.props.itemAnalysis.meanScore(this.locale) || 0,
@@ -190,11 +204,11 @@ export var ItemAnalysisRow = (_dec = withStyleOverrides(generateStyle, generateC
   }, {
     key: "renderOutcomeAlignments",
     value: function renderOutcomeAlignments() {
-      var _this$props3 = this.props,
-        expanded = _this$props3.expanded,
-        itemAnalysis = _this$props3.itemAnalysis,
-        outcomesEndpoint = _this$props3.outcomesEndpoint,
-        outcomesToken = _this$props3.outcomesToken;
+      var _this$props2 = this.props,
+        expanded = _this$props2.expanded,
+        itemAnalysis = _this$props2.itemAnalysis,
+        outcomesEndpoint = _this$props2.outcomesEndpoint,
+        outcomesToken = _this$props2.outcomesToken;
       if (expanded && outcomesEndpoint && itemAnalysis.outcomeAlignmentSetGuid) {
         return jsx("div", {
           css: this.props.styles.outcomeAlignments
@@ -223,7 +237,7 @@ export var ItemAnalysisRow = (_dec = withStyleOverrides(generateStyle, generateC
     key: "render",
     value: function render() {
       if (!this.props.itemAnalysis.isLoaded()) {
-        return _ref2;
+        return jsx(Spinner, null);
       }
       var present = this.props.itemAnalysis.isPresent();
       return jsx(Card, {
@@ -234,9 +248,7 @@ export var ItemAnalysisRow = (_dec = withStyleOverrides(generateStyle, generateC
       }, this.renderStem(), present ? this.renderMetrics() : this.renderNotFound()), present && this.renderAnswerAnalysis(), this.renderOutcomeAlignments());
     }
   }]);
-  ItemAnalysisRow.displayName = "ItemAnalysisRow";
-  return ItemAnalysisRow;
-}(withI18nSupport(Component)), _ItemAnalysisRow.displayName = 'ItemAnalysisRow', _ItemAnalysisRow.componentId = "Quizzes".concat(_ItemAnalysisRow.displayName), _ItemAnalysisRow.propTypes = {
+}(withI18nSupport(Component)), _defineProperty(_ItemAnalysisRow, "displayName", 'ItemAnalysisRow'), _defineProperty(_ItemAnalysisRow, "componentId", "Quizzes".concat(_ItemAnalysisRow.displayName)), _defineProperty(_ItemAnalysisRow, "propTypes", {
   animateDelay: PropTypes.number,
   animateDuration: PropTypes.number,
   expanded: PropTypes.bool,
@@ -250,7 +262,7 @@ export var ItemAnalysisRow = (_dec = withStyleOverrides(generateStyle, generateC
   children: PropTypes.arrayOf(PropTypes.node),
   locale: PropTypes.string,
   styles: PropTypes.object
-}, _ItemAnalysisRow.defaultProps = {
+}), _defineProperty(_ItemAnalysisRow, "defaultProps", {
   animateDelay: void 0,
   animateDuration: void 0,
   expanded: false,
@@ -258,7 +270,7 @@ export var ItemAnalysisRow = (_dec = withStyleOverrides(generateStyle, generateC
   outcomesToken: null,
   children: [],
   locale: null
-}, _ItemAnalysisRow.contextTypes = {
+}), _defineProperty(_ItemAnalysisRow, "contextTypes", {
   locale: PropTypes.string
-}, _ItemAnalysisRow)) || _class);
+}), _ItemAnalysisRow)) || _class);
 export default ItemAnalysisRow;

package/es/reporting/components/itemAnalysis/ItemAnalysisRow/theme.js

@@ -6,20 +6,20 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   return {
     itemAnalysisRowPadding: spacing.small,
     itemAnalysisRowMargin: spacing.small,
-    headerTextColor: colors.ash,
+    headerTextColor: colors.contrasts.grey4570,
     headerTextFontSize: typography.fontSizeXSmall,
     metricNoteFontSize: typography.fontSizeMedium,
-    metricNoteColor: colors.ash,
+    metricNoteColor: colors.contrasts.grey4570,
     metricsRowLowerPadding: spacing.large,
     stemFontSize: typography.fontSizeXSmall,
     stemLineHeight: typography.lineHeight,
     stemMargin: spacing.small,
     emptyTextPadding: spacing.small,
-    emptyTextColor: colors.ash,
+    emptyTextColor: colors.contrasts.grey4570,
     answerDistributionPadding: spacing.small,
     answerDistributionChartPadding: spacing.small,
     answerDistributionLegendPadding: spacing.small,
-    answerDistributionSwatchColor: colors.electric,
+    answerDistributionSwatchColor: colors.contrasts.blue4570,
     phoneBreakPoint: "max-width: ".concat(breakpoints.medium)
   };
 };

package/es/reporting/components/quizAnalysis/QuizAnalysisOverview.js

@@ -1,8 +1,24 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _dec, _class, _QuizAnalysisOverview;
+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 = _getPrototypeOf(derived);
+  return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));
+}
 /** @jsx jsx */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
@@ -11,39 +27,36 @@ import { Heading } from '@instructure/ui-heading';
 import { MetricGroup } from '@instructure/ui-metric';
 import { Text } from '@instructure/ui-text';
 import { jsx } from '@instructure/emotion';
-import FormattedDuration from "../../../common/components/shared/FormattedDuration/index.js";
+import FormattedDuration from '../../../common/components/shared/FormattedDuration';
 import t from '@instructure/quiz-i18n/es/format-message';
-import Card from "../../../common/components/shared/Card/index.js";
-import Spinner from "../../../common/components/shared/spinner/Spinner.js";
-import CentileDistribution from "../charts/CentileDistribution/index.js";
-import MetricsListItem from "../MetricsListItem/index.js";
-import generateStyle from "./styles.js";
-import generateComponentTheme from "./theme.js";
+import Card from '../../../common/components/shared/Card';
+import Spinner from '../../../common/components/shared/spinner/Spinner';
+import CentileDistribution from '../charts/CentileDistribution';
+import MetricsListItem from '../MetricsListItem';
+import generateStyle from './styles';
+import generateComponentTheme from './theme';
 import { withStyleOverrides } from '@instructure/quiz-common';
-var _ref = jsx("br", null);
-var _ref2 = jsx(Spinner, null);
 export var QuizAnalysisOverview = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_QuizAnalysisOverview = /*#__PURE__*/function (_Component) {
-  _inherits(QuizAnalysisOverview, _Component);
-  var _super = _createSuper(QuizAnalysisOverview);
   function QuizAnalysisOverview() {
-    var _this;
+    var _this2;
     _classCallCheck(this, QuizAnalysisOverview);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _this.renderBatchTimestamp = function () {
-      if (_this.props.quizAnalysis.batchTimestamp) {
-        var timestamp = Date.parse(_this.props.quizAnalysis.batchTimestamp);
+    _this2 = _callSuper(this, QuizAnalysisOverview, [].concat(args));
+    _defineProperty(_this2, "renderBatchTimestamp", function () {
+      if (_this2.props.quizAnalysis.batchTimestamp) {
+        var timestamp = Date.parse(_this2.props.quizAnalysis.batchTimestamp);
         return jsx(Text, {
           color: "secondary",
           size: "x-small"
-        }, _ref, jsx("b", null, t('Data Last Updated:')), "\xA0", t.date(timestamp, 'medium'));
+        }, jsx("br", null), jsx("b", null, t('Data Last Updated:')), "\xA0", t.date(timestamp, 'medium'));
       }
-    };
-    return _this;
+    });
+    return _this2;
   }
-  _createClass(QuizAnalysisOverview, [{
+  _inherits(QuizAnalysisOverview, _Component);
+  return _createClass(QuizAnalysisOverview, [{
     key: "defaultMetrics",
     value: function defaultMetrics() {
       var quizAnalysis = this.props.quizAnalysis;
@@ -99,7 +112,7 @@ export var QuizAnalysisOverview = (_dec = withStyleOverrides(generateStyle, gene
         animateDuration = _this$props.animateDuration,
         quizAnalysis = _this$props.quizAnalysis,
         quizTitle = _this$props.quizTitle;
-      if (!quizAnalysis.isLoaded()) return _ref2;
+      if (!quizAnalysis.isLoaded()) return jsx(Spinner, null);
       var list = React.Children.count(this.props.children) === 0 ? this.defaultMetrics() : jsx(MetricGroup, null, this.props.children);
       return jsx(Card, {
         css: this.props.styles.root
@@ -119,19 +132,17 @@ export var QuizAnalysisOverview = (_dec = withStyleOverrides(generateStyle, gene
       })), this.renderBatchTimestamp());
     }
   }]);
-  QuizAnalysisOverview.displayName = "QuizAnalysisOverview";
-  return QuizAnalysisOverview;
-}(Component), _QuizAnalysisOverview.displayName = 'QuizAnalysisOverview', _QuizAnalysisOverview.componentId = "Quizzes".concat(_QuizAnalysisOverview.displayName), _QuizAnalysisOverview.propTypes = {
+}(Component), _defineProperty(_QuizAnalysisOverview, "displayName", 'QuizAnalysisOverview'), _defineProperty(_QuizAnalysisOverview, "componentId", "Quizzes".concat(_QuizAnalysisOverview.displayName)), _defineProperty(_QuizAnalysisOverview, "propTypes", {
   animateDelay: PropTypes.number,
   animateDuration: PropTypes.number,
   quizAnalysis: ImmutablePropTypes.record.isRequired,
   quizTitle: PropTypes.string.isRequired,
   children: PropTypes.arrayOf(PropTypes.node),
   styles: PropTypes.object
-}, _QuizAnalysisOverview.defaultProps = {
+}), _defineProperty(_QuizAnalysisOverview, "defaultProps", {
   animateDelay: void 0,
   animateDuration: void 0,
   quizTitle: '',
   children: []
-}, _QuizAnalysisOverview)) || _class);
+}), _QuizAnalysisOverview)) || _class);
 export default QuizAnalysisOverview;