@instructure/quiz-core 19.1.0 → 19.1.1-rc.1

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

@@ -5,21 +5,14 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
-import { themeable } from '@instructure/ui-themeable';
-import theme from "./theme.js";
-var styles = {
-  componentId: 'fKESK',
-  template: function template(theme) {
-    return "\n\n.fKESK_eckF{margin:0;max-width:159px;text-transform:capitalize}\n\n.fKESK_CIyo{width:90px}";
-  },
-  'metricLabel': 'fKESK_eckF',
-  'metricWrapper': 'fKESK_CIyo'
-};
-import React, { Component } from 'react';
+/** @jsx jsx */
+import { Component } from 'react';
 import { getSanitizedMetricValue } from "../utils.js";
 import { Metric } from '@instructure/ui-metric';
 import PropTypes from 'prop-types';
-export var AnalysisMetric = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import { withStyle, jsx } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+export var AnalysisMetric = (_dec = withStyle(generateStyle, null), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(AnalysisMetric, _Component);
 
   var _super = _createSuper(AnalysisMetric);
@@ -39,18 +32,18 @@ export var AnalysisMetric = (_dec = themeable(theme, styles), _dec(_class = (_te
           value = _this$props.value,
           suffix = _this$props.suffix;
       var dataAutomation = "sdk-new-ia-quiz-analysis-".concat(metricKey);
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         "data-automation": dataAutomation,
-        className: styles.metricWrapper
-      }, /*#__PURE__*/React.createElement(Metric, {
+        css: this.props.styles.metricWrapper
+      }, jsx(Metric, {
         themeOverride: {
           valueFontWeight: 500,
           padding: '0'
         },
         textAlign: "start",
         key: metricKey,
-        renderLabel: /*#__PURE__*/React.createElement("p", {
-          className: styles.metricLabel
+        renderLabel: jsx("p", {
+          css: this.props.styles.metricLabel
         }, label),
         renderValue: getSanitizedMetricValue(value, suffix)
       }));
@@ -63,7 +56,8 @@ export var AnalysisMetric = (_dec = themeable(theme, styles), _dec(_class = (_te
   metricKey: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array]),
-  suffix: PropTypes.string
+  suffix: PropTypes.string,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   value: void 0,
   suffix: ''

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisMetric/styles.js

@@ -0,0 +1,14 @@
+var generateStyle = function generateStyle() {
+  return {
+    metricLabel: {
+      margin: 0,
+      maxWidth: '159px',
+      textTransform: 'capitalize'
+    },
+    metricWrapper: {
+      width: '90px'
+    }
+  };
+};
+
+export default generateStyle;

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

@@ -5,23 +5,15 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
-import React, { Component } from 'react';
+/** @jsx jsx */
+import { Component } from 'react';
 import { Metric } from '@instructure/ui-metric';
 import { getSanitizedMetricValue } from "../utils.js";
-var styles = {
-  componentId: 'dpcwk',
-  template: function template(theme) {
-    return "\n\n.dpcwk_elNf{max-width:159px}\n\n.dpcwk_eckF{margin:0;padding-right:24px;text-transform:capitalize}\n\n.dpcwk_dqHR{margin-left:-24px;padding-left:5px}";
-  },
-  'metricLabelContainer': 'dpcwk_elNf',
-  'metricLabel': 'dpcwk_eckF',
-  'popoverContainer': 'dpcwk_dqHR'
-};
 import MetricPopover from "../MetricPopover/index.js";
-import { themeable } from '@instructure/ui-themeable';
-import theme from "./theme.js";
+import { withStyle, jsx } from '@instructure/emotion';
+import generateStyle from "./styles.js";
 import PropTypes from 'prop-types';
-export var AnalysisPopoverMetric = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var AnalysisPopoverMetric = (_dec = withStyle(generateStyle, null), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(AnalysisPopoverMetric, _Component);
 
   var _super = _createSuper(AnalysisPopoverMetric);
@@ -35,13 +27,13 @@ export var AnalysisPopoverMetric = (_dec = themeable(theme, styles), _dec(_class
   _createClass(AnalysisPopoverMetric, [{
     key: "renderLabelWithPopover",
     value: function renderLabelWithPopover(texts) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.metricLabelContainer
-      }, /*#__PURE__*/React.createElement("span", {
-        className: styles.metricLabel
-      }, this.props.label), /*#__PURE__*/React.createElement("span", {
-        className: styles.popoverContainer
-      }, /*#__PURE__*/React.createElement(MetricPopover, texts)));
+      return jsx("div", {
+        css: this.props.styles.metricLabelContainer
+      }, jsx("span", {
+        css: this.props.styles.metricLabel
+      }, this.props.label), jsx("span", {
+        css: this.props.styles.popoverContainer
+      }, jsx(MetricPopover, texts)));
     }
   }, {
     key: "render",
@@ -50,7 +42,7 @@ export var AnalysisPopoverMetric = (_dec = themeable(theme, styles), _dec(_class
           metricKey = _this$props.metricKey,
           popoverDescription = _this$props.popoverDescription,
           value = _this$props.value;
-      return /*#__PURE__*/React.createElement(Metric, {
+      return jsx(Metric, {
         themeOverride: {
           valueFontWeight: 500,
           padding: '0'
@@ -74,7 +66,8 @@ export var AnalysisPopoverMetric = (_dec = themeable(theme, styles), _dec(_class
     subtitle: PropTypes.string,
     body: PropTypes.string,
     screenReaderLabel: PropTypes.string
-  }).isRequired
+  }).isRequired,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   value: void 0
 }, _temp)) || _class);

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisPopoverMetric/styles.js

@@ -0,0 +1,20 @@
+var generateStyle = function generateStyle() {
+  return {
+    metricLabelContainer: {
+      maxWidth: '159px'
+    },
+    metricLabel: {
+      margin: '0',
+      textTransform: 'capitalize',
+      paddingRight: '24px'
+    },
+    popoverContainer: {
+      paddingLeft: '5px',
+      marginLeft: '-24px'
+      /* same as metricLabel padding. This makes sure that the icon never wraps below the text */
+
+    }
+  };
+};
+
+export default generateStyle;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/AfsTableWrapper/presenter.js

@@ -4,21 +4,15 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
-import React, { Component } from 'react';
+/** @jsx jsx */
+import { Component } from 'react';
 import t from '@instructure/quiz-i18n/es/format-message';
-import theme from "./theme.js";
-var styles = {
-  componentId: 'bmsWU',
-  template: function template(theme) {
-    return "\n\n.bmsWU_rMrG{display:flex;flex-basis:100%;flex-direction:column}";
-  },
-  'tableWrapper': 'bmsWU_rMrG'
-};
-import { themeable } from '@instructure/ui-themeable';
 import { Flex } from '@instructure/ui-flex';
 import { Heading } from '@instructure/ui-heading';
+import { withStyle, jsx } from '@instructure/emotion';
+import generateStyle from "./styles.js";
 import PropTypes from 'prop-types';
-export var AfsTableWrapper = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var AfsTableWrapper = (_dec = withStyle(generateStyle, null), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(AfsTableWrapper, _Component);
 
   var _super = _createSuper(AfsTableWrapper);
@@ -35,13 +29,14 @@ export var AfsTableWrapper = (_dec = themeable(theme, styles), _dec(_class = (_t
     _this = _super.call.apply(_super, [this].concat(args));
 
     _this.render = function () {
-      return /*#__PURE__*/React.createElement(Flex, {
-        direction: "row"
-      }, /*#__PURE__*/React.createElement(Flex.Item, {
+      return jsx(Flex, {
+        direction: "row",
+        "data-testid": "AfsTableWrapper"
+      }, jsx(Flex.Item, {
         shouldGrow: true
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.tableWrapper
-      }, /*#__PURE__*/React.createElement(Heading, {
+      }, jsx("div", {
+        css: _this.props.styles.tableWrapper
+      }, jsx(Heading, {
         margin: "x-large x-large x-large 0",
         level: "h3",
         weight: "bold",
@@ -54,5 +49,6 @@ export var AfsTableWrapper = (_dec = themeable(theme, styles), _dec(_class = (_t
 
   return AfsTableWrapper;
 }(Component), _class2.propTypes = {
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  styles: PropTypes.object
 }, _temp)) || _class);

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/AfsTableWrapper/styles.js

@@ -0,0 +1,11 @@
+var generateStyle = function generateStyle() {
+  return {
+    tableWrapper: {
+      display: 'flex',
+      flexBasis: '100%',
+      flexDirection: 'column'
+    }
+  };
+};
+
+export default generateStyle;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/AggregationTable/popoverContent.js

@@ -0,0 +1,6 @@
+import t from '@instructure/quiz-i18n/es/format-message';
+export var noAnswerMissing = {
+  title: t('No Response'),
+  body: t('No response is considered as Incorrect answer in this question type.'),
+  screenReaderLabel: t('No response tooltip')
+};

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

@@ -36,6 +36,8 @@ var styles = {
 import { Flex } from '@instructure/ui-flex';
 import classNames from 'classnames';
 import { Text } from '@instructure/ui-text';
+import MetricPopover from "../../../MetricPopover/index.js";
+import { noAnswerMissing } from "./popoverContent.js";
 var noAnswerKey = 'noAnswer';
 var incorrectKey = 'incorrect';
 var correctKey = 'correct';
@@ -66,15 +68,18 @@ export var AggregationTable = (_dec = themeable(theme, styles), _dec(_class = (_
     _this = _super.call.apply(_super, [this].concat(args));
 
     _this.renderHeaderRow = function () {
+      var popover = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
       var itemId = _this.props.itemId;
       var answerHeaderId = "answer-frequency-summary-aggregate-answer-".concat(itemId);
       var respondentsHeaderId = "answer-frequency-summary-aggregate-respondents-".concat(itemId);
       var percentageHeaderId = "answer-frequency-summary-aggregate-percentage-".concat(itemId);
       return /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.ColHeader, {
         id: answerHeaderId
-      }, /*#__PURE__*/React.createElement("span", {
+      }, /*#__PURE__*/React.createElement(Flex, {
+        gap: "x-small"
+      }, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement("span", {
         className: classNames(styles.firstHeaderCell)
-      }, t('Result'))), /*#__PURE__*/React.createElement(Table.ColHeader, {
+      }, t('Result'))), /*#__PURE__*/React.createElement(Flex.Item, null, popover && /*#__PURE__*/React.createElement(MetricPopover, noAnswerMissing)))), /*#__PURE__*/React.createElement(Table.ColHeader, {
         id: respondentsHeaderId,
         textAlign: "center"
       }, t('Respondents')), /*#__PURE__*/React.createElement(Table.ColHeader, {
@@ -196,11 +201,12 @@ export var AggregationTable = (_dec = themeable(theme, styles), _dec(_class = (_
     };
 
     _this.render = function () {
+      var popover = !_this.noAnswerExist();
       return /*#__PURE__*/React.createElement("div", {
         className: classNames(styles.collapsingTable, styles[_this.getColorProfile()])
       }, /*#__PURE__*/React.createElement(Table, {
         caption: t('Answer Frequency Summary Aggregates')
-      }, _this.renderHeaderRow(), /*#__PURE__*/React.createElement(Table.Body, null, _this.correctExist() && _this.renderCorrect(), _this.partialCorrectExist() && _this.renderPartialCorrect(), _this.incorrectExist() && _this.renderIncorrect(), _this.noAnswerExist() && _this.renderNoAnswer())));
+      }, _this.renderHeaderRow(popover), /*#__PURE__*/React.createElement(Table.Body, null, _this.correctExist() && _this.renderCorrect(), _this.partialCorrectExist() && _this.renderPartialCorrect(), _this.incorrectExist() && _this.renderIncorrect(), _this.noAnswerExist() && _this.renderNoAnswer())));
     };
 
     return _this;

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

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,11 +15,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _uiThemeable = require("@instructure/ui-themeable");
-
-var _theme = _interopRequireDefault(require("./theme.js"));
-
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _utils = require("../utils.js");
 
@@ -29,17 +23,13 @@ var _uiMetric = require("@instructure/ui-metric");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _emotion = require("@instructure/emotion");
+
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'fKESK',
-  template: function template(theme) {
-    return "\n\n.fKESK_eckF{margin:0;max-width:159px;text-transform:capitalize}\n\n.fKESK_CIyo{width:90px}";
-  },
-  'metricLabel': 'fKESK_eckF',
-  'metricWrapper': 'fKESK_CIyo'
-};
-var AnalysisMetric = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var AnalysisMetric = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(AnalysisMetric, _Component);
 
   var _super = (0, _createSuper2.default)(AnalysisMetric);
@@ -58,18 +48,18 @@ var AnalysisMetric = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles)
           value = _this$props.value,
           suffix = _this$props.suffix;
       var dataAutomation = "sdk-new-ia-quiz-analysis-".concat(metricKey);
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _emotion.jsx)("div", {
         "data-automation": dataAutomation,
-        className: styles.metricWrapper
-      }, /*#__PURE__*/_react.default.createElement(_uiMetric.Metric, {
+        css: this.props.styles.metricWrapper
+      }, (0, _emotion.jsx)(_uiMetric.Metric, {
         themeOverride: {
           valueFontWeight: 500,
           padding: '0'
         },
         textAlign: "start",
         key: metricKey,
-        renderLabel: /*#__PURE__*/_react.default.createElement("p", {
-          className: styles.metricLabel
+        renderLabel: (0, _emotion.jsx)("p", {
+          css: this.props.styles.metricLabel
         }, label),
         renderValue: (0, _utils.getSanitizedMetricValue)(value, suffix)
       }));
@@ -81,7 +71,8 @@ var AnalysisMetric = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles)
   metricKey: _propTypes.default.string.isRequired,
   label: _propTypes.default.string.isRequired,
   value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.array]),
-  suffix: _propTypes.default.string
+  suffix: _propTypes.default.string,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   value: void 0,
   suffix: ''

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle() {
+  return {
+    metricLabel: {
+      margin: 0,
+      maxWidth: '159px',
+      textTransform: 'capitalize'
+    },
+    metricWrapper: {
+      width: '90px'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

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

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,7 +15,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _uiMetric = require("@instructure/ui-metric");
 
@@ -25,24 +23,15 @@ var _utils = require("../utils.js");
 
 var _index = _interopRequireDefault(require("../MetricPopover/index.js"));
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
-var _theme = _interopRequireDefault(require("./theme.js"));
+var _styles = _interopRequireDefault(require("./styles.js"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'dpcwk',
-  template: function template(theme) {
-    return "\n\n.dpcwk_elNf{max-width:159px}\n\n.dpcwk_eckF{margin:0;padding-right:24px;text-transform:capitalize}\n\n.dpcwk_dqHR{margin-left:-24px;padding-left:5px}";
-  },
-  'metricLabelContainer': 'dpcwk_elNf',
-  'metricLabel': 'dpcwk_eckF',
-  'popoverContainer': 'dpcwk_dqHR'
-};
-var AnalysisPopoverMetric = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var AnalysisPopoverMetric = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(AnalysisPopoverMetric, _Component);
 
   var _super = (0, _createSuper2.default)(AnalysisPopoverMetric);
@@ -55,13 +44,13 @@ var AnalysisPopoverMetric = (_dec = (0, _uiThemeable.themeable)(_theme.default,
   (0, _createClass2.default)(AnalysisPopoverMetric, [{
     key: "renderLabelWithPopover",
     value: function renderLabelWithPopover(texts) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.metricLabelContainer
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: styles.metricLabel
-      }, this.props.label), /*#__PURE__*/_react.default.createElement("span", {
-        className: styles.popoverContainer
-      }, /*#__PURE__*/_react.default.createElement(_index.default, texts)));
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.metricLabelContainer
+      }, (0, _emotion.jsx)("span", {
+        css: this.props.styles.metricLabel
+      }, this.props.label), (0, _emotion.jsx)("span", {
+        css: this.props.styles.popoverContainer
+      }, (0, _emotion.jsx)(_index.default, texts)));
     }
   }, {
     key: "render",
@@ -70,7 +59,7 @@ var AnalysisPopoverMetric = (_dec = (0, _uiThemeable.themeable)(_theme.default,
           metricKey = _this$props.metricKey,
           popoverDescription = _this$props.popoverDescription,
           value = _this$props.value;
-      return /*#__PURE__*/_react.default.createElement(_uiMetric.Metric, {
+      return (0, _emotion.jsx)(_uiMetric.Metric, {
         themeOverride: {
           valueFontWeight: 500,
           padding: '0'
@@ -93,7 +82,8 @@ var AnalysisPopoverMetric = (_dec = (0, _uiThemeable.themeable)(_theme.default,
     subtitle: _propTypes.default.string,
     body: _propTypes.default.string,
     screenReaderLabel: _propTypes.default.string
-  }).isRequired
+  }).isRequired,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   value: void 0
 }, _temp)) || _class);

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle() {
+  return {
+    metricLabelContainer: {
+      maxWidth: '159px'
+    },
+    metricLabel: {
+      margin: '0',
+      textTransform: 'capitalize',
+      paddingRight: '24px'
+    },
+    popoverContainer: {
+      paddingLeft: '5px',
+      marginLeft: '-24px'
+      /* same as metricLabel padding. This makes sure that the icon never wraps below the text */
+
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

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

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,30 +13,23 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
-var _theme = _interopRequireDefault(require("./theme.js"));
-
-var _uiThemeable = require("@instructure/ui-themeable");
-
 var _uiFlex = require("@instructure/ui-flex");
 
 var _uiHeading = require("@instructure/ui-heading");
 
+var _emotion = require("@instructure/emotion");
+
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'bmsWU',
-  template: function template(theme) {
-    return "\n\n.bmsWU_rMrG{display:flex;flex-basis:100%;flex-direction:column}";
-  },
-  'tableWrapper': 'bmsWU_rMrG'
-};
-var AfsTableWrapper = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var AfsTableWrapper = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(AfsTableWrapper, _Component);
 
   var _super = (0, _createSuper2.default)(AfsTableWrapper);
@@ -55,13 +46,14 @@ var AfsTableWrapper = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
     _this = _super.call.apply(_super, [this].concat(args));
 
     _this.render = function () {
-      return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
-        direction: "row"
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+      return (0, _emotion.jsx)(_uiFlex.Flex, {
+        direction: "row",
+        "data-testid": "AfsTableWrapper"
+      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         shouldGrow: true
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.tableWrapper
-      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+      }, (0, _emotion.jsx)("div", {
+        css: _this.props.styles.tableWrapper
+      }, (0, _emotion.jsx)(_uiHeading.Heading, {
         margin: "x-large x-large x-large 0",
         level: "h3",
         weight: "bold",
@@ -74,6 +66,7 @@ var AfsTableWrapper = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
 
   return AfsTableWrapper;
 }(_react.Component), _class2.propTypes = {
-  children: _propTypes.default.node.isRequired
+  children: _propTypes.default.node.isRequired,
+  styles: _propTypes.default.object
 }, _temp)) || _class);
 exports.AfsTableWrapper = AfsTableWrapper;

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle() {
+  return {
+    tableWrapper: {
+      display: 'flex',
+      flexBasis: '100%',
+      flexDirection: 'column'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.noAnswerMissing = void 0;
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var noAnswerMissing = {
+  title: (0, _formatMessage.default)('No Response'),
+  body: (0, _formatMessage.default)('No response is considered as Incorrect answer in this question type.'),
+  screenReaderLabel: (0, _formatMessage.default)('No response tooltip')
+};
+exports.noAnswerMissing = noAnswerMissing;

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

@@ -39,6 +39,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _uiText = require("@instructure/ui-text");
 
+var _index = _interopRequireDefault(require("../../../MetricPopover/index.js"));
+
+var _popoverContent = require("./popoverContent.js");
+
 var _dec, _class, _class2, _temp;
 
 var styles = {
@@ -91,15 +95,18 @@ var AggregationTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
     _this = _super.call.apply(_super, [this].concat(args));
 
     _this.renderHeaderRow = function () {
+      var popover = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
       var itemId = _this.props.itemId;
       var answerHeaderId = "answer-frequency-summary-aggregate-answer-".concat(itemId);
       var respondentsHeaderId = "answer-frequency-summary-aggregate-respondents-".concat(itemId);
       var percentageHeaderId = "answer-frequency-summary-aggregate-percentage-".concat(itemId);
       return /*#__PURE__*/_react.default.createElement(_uiTable.Table.Head, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
         id: answerHeaderId
-      }, /*#__PURE__*/_react.default.createElement("span", {
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+        gap: "x-small"
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement("span", {
         className: (0, _classnames.default)(styles.firstHeaderCell)
-      }, (0, _formatMessage.default)('Result'))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+      }, (0, _formatMessage.default)('Result'))), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, popover && /*#__PURE__*/_react.default.createElement(_index.default, _popoverContent.noAnswerMissing)))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
         id: respondentsHeaderId,
         textAlign: "center"
       }, (0, _formatMessage.default)('Respondents')), /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
@@ -221,11 +228,12 @@ var AggregationTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
     };
 
     _this.render = function () {
+      var popover = !_this.noAnswerExist();
       return /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)(styles.collapsingTable, styles[_this.getColorProfile()])
       }, /*#__PURE__*/_react.default.createElement(_uiTable.Table, {
         caption: (0, _formatMessage.default)('Answer Frequency Summary Aggregates')
-      }, _this.renderHeaderRow(), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Body, null, _this.correctExist() && _this.renderCorrect(), _this.partialCorrectExist() && _this.renderPartialCorrect(), _this.incorrectExist() && _this.renderIncorrect(), _this.noAnswerExist() && _this.renderNoAnswer())));
+      }, _this.renderHeaderRow(popover), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Body, null, _this.correctExist() && _this.renderCorrect(), _this.partialCorrectExist() && _this.renderPartialCorrect(), _this.incorrectExist() && _this.renderIncorrect(), _this.noAnswerExist() && _this.renderNoAnswer())));
     };
 
     return _this;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "19.1.0",
+  "version": "19.1.1-rc.1+6f25bb27e",
   "license": "MIT",
   "description": "The Quiz React SDK by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
@@ -44,11 +44,11 @@
     "@instructure/emotion": "^8.48.3",
     "@instructure/grading-utils": "^1.0.0",
     "@instructure/outcomes-ui": "^2.1.9",
-    "@instructure/quiz-common": "^19.1.0",
-    "@instructure/quiz-i18n": "^19.1.0",
-    "@instructure/quiz-interactions": "^19.1.0",
-    "@instructure/quiz-number-input": "^19.1.0",
-    "@instructure/quiz-rce": "^19.1.0",
+    "@instructure/quiz-common": "19.1.1-rc.1+6f25bb27e",
+    "@instructure/quiz-i18n": "19.1.1-rc.1+6f25bb27e",
+    "@instructure/quiz-interactions": "19.1.1-rc.1+6f25bb27e",
+    "@instructure/quiz-number-input": "19.1.1-rc.1+6f25bb27e",
+    "@instructure/quiz-rce": "19.1.1-rc.1+6f25bb27e",
     "@instructure/ui-a11y-content": "^8.48.3",
     "@instructure/ui-alerts": "^8.48.3",
     "@instructure/ui-avatar": "^8.48.3",
@@ -110,7 +110,7 @@
     "file-saver": "~2.0.5",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "^19.1.0",
+    "instructure-validations": "19.1.1-rc.1+6f25bb27e",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -142,13 +142,14 @@
     "uuid": "^3.2.1"
   },
   "devDependencies": {
-    "@instructure/quiz-scripts": "^19.1.0",
+    "@instructure/quiz-scripts": "19.1.0",
     "@instructure/ui-axe-check": "^8.48.3",
     "@instructure/ui-babel-preset": "^7.22.1",
     "@instructure/ui-karma-config": "^7.22.1",
     "@instructure/ui-postcss-config": "^7.22.1",
     "@instructure/ui-scripts": "^7.22.1",
     "@instructure/ui-test-utils": "^7.22.1",
+    "@testing-library/react": "^12.1.5",
     "chai": "^4.1.2",
     "chai-as-promised": "^7.1.1",
     "chai-enzyme": "^1.0.0-beta.1",
@@ -161,7 +162,7 @@
     "intl": "^1.2.4",
     "jquery": "^2.2.3",
     "most-subject": "^5.3.0",
-    "quiz-presets": "^19.1.0",
+    "quiz-presets": "19.1.1-rc.1+6f25bb27e",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -177,5 +178,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b4108f0a0adb7a2c80409e4c8a81f645c2aff899"
+  "gitHead": "6f25bb27e11398a4ec0718a343fd2dcebcd16b83"
 }

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

@@ -1,3 +0,0 @@
-export default function generator() {
-  return {};
-}

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

@@ -1,6 +0,0 @@
-export default function generator(_ref) {
-  var spacing = _ref.spacing;
-  return {
-    headerPaddingBottom: spacing.medium
-  };
-}

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/AfsTableWrapper/theme.js

@@ -1,5 +0,0 @@
-export default function generator() {
-  return {
-    tableBottomPadding: 0
-  };
-}

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

@@ -1,10 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = generator;
-
-function generator() {
-  return {};
-}

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

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = generator;
-
-function generator(_ref) {
-  var spacing = _ref.spacing;
-  return {
-    headerPaddingBottom: spacing.medium
-  };
-}

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

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = generator;
-
-function generator() {
-  return {
-    tableBottomPadding: 0
-  };
-}