@instructure/quiz-core 20.36.2 → 20.38.0

package/lib/building/components/resources/DeleteStimulusModal/presenter.js

@@ -121,6 +121,12 @@ var DeleteStimulusModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.de
         cancelText: (0, _formatMessage.default)('Cancel')
       };
     }
+  }, {
+    key: "isPassage",
+    value: function isPassage() {
+      var _this$props$stimulusE;
+      return (_this$props$stimulusE = this.props.stimulusEntry) === null || _this$props$stimulusE === void 0 ? void 0 : _this$props$stimulusE.getEntry().passage;
+    }
   }, {
     key: "anyImmutableKeepers",
     value: function anyImmutableKeepers() {
@@ -149,8 +155,8 @@ var DeleteStimulusModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.de
       return (0, _emotion.jsx)(_uiButtons.Button, {
         onClick: this.closeAction,
         margin: _quizCommon.XSMALL_SIDE_MARGIN,
-        "data-automation": "sdk-keep-stimulus-button"
-      }, (0, _formatMessage.default)('Keep Stimulus'));
+        "data-automation": "sdk-keep-".concat(this.isPassage() ? 'passage' : 'stimulus', "-button")
+      }, this.isPassage() ? (0, _formatMessage.default)('Keep Passage') : (0, _formatMessage.default)('Keep Stimulus'));
     }
   }, {
     key: "doneButton",
@@ -164,8 +170,8 @@ var DeleteStimulusModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.de
         color: "primary",
         onClick: this.handleSubmit,
         margin: _quizCommon.XSMALL_SIDE_MARGIN,
-        "data-automation": "sdk-remove-stimulus-button"
-      }, (0, _formatMessage.default)('Remove Stimulus'));
+        "data-automation": "sdk-remove-".concat(this.isPassage() ? 'passage' : 'stimulus', "-button")
+      }, this.isPassage() ? (0, _formatMessage.default)('Remove Passage') : (0, _formatMessage.default)('Remove Stimulus'));
     }
   }, {
     key: "renderChooseWhich",
@@ -206,7 +212,8 @@ var DeleteStimulusModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.de
   }, {
     key: "renderContent",
     value: function renderContent() {
-      var content = this.props.childEntries.size === 0 ? (0, _emotion.jsx)("span", null, (0, _formatMessage.default)('Are you sure you want to remove this stimulus?')) : this.renderMainMenu();
+      var message = this.isPassage() ? (0, _formatMessage.default)('Are you sure you want to remove this passage?') : (0, _formatMessage.default)('Are you sure you want to remove this stimulus?');
+      var content = this.props.childEntries.size === 0 ? (0, _emotion.jsx)("span", null, message) : this.renderMainMenu();
       var stimulusTitle = this.props.stimulusEntry && this.props.stimulusEntry.getEntry().title;
       return (0, _emotion.jsx)("div", {
         className: "deleteStimulusModal",
@@ -222,11 +229,11 @@ var DeleteStimulusModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.de
         open: this.props.modalOpen,
         onDismiss: this.closeAction,
         size: "small",
-        label: (0, _formatMessage.default)('Confirm Stimulus Removal')
+        label: this.isPassage() ? (0, _formatMessage.default)('Confirm Passage Removal') : (0, _formatMessage.default)('Confirm Stimulus Removal')
       }, (0, _emotion.jsx)(_quizCommon.ModalHeader, null, (0, _emotion.jsx)(_uiHeading.Heading, {
         level: "reset",
         as: "h2"
-      }, (0, _formatMessage.default)('Confirm Stimulus Removal')), (0, _emotion.jsx)(_uiButtons.CloseButton, {
+      }, this.isPassage() ? (0, _formatMessage.default)('Confirm Passage Removal') : (0, _formatMessage.default)('Confirm Stimulus Removal')), (0, _emotion.jsx)(_uiButtons.CloseButton, {
         onClick: this.closeAction,
         placement: "end",
         offset: "medium",

package/lib/building/components/resources/quizEntry/QuizEntry/presenter.js

@@ -45,10 +45,10 @@ var QuizEntry = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _th
   function QuizEntry() {
     var _this;
     (0, _classCallCheck2.default)(this, QuizEntry);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+    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.apply(_super, [this].concat(_args));
     _this.itemOverrideTypes = function () {
       return ['choice'].concat((0, _toConsumableArray2.default)(_this.props.partialScoringEnabled ? ['multi-answer'] : []), (0, _toConsumableArray2.default)(_this.props.partialDeepScoringEnabled ? ['matching'] : []));
     };
@@ -103,7 +103,14 @@ var QuizEntry = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _th
     };
     _this.bankEntryWarningWrapperProps = function () {
       if (_this.props.quizEntry.entryEditable) {
-        var propsFunc = _this.props.quizEntry.hasStimulus ? _warningHelpers.propsForStimulusBankEntryEditPrompt : _warningHelpers.propsForItemBankEntryEditPrompt;
+        var _this$props$entry;
+        var isPassage = (_this$props$entry = _this.props.entry) === null || _this$props$entry === void 0 ? void 0 : _this$props$entry.passage;
+        var propsFunc = _this.props.quizEntry.hasStimulus ? function () {
+          for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+            args[_key2] = arguments[_key2];
+          }
+          return _warningHelpers.propsForStimulusBankEntryEditPrompt.apply(void 0, [isPassage].concat(args));
+        } : _warningHelpers.propsForItemBankEntryEditPrompt;
         return propsFunc(_this.isEditing(), _this.props.switchOffEditing, function () {
           var bankEntry = _this.props.quizEntry.getEntry();
           _this.props.setUi(_quizCommon.BUILD_TRAY_OPEN, true);

package/lib/building/components/resources/quizEntry/QuizEntryEdit/Footer/presenter.js

@@ -14,7 +14,6 @@ var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 var _uiView = require("@instructure/ui-view");
-var _uiFlex = require("@instructure/ui-flex");
 var _uiA11yContent = require("@instructure/ui-a11y-content");
 var _uiText = require("@instructure/ui-text");
 var _quizNumberInput = _interopRequireDefault(require("@instructure/quiz-number-input"));
@@ -205,13 +204,13 @@ var QuizEntryEditFooter = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.de
         as: "div",
         background: "secondary",
         padding: "xx-small none"
-      }, (0, _emotion.jsx)(_uiFlex.Flex, {
+      }, (0, _emotion.jsx)(_quizCommon.Flex, {
         wrap: "wrap",
         justifyItems: "space-between",
         alignItems: "center"
-      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, {
+      }, (0, _emotion.jsx)(_quizCommon.Flex.Item, {
         padding: "xx-small small"
-      }, this.renderLeftFooter()), (0, _emotion.jsx)(_uiFlex.Flex.Item, {
+      }, this.renderLeftFooter()), (0, _emotion.jsx)(_quizCommon.Flex.Item, {
         padding: "xx-small small"
       }, this.renderRightFooter())));
     }

package/lib/building/components/resources/quizEntry/QuizEntryEdit/Header/index.js

@@ -15,9 +15,9 @@ var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 var _partial = _interopRequireDefault(require("lodash/partial"));
+var _uiText = require("@instructure/ui-text");
 var _uiA11yContent = require("@instructure/ui-a11y-content");
 var _uiButtons = require("@instructure/ui-buttons");
-var _uiTextInput = require("@instructure/ui-text-input");
 var _emotion = require("@instructure/emotion");
 var _quizInteractions = require("@instructure/quiz-interactions");
 var _uiIcons = require("@instructure/ui-icons");
@@ -29,6 +29,7 @@ var _index = _interopRequireDefault(require("../../../ActionButtons/index.js"));
 var _quizCommon = require("@instructure/quiz-common");
 var _styles = _interopRequireDefault(require("./styles.js"));
 var _theme = _interopRequireDefault(require("./theme.js"));
+var _uiView = require("@instructure/ui-view");
 var _dec, _class, _QuizEntryHeader;
 /** @jsx jsx */
 var _ref2 = (0, _emotion.jsx)(_uiIcons.IconBankLine, null);
@@ -189,16 +190,19 @@ var QuizEntryHeader = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defaul
   }, {
     key: "renderName",
     value: function renderName() {
-      if (this.props.quizEntry.isBank && this.props.newActiveBank) {
-        return (0, _emotion.jsx)(_uiButtons.CondensedButton, {
+      var isBank = this.props.quizEntry.isBank && this.props.newActiveBank;
+      var dataAutomation = 'sdk-quiz-entry-interaction-type';
+      if (!isBank) {
+        return (0, _emotion.jsx)(_uiText.Text, {
           size: "small",
-          margin: "0 0 0 x-small",
-          onClick: this.handleBankClick,
-          "data-automation": "sdk-quiz-entry-interaction-type"
+          weight: "normal",
+          "data-automation": dataAutomation
         }, this.props.name);
       }
-      return (0, _emotion.jsx)("div", {
-        css: this.props.styles.interactionType,
+      return (0, _emotion.jsx)(_uiButtons.CondensedButton, {
+        size: "small",
+        margin: "0 0 0 x-small",
+        onClick: this.handleBankClick,
         "data-automation": "sdk-quiz-entry-interaction-type"
       }, this.props.name);
     }
@@ -218,20 +222,22 @@ var QuizEntryHeader = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defaul
         questionNumber: displayPosition,
         interactionType: entry.getInteractionType().name
       });
-      return (0, _emotion.jsx)("div", {
-        css: this.props.styles.titleHolder
-      }, (0, _emotion.jsx)("span", {
-        css: this.props.styles.titleInput
-      }, (0, _emotion.jsx)(_uiTextInput.TextInput, {
+      return (0, _emotion.jsx)(_quizCommon.TextInput, {
         ref: this.storeTitleRef,
-        renderLabel: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, titleLabelText),
+        renderLabel: (0, _emotion.jsx)(_quizCommon.Flex, {
+          direction: "column",
+          gap: "small"
+        }, (0, _emotion.jsx)(_quizCommon.Flex.Item, {
+          "aria-hidden": true
+        }, this.renderName()), (0, _emotion.jsx)(_quizCommon.Flex.Item, {
+          "aria-hidden": true
+        }, (0, _formatMessage.default)('Question Title')), (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, titleLabelText)),
         type: "text",
-        placeholder: (0, _formatMessage.default)('Question Title'),
         onChange: this.handleTitleChange,
         value: workingEntry.title || '',
         interaction: disabled ? 'disabled' : 'enabled',
         "data-automation": "sdk-question-title-textinput"
-      })));
+      });
     }
   }, {
     key: "renderLeftHeader",
@@ -240,14 +246,16 @@ var QuizEntryHeader = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defaul
         position: this.props.displayPosition
       });
       var position = this.props.disabledForRegrade ? this.props.displayPosition : this.props.quizEntry.positionToDisplay(this.props.displayPosition);
-      return (0, _emotion.jsx)("div", {
+      return (0, _emotion.jsx)(_quizCommon.Flex, {
         className: "leftHeader",
-        css: this.props.styles.leftHeader
+        direction: "row",
+        justifyItems: "center",
+        "data-automation": "sdk-quiz-entry-left-header"
       }, (0, _emotion.jsx)(_PositionBox.default, {
         position: position,
         headingText: positionText,
         "data-automation": "sdk-quiz-entry-positionbox"
-      }), this.renderBankedContent(), this.renderName(), (0, _emotion.jsx)("div", {
+      }), this.renderBankedContent(), (0, _emotion.jsx)("div", {
         css: this.props.styles.dividingLine
       }), this.renderTitleHolder());
     }
@@ -267,12 +275,21 @@ var QuizEntryHeader = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defaul
         shouldDisableDeleteButton: this.props.disabledForRegrade,
         shouldRenderEdit: false
       };
-      return (0, _emotion.jsx)("div", {
+      return (0, _emotion.jsx)(_uiView.View, {
+        as: "div",
         className: "header",
-        css: this.props.styles.header
+        background: "secondary",
+        padding: "small"
       }, (0, _emotion.jsx)(_emotion.Global, {
         styles: this.props.styles.globalStyles
-      }), this.renderLeftHeader(), (0, _emotion.jsx)(_index.default, actionButtonProps));
+      }), (0, _emotion.jsx)(_quizCommon.Flex, {
+        className: "header",
+        direction: "row",
+        gap: "small"
+      }, (0, _emotion.jsx)(_quizCommon.Flex.Item, {
+        shouldShrink: false,
+        shouldGrow: true
+      }, this.renderLeftHeader()), (0, _emotion.jsx)(_quizCommon.Flex.Item, null, (0, _emotion.jsx)(_index.default, actionButtonProps))));
     }
   }]);
   QuizEntryHeader.displayName = "QuizEntryHeader";

package/lib/building/components/resources/quizEntry/QuizEntryEdit/Header/styles.js

@@ -14,39 +14,11 @@ var generateStyle = function generateStyle(componentTheme) {
     },
     header: {
       backgroundColor: componentTheme.headerBackgroundColor,
-      color: componentTheme.headerColor,
-      padding: componentTheme.headerPadding,
-      display: 'flex',
-      justifyContent: 'space-between',
-      verticalAlign: 'middle',
-      alignItems: 'center'
-    },
-    leftHeader: {
-      flex: '8 0 0',
-      display: 'inline-flex',
-      flexWrap: 'nowrap',
-      alignItems: 'center',
-      /* fix for ie11 */
-      width: '100%'
-    },
-    interactionType: {
-      fontSize: componentTheme.interactionTypeFontSize,
-      marginLeft: componentTheme.interactionTypeLeftMargin,
-      marginRight: componentTheme.interactionTypeRightMargin
+      color: componentTheme.headerColor
     },
     dividingLine: {
       width: '0',
       borderLeft: componentTheme.dividingLineLeftBorder
-    },
-    titleHolder: {
-      display: 'flex',
-      flex: '1 1 auto'
-    },
-    titleInput: {
-      flex: '1 1 auto',
-      fontSize: componentTheme.titleInputFontSize,
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis'
     }
   };
 };

