@instructure/quiz-core 20.10.1-rc.5 → 20.10.1-rc.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5,7 +5,8 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
5
5
 
6
6
  var _dec, _class, _class2, _temp;
7
7
 
8
- import React, { Component } from 'react';
8
+ /** @jsx jsx */
9
+ import { Component } from 'react';
9
10
  import PropTypes from 'prop-types';
10
11
  import ImmutablePropTypes from 'react-immutable-proptypes';
11
12
  import { Alert } from '@instructure/ui-alerts';
@@ -16,19 +17,13 @@ import { Heading } from '@instructure/ui-heading';
16
17
  import { Tabs } from '@instructure/ui-tabs';
17
18
  import { ToggleDetails } from '@instructure/ui-toggle-details';
18
19
  import { TextInput } from '@instructure/ui-text-input';
19
- import { themeable } from '@instructure/ui-themeable';
20
+ import { withStyle, jsx } from '@instructure/emotion';
20
21
  import { ImportantModal, ModalHeader, ModalBody, ModalFooter, FILE_UPLOAD_SELECT, FILE_UPLOAD_IMPORTING, FILE_UPLOAD_SUCCESS, FILE_UPLOAD_FAILURE, FILE_UPLOAD_ERROR, XSMALL_SIDE_MARGIN } from '@instructure/quiz-common';
21
- var styles = {
22
- componentId: 'ceoks',
23
- template: function template(theme) {
24
- return "\n\n.ceoks_bOkE{margin-top:".concat(theme.altTextMargin || 'inherit', "}");
25
- },
26
- 'altTextWrapper': 'ceoks_bOkE'
27
- };
28
- import theme from "./theme.js";
22
+ import generateStyle from "./styles.js";
23
+ import generateComponentTheme from "./theme.js";
29
24
  import ImportFileSelector from "./ImportFileSelector/index.js";
30
25
  import t from '@instructure/quiz-i18n/es/format-message';
31
- export var ImportModal = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
26
+ export var ImportModal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
32
27
  _inherits(ImportModal, _Component);
33
28
 
34
29
  var _super = _createSuper(ImportModal);
