@instructure/quiz-core 20.8.1-rc.4 → 20.8.1-rc.5

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.
Files changed (25) hide show
  1. package/es/building/components/resources/quiz/title/Edit/index.js +25 -34
  2. package/es/building/components/resources/quiz/title/Edit/styles.js +38 -0
  3. package/es/building/components/resources/quiz/title/Edit/theme.js +4 -2
  4. package/es/common/components/shared/ExpandButton/index.js +24 -20
  5. package/es/common/components/shared/ExpandButton/styles.js +13 -0
  6. package/es/common/components/shared/ExpandButton/theme.js +4 -2
  7. package/es/common/components/shared/Paginator/index.js +13 -17
  8. package/es/common/components/shared/Paginator/styles.js +9 -0
  9. package/es/common/components/shared/Paginator/theme.js +4 -2
  10. package/es/common/components/shared/errors/Errors.js +32 -25
  11. package/es/common/components/shared/errors/styles.js +17 -0
  12. package/es/common/components/shared/errors/theme.js +4 -2
  13. package/lib/building/components/resources/quiz/title/Edit/index.js +24 -36
  14. package/lib/building/components/resources/quiz/title/Edit/styles.js +48 -0
  15. package/lib/building/components/resources/quiz/title/Edit/theme.js +6 -3
  16. package/lib/common/components/shared/ExpandButton/index.js +23 -23
  17. package/lib/common/components/shared/ExpandButton/styles.js +23 -0
  18. package/lib/common/components/shared/ExpandButton/theme.js +6 -3
  19. package/lib/common/components/shared/Paginator/index.js +12 -18
  20. package/lib/common/components/shared/Paginator/styles.js +17 -0
  21. package/lib/common/components/shared/Paginator/theme.js +6 -3
  22. package/lib/common/components/shared/errors/Errors.js +33 -26
  23. package/lib/common/components/shared/errors/styles.js +25 -0
  24. package/lib/common/components/shared/errors/theme.js +6 -3
  25. package/package.json +9 -9
@@ -1,4 +1,3 @@
1
- import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
2
1
  import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
3
2
  import _createClass from "@babel/runtime/helpers/esm/createClass";
4
3
  import _inherits from "@babel/runtime/helpers/esm/inherits";
@@ -6,25 +5,15 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
6
5
 
7
6
  var _dec, _class, _class2, _temp;
8
7
 
9
- import React, { Component } from 'react';
8
+ /** @jsx jsx */
9
+ import { Component } from 'react';
10
10
  import PropTypes from 'prop-types';
11
11
  import ImmutablePropTypes from 'react-immutable-proptypes';
12
12
  import ReactDOM from 'react-dom';
13
13
  import defer from 'lodash/defer';
14
- import classNames from 'classnames';
15
- import { themeable } from '@instructure/ui-themeable';
16
- var styles = {
17
- componentId: 'ciuec',
18
- template: function template(theme) {
19
- return "\n\n.ciuec_eqoe{box-sizing:border-box;display:flex;flex-direction:column;height:5rem;justify-content:center;padding-left:".concat(theme.titleEditWrapperLeftPadding || 'inherit', ";padding-right:").concat(theme.titleEditWrapperRightPadding || 'inherit', ";position:relative;width:100%}\n\n.ciuec_dwFS{font-family:").concat(theme.titleEditInputFontFamily || 'inherit', ";font-size:").concat(theme.titleEditInputFontSize || 'inherit', "}\n\n.ciuec_dRxD,.ciuec_dvSU{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;width:100%}\n\n.ciuec_xXob{border:solid 1px ").concat(theme.errorBorderColor || 'inherit', ";border-radius:").concat(theme.errorBorderBorderRadius || 'inherit', ";margin:").concat(theme.errorBorderMargin || 'inherit', ";padding:").concat(theme.errorBorderPadding || 'inherit', "}");
20
- },
21
- 'titleEditWrapper': 'ciuec_eqoe',
22
- 'titleEditInput': 'ciuec_dwFS',
23
- 'errorsWrapper': 'ciuec_dRxD',
24
- 'inputWrapper': 'ciuec_dvSU',
25
- 'errorBorder': 'ciuec_xXob'
26
- };
27
- import theme from "./theme.js";
14
+ import { withStyle, jsx } from '@instructure/emotion';
15
+ import generateStyle from "./styles.js";
16
+ import generateComponentTheme from "./theme.js";
28
17
  import Errors from "../../../../../../common/components/shared/errors/Errors.js";
29
18
  import t from '@instructure/quiz-i18n/es/format-message'; // =================================
30
19
  // once editing is toggled this div
@@ -32,7 +21,7 @@ import t from '@instructure/quiz-i18n/es/format-message'; // ===================
32
21
  // allow for canceling
33
22
  // =================================
34
23
 
35
- export var TitleEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
24
+ export var TitleEdit = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
36
25
  _inherits(TitleEdit, _Component);
37
26
 
38
27
  var _super = _createSuper(TitleEdit);
@@ -95,12 +84,18 @@ export var TitleEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp =
95
84
  // todo: extract this into a shared method
96
85
  // to be used on many components
97
86
  value: function componentDidMount() {
87
+ this.props.makeStyles();
98
88
  var input = ReactDOM.findDOMNode(this.input); // some browsers add chars so * 2 to ensure at end
99
89
 
100
90
  var valLength = input.value.length * 2;
101
91
  input.focus();
102
92
  input.setSelectionRange(valLength, valLength);
103
93
  }
