@instructure/quiz-core 20.38.0 → 21.0.1-rc.0

package/es/common/components/shared/PaginatedCollection/theme.js

@@ -5,7 +5,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   return {
     emptyPadding: spacing.small,
     emptyFontSize: typography.fontSizeLarge,
-    emptyColor: colors.ash
+    emptyColor: colors.contrasts.grey4570
   };
 };
 export default generateComponentTheme;

package/es/common/components/shared/PrintTrigger/presenter.js

@@ -8,7 +8,6 @@ import PropTypes from 'prop-types';
 import { Overlay, Mask } from '@instructure/ui-overlays';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { QuizzesSpinner as Spinner } from "../spinner/Spinner.js";
-import elementsForSelectors from "../../../util/ElementsForSelectors.js";
 import CustomPropTypes from "../../../util/CustomPropTypes.js";
 import { printWithCss, ensureImagesLoaded } from "../../../util/printUtils.js";
 import PrintFontSizeModal from "../../PrintFontSizeModal/index.js";
@@ -74,9 +73,6 @@ export var PrintTrigger = /*#__PURE__*/function (_Component) {
       });
       _this.props.openPrintFontSizeModal();
     };
-    _this.applicationElement = function () {
-      return elementsForSelectors(_this.props.appContainer);
-    };
     _this.onExited = function () {};
     _this.fontSize = '';
     return _this;
@@ -85,7 +81,6 @@ export var PrintTrigger = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Overlay, {
-        applicationElement: this.applicationElement,
         open: this.state.waitingForPrintingToBeReady,
         shouldContainFocus: true,
         transition: "fade",

package/es/common/components/shared/drag_and_drop/DragAndDropZone/theme.js

@@ -4,16 +4,16 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     borders = _ref.borders;
   return {
     DnDZoneBorderWidth: borders.widthSmall,
-    DnDZoneBorderColor: colors.tiara,
-    DnDZoneBackgroundColor: colors.porcelain,
+    DnDZoneBorderColor: colors.contrasts.grey1214,
+    DnDZoneBackgroundColor: colors.contrasts.grey1111,
     DnDZonePadding: spacing.medium,
     // sidebar:
     sidebarDnDZoneBorderWidth: borders.widthSmall,
-    sidebarDnDZoneBorderColor: colors.oxford,
-    sidebarDnDZoneBackgroundColor: colors.porcelain,
+    sidebarDnDZoneBorderColor: colors.contrasts.grey100100,
+    sidebarDnDZoneBackgroundColor: colors.contrasts.grey1111,
     sidebarDnDZonePadding: spacing.small,
     sidebarDnDZoneMargin: spacing.xSmall,
-    sidebarDnDZoneColor: colors.licorice
+    sidebarDnDZoneColor: colors.contrasts.grey125125
   };
 };
 export default generateComponentTheme;

package/es/common/components/shared/errors/theme.js

@@ -4,7 +4,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   return {
     errorFontFamily: typography.fontFamily,
     errorFontSize: typography.fontSizeSmall,
-    errorColor: colors.crimson
+    errorColor: colors.contrasts.red4570
   };
 };
 export default generateComponentTheme;

package/es/common/components/shared/file_selector/theme.js

@@ -3,9 +3,9 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     spacing = _ref.spacing,
     borders = _ref.borders;
   return {
-    dropzoneBackgroundColor: colors.porcelain,
+    dropzoneBackgroundColor: colors.contrasts.grey1111,
     dropzoneBorderWidth: borders.widthSmall,
-    dropzoneBorderColor: colors.ash,
+    dropzoneBorderColor: colors.contrasts.grey4570,
     dropzonePadding: spacing.medium
   };
 };

package/es/common/components/shared/overlay/theme.js

@@ -4,7 +4,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     spacing = _ref.spacing;
   return {
     overlayZIndex: '2222',
-    overlayBarColor: colors.electric,
+    overlayBarColor: colors.contrasts.blue4570,
     overlayBarSize: '0.3rem'
   };
 };

