@instructure/quiz-core 17.60.1-rc.0 → 17.60.1-rc.2

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisUpdateDate/index.js

@@ -0,0 +1,53 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import t from '@instructure/quiz-i18n/es/format-message';
+import { displayDateAndTimeInTimezone } from "../../../../../common/util/formatTimespan.js";
+import { Text } from '@instructure/ui-text';
+import { Flex } from '@instructure/ui-flex';
+export var AnalysisUpdateDate = /*#__PURE__*/function (_Component) {
+  _inherits(AnalysisUpdateDate, _Component);
+
+  var _super = _createSuper(AnalysisUpdateDate);
+
+  function AnalysisUpdateDate() {
+    _classCallCheck(this, AnalysisUpdateDate);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(AnalysisUpdateDate, [{
+    key: "render",
+    value: function render() {
+      var _this$context = this.context,
+          timezone = _this$context.timezone,
+          locale = _this$context.locale;
+      var _this$props = this.props,
+          date = _this$props.date,
+          multiline = _this$props.multiline;
+      return /*#__PURE__*/React.createElement(Text, {
+        size: "x-small"
+      }, /*#__PURE__*/React.createElement(Flex, {
+        direction: multiline ? 'column' : 'row',
+        alignItems: "start"
+      }, /*#__PURE__*/React.createElement("b", null, t('Data Last Updated:'), "\xA0"), /*#__PURE__*/React.createElement("span", null, displayDateAndTimeInTimezone(date, timezone, locale))));
+    }
+  }]);
+
+  AnalysisUpdateDate.displayName = "AnalysisUpdateDate";
+  return AnalysisUpdateDate;
+}(Component);
+AnalysisUpdateDate.propTypes = {
+  date: PropTypes.string.isRequired,
+  multiline: PropTypes.bool
+};
+AnalysisUpdateDate.contextTypes = {
+  timezone: PropTypes.string,
+  locale: PropTypes.string
+};
+AnalysisUpdateDate.defaultProps = {
+  multiline: false
+};

package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewQuizAnalysis/presenter.js

@@ -24,11 +24,11 @@ import ExpandButton from "../../../../../common/components/shared/ExpandButton/i
 import { themeable } from '@instructure/ui-themeable';
 import theme from "./theme.js";
 import { formatTimeToFullNumeric } from "../../../../../common/util/formatTimespan.js";
-import PropTypes from 'prop-types';
 import Card from "../../../../../common/components/shared/Card/index.js";
 import AnalysisPopoverMetric from "../AnalysisPopoverMetric/index.js";
 import AnalysisMetric from "../AnalysisMetric/index.js";
 import { ScoreDistribution } from "../charts/ScoreDistribution/presenter.js";
+import { quizAnalysisPropType } from "../propTypes.js";
 var stdDevPopoverTexts = {
   title: 'Lorem ipsum ',
   subtitle: 'subtitle',
@@ -152,28 +152,7 @@ export var NewQuizAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
   NewQuizAnalysis.displayName = "NewQuizAnalysis";
   return NewQuizAnalysis;
 }(Component), _class2.propTypes = {
-  quizAnalysis: PropTypes.shape({
-    created_timestamp: PropTypes.string.isRequired,
-    metadata: PropTypes.shape({
-      quiz_title: PropTypes.string
-    }).isRequired,
-    scores: PropTypes.shape({
-      decile_distribution: PropTypes.arrayOf(PropTypes.number),
-      cronbachs_alpha: PropTypes.number,
-      stddev: PropTypes.number,
-      median_percentage: PropTypes.number,
-      max_percentage: PropTypes.number,
-      min_percentage: PropTypes.number,
-      mean_percentage: PropTypes.number
-    }).isRequired,
-    attempts: PropTypes.shape({
-      mean_elapsed_sec: PropTypes.number,
-      students_completed: PropTypes.number,
-      students_not_finished: PropTypes.number,
-      students_without_attempt: PropTypes.number,
-      average_attempts: PropTypes.number
-    }).isRequired
-  }).isRequired
+  quizAnalysis: quizAnalysisPropType
 }, _class2.defaultProps = {
   quizAnalysis: {}
 }, _temp)) || _class);

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

