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

package/es/banks/components/BankEntryRow/presenter.js

@@ -22,18 +22,18 @@ import { PresentationContent } from '@instructure/ui-a11y-content';
 import { Alert } from '@instructure/ui-alerts';
 import { withStyle, jsx } from '@instructure/emotion';
 import { BUILD_TRAY_POSITION, COPY_MOVE_BANK_ENTRY_MODAL, SET_EDIT_BUTTON_FOCUS, withI18nSupport } from '@instructure/quiz-common';
-import { RichContentRendererEmotion } from '@instructure/quiz-rce';
+import { RichContentRenderer } from '@instructure/quiz-rce';
 import { extractTextFromHtml } from '@instructure/quiz-interactions';
 import t from '@instructure/quiz-i18n/es/format-message';
 import CopyMoveBankEntryModal from "../CopyMoveBankEntryModal/index.js";
 import ExpandButton from "../../../common/components/shared/ExpandButton/index.js";
 import QuizEntry from "../../../common/records/QuizEntry.js";
-import Overlay from "../../../common/components/shared/overlay/Overlay.js";
 import ItemShow from "../../../common/components/resources/item/ItemShow/index.js";
 import StimulusShowInfo from "../../../common/components/resources/stimulus/StimulusShowInfo/index.js";
 import TagDisplay from "../../../common/components/shared/TagDisplay/index.js";
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
+import Overlay from "../../../common/components/shared/overlay/index.js";
 
 var _ref2 = jsx("div", null);
 