package/es/moderating/components/events/theme.js

@@ -6,7 +6,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     embeddedImageMargin: spacing.xSmall,
     embeddedImagePadding: spacing.small,
     mediaToggleMargin: spacing.xSmall,
-    mediaToggleColor: colors.tiara
+    mediaToggleColor: colors.contrasts.grey1214
   };
 };
 export default generateComponentTheme;

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

@@ -3,7 +3,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     colors = _ref.colors;
   return {
     emptyTextMargin: spacing.small,
-    pageBackgroundColor: colors.white
+    pageBackgroundColor: colors.contrasts.white1010
   };
 };
 export default generateComponentTheme;

package/es/reporting/components/charts/Distribution/theme.js

@@ -2,8 +2,8 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
     typography = _ref.typography;
   return {
-    barFillColor: colors.electric,
-    barStarFillColor: colors.fire,
+    barFillColor: colors.contrasts.blue4570,
+    barStarFillColor: colors.contrasts.orange4570,
     barLabelColor: colors.textDarkest,
     barLabelFontFamily: typography.fontFamily,
     barLabelFontSize: typography.fontSizeSmall,

package/es/reporting/components/charts/Legend/theme.js

@@ -5,11 +5,11 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     typography = _ref.typography;
   return {
     containerBorderWidth: borders.widthSmall,
-    containerBorderColor: colors.tiara,
+    containerBorderColor: colors.contrasts.grey1214,
     seriesContainerMargin: spacing.small,
     seriesContainerRowMargin: spacing.medium,
     seriesSwatchMargin: spacing.small,
-    seriesSwatchBackgroundColor: colors.electric,
+    seriesSwatchBackgroundColor: colors.contrasts.blue4570,
     seriesLabelFontFamily: typography.fontFamily,
     seriesLabelFontSize: typography.fontSizeXSmall,
     seriesLabelColor: colors.textDarkest

package/es/reporting/components/itemAnalysis/AnswerFrequencySummary/theme.js

@@ -6,20 +6,20 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     borders = _ref.borders,
     transitions = _ref.transitions;
   return {
-    contentCellBorderColor: colors.tiara,
+    contentCellBorderColor: colors.contrasts.grey1214,
     answerRowCellPadding: spacing.xSmall,
-    answerRowCorrectBackgroundColor: colors.white,
-    answerRowAnswerIconColor: colors.shamrock,
+    answerRowCorrectBackgroundColor: colors.contrasts.white1010,
+    answerRowAnswerIconColor: colors.contrasts.green4570,
     answerRowCorrectTextFieldFontWeight: typography.fontWeightBold,
-    answerRowCorrectBarBackgroundColor: colors.shamrock,
+    answerRowCorrectBarBackgroundColor: colors.contrasts.green4570,
     answerIconFontSize: typography.fontSizeXSmall,
-    answerIconColor: colors.ash,
+    answerIconColor: colors.contrasts.grey4570,
     answerTextfieldFontWeight: typography.fontWeightNormal,
-    respondentLinkColor: colors.ash,
-    respondentLinkPresentColor: colors.electric,
+    respondentLinkColor: colors.contrasts.grey4570,
+    respondentLinkPresentColor: colors.contrasts.blue4570,
     answerRatioPaddingLeft: spacing.small,
     barMinWidth: borders.widthSmall,
-    barBackgroundColor: colors.licorice,
+    barBackgroundColor: colors.contrasts.grey125125,
     phoneBreakPoint: "max-width: ".concat(breakpoints.medium),
     barTransition: "width ".concat(transitions.duration)
   };

package/es/reporting/components/itemAnalysis/ItemAnalysisRow/theme.js

@@ -6,20 +6,20 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   return {
     itemAnalysisRowPadding: spacing.small,
     itemAnalysisRowMargin: spacing.small,
-    headerTextColor: colors.ash,
+    headerTextColor: colors.contrasts.grey4570,
     headerTextFontSize: typography.fontSizeXSmall,
     metricNoteFontSize: typography.fontSizeMedium,
-    metricNoteColor: colors.ash,
+    metricNoteColor: colors.contrasts.grey4570,
     metricsRowLowerPadding: spacing.large,
     stemFontSize: typography.fontSizeXSmall,
     stemLineHeight: typography.lineHeight,
     stemMargin: spacing.small,
     emptyTextPadding: spacing.small,
-    emptyTextColor: colors.ash,
+    emptyTextColor: colors.contrasts.grey4570,
     answerDistributionPadding: spacing.small,
     answerDistributionChartPadding: spacing.small,
     answerDistributionLegendPadding: spacing.small,
-    answerDistributionSwatchColor: colors.electric,
+    answerDistributionSwatchColor: colors.contrasts.blue4570,
     phoneBreakPoint: "max-width: ".concat(breakpoints.medium)
   };
 };

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/LegacyChoiceType/ChoiceTypeTableRow/theme.js

@@ -1,7 +1,7 @@
 var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors;
   return {
-    colorGreen: colors.shamrock,
+    colorGreen: colors.contrasts.green4570,
     cellPadding: '0.75rem 0.75rem'
   };
 };

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/AggregationTable/theme.js

