@instructure/quiz-core 20.11.4 → 20.11.5-rc.1

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

@@ -5,11 +5,12 @@ 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 PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Heading } from '@instructure/ui-heading';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { withI18nSupport } from '@instructure/quiz-common';
 import Spinner from "../../../../common/components/shared/spinner/Spinner.js";
@@ -18,20 +19,12 @@ import FormattedDuration from "../../../../common/components/shared/FormattedDur
 import ItemAnalysisRow from "../../../../reporting/components/itemAnalysis/ItemAnalysisRow/index.js";
 import QuizAnalysisOverview from "../../../../reporting/components/quizAnalysis/QuizAnalysisOverview.js";
 import MetricsListItem from "../../MetricsListItem/index.js";
-var styles = {
-  componentId: 'cNnNG',
-  template: function template(theme) {
-    return "\n\n.cNnNG_nvdO{margin:".concat(theme.titleMarginTop || 'inherit', " ").concat(theme.titleMarginLeftRight || 'inherit', " ").concat(theme.titleMarginBottom || 'inherit', " ").concat(theme.titleMarginLeftRight || 'inherit', "}\n\n.cNnNG_bwKH{color:").concat(theme.emptyTextColor || 'inherit', ";font-size:").concat(theme.emptyTextFontSize || 'inherit', ";padding:").concat(theme.emptyTextPadding || 'inherit', ";text-align:center}\n\n[dir=ltr] .cNnNG_bwKH,[dir=rtl] .cNnNG_bwKH{text-align:center}\n\n.cNnNG_eiMu{justify-content:center}");
-  },
-  'title': 'cNnNG_nvdO',
-  'emptyText': 'cNnNG_bwKH',
-  'metric': 'cNnNG_eiMu'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 
-var _ref2 = /*#__PURE__*/React.createElement(Spinner, null);
+var _ref2 = jsx(Spinner, null);
 
-export var QuizAndItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_withI18nSupport) {
+export var QuizAndItemAnalysis = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_withI18nSupport) {
   _inherits(QuizAndItemAnalysis, _withI18nSupport);
 
   var _super = _createSuper(QuizAndItemAnalysis);
@@ -70,9 +63,9 @@ export var QuizAndItemAnalysis = (_dec = themeable(theme, styles), _dec(_class =
       var mean = t.rich('{score}<0>/{possible, number} pts</0>', {
         0: function _(_ref) {
           var children = _ref.children;
-          return /*#__PURE__*/React.createElement("span", {
+          return jsx("span", {
             key: "mean",
-            className: styles.metricNote
+            css: _this.props.styles.metricNote
           }, children);
         },
         score: itemAnalysis.meanScore(this.locale) || 0,
@@ -81,41 +74,41 @@ export var QuizAndItemAnalysis = (_dec = themeable(theme, styles), _dec(_class =
       this.props.itemMetrics.forEach(function (key) {
         switch (key) {
           case 'difficultyIndex':
-            metrics.push( /*#__PURE__*/React.createElement(MetricsListItem, {
+            metrics.push(jsx(MetricsListItem, {
               key: "difficultyIndex",
               renderLabel: t('Difficulty Index'),
               renderValue: itemAnalysis.difficultyIndex(_this.locale),
-              className: styles.metric,
+              customStyles: _this.props.styles.metric,
               isGroupChild: true
             }));
             break;
 
           case 'discriminationIndex':
-            metrics.push( /*#__PURE__*/React.createElement(MetricsListItem, {
+            metrics.push(jsx(MetricsListItem, {
               key: "discriminationIndex",
               renderLabel: t('Discrimination Index'),
               renderValue: itemAnalysis.discriminationIndex(_this.locale),
-              className: styles.metric,
+              customStyles: _this.props.styles.metric,
               isGroupChild: true
             }));
             break;
 
           case 'rpb':
-            metrics.push( /*#__PURE__*/React.createElement(MetricsListItem, {
+            metrics.push(jsx(MetricsListItem, {
               key: "rpb",
               renderLabel: t('RPB'),
               renderValue: itemAnalysis.pointBiserial(_this.locale),
-              className: styles.metric,
+              customStyles: _this.props.styles.metric,
               isGroupChild: true
             }));
             break;
 
           case 'meanEarnedScore':
-            metrics.push( /*#__PURE__*/React.createElement(MetricsListItem, {
+            metrics.push(jsx(MetricsListItem, {
               key: "meanEarnedScore",
               renderLabel: t('Mean Earned Score'),
               renderValue: mean,
-              className: styles.metric,
+              customStyles: _this.props.styles.metric,
               isGroupChild: true
             }));
             break;
@@ -126,68 +119,70 @@ export var QuizAndItemAnalysis = (_dec = themeable(theme, styles), _dec(_class =
   }, {
     key: "generateQuizAnalysisMetrics",
     value: function generateQuizAnalysisMetrics(quizAnalysis) {
+      var _this2 = this;
+
       var metrics = [];
-      var formattedElapsedTime = /*#__PURE__*/React.createElement(FormattedDuration, {
+      var formattedElapsedTime = jsx(FormattedDuration, {
         seconds: quizAnalysis.meanElapsedTime()
       });
       this.props.quizMetrics.forEach(function (key) {
         switch (key) {
           case 'highScore':
-            metrics.push( /*#__PURE__*/React.createElement(MetricsListItem, {
+            metrics.push(jsx(MetricsListItem, {
               key: "highScore",
               renderLabel: t('High Score'),
               renderValue: quizAnalysis.highScore(),
-              className: styles.metric,
+              customStyles: _this2.props.styles.metric,
               isGroupChild: true
             }));
             break;
 
           case 'lowScore':
-            metrics.push( /*#__PURE__*/React.createElement(MetricsListItem, {
+            metrics.push(jsx(MetricsListItem, {
               key: "lowScore",
               renderLabel: t('Low Score'),
               renderValue: quizAnalysis.lowScore(),
-              className: styles.metric,
+              customStyles: _this2.props.styles.metric,
               isGroupChild: true
             }));
             break;
 
           case 'meanScore':
-            metrics.push( /*#__PURE__*/React.createElement(MetricsListItem, {
+            metrics.push(jsx(MetricsListItem, {
               key: "meanScore",
               renderLabel: t('Mean Score'),
               renderValue: quizAnalysis.meanScore(),
-              className: styles.metric,
+              customStyles: _this2.props.styles.metric,
               isGroupChild: true
             }));
             break;
 
           case 'standardDeviation':
-            metrics.push( /*#__PURE__*/React.createElement(MetricsListItem, {
+            metrics.push(jsx(MetricsListItem, {
               key: "standardDeviation",
               renderLabel: t('Standard Deviation'),
               renderValue: quizAnalysis.standardDeviation(),
-              className: styles.metric,
+              customStyles: _this2.props.styles.metric,
               isGroupChild: true
             }));
             break;
 
           case 'meanElapsedTime':
-            metrics.push( /*#__PURE__*/React.createElement(MetricsListItem, {
+            metrics.push(jsx(MetricsListItem, {
               key: "meanElapsedTime",
               renderLabel: t('Mean Elapsed Time'),
               renderValue: formattedElapsedTime,
-              className: styles.metric,
+              customStyles: _this2.props.styles.metric,
               isGroupChild: true
             }));
             break;
 
           case 'cronbachsAlpha':
-            metrics.push( /*#__PURE__*/React.createElement(MetricsListItem, {
+            metrics.push(jsx(MetricsListItem, {
               key: "cronbachsAlpha",
               renderLabel: t('Cronbach\'s Alpha'),
               renderValue: quizAnalysis.cronbachsAlpha(),
-              className: styles.metric,
+              customStyles: _this2.props.styles.metric,
               isGroupChild: true
             }));
             break;
@@ -198,7 +193,7 @@ export var QuizAndItemAnalysis = (_dec = themeable(theme, styles), _dec(_class =
   }, {
     key: "renderItemAnalysisRows",
     value: function renderItemAnalysisRows() {
-      var _this2 = this;
+      var _this3 = this;
 
       var _this$props = this.props,
           animateDelay = _this$props.animateDelay,
@@ -213,16 +208,16 @@ export var QuizAndItemAnalysis = (_dec = themeable(theme, styles), _dec(_class =
         return;
       }
 
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-        className: styles.title
-      }, /*#__PURE__*/React.createElement(Heading, {
+      return jsx("div", null, jsx("div", {
+        css: this.props.styles.title
+      }, jsx(Heading, {
         level: "h3",
         as: "h2",
         color: "primary"
       }, t('Item Analysis'))), itemAnalyses.toArray().map(function (itemAnalysis, i) {
-        var itemMetrics = _this2.generateItemAnalysisMetrics(itemAnalysis);
+        var itemMetrics = _this3.generateItemAnalysisMetrics(itemAnalysis);
 
-        return /*#__PURE__*/React.createElement(ItemAnalysisRow, {
+        return jsx(ItemAnalysisRow, {
           animateDelay: animateDelay,
           animateDuration: animateDuration,
           expanded: openRows[itemAnalysis.itemId],
@@ -232,16 +227,16 @@ export var QuizAndItemAnalysis = (_dec = themeable(theme, styles), _dec(_class =
           position: i + 1,
           quizId: activeQuizId,
           toggleExpanded: toggleItemAnalysisRowExpanded,
-          outcomesEndpoint: _this2.props.outcomesEndpoint,
-          outcomesToken: _this2.props.outcomesToken
+          outcomesEndpoint: _this3.props.outcomesEndpoint,
+          outcomesToken: _this3.props.outcomesToken
         }, itemMetrics);
       }));
     }
   }, {
     key: "renderNotFound",
     value: function renderNotFound() {
-      return /*#__PURE__*/React.createElement(Card, {
-        className: styles.emptyText
+      return jsx(Card, {
+        css: this.props.styles.emptyText
       }, t('This report is no longer in use, please use the new Quiz and Item Analysis report.  ' + 'Reports generated before { lastReportDate } from this link will be available ' + 'until the summer of 2024. New reports cannot be generated from this link.', {
         lastReportDate: this.formatDateShort(new Date('2024-01-31'))
       }));
@@ -255,9 +250,9 @@ export var QuizAndItemAnalysis = (_dec = themeable(theme, styles), _dec(_class =
           quiz = _this$props2.quiz,
           quizAnalysis = _this$props2.quizAnalysis;
       var quizMetrics = this.generateQuizAnalysisMetrics(quizAnalysis);
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         className: "fs-mask"
-      }, /*#__PURE__*/React.createElement(QuizAnalysisOverview, {
+      }, jsx(QuizAnalysisOverview, {
         animateDelay: animateDelay,
         animateDuration: animateDuration,
         quizAnalysis: quizAnalysis,
@@ -295,7 +290,8 @@ export var QuizAndItemAnalysis = (_dec = themeable(theme, styles), _dec(_class =
   getExistingQuiz: PropTypes.func.isRequired,
   getItemAnalyses: PropTypes.func.isRequired,
   getQuizAnalysis: PropTypes.func.isRequired,
-  locale: PropTypes.string
+  locale: PropTypes.string,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   animateDelay: void 0,
   animateDuration: void 0,

package/es/reporting/components/resources/QuizAndItemAnalysis/styles.js

@@ -0,0 +1,18 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    title: {
+      margin: "".concat(componentTheme.titleMarginTop, " ").concat(componentTheme.titleMarginLeftRight, " ").concat(componentTheme.titleMarginBottom, " ").concat(componentTheme.titleMarginLeftRight)
+    },
+    emptyText: {
+      padding: componentTheme.emptyTextPadding,
+      fontSize: componentTheme.emptyTextFontSize,
+      textAlign: 'center',
+      color: componentTheme.emptyTextColor
+    },
+    metric: {
+      justifyContent: 'center'
+    }
+  };
+};
+
+export default generateStyle;

package/es/reporting/components/resources/QuizAndItemAnalysis/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       typography = _ref.typography,
       colors = _ref.colors;
@@ -10,4 +10,6 @@ export default function generator(_ref) {
     emptyTextFontSize: typography.fontSizeLarge,
     emptyTextColor: colors.ash
   };
-}
+};
+
+export default generateComponentTheme;

package/lib/reporting/components/MetricsListItem/index.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
 });
@@ -19,32 +17,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 _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _uiMetric = require("@instructure/ui-metric");
 
 var _uiA11yContent = require("@instructure/ui-a11y-content");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
-var _theme = _interopRequireDefault(require("./theme.js"));
+var _styles = _interopRequireDefault(require("./styles.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'fvWlS',
-  template: function template(theme) {
-    return "\n\n.fvWlS_bGBk{align-items:center;display:flex;flex-direction:row;justify-content:center}";
-  },
-  'root': 'fvWlS_bGBk'
-};
-var MetricsListItem = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var MetricsListItem = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(MetricsListItem, _Component);
 
   var _super = (0, _createSuper2.default)(MetricsListItem);
@@ -57,19 +46,19 @@ var MetricsListItem = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   (0, _createClass2.default)(MetricsListItem, [{
     key: "renderNoValue",
     value: function renderNoValue() {
-      return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('No value')), /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, (0, _formatMessage.default)('--')));
+      return (0, _emotion.jsx)("span", null, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('No value')), (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, (0, _formatMessage.default)('--')));
     }
   }, {
     key: "render",
     value: function render() {
-      var names = (0, _classnames.default)(styles.root, this.props.className);
+      var styles = [this.props.styles.root, this.props.customStyles];
       var _this$props = this.props,
           renderValue = _this$props.renderValue,
           renderLabel = _this$props.renderLabel,
           isGroupChild = _this$props.isGroupChild;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: names
-      }, /*#__PURE__*/_react.default.createElement(_uiMetric.Metric, {
+      return (0, _emotion.jsx)("div", {
+        css: styles
+      }, (0, _emotion.jsx)(_uiMetric.Metric, {
         renderLabel: renderLabel,
         renderValue: renderValue || this.renderNoValue(),
         isGroupChild: isGroupChild
@@ -79,9 +68,10 @@ var MetricsListItem = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   MetricsListItem.displayName = "MetricsListItem";
   return MetricsListItem;
 }(_react.Component), _class2.propTypes = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _uiMetric.Metric.propTypes), {}, {
-  className: _propTypes.default.string
+  customStyles: _propTypes.default.object,
+  styles: _propTypes.default.object
 }), _class2.defaultProps = {
-  className: ''
+  customStyles: {}
 }, _temp)) || _class);
 exports.MetricsListItem = MetricsListItem;
 var _default = MetricsListItem;

package/lib/reporting/components/MetricsListItem/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle() {
+  return {
+    root: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/reporting/components/MetricsListItem/theme.js

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

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

@@ -2,15 +2,11 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.AnswerFrequencySummary = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -19,11 +15,11 @@ 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 _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 
 var _immutable = require("immutable");
 
@@ -35,7 +31,7 @@ var _uiA11yContent = require("@instructure/ui-a11y-content");
 
 var _uiTable = require("@instructure/ui-table");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
@@ -43,31 +39,15 @@ var _quizInteractions = require("@instructure/quiz-interactions");
 
 var _theme = _interopRequireDefault(require("./theme.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'deQQP',
-  template: function template(theme) {
-    return "\n\n@keyframes deQQP_dFUU{to{opacity:1;transform:translateZ(0)}}\n\n.deQQP_caGd{animation-duration:0.3s;animation-fill-mode:forwards;animation-name:deQQP_dFUU;opacity:0.01;transform:translateZ(0)}\n\n.deQQP_caGd td,.deQQP_caGd th{border-bottom-color:".concat(theme.contentCellBorderColor || 'inherit', ";padding-left:0.35rem;padding-right:0.35rem}\n\n.deQQP_ddmB td,.deQQP_ddmB th{padding-bottom:").concat(theme.answerRowCellPadding || 'inherit', ";padding-top:").concat(theme.answerRowCellPadding || 'inherit', ";white-space:nowrap}\n\n.deQQP_dOeq{background-color:").concat(theme.answerRowCorrectBackgroundColor || 'inherit', "}\n\n.deQQP_dOeq .deQQP_cLIq{color:").concat(theme.answerRowAnswerIconColor || 'inherit', "}\n\n.deQQP_dOeq .deQQP_ccwL,.deQQP_dOeq .deQQP_bFWU{font-weight:").concat(theme.answerRowCorrectTextFieldFontWeight || 'inherit', "}\n\n.deQQP_dOeq .deQQP_fKwc{background:").concat(theme.answerRowCorrectBarBackgroundColor || 'inherit', "}\n\ntd.deQQP_cLIq{color:").concat(theme.answerIconColor || 'inherit', ";font-size:").concat(theme.answerIconFontSize || 'inherit', ";width:1%}\n\nth.deQQP_bFWU{font-weight:").concat(theme.answerTextfieldFontWeight || 'inherit', ";max-width:12rem;overflow:hidden}\n\n.deQQP_fTiR{text-align:right;width:1%}\n\n[dir=ltr] .deQQP_fTiR,[dir=rtl] .deQQP_fTiR{text-align:right}\n\ntd.deQQP_fTiR{color:").concat(theme.respondentLinkColor || 'inherit', "}\n\ntd.deQQP_lHsH{color:").concat(theme.respondentLinkPresentColor || 'inherit', "}\n\n.deQQP_ccwL{text-align:right;width:1%}\n\n[dir=ltr] .deQQP_ccwL,[dir=rtl] .deQQP_ccwL{text-align:right}\n\ntd.deQQP_ccwL{padding-left:").concat(theme.answerRatioPaddingLeft || 'inherit', "}\n\ntd.deQQP_dEZf{border-bottom-color:transparent;height:2.3rem;min-width:7rem;padding:0;width:7rem}\n\n.deQQP_fKwc{background:").concat(theme.barBackgroundColor || 'inherit', ";height:100%;min-width:").concat(theme.barMinWidth || 'inherit', ";position:relative;transition:").concat(theme.barTransition || 'inherit', "}\n\n@media screen and (--phoneBreakPoint){th.deQQP_bFWU{max-width:0}th.deQQP_fTiR{max-width:3rem;overflow:hidden;text-overflow:ellipsis}}");
-  },
-  'content': 'deQQP_caGd',
-  'contentAnimation': 'deQQP_dFUU',
-  'answerRow': 'deQQP_ddmB',
-  'answerRowCorrect': 'deQQP_dOeq',
-  'answerIcon': 'deQQP_cLIq',
-  'answerRatio': 'deQQP_ccwL',
-  'answerTextfield': 'deQQP_bFWU',
-  'bar': 'deQQP_fKwc',
-  'respondentLink': 'deQQP_fTiR',
-  'respondentLinkPresent': 'deQQP_lHsH',
-  'answerDistributionCell': 'deQQP_dEZf'
-};
-
-var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconCheckSolid, null);
-
-var _ref2 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconXSolid, null);
-
-var AnswerFrequencySummary = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var _ref = (0, _emotion.jsx)(_uiIcons.IconCheckSolid, null);
+
+var _ref2 = (0, _emotion.jsx)(_uiIcons.IconXSolid, null);
+
+var AnswerFrequencySummary = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(AnswerFrequencySummary, _Component);
 
   var _super = (0, _createSuper2.default)(AnswerFrequencySummary);
@@ -84,29 +64,16 @@ var AnswerFrequencySummary = (_dec = (0, _uiThemeable.themeable)(_theme.default,
     _this = _super.call.apply(_super, [this].concat(args));
 
     _this.renderAnswerTableRow = function (choiceInfo, choiceIndex) {
-      var _classNames, _classNames2;
-
       var choiceSum = _this.props.itemAnalysis.choiceCountSum();
 
       var choiceBody = _this.renderChoiceBody(choiceInfo);
 
-      var rowClassNames = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, styles.answerRow, true), (0, _defineProperty2.default)(_classNames, styles.answerRowCorrect, _this.isCorrect(choiceInfo)), _classNames));
-      var respondentClassNames = (0, _classnames.default)((_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, styles.respondentLink, true), (0, _defineProperty2.default)(_classNames2, styles.respondentLinkPresent, choiceInfo.get('choiceCount') > 0), _classNames2));
-      return /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, {
-        key: choiceIndex,
-        className: rowClassNames
-      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
-        className: styles.answerIcon
-      }, _this.isCorrect(choiceInfo) ? _ref : _ref2, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, _this.getBarTitle(choiceInfo))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.RowHeader, {
-        className: styles.answerTextfield
-      }, /*#__PURE__*/_react.default.createElement("span", {
+      return (0, _emotion.jsx)(_uiTable.Table.Row, {
+        key: choiceIndex
+      }, (0, _emotion.jsx)(_uiTable.Table.Cell, null, _this.isCorrect(choiceInfo) ? _ref : _ref2, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, _this.getBarTitle(choiceInfo))), (0, _emotion.jsx)(_uiTable.Table.RowHeader, null, (0, _emotion.jsx)("span", {
+        "data-testid": "answer-textfield",
         title: choiceBody
-      }, choiceBody)), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
-        className: respondentClassNames
-      }, _formatMessage.default.number(Math.floor(choiceInfo.get('choiceCount')))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
-        className: styles.answerRatio
-      }, choiceSum > 0 ? _formatMessage.default.number(choiceInfo.get('choiceCount') / choiceSum, 'percent') : 0), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
-        className: styles.answerDistributionCell,
+      }, choiceBody)), (0, _emotion.jsx)(_uiTable.Table.Cell, null, _formatMessage.default.number(Math.floor(choiceInfo.get('choiceCount')))), (0, _emotion.jsx)(_uiTable.Table.Cell, null, choiceSum > 0 ? _formatMessage.default.number(choiceInfo.get('choiceCount') / choiceSum, 'percent') : 0), (0, _emotion.jsx)(_uiTable.Table.Cell, {
         "aria-hidden": "true"
       }, _this.renderBarPlot(choiceInfo)));
     };
@@ -139,8 +106,10 @@ var AnswerFrequencySummary = (_dec = (0, _uiThemeable.themeable)(_theme.default,
   }, {
     key: "renderBarPlot",
     value: function renderBarPlot(choiceInfo) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.bar,
+      var barStyles = this.isCorrect(choiceInfo) ? [this.props.styles.barCorrect, this.props.styles.bar] : [this.props.styles.bar];
+      return (0, _emotion.jsx)("div", {
+        "data-testid": "bar",
+        css: barStyles,
         style: this.getBarStyles(choiceInfo),
         alt: (0, _formatMessage.default)('Graph bar'),
         title: this.getBarTitle(choiceInfo)
@@ -161,28 +130,27 @@ var AnswerFrequencySummary = (_dec = (0, _uiThemeable.themeable)(_theme.default,
         itemBody: (0, _formatMessage.default)('(No answer)'),
         choiceCount: this.props.itemAnalysis.unansweredInfo()
       });
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.content,
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.content,
         "data-automation": "sdk-reporting-frequency-summary"
-      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table, {
+      }, (0, _emotion.jsx)(_uiTable.Table, {
         caption: (0, _formatMessage.default)('Answer Frequency Summary')
-      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Head, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+      }, (0, _emotion.jsx)(_uiTable.Table.Head, null, (0, _emotion.jsx)(_uiTable.Table.Row, null, (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
         id: "answer-frequency-summary-is-correct"
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Is Correct?'))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+      }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Is Correct?'))), (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
         id: "answer-frequency-sumary-answer"
-      }, (0, _formatMessage.default)('Answer')), /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
-        id: "answer-frequency-summary-respondents",
-        className: styles.respondentLink
-      }, (0, _formatMessage.default)('Respondents')), /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
-        id: "answer-frequency-summary-answer-ratio",
-        className: styles.answerRatio
-      }, (0, _formatMessage.default)('Percentage')))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Body, null, choiceInfo.toArray().map(this.renderAnswerTableRow), this.renderAnswerTableRow(this.unansweredChoiceInfo, choiceInfo.size))));
+      }, (0, _formatMessage.default)('Answer')), (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
+        id: "answer-frequency-summary-respondents"
+      }, (0, _formatMessage.default)('Respondents')), (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
+        id: "answer-frequency-summary-answer-ratio"
+      }, (0, _formatMessage.default)('Percentage')))), (0, _emotion.jsx)(_uiTable.Table.Body, null, choiceInfo.toArray().map(this.renderAnswerTableRow), this.renderAnswerTableRow(this.unansweredChoiceInfo, choiceInfo.size))));
     }
   }]);
   AnswerFrequencySummary.displayName = "AnswerFrequencySummary";
   return AnswerFrequencySummary;
 }(_react.Component), _class2.propTypes = {
-  itemAnalysis: _reactImmutableProptypes.default.record.isRequired
+  itemAnalysis: _reactImmutableProptypes.default.record.isRequired,
+  styles: _propTypes.default.object
 }, _temp)) || _class);
 exports.AnswerFrequencySummary = AnswerFrequencySummary;
 var _default = AnswerFrequencySummary;

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

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _emotion = require("@instructure/emotion");
+
+function _templateObject() {
+  var data = (0, _taggedTemplateLiteral2.default)(["\n  to {\n    opacity: 1;\n    transform: translate3d(0, 0, 0);\n  }"]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+
+var contentAnimation = (0, _emotion.keyframes)(_templateObject());
+
+var generateStyle = function generateStyle(componentTheme, props) {
+  var contentCellStyles = {
+    borderBottomColor: componentTheme.contentCellBorderColor,
+    paddingLeft: '0.35rem',
+    paddingRight: '0.35rem'
+  };
+  return {
+    content: {
+      opacity: '0.01',
+      transform: 'translate3d(0, 0, 0)',
+      animationName: contentAnimation,
+      animationFillMode: 'forwards',
+      animationDuration: '0.3s',
+      'th': contentCellStyles,
+      'td': contentCellStyles
+    },
+    bar: {
+      background: componentTheme.barBackgroundColor,
+      transition: componentTheme.barTransition,
+      position: 'relative',
+      minWidth: componentTheme.barMinWidth,
+      height: '100%'
+    },
+    barCorrect: {
+      background: componentTheme.answerRowCorrectBarBackgroundColor
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;