package/lib/building/components/resources/quizEntry/QuizEntryEdit/Header/theme.js

@@ -11,11 +11,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   return {
     headerBackgroundColor: colors.porcelain,
     headerColor: colors.oxford,
-    headerPadding: "".concat(spacing.xSmall, " ").concat(spacing.small),
-    interactionTypeFontSize: typography.fontSizeSmall,
-    interactionTypeLeftMargin: spacing.xSmall,
-    interactionTypeRightMargin: spacing.xSmall,
-    titleInputFontSize: typography.fontSizeMedium
+    headerPadding: "".concat(spacing.xSmall, " ").concat(spacing.small)
   };
 };
 var _default = generateComponentTheme;

package/lib/common/actions/modifications.js

@@ -520,13 +520,14 @@ function clearTemporaryBankItem(bankId) {
 // =====================
 // =====================
 
-function createStimulus(quizId, position) {
+function createStimulus(quizId, position, isPassage) {
   return function (dispatch, getState) {
     dispatch({
       type: _quizCommon.CREATE_TEMPORARY_STIMULUS,
       payload: {
         quizId: quizId,
-        position: position
+        position: position,
+        isPassage: isPassage
       }
     });
   };

package/lib/common/components/AccessCodeTextInput/AccessCodeTextInput.stories.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.whenRendered = exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _index = require("./index.js");
+var _default = {
+  title: _index.AccessCodeTextInput.name
+};
+exports.default = _default;
+var _ref = /*#__PURE__*/_react.default.createElement(_index.AccessCodeTextInput, {
+  value: "Is it secret? Is it safe?"
+});
+var whenRendered = function whenRendered() {
+  return _ref;
+};
+exports.whenRendered = whenRendered;

package/lib/common/components/AccessCodeTextInput/index.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AccessCodeTextInput = 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 _index = _interopRequireDefault(require("../MaskedTextInput/index.js"));
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+var AccessCodeTextInput = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(AccessCodeTextInput, _Component);
+  var _super = (0, _createSuper2.default)(AccessCodeTextInput);
+  function AccessCodeTextInput() {
+    var _this;
+    (0, _classCallCheck2.default)(this, AccessCodeTextInput);
+    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.state = {
+      masked: true
+    };
+    _this.handleMaskedChange = function () {
+      _this.setState(function (state) {
+        return {
+          masked: !state.masked
+        };
+      });
+    };
+    return _this;
+  }
+  (0, _createClass2.default)(AccessCodeTextInput, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_index.default, Object.assign({
+        renderLabel: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Access Code')),
+        display: "inline-block",
+        type: "text",
+        onMaskedChange: this.handleMaskedChange,
+        masked: this.state.masked,
+        checkboxLabel: (0, _formatMessage.default)('Show access code')
+      }, this.props));
+    }
+  }]);
+  AccessCodeTextInput.displayName = "AccessCodeTextInput";
+  return AccessCodeTextInput;
+}(_react.Component);
+exports.AccessCodeTextInput = AccessCodeTextInput;
+var _default = AccessCodeTextInput;
+exports.default = _default;