@@ -1,11 +1,11 @@
 var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors;
   return {
-    colorGreen: colors.shamrock,
-    colorBlue: colors.brand,
-    colorRed: colors.crimson,
-    colorGrey: colors.ash,
-    colorHeaderBottomBorder: colors.tiara,
+    colorGreen: colors.contrasts.green4570,
+    colorBlue: colors.contrasts.blue4570,
+    colorRed: colors.contrasts.red4570,
+    colorGrey: colors.contrasts.grey4570,
+    colorHeaderBottomBorder: colors.contrasts.grey1214,
     cellPadding: '13.5px 13.5px;'
   };
 };

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/ChoiceTypeTable/theme.js

@@ -3,8 +3,8 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     colors = _ref.colors;
   return {
     tableBottomPadding: spacing.medium,
-    colorGreen: colors.shamrock,
-    colorGray: colors.tiara,
+    colorGreen: colors.contrasts.green4570,
+    colorGray: colors.contrasts.grey1214,
     cellPadding: '0.75rem 0.75rem'
   };
 };

package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/BlankIcon/theme.js

@@ -1,7 +1,7 @@
 var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors;
   return {
-    blankBorderColor: colors.tiara,
+    blankBorderColor: colors.contrasts.grey1214,
     blankBorderRadius: '14px',
     blankMinWidth: '20px',
     blankHeight: '20px'

package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/theme.js

@@ -9,7 +9,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     viewPaddingRight: spacing.xxSmall,
     metricNumberContextFontSize: typography.fontSizeMedium,
     metricNumberContextFontWeight: typography.fontWeightNormal,
-    blankBorderColor: colors.tiara,
+    blankBorderColor: colors.contrasts.grey1214,
     blankBorderRadius: '14px',
     blankMinWidth: '20px',
     blankHeight: '20px'

package/es/reporting/components/resources/NewQuizAndItemAnalysis/ReportCard/theme.js

@@ -7,7 +7,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     cardWidth: '19.5rem',
     cardPadding: spacing.medium,
     cardMargin: spacing.xSmall,
-    quizSummaryBorderBottomColor: colors.tiara
+    quizSummaryBorderBottomColor: colors.contrasts.grey1214
   };
 };
 export default generateComponentTheme;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/charts/ScoreDistribution/theme.js

@@ -3,9 +3,9 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     spacing = _ref.spacing,
     typography = _ref.typography;
   return {
-    legendRectFillColor: colors.electric,
+    legendRectFillColor: colors.contrasts.blue4570,
     legendPadding: spacing.small,
-    legendBorderColor: colors.ash,
+    legendBorderColor: colors.contrasts.grey4570,
     legendFontSize: typography.fontSizeXSmall,
     legendMargin: spacing.medium
   };

package/es/reporting/components/resources/OutcomeAnalysis/presenter.js