94
+ }, {
95
+ key: "componentDidUpdate",
96
+ value: function componentDidUpdate() {
97
+ this.props.makeStyles();
98
+ }
104
99
  }, {
105
100
  key: "ifValidElseError",
106
101
  value: function ifValidElseError(cb) {
@@ -129,31 +124,24 @@ export var TitleEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp =
129
124
  key: "renderErrors",
130
125
  value: function renderErrors() {
131
126
  if (this.hasErrors()) {
132
- return /*#__PURE__*/React.createElement("div", {
133
- className: styles.errorsWrapper
134
- }, /*#__PURE__*/React.createElement(Errors, {
127
+ return jsx("div", {
128
+ css: this.props.styles.errorsWrapper
129
+ }, jsx(Errors, {
135
130
  errorList: this.props.errors
136
131
  }));
137
132
  }
138
133
  }
139
- }, {
140
- key: "inputClasses",
141
- value: function inputClasses() {
142
- var _classNames;
143
-
144
- return classNames((_classNames = {}, _defineProperty(_classNames, styles.titleEditInput, true), _defineProperty(_classNames, styles.errorBorder, this.hasErrors()), _classNames));
145
- }
146
134
  }, {
147
135
  key: "render",
148
136
  value: function render() {
149
- return /*#__PURE__*/React.createElement("div", {
137
+ return jsx("div", {
150
138
  ref: this.setRef('wrapper'),
151
- className: styles.titleEditWrapper,
139
+ css: this.props.styles.titleEditWrapper,
152
140
  onBlur: this.handleBlur,
153
141
  "data-automation": "sdk-quiz-title-edit-wrapper"
154
- }, /*#__PURE__*/React.createElement("div", {
155
- className: styles.inputWrapper
156
- }, /*#__PURE__*/React.createElement("input", {
142
+ }, jsx("div", {
143
+ css: this.props.styles.inputWrapper
144
+ }, jsx("input", {
157
145
  ref: this.setRef('input'),
158
146
  type: "text",
159
147
  "aria-label": t('title'),
@@ -162,7 +150,7 @@ export var TitleEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp =
162
150
  onKeyDown: this.handleKeyDown,
163
151
  onKeyUp: this.handleKeyUp,
164
152
  onChange: this.props.onInputChange,
165
- className: this.inputClasses(),
153
+ css: this.props.styles.titleEditInput,
166
154
  "data-automation": "sdk-quiz-title-edit"
167
155
  })), this.renderErrors());
168
156
  }
@@ -179,7 +167,10 @@ export var TitleEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp =
179
167
  errorsAreShowing: PropTypes.bool,
180
168
  onInputChange: PropTypes.func.isRequired,
181
169
  saveAndPreview: PropTypes.func.isRequired,
182
- deferMock: PropTypes.func
170
+ deferMock: PropTypes.func,
171
+ // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
172
+ styles: PropTypes.object,
173
+ makeStyles: PropTypes.func
183
174
  }, _class2.defaultProps = {
184
175
  errorsAreShowing: false,
185
176
  deferMock: defer
@@ -0,0 +1,38 @@
1
+ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
2
+
3
+ var generateStyle = function generateStyle(componentTheme, props) {
4
+ var wrapperStyles = {
5
+ width: '100%',
6
+ flex: '1 1 auto',
7
+ display: 'flex',
8
+ flexDirection: 'column',
9
+ justifyContent: 'center'
10
+ };
11
+ var errorBorderStyles = {
12
+ margin: componentTheme.errorBorderMargin,
13
+ padding: componentTheme.errorBorderPadding,
14
+ border: "solid 1px ".concat(componentTheme.errorBorderColor),
15
+ borderRadius: componentTheme.errorBorderBorderRadius
16
+ };
17
+ return {
18
+ titleEditWrapper: {
19
+ position: 'relative',
20
+ width: '100%',
21
+ height: '5rem',
22
+ boxSizing: 'border-box',
23
+ paddingLeft: componentTheme.titleEditWrapperLeftPadding,
24
+ paddingRight: componentTheme.titleEditWrapperRightPadding,
25
+ display: 'flex',
26
+ flexDirection: 'column',
27
+ justifyContent: 'center'
28
+ },
29
+ titleEditInput: _objectSpread({
30
+ fontFamily: componentTheme.titleEditInputFontFamily,
31
+ fontSize: componentTheme.titleEditInputFontSize
32
+ }, props.errorsAreShowing && props.errors.size > 0 && errorBorderStyles),
33
+ inputWrapper: wrapperStyles,
34
+ errorsWrapper: wrapperStyles
35
+ };
36
+ };
37
+
38
+ 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
  colors = _ref.colors,
4
4
  typography = _ref.typography,
@@ -13,4 +13,6 @@ export default function generator(_ref) {
13
13
  errorBorderColor: colors.crimson,
14
14
  errorBorderBorderRadius: borders.radiusSmall
15
15
  };
16
- }
16
+ };
17
+
18
+ export default generateComponentTheme;
@@ -1,4 +1,3 @@
1
- import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
2
1
  import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
3
2
  import _createClass from "@babel/runtime/helpers/esm/createClass";
4
3
  import _inherits from "@babel/runtime/helpers/esm/inherits";
@@ -6,23 +5,16 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
6
5
 
7
6
  var _dec, _class, _class2, _temp;
8
7
 
9
- import React, { Component } from 'react';
8
+ /** @jsx jsx */
9
+ import { Component } from 'react';
10
10
  import PropTypes from 'prop-types';
11
- import classNames from 'classnames';
12
11
  import { IconArrowOpenDownLine } from '@instructure/ui-icons';
13
12
  import { IconButton } from '@instructure/ui-buttons';
14
- import { themeable } from '@instructure/ui-themeable';
13
+ import { withStyle, jsx } from '@instructure/emotion';
15
14
  import { omitProps } from '@instructure/ui-react-utils';
16
- var styles = {
17
- componentId: 'yAmvo',
18
- template: function template(theme) {
19
- return "\n\n.yAmvo_dnnz{transition:transform ".concat(theme.iconTransitionDuration || 'inherit', "}\n\n.yAmvo_bPeN{transform:rotateX(180deg)}");
20
- },
21
- 'icon': 'yAmvo_dnnz',
22
- 'iconOpened': 'yAmvo_bPeN'
23
- };
24
- import theme from "./theme.js";
25
- export var ExpandButton = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
15
+ import generateStyle from "./styles.js";
16
+ import generateComponentTheme from "./theme.js";
17
+ export var ExpandButton = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
26
18
  _inherits(ExpandButton, _Component);
27
19
 
28
20
  var _super = _createSuper(ExpandButton);
@@ -34,18 +26,27 @@ export var ExpandButton = (_dec = themeable(theme, styles), _dec(_class = (_temp
34
26
  }
35
27
 
36
28
  _createClass(ExpandButton, [{
29
+ key: "componentDidMount",
30
+ value: function componentDidMount() {
31
+ this.props.makeStyles();
32
+ }
33
+ }, {
34
+ key: "componentDidUpdate",
35
+ value: function componentDidUpdate() {
36
+ this.props.makeStyles();
37
+ }
38
+ }, {
37
39
  key: "renderIcon",
38
40
  value: function renderIcon() {
39
- var _classNames;
40
-
41
- return /*#__PURE__*/React.createElement(IconArrowOpenDownLine, {
42
- className: classNames((_classNames = {}, _defineProperty(_classNames, styles.icon, true), _defineProperty(_classNames, styles.iconOpened, this.props.isExpanded), _classNames))
41
+ return jsx(IconArrowOpenDownLine, {
42
+ "data-testid": "expand-button",
43
+ css: this.props.styles.icon
43
44
  });
44
45
  }
45
46
  }, {
46
47
  key: "render",
47
48
  value: function render() {
48
- return /*#__PURE__*/React.createElement(IconButton, Object.assign({
49
+ return jsx(IconButton, Object.assign({
49
50
  size: "medium",
50
51
  withBackground: false,
51
52
  withBorder: false,
@@ -62,6 +63,9 @@ export var ExpandButton = (_dec = themeable(theme, styles), _dec(_class = (_temp
62
63
  }(Component), _class2.propTypes = {
63
64
  isExpanded: PropTypes.bool.isRequired,
64
65
  title: PropTypes.string.isRequired,
65
- onClick: PropTypes.func.isRequired
66
+ onClick: PropTypes.func.isRequired,
67
+ // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
68
+ styles: PropTypes.object,
69
+ makeStyles: PropTypes.func
66
70
  }, _temp)) || _class);
67
71
  export default ExpandButton;
@@ -0,0 +1,13 @@
1
+ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
2
+
3
+ var generateStyle = function generateStyle(componentTheme, props) {
4
+ return {
5
+ icon: _objectSpread({
6
+ transition: "transform ".concat(componentTheme.iconTransitionDuration)
7
+ }, props.isExpanded && {
8
+ transform: 'rotate3d(1, 0, 0, 180deg)'
9
+ })
10
+ };
11
+ };
12
+
13
+ export default generateStyle;
@@ -1,5 +1,7 @@
1
- export default function generator() {
1
+ var generateComponentTheme = function generateComponentTheme() {
2
2
  return {
3
3
  iconTransitionDuration: '0.3s'
4
4
  };
5
- }
5
+ };
6
+
7
+ export default generateComponentTheme;
@@ -5,20 +5,15 @@ 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 { Pagination } from '@instructure/ui-pagination';
11
- import { themeable } from '@instructure/ui-themeable';
12
+ import { withStyle, jsx } from '@instructure/emotion';
12
13
  import t from '@instructure/quiz-i18n/es/format-message';
13
- var styles = {
14
- componentId: 'fVnQK',
15
- template: function template(theme) {
16
- return "\n\n.fVnQK_bPMN{padding-top:".concat(theme.paginationPadding || 'inherit', "}");
17
- },
18
- 'pagination': 'fVnQK_bPMN'
19
- };
20
- import theme from "./theme.js";
21
- export var Paginator = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
14
+ import generateStyle from "./styles.js";
15
+ import generateComponentTheme from "./theme.js";
16
+ export var Paginator = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
22
17
  _inherits(Paginator, _Component);
23
18
 
24
19
  var _super = _createSuper(Paginator);
@@ -36,7 +31,7 @@ export var Paginator = (_dec = themeable(theme, styles), _dec(_class = (_temp =
36
31
 
37
32
  var paginationButtons = Array.from(Array(this.props.totalPages)).map(function (v, i) {
38
33
  var page = i + 1;
39
- return /*#__PURE__*/React.createElement(Pagination.Page, {
34
+ return jsx(Pagination.Page, {
40
35
  key: page,
41
36
  current: page === _this.props.currentPage,
42
37
  onClick: _this.props.onPageChange.bind(null, page)
@@ -44,9 +39,9 @@ export var Paginator = (_dec = themeable(theme, styles), _dec(_class = (_temp =
44
39
 
45
40
  }, page);
46
41
  });
47
- return /*#__PURE__*/React.createElement("div", {
48
- className: styles.pagination
49
- }, /*#__PURE__*/React.createElement(Pagination, {
42
+ return jsx("div", {
43
+ css: this.props.styles.pagination
44
+ }, jsx(Pagination, {
50
45
  labelNext: t('Next page'),
51
46
  labelPrev: t('Previous page'),
52
47
  variant: "compact"
@@ -55,7 +50,7 @@ export var Paginator = (_dec = themeable(theme, styles), _dec(_class = (_temp =
55
50
  }, {
56
51
  key: "render",
57
52
  value: function render() {
58
- return /*#__PURE__*/React.createElement("div", null, this.props.children, this.renderPagination());
53
+ return jsx("div", null, this.props.children, this.renderPagination());
59
54
  }
60
55
  }]);
61
56
 
@@ -65,6 +60,7 @@ export var Paginator = (_dec = themeable(theme, styles), _dec(_class = (_temp =
65
60
  children: PropTypes.node.isRequired,
66
61
  currentPage: PropTypes.number.isRequired,
67
62
  onPageChange: PropTypes.func.isRequired,
68
- totalPages: PropTypes.number.isRequired
63
+ totalPages: PropTypes.number.isRequired,
64
+ styles: PropTypes.object
69
65
  }, _temp)) || _class);
70
66
  export default Paginator;
@@ -0,0 +1,9 @@
1
+ var generateStyle = function generateStyle(componentTheme) {
2
+ return {
3
+ pagination: {
4
+ paddingTop: componentTheme.paginationPadding
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
  paginationPadding: spacing.small
5
5
  };
6
- }
6
+ };
7
+
8
+ export default generateComponentTheme;
@@ -5,57 +5,64 @@ 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 { List } from 'immutable';
10
11
  import ImmutablePropTypes from 'react-immutable-proptypes';
11
- import { themeable } from '@instructure/ui-themeable';
12
- var styles = {
13
- componentId: 'eFvbO',
14
- template: function template(theme) {
15
- return "\n\n.eFvbO_bEOF{align-items:flex-start;display:flex;flex-direction:column}\n\n.eFvbO_ddvR{color:".concat(theme.errorColor || 'inherit', ";flex:1 1 auto;font-family:").concat(theme.errorFontFamily || 'inherit', ";font-size:").concat(theme.errorFontSize || 'inherit', "}");
16
- },
17
- 'errors': 'eFvbO_bEOF',
18
- 'error': 'eFvbO_ddvR'
19
- };
20
- import theme from "./theme.js";
21
- export var Errors = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
12
+ import PropTypes from 'prop-types';
13
+ import { withStyle, jsx } from '@instructure/emotion';
14
+ import generateStyle from "./styles.js";
15
+ import generateComponentTheme from "./theme.js";
16
+ export var Errors = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
22
17
  _inherits(Errors, _Component);
23
18
 
24
19
  var _super = _createSuper(Errors);
25
20
 
26
21
  function Errors() {
22
+ var _this;
23
+
27
24
  _classCallCheck(this, Errors);
28
25
 
29
- return _super.apply(this, arguments);
30
- }
26
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
27
+ args[_key] = arguments[_key];
28
+ }
31
29
 
32
- _createClass(Errors, [{
33
- key: "renderError",
34
- value: function renderError(errorText, i) {
30
+ _this = _super.call.apply(_super, [this].concat(args));
31
+
32
+ _this.renderError = function (errorText, i) {
35
33
  var key = "error_for_".concat(i);
36
- return /*#__PURE__*/React.createElement("div", {
37
- className: styles.error,
34
+ return jsx("div", {
35
+ css: _this.props.styles.error,
38
36
  key: key,
39
37
  "data-automation": "sdk-core-error"
40
38
  }, errorText);
41
- }
42
- }, {
39
+ };
40
+
41
+ return _this;
42
+ }
43
+
44
+ _createClass(Errors, [{
43
45
  key: "render",
44
46
  value: function render() {
47
+ var _this$props$errorList;
48
+
45
49
  if (this.props.errorList.size === 0) {
46
50
  return null;
47
51
  }
48
52
 
49
- return /*#__PURE__*/React.createElement("div", {
50
- className: styles.errors
51
- }, this.props.errorList.toArray().map(this.renderError));
53
+ return jsx("div", {
54
+ css: this.props.styles.errors,
55
+ "data-testid": "errors-container"
56
+ }, (_this$props$errorList = this.props.errorList) === null || _this$props$errorList === void 0 ? void 0 : _this$props$errorList.toArray().map(this.renderError));
52
57
  }
53
58
  }]);
54
59
 
55
60
  Errors.displayName = "Errors";
56
61
  return Errors;
57
62
  }(Component), _class2.propTypes = {
58
- errorList: ImmutablePropTypes.list
63
+ errorList: ImmutablePropTypes.list,
64
+ // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
65
+ styles: PropTypes.object
59
66
  }, _class2.defaultProps = {
60
67
  errorList: List()
61
68
  }, _temp)) || _class);
@@ -0,0 +1,17 @@
1
+ var generateStyle = function generateStyle(componentTheme) {
2
+ return {
3
+ errors: {
4
+ display: 'flex',
5
+ alignItems: 'flex-start',
6
+ flexDirection: 'column'
7
+ },
8
+ error: {
9
+ fontFamily: componentTheme.errorFontFamily,
10
+ fontSize: componentTheme.errorFontSize,
11
+ color: componentTheme.errorColor,
12
+ flex: '1 1 auto'
13
+ }
14
+ };
15
+ };
16
+
17
+ export default generateStyle;
@@ -1,4 +1,4 @@
1
- export default function generator(_ref) {
1
+ var generateComponentTheme = function generateComponentTheme(_ref) {
2
2
  var colors = _ref.colors,
3
3
  typography = _ref.typography;
4
4
  return {
@@ -6,4 +6,6 @@ export default function generator(_ref) {
6
6
  errorFontSize: typography.fontSizeSmall,
7
7
  errorColor: colors.crimson
8
8
  };
9
- }
9
+ };
10
+
11
+ export default generateComponentTheme;
@@ -2,15 +2,11 @@
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
  });
10
8
  exports.default = exports.TitleEdit = void 0;
11
9
 
12
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
-
14
10
  var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
15
11
 
16
12
  var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -19,7 +15,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
19
15
 
20
16
  var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
21
17
 
22
- var _react = _interopRequireWildcard(require("react"));
18
+ var _react = require("react");
23
19
 
24
20
  var _propTypes = _interopRequireDefault(require("prop-types"));
25
21
 
@@ -29,9 +25,9 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
29
25
 
30
26
  var _defer = _interopRequireDefault(require("lodash/defer"));
31
27
 
32
- var _classnames = _interopRequireDefault(require("classnames"));
28
+ var _emotion = require("@instructure/emotion");
33
29
 
34
- var _uiThemeable = require("@instructure/ui-themeable");
30
+ var _styles = _interopRequireDefault(require("./styles.js"));
35
31
 
36
32
  var _theme = _interopRequireDefault(require("./theme.js"));
37
33
 
@@ -41,23 +37,12 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
41
37
 
42
38
  var _dec, _class, _class2, _temp;
43
39
 
44
- var styles = {
45
- componentId: 'ciuec',
46
- template: function template(theme) {
47
- return "\n\n.ciuec_eqoe{box-sizing:border-box;display:flex;flex-direction:column;height:5rem;justify-content:center;padding-left:".concat(theme.titleEditWrapperLeftPadding || 'inherit', ";padding-right:").concat(theme.titleEditWrapperRightPadding || 'inherit', ";position:relative;width:100%}\n\n.ciuec_dwFS{font-family:").concat(theme.titleEditInputFontFamily || 'inherit', ";font-size:").concat(theme.titleEditInputFontSize || 'inherit', "}\n\n.ciuec_dRxD,.ciuec_dvSU{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;width:100%}\n\n.ciuec_xXob{border:solid 1px ").concat(theme.errorBorderColor || 'inherit', ";border-radius:").concat(theme.errorBorderBorderRadius || 'inherit', ";margin:").concat(theme.errorBorderMargin || 'inherit', ";padding:").concat(theme.errorBorderPadding || 'inherit', "}");
48
- },
49
- 'titleEditWrapper': 'ciuec_eqoe',
50
- 'titleEditInput': 'ciuec_dwFS',
51
- 'errorsWrapper': 'ciuec_dRxD',
52
- 'inputWrapper': 'ciuec_dvSU',
53
- 'errorBorder': 'ciuec_xXob'
54
- };
55
40
  // =================================
56
41
  // once editing is toggled this div
57
42
  // is rendered & has actions that
58
43
  // allow for canceling
59
44
  // =================================
60
- var TitleEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
45
+ var TitleEdit = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
61
46
  (0, _inherits2.default)(TitleEdit, _Component);
62
47
 
63
48
  var _super = (0, _createSuper2.default)(TitleEdit);
@@ -120,6 +105,8 @@ var TitleEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
120
105
  // todo: extract this into a shared method
121
106
  // to be used on many components
122
107
  value: function componentDidMount() {
108
+ this.props.makeStyles();
109
+
123
110
  var input = _reactDom.default.findDOMNode(this.input); // some browsers add chars so * 2 to ensure at end
124
111
 
125
112
 
@@ -127,6 +114,11 @@ var TitleEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
127
114
  input.focus();
128
115
  input.setSelectionRange(valLength, valLength);
129
116
  }
117
+ }, {
118
+ key: "componentDidUpdate",
119
+ value: function componentDidUpdate() {
120
+ this.props.makeStyles();
121
+ }
130
122
  }, {
131
123
  key: "ifValidElseError",
132
124
  value: function ifValidElseError(cb) {
@@ -155,31 +147,24 @@ var TitleEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
155
147
  key: "renderErrors",
156
148
  value: function renderErrors() {
157
149
  if (this.hasErrors()) {
158
- return /*#__PURE__*/_react.default.createElement("div", {
159
- className: styles.errorsWrapper
160
- }, /*#__PURE__*/_react.default.createElement(_Errors.default, {
150
+ return (0, _emotion.jsx)("div", {
151
+ css: this.props.styles.errorsWrapper
152
+ }, (0, _emotion.jsx)(_Errors.default, {
161
153
  errorList: this.props.errors
162
154
  }));
163
155
  }
164
156
  }
165
- }, {
166
- key: "inputClasses",
167
- value: function inputClasses() {
168
- var _classNames;
169
-
170
- return (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, styles.titleEditInput, true), (0, _defineProperty2.default)(_classNames, styles.errorBorder, this.hasErrors()), _classNames));
171
- }
172
157
  }, {
173
158
  key: "render",
174
159
  value: function render() {
175
- return /*#__PURE__*/_react.default.createElement("div", {
160
+ return (0, _emotion.jsx)("div", {
176
161
  ref: this.setRef('wrapper'),
177
- className: styles.titleEditWrapper,
162
+ css: this.props.styles.titleEditWrapper,
178
163
  onBlur: this.handleBlur,
179
164
  "data-automation": "sdk-quiz-title-edit-wrapper"
180
- }, /*#__PURE__*/_react.default.createElement("div", {
181
- className: styles.inputWrapper
182
- }, /*#__PURE__*/_react.default.createElement("input", {
165
+ }, (0, _emotion.jsx)("div", {
166
+ css: this.props.styles.inputWrapper
167
+ }, (0, _emotion.jsx)("input", {
183
168
  ref: this.setRef('input'),
184
169
  type: "text",
185
170
  "aria-label": (0, _formatMessage.default)('title'),
@@ -188,7 +173,7 @@ var TitleEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
188
173
  onKeyDown: this.handleKeyDown,
189
174
  onKeyUp: this.handleKeyUp,
190
175
  onChange: this.props.onInputChange,
191
- className: this.inputClasses(),
176
+ css: this.props.styles.titleEditInput,
192
177
  "data-automation": "sdk-quiz-title-edit"
193
178
  })), this.renderErrors());
194
179
  }
@@ -204,7 +189,10 @@ var TitleEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
204
189
  errorsAreShowing: _propTypes.default.bool,
205
190
  onInputChange: _propTypes.default.func.isRequired,
206
191
  saveAndPreview: _propTypes.default.func.isRequired,
207
- deferMock: _propTypes.default.func
192
+ deferMock: _propTypes.default.func,
193
+ // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
194
+ styles: _propTypes.default.object,
195
+ makeStyles: _propTypes.default.func
208
196
  }, _class2.defaultProps = {
209
197
  errorsAreShowing: false,
210
198
  deferMock: _defer.default
@@ -0,0 +1,48 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = void 0;
9
+
10
+ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
11
+
12
+ var generateStyle = function generateStyle(componentTheme, props) {
13
+ var wrapperStyles = {
14
+ width: '100%',
15
+ flex: '1 1 auto',
16
+ display: 'flex',
17
+ flexDirection: 'column',
18
+ justifyContent: 'center'
19
+ };
20
+ var errorBorderStyles = {
21
+ margin: componentTheme.errorBorderMargin,
22
+ padding: componentTheme.errorBorderPadding,
23
+ border: "solid 1px ".concat(componentTheme.errorBorderColor),
24
+ borderRadius: componentTheme.errorBorderBorderRadius
25
+ };
26
+ return {
27
+ titleEditWrapper: {
28
+ position: 'relative',
29
+ width: '100%',
30
+ height: '5rem',
31
+ boxSizing: 'border-box',
32
+ paddingLeft: componentTheme.titleEditWrapperLeftPadding,
33
+ paddingRight: componentTheme.titleEditWrapperRightPadding,
34
+ display: 'flex',
35
+ flexDirection: 'column',
36
+ justifyContent: 'center'
37
+ },
38
+ titleEditInput: (0, _objectSpread2.default)({
39
+ fontFamily: componentTheme.titleEditInputFontFamily,
40
+ fontSize: componentTheme.titleEditInputFontSize
41
+ }, props.errorsAreShowing && props.errors.size > 0 && errorBorderStyles),
42
+ inputWrapper: wrapperStyles,
43
+ errorsWrapper: wrapperStyles
44
+ };
45
+ };
46
+
47
+ var _default = generateStyle;
48
+ 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
  colors = _ref.colors,
11
11
  typography = _ref.typography,
@@ -20,4 +20,7 @@ function generator(_ref) {
20
20
  errorBorderColor: colors.crimson,
21
21
  errorBorderBorderRadius: borders.radiusSmall
22
22
  };
23
- }
23
+ };
24
+
25
+ var _default = generateComponentTheme;
26
+ exports.default = _default;
@@ -2,15 +2,11 @@
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
  });
10
8
  exports.default = exports.ExpandButton = void 0;
11
9
 
12
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
-
14
10
  var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
15
11
 
16
12
  var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -19,33 +15,25 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
19
15
 
20
16
  var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
21
17
 
22
- var _react = _interopRequireWildcard(require("react"));
18
+ var _react = require("react");
23
19
 
24
20
  var _propTypes = _interopRequireDefault(require("prop-types"));
25
21
 
26
- var _classnames = _interopRequireDefault(require("classnames"));
27
-
28
22
  var _uiIcons = require("@instructure/ui-icons");
29
23
 
30
24
  var _uiButtons = require("@instructure/ui-buttons");
31
25
 
32
- var _uiThemeable = require("@instructure/ui-themeable");
26
+ var _emotion = require("@instructure/emotion");
33
27
 
34
28
  var _uiReactUtils = require("@instructure/ui-react-utils");
35
29
 
30
+ var _styles = _interopRequireDefault(require("./styles.js"));
31
+
36
32
  var _theme = _interopRequireDefault(require("./theme.js"));
37
33
 
38
34
  var _dec, _class, _class2, _temp;
39
35
 
40
- var styles = {
41
- componentId: 'yAmvo',
42
- template: function template(theme) {
43
- return "\n\n.yAmvo_dnnz{transition:transform ".concat(theme.iconTransitionDuration || 'inherit', "}\n\n.yAmvo_bPeN{transform:rotateX(180deg)}");
44
- },
45
- 'icon': 'yAmvo_dnnz',
46
- 'iconOpened': 'yAmvo_bPeN'
47
- };
48
- var ExpandButton = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
36
+ var ExpandButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
49
37
  (0, _inherits2.default)(ExpandButton, _Component);
50
38
 
51
39
  var _super = (0, _createSuper2.default)(ExpandButton);
@@ -56,18 +44,27 @@ var ExpandButton = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
56
44
  }
57
45
 
58
46
  (0, _createClass2.default)(ExpandButton, [{
47
+ key: "componentDidMount",
48
+ value: function componentDidMount() {
49
+ this.props.makeStyles();
50
+ }
51
+ }, {
52
+ key: "componentDidUpdate",
53
+ value: function componentDidUpdate() {
54
+ this.props.makeStyles();
55
+ }
56
+ }, {
59
57
  key: "renderIcon",
60
58
  value: function renderIcon() {
61
- var _classNames;
62
-
63
- return /*#__PURE__*/_react.default.createElement(_uiIcons.IconArrowOpenDownLine, {
64
- className: (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, styles.icon, true), (0, _defineProperty2.default)(_classNames, styles.iconOpened, this.props.isExpanded), _classNames))
59
+ return (0, _emotion.jsx)(_uiIcons.IconArrowOpenDownLine, {
60
+ "data-testid": "expand-button",
61
+ css: this.props.styles.icon
65
62
  });
66
63
  }
67
64
  }, {
68
65
  key: "render",
69
66
  value: function render() {
70
- return /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, Object.assign({
67
+ return (0, _emotion.jsx)(_uiButtons.IconButton, Object.assign({
71
68
  size: "medium",
72
69
  withBackground: false,
73
70
  withBorder: false,
@@ -83,7 +80,10 @@ var ExpandButton = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
83
80
  }(_react.Component), _class2.propTypes = {
84
81
  isExpanded: _propTypes.default.bool.isRequired,
85
82
  title: _propTypes.default.string.isRequired,
86
- onClick: _propTypes.default.func.isRequired
83
+ onClick: _propTypes.default.func.isRequired,
84
+ // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
85
+ styles: _propTypes.default.object,
86
+ makeStyles: _propTypes.default.func
87
87
  }, _temp)) || _class);
88
88
  exports.ExpandButton = ExpandButton;
89
89
  var _default = ExpandButton;
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = void 0;
9
+
10
+ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
11
+
12
+ var generateStyle = function generateStyle(componentTheme, props) {
13
+ return {
14
+ icon: (0, _objectSpread2.default)({
15
+ transition: "transform ".concat(componentTheme.iconTransitionDuration)
16
+ }, props.isExpanded && {
17
+ transform: 'rotate3d(1, 0, 0, 180deg)'
18
+ })
19
+ };
20
+ };
21
+
22
+ var _default = generateStyle;
23
+ exports.default = _default;
@@ -3,10 +3,13 @@
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() {
8
+ var generateComponentTheme = function generateComponentTheme() {
9
9
  return {
10
10
  iconTransitionDuration: '0.3s'
11
11
  };
12
- }
12
+ };
13
+
14
+ var _default = generateComponentTheme;
15
+ 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,28 +15,23 @@ 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
 
24
22
  var _uiPagination = require("@instructure/ui-pagination");
25
23
 
26
- var _uiThemeable = require("@instructure/ui-themeable");
24
+ var _emotion = require("@instructure/emotion");
27
25
 
28
26
  var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
29
27
 
28
+ var _styles = _interopRequireDefault(require("./styles.js"));
29
+
30
30
  var _theme = _interopRequireDefault(require("./theme.js"));
31
31
 
32
32
  var _dec, _class, _class2, _temp;
33
33
 
34
- var styles = {
35
- componentId: 'fVnQK',
36
- template: function template(theme) {
37
- return "\n\n.fVnQK_bPMN{padding-top:".concat(theme.paginationPadding || 'inherit', "}");
38
- },
39
- 'pagination': 'fVnQK_bPMN'
40
- };
41
- var Paginator = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
34
+ var Paginator = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
42
35
  (0, _inherits2.default)(Paginator, _Component);
43
36
 
44
37
  var _super = (0, _createSuper2.default)(Paginator);
@@ -55,7 +48,7 @@ var Paginator = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
55
48
 
56
49
  var paginationButtons = Array.from(Array(this.props.totalPages)).map(function (v, i) {
57
50
  var page = i + 1;
58
- return /*#__PURE__*/_react.default.createElement(_uiPagination.Pagination.Page, {
51
+ return (0, _emotion.jsx)(_uiPagination.Pagination.Page, {
59
52
  key: page,
60
53
  current: page === _this.props.currentPage,
61
54
  onClick: _this.props.onPageChange.bind(null, page)
@@ -63,9 +56,9 @@ var Paginator = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
63
56
 
64
57
  }, page);
65
58
  });
66
- return /*#__PURE__*/_react.default.createElement("div", {
67
- className: styles.pagination
68
- }, /*#__PURE__*/_react.default.createElement(_uiPagination.Pagination, {
59
+ return (0, _emotion.jsx)("div", {
60
+ css: this.props.styles.pagination
61
+ }, (0, _emotion.jsx)(_uiPagination.Pagination, {
69
62
  labelNext: (0, _formatMessage.default)('Next page'),
70
63
  labelPrev: (0, _formatMessage.default)('Previous page'),
71
64
  variant: "compact"
@@ -74,7 +67,7 @@ var Paginator = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
74
67
  }, {
75
68
  key: "render",
76
69
  value: function render() {
77
- return /*#__PURE__*/_react.default.createElement("div", null, this.props.children, this.renderPagination());
70
+ return (0, _emotion.jsx)("div", null, this.props.children, this.renderPagination());
78
71
  }
79
72
  }]);
80
73
  Paginator.displayName = "Paginator";
@@ -83,7 +76,8 @@ var Paginator = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
83
76
  children: _propTypes.default.node.isRequired,
84
77
  currentPage: _propTypes.default.number.isRequired,
85
78
  onPageChange: _propTypes.default.func.isRequired,
86
- totalPages: _propTypes.default.number.isRequired
79
+ totalPages: _propTypes.default.number.isRequired,
80
+ styles: _propTypes.default.object
87
81
  }, _temp)) || _class);
88
82
  exports.Paginator = Paginator;
89
83
  var _default = Paginator;
@@ -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
+ pagination: {
11
+ paddingTop: componentTheme.paginationPadding
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
  paginationPadding: spacing.small
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,62 +15,71 @@ 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 _immutable = require("immutable");
23
21
 
24
22
  var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
25
23
 
26
- var _uiThemeable = require("@instructure/ui-themeable");
24
+ var _propTypes = _interopRequireDefault(require("prop-types"));
25
+
26
+ var _emotion = require("@instructure/emotion");
27
+
28
+ var _styles = _interopRequireDefault(require("./styles.js"));
27
29
 
28
30
  var _theme = _interopRequireDefault(require("./theme.js"));
29
31
 
30
32
  var _dec, _class, _class2, _temp;
31
33
 
32
- var styles = {
33
- componentId: 'eFvbO',
34
- template: function template(theme) {
35
- return "\n\n.eFvbO_bEOF{align-items:flex-start;display:flex;flex-direction:column}\n\n.eFvbO_ddvR{color:".concat(theme.errorColor || 'inherit', ";flex:1 1 auto;font-family:").concat(theme.errorFontFamily || 'inherit', ";font-size:").concat(theme.errorFontSize || 'inherit', "}");
36
- },
37
- 'errors': 'eFvbO_bEOF',
38
- 'error': 'eFvbO_ddvR'
39
- };
40
- var Errors = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
34
+ var Errors = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
41
35
  (0, _inherits2.default)(Errors, _Component);
42
36
 
43
37
  var _super = (0, _createSuper2.default)(Errors);
44
38
 
45
39
  function Errors() {
40
+ var _this;
41
+
46
42
  (0, _classCallCheck2.default)(this, Errors);
47
- return _super.apply(this, arguments);
48
- }
49
43
 
50
- (0, _createClass2.default)(Errors, [{
51
- key: "renderError",
52
- value: function renderError(errorText, i) {
44
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
45
+ args[_key] = arguments[_key];
46
+ }
47
+
48
+ _this = _super.call.apply(_super, [this].concat(args));
49
+
50
+ _this.renderError = function (errorText, i) {
53
51
  var key = "error_for_".concat(i);
54
- return /*#__PURE__*/_react.default.createElement("div", {
55
- className: styles.error,
52
+ return (0, _emotion.jsx)("div", {
53
+ css: _this.props.styles.error,
56
54
  key: key,
57
55
  "data-automation": "sdk-core-error"
58
56
  }, errorText);
59
- }
60
- }, {
57
+ };
58
+
59
+ return _this;
60
+ }
61
+
62
+ (0, _createClass2.default)(Errors, [{
61
63
  key: "render",
62
64
  value: function render() {
65
+ var _this$props$errorList;
66
+
63
67
  if (this.props.errorList.size === 0) {
64
68
  return null;
65
69
  }
66
70
 
67
- return /*#__PURE__*/_react.default.createElement("div", {
68
- className: styles.errors
69
- }, this.props.errorList.toArray().map(this.renderError));
71
+ return (0, _emotion.jsx)("div", {
72
+ css: this.props.styles.errors,
73
+ "data-testid": "errors-container"
74
+ }, (_this$props$errorList = this.props.errorList) === null || _this$props$errorList === void 0 ? void 0 : _this$props$errorList.toArray().map(this.renderError));
70
75
  }
71
76
  }]);
72
77
  Errors.displayName = "Errors";
73
78
  return Errors;
74
79
  }(_react.Component), _class2.propTypes = {
75
- errorList: _reactImmutableProptypes.default.list
80
+ errorList: _reactImmutableProptypes.default.list,
81
+ // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
82
+ styles: _propTypes.default.object
76
83
  }, _class2.defaultProps = {
77
84
  errorList: (0, _immutable.List)()
78
85
  }, _temp)) || _class);
@@ -0,0 +1,25 @@
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
+ errors: {
11
+ display: 'flex',
12
+ alignItems: 'flex-start',
13
+ flexDirection: 'column'
14
+ },
15
+ error: {
16
+ fontFamily: componentTheme.errorFontFamily,
17
+ fontSize: componentTheme.errorFontSize,
18
+ color: componentTheme.errorColor,
19
+ flex: '1 1 auto'
20
+ }
21
+ };
22
+ };
23
+
24
+ var _default = generateStyle;
25
+ 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 colors = _ref.colors,
10
10
  typography = _ref.typography;
11
11
  return {
@@ -13,4 +13,7 @@ function generator(_ref) {
13
13
  errorFontSize: typography.fontSizeSmall,
14
14
  errorColor: colors.crimson
15
15
  };
16
- }
16
+ };
17
+
18
+ var _default = generateComponentTheme;
19
+ exports.default = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/quiz-core",
3
- "version": "20.8.1-rc.4+1fb6226c4",
3
+ "version": "20.8.1-rc.5+a1d9fff37",
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.8.1-rc.4+1fb6226c4",
48
- "@instructure/quiz-i18n": "20.8.1-rc.4+1fb6226c4",
49
- "@instructure/quiz-interactions": "20.8.1-rc.4+1fb6226c4",
50
- "@instructure/quiz-number-input": "20.8.1-rc.4+1fb6226c4",
51
- "@instructure/quiz-rce": "20.8.1-rc.4+1fb6226c4",
47
+ "@instructure/quiz-common": "20.8.1-rc.5+a1d9fff37",
48
+ "@instructure/quiz-i18n": "20.8.1-rc.5+a1d9fff37",
49
+ "@instructure/quiz-interactions": "20.8.1-rc.5+a1d9fff37",
50
+ "@instructure/quiz-number-input": "20.8.1-rc.5+a1d9fff37",
51
+ "@instructure/quiz-rce": "20.8.1-rc.5+a1d9fff37",
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.8.1-rc.4+1fb6226c4",
115
+ "instructure-validations": "20.8.1-rc.5+a1d9fff37",
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.8.1-rc.4+1fb6226c4",
166
+ "quiz-presets": "20.8.1-rc.5+a1d9fff37",
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": "1fb6226c41a1883ea6397d66c4bc975294fd79eb"
182
+ "gitHead": "a1d9fff37becf933a5d77d1889bc6cc088a2f3c3"
183
183
  }