@@ -14,45 +14,95 @@ import { Flex } from '@instructure/ui-flex';
 import { themeable } from '@instructure/ui-themeable';
 import Card from "../../../../../common/components/shared/Card/index.js";
 var styles = {
-  componentId: 'eRzKS',
+  componentId: 'eJSiT',
   template: function template(theme) {
-    return "\n\n.eRzKS_fbIL{border-radius:".concat(theme.cardBorderRadius || 'inherit', ";box-shadow:").concat(theme.cardBoxShadow || 'inherit', ";display:inline-flex;flex-direction:column;height:").concat(theme.cardHeight || 'inherit', ";margin:").concat(theme.cardMargin || 'inherit', ";padding:").concat(theme.cardPadding || 'inherit', ";width:").concat(theme.cardWidth || 'inherit', "}\n\n.eRzKS_ebWM{padding-top:").concat(theme.detailPadding || 'inherit', "}");
+    return "\n\n.eJSiT_bqdH{column-gap:5px;display:flex;justify-content:space-between;padding:".concat(theme.metricsPadding || 'inherit', " 0}\n\n.eJSiT_fbIL{border-radius:").concat(theme.cardBorderRadius || 'inherit', ";box-shadow:").concat(theme.cardBoxShadow || 'inherit', ";display:inline-flex;flex-direction:column;margin:").concat(theme.cardMargin || 'inherit', ";padding:").concat(theme.cardPadding || 'inherit', ";width:").concat(theme.cardWidth || 'inherit', "}\n\n.eJSiT_blRb{max-width:160px;padding-right:10px}");
   },
-  'card': 'eRzKS_fbIL',
-  'details': 'eRzKS_ebWM'
+  'metricsContainer': 'eJSiT_bqdH',
+  'card': 'eJSiT_fbIL',
+  'dateContainer': 'eJSiT_blRb'
 };
-import theme from "../../ReportCard/theme.js";
+import theme from "./theme.js";
+import AnalysisMetric from "../AnalysisMetric/index.js";
+import Spinner from "../../../../../common/components/shared/spinner/Spinner.js";
+import { AnalysisUpdateDate } from "../AnalysisUpdateDate/index.js";
+import { quizAnalysisPropType } from "../propTypes.js";
+
+var _ref = /*#__PURE__*/React.createElement(Spinner, null);
+
 export var NewQuizAndItemAnalysisReportCard = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(NewQuizAndItemAnalysisReportCard, _Component);
 
   var _super = _createSuper(NewQuizAndItemAnalysisReportCard);
 
   function NewQuizAndItemAnalysisReportCard() {
+    var _this;
+
     _classCallCheck(this, NewQuizAndItemAnalysisReportCard);
 
-    return _super.apply(this, arguments);
+    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.renderMetrics = function () {
+      var _quizAnalysis$scores, _quizAnalysis$scores2, _quizAnalysis$scores3;
+
+      var quizAnalysis = _this.props.quizAnalysis;
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.metricsContainer
+      }, /*#__PURE__*/React.createElement(AnalysisMetric, {
+        metricKey: "highscore",
+        label: t('high score'),
+        value: (_quizAnalysis$scores = quizAnalysis.scores) === null || _quizAnalysis$scores === void 0 ? void 0 : _quizAnalysis$scores.max_percentage,
+        suffix: "%"
+      }), /*#__PURE__*/React.createElement(AnalysisMetric, {
+        metricKey: "lowscore",
+        label: t('low score'),
+        value: (_quizAnalysis$scores2 = quizAnalysis.scores) === null || _quizAnalysis$scores2 === void 0 ? void 0 : _quizAnalysis$scores2.min_percentage,
+        suffix: "%"
+      }), /*#__PURE__*/React.createElement(AnalysisMetric, {
+        metricKey: "meanscore",
+        label: t('mean score'),
+        value: (_quizAnalysis$scores3 = quizAnalysis.scores) === null || _quizAnalysis$scores3 === void 0 ? void 0 : _quizAnalysis$scores3.mean_percentage,
+        suffix: "%"
+      }));
+    };
+
+    return _this;
   }
 
   _createClass(NewQuizAndItemAnalysisReportCard, [{
-    key: "render",
-    value: function render() {
+    key: "renderContent",
+    value: function renderContent() {
       var _this$props = this.props,
           name = _this$props.name,
-          href = _this$props.href;
-      return /*#__PURE__*/React.createElement(Card, {
-        className: styles.card
-      }, /*#__PURE__*/React.createElement(Flex, {
-        direction: "column"
-      }, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Text, {
+          href = _this$props.href,
+          quizAnalysis = _this$props.quizAnalysis;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
         size: "medium",
         weight: "bold"
-      }, name)), /*#__PURE__*/React.createElement(Flex.Item, {
-        align: "end"
-      }, /*#__PURE__*/React.createElement(Link, {
+      }, name), this.renderMetrics(), /*#__PURE__*/React.createElement(Flex, {
+        direction: "row",
+        justifyItems: "space-between"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.dateContainer
+      }, /*#__PURE__*/React.createElement(AnalysisUpdateDate, {
+        date: quizAnalysis.created_timestamp,
+        multiline: true
+      })), /*#__PURE__*/React.createElement(Link, {
         href: href
       }, /*#__PURE__*/React.createElement(Text, {
         size: "small"
-      }, t('View Report'))))));
+      }, t('View Report')))));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(Card, {
+        className: styles.card
+      }, this.props.quizAnalysis ? this.renderContent() : _ref);
     }
   }]);
 