package/lib/common/components/ImportModal/presenter.js

@@ -19,7 +19,6 @@ var _uiProgress = require("@instructure/ui-progress");
 var _uiHeading = require("@instructure/ui-heading");
 var _uiTabs = require("@instructure/ui-tabs");
 var _uiToggleDetails = require("@instructure/ui-toggle-details");
-var _uiTextInput = require("@instructure/ui-text-input");
 var _emotion = require("@instructure/emotion");
 var _quizCommon = require("@instructure/quiz-common");
 var _styles = _interopRequireDefault(require("./styles.js"));
@@ -200,7 +199,7 @@ var ImportModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _
         "data-automation": "sdk-import-file-selector"
       }), fileType === 'image/*' && (0, _emotion.jsx)("div", {
         css: this.props.styles.altTextWrapper
-      }, (0, _emotion.jsx)(_uiTextInput.TextInput, {
+      }, (0, _emotion.jsx)(_quizCommon.TextInput, {
         ref: this.setRef('altTextInput'),
         onChange: this.onAltTextChange,
         value: this.props.altText,

package/lib/common/components/MaskedTextInput/MaskedTextInput.stories.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.whenUnmasked = exports.whenMasked = exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _index = require("./index.js");
+var props = {
+  renderLabel: 'Example of a masked text input',
+  checkboxLabel: 'Select to show the current value',
+  value: 'Is it secret? Is it safe?',
+  onMaskedChange: Function.prototype
+};
+var _default = {
+  title: _index.MaskedTextInput.name
+};
+exports.default = _default;
+var whenMasked = function whenMasked() {
+  return /*#__PURE__*/_react.default.createElement(_index.MaskedTextInput, props);
+};
+exports.whenMasked = whenMasked;
+var whenUnmasked = function whenUnmasked() {
+  return /*#__PURE__*/_react.default.createElement(_index.MaskedTextInput, Object.assign({}, props, {
+    masked: false
+  }));
+};
+exports.whenUnmasked = whenUnmasked;

package/lib/common/components/MaskedTextInput/index.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MaskedTextInput = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+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 _uiView = require("@instructure/ui-view");
+var _uiCheckbox = require("@instructure/ui-checkbox");
+var _uiReactUtils = require("@instructure/ui-react-utils");
+var _quizCommon = require("@instructure/quiz-common");
+var maskedTextInputPropTypes = {
+  /**
+   * The label to be used for the checkbox that controls whether the input is masked
+   */
+  checkboxLabel: _propTypes.default.string.isRequired,
+  /**
+   * Whether or not the input text is masked
+   */
+  masked: _propTypes.default.bool,
+  /**
+   * The function to call when the user clicks the checkbox to either mask or unmask the input
+   */
+  onMaskedChange: _propTypes.default.func
+};
+var MaskedTextInput = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(MaskedTextInput, _Component);
+  var _super = (0, _createSuper2.default)(MaskedTextInput);
+  function MaskedTextInput() {
+    (0, _classCallCheck2.default)(this, MaskedTextInput);
+    return _super.apply(this, arguments);
+  }
+  (0, _createClass2.default)(MaskedTextInput, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        checkboxLabel = _this$props.checkboxLabel,
+        masked = _this$props.masked,
+        onMaskedChange = _this$props.onMaskedChange,
+        type = _this$props.type;
+      var textInputProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _uiReactUtils.omitProps)(this.props, maskedTextInputPropTypes)), {}, {
+        type: masked ? 'password' : type
+      });
+      return /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        as: "div"
+      }, /*#__PURE__*/_react.default.createElement(_quizCommon.TextInput, textInputProps), /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        as: "div",
+        margin: "small 0"
+      }, /*#__PURE__*/_react.default.createElement(_uiCheckbox.Checkbox, {
+        label: checkboxLabel,
+        checked: !masked,
+        onChange: onMaskedChange
+      })));
+    }
+  }]);
+  MaskedTextInput.displayName = "MaskedTextInput";
+  return MaskedTextInput;
+}(_react.Component);
+exports.MaskedTextInput = MaskedTextInput;
+MaskedTextInput.propTypes = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, maskedTextInputPropTypes), _quizCommon.TextInput.propTypes);
+MaskedTextInput.defaultProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _quizCommon.TextInput.defaultProps), {}, {
+  masked: true,
+  onMaskedChange: Function.prototype
+});
+var _default = MaskedTextInput;
+exports.default = _default;