@@ -271,7 +271,7 @@ export var BankEntryRow = (_dec = withStyle(generateStyle, generateComponentThem
       // or title plain text
 
       if (itemOrStimulus.itemBody) {
-        return jsx(RichContentRendererEmotion, {
+        return jsx(RichContentRenderer, {
           customStyles: this.props.styles.stem,
           content: itemOrStimulus.itemBody
         });

package/es/building/components/resources/ItemFeedbackModal/presenter.js

@@ -12,7 +12,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Button, CloseButton } from '@instructure/ui-buttons';
 import { Heading } from '@instructure/ui-heading';
 import { withStyle, jsx } from '@instructure/emotion';
-import { RichContentRendererEmotion, RichContentInput, RCE_THREE_LINES_HEIGHT } from '@instructure/quiz-rce';
+import { RichContentRenderer, RichContentInput, RCE_THREE_LINES_HEIGHT } from '@instructure/quiz-rce';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { Modal, ModalHeader, ModalBody, ModalFooter, ITEM_FEEDBACK_MODAL_FEEDBACK, XSMALL_SIDE_MARGIN } from '@instructure/quiz-common';
 import generateStyle from "./styles.js";
@@ -97,7 +97,7 @@ export var ItemFeedbackModal = (_dec = withStyle(generateStyle, generateComponen
   }, {
     key: "renderContent",
     value: function renderContent() {
-      return jsx("div", null, jsx(RichContentRendererEmotion, {
+      return jsx("div", null, jsx(RichContentRenderer, {
         customStyles: this.props.styles.itemStem,
         content: this.props.item.itemBody
       }), this.renderRichContentInput('correct', t('For a correct answer')), this.renderRichContentInput('incorrect', t('For an incorrect answer')), this.renderRichContentInput('neutral', t('Provide general feedback (regardless of answer)')));

package/es/building/components/resources/quiz/instructions/Show/index.js

@@ -9,8 +9,8 @@ var _dec, _class, _class2, _temp;
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { withStyle, jsx } from '@instructure/emotion';
-import { RichContentRendererEmotion } from '@instructure/quiz-rce';
-import OverlayEmotion from "../../../../../../common/components/shared/overlayEmotion/index.js";
+import { RichContentRenderer } from '@instructure/quiz-rce';
+import Overlay from "../../../../../../common/components/shared/overlay/index.js";
 import makeScrollable from "../../../../../../common/components/shared/functionality/makeScrollable.js";
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
@@ -48,14 +48,14 @@ export var QuizInstructionsShow = (_dec = withStyle(generateStyle, generateCompo
     value: function render() {
       return jsx("span", {
         "data-automation": "sdk-quiz-instructions-show-wrapper"
-      }, jsx(OverlayEmotion, {
+      }, jsx(Overlay, {
         wrapperStyles: this.props.styles.instructionsShowWrapper,
         onClick: this.switchOnEditing,
         tabIndex: "-1",
         hideOverlay: this.props.contentLocked
       }, jsx("div", {
         "data-automation": "instructions-show-text"
-      }, jsx(RichContentRendererEmotion, {
+      }, jsx(RichContentRenderer, {
         customStyles: this.props.styles.instructionsShowText,
         content: this.props.instructions || t('Add Instructions...')
       }))));

package/es/building/components/resources/quiz/title/Show/index.js

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 import { withStyle, jsx } from '@instructure/emotion';
 import { TruncateText } from '@instructure/ui-truncate-text';
 import { Text } from '@instructure/ui-text';
-import OverlayEmotion from "../../../../../../common/components/shared/overlayEmotion/index.js";
+import Overlay from "../../../../../../common/components/shared/overlay/index.js";
 import makeScrollable from "../../../../../../common/components/shared/functionality/makeScrollable.js";
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js"; // ====================================
@@ -49,7 +49,7 @@ export var QuizTitleShow = (_dec = withStyle(generateStyle, generateComponentThe
     value: function render() {
       return jsx("span", {
         "data-automation": "sdk-quiz-title-show-wrapper"
-      }, jsx(OverlayEmotion, {
+      }, jsx(Overlay, {
         wrapperStyles: this.props.styles.titleShowWrapper,
         onClick: this.switchOnEditing,
         tabIndex: "-1",

package/es/building/components/resources/quizEntry/QuizEntryShow/presenter.js

@@ -19,7 +19,7 @@ import { TOP } from '@instructure/quiz-common';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { convertFITBtoRich } from "../../../../../common/util/fitbCopyHelper.js";
 import Item from "../../../../../common/records/Item.js";
-import OverlayEmotion from "../../../../../common/components/shared/overlayEmotion/index.js";
+import Overlay from "../../../../../common/components/shared/overlay/index.js";
 import ActionButtons from "../../ActionButtons/index.js";
 import { ItemTypes, dragSource, collectDrag } from "../../../../../common/components/shared/drag_and_drop/dragAndDropUtils.js";
 import PositionBox from "../../../../../common/components/resources/positionBox/PositionBox.js";
@@ -262,7 +262,7 @@ var QuizEntryShow = (_dec = withStyle(generateStyle, generateComponentTheme), _d
       var shouldLockQuizEntry = lockBlueprintContentEnabled && isContentLockedByBlueprint; // Overlay gets tabIndex === "-1" so that the drag handle is tabbable before
       // the Overlay get focus and opens the quizEntry in edit mode
 
-      return jsx(OverlayEmotion, {
+      return jsx(Overlay, {
         onClick: this.editingOn,
         wrapperStyles: this.props.styles.quizEntryWrapper,
         tabIndex: "-1",

package/es/common/components/resources/quiz/instructions/Instructions.js

@@ -12,7 +12,7 @@ import { Component } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { withStyle, jsx } from '@instructure/emotion';
-import { RichContentRendererEmotion } from '@instructure/quiz-rce';
+import { RichContentRenderer } from '@instructure/quiz-rce';
 import makeScrollable from "../../../shared/functionality/makeScrollable.js"; // ================================
 // renders the quiz instructions on
 // the Preview and Take pages
@@ -38,7 +38,7 @@ export var QuizInstructions = (_dec = withStyle(generateStyle, generateComponent
         "data-testid": "instructionsWrapper",
         css: this.props.styles.wrapper,
         tabIndex: "-1"
-      }, jsx(RichContentRendererEmotion, {
+      }, jsx(RichContentRenderer, {
         customStyles: this.props.styles.text,
         content: this.props.quiz.instructions
       }));

package/es/common/components/resources/sessionItemResult/SessionItemResult/presenter.js

@@ -17,7 +17,7 @@ import { Heading } from '@instructure/ui-heading';
 import { View } from '@instructure/ui-view';
 import { PresentationContent } from '@instructure/ui-a11y-content';
 import { withStyle, jsx } from '@instructure/emotion';
-import { RichContentRendererEmotion } from '@instructure/quiz-rce';
+import { RichContentRenderer } from '@instructure/quiz-rce';
 import t from '@instructure/quiz-i18n/es/format-message';
 import PositionBox from "../../positionBox/PositionBox.js";
 import { COMPONENT_RESULT } from '@instructure/quiz-common';
@@ -184,7 +184,7 @@ export var SessionItemResult = (_dec = withStyle(generateStyle, generateComponen
           margin: "xx-small small"
         }, formattedFeedbackTitle), jsx("div", {
           css: this.props.styles.textPadding
-        }, jsx(RichContentRendererEmotion, {
+        }, jsx(RichContentRenderer, {
           customStyles: this.props.styles.itemFeedbackText,
           content: feedbackContent
         })));
@@ -228,7 +228,7 @@ export var SessionItemResult = (_dec = withStyle(generateStyle, generateComponen
             tabIndex: "0"
           }, jsx("div", {
             css: this.props.styles.itemFeedbackLabel
-          }, t('Feedback from grader')), jsx(RichContentRendererEmotion, {
+          }, t('Feedback from grader')), jsx(RichContentRenderer, {
             customStyles: this.props.styles.itemFeedbackText,
             content: graderFeedback.content
           }));

package/es/common/components/resources/stimulus/StimulusShow/index.js

@@ -18,7 +18,7 @@ import ActionButtons from "../../../../../building/components/resources/ActionBu
 import t from '@instructure/quiz-i18n/es/format-message';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-import OverlayEmotion from "../../../shared/overlayEmotion/index.js";
+import Overlay from "../../../shared/overlay/index.js";
 
 var _ref = jsx(IconBankLine, null);
 
@@ -55,7 +55,7 @@ export var StimulusShow = (_dec = withStyle(generateStyle, generateComponentThem
   }, {
     key: "render",
     value: function render() {
-      return jsx(OverlayEmotion, {
+      return jsx(Overlay, {
         onClick: this.switchOnEditing,
         wrapperStyles: this.props.styles.stimulusWrapper,
         tabIndex: "-1",

package/es/common/components/shared/{overlayEmotion → overlay}/index.js

@@ -22,18 +22,18 @@ import PropTypes from 'prop-types';
 import { withStyle, jsx, Global } from '@instructure/emotion';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-var OverlayEmotion = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
-  _inherits(OverlayEmotion, _Component);
+var Overlay = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  _inherits(Overlay, _Component);
 
-  var _super = _createSuper(OverlayEmotion);
+  var _super = _createSuper(Overlay);
 
-  function OverlayEmotion() {
-    _classCallCheck(this, OverlayEmotion);
+  function Overlay() {
+    _classCallCheck(this, Overlay);
 
     return _super.apply(this, arguments);
   }
 
-  _createClass(OverlayEmotion, [{
+  _createClass(Overlay, [{
     key: "overlayDiv",
     value: function overlayDiv() {
       if (this.props.hideOverlay) {
@@ -71,8 +71,8 @@ var OverlayEmotion = (_dec = withStyle(generateStyle, generateComponentTheme), _
     }
   }]);
 
-  OverlayEmotion.displayName = "OverlayEmotion";
-  return OverlayEmotion;
+  Overlay.displayName = "Overlay";
+  return Overlay;
 }(Component), _class2.propTypes = {
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired,
   hideOverlay: PropTypes.bool,
@@ -87,4 +87,4 @@ var OverlayEmotion = (_dec = withStyle(generateStyle, generateComponentTheme), _
   wrapperStyles: {},
   ariaLabel: void 0
 }, _temp)) || _class);
-export default OverlayEmotion;
+export default Overlay;

package/{lib/common/components/shared/overlayEmotion → es/common/components/shared/overlay}/styles.js

@@ -1,11 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
 var generateStyle = function generateStyle(componentTheme) {
+  var printMq = '@media print';
   return {
     root: {
       position: 'relative',
@@ -19,13 +15,14 @@ var generateStyle = function generateStyle(componentTheme) {
       zIndex: componentTheme.overlayZIndex,
       height: '100%',
       width: '100%',
-      '&:hover': {
+      '&:hover': _defineProperty({
         boxSizing: 'border-box',
         borderLeft: "".concat(componentTheme.overlayBarSize, " solid ").concat(componentTheme.overlayBarColor)
-      }
+      }, printMq, {
+        borderLeft: 'none'
+      })
     }
   };
 };
 
-var _default = generateStyle;
-exports.default = _default;
+export default generateStyle;

package/es/common/components/shared/overlay/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
       borders = _ref.borders,
       spacing = _ref.spacing;
@@ -7,4 +7,6 @@ export default function generator(_ref) {
     overlayBarColor: colors.electric,
     overlayBarSize: '0.3rem'
   };
-}
+};
+
+export default generateComponentTheme;

package/es/reporting/components/MetricsListItem/index.js

@@ -6,22 +6,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 PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { Metric } from '@instructure/ui-metric';
 import { ScreenReaderContent, PresentationContent } from '@instructure/ui-a11y-content';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
-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'
-};
-import theme from "./theme.js";
-export var MetricsListItem = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+export var MetricsListItem = (_dec = withStyle(generateStyle, null), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(MetricsListItem, _Component);
 
   var _super = _createSuper(MetricsListItem);
@@ -35,19 +28,19 @@ export var MetricsListItem = (_dec = themeable(theme, styles), _dec(_class = (_t
   _createClass(MetricsListItem, [{
     key: "renderNoValue",
     value: function renderNoValue() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('No value')), /*#__PURE__*/React.createElement(PresentationContent, null, t('--')));
+      return jsx("span", null, jsx(ScreenReaderContent, null, t('No value')), jsx(PresentationContent, null, t('--')));
     }
   }, {
     key: "render",
     value: function render() {
-      var names = classNames(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.createElement("div", {
-        className: names
-      }, /*#__PURE__*/React.createElement(Metric, {
+      return jsx("div", {
+        css: styles
+      }, jsx(Metric, {
         renderLabel: renderLabel,
         renderValue: renderValue || this.renderNoValue(),
         isGroupChild: isGroupChild
@@ -58,8 +51,9 @@ export var MetricsListItem = (_dec = themeable(theme, styles), _dec(_class = (_t
   MetricsListItem.displayName = "MetricsListItem";
   return MetricsListItem;
 }(Component), _class2.propTypes = _objectSpread(_objectSpread({}, Metric.propTypes), {}, {
-  className: PropTypes.string
+  customStyles: PropTypes.object,
+  styles: PropTypes.object
 }), _class2.defaultProps = {
-  className: ''
+  customStyles: {}
 }, _temp)) || _class);
 export default MetricsListItem;

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

@@ -0,0 +1,12 @@
+var generateStyle = function generateStyle() {
+  return {
+    root: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  };
+};
+
+export default generateStyle;

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

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

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

@@ -1,4 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
@@ -6,41 +5,26 @@ 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 classNames from 'classnames';
 import { fromJS } from 'immutable';
 import { scaleLinear } from 'd3-scale';
 import { IconXSolid, IconCheckSolid } from '@instructure/ui-icons';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { Table } from '@instructure/ui-table';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { extractTextFromHtml } from '@instructure/quiz-interactions';
-import theme from "./theme.js";
-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.createElement(IconCheckSolid, null);
-
-var _ref2 = /*#__PURE__*/React.createElement(IconXSolid, null);
-
-export var AnswerFrequencySummary = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateComponentTheme from "./theme.js";
+import generateStyle from "./styles.js";
+
+var _ref = jsx(IconCheckSolid, null);
+
+var _ref2 = jsx(IconXSolid, null);
+
+export var AnswerFrequencySummary = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(AnswerFrequencySummary, _Component);
 
   var _super = _createSuper(AnswerFrequencySummary);
@@ -57,29 +41,16 @@ export var AnswerFrequencySummary = (_dec = themeable(theme, styles), _dec(_clas
     _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 = classNames((_classNames = {}, _defineProperty(_classNames, styles.answerRow, true), _defineProperty(_classNames, styles.answerRowCorrect, _this.isCorrect(choiceInfo)), _classNames));
-      var respondentClassNames = classNames((_classNames2 = {}, _defineProperty(_classNames2, styles.respondentLink, true), _defineProperty(_classNames2, styles.respondentLinkPresent, choiceInfo.get('choiceCount') > 0), _classNames2));
-      return /*#__PURE__*/React.createElement(Table.Row, {
-        key: choiceIndex,
-        className: rowClassNames
-      }, /*#__PURE__*/React.createElement(Table.Cell, {
-        className: styles.answerIcon
-      }, _this.isCorrect(choiceInfo) ? _ref : _ref2, /*#__PURE__*/React.createElement(ScreenReaderContent, null, _this.getBarTitle(choiceInfo))), /*#__PURE__*/React.createElement(Table.RowHeader, {
-        className: styles.answerTextfield
-      }, /*#__PURE__*/React.createElement("span", {
+      return jsx(Table.Row, {
+        key: choiceIndex
+      }, jsx(Table.Cell, null, _this.isCorrect(choiceInfo) ? _ref : _ref2, jsx(ScreenReaderContent, null, _this.getBarTitle(choiceInfo))), jsx(Table.RowHeader, null, jsx("span", {
+        "data-testid": "answer-textfield",
         title: choiceBody
-      }, choiceBody)), /*#__PURE__*/React.createElement(Table.Cell, {
-        className: respondentClassNames
-      }, t.number(Math.floor(choiceInfo.get('choiceCount')))), /*#__PURE__*/React.createElement(Table.Cell, {
-        className: styles.answerRatio
-      }, choiceSum > 0 ? t.number(choiceInfo.get('choiceCount') / choiceSum, 'percent') : 0), /*#__PURE__*/React.createElement(Table.Cell, {
-        className: styles.answerDistributionCell,
+      }, choiceBody)), jsx(Table.Cell, null, t.number(Math.floor(choiceInfo.get('choiceCount')))), jsx(Table.Cell, null, choiceSum > 0 ? t.number(choiceInfo.get('choiceCount') / choiceSum, 'percent') : 0), jsx(Table.Cell, {
         "aria-hidden": "true"
       }, _this.renderBarPlot(choiceInfo)));
     };
@@ -112,8 +83,10 @@ export var AnswerFrequencySummary = (_dec = themeable(theme, styles), _dec(_clas
   }, {
     key: "renderBarPlot",
     value: function renderBarPlot(choiceInfo) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.bar,
+      var barStyles = this.isCorrect(choiceInfo) ? [this.props.styles.barCorrect, this.props.styles.bar] : [this.props.styles.bar];
+      return jsx("div", {
+        "data-testid": "bar",
+        css: barStyles,
         style: this.getBarStyles(choiceInfo),
         alt: t('Graph bar'),
         title: this.getBarTitle(choiceInfo)
@@ -134,28 +107,27 @@ export var AnswerFrequencySummary = (_dec = themeable(theme, styles), _dec(_clas
         itemBody: t('(No answer)'),
         choiceCount: this.props.itemAnalysis.unansweredInfo()
       });
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.content,
+      return jsx("div", {
+        css: this.props.styles.content,
         "data-automation": "sdk-reporting-frequency-summary"
-      }, /*#__PURE__*/React.createElement(Table, {
+      }, jsx(Table, {
         caption: t('Answer Frequency Summary')
-      }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.ColHeader, {
+      }, jsx(Table.Head, null, jsx(Table.Row, null, jsx(Table.ColHeader, {
         id: "answer-frequency-summary-is-correct"
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Is Correct?'))), /*#__PURE__*/React.createElement(Table.ColHeader, {
+      }, jsx(ScreenReaderContent, null, t('Is Correct?'))), jsx(Table.ColHeader, {
         id: "answer-frequency-sumary-answer"
-      }, t('Answer')), /*#__PURE__*/React.createElement(Table.ColHeader, {
-        id: "answer-frequency-summary-respondents",
-        className: styles.respondentLink
-      }, t('Respondents')), /*#__PURE__*/React.createElement(Table.ColHeader, {
-        id: "answer-frequency-summary-answer-ratio",
-        className: styles.answerRatio
-      }, t('Percentage')))), /*#__PURE__*/React.createElement(Table.Body, null, choiceInfo.toArray().map(this.renderAnswerTableRow), this.renderAnswerTableRow(this.unansweredChoiceInfo, choiceInfo.size))));
+      }, t('Answer')), jsx(Table.ColHeader, {
+        id: "answer-frequency-summary-respondents"
+      }, t('Respondents')), jsx(Table.ColHeader, {
+        id: "answer-frequency-summary-answer-ratio"
+      }, t('Percentage')))), jsx(Table.Body, null, choiceInfo.toArray().map(this.renderAnswerTableRow), this.renderAnswerTableRow(this.unansweredChoiceInfo, choiceInfo.size))));
     }
   }]);
 
   AnswerFrequencySummary.displayName = "AnswerFrequencySummary";
   return AnswerFrequencySummary;
 }(Component), _class2.propTypes = {
-  itemAnalysis: ImmutablePropTypes.record.isRequired
+  itemAnalysis: ImmutablePropTypes.record.isRequired,
+  styles: PropTypes.object
 }, _temp)) || _class);
 export default AnswerFrequencySummary;

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

@@ -0,0 +1,45 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+
+function _templateObject() {
+  var data = _taggedTemplateLiteral(["\n  to {\n    opacity: 1;\n    transform: translate3d(0, 0, 0);\n  }"]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+
+import { keyframes } from '@instructure/emotion';
+var contentAnimation = 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
+    }
+  };
+};
+
+export default generateStyle;

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

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var breakpoints = _ref.breakpoints,
       colors = _ref.colors,
       spacing = _ref.spacing,
@@ -23,4 +23,6 @@ export default function generator(_ref) {
     phoneBreakPoint: "max-width: ".concat(breakpoints.medium),
     barTransition: "width ".concat(transitions.duration)
   };
-}
+};
+
+export default generateComponentTheme;

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

@@ -128,25 +128,25 @@ export var ItemAnalysisRow = (_dec = withStyle(generateStyle, generateComponentT
         key: "difficultyIndex",
         renderLabel: t('Difficulty Index'),
         renderValue: this.props.itemAnalysis.difficultyIndex(this.locale),
-        css: this.props.styles.metric,
+        customStyles: this.props.styles.metric,
         isGroupChild: true
       }), jsx(MetricsListItem, {
         key: "discriminationIndex",
         renderLabel: t('Discrimination Index'),
         renderValue: this.props.itemAnalysis.discriminationIndex(this.locale),
-        css: this.props.styles.metric,
+        customStyles: this.props.styles.metric,
         isGroupChild: true
       }), jsx(MetricsListItem, {
         key: "rpb",
         renderLabel: t('RPB'),
         renderValue: this.props.itemAnalysis.pointBiserial(this.locale),
-        css: this.props.styles.metric,
+        customStyles: this.props.styles.metric,
         isGroupChild: true
       }), jsx(MetricsListItem, {
         key: "meanEarnedScore",
         renderLabel: t('Mean Earned Score'),
         renderValue: mean,
-        css: this.props.styles.metric,
+        customStyles: this.props.styles.metric,
         isGroupChild: true
       }));
     }