@atlaskit/quiz-widget 2.1.13 → 2.2.0

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 (5) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/components/QuizWidget/index.js +49 -21
  3. package/dist/es2019/components/QuizWidget/index.js +45 -17
  4. package/dist/esm/components/QuizWidget/index.js +45 -17
  5. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/quiz-widget
2
2
 
3
+ ## 2.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#144303](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/144303)
8
+ [`de9cfac4c3629`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/de9cfac4c3629) -
9
+ [ux] Enable new icons behind a feature flag.
10
+
3
11
  ## 2.1.13
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/components/QuizWidget/index.js CHANGED
@@ -9,15 +9,23 @@ exports.default = void 0;
9
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
  var _button = _interopRequireDefault(require("@atlaskit/button"));
12
- var _check = _interopRequireDefault(require("@atlaskit/icon/glyph/check"));
13
- var _chevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-left-large"));
14
- var _chevronRightLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right-large"));
15
- var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
12
+ var _checkMarkCheck = _interopRequireDefault(require("@atlaskit/icon/core/migration/check-mark--check"));
13
+ var _chevronLeftChevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-left--chevron-left-large"));
14
+ var _chevronRightChevronRightLarge = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-right--chevron-right-large"));
15
+ var _closeCross = _interopRequireDefault(require("@atlaskit/icon/core/migration/close--cross"));
16
16
  var _radio = require("@atlaskit/radio");
17
17
  var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
18
18
  var _styled = require("./styled");
19
+ var _primitives = require("@atlaskit/primitives");
19
20
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
20
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
21
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
22
+ var boxWrapperStyles = (0, _primitives.xcss)({
23
+ width: '32px',
24
+ height: '32px',
25
+ // NOTE: custom color is used here
26
+ // @ts-ignore
27
+ color: '#5e6c84'
28
+ });
21
29
  var QuizWidget = function QuizWidget(props) {
22
30
  var _useState = (0, _react.useState)(1),
23
31
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -65,36 +73,56 @@ var QuizWidget = function QuizWidget(props) {
65
73
  onChange: function onChange(e) {
66
74
  return _onChange(e, currentQuestionNumber);
67
75
  }
68
- }), props.score && correctAnswer && /*#__PURE__*/_react.default.createElement("span", null, answer === correctAnswer ? /*#__PURE__*/_react.default.createElement(_check.default, {
76
+ }), props.score && correctAnswer && /*#__PURE__*/_react.default.createElement("span", null, answer === correctAnswer ? /*#__PURE__*/_react.default.createElement(_checkMarkCheck.default, {
77
+ spacing: "spacious",
69
78
  label: "right",
70
- primaryColor: "green"
71
- }) : answer === checkedAnswer && /*#__PURE__*/_react.default.createElement(_cross.default, {
79
+ color: "var(--ds-icon-success, #22A06B)"
80
+ }) : answer === checkedAnswer && /*#__PURE__*/_react.default.createElement(_closeCross.default, {
81
+ spacing: "spacious",
72
82
  label: "wrong",
73
- primaryColor: "red"
83
+ color: "var(--ds-icon-danger, #C9372C)"
74
84
  })));
