@instructure/quiz-core 20.1.0 → 20.1.1-rc.1

package/lib/banks/components/Banks/presenter.js

@@ -9,8 +9,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Banks = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -41,12 +39,10 @@ var _uiTextInput = require("@instructure/ui-text-input");
 
 var _uiSimpleSelect = require("@instructure/ui-simple-select");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _debounce = _interopRequireDefault(require("lodash/fp/debounce"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _index = _interopRequireDefault(require("../../../common/components/layout/Page/index.js"));
 
 var _index2 = _interopRequireDefault(require("../../../common/components/shared/PaginatedCollection/index.js"));
@@ -63,32 +59,22 @@ var _index5 = _interopRequireDefault(require("../NavWrapper/index.js"));
 
 var _noResults = _interopRequireDefault(require("../noResults.svg"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'cYUUC',
-  template: function template(theme) {
-    return "\n\n.cYUUC_caGd{background-color:".concat(theme.contentBackgroundColor || 'inherit', ";padding:").concat(theme.contentPaddingTopBottom || 'inherit', " ").concat(theme.contentPaddingLeftRight || 'inherit', "}\n\n.cYUUC_fsuY{display:flex;flex-direction:row;justify-content:space-between;padding-bottom:").concat(theme.headerPadding || 'inherit', "}\n\n.cYUUC_cyFt{border-bottom:").concat(theme.headerBorderWidth || 'inherit', " solid ").concat(theme.headerBorderColor || 'inherit', "}\n\n.cYUUC_ECfi{padding-bottom:2rem}\n\n.cYUUC_djgO{display:flex;flex-direction:row;margin-top:1.5rem}\n\n.cYUUC_bYSL{flex-grow:0.25;padding:0 1rem}");
-  },
-  'content': 'cYUUC_caGd',
-  'header': 'cYUUC_fsuY',
-  'borderedBottom': 'cYUUC_cyFt',
-  'filters': 'cYUUC_ECfi',
-  'filtersRow': 'cYUUC_djgO',
-  'searchBarContainer': 'cYUUC_bYSL'
-};
 var sortOrderIcons = {
   ascending: _uiIcons.IconArrowUpLine,
   descending: _uiIcons.IconArrowDownLine
 };
 
-var _ref4 = /*#__PURE__*/_react.default.createElement(_uiImg.Img, {
+var _ref4 = (0, _emotion.jsx)(_uiImg.Img, {
   src: _noResults.default
 });
 
-var Banks = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(Banks, _Component);
 
   var _super = (0, _createSuper2.default)(Banks);
@@ -216,7 +202,7 @@ var Banks = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
     };
 
     _this.renderRecords = function (recordIds) {
-      return /*#__PURE__*/_react.default.createElement(_index3.default, {
+      return (0, _emotion.jsx)(_index3.default, {
         createBankButton: _this.createBankButton,
         currentUser: _this.props.currentUser,
         focusCreateBankButton: _this.focusCreateBankButton,
@@ -246,7 +232,7 @@ var Banks = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
           message = (0, _formatMessage.default)("Your filter is set to \"Institution\" which will narrow what you can search for.\n          Try adjusting the filter to \"All My Banks\"");
         }
 
-        return /*#__PURE__*/_react.default.createElement(_uiBillboard.Billboard, {
+        return (0, _emotion.jsx)(_uiBillboard.Billboard, {
           size: "medium",
           heading: (0, _formatMessage.default)('No Results Found'),
           message: message,
@@ -316,98 +302,94 @@ var Banks = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
         display: false
       }];
       var searchFiltersSelectOptionIdPrefix = 'banks-search-filters-select-option-';
-
-      var searchFilters = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      var searchFilters = (0, _emotion.jsx)(_react.default.Fragment, null, (0, _emotion.jsx)("div", {
         display: "inline-block"
-      }, /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect, {
+      }, (0, _emotion.jsx)(_uiSimpleSelect.SimpleSelect, {
         onChange: this.handleBanksParentChange,
         value: this.props.scopeType,
-        renderLabel: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Bank scope')),
+        renderLabel: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Bank scope')),
         width: "13rem"
       }, scopeOptions.map(function (option) {
-        return /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect.Option, {
+        return (0, _emotion.jsx)(_uiSimpleSelect.SimpleSelect.Option, {
           id: searchFiltersSelectOptionIdPrefix + option.slug,
           key: option.slug,
           value: option.slug
         }, option.translation);
-      }))), /*#__PURE__*/_react.default.createElement("div", {
-        display: "inline-block",
-        className: styles.searchBarContainer
-      }, /*#__PURE__*/_react.default.createElement(_uiTextInput.TextInput, {
-        renderLabel: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Search...')),
+      }))), (0, _emotion.jsx)("div", {
+        css: this.props.styles.searchBarContainer
+      }, (0, _emotion.jsx)(_uiTextInput.TextInput, {
+        renderLabel: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Search...')),
         type: "search",
         value: this.state.searchTerms,
         onChange: this.handleSearchInputChange,
         placeholder: (0, _formatMessage.default)('Search...'),
         "data-automation": "sdk-search-bank-textinput"
       })));
-
       var sortingFiltersSelectOptionIdPrefix = 'banks-sorting-filters-select-option-';
-
-      var sortingFilters = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      var sortingFilters = (0, _emotion.jsx)(_react.default.Fragment, null, (0, _emotion.jsx)("div", {
         display: "inline-block",
         style: {
           margin: 'auto 0px auto auto'
         }
-      }, /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect, {
-        renderLabel: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Sort by')),
+      }, (0, _emotion.jsx)(_uiSimpleSelect.SimpleSelect, {
+        renderLabel: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Sort by')),
         value: this.props.sortBy,
         width: "10rem",
         onChange: this.handleSortByChange
       }, sortingCriteriaOptions.filter(function (option) {
         return option.display === true;
       }).map(function (option) {
-        return /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect.Option, {
+        return (0, _emotion.jsx)(_uiSimpleSelect.SimpleSelect.Option, {
           id: sortingFiltersSelectOptionIdPrefix + option.slug,
           key: option.slug,
           value: option.slug
         }, option.translation);
-      }))), /*#__PURE__*/_react.default.createElement("div", {
+      }))), (0, _emotion.jsx)("div", {
         display: "inline-block",
         style: {
           marginLeft: '1rem'
         }
-      }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      }, (0, _emotion.jsx)(_uiButtons.Button, {
         type: "button",
         onClick: this.handleSortingButtonClick,
         "data-automation": "sdk-sort-banks-button",
         renderIcon: this.getSortingOrderIcon()
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+      }, (0, _emotion.jsx)(_uiA11yContent.AccessibleContent, {
         alt: this.getSortAssistiveText()
       }, (0, _formatMessage.default)('Sort')))));
 
       if (this.props.closeTray) {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: (0, _classnames.default)(styles.filters, styles.borderedBottom)
-        }, /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.filtersRow
-        }, searchFilters), !this.props.itemBankSearchTableEnabled && /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.filtersRow
+        return (0, _emotion.jsx)("div", {
+          css: [this.props.styles.filters, this.props.styles.borderedBottom]
+        }, (0, _emotion.jsx)("div", {
+          css: this.props.styles.filtersRow
+        }, searchFilters), !this.props.itemBankSearchTableEnabled && (0, _emotion.jsx)("div", {
+          css: this.props.styles.filtersRow
         }, sortingFilters));
       } else {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: (0, _classnames.default)(styles.filters, styles.borderedBottom)
-        }, /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.filtersRow
+        return (0, _emotion.jsx)("div", {
+          css: [this.props.styles.filters, this.props.styles.borderedBottom]
+        }, (0, _emotion.jsx)("div", {
+          css: this.props.styles.filtersRow
         }, searchFilters, !this.props.itemBankSearchTableEnabled && sortingFilters));
       }
     }
   }, {
     key: "renderHeader",
     value: function renderHeader() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(styles.header, (0, _defineProperty2.default)({}, styles.borderedBottom, !this.props.filtersEnabled))
-      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+      return (0, _emotion.jsx)("div", {
+        css: [this.props.styles.filters, !this.props.filtersEnabled ? this.props.styles.borderedBottom : {}]
+      }, (0, _emotion.jsx)(_uiHeading.Heading, {
         as: this.props.isCompact ? 'h2' : 'h1',
         level: "h1"
-      }, (0, _formatMessage.default)('Banks')), /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      }, (0, _formatMessage.default)('Banks')), (0, _emotion.jsx)(_uiButtons.Button, {
         ref: this.handleCreateBankButtonRef,
         type: "button",
         color: "primary",
         onClick: this.onCreateBank,
         "data-automation": "sdk-create-new-bank-button",
         renderIcon: _uiIcons.IconPlusLine
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+      }, (0, _emotion.jsx)(_uiA11yContent.AccessibleContent, {
         alt: (0, _formatMessage.default)('Create Bank')
       }, (0, _formatMessage.default)('Bank'))));
     }