@@ -60,9 +110,11 @@ export var NewQuizAndItemAnalysisReportCard = (_dec = themeable(theme, styles),
   return NewQuizAndItemAnalysisReportCard;
 }(Component), _class2.propTypes = {
   name: PropTypes.node,
-  href: PropTypes.string
+  href: PropTypes.string,
+  quizAnalysis: quizAnalysisPropType
 }, _class2.defaultProps = {
   name: void 0,
-  href: void 0
+  href: void 0,
+  quizAnalysis: {}
 }, _temp)) || _class);
 export default NewQuizAndItemAnalysisReportCard;

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

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

package/es/reporting/components/resources/NewQuizAndItemAnalysis/presenter.js

@@ -11,9 +11,8 @@ import NewItemAnalysis from "./NewItemAnalysis/index.js";
 import Spinner from "../../../../common/components/shared/spinner/Spinner.js";
 import NewQuizAnalysis from "./NewQuizAnalysis/index.js";
 import t from '@instructure/quiz-i18n/es/format-message';
-import { Text } from '@instructure/ui-text';
 import { Flex } from '@instructure/ui-flex';
-import { displayDateAndTimeInTimezone } from "../../../../common/util/formatTimespan.js";
+import { AnalysisUpdateDate } from "./AnalysisUpdateDate/index.js";
 
 var _ref3 = /*#__PURE__*/React.createElement(Spinner, null);
 