75
85
  })) : !props.score ? /*#__PURE__*/_react.default.createElement(_spinner.default, null) : /*#__PURE__*/_react.default.createElement(_styled.Score, null, /*#__PURE__*/_react.default.createElement("span", null, "".concat(props.score, " / ").concat(questionsNumber, " Correct")), props.score >= questionsNumber / 2 ? /*#__PURE__*/_react.default.createElement("span", null, "Great job!") : /*#__PURE__*/_react.default.createElement("span", null, "Not bad!"))), /*#__PURE__*/_react.default.createElement(_styled.Footer, null, /*#__PURE__*/_react.default.createElement(_styled.NavQuiz, {
76
86
  style: {
77
87
  visibility: currentQuestionNumber !== 1 ? 'visible' : 'hidden'
78
88
  },
79
89
  onClick: handlePrevClick
80
- }, /*#__PURE__*/_react.default.createElement(_chevronLeftLarge.default, {
90
+ }, /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
91
+ alignItems: "center"
92
+ }, /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
93
+ xcss: boxWrapperStyles,
94
+ alignItems: "center",
95
+ justifyContent: "center"
96
+ }, /*#__PURE__*/_react.default.createElement(_chevronLeftChevronLeftLarge.default, {
81
97
  label: "prev",
82
- primaryColor: "#5e6c84",
83
- size: "large"
84
- }), /*#__PURE__*/_react.default.createElement(_styled.NavAction, null, isLastSlide && props.score ? 'Review' : 'Previous')), isLastQuestion && !props.score ? /*#__PURE__*/_react.default.createElement(_button.default, {
98
+ color: "currentColor",
99
+ LEGACY_size: "large"
100
+ })), /*#__PURE__*/_react.default.createElement(_styled.NavAction, null, isLastSlide && props.score ? 'Review' : 'Previous'))), isLastQuestion && !props.score ? /*#__PURE__*/_react.default.createElement(_button.default, {
85
101
  appearance: "primary",
86
102
  onClick: onSubmitButtonClick,
87
103
  isDisabled: isDisabledSubmit
88
- }, "Submit") : isLastSlide ? /*#__PURE__*/_react.default.createElement(_styled.NavQuiz, null, /*#__PURE__*/_react.default.createElement(_styled.NavAction, null, "Learn More"), /*#__PURE__*/_react.default.createElement(_chevronRightLarge.default, {
104
+ }, "Submit") : isLastSlide ? /*#__PURE__*/_react.default.createElement(_styled.NavQuiz, null, /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
105
+ alignItems: "center"
106
+ }, /*#__PURE__*/_react.default.createElement(_styled.NavAction, null, "Learn More"), /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
107
+ xcss: boxWrapperStyles,
108
+ alignItems: "center",
109
+ justifyContent: "center"
110
+ }, /*#__PURE__*/_react.default.createElement(_chevronRightChevronRightLarge.default, {
89
111
  label: "next",
90
- primaryColor: "#5e6c84",
91
- size: "large"
92
- })) : /*#__PURE__*/_react.default.createElement(_styled.NavQuiz, {
112
+ color: "currentColor",
113
+ LEGACY_size: "large"
114
+ })))) : /*#__PURE__*/_react.default.createElement(_styled.NavQuiz, {
93
115
  onClick: handleNextClick
94
- }, /*#__PURE__*/_react.default.createElement(_styled.NavAction, null, "Next"), /*#__PURE__*/_react.default.createElement(_chevronRightLarge.default, {
116
+ }, /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
117
+ alignItems: "center"
118
+ }, /*#__PURE__*/_react.default.createElement(_styled.NavAction, null, "Next"), /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
119
+ xcss: boxWrapperStyles,
120
+ alignItems: "center",
121
+ justifyContent: "center"
122
+ }, /*#__PURE__*/_react.default.createElement(_chevronRightChevronRightLarge.default, {
95
123
  label: "next",
96
- primaryColor: "#5e6c84",
97
- size: "large"
98
- }))));
124
+ color: "currentColor",
125
+ LEGACY_size: "large"
126
+ }))))));
99
127
  };
100
128
  var _default = exports.default = QuizWidget;
package/dist/es2019/components/QuizWidget/index.js CHANGED
@@ -1,12 +1,20 @@
1
1
  import React, { useState } from 'react';
2
2
  import Button from '@atlaskit/button';
3
- import CheckIcon from '@atlaskit/icon/glyph/check';
4
- import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
5
- import ChevronRightLargeIcon from '@atlaskit/icon/glyph/chevron-right-large';
6
- import CrossIcon from '@atlaskit/icon/glyph/cross';
3
+ import CheckIcon from '@atlaskit/icon/core/migration/check-mark--check';
4
+ import ChevronLeftLargeIcon from '@atlaskit/icon/utility/migration/chevron-left--chevron-left-large';
5
+ import ChevronRightLargeIcon from '@atlaskit/icon/utility/migration/chevron-right--chevron-right-large';
6
+ import CrossIcon from '@atlaskit/icon/core/migration/close--cross';
7
7
  import { Radio } from '@atlaskit/radio';
8
8
  import Spinner from '@atlaskit/spinner';
9
9
  import { Answer, Footer, Header, NavQuiz, Question, Quiz, QuizBlock, QuizName, Score, NavAction } from './styled';
