@instructure/quiz-core 20.11.2 → 20.11.3-rc.10

package/es/common/components/layout/navbar/presenter.js

@@ -3,18 +3,25 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import React, { Component } from 'react';
+
+var _dec, _class, _class2, _temp;
+
+/** @jsx jsx */
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { TopNavBar } from '@instructure/ui-top-nav-bar';
 import { IconQuizLine } from '@instructure/ui-icons';
 import t from '@instructure/quiz-i18n/es/format-message';
+import { withStyle, jsx } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 
-var _ref = /*#__PURE__*/React.createElement(IconQuizLine, {
+var _ref = jsx(IconQuizLine, {
   color: "primary",
   size: "small"
 });
 
-export var NavBar = /*#__PURE__*/function (_Component) {
+export var NavBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(NavBar, _Component);
 
   var _super = _createSuper(NavBar);
@@ -50,15 +57,15 @@ export var NavBar = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this2 = this;
 
-      return /*#__PURE__*/React.createElement(TopNavBar, {
-        breakpoint: "48em",
+      return jsx(TopNavBar, {
+        breakpoint: this.props.styles.phoneBreakPoint,
         mediaQueryMatch: "element",
         inverseColor: true
       }, function () {
-        return /*#__PURE__*/React.createElement(TopNavBar.Layout, {
+        return jsx(TopNavBar.Layout, {
           themeOverride: {
-            desktopBackgroundInverse: '#f5f5f5',
-            smallViewportBackgroundInverse: '#f5f5f5'
+            desktopBackgroundInverse: _this2.props.styles.backgroundColor,
+            smallViewportBackgroundInverse: _this2.props.styles.backgroundColor
           },
           navLabel: t('Quizzes navigation bar'),
           desktopConfig: {
@@ -68,16 +75,16 @@ export var NavBar = /*#__PURE__*/function (_Component) {
             dropdownMenuToggleButtonLabel: t('Toggle Menu'),
             dropdownMenuLabel: t('Main Menu')
           },
-          renderBrand: /*#__PURE__*/React.createElement(TopNavBar.Brand, {
+          renderBrand: jsx(TopNavBar.Brand, {
             screenReaderLabel: t('Quizzes'),
             renderIcon: _ref
           }),
-          renderMenuItems: /*#__PURE__*/React.createElement(TopNavBar.MenuItems, {
+          renderMenuItems: jsx(TopNavBar.MenuItems, {
             listLabel: t('Page navigation'),
             currentPageId: window.location.pathname,
             renderHiddenItemsMenuTriggerLabel: _this2.hiddenMenuItemsMenuTriggerLabel
           }, _this2.props.menuItems.map(function (menuItem) {
-            return /*#__PURE__*/React.createElement(TopNavBar.Item, {
+            return jsx(TopNavBar.Item, {
               id: menuItem.path,
               key: menuItem.path,
               onClick: function onClick() {
@@ -86,7 +93,7 @@ export var NavBar = /*#__PURE__*/function (_Component) {
 
             }, menuItem.text);
           })),
-          renderActionItems: /*#__PURE__*/React.createElement(TopNavBar.ActionItems, {
+          renderActionItems: jsx(TopNavBar.ActionItems, {
             listLabel: t('Actions'),
             renderHiddenItemsMenuTriggerLabel: _this2.hiddenActionItemsMenuTriggerLabel
           }, _toConsumableArray(_this2.props.actionItems))
@@ -97,18 +104,17 @@ export var NavBar = /*#__PURE__*/function (_Component) {
 
   NavBar.displayName = "NavBar";
   return NavBar;
-}(Component);
-NavBar.propTypes = {
+}(Component), _class2.propTypes = {
   menuItems: PropTypes.arrayOf(PropTypes.shape({
     path: PropTypes.string.isRequired,
     text: PropTypes.string.isRequired
   })),
   handleMenuItemChange: PropTypes.func,
-  actionItems: PropTypes.arrayOf(PropTypes.node)
-};
-NavBar.defaultProps = {
+  actionItems: PropTypes.arrayOf(PropTypes.node),
+  styles: PropTypes.object
+}, _class2.defaultProps = {
   menuItems: [],
   handleMenuItemChange: function handleMenuItemChange() {},
   actionItems: []
-};
+}, _temp)) || _class);
 export default NavBar;

package/es/common/components/layout/navbar/styles.js

@@ -0,0 +1,8 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    backgroundColor: componentTheme.backgroundColor,
+    phoneBreakPoint: componentTheme.phoneBreakPoint
+  };
+};
+
+export default generateStyle;

package/es/common/components/layout/navbar/theme.js

@@ -0,0 +1,10 @@
+var generateComponentTheme = function generateComponentTheme(_ref) {
+  var breakpoints = _ref.breakpoints,
+      colors = _ref.colors;
+  return {
+    backgroundColor: colors.porcelain,
+    phoneBreakPoint: breakpoints.medium
+  };
+};
+
+export default generateComponentTheme;

package/es/moderating/components/resources/ModerateTable/presenter.js

@@ -1,4 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
@@ -8,10 +7,10 @@ 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 { Text } from '@instructure/ui-text';
 import { Link } from '@instructure/ui-link';
 import { Flex } from '@instructure/ui-flex';
@@ -19,37 +18,28 @@ import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { Table } from '@instructure/ui-table';
 import { IconButton } from '@instructure/ui-buttons';
 import { IconInfoLine, IconConfigureLine } from '@instructure/ui-icons';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import ModerateTableRow from "../ModerateTableRow/index.js";
 import IfFeature from "../../../../common/components/shared/IfFeature/index.js";
 import OutstandingQuizzesModal from "../OutstandingQuizzesModal/index.js";
 import ModerateTray from "../../sidebar/ModerateTray/index.js";
 import Spinner from "../../../../common/components/shared/spinner/Spinner.js";
-var styles = {
-  componentId: 'eDRzW',
-  template: function template(theme) {
-    return "\n\n.eDRzW_bwKH{display:block;margin:".concat(theme.emptyTextMargin || 'inherit', " 0 0 0}\n\n.eDRzW_xNcP{background-color:").concat(theme.pageBackgroundColor || 'inherit', ";flex:1;overflow:auto}\n\n.eDRzW_eeML{display:inline-block;transition:transform 0.3s}\n\n.eDRzW_XujX{transform:scaleX(-1)}");
-  },
-  'emptyText': 'eDRzW_bwKH',
-  'page': 'eDRzW_xNcP',
-  'scoreToggleWrapper': 'eDRzW_eeML',
-  'mirror': 'eDRzW_XujX'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 import ResetQuiz from "../../sidebar/ResetQuiz/index.js";
 import { OUTSTANDING_QUIZZES_MODAL } from '@instructure/quiz-common';
 import { chunk } from 'lodash';
 
-var _ref2 = /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(IconInfoLine, null));
+var _ref2 = jsx(Flex.Item, null, jsx(IconInfoLine, null));
 
-var _ref4 = /*#__PURE__*/React.createElement(IconConfigureLine, null);
+var _ref4 = jsx(IconConfigureLine, null);
 
-var _ref5 = /*#__PURE__*/React.createElement(Spinner, null);
+var _ref5 = jsx(Spinner, null);
 
-var _ref6 = /*#__PURE__*/React.createElement(ResetQuiz, null);
+var _ref6 = jsx(ResetQuiz, null);
 
-export var ModerateTable = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var ModerateTable = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(ModerateTable, _Component);
 
   var _super = _createSuper(ModerateTable);
@@ -180,6 +170,9 @@ export var ModerateTable = (_dec = themeable(theme, styles), _dec(_class = (_tem
   _createClass(ModerateTable, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      this.props.makeStyles({
+        displayScoreAsPercentage: this.state.displayScoreAsPercentage
+      });
       this.fetchData();
       var _this$props2 = this.props,
           hasSessionTimeLimit = _this$props2.hasSessionTimeLimit,
@@ -192,6 +185,9 @@ export var ModerateTable = (_dec = themeable(theme, styles), _dec(_class = (_tem
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
+      this.props.makeStyles({
+        displayScoreAsPercentage: this.state.displayScoreAsPercentage
+      });
       var _this$props3 = this.props,
           hasSessionTimeLimit = _this$props3.hasSessionTimeLimit,
           sessionTimeLimitInSeconds = _this$props3.sessionTimeLimitInSeconds;
@@ -241,7 +237,7 @@ export var ModerateTable = (_dec = themeable(theme, styles), _dec(_class = (_tem
           shouldRenderModerateButton = _this$props4.shouldRenderModerateButton;
       return this.props.tableData.map(function (rowData) {
         var id = rowData.id;
-        return /*#__PURE__*/React.createElement(ModerateTableRow, {
+        return jsx(ModerateTableRow, {
           anonymousGrading: _this2.props.anonymousGrading,
           onResultsLinkClick: onResultsLinkClick,
           onAccommodationsClick: _this2.props.onAccommodationsClick,
@@ -289,23 +285,23 @@ export var ModerateTable = (_dec = themeable(theme, styles), _dec(_class = (_tem
     value: function renderAlertContent(outstandingAttemptsCount) {
       var _this3 = this;
 
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IfFeature, {
+      return jsx("div", null, jsx(IfFeature, {
         name: "manual_submission"
-      }, /*#__PURE__*/React.createElement(Flex, null, _ref2, /*#__PURE__*/React.createElement(Flex.Item, {
+      }, jsx(Flex, null, _ref2, jsx(Flex.Item, {
         padding: "xx-small"
       }, t.rich('This assessment has <0>{count, plural, one {# attempt} other {# attempts}}</0> in progress.', {
         count: outstandingAttemptsCount,
         0: function _(_ref3) {
           var children = _ref3.children;
-          return /*#__PURE__*/React.createElement(Link, {
+          return jsx(Link, {
             key: "0",
             onClick: _this3.openModalOnClick,
             "data-automation": "sdk-outstanding-quizzes-modal-open"
           }, children);
         }
-      })))), /*#__PURE__*/React.createElement(IfFeature, {
+      })))), jsx(IfFeature, {
         name: "manual_submission"
-      }, /*#__PURE__*/React.createElement(OutstandingQuizzesModal, {
+      }, jsx(OutstandingQuizzesModal, {
         quizSessionsData: this.props.quizSessionsData,
         quizSessionIdsAndUsers: this.props.quizSessionIdsAndUsers,
         handleSubmissionAndPoll: this.handleSubmissionAndPoll,
@@ -315,9 +311,9 @@ export var ModerateTable = (_dec = themeable(theme, styles), _dec(_class = (_tem
   }, {
     key: "renderScoreToggle",
     value: function renderScoreToggle() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: classNames(styles.scoreToggleWrapper, _defineProperty({}, styles.mirror, !this.state.displayScoreAsPercentage))
-      }, /*#__PURE__*/React.createElement(IconButton, {
+      return jsx("div", {
+        css: this.props.styles.scoreToggleWrapper
+      }, jsx(IconButton, {
         size: "small",
         margin: "0 x-small",
         withBackground: false,
@@ -330,28 +326,28 @@ export var ModerateTable = (_dec = themeable(theme, styles), _dec(_class = (_tem
     key: "renderTable",
     value: function renderTable() {
       var outstandingAttemptsCount = this.countOutstandingAttempts();
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         className: "fs-mask"
-      }, outstandingAttemptsCount ? this.renderAlertContent(outstandingAttemptsCount) : null, /*#__PURE__*/React.createElement(Table, {
+      }, outstandingAttemptsCount ? this.renderAlertContent(outstandingAttemptsCount) : null, jsx(Table, {
         caption: t('Moderation Table')
-      }, /*#__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: "moderation-table-student"
-      }, t('Student')), !this.props.anonymousGrading && /*#__PURE__*/React.createElement(Table.ColHeader, {
+      }, t('Student')), !this.props.anonymousGrading && jsx(Table.ColHeader, {
         id: "moderation-table-attempts"
-      }, t('Attempts')), !this.props.anonymousGrading && /*#__PURE__*/React.createElement(Table.ColHeader, {
+      }, t('Attempts')), !this.props.anonymousGrading && jsx(Table.ColHeader, {
         id: "moderation-table-score"
-      }, t('Score'), this.renderScoreToggle()), !this.props.anonymousGrading && /*#__PURE__*/React.createElement(Table.ColHeader, {
+      }, t('Score'), this.renderScoreToggle()), !this.props.anonymousGrading && jsx(Table.ColHeader, {
         id: "moderation-table-time"
-      }, t('Time')), !this.props.anonymousGrading && /*#__PURE__*/React.createElement(Table.ColHeader, {
+      }, t('Time')), !this.props.anonymousGrading && jsx(Table.ColHeader, {
         id: "moderation-table-log"
-      }, t('Log')), this.props.onAccommodationsClick && !this.props.anonymousGrading && /*#__PURE__*/React.createElement(Table.ColHeader, {
+      }, t('Log')), this.props.onAccommodationsClick && !this.props.anonymousGrading && jsx(Table.ColHeader, {
         id: "moderation-table-accommodations"
       }, t({
         default: 'Accommodations',
         description: 'Support for students with who need extra time or attempts.'
-      })), this.props.shouldRenderModerateButton && /*#__PURE__*/React.createElement(Table.ColHeader, {
+      })), this.props.shouldRenderModerateButton && jsx(Table.ColHeader, {
         id: "moderation-table-moderate"
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Moderate'))))), /*#__PURE__*/React.createElement(Table.Body, null, this.renderTableRows())));
+      }, jsx(ScreenReaderContent, null, t('Moderate'))))), jsx(Table.Body, null, this.renderTableRows())));
     }
   }, {
     key: "renderContent",
@@ -362,18 +358,18 @@ export var ModerateTable = (_dec = themeable(theme, styles), _dec(_class = (_tem
           emptyMessage = _this$props5.emptyMessage;
       if (isFetching || this.state.isWaiting) return _ref5;
       if (tableData.length) return this.renderTable();
-      return /*#__PURE__*/React.createElement("span", {
-        className: styles.emptyText
-      }, /*#__PURE__*/React.createElement(Text, {
+      return jsx("span", {
+        css: this.props.styles.emptyText
+      }, jsx(Text, {
         color: "primary"
       }, emptyMessage));
     }
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.page
-      }, /*#__PURE__*/React.createElement(ModerateTray, {
+      return jsx("div", {
+        css: this.props.styles.page
+      }, jsx(ModerateTray, {
         onClose: this.onCloseTray
       }, !this.props.anonymousGrading && _ref6, this.props.children), this.renderContent());
     }
@@ -427,7 +423,9 @@ export var ModerateTable = (_dec = themeable(theme, styles), _dec(_class = (_tem
   })).isRequired,
   quizId: PropTypes.string.isRequired,
   getQuizSessions: PropTypes.func.isRequired,
-  addSuccess: PropTypes.func.isRequired
+  addSuccess: PropTypes.func.isRequired,
+  styles: PropTypes.object,
+  makeStyles: PropTypes.func
 }, _class2.defaultProps = {
   anonymousGrading: false,
   children: void 0,

package/es/moderating/components/resources/ModerateTable/styles.js

@@ -0,0 +1,23 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+
+var generateStyle = function generateStyle(componentTheme, props, state) {
+  return {
+    emptyText: {
+      display: 'block',
+      margin: "".concat(componentTheme.emptyTextMargin, " 0 0 0")
+    },
+    page: {
+      overflow: 'auto',
+      flex: '1',
+      backgroundColor: componentTheme.pageBackgroundColor
+    },
+    scoreToggleWrapper: _objectSpread({
+      display: 'inline-block',
+      transition: 'transform 0.3s'
+    }, !state.displayScoreAsPercentage && {
+      transform: 'scaleX(-1)'
+    })
+  };
+};
+
+export default generateStyle;

package/es/moderating/components/resources/ModerateTable/theme.js

@@ -1,8 +1,10 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       colors = _ref.colors;
   return {
     emptyTextMargin: spacing.small,
     pageBackgroundColor: colors.white
   };
-}
+};
+
+export default generateComponentTheme;

package/es/moderating/components/resources/ModerateTableRow/presenter.js

@@ -5,8 +5,10 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
+
 /* eslint "array-callback-return": "warn" */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { AccessibleContent, PresentationContent } from '@instructure/ui-a11y-content';
@@ -19,24 +21,14 @@ import { Flex } from '@instructure/ui-flex';
 import { Table } from '@instructure/ui-table';
 import { IconEditLine, IconWarningLine } from '@instructure/ui-icons';
 import { Button, IconButton } from '@instructure/ui-buttons';
-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 FormattedDuration from "../../../../common/components/shared/FormattedDuration/index.js";
-var styles = {
-  componentId: 'FXOGU',
-  template: function template(theme) {
-    return "\n\n.FXOGU_ffXX,[dir=ltr] .FXOGU_ffXX,[dir=rtl] .FXOGU_ffXX{float:right}\n\n.FXOGU_clcl{max-width:15rem}\n\n.FXOGU_ecVa{align-items:center;display:flex}\n\n.FXOGU_eTxg{font-weight:400;margin-left:".concat(theme.avatarNameMargin || 'inherit', ";overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n\n.FXOGU_cCBI:not(:first-child){padding-top:").concat(theme.tableDataItemPadding || 'inherit', "}");
-  },
-  'moderateButton': 'FXOGU_ffXX',
-  'tableData': 'FXOGU_clcl',
-  'avatarRow': 'FXOGU_ecVa',
-  'avatarName': 'FXOGU_eTxg',
-  'tableDataItem': 'FXOGU_cCBI'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 var DASHES = '---';
-export var ModerateTableRow = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_withI18nSupport) {
+export var ModerateTableRow = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_withI18nSupport) {
   _inherits(ModerateTableRow, _withI18nSupport);
 
   var _super = _createSuper(ModerateTableRow);
@@ -68,19 +60,19 @@ export var ModerateTableRow = (_dec = themeable(theme, styles), _dec(_class = (_
       var iconTitle = t('Autograde error on attempt { attemptNumber }.', {
         attemptNumber: attemptNumber
       });
-      var link = autogradefailed ? /*#__PURE__*/React.createElement(Link, {
+      var link = autogradefailed ? jsx(Link, {
         onClick: _this.onResultsLinkClick(quizSessionId),
-        icon: /*#__PURE__*/React.createElement(IconWarningLine, {
+        icon: jsx(IconWarningLine, {
           color: "warning",
           title: iconTitle
         }),
         iconPlacement: "end"
-      }, message) : /*#__PURE__*/React.createElement(Link, {
+      }, message) : jsx(Link, {
         onClick: _this.onResultsLinkClick(quizSessionId)
       }, message);
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         key: quizSessionId,
-        className: styles.tableDataItem
+        css: _this.props.styles.tableDataItem
       }, link);
     };
 
@@ -88,14 +80,14 @@ export var ModerateTableRow = (_dec = themeable(theme, styles), _dec(_class = (_
       var iconTitle = t('Autograde error on attempt { attemptNumber }.', {
         attemptNumber: attemptNumber
       });
-      var icon = autogradefailed ? /*#__PURE__*/React.createElement(IconWarningLine, {
+      var icon = autogradefailed ? jsx(IconWarningLine, {
         color: "warning",
         title: iconTitle
       }) : null;
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         key: quizSessionId,
-        className: styles.tableDataItem
-      }, /*#__PURE__*/React.createElement(View, {
+        css: _this.props.styles.tableDataItem
+      }, jsx(View, {
         margin: "0 x-small 0 0"
       }, message), icon);
     };
@@ -127,9 +119,9 @@ export var ModerateTableRow = (_dec = themeable(theme, styles), _dec(_class = (_
     value: function renderScores(quizSessions) {
       var _this3 = this;
 
-      var noScore = /*#__PURE__*/React.createElement("div", {
-        className: styles.tableDataItem
-      }, /*#__PURE__*/React.createElement(AccessibleContent, {
+      var noScore = jsx("div", {
+        css: this.props.styles.tableDataItem
+      }, jsx(AccessibleContent, {
         alt: t('No Score')
       }, DASHES));
       if (!quizSessions.length) return noScore;
@@ -157,14 +149,14 @@ export var ModerateTableRow = (_dec = themeable(theme, styles), _dec(_class = (_
 
         if (quizSession.inProgress() || quizSession.reopeningGraded()) {
           var alt = t('In progress, score not available');
-          message = /*#__PURE__*/React.createElement(AccessibleContent, {
+          message = jsx(AccessibleContent, {
             alt: alt
           }, DASHES);
         }
 
-        renderedScores.push( /*#__PURE__*/React.createElement("div", {
+        renderedScores.push(jsx("div", {
           key: result.get('id'),
-          className: styles.tableDataItem
+          css: _this3.props.styles.tableDataItem
         }, message));
         return renderedScores;
       }, []);
@@ -195,9 +187,9 @@ export var ModerateTableRow = (_dec = themeable(theme, styles), _dec(_class = (_
       var maxAttempts = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : quizSessions.length;
 
       if (!quizSessions.length) {
-        return /*#__PURE__*/React.createElement("div", {
-          className: styles.tableDataItem
-        }, /*#__PURE__*/React.createElement(AccessibleContent, {
+        return jsx("div", {
+          css: this.props.styles.tableDataItem
+        }, jsx(AccessibleContent, {
           alt: t('No Attempt')
         }, DASHES));
       }
@@ -218,39 +210,43 @@ export var ModerateTableRow = (_dec = themeable(theme, styles), _dec(_class = (_
   }, {
     key: "renderTimes",
     value: function renderTimes(quizSessions) {
+      var _this5 = this;
+
       if (!quizSessions.length) {
-        return /*#__PURE__*/React.createElement("div", {
-          className: styles.tableDataItem
-        }, /*#__PURE__*/React.createElement(AccessibleContent, {
+        return jsx("div", {
+          css: this.props.styles.tableDataItem
+        }, jsx(AccessibleContent, {
           alt: t('No Time')
         }, DASHES));
       }
 
       return quizSessions.map(function (quizSession, idx) {
-        var message = /*#__PURE__*/React.createElement(FormattedDuration, {
+        var message = jsx(FormattedDuration, {
           seconds: quizSession.elapsedTime
         });
 
         if (quizSession.inProgress() || quizSession.reopeningGraded()) {
           var alt = t('In progress, time not available');
-          message = /*#__PURE__*/React.createElement(AccessibleContent, {
+          message = jsx(AccessibleContent, {
             alt: alt
           }, DASHES);
         }
 
-        return /*#__PURE__*/React.createElement("div", {
+        return jsx("div", {
           key: quizSession.get('id'),
-          className: styles.tableDataItem
+          css: _this5.props.styles.tableDataItem
         }, message);
       });
     }
   }, {
     key: "renderLogLinks",
     value: function renderLogLinks(quizSessions) {
+      var _this6 = this;
+
       if (!quizSessions.length) {
-        return /*#__PURE__*/React.createElement("div", {
-          className: styles.tableDataItem
-        }, /*#__PURE__*/React.createElement(AccessibleContent, {
+        return jsx("div", {
+          css: this.props.styles.tableDataItem
+        }, jsx(AccessibleContent, {
           alt: t('No Log')
         }, DASHES));
       }
@@ -270,10 +266,10 @@ export var ModerateTableRow = (_dec = themeable(theme, styles), _dec(_class = (_
           });
         }
 
-        return /*#__PURE__*/React.createElement("div", {
+        return jsx("div", {
           key: quizSessionId,
-          className: styles.tableDataItem
-        }, /*#__PURE__*/React.createElement(Link, {
+          css: _this6.props.styles.tableDataItem
+        }, jsx(Link, {
           onClick: onClick
         }, message));
       });
@@ -286,16 +282,16 @@ export var ModerateTableRow = (_dec = themeable(theme, styles), _dec(_class = (_
         var displayContent;
 
         if (!accommodations || accommodations.length === 0) {
-          displayContent = /*#__PURE__*/React.createElement(Text, {
+          displayContent = jsx(Text, {
             color: "secondary"
           }, t('None'));
         } else {
-          displayContent = /*#__PURE__*/React.createElement(List, {
+          displayContent = jsx(List, {
             isUnstyled: true
           }, accommodations.map(function (elem) {
-            return /*#__PURE__*/React.createElement(List.Item, {
+            return jsx(List.Item, {
               key: elem.name
-            }, /*#__PURE__*/React.createElement(Text, {
+            }, jsx(Text, {
               color: "primary"
             }, t('{ name }: { value }', elem)));
           }));
@@ -303,13 +299,13 @@ export var ModerateTableRow = (_dec = themeable(theme, styles), _dec(_class = (_
         // so that the screen reader will read the accommodations first, and then the button
 
 
-        return /*#__PURE__*/React.createElement(Table.Cell, null, /*#__PURE__*/React.createElement(Flex, {
+        return jsx(Table.Cell, null, jsx(Flex, {
           direction: "row-reverse",
           justifyItems: "end"
-        }, /*#__PURE__*/React.createElement(Flex.Item, {
+        }, jsx(Flex.Item, {
           shouldShrink: true,
           "data-automation": "sdk-moderate-accommodations-text"
-        }, displayContent), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(IconButton, {
+        }, displayContent), jsx(Flex.Item, null, jsx(IconButton, {
           margin: "0 x-small 0 0",
           withBackground: false,
           withBorder: false,
@@ -324,9 +320,9 @@ export var ModerateTableRow = (_dec = themeable(theme, styles), _dec(_class = (_
     key: "renderModerate",
     value: function renderModerate() {
       if (this.props.shouldRenderModerateButton) {
-        return /*#__PURE__*/React.createElement(Table.Cell, null, /*#__PURE__*/React.createElement("div", {
-          className: styles.moderateButton
-        }, /*#__PURE__*/React.createElement(Button, {
+        return jsx(Table.Cell, null, jsx("div", {
+          css: this.props.styles.moderateButton
+        }, jsx(Button, {
           size: "small",
           onClick: this.onModerateButtonClick,
           ref: this.handleModerateRef,
@@ -343,20 +339,18 @@ export var ModerateTableRow = (_dec = themeable(theme, styles), _dec(_class = (_
           avatarUrl = _this$props$rowData.avatar,
           maxAttempts = _this$props$rowData.maxAttempts,
           accommodations = _this$props$rowData.accommodations;
-      var tableData = styles.tableData,
-          avatarRow = styles.avatarRow,
-          avatarName = styles.avatarName;
-      return /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.RowHeader, {
-        className: tableData
-      }, /*#__PURE__*/React.createElement("span", {
-        className: avatarRow
-      }, /*#__PURE__*/React.createElement(PresentationContent, null, /*#__PURE__*/React.createElement(Avatar, {
+      var _this$props$styles = this.props.styles,
+          avatarRow = _this$props$styles.avatarRow,
+          avatarName = _this$props$styles.avatarName;
+      return jsx(Table.Row, null, jsx(Table.RowHeader, null, jsx("span", {
+        css: avatarRow
+      }, jsx(PresentationContent, null, jsx(Avatar, {
         name: name,
         src: avatarUrl,
         size: "small"
-      })), /*#__PURE__*/React.createElement("span", {
-        className: avatarName
-      }, name))), !this.props.anonymousGrading && /*#__PURE__*/React.createElement(Table.Cell, null, this.renderAttempts(quizSessions, maxAttempts)), !this.props.anonymousGrading && /*#__PURE__*/React.createElement(Table.Cell, null, this.renderScores(quizSessions)), !this.props.anonymousGrading && /*#__PURE__*/React.createElement(Table.Cell, null, this.renderTimes(quizSessions)), !this.props.anonymousGrading && /*#__PURE__*/React.createElement(Table.Cell, null, this.renderLogLinks(quizSessions)), !this.props.anonymousGrading && this.renderAccommodations(accommodations), this.renderModerate());
+      })), jsx("span", {
+        css: avatarName
+      }, name))), !this.props.anonymousGrading && jsx(Table.Cell, null, this.renderAttempts(quizSessions, maxAttempts)), !this.props.anonymousGrading && jsx(Table.Cell, null, this.renderScores(quizSessions)), !this.props.anonymousGrading && jsx(Table.Cell, null, this.renderTimes(quizSessions)), !this.props.anonymousGrading && jsx(Table.Cell, null, this.renderLogLinks(quizSessions)), !this.props.anonymousGrading && this.renderAccommodations(accommodations), this.renderModerate());
     }
   }]);
 
@@ -383,7 +377,8 @@ export var ModerateTableRow = (_dec = themeable(theme, styles), _dec(_class = (_
     }))
   }).isRequired,
   shouldRenderModerateButton: PropTypes.bool,
-  focusTarget: PropTypes.string
+  focusTarget: PropTypes.string,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   displayScoreAsPercentage: true,
   shouldRenderModerateButton: true,