@@ -101,18 +100,15 @@ export var NewQuizAndItemAnalysis = /*#__PURE__*/function (_Component) {
       var _this$state = this.state,
           quizAnalysis = _this$state.quizAnalysis,
           itemAnalyses = _this$state.itemAnalyses;
-      var _this$context = this.context,
-          timezone = _this$context.timezone,
-          locale = _this$context.locale;
       return /*#__PURE__*/React.createElement("div", {
         className: "fs-mask"
       }, /*#__PURE__*/React.createElement(Flex, {
         justifyItems: "end",
         width: "82.5rem",
         margin: "auto"
-      }, /*#__PURE__*/React.createElement(Text, {
-        size: "x-small"
-      }, /*#__PURE__*/React.createElement("b", null, t('Data Last Updated:')), "\xA0", displayDateAndTimeInTimezone(quizAnalysis.created_timestamp, timezone, locale))), /*#__PURE__*/React.createElement(NewQuizAnalysis, {
+      }, /*#__PURE__*/React.createElement(AnalysisUpdateDate, {
+        date: quizAnalysis.created_timestamp
+      })), /*#__PURE__*/React.createElement(NewQuizAnalysis, {
         quizAnalysis: quizAnalysis
       }), /*#__PURE__*/React.createElement(Heading, {
         level: "h3",
@@ -142,10 +138,6 @@ export var NewQuizAndItemAnalysis = /*#__PURE__*/function (_Component) {
   NewQuizAndItemAnalysis.displayName = "NewQuizAndItemAnalysis";
   return NewQuizAndItemAnalysis;
 }(Component);
-NewQuizAndItemAnalysis.contextTypes = {
-  timezone: PropTypes.string,
-  locale: PropTypes.string
-};
 NewQuizAndItemAnalysis.propTypes = {
   activeQuizId: PropTypes.string.isRequired,
   getQuizAnalysis: PropTypes.func.isRequired,

package/es/reporting/components/resources/NewQuizAndItemAnalysis/propTypes.js

@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+export var quizAnalysisPropType = PropTypes.shape({
+  created_timestamp: PropTypes.string.isRequired,
+  metadata: PropTypes.shape({
+    quiz_title: PropTypes.string
+  }).isRequired,
+  scores: PropTypes.shape({
+    decile_distribution: PropTypes.arrayOf(PropTypes.number),
+    cronbachs_alpha: PropTypes.number,
+    stddev: PropTypes.number,
+    median_percentage: PropTypes.number,
+    max_percentage: PropTypes.number,
+    min_percentage: PropTypes.number,
+    mean_percentage: PropTypes.number
+  }).isRequired,
+  attempts: PropTypes.shape({
+    mean_elapsed_sec: PropTypes.number,
+    students_completed: PropTypes.number,
+    students_not_finished: PropTypes.number,
+    students_without_attempt: PropTypes.number,
+    average_attempts: PropTypes.number
+  }).isRequired
+}).isRequired;

package/es/reporting/components/resources/ReportCard/index.js

@@ -12,7 +12,7 @@ import { Link } from '@instructure/ui-link';
 import { themeable } from '@instructure/ui-themeable';
 import Card from "../../../../common/components/shared/Card/index.js";
 var styles = {
-  componentId: 'cNnNG',
+  componentId: 'eRzKS',
   template: function template(theme) {
     return "\n\n.eRzKS_fbIL{border-radius:".concat(theme.cardBorderRadius || 'inherit', ";box-shadow:").concat(theme.cardBoxShadow || 'inherit', ";display:inline-flex;flex-direction:column;height:").concat(theme.cardHeight || 'inherit', ";margin:").concat(theme.cardMargin || 'inherit', ";padding:").concat(theme.cardPadding || 'inherit', ";width:").concat(theme.cardWidth || 'inherit', "}\n\n.eRzKS_ebWM{padding-top:").concat(theme.detailPadding || 'inherit', "}");
   },

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisUpdateDate/index.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnalysisUpdateDate = void 0;
+
+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"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _formatTimespan = require("../../../../../common/util/formatTimespan.js");
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiFlex = require("@instructure/ui-flex");
+
+var AnalysisUpdateDate = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(AnalysisUpdateDate, _Component);
+
+  var _super = (0, _createSuper2.default)(AnalysisUpdateDate);
+
+  function AnalysisUpdateDate() {
+    (0, _classCallCheck2.default)(this, AnalysisUpdateDate);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(AnalysisUpdateDate, [{
+    key: "render",
+    value: function render() {
+      var _this$context = this.context,
+          timezone = _this$context.timezone,
+          locale = _this$context.locale;
+      var _this$props = this.props,
+          date = _this$props.date,
+          multiline = _this$props.multiline;
+      return /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "x-small"
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+        direction: multiline ? 'column' : 'row',
+        alignItems: "start"
+      }, /*#__PURE__*/_react.default.createElement("b", null, (0, _formatMessage.default)('Data Last Updated:'), "\xA0"), /*#__PURE__*/_react.default.createElement("span", null, (0, _formatTimespan.displayDateAndTimeInTimezone)(date, timezone, locale))));
+    }
+  }]);
+  AnalysisUpdateDate.displayName = "AnalysisUpdateDate";
+  return AnalysisUpdateDate;
+}(_react.Component);
+
+exports.AnalysisUpdateDate = AnalysisUpdateDate;
+AnalysisUpdateDate.propTypes = {
+  date: _propTypes.default.string.isRequired,
+  multiline: _propTypes.default.bool
+};
+AnalysisUpdateDate.contextTypes = {
+  timezone: _propTypes.default.string,
+  locale: _propTypes.default.string
+};
+AnalysisUpdateDate.defaultProps = {
+  multiline: false
+};

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

@@ -31,8 +31,6 @@ var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _formatTimespan = require("../../../../../common/util/formatTimespan.js");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _index2 = _interopRequireDefault(require("../../../../../common/components/shared/Card/index.js"));
 
 var _index3 = _interopRequireDefault(require("../AnalysisPopoverMetric/index.js"));
@@ -41,6 +39,8 @@ var _index4 = _interopRequireDefault(require("../AnalysisMetric/index.js"));
 
 var _presenter = require("../charts/ScoreDistribution/presenter.js");
 
+var _propTypes = require("../propTypes.js");
+
 var _dec, _class, _class2, _temp;
 
 var styles = {
@@ -177,28 +177,7 @@ var NewQuizAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   NewQuizAnalysis.displayName = "NewQuizAnalysis";
   return NewQuizAnalysis;
 }(_react.Component), _class2.propTypes = {
-  quizAnalysis: _propTypes.default.shape({
-    created_timestamp: _propTypes.default.string.isRequired,
-    metadata: _propTypes.default.shape({
-      quiz_title: _propTypes.default.string
-    }).isRequired,
-    scores: _propTypes.default.shape({
-      decile_distribution: _propTypes.default.arrayOf(_propTypes.default.number),
-      cronbachs_alpha: _propTypes.default.number,
-      stddev: _propTypes.default.number,
-      median_percentage: _propTypes.default.number,
-      max_percentage: _propTypes.default.number,
-      min_percentage: _propTypes.default.number,
-      mean_percentage: _propTypes.default.number
-    }).isRequired,
-    attempts: _propTypes.default.shape({
-      mean_elapsed_sec: _propTypes.default.number,
-      students_completed: _propTypes.default.number,
-      students_not_finished: _propTypes.default.number,
-      students_without_attempt: _propTypes.default.number,
-      average_attempts: _propTypes.default.number
-    }).isRequired
-  }).isRequired
+  quizAnalysis: _propTypes.quizAnalysisPropType
 }, _class2.defaultProps = {
   quizAnalysis: {}
 }, _temp)) || _class);

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/ReportCard/index.js

