@instructure/quiz-core 21.0.1-rc.15 → 21.0.1-rc.18

package/es/building/components/layout/header/BuildingButtons/theme.js

@@ -5,7 +5,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   return {
     quizSavingColor: colors.lightGray,
     quizSavingMargin: spacing.large,
-    buttonsHolderMargin: spacing.mediumSmall,
+    buttonsHolderMargin: spacing.xLarge,
     menuIconMargin: spacing.xSmall,
     menuIconFontSize: typography.fontSizeLarge
   };

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

@@ -160,6 +160,16 @@ var QuizEntryHeader = (_dec = withStyleOverrides(generateStyle, generateComponen
         cancelText: t('Keep Question')
       };
     }
+  }, {
+    key: "isActiveBank",
+    get: function get() {
+      return this.props.quizEntry.isBank && this.props.newActiveBank;
+    }
+  }, {
+    key: "isBankEntry",
+    get: function get() {
+      return this.props.quizEntry.isBank || this.props.quizEntry.isBankEntry;
+    }
   }, {
     key: "getVOText",
     value: function getVOText(verb, displayPosition) {
@@ -174,27 +184,19 @@ var QuizEntryHeader = (_dec = withStyleOverrides(generateStyle, generateComponen
       });
     }
   }, {
-    key: "renderBankedContent",
-    value: function renderBankedContent() {
-      if (this.props.quizEntry.isBank || this.props.quizEntry.isBankEntry) {
-        return jsx(IconBankLine, null);
-      }
+    key: "renderItemName",
+    value: function renderItemName() {
+      return jsx(Text, {
+        size: "small",
+        weight: "normal",
+        "data-automation": "sdk-quiz-entry-interaction-type"
+      }, this.props.name);
     }
   }, {
-    key: "renderName",
-    value: function renderName() {
-      var isBank = this.props.quizEntry.isBank && this.props.newActiveBank;
-      var dataAutomation = 'sdk-quiz-entry-interaction-type';
-      if (!isBank) {
-        return jsx(Text, {
-          size: "small",
-          weight: "normal",
-          "data-automation": dataAutomation
-        }, this.props.name);
-      }
+    key: "renderBankNameButton",
+    value: function renderBankNameButton() {
       return jsx(CondensedButton, {
         size: "small",
-        margin: "0 0 0 x-small",
         onClick: this.handleBankClick,
         "data-automation": "sdk-quiz-entry-interaction-type"
       }, this.props.name);
@@ -220,14 +222,14 @@ var QuizEntryHeader = (_dec = withStyleOverrides(generateStyle, generateComponen
         renderLabel: jsx(Flex, {
           direction: "column",
           gap: "small"
-        }, jsx(Flex.Item, {
+        }, !this.isBankEntry && jsx(Flex.Item, {
           "aria-hidden": true
-        }, this.renderName()), jsx(Flex.Item, {
+        }, this.renderItemName()), jsx(Flex.Item, {
           "aria-hidden": true
         }, t('Question Title')), jsx(ScreenReaderContent, null, titleLabelText)),
         type: "text",
         onChange: this.handleTitleChange,
-        value: workingEntry.title || '',
+        defaultValue: workingEntry.title || '',
         interaction: disabled ? 'disabled' : 'enabled',
         "data-automation": "sdk-question-title-textinput"
       });
@@ -242,15 +244,27 @@ var QuizEntryHeader = (_dec = withStyleOverrides(generateStyle, generateComponen
       return jsx(Flex, {
         className: "leftHeader",
         direction: "row",
-        justifyItems: "center",
+        alignItems: "center",
         "data-automation": "sdk-quiz-entry-left-header"
       }, jsx(PositionBox, {
         position: position,
         headingText: positionText,
         "data-automation": "sdk-quiz-entry-positionbox"
-      }), this.renderBankedContent(), jsx("div", {
-        css: this.props.styles.dividingLine
-      }), this.renderTitleHolder());
+      }), jsx(Flex.Item, {
+        shouldShrink: this.isActiveBank,
+        shouldGrow: !this.isActiveBank
+      }, jsx(Flex, {
+        direction: "row",
+        gap: this.isActiveBank ? 'x-small' : 'medium',
+        themeOverride: {
+          gapMedium: '1.25rem'
+        },
+        alignItems: "center"
+      }, this.isBankEntry && jsx(Flex.Item, null, jsx(IconBankLine, null)), this.isActiveBank ? jsx(Flex.Item, {
+        shouldShrink: true
+      }, this.renderBankNameButton()) : jsx(Flex.Item, {
+        shouldGrow: true
+      }, this.renderTitleHolder()))));
     }
   }, {
     key: "render",
@@ -278,11 +292,15 @@ var QuizEntryHeader = (_dec = withStyleOverrides(generateStyle, generateComponen
       }), jsx(Flex, {
         className: "header",
         direction: "row",
-        gap: "small"
+        alignItems: this.isActiveBank ? 'center' : 'end',
+        gap: "small",
+        justifyItems: "space-between"
       }, jsx(Flex.Item, {
-        shouldShrink: false,
+        shouldShrink: this.isActiveBank,
         shouldGrow: true
-      }, this.renderLeftHeader()), jsx(Flex.Item, null, jsx(ActionButtons, actionButtonProps))));
+      }, this.renderLeftHeader()), jsx(Flex.Item, {
+        padding: this.isActiveBank ? '0' : '0 0 xx-small'
+      }, jsx(ActionButtons, actionButtonProps))));
     }
   }]);
 }(Component), _defineProperty(_QuizEntryHeader, "displayName", 'QuizEntryHeader'), _defineProperty(_QuizEntryHeader, "componentId", "Quizzes".concat(_QuizEntryHeader.displayName)), _defineProperty(_QuizEntryHeader, "propTypes", {

package/es/common/components/resources/sessionItemResult/ResultStimulus/index.js

@@ -76,7 +76,7 @@ export var ResultStimulus = (_dec = withStyleOverrides(generateStyle, generateCo
         css: this.props.styles.stimulusGroup
       }, jsx("div", {
         css: this.props.styles.stimulusInfo
-      }, this.renderStimulusInfo()), jsx("div", {
+      }, this.renderStimulusInfo()), this.props.stimulus.isPassage === false && jsx("div", {
         css: this.props.styles.items
       }, this.renderStimulusItems()))));
     }

