@instructure/quiz-core 20.11.3-rc.8 → 20.11.3

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

@@ -7,14 +7,15 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
-import React, { Component } from 'react';
+/** @jsx jsx */
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import partial from 'lodash/partial';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { CondensedButton } from '@instructure/ui-buttons';
 import { TextInput } from '@instructure/ui-text-input';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx, Global } from '@instructure/emotion';
 import { FillBlankInteractionType } from '@instructure/quiz-interactions';
 import { IconBankLine } from '@instructure/ui-icons';
 import t from '@instructure/quiz-i18n/es/format-message';
@@ -23,23 +24,12 @@ import PositionBox from "../../../../../../common/components/resources/positionB
 import Item from "../../../../../../common/records/Item.js";
 import ActionButtons from "../../../ActionButtons/index.js";
 import { DELETED_QUIZ_ENTRY, API_INPUT_VALIDATION_ERROR, BUILD_TRAY_OPEN } from '@instructure/quiz-common';
-var styles = {
-  componentId: 'cCKjK',
-  template: function template(theme) {
-    return "\n\n.cCKjK_fsuY{align-items:center;background-color:".concat(theme.headerBackgroundColor || 'inherit', ";color:").concat(theme.headerColor || 'inherit', ";display:flex;justify-content:space-between;padding:").concat(theme.headerPadding || 'inherit', ";vertical-align:middle}\n\n.cCKjK_cKlw{align-items:center;display:inline-flex;flex:8 0 0;flex-wrap:nowrap;width:100%}\n\nbody.tox-fullscreen .cCKjK_cKlw{display:none}\n\n.cCKjK_ecuB{font-size:").concat(theme.interactionTypeFontSize || 'inherit', ";margin-left:").concat(theme.interactionTypeLeftMargin || 'inherit', ";margin-right:").concat(theme.interactionTypeRightMargin || 'inherit', "}\n\n.cCKjK_epFc{border-left:").concat(theme.dividingLineLeftBorder || 'inherit', ";width:0}\n\n.cCKjK_dFsQ{display:flex;flex:1 1 auto}\n\n.cCKjK_eGPC{flex:1 1 auto;font-size:").concat(theme.titleInputFontSize || 'inherit', ";text-overflow:ellipsis;white-space:nowrap}");
-  },
-  'header': 'cCKjK_fsuY',
-  'leftHeader': 'cCKjK_cKlw',
-  'interactionType': 'cCKjK_ecuB',
-  'dividingLine': 'cCKjK_epFc',
-  'titleHolder': 'cCKjK_dFsQ',
-  'titleInput': 'cCKjK_eGPC'
-};
-import theme from "./theme.js";
-
-var _ref2 = /*#__PURE__*/React.createElement(IconBankLine, null);
-
-var QuizEntryHeader = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+
+var _ref2 = jsx(IconBankLine, null);
+
+var QuizEntryHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(QuizEntryHeader, _Component);
 
   var _super = _createSuper(QuizEntryHeader);