@@ -33,58 +33,115 @@ var _uiThemeable = require("@instructure/ui-themeable");
 
 var _index = _interopRequireDefault(require("../../../../../common/components/shared/Card/index.js"));
 
-var _theme = _interopRequireDefault(require("../../ReportCard/theme.js"));
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _index2 = _interopRequireDefault(require("../AnalysisMetric/index.js"));
+
+var _Spinner = _interopRequireDefault(require("../../../../../common/components/shared/spinner/Spinner.js"));
+
+var _index3 = require("../AnalysisUpdateDate/index.js");
+
+var _propTypes2 = require("../propTypes.js");
 
 var _dec, _class, _class2, _temp;
 
 var styles = {
-  componentId: 'eRzKS',
+  componentId: 'eJSiT',
   template: function template(theme) {
-    return "\n\n.eRzKS_fbIL{border-radius:".concat(theme.cardBorderRadius || 'inherit', ";box-shadow:").concat(theme.cardBoxShadow || 'inherit', ";display:inline-flex;flex-direction:column;height:").concat(theme.cardHeight || 'inherit', ";margin:").concat(theme.cardMargin || 'inherit', ";padding:").concat(theme.cardPadding || 'inherit', ";width:").concat(theme.cardWidth || 'inherit', "}\n\n.eRzKS_ebWM{padding-top:").concat(theme.detailPadding || 'inherit', "}");
+    return "\n\n.eJSiT_bqdH{column-gap:5px;display:flex;justify-content:space-between;padding:".concat(theme.metricsPadding || 'inherit', " 0}\n\n.eJSiT_fbIL{border-radius:").concat(theme.cardBorderRadius || 'inherit', ";box-shadow:").concat(theme.cardBoxShadow || 'inherit', ";display:inline-flex;flex-direction:column;margin:").concat(theme.cardMargin || 'inherit', ";padding:").concat(theme.cardPadding || 'inherit', ";width:").concat(theme.cardWidth || 'inherit', "}\n\n.eJSiT_blRb{max-width:160px;padding-right:10px}");
   },
-  'card': 'eRzKS_fbIL',
-  'details': 'eRzKS_ebWM'
+  'metricsContainer': 'eJSiT_bqdH',
+  'card': 'eJSiT_fbIL',
+  'dateContainer': 'eJSiT_blRb'
 };
