@instructure/quiz-core 17.19.2 → 17.19.3-rc.0

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

@@ -0,0 +1,183 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.EditBankModal = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+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 = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiTextInput = require("@instructure/ui-text-input");
+
+var _uiHeading = require("@instructure/ui-heading");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _instUIMessages = require("../../../common/util/instUIMessages.js");
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _Bank = _interopRequireDefault(require("../../../common/records/Bank.js"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'cvAov',
+  template: function template(theme) {
+    return "\n\n.cvAov_detV{flex:1 1 auto;font-size:".concat(theme.bankNameInputFontSize || 'inherit', ";padding:0 ").concat(theme.bankNameInputFontSize || 'inherit', ";text-overflow:ellipsis;white-space:nowrap}");
+  },
+  'bankNameInput': 'cvAov_detV'
+};
+var EditBankModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(EditBankModal, _Component);
+
+  var _super = (0, _createSuper2.default)(EditBankModal);
+
+  function EditBankModal() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, EditBankModal);
+
+    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.continueAction = function () {
+      _this.props.showError(_this.props.errorKey);
+
+      if (_this.props.workingBank.isValid()) {
+        _this.props.updateBank(_this.props.workingBank);
+
+        _this.closeAction();
+      }
+    };
+
+    _this.closeAction = function () {
+      _this.props.hideError(_this.props.errorKey);
+
+      _this.props.clearModifications('banks', _this.props.workingBank.id);
+
+      if (_this.props.modalTrigger) {
+        _this.props.modalTrigger.focus();
+      }
+
+      _this.props.closeModal();
+    };
+
+    _this.onNameChange = function (e) {
+      _this.props.showError(_this.props.errorKey);
+
+      _this.props.changeBank(_this.props.workingBank.id, {
+        title: e.target.value
+      });
+    };
+
+    _this.getErrors = function () {
+      if (_this.props.displayError) {
+        return (0, _instUIMessages.toErrors)(_this.props.workingBank.errorsFor('title').toJS());
+      }
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(EditBankModal, [{
+    key: "renderCancelButton",
+    value: function renderCancelButton() {
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        onClick: this.closeAction,
+        className: styles.footerButtonWrapper,
+        margin: _quizCommon.XSMALL_SIDE_MARGIN
+      }, (0, _formatMessage.default)('Cancel'));
+    }
+  }, {
+    key: "renderSaveButton",
+    value: function renderSaveButton() {
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        type: "button",
+        variant: "primary",
+        onClick: this.continueAction,
+        margin: _quizCommon.XSMALL_SIDE_MARGIN,
+        "data-automation": "sdk-edit-bank-save-button"
+      }, (0, _formatMessage.default)('Save Changes'));
+    }
+  }, {
+    key: "renderContent",
+    value: function renderContent() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.bankNameInput
+      }, /*#__PURE__*/_react.default.createElement(_uiTextInput.TextInput, {
+        value: this.props.workingBank.title,
+        messages: this.getErrors(),
+        onChange: this.onNameChange,
+        renderLabel: /*#__PURE__*/_react.default.createElement("div", {
+          className: styles.bankNameLabel
+        }, (0, _formatMessage.default)('Bank Name')),
+        type: "text",
+        placeholder: (0, _formatMessage.default)('Enter a name...'),
+        "data-automation": "sdk-edit-bank-name-textinput"
+      }));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_quizCommon.Modal, {
+        open: this.props.modalOpen,
+        onDismiss: this.closeAction,
+        size: "small",
+        label: (0, _formatMessage.default)('Item Bank'),
+        "data-automation": "sdk-edit-bank-modal"
+      }, /*#__PURE__*/_react.default.createElement(_quizCommon.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        level: "reset",
+        as: "h2"
+      }, (0, _formatMessage.default)('Edit Item Bank')), /*#__PURE__*/_react.default.createElement(_uiButtons.CloseButton, {
+        onClick: this.closeAction,
+        placement: "end",
+        offset: "medium",
+        screenReaderLabel: (0, _formatMessage.default)('Close')
+      })), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalBody, null, this.renderContent()), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalFooter, null, this.renderCancelButton(), this.renderSaveButton()));
+    }
+  }]);
+  EditBankModal.displayName = "EditBankModal";
+  return EditBankModal;
+}(_react.Component), _class2.propTypes = {
+  modalOpen: _propTypes.default.bool.isRequired,
+  modalTrigger: _propTypes.default.instanceOf(_react.Component),
+  workingBank: _propTypes.default.instanceOf(_Bank.default).isRequired,
+  displayError: _propTypes.default.bool,
+  errorKey: _propTypes.default.string.isRequired,
+  updateBank: _propTypes.default.func.isRequired,
+  changeBank: _propTypes.default.func.isRequired,
+  clearModifications: _propTypes.default.func.isRequired,
+  showError: _propTypes.default.func.isRequired,
+  hideError: _propTypes.default.func.isRequired,
+  closeModal: _propTypes.default.func.isRequired
+}, _class2.defaultProps = {
+  displayError: false,
+  modalTrigger: null
+}, _temp)) || _class);
+exports.EditBankModal = EditBankModal;
+var _default = EditBankModal;
+exports.default = _default;

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var typography = _ref.typography,
+      spacing = _ref.spacing;
+  return {
+    bankNameInputFontSize: typography.fontSizeMedium,
+    bankNameInputPadding: spacing.xSmall
+  };
+}