@@ -239,7 +229,7 @@ var QuizEntryHeader = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
     key: "renderName",
     value: function renderName() {
       if (this.props.quizEntry.isBank && this.props.newActiveBank) {
-        return /*#__PURE__*/React.createElement(CondensedButton, {
+        return jsx(CondensedButton, {
           size: "small",
           margin: "0 0 0 x-small",
           onClick: this.handleBankClick,
@@ -247,8 +237,8 @@ var QuizEntryHeader = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
         }, this.props.name);
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.interactionType,
+      return jsx("div", {
+        css: this.props.styles.interactionType,
         "data-automation": "sdk-quiz-entry-interaction-type"
       }, this.props.name);
     }
@@ -268,13 +258,13 @@ var QuizEntryHeader = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
         questionNumber: displayPosition,
         interactionType: entry.getInteractionType().name
       });
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.titleHolder
-      }, /*#__PURE__*/React.createElement("span", {
-        className: styles.titleInput
-      }, /*#__PURE__*/React.createElement(TextInput, {
+      return jsx("div", {
+        css: this.props.styles.titleHolder
+      }, jsx("span", {
+        css: this.props.styles.titleInput
+      }, jsx(TextInput, {
         ref: this.storeTitleRef,
-        renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, titleLabelText),
+        renderLabel: jsx(ScreenReaderContent, null, titleLabelText),
         type: "text",
         placeholder: t('Question Title'),
         onChange: this.handleTitleChange,
@@ -290,14 +280,15 @@ var QuizEntryHeader = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
         position: this.props.displayPosition
       });
       var position = this.props.disabledForRegrade ? this.props.displayPosition : this.props.quizEntry.positionToDisplay(this.props.displayPosition);
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.leftHeader
-      }, /*#__PURE__*/React.createElement(PositionBox, {
+      return jsx("div", {
+        className: "leftHeader",
+        css: this.props.styles.leftHeader
+      }, jsx(PositionBox, {
         position: position,
         headingText: positionText,
         "data-automation": "sdk-quiz-entry-positionbox"
-      }), this.renderBankedContent(), this.renderName(), /*#__PURE__*/React.createElement("div", {
-        className: styles.dividingLine
+      }), this.renderBankedContent(), this.renderName(), jsx("div", {
+        css: this.props.styles.dividingLine
       }), this.renderTitleHolder());
     }
   }, {
@@ -316,9 +307,12 @@ var QuizEntryHeader = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
         shouldDisableDeleteButton: this.props.disabledForRegrade,
         shouldRenderEdit: false
       };
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.header
-      }, this.renderLeftHeader(), /*#__PURE__*/React.createElement(ActionButtons, actionButtonProps));
+      return jsx("div", {
+        className: "header",
+        css: this.props.styles.header
+      }, jsx(Global, {
+        styles: this.props.styles.globalStyles
+      }), this.renderLeftHeader(), jsx(ActionButtons, actionButtonProps));
     }
   }]);
 
@@ -360,7 +354,8 @@ var QuizEntryHeader = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
   successfulSubmit: PropTypes.func.isRequired,
   withConfirm: PropTypes.func.isRequired,
   workingEntry: ImmutablePropTypes.record.isRequired,
-  workingQuizEntry: ImmutablePropTypes.record.isRequired
+  workingQuizEntry: ImmutablePropTypes.record.isRequired,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   disabledForRegrade: false,
   initialFocusId: null,

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

@@ -0,0 +1,49 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    /* Hide left header when the RCE editor is in fullscreen mode */
+    globalStyles: {
+      'body.tox-fullscreen .leftHeader': {
+        display: 'none'
+      }
+    },
+    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
+    },
+    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'
+    }
+  };
+};
+
+export default generateStyle;

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

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       colors = _ref.colors,
       typography = _ref.typography;
@@ -11,4 +11,6 @@ export default function generator(_ref) {
     interactionTypeRightMargin: spacing.xSmall,
     titleInputFontSize: typography.fontSizeMedium
   };
-}
+};
+
+export default generateComponentTheme;

package/es/building/components/resources/quizEntry/QuizEntryEdit/presenter.js

@@ -7,32 +7,29 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/* eslint-disable no-unused-vars */
+
+/** @jsx jsx */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { DragSource } from 'react-dnd';
 import pick from 'lodash/pick';
 import first from 'lodash/first';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx, Global } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import CustomPropTypes from "../../../../../common/util/CustomPropTypes.js";
 import elementsForSelectors from "../../../../../common/util/ElementsForSelectors.js";
 import AddToBankModal from "../../../../../banks/components/AddToBankModal/index.js";
 import DragAndDropZone from "../../../../../common/components/shared/drag_and_drop/DragAndDropZone/index.js";
-import wrapWithOutsideClick from "../../../../../common/components/shared/functionality/componentWithOutsideClick.js";
+import wrapWithOutsideClickEmotion from "../../../../../common/components/shared/functionality/componentWithOutsideClickEmotion.js";
 import QuizEntryEditHeader from "./Header/index.js";
 import QuizEntryEditFooter from "./Footer/index.js";
 import { SHOULD_CLONE_ITEM, TEMPORARY_ITEM_ID, DELETED_QUIZ_ENTRY, API_INPUT_VALIDATION_ERROR, CLEAR_ALL_INPUT_VALIDATION_ERRORS, PARENT_TYPE_ADDING_TO_BANK } from '@instructure/quiz-common';
 import { ItemTypes, dragSource, collectDrag } from "../../../../../common/components/shared/drag_and_drop/dragAndDropUtils.js";