10
+ import { Flex, xcss } from '@atlaskit/primitives';
11
+ const boxWrapperStyles = xcss({
12
+ width: '32px',
13
+ height: '32px',
14
+ // NOTE: custom color is used here
15
+ // @ts-ignore
16
+ color: '#5e6c84'
17
+ });
10
18
  const QuizWidget = props => {
11
19
  const [currentQuestionNumber, setCurrentQuestionNumber] = useState(1);
12
20
  const [checkedAnswers, setCheckedAnswers] = useState(new Map());
@@ -45,35 +53,55 @@ const QuizWidget = props => {
45
53
  ,
46
54
  onChange: e => onChange(e, currentQuestionNumber)
47
55
  }), props.score && correctAnswer && /*#__PURE__*/React.createElement("span", null, answer === correctAnswer ? /*#__PURE__*/React.createElement(CheckIcon, {
56
+ spacing: "spacious",
48
57
  label: "right",
49
- primaryColor: "green"
58
+ color: "var(--ds-icon-success, #22A06B)"
50
59
  }) : answer === checkedAnswer && /*#__PURE__*/React.createElement(CrossIcon, {
60
+ spacing: "spacious",
51
61
  label: "wrong",
52
- primaryColor: "red"
62
+ color: "var(--ds-icon-danger, #C9372C)"
53
63
  })));
54
64
  })) : !props.score ? /*#__PURE__*/React.createElement(Spinner, null) : /*#__PURE__*/React.createElement(Score, null, /*#__PURE__*/React.createElement("span", null, `${props.score} / ${questionsNumber} Correct`), props.score >= questionsNumber / 2 ? /*#__PURE__*/React.createElement("span", null, "Great job!") : /*#__PURE__*/React.createElement("span", null, "Not bad!"))), /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(NavQuiz, {
55
65
  style: {
56
66
  visibility: currentQuestionNumber !== 1 ? 'visible' : 'hidden'
57
67
  },
58
68
  onClick: handlePrevClick
69
+ }, /*#__PURE__*/React.createElement(Flex, {
70
+ alignItems: "center"
71
+ }, /*#__PURE__*/React.createElement(Flex, {
72
+ xcss: boxWrapperStyles,
73
+ alignItems: "center",
74
+ justifyContent: "center"
59
75
  }, /*#__PURE__*/React.createElement(ChevronLeftLargeIcon, {
60
76
  label: "prev",
61
- primaryColor: "#5e6c84",
62
- size: "large"
63
- }), /*#__PURE__*/React.createElement(NavAction, null, isLastSlide && props.score ? 'Review' : 'Previous')), isLastQuestion && !props.score ? /*#__PURE__*/React.createElement(Button, {
77
+ color: "currentColor",
78
+ LEGACY_size: "large"
79
+ })), /*#__PURE__*/React.createElement(NavAction, null, isLastSlide && props.score ? 'Review' : 'Previous'))), isLastQuestion && !props.score ? /*#__PURE__*/React.createElement(Button, {
64
80
  appearance: "primary",
65
81
  onClick: onSubmitButtonClick,
66
82
  isDisabled: isDisabledSubmit
67
- }, "Submit") : isLastSlide ? /*#__PURE__*/React.createElement(NavQuiz, null, /*#__PURE__*/React.createElement(NavAction, null, "Learn More"), /*#__PURE__*/React.createElement(ChevronRightLargeIcon, {
83
+ }, "Submit") : isLastSlide ? /*#__PURE__*/React.createElement(NavQuiz, null, /*#__PURE__*/React.createElement(Flex, {
84
+ alignItems: "center"
85
+ }, /*#__PURE__*/React.createElement(NavAction, null, "Learn More"), /*#__PURE__*/React.createElement(Flex, {
86
+ xcss: boxWrapperStyles,
87
+ alignItems: "center",
88
+ justifyContent: "center"
89
+ }, /*#__PURE__*/React.createElement(ChevronRightLargeIcon, {
68
90
  label: "next",
69
- primaryColor: "#5e6c84",
70
- size: "large"
71
- })) : /*#__PURE__*/React.createElement(NavQuiz, {
91
+ color: "currentColor",
92
+ LEGACY_size: "large"
93
+ })))) : /*#__PURE__*/React.createElement(NavQuiz, {
72
94
  onClick: handleNextClick
73
- }, /*#__PURE__*/React.createElement(NavAction, null, "Next"), /*#__PURE__*/React.createElement(ChevronRightLargeIcon, {
95
+ }, /*#__PURE__*/React.createElement(Flex, {
96
+ alignItems: "center"
97
+ }, /*#__PURE__*/React.createElement(NavAction, null, "Next"), /*#__PURE__*/React.createElement(Flex, {
98
+ xcss: boxWrapperStyles,
99
+ alignItems: "center",
100
+ justifyContent: "center"
101
+ }, /*#__PURE__*/React.createElement(ChevronRightLargeIcon, {
74
102
  label: "next",
75
- primaryColor: "#5e6c84",
76
- size: "large"
77
- }))));
103
+ color: "currentColor",
104
+ LEGACY_size: "large"
105
+ }))))));
78
106
  };
