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

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

@@ -7,7 +7,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 ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import Immutable from 'immutable';
@@ -25,7 +26,7 @@ import { Heading } from '@instructure/ui-heading';
 import { IconDiscussionLine, IconDiscussionSolid } from '@instructure/ui-icons';
 import { PresentationContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { TextInput } from '@instructure/ui-text-input';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import EntrySave from "../../../common/components/resources/entry/EntrySave/index.js";
 import ItemEdit from "../../../common/components/resources/item/ItemEdit/index.js";
 import ItemFeedbackModal from "../../../building/components/resources/ItemFeedbackModal/index.js";
@@ -42,28 +43,12 @@ import { createStimulus } from "../../../building/api/stimuli.js";
 import { propsForItemVersioningWrapper, propsForStimulusVersioningWrapper } from "../../../common/util/warningHelpers.js";
 import NavWrapper from "../NavWrapper/index.js";
 import { API_INPUT_VALIDATION_ERROR, CLEAR_ALL_INPUT_VALIDATION_ERRORS, ITEM_FEEDBACK_MODAL, ITEM_FEEDBACK_MODAL_ITEM, ITEM_FEEDBACK_MODAL_FEEDBACK, PARENT_TYPE_BANK } from '@instructure/quiz-common';
-var styles = {
-  componentId: 'dhhIK',
-  template: function template(theme) {
-    return "\n\n.dhhIK_caGd{background-color:".concat(theme.contentBackgroundColor || 'inherit', ";padding:").concat(theme.contentPaddingTopBottom || 'inherit', " ").concat(theme.contentPaddingLeftRight || 'inherit', "}\n\n.dhhIK_blfJ{margin-bottom:").concat(theme.entryRowMargin || 'inherit', "}\n\n.dhhIK_dlpV{color:").concat(theme.headerRowColor || 'inherit', ";flex-direction:row;justify-content:space-between;padding:").concat(theme.headerRowPadding || 'inherit', "}\n\n.dhhIK_dlpV,.dhhIK_cKlw{align-items:flex-start;display:flex}\n\n.dhhIK_cKlw{flex:0 0 auto;flex-direction:column;margin-right:").concat(theme.leftHeaderMargin || 'inherit', "}\n\n.dhhIK_fAhB{font-size:").concat(theme.headerTextFontSize || 'inherit', "}\n\n.dhhIK_fsuY{align-items:center;background-color:").concat(theme.headerBackgroundColor || 'inherit', ";color:").concat(theme.headerColor || 'inherit', ";display:flex;justify-content:space-between;padding:").concat(theme.headerPaddingTopBottom || 'inherit', " ").concat(theme.headerPaddingLeftRight || 'inherit', ";vertical-align:middle}\n\n.dhhIK_IoDT{padding-left:").concat(theme.rightHeaderPaddingLeft || 'inherit', ";text-align:right}\n\n[dir=ltr] .dhhIK_IoDT,[dir=rtl] .dhhIK_IoDT{text-align:right}\n\n.dhhIK_cjWK,.dhhIK_bVuu,.dhhIK_ekxs{display:flex;flex-direction:row}\n\n.dhhIK_cjWK{padding-bottom:").concat(theme.footerPaddingBottom || 'inherit', ";padding-top:").concat(theme.footerPaddingTop || 'inherit', ";text-align:left}\n\n[dir=ltr] .dhhIK_cjWK,[dir=rtl] .dhhIK_cjWK{text-align:left}\n\n.dhhIK_ekxs{flex:8 0 0;justify-content:flex-end;padding-left:").concat(theme.rightFooterPaddingLeftRight || 'inherit', ";padding-right:").concat(theme.rightFooterPaddingLeftRight || 'inherit', "}\n\n.dhhIK_eNDu{border-bottom:").concat(theme.entryEditBorderWidth || 'inherit', " solid ").concat(theme.entryEditBorderColor || 'inherit', "}");
-  },
-  'content': 'dhhIK_caGd',
-  'entryRow': 'dhhIK_blfJ',
-  'headerRow': 'dhhIK_dlpV',
-  'leftHeader': 'dhhIK_cKlw',
-  'headerText': 'dhhIK_fAhB',
-  'header': 'dhhIK_fsuY',
-  'rightHeader': 'dhhIK_IoDT',
-  'footer': 'dhhIK_cjWK',
-  'leftFooter': 'dhhIK_bVuu',
-  'rightFooter': 'dhhIK_ekxs',
-  'entryEdit': 'dhhIK_eNDu'
-};
-import theme from "./theme.js";
-
-var _ref3 = /*#__PURE__*/React.createElement(Spinner, null);
-
-export var BankEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+
+var _ref3 = jsx(Spinner, null);
+
+export var BankEntry = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(BankEntry, _Component);
 
   var _super = _createSuper(BankEntry);
@@ -310,17 +295,17 @@ export var BankEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
           returnToUrl = _this$props.returnToUrl,
           bank = _this$props.bank;
       var isScopeEmpty = !Object.keys(scope).length;
-      return /*#__PURE__*/React.createElement(NavWrapper, {
+      return jsx(NavWrapper, {
         closeTray: closeTray,
         navigateToBanks: navigateToBanks,
         navigateToBuild: navigateToBuild,
         returnToUrl: isScopeEmpty ? null : returnToUrl,
         canvasReferrerLinkText: isScopeEmpty ? null : scope.title
-      }, /*#__PURE__*/React.createElement(BreadcrumbLink, {
+      }, jsx(BreadcrumbLink, {
         key: "bank",
         onClick: this.navigateToBank,
         ref: this.setNavToBankRef
-      }, bank.title), /*#__PURE__*/React.createElement(BreadcrumbLink, {
+      }, bank.title), jsx(BreadcrumbLink, {
         key: "bankEntry"
       }, this.entryLinkName()));
     }
@@ -328,8 +313,8 @@ export var BankEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
     key: "renderTitle",
     value: function renderTitle(entry) {
       if (this.isItemEntry()) {
-        return /*#__PURE__*/React.createElement(TextInput, {
-          renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Edit question title')),
+        return jsx(TextInput, {
+          renderLabel: jsx(ScreenReaderContent, null, t('Edit question title')),
           type: "text",
           placeholder: t('Question Title'),
           onChange: this.handleTitleChange,
@@ -351,18 +336,18 @@ export var BankEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
       var itemIdentifier = this.isTemporary() ? tempIdentifier : identifier;
       var entryName = this.isItemEntry() ? entry.getInteractionType().name : t('Stimulus');
       var separator = ' | ';
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.header
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.leftHeader
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.headerText
-      }, /*#__PURE__*/React.createElement(Heading, {
+      return jsx("div", {
+        css: this.props.styles.header
+      }, jsx("div", {
+        css: this.props.styles.leftHeader
+      }, jsx("div", {
+        css: this.props.styles.headerText
+      }, jsx(Heading, {
         level: "reset",
         as: "h2"
-      }, entryName, /*#__PURE__*/React.createElement(PresentationContent, null, separator), itemIdentifier))), this.renderTitle(entry), /*#__PURE__*/React.createElement("div", {
-        className: styles.rightHeader
-      }, /*#__PURE__*/React.createElement(EntrySave, props)));
+      }, entryName, jsx(PresentationContent, null, separator), itemIdentifier))), this.renderTitle(entry), jsx("div", {
+        css: this.props.styles.rightHeader
+      }, jsx(EntrySave, props)));
     }
   }, {
     key: "hasPendingTagModifications",
@@ -544,7 +529,7 @@ export var BankEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
         text = t('Edit Question Level Feedback');
       }
 
-      return /*#__PURE__*/React.createElement(IconButton, {
+      return jsx(IconButton, {
         onClick: this.openFeedbackModal,
         withBackground: false,
         withBorder: false,
@@ -607,7 +592,7 @@ export var BankEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
       var entryId = this.getBankEntryId(bankEntry);
 
       var tags = function tags() {
-        return /*#__PURE__*/React.createElement(TagSuggestSelect, {
+        return jsx(TagSuggestSelect, {
           allowNewTags: true,
           noMatchText: t('Enter a tag to find or create'),
           parentType: entryType,
@@ -618,20 +603,20 @@ export var BankEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
       };
 
       var editWarning = this.isItemEntry() ? t('Edits made here will appear on any assessment using this question.') : t('Edits made here will appear on any assessment using this stimulus.');
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-        className: styles.entryEdit
-      }, /*#__PURE__*/React.createElement(WarningWrapper, versioningProps, canEdit && /*#__PURE__*/React.createElement(Alert, {
+      return jsx("div", null, jsx("div", {
+        css: this.props.styles.entryEdit
+      }, jsx(WarningWrapper, versioningProps, canEdit && jsx(Alert, {
         renderCloseButtonLabel: t('Dismiss'),
         margin: "0 0 medium 0"
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, jsx(Text, {
         color: "primary"
-      }, editWarning)), /*#__PURE__*/React.createElement(EntryComponent, props), useBankTags && tags())), /*#__PURE__*/React.createElement("div", {
-        className: styles.footer
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.leftFooter
-      }, this.renderFeedbackSection()), /*#__PURE__*/React.createElement("div", {
-        className: styles.rightFooter
-      }, /*#__PURE__*/React.createElement(EntrySave, props))));
+      }, editWarning)), jsx(EntryComponent, props), useBankTags && tags())), jsx("div", {
+        css: this.props.styles.footer
+      }, jsx("div", {
+        css: this.props.styles.leftFooter
+      }, this.renderFeedbackSection()), jsx("div", {
+        css: this.props.styles.rightFooter
+      }, jsx(EntrySave, props))));
     }
   }, {
     key: "render",
@@ -642,9 +627,9 @@ export var BankEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
         return _ref3;
       }
 
-      return /*#__PURE__*/React.createElement(Page, null, this.renderNav(), /*#__PURE__*/React.createElement("div", {
-        className: styles.content
-      }, this.renderHeader(entry), this.renderEntry(entry), !this.props.isCompact && /*#__PURE__*/React.createElement(ItemFeedbackModal, {
+      return jsx(Page, null, this.renderNav(), jsx("div", {
+        css: this.props.styles.content
+      }, this.renderHeader(entry), this.renderEntry(entry), !this.props.isCompact && jsx(ItemFeedbackModal, {
         parentId: this.props.bankId,
         parentType: PARENT_TYPE_BANK
       })));
@@ -697,7 +682,9 @@ export var BankEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
   tagInput: PropTypes.string,
   updateItem: PropTypes.func.isRequired,
   updateStimulus: PropTypes.func.isRequired,
-  useBankTags: PropTypes.bool
+  useBankTags: PropTypes.bool,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   closeTray: function closeTray() {},
   entry: null,

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

@@ -0,0 +1,65 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+
+var generateStyle = function generateStyle(componentTheme) {
+  var footerStyles = {
+    display: 'flex',
+    flexDirection: 'row'
+  };
+  return {
+    content: {
+      padding: "".concat(componentTheme.contentPaddingTopBottom, " ").concat(componentTheme.contentPaddingLeftRight),
+      backgroundColor: componentTheme.contentBackgroundColor
+    },
+    entryRow: {
+      marginBottom: componentTheme.entryRowMargin
+    },
+    headerRow: {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'flex-start',
+      color: componentTheme.headerRowColor,
+      padding: componentTheme.headerRowPadding
+    },
+    leftHeader: {
+      flex: '0 0 auto',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      marginRight: componentTheme.leftHeaderMargin
+    },
+    headerText: {
+      fontSize: componentTheme.headerTextFontSize
+    },
+    header: {
+      backgroundColor: componentTheme.headerBackgroundColor,
+      color: componentTheme.headerColor,
+      padding: "".concat(componentTheme.headerPaddingTopBottom, " ").concat(componentTheme.headerPaddingLeftRight),
+      display: 'flex',
+      justifyContent: 'space-between',
+      verticalAlign: 'middle',
+      alignItems: 'center'
+    },
+    rightHeader: {
+      textAlign: 'right',
+      paddingLeft: componentTheme.rightHeaderPaddingLeft
+    },
+    footer: _objectSpread(_objectSpread({}, footerStyles), {}, {
+      textAlign: 'left',
+      paddingBottom: componentTheme.footerPaddingBottom,
+      paddingTop: componentTheme.footerPaddingTop
+    }),
+    leftFooter: footerStyles,
+    rightFooter: _objectSpread(_objectSpread({}, footerStyles), {}, {
+      flex: '8 0 0',
+      justifyContent: 'flex-end',
+      paddingLeft: componentTheme.rightFooterPaddingLeftRight,
+      paddingRight: componentTheme.rightFooterPaddingLeftRight
+    }),
+    entryEdit: {
+      borderBottom: "".concat(componentTheme.entryEditBorderWidth, " solid ").concat(componentTheme.entryEditBorderColor)
+    }
+  };
+};
+
+export default generateStyle;

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

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       colors = _ref.colors,
       typography = _ref.typography,
@@ -21,4 +21,6 @@ export default function generator(_ref) {
     entryEditBorderWidth: borders.widthSmall,
     entryEditBorderColor: colors.tiara
   };
-}
+};
+
+export default generateComponentTheme;

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

@@ -5,10 +5,12 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
+
+/* eslint-disable-next-line no-unused-vars */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import partial from 'lodash/partial';
-import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Immutable from 'immutable';
 import { IconEditLine, IconPlusLine, IconCopyLine, IconTrashLine } from '@instructure/ui-icons';
@@ -18,9 +20,9 @@ import { List } from '@instructure/ui-list';
 import { Heading } from '@instructure/ui-heading';
 import { PresentationContent } from '@instructure/ui-a11y-content';
 import { Alert } from '@instructure/ui-alerts';
-import { themeable } from '@instructure/ui-themeable';
-import { RichContentRenderer } from '@instructure/quiz-rce';
+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 { extractTextFromHtml } from '@instructure/quiz-interactions';
 import t from '@instructure/quiz-i18n/es/format-message';
 import CopyMoveBankEntryModal from "../CopyMoveBankEntryModal/index.js";
@@ -30,27 +32,12 @@ 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";
-var styles = {
-  componentId: 'eQXFj',
-  template: function template(theme) {
-    return "\n\n.eQXFj_IXXK{padding:".concat(theme.entryDetailPadding || 'inherit', "}\n\n.eQXFj_dlpV{align-items:flex-start;color:").concat(theme.headerRowColor || 'inherit', ";display:flex;flex-direction:row;justify-content:space-between}\n\n.eQXFj_exDh{display:inline-flex;position:relative;z-index:").concat(theme.buttonsZIndex || 'inherit', "}\n\n.eQXFj_bTHH{border-left:").concat(theme.expandButtonContainerBorderWidth || 'inherit', " solid ").concat(theme.expandButtonContainerBorderColor || 'inherit', "}\n\n.eQXFj_AHIw{display:block}\n\n.eQXFj_eTBd{margin-bottom:").concat(theme.deletePrefaceMargin || 'inherit', "}\n\n.eQXFj_ftIe{margin-bottom:").concat(theme.addButtonMargin || 'inherit', "}\n\n.eQXFj_fAhB{color:").concat(theme.headerTextColor || 'inherit', ";font-size:").concat(theme.headerTextFontSize || 'inherit', "}\n\n.eQXFj_cloC{font-size:").concat(theme.stemFontSize || 'inherit', ";line-height:").concat(theme.stemLineHeight || 'inherit', ";overflow-x:auto}\n\n.eQXFj_cloC p{margin:0}\n\n.eQXFj_cjWK{border-top:").concat(theme.footerBorderWidth || 'inherit', " solid ").concat(theme.footerBorderColor || 'inherit', ";font-size:").concat(theme.footerFontSize || 'inherit', ";padding:").concat(theme.footerPadding || 'inherit', "}");
-  },
-  'entryDetail': 'eQXFj_IXXK',
-  'headerRow': 'eQXFj_dlpV',
-  'buttons': 'eQXFj_exDh',
-  'expandButtonContainer': 'eQXFj_bTHH',
-  'deleteAlert': 'eQXFj_AHIw',
-  'deletePreface': 'eQXFj_eTBd',
-  'addButton': 'eQXFj_ftIe',
-  'headerText': 'eQXFj_fAhB',
-  'stem': 'eQXFj_cloC',
-  'footer': 'eQXFj_cjWK'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 
-var _ref2 = /*#__PURE__*/React.createElement("div", null);
+var _ref2 = jsx("div", null);
 
-export var BankEntryRow = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_withI18nSupport) {
+export var BankEntryRow = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_withI18nSupport) {
   _inherits(BankEntryRow, _withI18nSupport);
 
   var _super = _createSuper(BankEntryRow);
@@ -72,20 +59,20 @@ export var BankEntryRow = (_dec = themeable(theme, styles), _dec(_class = (_temp
 
     _this.deleteBankEntry = function () {
       var deletePreface = _this.isItemEntry() ? t('Deleting this question:') : t('Deleting this stimulus:');
-      var confirmBody = /*#__PURE__*/React.createElement(Alert, {
+      var confirmBody = jsx(Alert, {
         variant: "error",
         padding: "0"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.deleteAlert
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.deletePreface
-      }, deletePreface), /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(List.Item, null, t.rich('will <0>NOT</0> remove it from any assessments', [function (_ref) {
+      }, jsx("div", {
+        css: _this.props.styles.deleteAlert
+      }, jsx("div", {
+        css: _this.props.styles.deletePreface
+      }, deletePreface), jsx(List, null, jsx(List.Item, null, t.rich('will <0>NOT</0> remove it from any assessments', [function (_ref) {
         var children = _ref.children;
-        return /*#__PURE__*/React.createElement(Text, {
+        return jsx(Text, {
           weight: "bold",
           key: "0"
         }, children);
-      }])), /*#__PURE__*/React.createElement(List.Item, null, t('will lose its statistical link in reporting')), /*#__PURE__*/React.createElement(List.Item, null, t('will remove access for all users with whom this bank has been shared')))));
+      }])), jsx(List.Item, null, t('will lose its statistical link in reporting')), jsx(List.Item, null, t('will remove access for all users with whom this bank has been shared')))));
 
       _this.props.withConfirm(partial(_this.props.removeBankEntry, _this.props.bank.id, _this.props.bankEntry.id), {
         title: t('Delete {type}', {
@@ -138,7 +125,7 @@ export var BankEntryRow = (_dec = themeable(theme, styles), _dec(_class = (_temp
       var title = t('Delete {type}', {
         type: _this.type()
       });
-      return /*#__PURE__*/React.createElement(IconButton, {
+      return jsx(IconButton, {
         size: "medium",
         withBackground: false,
         withBorder: false,
@@ -207,12 +194,13 @@ export var BankEntryRow = (_dec = themeable(theme, styles), _dec(_class = (_temp
       }) : t('Expand {type} details', {
         type: type
       });
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.expandButtonContainer
-      }, /*#__PURE__*/React.createElement(ExpandButton, {
+      return jsx("div", {
+        css: this.props.styles.expandButtonContainer
+      }, jsx(ExpandButton, {
         onClick: this.props.toggleExpanded,
         title: title,
-        isExpanded: this.props.isExpanded
+        isExpanded: this.props.isExpanded,
+        "data-automation": "expand-bank-question-button"
       }));
     }
   }, {
@@ -222,9 +210,9 @@ export var BankEntryRow = (_dec = themeable(theme, styles), _dec(_class = (_temp
         var title = t('Add {type} to this quiz', {
           type: this.type()
         });
-        return /*#__PURE__*/React.createElement("div", {
-          className: classNames(styles.buttons, styles.addButton)
-        }, /*#__PURE__*/React.createElement(IconButton, {
+        return jsx("div", {
+          css: [this.props.styles.buttons, this.props.styles.addButton]
+        }, jsx(IconButton, {
           color: "primary",
           shape: "circle",
           size: "small",
@@ -244,7 +232,7 @@ export var BankEntryRow = (_dec = themeable(theme, styles), _dec(_class = (_temp
     key: "renderMoveButton",
     value: function renderMoveButton() {
       var title = this.moveModalTitle();
-      return /*#__PURE__*/React.createElement(IconButton, {
+      return jsx(IconButton, {
         ref: this.storeCopyMoveBankEntryButtonRef,
         size: "medium",
         withBackground: false,
@@ -265,16 +253,16 @@ export var BankEntryRow = (_dec = themeable(theme, styles), _dec(_class = (_temp
     key: "renderHeader",
     value: function renderHeader() {
       var separator = ' | ';
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-        className: styles.headerRow
-      }, this.renderAddButton(), /*#__PURE__*/React.createElement("div", {
-        className: styles.buttons
-      }, this.props.bank.canEdit() && /*#__PURE__*/React.createElement(React.Fragment, null, this.renderEditButton(), this.renderMoveButton(), this.renderTrashButton()), this.renderExpandButton())), /*#__PURE__*/React.createElement("div", {
-        className: styles.headerText
-      }, /*#__PURE__*/React.createElement(Heading, {
+      return jsx("div", null, jsx("div", {
+        css: this.props.styles.headerRow
+      }, this.renderAddButton(), jsx("div", {
+        css: this.props.styles.buttons
+      }, this.props.bank.canEdit() && jsx(React.Fragment, null, this.renderEditButton(), this.renderMoveButton(), this.renderTrashButton()), this.renderExpandButton())), jsx("div", {
+        css: this.props.styles.headerText
+      }, jsx(Heading, {
         level: "reset",
         as: "h2"
-      }, this.entryHeader(), /*#__PURE__*/React.createElement(PresentationContent, null, separator), this.entryIdentifier())));
+      }, this.entryHeader(), jsx(PresentationContent, null, separator), this.entryIdentifier())));
     }
   }, {
     key: "renderEntryCollapsed",
@@ -283,13 +271,13 @@ export var BankEntryRow = (_dec = themeable(theme, styles), _dec(_class = (_temp
       // or title plain text
 
       if (itemOrStimulus.itemBody) {
-        return /*#__PURE__*/React.createElement(RichContentRenderer, {
-          customStyles: styles.stem,
+        return jsx(RichContentRendererEmotion, {
+          customStyles: this.props.styles.stem,
           content: itemOrStimulus.itemBody
         });
       } else {
-        return /*#__PURE__*/React.createElement("div", {
-          className: styles.stem
+        return jsx("div", {
+          css: this.props.styles.stem
         }, itemOrStimulus.title);
       }
     }
@@ -299,12 +287,12 @@ export var BankEntryRow = (_dec = themeable(theme, styles), _dec(_class = (_temp
       var entry = this.getEntry();
 
       if (this.isItemEntry()) {
-        return /*#__PURE__*/React.createElement(ItemShow, {
+        return jsx(ItemShow, {
           entry: entry,
           guid: this.props.bankEntry.id
         });
       } else {
-        return /*#__PURE__*/React.createElement(StimulusShowInfo, {
+        return jsx(StimulusShowInfo, {
           stimulus: entry
         });
       }
@@ -315,7 +303,7 @@ export var BankEntryRow = (_dec = themeable(theme, styles), _dec(_class = (_temp
       var title = t('Edit {type}', {
         type: this.type()
       });
-      return /*#__PURE__*/React.createElement(IconButton, {
+      return jsx(IconButton, {
         ref: this.storeEditButtonRef,
         size: "medium",
         withBackground: false,
@@ -334,7 +322,7 @@ export var BankEntryRow = (_dec = themeable(theme, styles), _dec(_class = (_temp
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(TagDisplay, {
+      return jsx(TagDisplay, {
         tagAssociations: this.props.tagAssociations
       });
     }
@@ -344,7 +332,7 @@ export var BankEntryRow = (_dec = themeable(theme, styles), _dec(_class = (_temp
       var lastUpdate = t.rich('<0>Last Update</0> { updatedAt }', {
         0: function _(_ref3) {
           var children = _ref3.children;
-          return /*#__PURE__*/React.createElement(Text, {
+          return jsx(Text, {
             key: "lastUpdate",
             weight: "bold",
             color: "primary"
@@ -352,24 +340,24 @@ export var BankEntryRow = (_dec = themeable(theme, styles), _dec(_class = (_temp
         },
         updatedAt: this.formatDatetimeMedium(this.props.bankEntry.get('updatedAt'))
       });
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.footer
-      }, /*#__PURE__*/React.createElement("span", null, lastUpdate), this.renderTags());
+      return jsx("div", {
+        css: this.props.styles.footer
+      }, jsx("span", null, lastUpdate), this.renderTags());
     }
   }, {
     key: "render",
     value: function render() {
       var isExpanded = this.props.isExpanded;
-      return /*#__PURE__*/React.createElement(Overlay, {
+      return jsx(Overlay, {
         onClick: this.props.toggleExpanded,
         tabIndex: "-1",
         ariaLabel: this.entryIdentifier()
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         role: "group"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.entryDetail,
+      }, jsx("div", {
+        css: this.props.styles.entryDetail,
         "data-automation": "sdk-bankEntryItem"
-      }, this.renderHeader(), isExpanded ? this.renderEntryExpanded() : this.renderEntryCollapsed()), isExpanded && this.renderFooter()), /*#__PURE__*/React.createElement(CopyMoveBankEntryModal, {
+      }, this.renderHeader(), isExpanded ? this.renderEntryExpanded() : this.renderEntryCollapsed()), isExpanded && this.renderFooter()), jsx(CopyMoveBankEntryModal, {
         createEntry: this.createEntryForBank,
         label: this.moveModalTitle(),
         sourceBankId: this.props.bank.id,
@@ -405,7 +393,9 @@ export var BankEntryRow = (_dec = themeable(theme, styles), _dec(_class = (_temp
   toggleExpanded: PropTypes.func.isRequired,
   withConfirm: PropTypes.func.isRequired,
   locale: PropTypes.string,
-  timezone: PropTypes.string
+  timezone: PropTypes.string,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   activeQuizId: null,
   addEntryToQuiz: null,

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

@@ -0,0 +1,50 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    entryDetail: {
+      padding: componentTheme.entryDetailPadding
+    },
+    headerRow: {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'flex-start',
+      color: componentTheme.headerRowColor
+    },
+    buttons: {
+      position: 'relative',
+      display: 'inline-flex',
+      zIndex: componentTheme.buttonsZIndex
+    },
+    expandButtonContainer: {
+      borderLeft: "".concat(componentTheme.expandButtonContainerBorderWidth, " solid ").concat(componentTheme.expandButtonContainerBorderColor)
+    },
+    deleteAlert: {
+      display: 'block'
+    },
+    deletePreface: {
+      marginBottom: componentTheme.deletePrefaceMargin
+    },
+    addButton: {
+      marginBottom: componentTheme.addButtonMargin
+    },
+    headerText: {
+      color: componentTheme.headerTextColor,
+      fontSize: componentTheme.headerTextFontSize
+    },
+    stem: {
+      overflowX: 'auto',
+      fontSize: componentTheme.stemFontSize,
+      lineHeight: componentTheme.stemLineHeight,
+      '& p': {
+        margin: 0
+      }
+    },
+    footer: {
+      padding: componentTheme.footerPadding,
+      borderTop: "".concat(componentTheme.footerBorderWidth, " solid ").concat(componentTheme.footerBorderColor),
+      fontSize: componentTheme.footerFontSize
+    }
+  };
+};
+
+export default generateStyle;

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

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       colors = _ref.colors,
       borders = _ref.borders,
@@ -20,4 +20,6 @@ export default function generator(_ref) {
     footerFontSize: typography.fontSizeXSmall,
     deletePrefaceMargin: spacing.xxSmall
   };
-}
+};
+
+export default generateComponentTheme;