package/es/common/components/resources/sessionItemResult/ResultStimulus/styles.js

@@ -16,7 +16,7 @@ var generateStyle = function generateStyle(componentTheme, props) {
   };
   return {
     root: {
-      borderBottom: "".concat(componentTheme.rootBorderWidth, " solid ").concat(componentTheme.rootBorderColor),
+      borderTop: "".concat(componentTheme.rootBorderWidth, " solid ").concat(componentTheme.rootBorderColor),
       overflow: 'hidden'
     },
     instructions: _defineProperty({
@@ -31,9 +31,7 @@ var generateStyle = function generateStyle(componentTheme, props) {
     },
     info: _defineProperty({
       padding: "".concat(componentTheme.infoPaddingTopBottom, " ").concat(componentTheme.infoPaddingLeftRight),
-      backgroundColor: componentTheme.infoBackgroundColor,
-      height: '100%',
-      overflow: 'scroll'
+      height: '100%'
     }, mq, {
       padding: componentTheme.phoneInfoPadding
     }),

package/es/common/components/resources/sessionItemResult/ResultStimulus/theme.js

@@ -6,7 +6,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     breakpoints = _ref.breakpoints;
   return {
     rootBorderWidth: borders.widthSmall,
-    rootBorderColor: colors.porcelain,
+    rootBorderColor: colors.tiara,
     instructionsPaddingTopBottom: spacing.medium,
     instructionsPaddingLeftRight: spacing.large,
     instructionsBorderWidth: borders.widthSmall,

package/es/common/records/Stimulus.js

@@ -22,6 +22,11 @@ export var Stimulus = /*#__PURE__*/function (_ReduxRecord) {
     get: function get() {
       return true;
     }
+  }, {
+    key: "isPassage",
+    get: function get() {
+      return this.passage;
+    }
   }, {
     key: "isLoaded",
     value: function isLoaded() {

package/lib/building/components/layout/header/BuildingButtons/theme.js

@@ -11,7 +11,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   return {
     quizSavingColor: colors.lightGray,
     quizSavingMargin: spacing.large,
-    buttonsHolderMargin: spacing.mediumSmall,
+    buttonsHolderMargin: spacing.xLarge,
     menuIconMargin: spacing.xSmall,
     menuIconFontSize: typography.fontSizeLarge
   };

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

@@ -167,6 +167,16 @@ var QuizEntryHeader = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["defau
         cancelText: (0, _formatMessage["default"])('Keep Question')
       };
     }
+  }, {
+    key: "isActiveBank",
+    get: function get() {
+      return this.props.quizEntry.isBank && this.props.newActiveBank;
+    }
+  }, {
+    key: "isBankEntry",
+    get: function get() {
+      return this.props.quizEntry.isBank || this.props.quizEntry.isBankEntry;
+    }
   }, {
     key: "getVOText",
     value: function getVOText(verb, displayPosition) {
@@ -181,27 +191,19 @@ var QuizEntryHeader = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["defau
       });
     }
   }, {
-    key: "renderBankedContent",
-    value: function renderBankedContent() {
-      if (this.props.quizEntry.isBank || this.props.quizEntry.isBankEntry) {
-        return (0, _emotion.jsx)(_uiIcons.IconBankLine, null);
-      }
+    key: "renderItemName",
+    value: function renderItemName() {
+      return (0, _emotion.jsx)(_uiText.Text, {
+        size: "small",
+        weight: "normal",
+        "data-automation": "sdk-quiz-entry-interaction-type"
+      }, this.props.name);
     }
   }, {
-    key: "renderName",
-    value: function renderName() {
-      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",
-          weight: "normal",
-          "data-automation": dataAutomation
-        }, this.props.name);
-      }
+    key: "renderBankNameButton",
+    value: function renderBankNameButton() {
       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);
@@ -227,14 +229,14 @@ var QuizEntryHeader = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["defau
         renderLabel: (0, _emotion.jsx)(_quizCommon.Flex, {
           direction: "column",
           gap: "small"
-        }, (0, _emotion.jsx)(_quizCommon.Flex.Item, {
+        }, !this.isBankEntry && (0, _emotion.jsx)(_quizCommon.Flex.Item, {
           "aria-hidden": true
-        }, this.renderName()), (0, _emotion.jsx)(_quizCommon.Flex.Item, {
+        }, this.renderItemName()), (0, _emotion.jsx)(_quizCommon.Flex.Item, {
           "aria-hidden": true
         }, (0, _formatMessage["default"])('Question Title')), (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, titleLabelText)),
         type: "text",
         onChange: this.handleTitleChange,
-        value: workingEntry.title || '',
+        defaultValue: workingEntry.title || '',
         interaction: disabled ? 'disabled' : 'enabled',
         "data-automation": "sdk-question-title-textinput"
       });
@@ -249,15 +251,27 @@ var QuizEntryHeader = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["defau
       return (0, _emotion.jsx)(_quizCommon.Flex, {
         className: "leftHeader",
         direction: "row",
-        justifyItems: "center",
+        alignItems: "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(), (0, _emotion.jsx)("div", {
-        css: this.props.styles.dividingLine
-      }), this.renderTitleHolder());
+      }), (0, _emotion.jsx)(_quizCommon.Flex.Item, {
+        shouldShrink: this.isActiveBank,
+        shouldGrow: !this.isActiveBank
+      }, (0, _emotion.jsx)(_quizCommon.Flex, {
+        direction: "row",
+        gap: this.isActiveBank ? 'x-small' : 'medium',
+        themeOverride: {
+          gapMedium: '1.25rem'
+        },
+        alignItems: "center"
+      }, this.isBankEntry && (0, _emotion.jsx)(_quizCommon.Flex.Item, null, (0, _emotion.jsx)(_uiIcons.IconBankLine, null)), this.isActiveBank ? (0, _emotion.jsx)(_quizCommon.Flex.Item, {
+        shouldShrink: true
+      }, this.renderBankNameButton()) : (0, _emotion.jsx)(_quizCommon.Flex.Item, {
+        shouldGrow: true
+      }, this.renderTitleHolder()))));
     }
   }, {
     key: "render",
@@ -285,11 +299,15 @@ var QuizEntryHeader = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["defau
       }), (0, _emotion.jsx)(_quizCommon.Flex, {
         className: "header",
         direction: "row",
-        gap: "small"
+        alignItems: this.isActiveBank ? 'center' : 'end',
+        gap: "small",
+        justifyItems: "space-between"
       }, (0, _emotion.jsx)(_quizCommon.Flex.Item, {
-        shouldShrink: false,
+        shouldShrink: this.isActiveBank,
         shouldGrow: true
-      }, this.renderLeftHeader()), (0, _emotion.jsx)(_quizCommon.Flex.Item, null, (0, _emotion.jsx)(_ActionButtons["default"], actionButtonProps))));
+      }, this.renderLeftHeader()), (0, _emotion.jsx)(_quizCommon.Flex.Item, {
+        padding: this.isActiveBank ? '0' : '0 0 xx-small'
+      }, (0, _emotion.jsx)(_ActionButtons["default"], actionButtonProps))));
     }
   }]);
 }(_react.Component), (0, _defineProperty2["default"])(_QuizEntryHeader, "displayName", 'QuizEntryHeader'), (0, _defineProperty2["default"])(_QuizEntryHeader, "componentId", "Quizzes".concat(_QuizEntryHeader.displayName)), (0, _defineProperty2["default"])(_QuizEntryHeader, "propTypes", {

package/lib/common/components/resources/sessionItemResult/ResultStimulus/index.js

@@ -83,7 +83,7 @@ var ResultStimulus = exports.ResultStimulus = (_dec = (0, _quizCommon.withStyleO
         css: this.props.styles.stimulusGroup
       }, (0, _emotion.jsx)("div", {
         css: this.props.styles.stimulusInfo
-      }, this.renderStimulusInfo()), (0, _emotion.jsx)("div", {
+      }, this.renderStimulusInfo()), this.props.stimulus.isPassage === false && (0, _emotion.jsx)("div", {
         css: this.props.styles.items
       }, this.renderStimulusItems()))));
     }