package/lib/banks/components/HeaderMenu/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _redux = require("redux");
+
+var _reactRedux = require("../../../common/react-redux.js");
+
+var modalActions = _interopRequireWildcard(require("../../../common/actions/modal.js"));
+
+var _index = require("../../../common/components/ImportModal/index.js");
+
+var _presenter = _interopRequireDefault(require("./presenter.js"));
+
+function mapStateToProps(state, props) {
+  return {};
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    openImportModal: (0, _redux.bindActionCreators)(modalActions.openModal.bind(modalActions, (0, _index.generateImportModalId)('qtiImport')), dispatch)
+  };
+}
+
+var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_presenter.default);
+
+exports.default = _default;

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

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.HeaderMenu = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+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 = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
+
+var _uiMenu = require("@instructure/ui-menu");
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _index = _interopRequireDefault(require("../../../building/components/QTIImportModal/index.js"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'HITck',
+  template: function template(theme) {
+    return "\n\n.HITck_cLWx{font-size:".concat(theme.menuIconFontSize || 'inherit', ";margin-right:").concat(theme.menuIconMargin || 'inherit', ";vertical-align:middle}");
+  },
+  'menuIcon': 'HITck_cLWx'
+};
+var HeaderMenu = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(HeaderMenu, _Component);
+
+  var _super = (0, _createSuper2.default)(HeaderMenu);
+
+  function HeaderMenu() {
+    (0, _classCallCheck2.default)(this, HeaderMenu);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(HeaderMenu, [{
+    key: "renderMenu",
+    value: function renderMenu() {
+      return /*#__PURE__*/_react.default.createElement(_uiMenu.Menu, {
+        trigger: /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+          variant: "icon",
+          icon: _uiIcons.IconMoreSolid
+        }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('More Item Banking Actions')))
+      }, /*#__PURE__*/_react.default.createElement(_uiMenu.Menu.Item, {
+        key: "import",
+        disabled: !this.props.bank.canImport(),
+        onSelect: this.props.openImportModal
+      }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconImportLine, {
+        className: styles.menuIcon,
+        "data-automation": "sdk-headermenu-import-content"
+      }), (0, _formatMessage.default)('Import Content')));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var bank = this.props.bank;
+      return /*#__PURE__*/_react.default.createElement("div", null, this.renderMenu(), /*#__PURE__*/_react.default.createElement(_index.default, {
+        parentId: bank.id,
+        parentType: _quizCommon.PARENT_TYPE_BANK,
+        qtiImport: bank.getLatestImport(),
+        "data-automation": "sdk-qti-import-modal"
+      }));
+    }
+  }]);
+  HeaderMenu.displayName = "HeaderMenu";
+  return HeaderMenu;
+}(_react.Component), _class2.propTypes = {
+  openImportModal: _propTypes.default.func.isRequired,
+  bank: _reactImmutableProptypes.default.record.isRequired
+}, _temp)) || _class);
+exports.HeaderMenu = HeaderMenu;
+var _default = HeaderMenu;
+exports.default = _default;

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing,
+      typography = _ref.typography;
+  return {
+    menuIconMargin: spacing.xSmall,
+    menuIconFontSize: typography.fontSizeLarge
+  };
+}