@@ -7,21 +7,12 @@ import PropTypes from 'prop-types';
 import OutcomesPerStudentReport from '@instructure/outcomes-ui/es/containers/OutcomesPerStudentReport';
 import { liveRegion } from '@instructure/quiz-common';
 import CustomPropTypes from "../../../../common/util/CustomPropTypes.js";
-import elementsForSelectors from "../../../../common/util/ElementsForSelectors.js";
 export var OutcomeAnalysis = /*#__PURE__*/function (_Component) {
   _inherits(OutcomeAnalysis, _Component);
   var _super = _createSuper(OutcomeAnalysis);
   function OutcomeAnalysis() {
-    var _this;
     _classCallCheck(this, OutcomeAnalysis);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _this.applicationElement = function () {
-      return elementsForSelectors(_this.props.appContainer);
-    };
-    return _this;
+    return _super.apply(this, arguments);
   }
   _createClass(OutcomeAnalysis, [{
     key: "render",
@@ -34,7 +25,6 @@ export var OutcomeAnalysis = /*#__PURE__*/function (_Component) {
         loadUsersOverride = _this$props.loadUsersOverride,
         showRollups = _this$props.showRollups;
       return /*#__PURE__*/React.createElement(OutcomesPerStudentReport, {
-        applicationElement: this.applicationElement,
         artifactType: "quizzes.quiz",
         artifactId: quizId,
         contextUuid: contextUuid,

package/es/reporting/components/resources/QuizAndItemAnalysis/theme.js

@@ -8,7 +8,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     titleMarginBottom: spacing.xSmall,
     emptyTextPadding: spacing.small,
     emptyTextFontSize: typography.fontSizeLarge,
-    emptyTextColor: colors.ash
+    emptyTextColor: colors.contrasts.grey4570
   };
 };
 export default generateComponentTheme;

package/es/reporting/components/resources/StudentAnalysis/ReportCard/theme.js

@@ -9,6 +9,6 @@ export var generateComponentTheme = function generateComponentTheme(_ref) {
     cardWidth: '19.5rem',
     cardPadding: spacing.medium,
     cardMargin: spacing.xSmall,
-    quizSummaryBorderBottomColor: colors.tiara
+    quizSummaryBorderBottomColor: colors.contrasts.grey1214
   };
 };

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

@@ -9,7 +9,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     colors = _ref.colors,
     breakpoints = _ref.breakpoints;
   return {
-    contentBackgroundColor: colors.white,
+    contentBackgroundColor: colors.contrasts.white1010,
     contentPaddingTopBottom: spacing.medium,
     contentPaddingLeftRight: spacing.medium,
     breadCrumbMarginBottom: spacing.large,

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

@@ -10,17 +10,17 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     typography = _ref.typography,
     borders = _ref.borders;
   return {
-    contentBackgroundColor: colors.white,
+    contentBackgroundColor: colors.contrasts.white1010,
     contentPaddingTopBottom: 0,
     contentPaddingLeftRight: 0,
     breadCrumbMarginBottom: spacing.large,
     entryRowMargin: spacing.small,
-    headerRowColor: colors.ash,
+    headerRowColor: colors.contrasts.grey4570,
     headerRowPadding: spacing.small,
     headerTextFontSize: typography.fontSizeSmall,
     leftHeaderMargin: spacing.small,
-    headerBackgroundColor: colors.porcelain,
-    headerColor: colors.licorice,
+    headerBackgroundColor: colors.contrasts.grey1111,
+    headerColor: colors.contrasts.grey125125,
     headerPaddingTopBottom: spacing.xSmall,
     headerPaddingLeftRight: spacing.small,
     footerPaddingBottom: spacing.xSmall,
@@ -28,7 +28,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     rightHeaderPaddingLeft: spacing.xSmall,
     rightFooterPaddingLeftRight: spacing.small,
     entryEditBorderWidth: borders.widthSmall,
-    entryEditBorderColor: colors.tiara
+    entryEditBorderColor: colors.contrasts.grey1214
   };
 };
 var _default = generateComponentTheme;

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

@@ -38,7 +38,6 @@ var generateStyle = function generateStyle(componentTheme) {
       fontSize: componentTheme.headerTextFontSize
     },
     stem: {
-      overflowX: 'auto',
       fontSize: componentTheme.stemFontSize,
       lineHeight: componentTheme.stemLineHeight,
       '& p': {

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

@@ -11,18 +11,18 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     typography = _ref.typography;
   return {
     entryDetailPadding: spacing.small,
-    headerRowColor: colors.ash,
+    headerRowColor: colors.contrasts.grey4570,
     buttonsZIndex: '3333',
     expandButtonContainerBorderWidth: borders.widthMedium,
-    expandButtonContainerBorderColor: colors.tiara,
+    expandButtonContainerBorderColor: colors.contrasts.grey1214,
     addButtonMargin: spacing.small,
-    headerTextColor: colors.ash,
+    headerTextColor: colors.contrasts.grey4570,
     headerTextFontSize: typography.fontSizeXSmall,
     stemFontSize: typography.fontSizeMedium,
     stemLineHeight: typography.lineHeight,
     footerPadding: spacing.medium,
     footerBorderWidth: borders.widthSmall,
-    footerBorderColor: colors.tiara,
+    footerBorderColor: colors.contrasts.grey1214,
     footerFontSize: typography.fontSizeXSmall,
     deletePrefaceMargin: spacing.xxSmall
   };

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

@@ -9,13 +9,13 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     spacing = _ref.spacing,
     borders = _ref.borders;
   return {
-    contentBackgroundColor: colors.white,
+    contentBackgroundColor: colors.contrasts.white1010,
     contentPaddingTopBottom: spacing.medium,
     contentPaddingLeftRight: spacing.xLarge,
     breadCrumbMarginBottom: spacing.large,
     headerPaddingBottom: spacing.large,
     headerBorderWidth: borders.widthSmall,
-    headerBorderColor: colors.tiara
+    headerBorderColor: colors.contrasts.grey1214
   };
 };
 var _default = generateComponentTheme;

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

@@ -11,13 +11,13 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     spacing = _ref.spacing;
   return {
     bankRowBorderWidth: borders.widthSmall,
-    bankRowBorderColor: colors.tiara,
+    bankRowBorderColor: colors.contrasts.grey1214,
     bankInfoMargin: spacing.small,
     bankTitleFontSize: typography.fontSizeSmall,
     bankTitlePadding: spacing.xSmall,
-    bankTitleLinkColor: colors.licorice,
-    bankTitleLinkHoverColor: colors.licorice,
-    bankDetailsColor: colors.ash,
+    bankTitleLinkColor: colors.contrasts.grey125125,
+    bankTitleLinkHoverColor: colors.contrasts.grey125125,
+    bankDetailsColor: colors.contrasts.grey4570,
     bankDetailsFontSize: typography.fontSizeXSmall,
     bankOptionsMargin: spacing.small,
     BankOptionIconMargin: spacing.xSmall,

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

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +10,7 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uiButtons = require("@instructure/ui-buttons");
 var _uiCheckbox = require("@instructure/ui-checkbox");
@@ -20,20 +21,15 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
 var _Bank = _interopRequireDefault(require("../../../common/records/Bank.js"));
 var _instUIMessages = require("../../../common/util/instUIMessages.js");
 var _quizCommon = require("@instructure/quiz-common");
-var _styles = _interopRequireDefault(require("./styles.js"));
-var _theme = _interopRequireDefault(require("./theme.js"));
-var _dec, _class, _CreateBankModal;
+var _CreateBankModal;
 /** @jsx jsx */
-var CreateBankModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _theme.default), _dec(_class = (_CreateBankModal = /*#__PURE__*/function (_Component) {
+var CreateBankModal = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CreateBankModal, _Component);
   var _super = (0, _createSuper2.default)(CreateBankModal);
-  function CreateBankModal() {
+  function CreateBankModal(props) {
     var _this;
     (0, _classCallCheck2.default)(this, CreateBankModal);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call(this, props);
     _this.state = {
       shareWithCourse: false
     };
@@ -45,7 +41,8 @@ var CreateBankModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defaul
         _this.props.onCreateBank();
         _this.closeAction();
       } else {
-        _this.props.screenreaderNotification((0, _formatMessage.default)('Bank name cannot be blank.'));
+        var _this$bankNameInput$c;
+        (_this$bankNameInput$c = _this.bankNameInput.current) === null || _this$bankNameInput$c === void 0 ? void 0 : _this$bankNameInput$c.focus();
       }
     };
     _this.closeAction = function () {
@@ -75,6 +72,7 @@ var CreateBankModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defaul
         shareWithCourse: event.target.checked
       });
     };
+    _this.bankNameInput = /*#__PURE__*/_react.default.createRef();
     return _this;
   }
   (0, _createClass2.default)(CreateBankModal, [{
@@ -99,17 +97,14 @@ var CreateBankModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defaul
   }, {
     key: "renderContent",
     value: function renderContent() {
-      return (0, _emotion.jsx)("div", {
-        css: this.props.styles.bankNameInput
-      }, (0, _emotion.jsx)(_quizCommon.TextInput, {
+      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_quizCommon.TextInput, {
         messages: this.getErrors(),
         onChange: this.onNameChange,
-        renderLabel: (0, _emotion.jsx)("div", {
-          css: this.props.styles.bankNameLabel
-        }, (0, _formatMessage.default)('Bank Name')),
+        renderLabel: (0, _formatMessage.default)('Bank Name'),
+        isRequired: true,
         type: "text",
-        placeholder: (0, _formatMessage.default)('Enter a name...'),
-        "data-automation": "sdk-create-bank-name-textinput"
+        "data-automation": "sdk-create-bank-name-textinput",
+        ref: this.bankNameInput
       }), this.renderCheckbox());
     }
   }, {
@@ -141,7 +136,6 @@ var CreateBankModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defaul
         label: (0, _formatMessage.default)('Item Bank'),
         "data-automation": "sdk-create-bank-modal"
       }, (0, _emotion.jsx)(_quizCommon.ModalHeader, null, (0, _emotion.jsx)(_uiHeading.Heading, {
-        level: "reset",
         as: "h2"
       }, (0, _formatMessage.default)('New Item Bank')), (0, _emotion.jsx)(_uiButtons.CloseButton, {
         onClick: this.closeAction,
@@ -153,7 +147,12 @@ var CreateBankModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defaul
   }]);
   CreateBankModal.displayName = "CreateBankModal";
   return CreateBankModal;
-}(_react.Component), _CreateBankModal.displayName = 'CreateBankModal', _CreateBankModal.componentId = "Quizzes".concat(_CreateBankModal.displayName), _CreateBankModal.propTypes = {
+}(_react.Component);
+exports.CreateBankModal = CreateBankModal;
+_CreateBankModal = CreateBankModal;
+CreateBankModal.displayName = 'CreateBankModal';
+CreateBankModal.componentId = "Quizzes".concat(_CreateBankModal.displayName);
+CreateBankModal.propTypes = {
   modalOpen: _propTypes.default.bool.isRequired,
   modalTrigger: _propTypes.default.instanceOf(_react.Component),
   temporaryBank: _propTypes.default.instanceOf(_Bank.default).isRequired,
@@ -176,13 +175,13 @@ var CreateBankModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defaul
     root_account_name: _propTypes.default.string
   }),
   styles: _propTypes.default.object
-}, _CreateBankModal.defaultProps = {
+};
+CreateBankModal.defaultProps = {
   displayError: false,
   modalTrigger: null,
   showShareBankOnCreate: false,
   itemBanksScope: {},
   onCreateBank: function onCreateBank() {}
-}, _CreateBankModal)) || _class);
-exports.CreateBankModal = CreateBankModal;
+};
 var _default = CreateBankModal;
 exports.default = _default;