@instructure/quiz-core 20.11.3-rc.0 → 20.11.3-rc.11

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

@@ -615,7 +615,7 @@ export var SharingModalPresenter = (_dec = withStyle(generateStyle, generateComp
         placement: "end",
         offset: "medium",
         screenReaderLabel: t('Close')
-      })), jsx(ModalBody, null, !subAccountBankSharingEnabled && this.renderRootAccountSharing(), !subAccountBankSharingEnabled && this.renderSearchSection(), this.state.shares.size > 0 ? this.renderEntitiesSection() : _ref7), jsx(ModalFooter, null, this.renderFooter()));
+      })), jsx(ModalBody, null, !subAccountBankSharingEnabled && this.renderRootAccountSharing(), !subAccountBankSharingEnabled && this.renderSearchSection(), this.state.shares.size >= 0 ? this.renderEntitiesSection() : _ref7), jsx(ModalFooter, null, this.renderFooter()));
     }
   }]);
 

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;