package/lib/common/components/resources/sessionItemResult/ResultStimulus/styles.js

@@ -23,7 +23,7 @@ var generateStyle = function generateStyle(componentTheme, props) {
   };
   return {
     root: {
-      borderBottom: "".concat(componentTheme.rootBorderWidth, " solid ").concat(componentTheme.rootBorderColor),
+      borderTop: "".concat(componentTheme.rootBorderWidth, " solid ").concat(componentTheme.rootBorderColor),
       overflow: 'hidden'
     },
     instructions: (0, _defineProperty2["default"])({
@@ -38,9 +38,7 @@ var generateStyle = function generateStyle(componentTheme, props) {
     },
     info: (0, _defineProperty2["default"])({
       padding: "".concat(componentTheme.infoPaddingTopBottom, " ").concat(componentTheme.infoPaddingLeftRight),
-      backgroundColor: componentTheme.infoBackgroundColor,
-      height: '100%',
-      overflow: 'scroll'
+      height: '100%'
     }, mq, {
       padding: componentTheme.phoneInfoPadding
     }),

package/lib/common/components/resources/sessionItemResult/ResultStimulus/theme.js

@@ -12,7 +12,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     breakpoints = _ref.breakpoints;
   return {
     rootBorderWidth: borders.widthSmall,
-    rootBorderColor: colors.porcelain,
+    rootBorderColor: colors.tiara,
     instructionsPaddingTopBottom: spacing.medium,
     instructionsPaddingLeftRight: spacing.large,
     instructionsBorderWidth: borders.widthSmall,

package/lib/common/records/Stimulus.js

@@ -29,6 +29,11 @@ var Stimulus = exports.Stimulus = /*#__PURE__*/function (_ReduxRecord) {
     get: function get() {
       return true;
     }
+  }, {
+    key: "isPassage",
+    get: function get() {
+      return this.passage;
+    }
   }, {
     key: "isLoaded",
     value: function isLoaded() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "21.0.1-rc.15+2eb659881",
+  "version": "21.0.1-rc.18+49db59146",
   "license": "MIT",
   "description": "The Quiz React SDK by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
@@ -46,11 +46,11 @@
     "@instructure/emotion": "^9.11.1",
     "@instructure/grading-utils": "^1.0.0",
     "@instructure/outcomes-ui": "^3.2.2",
-    "@instructure/quiz-common": "21.0.1-rc.15+2eb659881",
-    "@instructure/quiz-i18n": "21.0.1-rc.15+2eb659881",
-    "@instructure/quiz-interactions": "21.0.1-rc.15+2eb659881",
-    "@instructure/quiz-number-input": "21.0.1-rc.15+2eb659881",
-    "@instructure/quiz-rce": "21.0.1-rc.15+2eb659881",
+    "@instructure/quiz-common": "21.0.1-rc.18+49db59146",
+    "@instructure/quiz-i18n": "21.0.1-rc.18+49db59146",
+    "@instructure/quiz-interactions": "21.0.1-rc.18+49db59146",
+    "@instructure/quiz-number-input": "21.0.1-rc.18+49db59146",
+    "@instructure/quiz-rce": "21.0.1-rc.18+49db59146",
     "@instructure/ui-a11y-content": "^9.11.1",
     "@instructure/ui-alerts": "^9.11.1",
     "@instructure/ui-avatar": "^9.11.1",
@@ -109,7 +109,7 @@
     "file-saver": "~2.0.5",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "21.0.1-rc.15+2eb659881",
+    "instructure-validations": "21.0.1-rc.18+49db59146",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -158,7 +158,7 @@
     "jquery": "^2.2.3",
     "karma-junit-reporter": "^2.0.1",
     "most-subject": "^5.3.0",
-    "quiz-presets": "21.0.1-rc.15+2eb659881",
+    "quiz-presets": "21.0.1-rc.18+49db59146",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -174,5 +174,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2eb6598816fde1560fa50fe1f5bc3a718819a36a"
+  "gitHead": "49db591467624e6c83907fe8e6bafcf7d1622e51"
 }