@@ -420,7 +402,7 @@ var Banks = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
           navigateToBuild = _this$props.navigateToBuild,
           returnToUrl = _this$props.returnToUrl;
       var isScopeEmpty = !Object.keys(scope).length;
-      return /*#__PURE__*/_react.default.createElement(_index5.default, {
+      return (0, _emotion.jsx)(_index5.default, {
         closeTray: closeTray,
         navigateToBuild: navigateToBuild,
         returnToUrl: isScopeEmpty ? null : returnToUrl,
@@ -430,7 +412,7 @@ var Banks = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
   }, {
     key: "renderBanksSearchResults",
     value: function renderBanksSearchResults() {
-      return /*#__PURE__*/_react.default.createElement(_index2.default, {
+      return (0, _emotion.jsx)(_index2.default, {
         empty: this.emptyPage(),
         getPage: this.getPage,
         renderRecords: this.renderRecords,
@@ -440,9 +422,9 @@ var Banks = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_index.default, null, this.renderNav(), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.content
-      }, this.renderHeader(), this.props.filtersEnabled && this.renderFilters(), this.renderBanksSearchResults(), /*#__PURE__*/_react.default.createElement(_index4.default, {
+      return (0, _emotion.jsx)(_index.default, null, this.renderNav(), (0, _emotion.jsx)("div", {
+        css: this.props.styles.content
+      }, this.renderHeader(), this.props.filtersEnabled && this.renderFilters(), this.renderBanksSearchResults(), (0, _emotion.jsx)(_index4.default, {
         itemBanksScope: this.props.scope
       })));
     }
@@ -497,7 +479,9 @@ var Banks = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
   sortBy: _propTypes.default.string,
   sortOrder: _propTypes.default.string,
   usedByCourseEnabled: _propTypes.default.bool,
-  itemBankSearchTableEnabled: _propTypes.default.bool
+  itemBankSearchTableEnabled: _propTypes.default.bool,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   closeTray: null,
   currentUser: null,

package/lib/banks/components/Banks/styles.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    content: {
+      padding: "".concat(componentTheme.contentPaddingTopBottom, " ").concat(componentTheme.contentPaddingLeftRight),
+      backgroundColor: componentTheme.contentBackgroundColor
+    },
+    header: {
+      display: 'flex',
+      flexDirection: 'row',
+      paddingBottom: componentTheme.headerPadding,
+      justifyContent: 'space-between'
+    },
+    borderedBottom: {
+      borderBottom: "".concat(componentTheme.headerBorderWidth, " solid ").concat(componentTheme.headerBorderColor)
+    },
+    filters: {
+      paddingBottom: '2rem'
+    },
+    filtersRow: {
+      marginTop: '1.5rem',
+      display: 'flex',
+      flexDirection: 'row'
+    },
+    searchBarContainer: {
+      flexGrow: 0.25,
+      padding: '0 1rem',
+      display: 'inline-block'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/banks/components/Banks/theme.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
       spacing = _ref.spacing,
       borders = _ref.borders;
@@ -17,4 +17,7 @@ function generator(_ref) {
     headerBorderWidth: borders.widthSmall,
     headerBorderColor: colors.tiara
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;