+
+var _ref = /*#__PURE__*/_react.default.createElement(_Spinner.default, null);
+
 var NewQuizAndItemAnalysisReportCard = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(NewQuizAndItemAnalysisReportCard, _Component);
 
   var _super = (0, _createSuper2.default)(NewQuizAndItemAnalysisReportCard);
 
   function NewQuizAndItemAnalysisReportCard() {
+    var _this;
+
     (0, _classCallCheck2.default)(this, NewQuizAndItemAnalysisReportCard);
-    return _super.apply(this, arguments);
+
+    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.renderMetrics = function () {
+      var _quizAnalysis$scores, _quizAnalysis$scores2, _quizAnalysis$scores3;
+
+      var quizAnalysis = _this.props.quizAnalysis;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.metricsContainer
+      }, /*#__PURE__*/_react.default.createElement(_index2.default, {
+        metricKey: "highscore",
+        label: (0, _formatMessage.default)('high score'),
+        value: (_quizAnalysis$scores = quizAnalysis.scores) === null || _quizAnalysis$scores === void 0 ? void 0 : _quizAnalysis$scores.max_percentage,
+        suffix: "%"
+      }), /*#__PURE__*/_react.default.createElement(_index2.default, {
+        metricKey: "lowscore",
+        label: (0, _formatMessage.default)('low score'),
+        value: (_quizAnalysis$scores2 = quizAnalysis.scores) === null || _quizAnalysis$scores2 === void 0 ? void 0 : _quizAnalysis$scores2.min_percentage,
+        suffix: "%"
+      }), /*#__PURE__*/_react.default.createElement(_index2.default, {
+        metricKey: "meanscore",
+        label: (0, _formatMessage.default)('mean score'),
+        value: (_quizAnalysis$scores3 = quizAnalysis.scores) === null || _quizAnalysis$scores3 === void 0 ? void 0 : _quizAnalysis$scores3.mean_percentage,
+        suffix: "%"
+      }));
+    };
+
+    return _this;
   }
 
   (0, _createClass2.default)(NewQuizAndItemAnalysisReportCard, [{
-    key: "render",
-    value: function render() {
+    key: "renderContent",
+    value: function renderContent() {
       var _this$props = this.props,
           name = _this$props.name,
-          href = _this$props.href;
-      return /*#__PURE__*/_react.default.createElement(_index.default, {
-        className: styles.card
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
-        direction: "column"
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+          href = _this$props.href,
+          quizAnalysis = _this$props.quizAnalysis;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
         size: "medium",
         weight: "bold"
-      }, name)), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
-        align: "end"
-      }, /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+      }, name), this.renderMetrics(), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+        direction: "row",
+        justifyItems: "space-between"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.dateContainer
+      }, /*#__PURE__*/_react.default.createElement(_index3.AnalysisUpdateDate, {
+        date: quizAnalysis.created_timestamp,
+        multiline: true
+      })), /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
         href: href
       }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
         size: "small"