package/lib/common/components/layout/Page/styles.js

@@ -26,12 +26,15 @@ var generateStyle = function generateStyle(componentTheme, props) {
       transition: componentTheme.contentTransition,
       width: '100%',
       '.user_content p': {
-        margin: componentTheme.userContentMargin,
+        margin: "".concat(componentTheme.userContentMargin, " 0"),
         '&:first-of-type': {
-          marginTop: componentTheme.userContentZeroMargin
+          margin: "0 0 ".concat(componentTheme.userContentMargin)
         },
-        '&:last-child': {
-          marginBottom: componentTheme.userContentZeroMargin
+        '&:last-of-type': {
+          margin: "".concat(componentTheme.userContentMargin, " 0 0")
+        },
+        '&:only-child': {
+          margin: 0
         }
       }
     })

package/lib/common/components/layout/Page/theme.js

@@ -12,8 +12,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   return {
     fontFamily: typography.fontFamily,
     contentTransition: "transform ".concat(transitions.duration),
-    userContentMargin: spacing.mediumSmall,
-    userContentZeroMargin: 0
+    userContentMargin: spacing.mediumSmall
   };
 };
 var _default = generateComponentTheme;

package/lib/common/components/layout/header/Calculator/presenter.js

@@ -30,8 +30,8 @@ var CalculatorButton = function CalculatorButton(_ref) {
       variant: "icon",
       renderIcon: _ref2,
       disabled: !enabled,
-      tooltip: (0, _formatMessage.default)('Calculator')
-    }, (0, _formatMessage.default)('Calculator'));
+      tooltip: (0, _formatMessage.default)('This calculator has accessibility limitations.')
+    }, (0, _formatMessage.default)('Calculator'), /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Use the arrow keys to move the calculator after selecting "Move". Screen readers may not announce the launch clearly.')));
   }
   return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
     renderIcon: _uiIcons.IconCalculatorLine,