@@ -168,7 +163,7 @@ export var ImportModal = (_dec = themeable(theme, styles), _dec(_class = (_temp
168
163
  }, {
169
164
  key: "cancelButton",
170
165
  value: function cancelButton() {
171
- return /*#__PURE__*/React.createElement(Button, {
166
+ return jsx(Button, {
172
167
  disabled: this.disableCancelButton(),
173
168
  onClick: this.cancelAction,
174
169
  margin: XSMALL_SIDE_MARGIN,
@@ -206,7 +201,7 @@ export var ImportModal = (_dec = themeable(theme, styles), _dec(_class = (_temp
206
201
  }, {
207
202
  key: "continueButton",
208
203
  value: function continueButton() {
209
- return /*#__PURE__*/React.createElement(Button, {
204
+ return jsx(Button, {
210
205
  onClick: this.continueAction,
211
206
  color: "primary",
212
207
  disabled: this.disableContinueButton(),
@@ -218,7 +213,7 @@ export var ImportModal = (_dec = themeable(theme, styles), _dec(_class = (_temp
218
213
  }, {
219
214
  key: "renderErroredContent",
220
215
  value: function renderErroredContent() {
221
- return /*#__PURE__*/React.createElement(Alert, {
216
+ return jsx(Alert, {
222
217
  variant: "error",
223
218
  ref: this.setRef('errorAlert')
224
219
  }, this.uploadStatusMessage());
@@ -226,41 +221,41 @@ export var ImportModal = (_dec = themeable(theme, styles), _dec(_class = (_temp
226
221
  }, {
227
222
  key: "renderSelectingContent",
228
223
  value: function renderSelectingContent(fileType) {
229
- return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, this.props.importMessage), /*#__PURE__*/React.createElement(ImportFileSelector, {
224
+ return jsx("div", null, jsx("div", null, this.props.importMessage), jsx(ImportFileSelector, {
230
225
  files: this.props.files,
231
226
  ref: this.setRef('fileSelector'),
232
227
  receiveFile: this.handleFile,
233
228
  acceptAttribute: fileType,
234
229
  "data-automation": "sdk-import-file-selector"
235
- }), fileType === 'image/*' && /*#__PURE__*/React.createElement("div", {
236
- className: styles.altTextWrapper
237
- }, /*#__PURE__*/React.createElement(TextInput, {
230
+ }), fileType === 'image/*' && jsx("div", {
231
+ css: this.props.styles.altTextWrapper
232
+ }, jsx(TextInput, {
238
233
  ref: this.setRef('altTextInput'),
239
234
  onChange: this.onAltTextChange,
240
235
  value: this.props.altText,
241
- renderLabel: /*#__PURE__*/React.createElement("div", null, t('alt text (optional)')),
236
+ renderLabel: jsx("div", null, t('alt text (optional)')),
242
237
  type: "text"
243
238
  })));
244
239
  }
245
240
  }, {
246
241
  key: "renderFailureContent",
247
242
  value: function renderFailureContent() {
248
- return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Alert, {
243
+ return jsx("div", null, jsx(Alert, {
249
244
  variant: "error",
250
245
  ref: this.setRef('failureAlert'),
251
246
  "data-automation": "sdk-import-error-alert"
252
- }, /*#__PURE__*/React.createElement("div", null, this.uploadStatusMessage(), /*#__PURE__*/React.createElement(ToggleDetails, {
253
- summary: /*#__PURE__*/React.createElement(Text, {
247
+ }, jsx("div", null, this.uploadStatusMessage(), jsx(ToggleDetails, {
248
+ summary: jsx(Text, {
254
249
  size: "small"
255
250
  }, t('Error Details'))
256
- }, /*#__PURE__*/React.createElement(Text, {
251
+ }, jsx(Text, {
257
252
  size: "small"
258
253
  }, this.props.failureMessage)))));
259
254
  }
260
255
  }, {
261
256
  key: "renderSuccessContent",
262
257
  value: function renderSuccessContent() {
263
- return /*#__PURE__*/React.createElement(Alert, {
258
+ return jsx(Alert, {
264
259
  variant: "success",
265
260
  ref: this.setRef('successAlert'),
266
261
  "data-automation": "sdk-import-success-alert"
@@ -269,7 +264,7 @@ export var ImportModal = (_dec = themeable(theme, styles), _dec(_class = (_temp
269
264
  }, {
270
265
  key: "renderImportingContent",
271
266
  value: function renderImportingContent() {
272
- return /*#__PURE__*/React.createElement(ProgressBar, {
267
+ return jsx(ProgressBar, {
273
268
  screenReaderLabel: t('Import process completion'),
274
269
  valueNow: this.props.progressValue,
275
270
  ref: this.setRef('progressBar')
@@ -329,13 +324,13 @@ export var ImportModal = (_dec = themeable(theme, styles), _dec(_class = (_temp
329
324
  }
330
325
 
331
326
  var selectedIndex = this.state.selectedTabIndex;
332
- return /*#__PURE__*/React.createElement(Tabs, {
327
+ return jsx(Tabs, {
333
328
  onRequestTabChange: this.handleTabChange,
334
329
  variant: "secondary"
335
330
  }, this.props.acceptFileType.map(function (_ref2, index) {
336
331
  var fileType = _ref2.fileType,
337
332
  title = _ref2.title;
338
- return /*#__PURE__*/React.createElement(Tabs.Panel, {
333
+ return jsx(Tabs.Panel, {
339
334
  key: title,
340
335
  renderTitle: title,
341
336
  disabled: _this3.props.files.size > 0 && index !== selectedIndex,
@@ -346,7 +341,7 @@ export var ImportModal = (_dec = themeable(theme, styles), _dec(_class = (_temp
346
341
  }, {
347
342
  key: "render",
348
343
  value: function render() {
349
- return /*#__PURE__*/React.createElement(ImportantModal, {
344
+ return jsx(ImportantModal, {
350
345
  open: this.props.modalOpen,
351
346
  size: "small",
352
347
  onClose: this.props.onClose,
@@ -354,15 +349,15 @@ export var ImportModal = (_dec = themeable(theme, styles), _dec(_class = (_temp
354
349
  label: t('Import Content'),
355
350
  ref: this.setRef('modal'),
356
351
  "data-automation": "sdk-import-content-modal"
357
- }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(Heading, {
352
+ }, jsx(ModalHeader, null, jsx(Heading, {
358
353
  level: "reset",
359
354
  as: "h2"
360
- }, t('Import Content')), /*#__PURE__*/React.createElement(CloseButton, {
355
+ }, t('Import Content')), jsx(CloseButton, {
361
356
  onClick: this.cancelAction,
362
357
  placement: "end",
363
358
  offset: "medium",
364
359
  screenReaderLabel: t('Close')
365
- })), /*#__PURE__*/React.createElement(ModalBody, null, this.renderContent()), /*#__PURE__*/React.createElement(ModalFooter, null, this.cancelButton(), this.continueButton()));
360
+ })), jsx(ModalBody, null, this.renderContent()), jsx(ModalFooter, null, this.cancelButton(), this.continueButton()));
366
361
  }
367
362
  }]);
368
363
 
@@ -401,8 +396,9 @@ export var ImportModal = (_dec = themeable(theme, styles), _dec(_class = (_temp
401
396
  // passed in by connect
402
397
  setUploadStatus: PropTypes.func.isRequired,
403
398
  // passed in by connect
404
- uploadStatus: PropTypes.oneOf([FILE_UPLOAD_SELECT, FILE_UPLOAD_IMPORTING, FILE_UPLOAD_SUCCESS, FILE_UPLOAD_FAILURE, FILE_UPLOAD_ERROR]).isRequired // passed in by connect
405
-
399
+ uploadStatus: PropTypes.oneOf([FILE_UPLOAD_SELECT, FILE_UPLOAD_IMPORTING, FILE_UPLOAD_SUCCESS, FILE_UPLOAD_FAILURE, FILE_UPLOAD_ERROR]).isRequired,
400
+ // passed in by connect,
401
+ styles: PropTypes.object
406
402
  }, _class2.defaultProps = {
407
403
  closeOverride: null,
408
404
  disableConfirm: false,
@@ -0,0 +1,9 @@
1
+ var generateStyle = function generateStyle(componentTheme) {
2
+ return {
3
+ altTextWrapper: {
4
+ marginTop: componentTheme.altTextMargin
5
+ }
6
+ };
7
+ };
8
+
9
+ export default generateStyle;
@@ -1,6 +1,8 @@
1
- export default function generator(_ref) {
1
+ var generateComponentTheme = function generateComponentTheme(_ref) {
2
2
  var spacing = _ref.spacing;
3
3
  return {
4
4
  altTextMargin: spacing.large
5
5
  };
6
- }
6
+ };
7
+
8
+ export default generateComponentTheme;
@@ -5,14 +5,16 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
5
5
 
6
6
  var _dec, _class, _class2, _temp;
7
7
 
8
+ /** @jsx jsx */
9
+
8
10
  /* eslint "import/no-webpack-loader-syntax": "warn" */
9
11
 
10
12
  /* eslint "import/no-unresolved": "warn" */
11
- import React, { Component } from 'react';
13
+ import { Component } from 'react';
12
14
  import PropTypes from 'prop-types';
13
15
  import HTML5Backend from 'react-dnd-html5-backend';
14
16
  import { DragDropContext } from 'react-dnd';
15
- import { themeable } from '@instructure/ui-themeable';
17
+ import { withStyle, jsx } from '@instructure/emotion';
16
18
  import { ApplyLocale } from '@instructure/ui-i18n';
17
19
  import { Provider } from "../../react-redux.js";
18
20
  import store from "../../../reduxStore.js";
@@ -24,23 +26,16 @@ import { setContextUuid, setOutcomesEndpoint, setOutcomesToken } from "../../act
24
26
  import { addFeatures, removeFeatures } from "../../actions/features.js";
25
27
  import { setGradeByQuestionEnabled } from "../../actions/grading.js";
26
28
  import { renderAlerts } from "../../util/renderAlerts.js";
27
- var styles = {
28
- componentId: 'fzweS',
29
- template: function template(theme) {
30
- return "\n\n.fzweS_dXHX{height:100%}";
31
- },
32
- 'sdk': 'fzweS_dXHX'
33
- };
34
- import theme from "./theme.js";
29
+ import generateStyle from "./styles.js";
35
30
  import CustomPropTypes from "../../../common/util/CustomPropTypes.js";
36
31
  import ConfirmationModal from "../ConfirmationModal/index.js";
37
32
  import setupFormatMessage from '@instructure/quiz-i18n/es/util/setupFormatMessage';
38
33
  import RceConfigProvider from "../RceConfigProvider/index.js";
39
34
  import { ApiFeatureFlagInitializer } from "../ApiFeatureFlagInitializer/index.js";
40
35
 
41
- var _ref = /*#__PURE__*/React.createElement(ConfirmationModal, null);
36
+ var _ref = jsx(ConfirmationModal, null);
42
37
 
43
- export var SDKApp = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
38
+ export var SDKApp = (_dec = withStyle(generateStyle, null), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
44
39
  _inherits(SDKApp, _Component);
45
40
 
46
41
  var _super = _createSuper(SDKApp);
@@ -151,13 +146,13 @@ export var SDKApp = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
151
146
  var store = this.store,
152
147
  props = this.props,
153
148
  context = this.context;
154
- return /*#__PURE__*/React.createElement(Provider, {
149
+ return jsx(Provider, {
155
150
  store: store
156
- }, /*#__PURE__*/React.createElement(ApiFeatureFlagInitializer, null, /*#__PURE__*/React.createElement(RceConfigProvider, this.props.rceConfig, /*#__PURE__*/React.createElement(ApplyLocale, {
151
+ }, jsx(ApiFeatureFlagInitializer, null, jsx(RceConfigProvider, this.props.rceConfig, jsx(ApplyLocale, {
157
152
  locale: getLocale(props, context),
158
153
  timezone: props.timeZone
159
- }, /*#__PURE__*/React.createElement("div", {
160
- className: styles.sdk,
154
+ }, jsx("div", {
155
+ css: this.props.styles.sdk,
161
156
  "data-automation": "sdk-app"
162
157
  }, _ref, typeof props.children === 'function' ? props.children({
163
158
  addAlert: this.addAlert
@@ -195,7 +190,8 @@ export var SDKApp = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
195
190
  message: PropTypes.string
196
191
  })),
197
192
  userToken: PropTypes.string.isRequired,
198
- disableAlertLiveRegion: PropTypes.bool
193
+ disableAlertLiveRegion: PropTypes.bool,
194
+ styles: PropTypes.object
199
195
  }, _class2.contextTypes = {
200
196
  locale: PropTypes.string
201
197
  }, _class2.defaultProps = {
@@ -0,0 +1,9 @@
1
+ var generateStyle = function generateStyle() {
2
+ return {
3
+ sdk: {
4
+ height: '100%'
5
+ }
6
+ };
7
+ };
8
+
9
+ export default generateStyle;
@@ -5,32 +5,24 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
5
5
 
6
6
  var _dec, _class, _class2, _temp;
7
7
 
8
+ /** @jsx jsx */
9
+
8
10
  /* eslint "jsx-a11y/click-events-have-key-events": "warn" */
9
- import React, { Component } from 'react';
11
+ import { Component } from 'react';
10
12
  import PropTypes from 'prop-types';
11
13
  import ImmutablePropTypes from 'react-immutable-proptypes';
12
14
  import { IconBankLine } from '@instructure/ui-icons';
13
- import { themeable } from '@instructure/ui-themeable';
15
+ import { withStyle, jsx } from '@instructure/emotion';
14
16
  import StimulusShowInfo from "../StimulusShowInfo/index.js";
15
- import Overlay from "../../../../../common/components/shared/overlay/Overlay.js";
16
17
  import ActionButtons from "../../../../../building/components/resources/ActionButtons/index.js";
17
18
  import t from '@instructure/quiz-i18n/es/format-message';
18
- var styles = {
19
- componentId: 'ceqOh',
20
- template: function template(theme) {
21
- return "\n\n.ceqOh_dRGY{padding-bottom:".concat(theme.stimulusPadding || 'inherit', ";padding-top:").concat(theme.stimulusPadding || 'inherit', "}\n\n.ceqOh_fsuY{align-items:center;display:flex;height:1rem;justify-content:space-between;padding-left:").concat(theme.headerPadding || 'inherit', ";padding-right:").concat(theme.headerPadding || 'inherit', "}\n\n.ceqOh_cKlw{display:flex;overflow:hidden}\n\n.ceqOh_ffXB{color:").concat(theme.stimulusLabelColor || 'inherit', ";font-size:").concat(theme.stimulusLabelFontSize || 'inherit', ";margin:0 ").concat(theme.stimulusLabelMargin || 'inherit', ";overflow:hidden;text-overflow:ellipsis}\n\n.ceqOh_dMwa{height:100%;padding:").concat(theme.stimulusContentPaddingTop || 'inherit', " ").concat(theme.stimulusContentPaddingLeftRight || 'inherit', " ").concat(theme.stimulusContentPaddingBottom || 'inherit', "}");
22
- },
23
- 'stimulus': 'ceqOh_dRGY',
24
- 'header': 'ceqOh_fsuY',
25
- 'leftHeader': 'ceqOh_cKlw',
26
- 'stimulusLabel': 'ceqOh_ffXB',
27
- 'stimulusContent': 'ceqOh_dMwa'
28
- };
29
- import theme from "./theme.js";
19
+ import generateStyle from "./styles.js";
20
+ import generateComponentTheme from "./theme.js";
21
+ import OverlayEmotion from "../../../shared/overlayEmotion/index.js";
30
22
 
31
- var _ref = /*#__PURE__*/React.createElement(IconBankLine, null);
23
+ var _ref = jsx(IconBankLine, null);
32
24
 
33
- export var StimulusShow = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
25
+ export var StimulusShow = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
34
26
  _inherits(StimulusShow, _Component);
35
27
 
36
28
  var _super = _createSuper(StimulusShow);
@@ -63,20 +55,20 @@ export var StimulusShow = (_dec = themeable(theme, styles), _dec(_class = (_temp
63
55
  }, {
64
56
  key: "render",
65
57
  value: function render() {
66
- return /*#__PURE__*/React.createElement(Overlay, {
58
+ return jsx(OverlayEmotion, {
67
59
  onClick: this.switchOnEditing,
68
- wrapperClassName: styles.stimulusWrapper,
60
+ wrapperStyles: this.props.styles.stimulusWrapper,
69
61
  tabIndex: "-1",
70
62
  hideOverlay: this.props.isQuizContentLocked
71
- }, /*#__PURE__*/React.createElement("div", {
72
- className: styles.stimulus
73
- }, /*#__PURE__*/React.createElement("div", {
74
- className: styles.header
75
- }, /*#__PURE__*/React.createElement("div", {
76
- className: styles.leftHeader
77
- }, this.renderBankIcon(), /*#__PURE__*/React.createElement("div", {
78
- className: styles.stimulusLabel
79
- }, t('Stimulus'))), /*#__PURE__*/React.createElement(ActionButtons, {
63
+ }, jsx("div", {
64
+ css: this.props.styles.stimulus
65
+ }, jsx("div", {
66
+ css: this.props.styles.header
67
+ }, jsx("div", {
68
+ css: this.props.styles.leftHeader
69
+ }, this.renderBankIcon(), jsx("div", {
70
+ css: this.props.styles.stimulusLabel
71
+ }, t('Stimulus'))), jsx(ActionButtons, {
80
72
  connectDragSource: this.props.connectDragSource,
81
73
  displayPosition: this.props.displayPosition,
82
74
  onDelete: this.props.openDeleteStimulusModal,
@@ -89,11 +81,12 @@ export var StimulusShow = (_dec = themeable(theme, styles), _dec(_class = (_temp
89
81
  shouldDisableCopy: this.props.isQuizContentLocked,
90
82
  shouldRenderEdit: !this.props.isQuizContentLocked,
91
83
  shouldRenderDelete: !this.props.isQuizContentLocked
92
- })), /*#__PURE__*/React.createElement("div", {
84
+ })), jsx("div", {
93
85
  role: "presentation",
94
86
  onClick: this.props.isQuizContentLocked ? null : this.switchOnEditing,
95
- className: styles.stimulusContent
96
- }, /*#__PURE__*/React.createElement(StimulusShowInfo, {
87
+ css: this.props.styles.stimulusContent,
88
+ "data-testid": "stimulus-content"
89
+ }, jsx(StimulusShowInfo, {
97
90
  stimulus: this.props.stimulus
98
91
  }))));
99
92
  }
@@ -113,7 +106,8 @@ export var StimulusShow = (_dec = themeable(theme, styles), _dec(_class = (_temp
113
106
  shouldDisableDragHandle: PropTypes.bool,
114
107
  stimulus: ImmutablePropTypes.record.isRequired,
115
108
  switchOnEditing: PropTypes.func.isRequired,
116
- shouldFocusOnMount: PropTypes.bool.isRequired
109
+ shouldFocusOnMount: PropTypes.bool.isRequired,
110
+ styles: PropTypes.object
117
111
  }, _class2.defaultProps = {
118
112
  isBankedContent: false,
119
113
  isQuizContentLocked: false,
@@ -0,0 +1,33 @@
1
+ var generateStyle = function generateStyle(componentTheme) {
2
+ return {
3
+ stimulus: {
4
+ paddingTop: componentTheme.stimulusPadding,
5
+ paddingBottom: componentTheme.stimulusPadding
6
+ },
7
+ header: {
8
+ height: '1rem',
9
+ paddingLeft: componentTheme.headerPadding,
10
+ paddingRight: componentTheme.headerPadding,
11
+ display: 'flex',
12
+ alignItems: 'center',
13
+ justifyContent: 'space-between'
14
+ },
15
+ leftHeader: {
16
+ display: 'flex',
17
+ overflow: 'hidden'
18
+ },
19
+ stimulusLabel: {
20
+ color: componentTheme.stimulusLabelColor,
21
+ fontSize: componentTheme.stimulusLabelFontSize,
22
+ margin: "0 ".concat(componentTheme.stimulusLabelMargin),
23
+ overflow: 'hidden',
24
+ textOverflow: 'ellipsis'
25
+ },
26
+ stimulusContent: {
27
+ height: '10%0',
28
+ padding: "".concat(componentTheme.stimulusContentPaddingTop, " ").concat(componentTheme.stimulusContentPaddingLeftRight, " ").concat(componentTheme.stimulusContentPaddingBottom)
29
+ }
30
+ };
31
+ };
32
+
33
+ export default generateStyle;
@@ -1,4 +1,4 @@
1
- export default function generator(_ref) {
1
+ var generateComponentTheme = function generateComponentTheme(_ref) {
2
2
  var spacing = _ref.spacing,
3
3
  typography = _ref.typography,
4
4
  colors = _ref.colors;
@@ -12,4 +12,6 @@ export default function generator(_ref) {
12
12
  stimulusContentPaddingBottom: spacing.small,
13
13
  stimulusContentPaddingLeftRight: spacing.small
14
14
  };
15
- }
15
+ };
16
+
17
+ export default generateComponentTheme;
@@ -2,8 +2,6 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
 
5
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
@@ -17,7 +15,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
17
15
 
18
16
  var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
19
17
 
20
- var _react = _interopRequireWildcard(require("react"));
18
+ var _react = require("react");
21
19
 
22
20
  var _propTypes = _interopRequireDefault(require("prop-types"));
23
21
 
@@ -39,10 +37,12 @@ var _uiToggleDetails = require("@instructure/ui-toggle-details");
39
37
 
40
38
  var _uiTextInput = require("@instructure/ui-text-input");
41
39
 
42
- var _uiThemeable = require("@instructure/ui-themeable");
40
+ var _emotion = require("@instructure/emotion");
43
41
 
44
42
  var _quizCommon = require("@instructure/quiz-common");
45
43
 
44
+ var _styles = _interopRequireDefault(require("./styles.js"));
45
+
46
46
  var _theme = _interopRequireDefault(require("./theme.js"));
47
47
 
48
48
  var _index = _interopRequireDefault(require("./ImportFileSelector/index.js"));
@@ -51,14 +51,7 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
51
51
 
52
52
  var _dec, _class, _class2, _temp;
53
53
 
54
- var styles = {
55
- componentId: 'ceoks',
56
- template: function template(theme) {
57
- return "\n\n.ceoks_bOkE{margin-top:".concat(theme.altTextMargin || 'inherit', "}");
58
- },
59
- 'altTextWrapper': 'ceoks_bOkE'
60
- };
61
- var ImportModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
54
+ var ImportModal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
62
55
  (0, _inherits2.default)(ImportModal, _Component);
63
56
 
64
57
  var _super = (0, _createSuper2.default)(ImportModal);
@@ -198,7 +191,7 @@ var ImportModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
198
191
  }, {
199
192
  key: "cancelButton",
200
193
  value: function cancelButton() {
201
- return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
194
+ return (0, _emotion.jsx)(_uiButtons.Button, {
202
195
  disabled: this.disableCancelButton(),
203
196
  onClick: this.cancelAction,
204
197
  margin: _quizCommon.XSMALL_SIDE_MARGIN,
@@ -236,7 +229,7 @@ var ImportModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
236
229
  }, {
237
230
  key: "continueButton",
238
231
  value: function continueButton() {
239
- return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
232
+ return (0, _emotion.jsx)(_uiButtons.Button, {
240
233
  onClick: this.continueAction,
241
234
  color: "primary",
242
235
  disabled: this.disableContinueButton(),
@@ -248,7 +241,7 @@ var ImportModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
248
241
  }, {
249
242
  key: "renderErroredContent",
250
243
  value: function renderErroredContent() {
251
- return /*#__PURE__*/_react.default.createElement(_uiAlerts.Alert, {
244
+ return (0, _emotion.jsx)(_uiAlerts.Alert, {
252
245
  variant: "error",
253
246
  ref: this.setRef('errorAlert')
254
247
  }, this.uploadStatusMessage());
@@ -256,41 +249,41 @@ var ImportModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
256
249
  }, {
257
250
  key: "renderSelectingContent",
258
251
  value: function renderSelectingContent(fileType) {
259
- return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, this.props.importMessage), /*#__PURE__*/_react.default.createElement(_index.default, {
252
+ return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)("div", null, this.props.importMessage), (0, _emotion.jsx)(_index.default, {
260
253
  files: this.props.files,
261
254
  ref: this.setRef('fileSelector'),
262
255
  receiveFile: this.handleFile,
263
256
  acceptAttribute: fileType,
264
257
  "data-automation": "sdk-import-file-selector"
265
- }), fileType === 'image/*' && /*#__PURE__*/_react.default.createElement("div", {
266
- className: styles.altTextWrapper
267
- }, /*#__PURE__*/_react.default.createElement(_uiTextInput.TextInput, {
258
+ }), fileType === 'image/*' && (0, _emotion.jsx)("div", {
259
+ css: this.props.styles.altTextWrapper
260
+ }, (0, _emotion.jsx)(_uiTextInput.TextInput, {
268
261
  ref: this.setRef('altTextInput'),
269
262
  onChange: this.onAltTextChange,
270
263
  value: this.props.altText,
271
- renderLabel: /*#__PURE__*/_react.default.createElement("div", null, (0, _formatMessage.default)('alt text (optional)')),
264
+ renderLabel: (0, _emotion.jsx)("div", null, (0, _formatMessage.default)('alt text (optional)')),
272
265
  type: "text"
273
266
  })));
274
267
  }
275
268
  }, {
276
269
  key: "renderFailureContent",
277
270
  value: function renderFailureContent() {
278
- return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_uiAlerts.Alert, {
271
+ return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_uiAlerts.Alert, {
279
272
  variant: "error",
280
273
  ref: this.setRef('failureAlert'),
281
274
  "data-automation": "sdk-import-error-alert"
282
- }, /*#__PURE__*/_react.default.createElement("div", null, this.uploadStatusMessage(), /*#__PURE__*/_react.default.createElement(_uiToggleDetails.ToggleDetails, {
283
- summary: /*#__PURE__*/_react.default.createElement(_uiText.Text, {
275
+ }, (0, _emotion.jsx)("div", null, this.uploadStatusMessage(), (0, _emotion.jsx)(_uiToggleDetails.ToggleDetails, {
276
+ summary: (0, _emotion.jsx)(_uiText.Text, {
284
277
  size: "small"
285
278
  }, (0, _formatMessage.default)('Error Details'))
286
- }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
279
+ }, (0, _emotion.jsx)(_uiText.Text, {
287
280
  size: "small"
288
281
  }, this.props.failureMessage)))));
289
282
  }
290
283
  }, {
291
284
  key: "renderSuccessContent",
292
285
  value: function renderSuccessContent() {
293
- return /*#__PURE__*/_react.default.createElement(_uiAlerts.Alert, {
286
+ return (0, _emotion.jsx)(_uiAlerts.Alert, {
294
287
  variant: "success",
295
288
  ref: this.setRef('successAlert'),
296
289
  "data-automation": "sdk-import-success-alert"
@@ -299,7 +292,7 @@ var ImportModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
299
292
  }, {
300
293
  key: "renderImportingContent",
301
294
  value: function renderImportingContent() {
302
- return /*#__PURE__*/_react.default.createElement(_uiProgress.ProgressBar, {
295
+ return (0, _emotion.jsx)(_uiProgress.ProgressBar, {
303
296
  screenReaderLabel: (0, _formatMessage.default)('Import process completion'),
304
297
  valueNow: this.props.progressValue,
305
298
  ref: this.setRef('progressBar')
@@ -359,13 +352,13 @@ var ImportModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
359
352
  }
360
353
 
361
354
  var selectedIndex = this.state.selectedTabIndex;
362
- return /*#__PURE__*/_react.default.createElement(_uiTabs.Tabs, {
355
+ return (0, _emotion.jsx)(_uiTabs.Tabs, {
363
356
  onRequestTabChange: this.handleTabChange,
364
357
  variant: "secondary"
365
358
  }, this.props.acceptFileType.map(function (_ref2, index) {
366
359
  var fileType = _ref2.fileType,
367
360
  title = _ref2.title;
368
- return /*#__PURE__*/_react.default.createElement(_uiTabs.Tabs.Panel, {
361
+ return (0, _emotion.jsx)(_uiTabs.Tabs.Panel, {
369
362
  key: title,
370
363
  renderTitle: title,
371
364
  disabled: _this3.props.files.size > 0 && index !== selectedIndex,
@@ -376,7 +369,7 @@ var ImportModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
376
369
  }, {
377
370
  key: "render",
378
371
  value: function render() {
379
- return /*#__PURE__*/_react.default.createElement(_quizCommon.ImportantModal, {
372
+ return (0, _emotion.jsx)(_quizCommon.ImportantModal, {
380
373
  open: this.props.modalOpen,
381
374
  size: "small",
382
375
  onClose: this.props.onClose,
@@ -384,15 +377,15 @@ var ImportModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
384
377
  label: (0, _formatMessage.default)('Import Content'),
385
378
  ref: this.setRef('modal'),
386
379
  "data-automation": "sdk-import-content-modal"
387
- }, /*#__PURE__*/_react.default.createElement(_quizCommon.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
380
+ }, (0, _emotion.jsx)(_quizCommon.ModalHeader, null, (0, _emotion.jsx)(_uiHeading.Heading, {
388
381
  level: "reset",
389
382
  as: "h2"
390
- }, (0, _formatMessage.default)('Import Content')), /*#__PURE__*/_react.default.createElement(_uiButtons.CloseButton, {
383
+ }, (0, _formatMessage.default)('Import Content')), (0, _emotion.jsx)(_uiButtons.CloseButton, {
391
384
  onClick: this.cancelAction,
392
385
  placement: "end",
393
386
  offset: "medium",
394
387
  screenReaderLabel: (0, _formatMessage.default)('Close')
395
- })), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalBody, null, this.renderContent()), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalFooter, null, this.cancelButton(), this.continueButton()));
388
+ })), (0, _emotion.jsx)(_quizCommon.ModalBody, null, this.renderContent()), (0, _emotion.jsx)(_quizCommon.ModalFooter, null, this.cancelButton(), this.continueButton()));
396
389
  }
397
390
  }]);
398
391
  ImportModal.displayName = "ImportModal";
@@ -430,8 +423,9 @@ var ImportModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
430
423
  // passed in by connect
431
424
  setUploadStatus: _propTypes.default.func.isRequired,
432
425
  // passed in by connect
433
- uploadStatus: _propTypes.default.oneOf([_quizCommon.FILE_UPLOAD_SELECT, _quizCommon.FILE_UPLOAD_IMPORTING, _quizCommon.FILE_UPLOAD_SUCCESS, _quizCommon.FILE_UPLOAD_FAILURE, _quizCommon.FILE_UPLOAD_ERROR]).isRequired // passed in by connect
434
-
426
+ uploadStatus: _propTypes.default.oneOf([_quizCommon.FILE_UPLOAD_SELECT, _quizCommon.FILE_UPLOAD_IMPORTING, _quizCommon.FILE_UPLOAD_SUCCESS, _quizCommon.FILE_UPLOAD_FAILURE, _quizCommon.FILE_UPLOAD_ERROR]).isRequired,
427
+ // passed in by connect,
428
+ styles: _propTypes.default.object
435
429
  }, _class2.defaultProps = {
436
430
  closeOverride: null,
437
431
  disableConfirm: false,
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var generateStyle = function generateStyle(componentTheme) {
9
+ return {
10
+ altTextWrapper: {
11
+ marginTop: componentTheme.altTextMargin
12
+ }
13
+ };
14
+ };
15
+
16
+ var _default = generateStyle;
17
+ exports.default = _default;
@@ -3,11 +3,14 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = generator;
6
+ exports.default = void 0;
7
7
 
8
- function generator(_ref) {
8
+ var generateComponentTheme = function generateComponentTheme(_ref) {
9
9
  var spacing = _ref.spacing;
10
10
  return {
11
11
  altTextMargin: spacing.large
12
12
  };
13
- }
13
+ };
14
+
15
+ var _default = generateComponentTheme;
16
+ exports.default = _default;
@@ -2,8 +2,6 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
 
5
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
@@ -17,7 +15,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
17
15
 
18
16
  var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
19
17
 
20
- var _react = _interopRequireWildcard(require("react"));
18
+ var _react = require("react");
21
19
 
22
20
  var _propTypes = _interopRequireDefault(require("prop-types"));
23
21
 
@@ -25,7 +23,7 @@ var _reactDndHtml5Backend = _interopRequireDefault(require("react-dnd-html5-back
25
23
 
26
24
  var _reactDnd = require("react-dnd");
27
25
 
28
- var _uiThemeable = require("@instructure/ui-themeable");
26
+ var _emotion = require("@instructure/emotion");
29
27
 
30
28
  var _uiI18n = require("@instructure/ui-i18n");
31
29
 
@@ -49,7 +47,7 @@ var _grading = require("../../actions/grading.js");
49
47
 
50
48
  var _renderAlerts = require("../../util/renderAlerts.js");
51
49
 
52
- var _theme = _interopRequireDefault(require("./theme.js"));
50
+ var _styles = _interopRequireDefault(require("./styles.js"));
53
51
 
54
52
  var _CustomPropTypes = _interopRequireDefault(require("../../../common/util/CustomPropTypes.js"));
55
53
 
@@ -63,17 +61,9 @@ var _index3 = require("../ApiFeatureFlagInitializer/index.js");
63
61
 
64
62
  var _dec, _class, _class2, _temp;
65
63
 
66
- var styles = {
67
- componentId: 'fzweS',
68
- template: function template(theme) {
69
- return "\n\n.fzweS_dXHX{height:100%}";
70
- },
71
- 'sdk': 'fzweS_dXHX'
72
- };
73
-
74
- var _ref = /*#__PURE__*/_react.default.createElement(_index.default, null);
64
+ var _ref = (0, _emotion.jsx)(_index.default, null);
75
65
 
76
- var SDKApp = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
66
+ var SDKApp = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
77
67
  (0, _inherits2.default)(SDKApp, _Component);
78
68
 
79
69
  var _super = (0, _createSuper2.default)(SDKApp);
@@ -183,13 +173,13 @@ var SDKApp = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_
183
173
  var store = this.store,
184
174
  props = this.props,
185
175
  context = this.context;
186
- return /*#__PURE__*/_react.default.createElement(_reactRedux.Provider, {
176
+ return (0, _emotion.jsx)(_reactRedux.Provider, {
187
177
  store: store
188
- }, /*#__PURE__*/_react.default.createElement(_index3.ApiFeatureFlagInitializer, null, /*#__PURE__*/_react.default.createElement(_index2.default, this.props.rceConfig, /*#__PURE__*/_react.default.createElement(_uiI18n.ApplyLocale, {
178
+ }, (0, _emotion.jsx)(_index3.ApiFeatureFlagInitializer, null, (0, _emotion.jsx)(_index2.default, this.props.rceConfig, (0, _emotion.jsx)(_uiI18n.ApplyLocale, {
189
179
  locale: (0, _quizCommon.getLocale)(props, context),
190
180
  timezone: props.timeZone
191
- }, /*#__PURE__*/_react.default.createElement("div", {
192
- className: styles.sdk,
181
+ }, (0, _emotion.jsx)("div", {
182
+ css: this.props.styles.sdk,
193
183
  "data-automation": "sdk-app"
194
184
  }, _ref, typeof props.children === 'function' ? props.children({
195
185
  addAlert: this.addAlert
@@ -226,7 +216,8 @@ var SDKApp = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_
226
216
  message: _propTypes.default.string
227
217
  })),
228
218
  userToken: _propTypes.default.string.isRequired,
229
- disableAlertLiveRegion: _propTypes.default.bool
219
+ disableAlertLiveRegion: _propTypes.default.bool,
220
+ styles: _propTypes.default.object
230
221
  }, _class2.contextTypes = {
231
222
  locale: _propTypes.default.string
232
223
  }, _class2.defaultProps = {
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var generateStyle = function generateStyle() {
9
+ return {
10
+ sdk: {
11
+ height: '100%'
12
+ }
13
+ };
14
+ };
15
+
16
+ var _default = generateStyle;
17
+ exports.default = _default;
@@ -2,8 +2,6 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
 
5
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
@@ -17,7 +15,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
17
15
 
18
16
  var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
19
17
 
20
- var _react = _interopRequireWildcard(require("react"));
18
+ var _react = require("react");
21
19
 
22
20
  var _propTypes = _interopRequireDefault(require("prop-types"));
23
21
 
@@ -25,35 +23,25 @@ var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-p
25
23
 
26
24
  var _uiIcons = require("@instructure/ui-icons");
27
25
 
28
- var _uiThemeable = require("@instructure/ui-themeable");
26
+ var _emotion = require("@instructure/emotion");
29
27
 
30
28
  var _index = _interopRequireDefault(require("../StimulusShowInfo/index.js"));
31
29
 
32
- var _Overlay = _interopRequireDefault(require("../../../../../common/components/shared/overlay/Overlay.js"));
33
-
34
30
  var _index2 = _interopRequireDefault(require("../../../../../building/components/resources/ActionButtons/index.js"));
35
31
 
36
32
  var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
37
33
 
34
+ var _styles = _interopRequireDefault(require("./styles.js"));
35
+
38
36
  var _theme = _interopRequireDefault(require("./theme.js"));
39
37
 
38
+ var _index3 = _interopRequireDefault(require("../../../shared/overlayEmotion/index.js"));
39
+
40
40
  var _dec, _class, _class2, _temp;
41
41
 
42
- var styles = {
43
- componentId: 'ceqOh',
44
- template: function template(theme) {
45
- return "\n\n.ceqOh_dRGY{padding-bottom:".concat(theme.stimulusPadding || 'inherit', ";padding-top:").concat(theme.stimulusPadding || 'inherit', "}\n\n.ceqOh_fsuY{align-items:center;display:flex;height:1rem;justify-content:space-between;padding-left:").concat(theme.headerPadding || 'inherit', ";padding-right:").concat(theme.headerPadding || 'inherit', "}\n\n.ceqOh_cKlw{display:flex;overflow:hidden}\n\n.ceqOh_ffXB{color:").concat(theme.stimulusLabelColor || 'inherit', ";font-size:").concat(theme.stimulusLabelFontSize || 'inherit', ";margin:0 ").concat(theme.stimulusLabelMargin || 'inherit', ";overflow:hidden;text-overflow:ellipsis}\n\n.ceqOh_dMwa{height:100%;padding:").concat(theme.stimulusContentPaddingTop || 'inherit', " ").concat(theme.stimulusContentPaddingLeftRight || 'inherit', " ").concat(theme.stimulusContentPaddingBottom || 'inherit', "}");
46
- },
47
- 'stimulus': 'ceqOh_dRGY',
48
- 'header': 'ceqOh_fsuY',
49
- 'leftHeader': 'ceqOh_cKlw',
50
- 'stimulusLabel': 'ceqOh_ffXB',
51
- 'stimulusContent': 'ceqOh_dMwa'
52
- };
53
-
54
- var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconBankLine, null);
55
-
56
- var StimulusShow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
42
+ var _ref = (0, _emotion.jsx)(_uiIcons.IconBankLine, null);
43
+
44
+ var StimulusShow = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
57
45
  (0, _inherits2.default)(StimulusShow, _Component);
58
46
 
59
47
  var _super = (0, _createSuper2.default)(StimulusShow);
@@ -86,20 +74,20 @@ var StimulusShow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
86
74
  }, {
87
75
  key: "render",
88
76
  value: function render() {
89
- return /*#__PURE__*/_react.default.createElement(_Overlay.default, {
77
+ return (0, _emotion.jsx)(_index3.default, {
90
78
  onClick: this.switchOnEditing,
91
- wrapperClassName: styles.stimulusWrapper,
79
+ wrapperStyles: this.props.styles.stimulusWrapper,
92
80
  tabIndex: "-1",
93
81
  hideOverlay: this.props.isQuizContentLocked
94
- }, /*#__PURE__*/_react.default.createElement("div", {
95
- className: styles.stimulus
96
- }, /*#__PURE__*/_react.default.createElement("div", {
97
- className: styles.header
98
- }, /*#__PURE__*/_react.default.createElement("div", {
99
- className: styles.leftHeader
100
- }, this.renderBankIcon(), /*#__PURE__*/_react.default.createElement("div", {
101
- className: styles.stimulusLabel
102
- }, (0, _formatMessage.default)('Stimulus'))), /*#__PURE__*/_react.default.createElement(_index2.default, {
82
+ }, (0, _emotion.jsx)("div", {
83
+ css: this.props.styles.stimulus
84
+ }, (0, _emotion.jsx)("div", {
85
+ css: this.props.styles.header
86
+ }, (0, _emotion.jsx)("div", {
87
+ css: this.props.styles.leftHeader
88
+ }, this.renderBankIcon(), (0, _emotion.jsx)("div", {
89
+ css: this.props.styles.stimulusLabel
90
+ }, (0, _formatMessage.default)('Stimulus'))), (0, _emotion.jsx)(_index2.default, {
103
91
  connectDragSource: this.props.connectDragSource,
104
92
  displayPosition: this.props.displayPosition,
105
93
  onDelete: this.props.openDeleteStimulusModal,
@@ -112,11 +100,12 @@ var StimulusShow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
112
100
  shouldDisableCopy: this.props.isQuizContentLocked,
113
101
  shouldRenderEdit: !this.props.isQuizContentLocked,
114
102
  shouldRenderDelete: !this.props.isQuizContentLocked
115
- })), /*#__PURE__*/_react.default.createElement("div", {
103
+ })), (0, _emotion.jsx)("div", {
116
104
  role: "presentation",
117
105
  onClick: this.props.isQuizContentLocked ? null : this.switchOnEditing,
118
- className: styles.stimulusContent
119
- }, /*#__PURE__*/_react.default.createElement(_index.default, {
106
+ css: this.props.styles.stimulusContent,
107
+ "data-testid": "stimulus-content"
108
+ }, (0, _emotion.jsx)(_index.default, {
120
109
  stimulus: this.props.stimulus
121
110
  }))));
122
111
  }
@@ -135,7 +124,8 @@ var StimulusShow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
135
124
  shouldDisableDragHandle: _propTypes.default.bool,
136
125
  stimulus: _reactImmutableProptypes.default.record.isRequired,
137
126
  switchOnEditing: _propTypes.default.func.isRequired,
138
- shouldFocusOnMount: _propTypes.default.bool.isRequired
127
+ shouldFocusOnMount: _propTypes.default.bool.isRequired,
128
+ styles: _propTypes.default.object
139
129
  }, _class2.defaultProps = {
140
130
  isBankedContent: false,
141
131
  isQuizContentLocked: false,
@@ -0,0 +1,41 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var generateStyle = function generateStyle(componentTheme) {
9
+ return {
10
+ stimulus: {
11
+ paddingTop: componentTheme.stimulusPadding,
12
+ paddingBottom: componentTheme.stimulusPadding
13
+ },
14
+ header: {
15
+ height: '1rem',
16
+ paddingLeft: componentTheme.headerPadding,
17
+ paddingRight: componentTheme.headerPadding,
18
+ display: 'flex',
19
+ alignItems: 'center',
20
+ justifyContent: 'space-between'
21
+ },
22
+ leftHeader: {
23
+ display: 'flex',
24
+ overflow: 'hidden'
25
+ },
26
+ stimulusLabel: {
27
+ color: componentTheme.stimulusLabelColor,
28
+ fontSize: componentTheme.stimulusLabelFontSize,
29
+ margin: "0 ".concat(componentTheme.stimulusLabelMargin),
30
+ overflow: 'hidden',
31
+ textOverflow: 'ellipsis'
32
+ },
33
+ stimulusContent: {
34
+ height: '10%0',
35
+ padding: "".concat(componentTheme.stimulusContentPaddingTop, " ").concat(componentTheme.stimulusContentPaddingLeftRight, " ").concat(componentTheme.stimulusContentPaddingBottom)
36
+ }
37
+ };
38
+ };
39
+
40
+ var _default = generateStyle;
41
+ exports.default = _default;
@@ -3,9 +3,9 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = generator;
6
+ exports.default = void 0;
7
7
 
8
- function generator(_ref) {
8
+ var generateComponentTheme = function generateComponentTheme(_ref) {
9
9
  var spacing = _ref.spacing,
10
10
  typography = _ref.typography,
11
11
  colors = _ref.colors;
@@ -19,4 +19,7 @@ function generator(_ref) {
19
19
  stimulusContentPaddingBottom: spacing.small,
20
20
  stimulusContentPaddingLeftRight: spacing.small
21
21
  };
22
- }
22
+ };
23
+
24
+ var _default = generateComponentTheme;
25
+ exports.default = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/quiz-core",
3
- "version": "20.10.1-rc.5+000550e27",
3
+ "version": "20.10.1-rc.6+608228b5c",
4
4
  "license": "MIT",
5
5
  "description": "The Quiz React SDK by Instructure Inc.",
6
6
  "author": "Instructure, Inc. Engineering and Product Design",
@@ -44,11 +44,11 @@
44
44
  "@instructure/emotion": "^8.51.0",
45
45
  "@instructure/grading-utils": "^1.0.0",
46
46
  "@instructure/outcomes-ui": "^3.1.0",
47
- "@instructure/quiz-common": "20.10.1-rc.5+000550e27",
48
- "@instructure/quiz-i18n": "20.10.1-rc.5+000550e27",
49
- "@instructure/quiz-interactions": "20.10.1-rc.5+000550e27",
50
- "@instructure/quiz-number-input": "20.10.1-rc.5+000550e27",
51
- "@instructure/quiz-rce": "20.10.1-rc.5+000550e27",
47
+ "@instructure/quiz-common": "20.10.1-rc.6+608228b5c",
48
+ "@instructure/quiz-i18n": "20.10.1-rc.6+608228b5c",
49
+ "@instructure/quiz-interactions": "20.10.1-rc.6+608228b5c",
50
+ "@instructure/quiz-number-input": "20.10.1-rc.6+608228b5c",
51
+ "@instructure/quiz-rce": "20.10.1-rc.6+608228b5c",
52
52
  "@instructure/ui-a11y-content": "^8.51.0",
53
53
  "@instructure/ui-alerts": "^8.51.0",
54
54
  "@instructure/ui-avatar": "^8.51.0",
@@ -112,7 +112,7 @@
112
112
  "file-saver": "~2.0.5",
113
113
  "humps": "^2.0.0",
114
114
  "immutable": "^3.8.1",
115
- "instructure-validations": "20.10.1-rc.5+000550e27",
115
+ "instructure-validations": "20.10.1-rc.6+608228b5c",
116
116
  "ipaddr.js": "^1.5.4",
117
117
  "isomorphic-fetch": "^2.2.0",
118
118
  "isuuid": "^0.1.0",
@@ -163,7 +163,7 @@
163
163
  "intl": "^1.2.4",
164
164
  "jquery": "^2.2.3",
165
165
  "most-subject": "^5.3.0",
166
- "quiz-presets": "20.10.1-rc.5+000550e27",
166
+ "quiz-presets": "20.10.1-rc.6+608228b5c",
167
167
  "react": "^16.8.6",
168
168
  "react-addons-test-utils": "^15.6.2",
169
169
  "react-dom": "^16.8.6",
@@ -179,5 +179,5 @@
179
179
  "publishConfig": {
180
180
  "access": "public"
181
181
  },
182
- "gitHead": "000550e2798491a2c0ecb006d4be4abc227fc685"
182
+ "gitHead": "608228b5cd5d4366f332cd20ec0eb7e6676b488d"
183
183
  }
@@ -1,3 +0,0 @@
1
- export default function generator() {
2
- return {};
3
- }
@@ -1,10 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = generator;
7
-
8
- function generator() {
9
- return {};
10
- }