package/lib/banks/components/NavWrapper/NavWrapper.examples.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _uiBreadcrumb = require("@instructure/ui-breadcrumb");
+
+var _uiText = require("@instructure/ui-text");
+
+var _default = {
+  propValues: {
+    children: [null, /*#__PURE__*/_react.default.createElement(_uiBreadcrumb.BreadcrumbLink, {
+      key: "bank"
+    }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      color: "primary"
+    }, "Bank"))],
+    navigateToBanks: [null, Function.prototype],
+    navigateToBuild: [null, Function.prototype]
+  }
+};
+exports.default = _default;

package/lib/banks/components/NavWrapper/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _reactRedux = require("../../../common/react-redux.js");
+
+var _presenter = _interopRequireDefault(require("./presenter.js"));
+
+function mapStateToProps(state) {
+  return {
+    trayOpen: !!state.getIn(['ui', _quizCommon.BUILD_TRAY_OPEN])
+  };
+}
+
+var _default = (0, _reactRedux.connect)(mapStateToProps)(_presenter.default);
+
+exports.default = _default;

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

@@ -0,0 +1,189 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+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 = _interopRequireWildcard(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _uiPropTypes = require("@instructure/ui-prop-types");
+
+var _ReturnButton = require("../../../common/components/shared/return_button/ReturnButton.js");
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiBreadcrumb = require("@instructure/ui-breadcrumb");
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _uiView = require("@instructure/ui-view");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'bSJyX',
+  template: function template(theme) {
+    return "\n\n.bSJyX_diTj{align-items:center;background-color:".concat(theme.navBackgroundColor || 'inherit', ";border-bottom:").concat(theme.navBorderWidth || 'inherit', " solid ").concat(theme.navBorderColor || 'inherit', ";box-sizing:border-box;display:flex;flex-direction:row;padding:").concat(theme.navPaddingTopBottom || 'inherit', " ").concat(theme.navPaddingLeftRight || 'inherit', ";position:sticky;top:0;width:100%;z-index:4444}\n\n@supports (-ms-ime-align:auto){.bSJyX_diTj{position:relative}}\n\n.bSJyX_ZXRE{flex:1}");
+  },
+  'nav': 'bSJyX_diTj',
+  'crumbs': 'bSJyX_ZXRE'
+};
+
+var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconBankLine, {
+  size: "x-small"
+});
+
+var NavWrapper = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(NavWrapper, _Component);
+
+  var _super = (0, _createSuper2.default)(NavWrapper);
+
+  function NavWrapper() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, NavWrapper);
+
+    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.setItemBanksRef = function (node) {
+      _this.itemBanksRef = node;
+    };
+
+    _this.setCloseButtonRef = function (node) {
+      _this.closeButtonRef = node;
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(NavWrapper, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var shouldManageFocus = this.props.trayOpen || this.props.navigateToBuild;
+      if (!shouldManageFocus) return;
+
+      if (this.closeButtonRef) {
+        _reactDom.default.findDOMNode(this.closeButtonRef).focus();
+      } else if (this.props.navigateToBanks && this.itemBanksRef) {
+        _reactDom.default.findDOMNode(this.itemBanksRef).focus();
+      }
+    }
+  }, {
+    key: "renderBreadcrumbLinks",
+    value: function renderBreadcrumbLinks() {
+      var _this$props = this.props,
+          returnToUrl = _this$props.returnToUrl,
+          canvasReferrerLinkText = _this$props.canvasReferrerLinkText;
+
+      var canvasReferrerLink = returnToUrl && canvasReferrerLinkText && /*#__PURE__*/_react.default.createElement(_uiBreadcrumb.BreadcrumbLink, {
+        key: "Context",
+        href: returnToUrl,
+        target: "_top"
+      }, canvasReferrerLinkText);
+
+      var banksLinks = /*#__PURE__*/_react.default.createElement(_uiBreadcrumb.BreadcrumbLink, {
+        ref: this.setItemBanksRef,
+        icon: _ref,
+        key: "Banks",
+        onClick: this.props.navigateToBanks
+      }, (0, _formatMessage.default)('Item Banks')); // If Breadcrumb has multiple children (even if 2nd is null), it will
+      // render the `>` icon, which we don't want if there are no children.
+
+
+      var breadCrumbLinks = [banksLinks];
+      if (this.props.children) breadCrumbLinks.push(this.props.children);
+      if (canvasReferrerLink) breadCrumbLinks.unshift(canvasReferrerLink);
+      return breadCrumbLinks;
+    }
+  }, {
+    key: "renderReturnButton",
+    value: function renderReturnButton() {
+      var _this$props2 = this.props,
+          navigateToBuild = _this$props2.navigateToBuild,
+          closeTray = _this$props2.closeTray,
+          returnToUrl = _this$props2.returnToUrl;
+
+      if (!closeTray && returnToUrl) {
+        return /*#__PURE__*/_react.default.createElement(_ReturnButton.ReturnButton, {
+          returnToUrl: returnToUrl
+        });
+      } else if (navigateToBuild) {
+        return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+          onClick: navigateToBuild
+        }, (0, _formatMessage.default)('Return'));
+      }
+    }
+  }, {
+    key: "renderCloseButton",
+    value: function renderCloseButton() {
+      if (this.props.closeTray) {
+        return /*#__PURE__*/_react.default.createElement(_uiButtons.CloseButton, {
+          elementRef: this.setCloseButtonRef,
+          placement: "start",
+          onClick: this.props.closeTray,
+          screenReaderLabel: (0, _formatMessage.default)('Return to quiz')
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_uiView.View, null, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.nav
+      }, this.renderCloseButton(), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.crumbs
+      }, /*#__PURE__*/_react.default.createElement(_uiBreadcrumb.Breadcrumb, {
+        size: "small",
+        label: (0, _formatMessage.default)('You are here:')
+      }, this.renderBreadcrumbLinks())), this.renderReturnButton(), this.props.renderHeaderMenu()));
+    }
+  }]);
+  NavWrapper.displayName = "NavWrapper";
+  return NavWrapper;
+}(_react.Component), _class2.propTypes = {
+  children: _uiPropTypes.Children.oneOf([_uiBreadcrumb.BreadcrumbLink]),
+  closeTray: _propTypes.default.func,
+  navigateToBanks: _propTypes.default.func,
+  navigateToBuild: _propTypes.default.func,
+  renderHeaderMenu: _propTypes.default.func,
+  trayOpen: _propTypes.default.bool.isRequired,
+  returnToUrl: _propTypes.default.string,
+  canvasReferrerLinkText: _propTypes.default.string
+}, _class2.defaultProps = {
+  children: null,
+  closeTray: null,
+  navigateToBanks: null,
+  navigateToBuild: null,
+  renderHeaderMenu: Function.prototype,
+  returnToUrl: null,
+  canvasReferrerLinkText: null
+}, _temp)) || _class);
+var _default = NavWrapper;
+exports.default = _default;

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing,
+      borders = _ref.borders,
+      colors = _ref.colors,
+      typography = _ref.typography,
+      breakpoints = _ref.breakpoints;
+  return {
+    navPaddingTopBottom: spacing.small,
+    navPaddingLeftRight: spacing.xLarge,
+    navBorderWidth: borders.widthSmall,
+    navBorderColor: colors.tiara,
+    navBackgroundColor: colors.white,
+    bankIconColor: colors.electric,
+    bankIconFontSize: typography.fontSizeLarge,
+    bankIconPadding: spacing.xSmall
+  };
+}