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

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

@@ -5,7 +5,8 @@ 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 memoize from 'lodash/memoize';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
@@ -17,20 +18,12 @@ import { View } from '@instructure/ui-view';
 import { Flex } from '@instructure/ui-flex';
 import { Text } from '@instructure/ui-text';
 import { AccessibleContent, ScreenReaderContent } 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';
 import TagSuggestSelect from "../../../common/components/shared/TagSuggestSelect/index.js";
 import { interactionTypesNameDictionary } from "../../../common/util/interactionTypeMetadata.js";
-var styles = {
-  componentId: 'eyMTa',
-  template: function template(theme) {
-    return "\n\n.eyMTa_ecuB{padding:".concat(theme.searchInteractionsPaddingTopBottom || 'inherit', " ").concat(theme.searchInteractionsPaddingLeftRight || 'inherit', "}\n\n.eyMTa_eYuC{display:flex;margin-top:1rem}\n\n.eyMTa_czeD{flex:1;margin-right:2rem}");
-  },
-  'interactionType': 'eyMTa_ecuB',
-  'filterContainer': 'eyMTa_eYuC',
-  'filterColumn': 'eyMTa_czeD'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 var tagShape = PropTypes.shape({
   tag: PropTypes.shape({
     id: PropTypes.string,
@@ -38,7 +31,7 @@ var tagShape = PropTypes.shape({
   }).isRequired,
   count: PropTypes.number.isRequired
 });
-export var BankSearch = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var BankSearch = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(BankSearch, _Component);
 
   var _super = _createSuper(BankSearch);
@@ -92,10 +85,10 @@ export var BankSearch = (_dec = themeable(theme, styles), _dec(_class = (_temp =
               it = _ref2.interaction_type;
           var interactionName = interactionTypesNameDictionary(it);
           var label = "".concat(interactionName, " (").concat(count, ")");
-          return /*#__PURE__*/React.createElement("div", {
+          return jsx("div", {
             key: it.id,
-            className: styles.interactionType
-          }, /*#__PURE__*/React.createElement(Checkbox, {
+            css: _this2.props.styles.interactionType
+          }, jsx(Checkbox, {
             checked: active.has(it.id),
             label: label,
             onChange: _this2.toggleInteraction(it.id),
@@ -107,7 +100,7 @@ export var BankSearch = (_dec = themeable(theme, styles), _dec(_class = (_temp =
           return tag;
         });
         var activeTags = this.props.search.get('tags');
-        var tagSelect = /*#__PURE__*/React.createElement(TagSuggestSelect, {
+        var tagSelect = jsx(TagSuggestSelect, {
           noMatchText: t('No matching tags found'),
           parentType: "Bank",
           parentId: "0",
@@ -127,24 +120,24 @@ export var BankSearch = (_dec = themeable(theme, styles), _dec(_class = (_temp =
             };
 
             var text = allInteractions ? hide() : show();
-            return /*#__PURE__*/React.createElement(CondensedButton, {
+            return jsx(CondensedButton, {
               onClick: toggleAllInteractions,
               margin: "none small"
-            }, /*#__PURE__*/React.createElement(AccessibleContent, {
+            }, jsx(AccessibleContent, {
               alt: text
             }, text));
           }
         };
 
-        return /*#__PURE__*/React.createElement("div", {
-          className: styles.filterContainer
-        }, /*#__PURE__*/React.createElement("div", {
-          className: styles.filterColumn
-        }, tagSelect), /*#__PURE__*/React.createElement("div", {
-          className: styles.filterColumn
-        }, /*#__PURE__*/React.createElement(View, {
+        return jsx("div", {
+          css: this.props.styles.filterContainer
+        }, jsx("div", {
+          css: this.props.styles.filterColumn
+        }, tagSelect), jsx("div", {
+          css: this.props.styles.filterColumn
+        }, jsx(View, {
           margin: "none small"
-        }, /*#__PURE__*/React.createElement(Text, {
+        }, jsx(Text, {
           weight: "bold",
           color: "primary"
         }, t('Question Type'))), interactionFilters, toggleButton()));
@@ -156,23 +149,23 @@ export var BankSearch = (_dec = themeable(theme, styles), _dec(_class = (_temp =
       var _this$props2 = this.props,
           showFilters = _this$props2.showFilters,
           toggleFilters = _this$props2.toggleFilters;
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Flex, {
+      return jsx("div", null, jsx(Flex, {
         as: "div"
-      }, /*#__PURE__*/React.createElement(Flex.Item, {
+      }, jsx(Flex.Item, {
         shouldGrow: true,
         shouldShrink: true
-      }, /*#__PURE__*/React.createElement(TextInput, {
-        renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Search')),
+      }, jsx(TextInput, {
+        renderLabel: jsx(ScreenReaderContent, null, t('Search')),
         type: "search",
         placeholder: t('Search'),
         onChange: this.updateSearch,
         value: this.props.search.get('text', '') || ''
-      })), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Button, {
+      })), jsx(Flex.Item, null, jsx(Button, {
         onClick: toggleFilters,
         margin: "none none none small",
         renderIcon: IconPlusLine,
         "data-automation": "sdk-search-filter-button"
-      }, /*#__PURE__*/React.createElement(AccessibleContent, {
+      }, jsx(AccessibleContent, {
         alt: showFilters ? t('Hide search filters') : t('Show search filters')
       }, t('Filters'))))), this.renderFilters());
     }
@@ -197,7 +190,9 @@ export var BankSearch = (_dec = themeable(theme, styles), _dec(_class = (_temp =
   search: ImmutablePropTypes.map.isRequired,
   toggle: PropTypes.func.isRequired,
   setFilter: PropTypes.func.isRequired,
-  update: PropTypes.func.isRequired
+  update: PropTypes.func.isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   allInteractions: false,
   interactionTypes: [],

package/es/banks/components/BankSearch/styles.js

@@ -0,0 +1,17 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    interactionType: {
+      padding: "".concat(componentTheme.searchInteractionsPaddingTopBottom, " ").concat(componentTheme.searchInteractionsPaddingLeftRight)
+    },
+    filterContainer: {
+      display: 'flex',
+      marginTop: '1rem'
+    },
+    filterColumn: {
+      flex: 1,
+      marginRight: '2rem'
+    }
+  };
+};
+
+export default generateStyle;

package/es/banks/components/BankSearch/theme.js

@@ -1,9 +1,9 @@
-export default function generator(_ref) {
-  var spacing = _ref.spacing,
-      colors = _ref.colors,
-      breakpoints = _ref.breakpoints;
+var generateComponentTheme = function generateComponentTheme(_ref) {
+  var spacing = _ref.spacing;
   return {
     searchInteractionsPaddingTopBottom: spacing.xSmall,
     searchInteractionsPaddingLeftRight: spacing.small
   };
-}
+};
+
+export default generateComponentTheme;

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

@@ -1,4 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
@@ -7,6 +6,7 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Heading } from '@instructure/ui-heading';
@@ -17,9 +17,8 @@ import { Billboard } from '@instructure/ui-billboard';
 import { Button } from '@instructure/ui-buttons';
 import { TextInput } from '@instructure/ui-text-input';
 import { SimpleSelect } from '@instructure/ui-simple-select';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import debounce from 'lodash/fp/debounce';
-import classNames from 'classnames';
 import Page from "../../../common/components/layout/Page/index.js";
 import PaginatedCollection from "../../../common/components/shared/PaginatedCollection/index.js";
 import t from '@instructure/quiz-i18n/es/format-message';
@@ -28,29 +27,18 @@ import BanksList from "../../../banks/components/BanksList/index.js";
 import CreateBankModal from "../../../banks/components/CreateBankModal/index.js";
 import NavWrapper from "../NavWrapper/index.js";
 import noResults from '../noResults.svg';
-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'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 var sortOrderIcons = {
   ascending: IconArrowUpLine,
   descending: IconArrowDownLine
 };
 
-var _ref4 = /*#__PURE__*/React.createElement(Img, {
+var _ref4 = jsx(Img, {
   src: noResults
 });
 
-export var Banks = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(Banks, _Component);
 
   var _super = _createSuper(Banks);
@@ -179,7 +167,7 @@ export var Banks = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
     };
 
     _this.renderRecords = function (recordIds) {
-      return /*#__PURE__*/React.createElement(BanksList, {
+      return jsx(BanksList, {
         createBankButton: _this.createBankButton,
         currentUser: _this.props.currentUser,
         focusCreateBankButton: _this.focusCreateBankButton,
@@ -209,7 +197,7 @@ export var Banks = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
           message = t("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.createElement(Billboard, {
+        return jsx(Billboard, {
           size: "medium",
           heading: t('No Results Found'),
           message: message,
@@ -279,24 +267,23 @@ export var Banks = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
         display: false
       }];
       var searchFiltersSelectOptionIdPrefix = 'banks-search-filters-select-option-';
-      var searchFilters = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      var searchFilters = jsx(React.Fragment, null, jsx("div", {
         display: "inline-block"
-      }, /*#__PURE__*/React.createElement(SimpleSelect, {
+      }, jsx(SimpleSelect, {
         onChange: this.handleBanksParentChange,
         value: this.props.scopeType,
-        renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Bank scope')),
+        renderLabel: jsx(ScreenReaderContent, null, t('Bank scope')),
         width: "13rem"
       }, scopeOptions.map(function (option) {
-        return /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+        return jsx(SimpleSelect.Option, {
           id: searchFiltersSelectOptionIdPrefix + option.slug,
           key: option.slug,
           value: option.slug
         }, option.translation);
-      }))), /*#__PURE__*/React.createElement("div", {
-        display: "inline-block",
-        className: styles.searchBarContainer
-      }, /*#__PURE__*/React.createElement(TextInput, {
-        renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Search...')),
+      }))), jsx("div", {
+        css: this.props.styles.searchBarContainer
+      }, jsx(TextInput, {
+        renderLabel: jsx(ScreenReaderContent, null, t('Search...')),
         type: "search",
         value: this.state.searchTerms,
         onChange: this.handleSearchInputChange,
@@ -304,70 +291,70 @@ export var Banks = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
         "data-automation": "sdk-search-bank-textinput"
       })));
       var sortingFiltersSelectOptionIdPrefix = 'banks-sorting-filters-select-option-';
-      var sortingFilters = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      var sortingFilters = jsx(React.Fragment, null, jsx("div", {
         display: "inline-block",
         style: {
           margin: 'auto 0px auto auto'
         }
-      }, /*#__PURE__*/React.createElement(SimpleSelect, {
-        renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Sort by')),
+      }, jsx(SimpleSelect, {
+        renderLabel: jsx(ScreenReaderContent, null, t('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.createElement(SimpleSelect.Option, {
+        return jsx(SimpleSelect.Option, {
           id: sortingFiltersSelectOptionIdPrefix + option.slug,
           key: option.slug,
           value: option.slug
         }, option.translation);
-      }))), /*#__PURE__*/React.createElement("div", {
+      }))), jsx("div", {
         display: "inline-block",
         style: {
           marginLeft: '1rem'
         }
-      }, /*#__PURE__*/React.createElement(Button, {
+      }, jsx(Button, {
         type: "button",
         onClick: this.handleSortingButtonClick,
         "data-automation": "sdk-sort-banks-button",
         renderIcon: this.getSortingOrderIcon()
-      }, /*#__PURE__*/React.createElement(AccessibleContent, {
+      }, jsx(AccessibleContent, {
         alt: this.getSortAssistiveText()
       }, t('Sort')))));
 
       if (this.props.closeTray) {
-        return /*#__PURE__*/React.createElement("div", {
-          className: classNames(styles.filters, styles.borderedBottom)
-        }, /*#__PURE__*/React.createElement("div", {
-          className: styles.filtersRow
-        }, searchFilters), !this.props.itemBankSearchTableEnabled && /*#__PURE__*/React.createElement("div", {
-          className: styles.filtersRow
+        return jsx("div", {
+          css: [this.props.styles.filters, this.props.styles.borderedBottom]
+        }, jsx("div", {
+          css: this.props.styles.filtersRow
+        }, searchFilters), !this.props.itemBankSearchTableEnabled && jsx("div", {
+          css: this.props.styles.filtersRow
         }, sortingFilters));
       } else {
-        return /*#__PURE__*/React.createElement("div", {
-          className: classNames(styles.filters, styles.borderedBottom)
-        }, /*#__PURE__*/React.createElement("div", {
-          className: styles.filtersRow
+        return jsx("div", {
+          css: [this.props.styles.filters, this.props.styles.borderedBottom]
+        }, jsx("div", {
+          css: this.props.styles.filtersRow
         }, searchFilters, !this.props.itemBankSearchTableEnabled && sortingFilters));
       }
     }
   }, {
     key: "renderHeader",
     value: function renderHeader() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: classNames(styles.header, _defineProperty({}, styles.borderedBottom, !this.props.filtersEnabled))
-      }, /*#__PURE__*/React.createElement(Heading, {
+      return jsx("div", {
+        css: [this.props.styles.filters, !this.props.filtersEnabled ? this.props.styles.borderedBottom : {}]
+      }, jsx(Heading, {
         as: this.props.isCompact ? 'h2' : 'h1',
         level: "h1"
-      }, t('Banks')), /*#__PURE__*/React.createElement(Button, {
+      }, t('Banks')), jsx(Button, {
         ref: this.handleCreateBankButtonRef,
         type: "button",
         color: "primary",
         onClick: this.onCreateBank,
         "data-automation": "sdk-create-new-bank-button",
         renderIcon: IconPlusLine
-      }, /*#__PURE__*/React.createElement(AccessibleContent, {
+      }, jsx(AccessibleContent, {
         alt: t('Create Bank')
       }, t('Bank'))));
     }
@@ -380,7 +367,7 @@ export var Banks = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
           navigateToBuild = _this$props.navigateToBuild,
           returnToUrl = _this$props.returnToUrl;
       var isScopeEmpty = !Object.keys(scope).length;
-      return /*#__PURE__*/React.createElement(NavWrapper, {
+      return jsx(NavWrapper, {
         closeTray: closeTray,
         navigateToBuild: navigateToBuild,
         returnToUrl: isScopeEmpty ? null : returnToUrl,
@@ -390,7 +377,7 @@ export var Banks = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
   }, {
     key: "renderBanksSearchResults",
     value: function renderBanksSearchResults() {
-      return /*#__PURE__*/React.createElement(PaginatedCollection, {
+      return jsx(PaginatedCollection, {
         empty: this.emptyPage(),
         getPage: this.getPage,
         renderRecords: this.renderRecords,
@@ -400,9 +387,9 @@ export var Banks = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(Page, null, this.renderNav(), /*#__PURE__*/React.createElement("div", {
-        className: styles.content
-      }, this.renderHeader(), this.props.filtersEnabled && this.renderFilters(), this.renderBanksSearchResults(), /*#__PURE__*/React.createElement(CreateBankModal, {
+      return jsx(Page, null, this.renderNav(), jsx("div", {
+        css: this.props.styles.content
+      }, this.renderHeader(), this.props.filtersEnabled && this.renderFilters(), this.renderBanksSearchResults(), jsx(CreateBankModal, {
         itemBanksScope: this.props.scope
       })));
     }
@@ -458,7 +445,9 @@ export var Banks = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
   sortBy: PropTypes.string,
   sortOrder: PropTypes.string,
   usedByCourseEnabled: PropTypes.bool,
-  itemBankSearchTableEnabled: PropTypes.bool
+  itemBankSearchTableEnabled: PropTypes.bool,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   closeTray: null,
   currentUser: null,

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

@@ -0,0 +1,32 @@
+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'
+    }
+  };
+};
+
+export default generateStyle;

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

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
       spacing = _ref.spacing,
       borders = _ref.borders;
@@ -10,4 +10,6 @@ export default function generator(_ref) {
     headerBorderWidth: borders.widthSmall,
     headerBorderColor: colors.tiara
   };
-}
+};
+
+export default generateComponentTheme;