79
107
  export default QuizWidget;
package/dist/esm/components/QuizWidget/index.js CHANGED
@@ -1,13 +1,21 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
2
  import React, { useState } from 'react';
3
3
  import Button from '@atlaskit/button';
4
- import CheckIcon from '@atlaskit/icon/glyph/check';
5
- import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
6
- import ChevronRightLargeIcon from '@atlaskit/icon/glyph/chevron-right-large';
7
- import CrossIcon from '@atlaskit/icon/glyph/cross';
4
+ import CheckIcon from '@atlaskit/icon/core/migration/check-mark--check';
5
+ import ChevronLeftLargeIcon from '@atlaskit/icon/utility/migration/chevron-left--chevron-left-large';
6
+ import ChevronRightLargeIcon from '@atlaskit/icon/utility/migration/chevron-right--chevron-right-large';
7
+ import CrossIcon from '@atlaskit/icon/core/migration/close--cross';
8
8
  import { Radio } from '@atlaskit/radio';
9
9
  import Spinner from '@atlaskit/spinner';
10
10
  import { Answer, Footer, Header, NavQuiz, Question, Quiz, QuizBlock, QuizName, Score, NavAction } from './styled';
11
+ import { Flex, xcss } from '@atlaskit/primitives';
12
+ var boxWrapperStyles = xcss({
13
+ width: '32px',
14
+ height: '32px',
15
+ // NOTE: custom color is used here
16
+ // @ts-ignore
17
+ color: '#5e6c84'
18
+ });
11
19
  var QuizWidget = function QuizWidget(props) {
12
20
  var _useState = useState(1),
13
21
  _useState2 = _slicedToArray(_useState, 2),
@@ -56,35 +64,55 @@ var QuizWidget = function QuizWidget(props) {
56
64
  return _onChange(e, currentQuestionNumber);
57
65
  }
58
66
  }), props.score && correctAnswer && /*#__PURE__*/React.createElement("span", null, answer === correctAnswer ? /*#__PURE__*/React.createElement(CheckIcon, {
67
+ spacing: "spacious",
59
68
  label: "right",
60
- primaryColor: "green"
69
+ color: "var(--ds-icon-success, #22A06B)"
61
70
  }) : answer === checkedAnswer && /*#__PURE__*/React.createElement(CrossIcon, {
71
+ spacing: "spacious",
62
72
  label: "wrong",
63
- primaryColor: "red"
73
+ color: "var(--ds-icon-danger, #C9372C)"
64
74
  })));