-      }, (0, _formatMessage.default)('View Report'))))));
+      }, (0, _formatMessage.default)('View Report')))));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_index.default, {
+        className: styles.card
+      }, this.props.quizAnalysis ? this.renderContent() : _ref);
     }
   }]);
   NewQuizAndItemAnalysisReportCard.displayName = "NewQuizAndItemAnalysisReportCard";
   return NewQuizAndItemAnalysisReportCard;
 }(_react.Component), _class2.propTypes = {
   name: _propTypes.default.node,
-  href: _propTypes.default.string
+  href: _propTypes.default.string,
+  quizAnalysis: _propTypes2.quizAnalysisPropType
 }, _class2.defaultProps = {
   name: void 0,
-  href: void 0
+  href: void 0,
+  quizAnalysis: {}
 }, _temp)) || _class);
 exports.NewQuizAndItemAnalysisReportCard = NewQuizAndItemAnalysisReportCard;
 var _default = NewQuizAndItemAnalysisReportCard;

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing,
+      borders = _ref.borders;
+  return {
+    metricsPadding: spacing.medium,
+    cardWidth: '16rem',
+    cardPadding: spacing.medium,
+    cardMargin: spacing.xSmall,
+    cardBoxShadow: '1px 1px 3px 0 #ddd',
+    cardBorderRadius: borders.radiusMedium
+  };
+}

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

@@ -35,11 +35,9 @@ var _index2 = _interopRequireDefault(require("./NewQuizAnalysis/index.js"));
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
-var _uiText = require("@instructure/ui-text");
-
 var _uiFlex = require("@instructure/ui-flex");
 
-var _formatTimespan = require("../../../../common/util/formatTimespan.js");
+var _index3 = require("./AnalysisUpdateDate/index.js");
 
 var _ref3 = /*#__PURE__*/_react.default.createElement(_Spinner.default, null);
 
@@ -126,18 +124,15 @@ var NewQuizAndItemAnalysis = /*#__PURE__*/function (_Component) {
       var _this$state = this.state,
           quizAnalysis = _this$state.quizAnalysis,
           itemAnalyses = _this$state.itemAnalyses;
-      var _this$context = this.context,
-          timezone = _this$context.timezone,
-          locale = _this$context.locale;
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "fs-mask"
       }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
         justifyItems: "end",
         width: "82.5rem",
         margin: "auto"
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
-        size: "x-small"
-      }, /*#__PURE__*/_react.default.createElement("b", null, (0, _formatMessage.default)('Data Last Updated:')), "\xA0", (0, _formatTimespan.displayDateAndTimeInTimezone)(quizAnalysis.created_timestamp, timezone, locale))), /*#__PURE__*/_react.default.createElement(_index2.default, {
+      }, /*#__PURE__*/_react.default.createElement(_index3.AnalysisUpdateDate, {
+        date: quizAnalysis.created_timestamp
+      })), /*#__PURE__*/_react.default.createElement(_index2.default, {
         quizAnalysis: quizAnalysis
       }), /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
         level: "h3",
@@ -168,10 +163,6 @@ var NewQuizAndItemAnalysis = /*#__PURE__*/function (_Component) {
 }(_react.Component);
 
 exports.NewQuizAndItemAnalysis = NewQuizAndItemAnalysis;