package/lib/common/components/layout/navbar/externalStyles.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateExternalStyle = void 0;
+var generateExternalStyle = function generateExternalStyle() {
+  return {
+    showBrandIcon: true,
+    desktopBottomBorder: true,
+    desktopBottomBorderInverse: true
+  };
+};
+exports.generateExternalStyle = generateExternalStyle;

package/lib/common/components/layout/navbar/styles.js

@@ -1,17 +1,17 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _externalStyles = require("./externalStyles.js");
 var generateStyle = function generateStyle(componentTheme) {
-  return {
-    showBrandIcon: true,
-    desktopBottomBorder: true,
-    desktopBottomBorderInverse: true,
+  return (0, _objectSpread2.default)({
     backgroundColor: componentTheme.backgroundColor,
     phoneBreakPoint: componentTheme.phoneBreakPoint
-  };
+  }, (0, _externalStyles.generateExternalStyle)());
 };
 var _default = generateStyle;
 exports.default = _default;

package/lib/common/components/layout/sidebar/Sidebar/externalStyles.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateExternalStyle = void 0;
+var generateExternalStyle = function generateExternalStyle(componentTheme) {
+  return {
+    sidebar: {
+      borderTop: "".concat(componentTheme.sidebarBorderWidth, " solid ").concat(componentTheme.sidebarBorderColor),
+      borderRight: "".concat(componentTheme.sidebarBorderWidth, " solid ").concat(componentTheme.sidebarBorderColor),
+      borderBottom: "".concat(componentTheme.sidebarBorderWidth, " solid ").concat(componentTheme.sidebarBorderColor),
+      borderLeft: "".concat(componentTheme.sidebarBorderWidth, " solid ").concat(componentTheme.sidebarBorderColor)
+    }
+  };
+};
+exports.generateExternalStyle = generateExternalStyle;