-var styles = {
-  componentId: 'bZuQH',
-  template: function template(theme) {
-    return "\n\n.bZuQH_qRLg{font-size:".concat(theme.quizEntryEditFontSize || 'inherit', ";margin:").concat(theme.quizEntryEditMargin || 'inherit', " 0;position:relative;transform:translateZ(0);z-index:3333}\n\nbody.tox-fullscreen .bZuQH_qRLg{transform:none;z-index:6666}");
-  },
-  'quizEntryEdit': 'bZuQH_qRLg'
-};
-import theme from "./theme.js";
-var QuizEntryEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+var QuizEntryEdit = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(QuizEntryEdit, _Component);
 
   var _super = _createSuper(QuizEntryEdit);
@@ -323,9 +320,9 @@ var QuizEntryEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
         draggingOver: draggingOver,
         draggingAboveHalf: draggingAboveHalf
       };
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DragAndDropZone, Object.assign({}, propsForDnDZone, {
+      return jsx("div", null, jsx(DragAndDropZone, Object.assign({}, propsForDnDZone, {
         location: "above"
-      })), connectDragPreview(_this.renderForm()), /*#__PURE__*/React.createElement(DragAndDropZone, Object.assign({}, propsForDnDZone, {
+      })), connectDragPreview(_this.renderForm()), jsx(DragAndDropZone, Object.assign({}, propsForDnDZone, {
         location: "below"
       })));
     };
@@ -374,7 +371,7 @@ var QuizEntryEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
       var isItemOrBankEntry = this.props.quizEntry.isItem || this.props.quizEntry.isBankEntry;
       if (!(isItemOrBankEntry || this.props.disabledForRegrade)) return;
       var footerProps = pick(this.props, ['alternativeRightFooter', 'changeQuizEntryPoints', 'clearTemporaryItem', 'displayPosition', 'entry', 'guid', 'initialFocusId', 'openModal', 'quizEntry', 'setUi', 'shouldClone', 'workingQuizEntry']);
-      return /*#__PURE__*/React.createElement(QuizEntryEditFooter, Object.assign({
+      return jsx(QuizEntryEditFooter, Object.assign({
         clearChanges: this.clearChanges,
         isValid: this.isValid(),
         successfulSubmit: this.successfulSubmit,
@@ -385,7 +382,7 @@ var QuizEntryEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
     key: "renderAddToBankModal",
     value: function renderAddToBankModal() {
       if (!this.props.quizEntry.isItem) return;
-      return /*#__PURE__*/React.createElement(AddToBankModal, {
+      return jsx(AddToBankModal, {
         label: t('Add to an Item Bank'),
         onContinue: this.handleAddToBankContinue,
         onAdd: this.handleAddToBank,
@@ -400,7 +397,7 @@ var QuizEntryEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
     key: "renderHeader",
     value: function renderHeader() {
       var headerProps = pick(this.props, ['changeItemTitle', 'clearModifications', 'clearTemporaryItem', 'connectDragSource', 'createTempItem', 'disabledForRegrade', 'displayPosition', 'entry', 'guid', 'hideError', 'initialFocusId', 'name', 'newActiveBank', 'quizEntries', 'quizEntry', 'quizId', 'removeQuizEntry', 'richFITBEnabled', 'richFITBInteractionID', 'screenreaderNotification', 'setUi', 'shouldClone', 'showError', 'withConfirm', 'workingEntry', 'workingQuizEntry']);
-      return /*#__PURE__*/React.createElement(QuizEntryEditHeader, Object.assign({
+      return jsx(QuizEntryEditHeader, Object.assign({
         isValid: this.isValid(),
         successfulSubmit: this.successfulSubmit,
         disableSubmit: this.shouldDisableSubmit()
@@ -409,17 +406,19 @@ var QuizEntryEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
   }, {
     key: "renderForm",
     value: function renderForm() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.quizEntryEdit,
+      return jsx("div", null, jsx("div", {
+        css: this.props.styles.quizEntryEdit,
         "data-automation": "sdk-quiz-entry-edit-div"
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         role: "form"
-      }, this.renderHeader(), this.props.children, this.renderFooter()), this.renderAddToBankModal());
+      }, this.renderHeader(), this.props.children, this.renderFooter()), this.renderAddToBankModal()));
     }
   }, {
     key: "render",
     value: function render() {
-      return this.props.disabledForRegrade ? this.renderForm() : this.renderDraggable();
+      return jsx(React.Fragment, null, jsx(Global, {
+        styles: this.props.styles.globalStyles
+      }), this.props.disabledForRegrade ? this.renderForm() : this.renderDraggable());
     }
   }]);
 
@@ -493,7 +492,8 @@ var QuizEntryEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
   // from connected component
   withConfirm: PropTypes.func.isRequired,
   workingEntry: ImmutablePropTypes.record.isRequired,
-  workingQuizEntry: ImmutablePropTypes.record.isRequired
+  workingQuizEntry: ImmutablePropTypes.record.isRequired,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   alternativeRightFooter: null,
   children: null,
@@ -510,5 +510,5 @@ var QuizEntryEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
   shouldClone: false
 }, _temp)) || _class);
 export var UndecoratedQuizEntryEdit = QuizEntryEdit;
-export var QuizEntryEditRaw = wrapWithOutsideClick(QuizEntryEdit);
+export var QuizEntryEditRaw = wrapWithOutsideClickEmotion(QuizEntryEdit);
 export default DragSource(ItemTypes.QUIZ_ENTRY, dragSource, collectDrag)(QuizEntryEditRaw);

package/es/building/components/resources/quizEntry/QuizEntryEdit/styles.js

@@ -0,0 +1,21 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    globalStyles: {
+      'body.tox-fullscreen .quizEntryEdit': {
+        transform: 'none',
+        zIndex: '6666'
+      }
+    },
+    quizEntryEdit: {
+      fontSize: componentTheme.quizEntryEditFontSize,
+      position: 'relative',
+      transform: 'translate3d(0, 0, 0)',
+
+      /* for drag and drop preview to work */
+      margin: "".concat(componentTheme.quizEntryEditMargin, " 0"),
+      zIndex: '3333'
+    }
+  };
+};
+
+export default generateStyle;

package/es/building/components/resources/quizEntry/QuizEntryEdit/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       colors = _ref.colors,
       typography = _ref.typography,
@@ -7,4 +7,6 @@ export default function generator(_ref) {
     quizEntryEditFontSize: typography.fontSizeMedium,
     quizEntryEditMargin: spacing.medium
   };
-}
+};
+
+export default generateComponentTheme;

package/es/building/components/resources/quizEntry/QuizEntryShow/presenter.js

@@ -5,48 +5,31 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
-import React, { Component } from 'react';
+/** @jsx jsx */
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import partial from 'lodash/partial';
 import { DragSource } from 'react-dnd';
 import { IconBankLine } from '@instructure/ui-icons';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import { FillBlankInteractionType } from '@instructure/quiz-interactions';
 import { TOP } from '@instructure/quiz-common';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { convertFITBtoRich } from "../../../../../common/util/fitbCopyHelper.js";
 import Item from "../../../../../common/records/Item.js";
-import Overlay from "../../../../../common/components/shared/overlay/Overlay.js";
+import OverlayEmotion from "../../../../../common/components/shared/overlayEmotion/index.js";
 import ActionButtons from "../../ActionButtons/index.js";
 import { ItemTypes, dragSource, collectDrag } from "../../../../../common/components/shared/drag_and_drop/dragAndDropUtils.js";
 import PositionBox from "../../../../../common/components/resources/positionBox/PositionBox.js";
 import DragAndDropZone from "../../../../../common/components/shared/drag_and_drop/DragAndDropZone/index.js";
-var styles = {
-  componentId: 'eqZPF',
-  template: function template(theme) {
-    return "\n\n.eqZPF_eLmg{transform:translateZ(0)}\n\n.eqZPF_TMNr{background-color:".concat(theme.quizEntryShowBackgroundColor || 'inherit', ";padding:").concat(theme.quizEntryShowPadding || 'inherit', "}\n\n.eqZPF_fsuY{align-items:stretch;display:flex;flex-direction:row;flex-wrap:nowrap;height:").concat(theme.headerHeight || 'inherit', ";padding-right:").concat(theme.headerRightPadding || 'inherit', "}\n\n.eqZPF_bscQ{border:").concat(theme.dndBorder || 'inherit', "}\n\n.eqZPF_cKlw{align-items:center;display:inline-flex;flex:8 0 0;overflow:hidden}\n\n.eqZPF_eGWt{border-bottom:").concat(theme.phoneConnectingLinesBorderWidth || 'inherit', " dotted;border-color:").concat(theme.phoneConnectingLinesBorderColor || 'inherit', ";border-left:").concat(theme.phoneConnectingLinesBorderWidth || 'inherit', " dotted;height:2rem;margin-right:1.2rem;margin-top:-0.8rem;width:1.2rem}\n\n.eqZPF_eGWt,.eqZPF_IoDT{display:inline-flex;flex:0 0 auto}\n\n.eqZPF_IoDT{color:").concat(theme.rightHeaderColor || 'inherit', ";text-align:right;z-index:").concat(theme.rightHeaderZIndex || 'inherit', "}\n\n[dir=ltr] .eqZPF_IoDT,[dir=rtl] .eqZPF_IoDT{text-align:right}\n\n.eqZPF_IoDT button{background-color:transparent;background-color:initial}\n\n.eqZPF_eCZW,.eqZPF_cwte,.eqZPF_nvdO{color:").concat(theme.titleInteractionTypeNamePointsColor || 'inherit', ";font-size:").concat(theme.titleInteractionTypeNamePointsFontSize || 'inherit', ";margin-left:").concat(theme.titleInteractionTypeNamePointsLeftMargin || 'inherit', ";margin-right:").concat(theme.titleInteractionTypeNamePointsRightMargin || 'inherit', ";overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n\n.eqZPF_csjx{margin:").concat(theme.itemHolderMargin || 'inherit', ";overflow-wrap:anywhere}\n\n.eqZPF_fPOQ,.eqZPF_gaTA{background-color:transparent;border:none;color:inherit;font-size:").concat(theme.optionsButtonDragDropHandleFontSize || 'inherit', ";margin:").concat(theme.optionsButtonDragDropHandleMargin || 'inherit', "}\n\n.eqZPF_gaTA{cursor:pointer}\n\n@media print{.eqZPF_eLmg{break-inside:avoid}}");
-  },
-  'quizEntryWrapper': 'eqZPF_eLmg',
-  'quizEntryShow': 'eqZPF_TMNr',
-  'header': 'eqZPF_fsuY',
-  'dndBorder': 'eqZPF_bscQ',
-  'leftHeader': 'eqZPF_cKlw',
-  'connectingLines': 'eqZPF_eGWt',
-  'rightHeader': 'eqZPF_IoDT',
-  'interactionTypeName': 'eqZPF_eCZW',
-  'points': 'eqZPF_cwte',
-  'title': 'eqZPF_nvdO',
-  'itemHolder': 'eqZPF_csjx',
-  'dragAndDropHandle': 'eqZPF_fPOQ',
-  'optionsButton': 'eqZPF_gaTA'
-};
-import theme from "./theme.js";
-
-var _ref = /*#__PURE__*/React.createElement(IconBankLine, null);
-
-var QuizEntryShow = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+
+var _ref = jsx(IconBankLine, null);
+
+var QuizEntryShow = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(QuizEntryShow, _Component);
 
   var _super = _createSuper(QuizEntryShow);
@@ -215,8 +198,9 @@ var QuizEntryShow = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
     value: function renderPointsPossible() {
       if (this.props.entry instanceof Item) {
         var pointsPossible = this.props.quizEntry.pointsPossible;
-        return /*#__PURE__*/React.createElement("div", {
-          className: styles.points,
+        return jsx("div", {
+          className: "points",
+          css: this.props.styles.points,
           "data-automation": "sdk-points-possible-div"
         }, this.getPointsText(pointsPossible || 0));
       }
@@ -226,8 +210,8 @@ var QuizEntryShow = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
     value: function renderInteractionType() {
       if (this.props.entry instanceof Item) {
         var interactionTypeName = this.props.entry.getInteractionType().name || this.props.interactionTypeName;
-        return /*#__PURE__*/React.createElement("div", {
-          className: styles.interactionTypeName,
+        return jsx("div", {
+          css: this.props.styles.interactionTypeName,
           "data-automation": "sdk-interaction-type-name-div"
         }, interactionTypeName);
       }
@@ -242,10 +226,10 @@ var QuizEntryShow = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
   }, {
     key: "renderLeftHeader",
     value: function renderLeftHeader() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.leftHeader
-      }, this.renderBankedContent(), this.renderInteractionType(), this.renderPointsPossible(), /*#__PURE__*/React.createElement("div", {
-        className: styles.title,
+      return jsx("div", {
+        css: this.props.styles.leftHeader
+      }, this.renderBankedContent(), this.renderInteractionType(), this.renderPointsPossible(), jsx("div", {
+        css: this.props.styles.title,
         "data-automation": "sdk-quiz-entry-title-div"
       }, this.props.entry.title));
     }
@@ -278,26 +262,27 @@ var QuizEntryShow = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
       var shouldLockQuizEntry = lockBlueprintContentEnabled && isContentLockedByBlueprint; // Overlay gets tabIndex === "-1" so that the drag handle is tabbable before
       // the Overlay get focus and opens the quizEntry in edit mode
 
-      return /*#__PURE__*/React.createElement(Overlay, {
+      return jsx(OverlayEmotion, {
         onClick: this.editingOn,
-        wrapperClassName: styles.quizEntryWrapper,
+        wrapperStyles: this.props.styles.quizEntryWrapper,
         tabIndex: "-1",
         hideOverlay: shouldLockQuizEntry
-      }, /*#__PURE__*/React.createElement(DragAndDropZone, Object.assign({}, propsForDnDZone, {
+      }, jsx(DragAndDropZone, Object.assign({}, propsForDnDZone, {
         location: "above"
-      })), connectDragPreview( /*#__PURE__*/React.createElement("div", {
-        className: styles.quizEntryShow,
+      })), jsx("div", {
+        ref: connectDragPreview,
+        css: this.props.styles.quizEntryShow,
         "data-automation": "sdk-quiz-entry-show",
         "data-automation-item-id": this.props.quizEntry.id
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.header
-      }, quizEntry.isInStimulus && stimulusOrientation === TOP && /*#__PURE__*/React.createElement("div", {
-        className: styles.connectingLines
-      }), /*#__PURE__*/React.createElement(PositionBox, {
+      }, jsx("div", {
+        css: this.props.styles.header
+      }, quizEntry.isInStimulus && stimulusOrientation === TOP && jsx("div", {
+        css: this.props.styles.connectingLines
+      }), jsx(PositionBox, {
         position: positionToDisplay,
         headingText: positionText,
         headingLevel: quizEntry.isInStimulus ? 'h3' : 'h2'
-      }), this.renderLeftHeader(), /*#__PURE__*/React.createElement(ActionButtons, {
+      }), this.renderLeftHeader(), jsx(ActionButtons, {
         connectDragSource: this.props.connectDragSource,
         displayPosition: this.props.displayPosition,
         onDelete: this.removeItem,
@@ -311,11 +296,11 @@ var QuizEntryShow = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
         shouldDisableCopy: shouldLockQuizEntry,
         shouldRenderEdit: !shouldLockQuizEntry,
         shouldRenderDelete: !shouldLockQuizEntry
-      }), /*#__PURE__*/React.createElement(ScreenReaderContent, null, srMsg)), /*#__PURE__*/React.createElement("div", {
-        className: styles.itemHolder,
+      }), jsx(ScreenReaderContent, null, srMsg)), jsx("div", {
+        css: this.props.styles.itemHolder,
         ref: this.setInert,
         "data-automation": "sdk-quiz-entry-show-item-holder"
-      }, this.props.children))), /*#__PURE__*/React.createElement(DragAndDropZone, Object.assign({}, propsForDnDZone, {
+      }, this.props.children)), jsx(DragAndDropZone, Object.assign({}, propsForDnDZone, {
         location: "below"
       })));
     }
@@ -355,7 +340,8 @@ var QuizEntryShow = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
   switchOnEditing: PropTypes.func.isRequired,
   // from QuizEntry
   updateItemCallStatus: PropTypes.string.isRequired,
-  withConfirm: PropTypes.func.isRequired
+  withConfirm: PropTypes.func.isRequired,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   children: null,
   draggingOver: false,

package/es/building/components/resources/quizEntry/QuizEntryShow/styles.js

@@ -0,0 +1,84 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+var generateStyle = function generateStyle(componentTheme) {
+  var mp = '@media print';
+  var interactionTypeStyles = {
+    color: componentTheme.titleInteractionTypeNamePointsColor,
+    fontSize: componentTheme.titleInteractionTypeNamePointsFontSize,
+    marginLeft: componentTheme.titleInteractionTypeNamePointsLeftMargin,
+    marginRight: componentTheme.titleInteractionTypeNamePointsRightMargin,
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap'
+  };
+  var optionsButtonDragDropStyle = {
+    backgroundColor: 'transparent',
+    border: 'none',
+    color: 'inherit',
+    fontSize: componentTheme.optionsButtonDragDropHandleFontSize,
+    margin: componentTheme.optionsButtonDragDropHandleMargin
+  };
+  return {
+    quizEntryWrapper: _defineProperty({
+      transform: 'translate3d(0, 0, 0)'
+    }, mp, {
+      breakInside: 'avoid'
+    }),
+    quizEntryShow: {
+      padding: componentTheme.quizEntryShowPadding,
+      backgroundColor: componentTheme.quizEntryShowBackgroundColor
+    },
+    header: {
+      height: componentTheme.headerHeight,
+      display: 'flex',
+      flexWrap: 'nowrap',
+      flexDirection: 'row',
+      alignItems: 'stretch',
+      paddingRight: componentTheme.headerRightPadding
+    },
+    dndBorder: {
+      border: componentTheme.dndBorder
+    },
+    leftHeader: {
+      flex: '8 0 0',
+      display: 'inline-flex',
+      overflow: 'hidden',
+      alignItems: 'center'
+    },
+    connectingLines: {
+      flex: '0 0 auto',
+      display: 'inline-flex',
+      borderLeft: "".concat(componentTheme.phoneConnectingLinesBorderWidth, " dotted"),
+      borderBottom: "".concat(componentTheme.phoneConnectingLinesBorderWidth, " dotted"),
+      borderColor: componentTheme.phoneConnectingLinesBorderColor,
+      height: '2rem',
+      width: '1.2rem',
+      marginTop: '-0.8rem',
+      marginRight: '1.2rem'
+    },
+    rightHeader: {
+      flex: '0 0 auto',
+      display: 'inline-flex',
+      textAlign: 'right',
+      zIndex: componentTheme.rightHeaderZIndex,
+      color: componentTheme.rightHeaderColor,
+      button: {
+        backgroundColor: 'initial'
+      }
+    },
+    title: interactionTypeStyles,
+    interactionTypeName: interactionTypeStyles,
+    points: interactionTypeStyles,
+    itemHolder: {
+      overflowWrap: 'anywhere',
+      margin: componentTheme.itemHolderMargin
+    },
+    optionsButton: _objectSpread(_objectSpread({}, optionsButtonDragDropStyle), {}, {
+      cursor: 'pointer'
+    }),
+    dragAndDropHandle: optionsButtonDragDropStyle
+  };
+};
+
+export default generateStyle;

package/es/building/components/resources/quizEntry/QuizEntryShow/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       colors = _ref.colors,
       typography = _ref.typography,
@@ -23,4 +23,6 @@ export default function generator(_ref) {
     phoneConnectingLinesBorderColor: colors.ash,
     phoneBreakPoint: "max-width: ".concat(breakpoints.medium)
   };
-}
+};
+
+export default generateComponentTheme;

package/es/common/actions/outcomes.js

@@ -1,10 +1,16 @@
-import { SET_CONTEXT_UUID, SET_OUTCOMES_ENDPOINT, SET_OUTCOMES_TOKEN } from '@instructure/quiz-common';
+import { SET_CONTEXT_UUID, SET_OUTCOMES_ENDPOINT, SET_OUTCOMES_TOKEN, SET_EXTERNAL_ACCOUNT_UUID } from '@instructure/quiz-common';
 export function setContextUuid(contextUuid) {
   return {
     type: SET_CONTEXT_UUID,
     payload: contextUuid
   };
 }
+export function setExternalAccountUuid(externalAccountUuid) {
+  return {
+    type: SET_EXTERNAL_ACCOUNT_UUID,
+    payload: externalAccountUuid
+  };
+}
 export function setOutcomesEndpoint(endpoint) {
   return {
     type: SET_OUTCOMES_ENDPOINT,