65
75
  })) : !props.score ? /*#__PURE__*/React.createElement(Spinner, null) : /*#__PURE__*/React.createElement(Score, null, /*#__PURE__*/React.createElement("span", null, "".concat(props.score, " / ").concat(questionsNumber, " Correct")), props.score >= questionsNumber / 2 ? /*#__PURE__*/React.createElement("span", null, "Great job!") : /*#__PURE__*/React.createElement("span", null, "Not bad!"))), /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(NavQuiz, {
66
76
  style: {
67
77
  visibility: currentQuestionNumber !== 1 ? 'visible' : 'hidden'
68
78
  },
69
79
  onClick: handlePrevClick
80
+ }, /*#__PURE__*/React.createElement(Flex, {
81
+ alignItems: "center"
82
+ }, /*#__PURE__*/React.createElement(Flex, {
83
+ xcss: boxWrapperStyles,
84
+ alignItems: "center",
85
+ justifyContent: "center"
70
86
  }, /*#__PURE__*/React.createElement(ChevronLeftLargeIcon, {
71
87
  label: "prev",
72
- primaryColor: "#5e6c84",
73
- size: "large"
74
- }), /*#__PURE__*/React.createElement(NavAction, null, isLastSlide && props.score ? 'Review' : 'Previous')), isLastQuestion && !props.score ? /*#__PURE__*/React.createElement(Button, {
88
+ color: "currentColor",
89
+ LEGACY_size: "large"
90
+ })), /*#__PURE__*/React.createElement(NavAction, null, isLastSlide && props.score ? 'Review' : 'Previous'))), isLastQuestion && !props.score ? /*#__PURE__*/React.createElement(Button, {
75
91
  appearance: "primary",
76
92
  onClick: onSubmitButtonClick,
77
93
  isDisabled: isDisabledSubmit
78
- }, "Submit") : isLastSlide ? /*#__PURE__*/React.createElement(NavQuiz, null, /*#__PURE__*/React.createElement(NavAction, null, "Learn More"), /*#__PURE__*/React.createElement(ChevronRightLargeIcon, {
94
+ }, "Submit") : isLastSlide ? /*#__PURE__*/React.createElement(NavQuiz, null, /*#__PURE__*/React.createElement(Flex, {
95
+ alignItems: "center"
96
+ }, /*#__PURE__*/React.createElement(NavAction, null, "Learn More"), /*#__PURE__*/React.createElement(Flex, {
97
+ xcss: boxWrapperStyles,
98
+ alignItems: "center",
99
+ justifyContent: "center"
100
+ }, /*#__PURE__*/React.createElement(ChevronRightLargeIcon, {
79
101
  label: "next",
80
- primaryColor: "#5e6c84",
81
- size: "large"
82
- })) : /*#__PURE__*/React.createElement(NavQuiz, {
102
+ color: "currentColor",
103
+ LEGACY_size: "large"
104
+ })))) : /*#__PURE__*/React.createElement(NavQuiz, {
83
105
  onClick: handleNextClick
84
- }, /*#__PURE__*/React.createElement(NavAction, null, "Next"), /*#__PURE__*/React.createElement(ChevronRightLargeIcon, {
106
+ }, /*#__PURE__*/React.createElement(Flex, {
107
+ alignItems: "center"
108
+ }, /*#__PURE__*/React.createElement(NavAction, null, "Next"), /*#__PURE__*/React.createElement(Flex, {
109
+ xcss: boxWrapperStyles,
110
+ alignItems: "center",
111
+ justifyContent: "center"
112
+ }, /*#__PURE__*/React.createElement(ChevronRightLargeIcon, {
85
113
  label: "next",
86
- primaryColor: "#5e6c84",
87
- size: "large"
88
- }))));
114
+ color: "currentColor",
115
+ LEGACY_size: "large"
116
+ }))))));
89
117
  };
90
118
  export default QuizWidget;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/quiz-widget",
3
- "version": "2.1.13",
3
+ "version": "2.2.0",
4
4
  "description": "A React component that gives a possibility to pass quizzes",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -12,7 +12,6 @@
12
12
  },
13
13
  "atlassian": {
14
14
  "team": "Jira Training App",
15
- "releaseModel": "continuous",
16
15
  "website": {
17
16
  "name": "QuizWidget"
18
17
  }
@@ -33,11 +32,12 @@
33
32
  "sideEffects": false,
34
33
  "atlaskit:src": "src/index.ts",
35
34
  "dependencies": {
36
- "@atlaskit/button": "^20.0.0",
37
- "@atlaskit/icon": "^22.13.0",
35
+ "@atlaskit/button": "^20.1.0",
36
+ "@atlaskit/icon": "^22.18.0",
37
+ "@atlaskit/primitives": "^12.2.0",
38
38
  "@atlaskit/radio": "^6.5.0",
39
39
  "@atlaskit/spinner": "^16.3.0",
40
- "@atlaskit/tokens": "^1.58.0",
40
+ "@atlaskit/tokens": "^1.61.0",
41
41
  "@babel/runtime": "^7.0.0",
42
42
  "@emotion/styled": "^11.0.0"
43
43
  },