-NewQuizAndItemAnalysis.contextTypes = {
-  timezone: _propTypes.default.string,
-  locale: _propTypes.default.string
-};
 NewQuizAndItemAnalysis.propTypes = {
   activeQuizId: _propTypes.default.string.isRequired,
   getQuizAnalysis: _propTypes.default.func.isRequired,

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/propTypes.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.quizAnalysisPropType = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var quizAnalysisPropType = _propTypes.default.shape({
+  created_timestamp: _propTypes.default.string.isRequired,
+  metadata: _propTypes.default.shape({
+    quiz_title: _propTypes.default.string
+  }).isRequired,
+  scores: _propTypes.default.shape({
+    decile_distribution: _propTypes.default.arrayOf(_propTypes.default.number),
+    cronbachs_alpha: _propTypes.default.number,
+    stddev: _propTypes.default.number,
+    median_percentage: _propTypes.default.number,
+    max_percentage: _propTypes.default.number,
+    min_percentage: _propTypes.default.number,
+    mean_percentage: _propTypes.default.number
+  }).isRequired,
+  attempts: _propTypes.default.shape({
+    mean_elapsed_sec: _propTypes.default.number,
+    students_completed: _propTypes.default.number,
+    students_not_finished: _propTypes.default.number,
+    students_without_attempt: _propTypes.default.number,
+    average_attempts: _propTypes.default.number
+  }).isRequired
+}).isRequired;
+
+exports.quizAnalysisPropType = quizAnalysisPropType;

package/lib/reporting/components/resources/ReportCard/index.js

@@ -34,7 +34,7 @@ var _theme = _interopRequireDefault(require("./theme.js"));
 var _dec, _class, _class2, _temp;
 
 var styles = {
-  componentId: 'cNnNG',
+  componentId: 'eRzKS',
   template: function template(theme) {
     return "\n\n.eRzKS_fbIL{border-radius:".concat(theme.cardBorderRadius || 'inherit', ";box-shadow:").concat(theme.cardBoxShadow || 'inherit', ";display:inline-flex;flex-direction:column;height:").concat(theme.cardHeight || 'inherit', ";margin:").concat(theme.cardMargin || 'inherit', ";padding:").concat(theme.cardPadding || 'inherit', ";width:").concat(theme.cardWidth || 'inherit', "}\n\n.eRzKS_ebWM{padding-top:").concat(theme.detailPadding || 'inherit', "}");
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "17.60.1-rc.0+e62c7066f",
+  "version": "17.60.1-rc.2+2a414acab",
   "license": "MIT",
   "description": "The Quiz React SDK by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
@@ -41,11 +41,11 @@
   ],
   "dependencies": {
     "@instructure/outcomes-ui": "^2.1.8",
-    "@instructure/quiz-common": "17.60.1-rc.0+e62c7066f",
-    "@instructure/quiz-i18n": "17.60.1-rc.0+e62c7066f",
-    "@instructure/quiz-interactions": "17.60.1-rc.0+e62c7066f",
-    "@instructure/quiz-number-input": "17.60.1-rc.0+e62c7066f",
-    "@instructure/quiz-rce": "17.60.1-rc.0+e62c7066f",
+    "@instructure/quiz-common": "17.60.1-rc.2+2a414acab",
+    "@instructure/quiz-i18n": "17.60.1-rc.2+2a414acab",
+    "@instructure/quiz-interactions": "17.60.1-rc.2+2a414acab",
+    "@instructure/quiz-number-input": "17.60.1-rc.2+2a414acab",
+    "@instructure/quiz-rce": "17.60.1-rc.2+2a414acab",
     "@instructure/ui-a11y-content": "^7.20.0",
     "@instructure/ui-alerts": "^7.20.0",
     "@instructure/ui-avatar": "^7.20.0",
@@ -106,7 +106,7 @@
     "eventemitter3": "^3.1.0",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "17.60.1-rc.0+e62c7066f",
+    "instructure-validations": "17.60.1-rc.2+2a414acab",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -157,7 +157,7 @@
     "intl": "^1.2.4",
     "jquery": "^2.2.3",
     "most-subject": "^5.3.0",
-    "quiz-presets": "17.60.1-rc.0+e62c7066f",
+    "quiz-presets": "17.60.1-rc.2+2a414acab",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -173,5 +173,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e62c7066fff45755442bc69d5d792f30a6be5e58"
+  "gitHead": "2a414acaba912ac12b7e31030142696d91666c13"
 }