@atlaskit/quiz-widget 2.0.1 → 2.0.4

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/quiz-widget
 
+## 2.0.4
+
+### Patch Changes
+
+- [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
+- Updated dependencies
+
+## 2.0.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.0.2
+
+### Patch Changes
+
+- [`d3265f19be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d3265f19be) - Transpile packages using babel rather than tsc
+
 ## 2.0.1
 
 ### Patch Changes

package/build/tsconfig.json

@@ -4,6 +4,13 @@
     "target": "es5",
     "paths": {}
   },
-  "include": ["../src/**/*.ts", "../src/**/*.tsx"],
-  "exclude": ["../src/**/__tests__/*"]
-}
+  "include": [
+    "../src/**/*.ts",
+    "../src/**/*.tsx"
+  ],
+  "exclude": [
+    "../src/**/__tests__/*",
+    "../src/**/*.test.*",
+    "../src/**/test.*"
+  ]
+}

package/dist/cjs/components/QuizWidget/index.js

@@ -1,66 +1,122 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importStar(require("react"));
-var button_1 = tslib_1.__importDefault(require("@atlaskit/button"));
-var check_1 = tslib_1.__importDefault(require("@atlaskit/icon/glyph/check"));
-var chevron_left_large_1 = tslib_1.__importDefault(require("@atlaskit/icon/glyph/chevron-left-large"));
-var chevron_right_large_1 = tslib_1.__importDefault(require("@atlaskit/icon/glyph/chevron-right-large"));
-var cross_1 = tslib_1.__importDefault(require("@atlaskit/icon/glyph/cross"));
-var radio_1 = require("@atlaskit/radio");
-var spinner_1 = tslib_1.__importDefault(require("@atlaskit/spinner"));
-var styled_1 = require("./styled");
-var QuizWidget = function (props) {
-    var _a = tslib_1.__read(react_1.useState(1), 2), currentQuestionNumber = _a[0], setCurrentQuestionNumber = _a[1];
-    var _b = tslib_1.__read(react_1.useState(new Map()), 2), checkedAnswers = _b[0], setCheckedAnswers = _b[1];
-    var onChange = function (e, index) {
-        var value = e.currentTarget.value;
-        !props.score
-            ? setCheckedAnswers(function (prevState) { return new Map(prevState).set(index, value); })
-            : setCheckedAnswers(checkedAnswers);
-    };
-    var handlePrevClick = function () {
-        setCurrentQuestionNumber(currentQuestionNumber - 1);
-    };
-    var handleNextClick = function () {
-        props.onNextButtonClick && props.onNextButtonClick();
-        setCurrentQuestionNumber(currentQuestionNumber + 1);
-    };
-    var onSubmitButtonClick = function () {
-        var chosenQuizAnswers = Array.from(checkedAnswers.values());
-        props.onSubmitButtonClick && props.onSubmitButtonClick(chosenQuizAnswers);
-        setCurrentQuestionNumber(currentQuestionNumber + 1);
-    };
-    var questionsNumber = Object.keys(props.quizContent.questions).length;
-    var isLastSlide = currentQuestionNumber === questionsNumber + 1;
-    var isLastQuestion = currentQuestionNumber === questionsNumber;
-    var isDisabledSubmit = checkedAnswers.size !== questionsNumber;
-    return (react_1.default.createElement(styled_1.Quiz, null,
-        react_1.default.createElement(styled_1.Header, null,
-            react_1.default.createElement(styled_1.QuizName, null, props.quizContent.name)),
-        react_1.default.createElement(styled_1.QuizBlock, null, !isLastSlide ? (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(styled_1.Question, null, props.quizContent.questions[currentQuestionNumber]),
-            props.quizContent.answers[currentQuestionNumber].map(function (answer, index) {
-                var checkedAnswer = checkedAnswers && checkedAnswers.get(currentQuestionNumber);
-                var correctAnswer = props.correctAnswers &&
-                    props.correctAnswers[currentQuestionNumber];
-                return (react_1.default.createElement(styled_1.Answer, { key: index },
-                    react_1.default.createElement(radio_1.Radio, { value: answer, label: answer, name: answer, isChecked: answer === checkedAnswer, onChange: function (e) { return onChange(e, currentQuestionNumber); } }),
-                    props.score && correctAnswer && (react_1.default.createElement("span", null, answer === correctAnswer ? (react_1.default.createElement(check_1.default, { label: "right", primaryColor: "green" })) : (answer === checkedAnswer && (react_1.default.createElement(cross_1.default, { label: "wrong", primaryColor: "red" })))))));
-            }))) : !props.score ? (react_1.default.createElement(spinner_1.default, null)) : (react_1.default.createElement(styled_1.Score, null,
-            react_1.default.createElement("span", null, props.score + " / " + questionsNumber + " Correct"),
-            props.score >= questionsNumber / 2 ? (react_1.default.createElement("span", null, "Great job!")) : (react_1.default.createElement("span", null, "Not bad!"))))),
-        react_1.default.createElement(styled_1.Footer, null,
-            react_1.default.createElement(styled_1.NavQuiz, { style: {
-                    visibility: currentQuestionNumber !== 1 ? 'visible' : 'hidden',
-                }, onClick: handlePrevClick },
-                react_1.default.createElement(chevron_left_large_1.default, { label: "prev", primaryColor: "#5e6c84", size: "large" }),
-                react_1.default.createElement(styled_1.NavAction, null, isLastSlide && props.score ? 'Review' : 'Previous')),
-            isLastQuestion && !props.score ? (react_1.default.createElement(button_1.default, { appearance: "primary", onClick: onSubmitButtonClick, isDisabled: isDisabledSubmit }, "Submit")) : isLastSlide ? (react_1.default.createElement(styled_1.NavQuiz, null,
-                react_1.default.createElement(styled_1.NavAction, null, "Learn More"),
-                react_1.default.createElement(chevron_right_large_1.default, { label: "next", primaryColor: "#5e6c84", size: "large" }))) : (react_1.default.createElement(styled_1.NavQuiz, { onClick: handleNextClick },
-                react_1.default.createElement(styled_1.NavAction, null, "Next"),
-                react_1.default.createElement(chevron_right_large_1.default, { label: "next", primaryColor: "#5e6c84", size: "large" }))))));
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _button = _interopRequireDefault(require("@atlaskit/button"));
+
+var _check = _interopRequireDefault(require("@atlaskit/icon/glyph/check"));
+
+var _chevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-left-large"));
+
+var _chevronRightLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right-large"));
+
+var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
+
+var _radio = require("@atlaskit/radio");
+
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+
+var _styled = require("./styled");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var QuizWidget = function QuizWidget(props) {
+  var _useState = (0, _react.useState)(1),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      currentQuestionNumber = _useState2[0],
+      setCurrentQuestionNumber = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(new Map()),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      checkedAnswers = _useState4[0],
+      setCheckedAnswers = _useState4[1];
+
+  var _onChange = function onChange(e, index) {
+    var value = e.currentTarget.value;
+    !props.score ? setCheckedAnswers(function (prevState) {
+      return new Map(prevState).set(index, value);
+    }) : setCheckedAnswers(checkedAnswers);
+  };
+
+  var handlePrevClick = function handlePrevClick() {
+    setCurrentQuestionNumber(currentQuestionNumber - 1);
+  };
+
+  var handleNextClick = function handleNextClick() {
+    props.onNextButtonClick && props.onNextButtonClick();
+    setCurrentQuestionNumber(currentQuestionNumber + 1);
+  };
+
+  var onSubmitButtonClick = function onSubmitButtonClick() {
+    var chosenQuizAnswers = Array.from(checkedAnswers.values());
+    props.onSubmitButtonClick && props.onSubmitButtonClick(chosenQuizAnswers);
+    setCurrentQuestionNumber(currentQuestionNumber + 1);
+  };
+
+  var questionsNumber = Object.keys(props.quizContent.questions).length;
+  var isLastSlide = currentQuestionNumber === questionsNumber + 1;
+  var isLastQuestion = currentQuestionNumber === questionsNumber;
+  var isDisabledSubmit = checkedAnswers.size !== questionsNumber;
+  return /*#__PURE__*/_react.default.createElement(_styled.Quiz, null, /*#__PURE__*/_react.default.createElement(_styled.Header, null, /*#__PURE__*/_react.default.createElement(_styled.QuizName, null, props.quizContent.name)), /*#__PURE__*/_react.default.createElement(_styled.QuizBlock, null, !isLastSlide ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.Question, null, props.quizContent.questions[currentQuestionNumber]), props.quizContent.answers[currentQuestionNumber].map(function (answer, index) {
+    var checkedAnswer = checkedAnswers && checkedAnswers.get(currentQuestionNumber);
+    var correctAnswer = props.correctAnswers && props.correctAnswers[currentQuestionNumber];
+    return /*#__PURE__*/_react.default.createElement(_styled.Answer, {
+      key: index
+    }, /*#__PURE__*/_react.default.createElement(_radio.Radio, {
+      value: answer,
+      label: answer,
+      name: answer,
+      isChecked: answer === checkedAnswer //error TS7006: Parameter 'e' implicitly has an 'any' type.
+      //@fixme TypeScript 4.2.4 upgrade
+      ,
+      onChange: function onChange(e) {
+        return _onChange(e, currentQuestionNumber);
+      }
+    }), props.score && correctAnswer && /*#__PURE__*/_react.default.createElement("span", null, answer === correctAnswer ? /*#__PURE__*/_react.default.createElement(_check.default, {
+      label: "right",
+      primaryColor: "green"
+    }) : answer === checkedAnswer && /*#__PURE__*/_react.default.createElement(_cross.default, {
+      label: "wrong",
+      primaryColor: "red"
+    })));
+  })) : !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, {
+    style: {
+      visibility: currentQuestionNumber !== 1 ? 'visible' : 'hidden'
+    },
+    onClick: handlePrevClick
+  }, /*#__PURE__*/_react.default.createElement(_chevronLeftLarge.default, {
+    label: "prev",
+    primaryColor: "#5e6c84",
+    size: "large"
+  }), /*#__PURE__*/_react.default.createElement(_styled.NavAction, null, isLastSlide && props.score ? 'Review' : 'Previous')), isLastQuestion && !props.score ? /*#__PURE__*/_react.default.createElement(_button.default, {
+    appearance: "primary",
+    onClick: onSubmitButtonClick,
+    isDisabled: isDisabledSubmit
+  }, "Submit") : isLastSlide ? /*#__PURE__*/_react.default.createElement(_styled.NavQuiz, null, /*#__PURE__*/_react.default.createElement(_styled.NavAction, null, "Learn More"), /*#__PURE__*/_react.default.createElement(_chevronRightLarge.default, {
+    label: "next",
+    primaryColor: "#5e6c84",
+    size: "large"
+  })) : /*#__PURE__*/_react.default.createElement(_styled.NavQuiz, {
+    onClick: handleNextClick
+  }, /*#__PURE__*/_react.default.createElement(_styled.NavAction, null, "Next"), /*#__PURE__*/_react.default.createElement(_chevronRightLarge.default, {
+    label: "next",
+    primaryColor: "#5e6c84",
+    size: "large"
+  }))));
 };
-exports.default = QuizWidget;
-//# sourceMappingURL=index.js.map
+
+var _default = QuizWidget;
+exports.default = _default;

package/dist/cjs/components/QuizWidget/styled.js

@@ -1,17 +1,54 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Answer = exports.Score = exports.NavAction = exports.NavQuiz = exports.Question = exports.Footer = exports.QuizBlock = exports.Header = exports.QuizName = exports.Quiz = void 0;
-var tslib_1 = require("tslib");
-var styled_1 = tslib_1.__importDefault(require("@emotion/styled"));
-exports.Quiz = styled_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  font-size: 16px;\n  width: 100%;\n  padding: 20px 30px 20px 0;\n  border: 1px solid grey;\n  border-radius: 28px;\n  min-width: 300px;\n  max-width: 380px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  font-size: 16px;\n  width: 100%;\n  padding: 20px 30px 20px 0;\n  border: 1px solid grey;\n  border-radius: 28px;\n  min-width: 300px;\n  max-width: 380px;\n"])));
-exports.QuizName = styled_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  margin: 3px 0;\n  font-size: 24px;\n  font-weight: 500;\n  padding-left: 20px;\n"], ["\n  margin: 3px 0;\n  font-size: 24px;\n  font-weight: 500;\n  padding-left: 20px;\n"])));
-exports.Header = styled_1.default.div(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  align-items: start;\n  flex-direction: column;\n"], ["\n  display: flex;\n  align-items: start;\n  flex-direction: column;\n"])));
-exports.QuizBlock = styled_1.default.ul(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n  padding-left: 15px;\n  margin-bottom: 15px;\n  margin-top: 0;\n  min-height: 105px;\n"], ["\n  padding-left: 15px;\n  margin-bottom: 15px;\n  margin-top: 0;\n  min-height: 105px;\n"])));
-exports.Footer = styled_1.default.div(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n  padding-left: 8px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  max-height: 32px;\n"], ["\n  padding-left: 8px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  max-height: 32px;\n"])));
-exports.Question = styled_1.default.div(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n  padding-left: 6px;\n  margin-bottom: 10px;\n  font-size: 14px;\n  color: #707070;\n  text-align: left;\n"], ["\n  padding-left: 6px;\n  margin-bottom: 10px;\n  font-size: 14px;\n  color: #707070;\n  text-align: left;\n"])));
-exports.NavQuiz = styled_1.default.div(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  padding: 0 0 0 3px;\n  :hover {\n    color: grey;\n  }\n"], ["\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  padding: 0 0 0 3px;\n  :hover {\n    color: grey;\n  }\n"])));
-exports.NavAction = styled_1.default.span(templateObject_8 || (templateObject_8 = tslib_1.__makeTemplateObject(["\n  font-size: 14px;\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n"], ["\n  font-size: 14px;\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n"])));
-exports.Score = styled_1.default.div(templateObject_9 || (templateObject_9 = tslib_1.__makeTemplateObject(["\n  margin-top: 10px;\n  padding-left: 6px;\n  display: flex;\n  flex-direction: column;\n  text-align: start;\n  font-weight: 400;\n  gap: 5px;\n"], ["\n  margin-top: 10px;\n  padding-left: 6px;\n  display: flex;\n  flex-direction: column;\n  text-align: start;\n  font-weight: 400;\n  gap: 5px;\n"])));
-exports.Answer = styled_1.default.div(templateObject_10 || (templateObject_10 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  align-items: flex-end;\n  max-height: 25px;\n"], ["\n  display: flex;\n  align-items: flex-end;\n  max-height: 25px;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
-//# sourceMappingURL=styled.js.map
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Score = exports.QuizName = exports.QuizBlock = exports.Quiz = exports.Question = exports.NavQuiz = exports.NavAction = exports.Header = exports.Footer = exports.Answer = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+
+var Quiz = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  font-size: 16px;\n  width: 100%;\n  padding: 20px 30px 20px 0;\n  border: 1px solid grey;\n  border-radius: 28px;\n  min-width: 300px;\n  max-width: 380px;\n"])));
+
+exports.Quiz = Quiz;
+
+var QuizName = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 3px 0;\n  font-size: 24px;\n  font-weight: 500;\n  padding-left: 20px;\n"])));
+
+exports.QuizName = QuizName;
+
+var Header = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: start;\n  flex-direction: column;\n"])));
+
+exports.Header = Header;
+
+var QuizBlock = _styled.default.ul(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  padding-left: 15px;\n  margin-bottom: 15px;\n  margin-top: 0;\n  min-height: 105px;\n"])));
+
+exports.QuizBlock = QuizBlock;
+
+var Footer = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding-left: 8px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  max-height: 32px;\n"])));
+
+exports.Footer = Footer;
+
+var Question = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  padding-left: 6px;\n  margin-bottom: 10px;\n  font-size: 14px;\n  color: #707070;\n  text-align: left;\n"])));
+
+exports.Question = Question;
+
+var NavQuiz = _styled.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  padding: 0 0 0 3px;\n  :hover {\n    color: grey;\n  }\n"])));
+
+exports.NavQuiz = NavQuiz;
+
+var NavAction = _styled.default.span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 14px;\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n"])));
+
+exports.NavAction = NavAction;
+
+var Score = _styled.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 10px;\n  padding-left: 6px;\n  display: flex;\n  flex-direction: column;\n  text-align: start;\n  font-weight: 400;\n  gap: 5px;\n"])));
+
+exports.Score = Score;
+
+var Answer = _styled.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: flex-end;\n  max-height: 25px;\n"])));
+
+exports.Answer = Answer;

package/dist/cjs/components/QuizWidget/types.js

@@ -1,3 +1,5 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=types.js.map
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/index.js

@@ -1,5 +1,15 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var QuizWidget_1 = require("./components/QuizWidget");
-Object.defineProperty(exports, "QuizWidget", { enumerable: true, get: function () { return QuizWidget_1.default; } });
-//# sourceMappingURL=index.js.map
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "QuizWidget", {
+  enumerable: true,
+  get: function get() {
+    return _QuizWidget.default;
+  }
+});
+
+var _QuizWidget = _interopRequireDefault(require("./components/QuizWidget"));

package/dist/cjs/styled.js

@@ -1,8 +1,18 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.QuizWrapper = void 0;
-var tslib_1 = require("tslib");
-var styled_1 = tslib_1.__importDefault(require("@emotion/styled"));
-exports.QuizWrapper = styled_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  margin: 20px;\n"], ["\n  display: flex;\n  justify-content: center;\n  margin: 20px;\n"])));
-var templateObject_1;
-//# sourceMappingURL=styled.js.map
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _templateObject;
+
+var QuizWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  margin: 20px;\n"])));
+
+exports.QuizWrapper = QuizWrapper;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/quiz-widget",
-	"version": "2.0.1",
+	"version": "2.0.4",
 	"sideEffects": false
 }

package/dist/es2019/components/QuizWidget/index.js

@@ -6,58 +6,80 @@ import ChevronRightLargeIcon from '@atlaskit/icon/glyph/chevron-right-large';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
 import { Radio } from '@atlaskit/radio';
 import Spinner from '@atlaskit/spinner';
-import { Answer, Footer, Header, NavQuiz, Question, Quiz, QuizBlock, QuizName, Score, NavAction, } from './styled';
-const QuizWidget = (props) => {
-    const [currentQuestionNumber, setCurrentQuestionNumber] = useState(1);
-    const [checkedAnswers, setCheckedAnswers] = useState(new Map());
-    const onChange = (e, index) => {
-        const value = e.currentTarget.value;
-        !props.score
-            ? setCheckedAnswers(prevState => new Map(prevState).set(index, value))
-            : setCheckedAnswers(checkedAnswers);
-    };
-    const handlePrevClick = () => {
-        setCurrentQuestionNumber(currentQuestionNumber - 1);
-    };
-    const handleNextClick = () => {
-        props.onNextButtonClick && props.onNextButtonClick();
-        setCurrentQuestionNumber(currentQuestionNumber + 1);
-    };
-    const onSubmitButtonClick = () => {
-        const chosenQuizAnswers = Array.from(checkedAnswers.values());
-        props.onSubmitButtonClick && props.onSubmitButtonClick(chosenQuizAnswers);
-        setCurrentQuestionNumber(currentQuestionNumber + 1);
-    };
-    const questionsNumber = Object.keys(props.quizContent.questions).length;
-    const isLastSlide = currentQuestionNumber === questionsNumber + 1;
-    const isLastQuestion = currentQuestionNumber === questionsNumber;
-    const isDisabledSubmit = checkedAnswers.size !== questionsNumber;
-    return (React.createElement(Quiz, null,
-        React.createElement(Header, null,
-            React.createElement(QuizName, null, props.quizContent.name)),
-        React.createElement(QuizBlock, null, !isLastSlide ? (React.createElement(React.Fragment, null,
-            React.createElement(Question, null, props.quizContent.questions[currentQuestionNumber]),
-            props.quizContent.answers[currentQuestionNumber].map((answer, index) => {
-                const checkedAnswer = checkedAnswers && checkedAnswers.get(currentQuestionNumber);
-                const correctAnswer = props.correctAnswers &&
-                    props.correctAnswers[currentQuestionNumber];
-                return (React.createElement(Answer, { key: index },
-                    React.createElement(Radio, { value: answer, label: answer, name: answer, isChecked: answer === checkedAnswer, onChange: e => onChange(e, currentQuestionNumber) }),
-                    props.score && correctAnswer && (React.createElement("span", null, answer === correctAnswer ? (React.createElement(CheckIcon, { label: "right", primaryColor: "green" })) : (answer === checkedAnswer && (React.createElement(CrossIcon, { label: "wrong", primaryColor: "red" })))))));
-            }))) : !props.score ? (React.createElement(Spinner, null)) : (React.createElement(Score, null,
-            React.createElement("span", null, `${props.score} / ${questionsNumber} Correct`),
-            props.score >= questionsNumber / 2 ? (React.createElement("span", null, "Great job!")) : (React.createElement("span", null, "Not bad!"))))),
-        React.createElement(Footer, null,
-            React.createElement(NavQuiz, { style: {
-                    visibility: currentQuestionNumber !== 1 ? 'visible' : 'hidden',
-                }, onClick: handlePrevClick },
-                React.createElement(ChevronLeftLargeIcon, { label: "prev", primaryColor: "#5e6c84", size: "large" }),
-                React.createElement(NavAction, null, isLastSlide && props.score ? 'Review' : 'Previous')),
-            isLastQuestion && !props.score ? (React.createElement(Button, { appearance: "primary", onClick: onSubmitButtonClick, isDisabled: isDisabledSubmit }, "Submit")) : isLastSlide ? (React.createElement(NavQuiz, null,
-                React.createElement(NavAction, null, "Learn More"),
-                React.createElement(ChevronRightLargeIcon, { label: "next", primaryColor: "#5e6c84", size: "large" }))) : (React.createElement(NavQuiz, { onClick: handleNextClick },
-                React.createElement(NavAction, null, "Next"),
-                React.createElement(ChevronRightLargeIcon, { label: "next", primaryColor: "#5e6c84", size: "large" }))))));
+import { Answer, Footer, Header, NavQuiz, Question, Quiz, QuizBlock, QuizName, Score, NavAction } from './styled';
+
+const QuizWidget = props => {
+  const [currentQuestionNumber, setCurrentQuestionNumber] = useState(1);
+  const [checkedAnswers, setCheckedAnswers] = useState(new Map());
+
+  const onChange = (e, index) => {
+    const value = e.currentTarget.value;
+    !props.score ? setCheckedAnswers(prevState => new Map(prevState).set(index, value)) : setCheckedAnswers(checkedAnswers);
+  };
+
+  const handlePrevClick = () => {
+    setCurrentQuestionNumber(currentQuestionNumber - 1);
+  };
+
+  const handleNextClick = () => {
+    props.onNextButtonClick && props.onNextButtonClick();
+    setCurrentQuestionNumber(currentQuestionNumber + 1);
+  };
+
+  const onSubmitButtonClick = () => {
+    const chosenQuizAnswers = Array.from(checkedAnswers.values());
+    props.onSubmitButtonClick && props.onSubmitButtonClick(chosenQuizAnswers);
+    setCurrentQuestionNumber(currentQuestionNumber + 1);
+  };
+
+  const questionsNumber = Object.keys(props.quizContent.questions).length;
+  const isLastSlide = currentQuestionNumber === questionsNumber + 1;
+  const isLastQuestion = currentQuestionNumber === questionsNumber;
+  const isDisabledSubmit = checkedAnswers.size !== questionsNumber;
+  return /*#__PURE__*/React.createElement(Quiz, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(QuizName, null, props.quizContent.name)), /*#__PURE__*/React.createElement(QuizBlock, null, !isLastSlide ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Question, null, props.quizContent.questions[currentQuestionNumber]), props.quizContent.answers[currentQuestionNumber].map((answer, index) => {
+    const checkedAnswer = checkedAnswers && checkedAnswers.get(currentQuestionNumber);
+    const correctAnswer = props.correctAnswers && props.correctAnswers[currentQuestionNumber];
+    return /*#__PURE__*/React.createElement(Answer, {
+      key: index
+    }, /*#__PURE__*/React.createElement(Radio, {
+      value: answer,
+      label: answer,
+      name: answer,
+      isChecked: answer === checkedAnswer //error TS7006: Parameter 'e' implicitly has an 'any' type.
+      //@fixme TypeScript 4.2.4 upgrade
+      ,
+      onChange: e => onChange(e, currentQuestionNumber)
+    }), props.score && correctAnswer && /*#__PURE__*/React.createElement("span", null, answer === correctAnswer ? /*#__PURE__*/React.createElement(CheckIcon, {
+      label: "right",
+      primaryColor: "green"
+    }) : answer === checkedAnswer && /*#__PURE__*/React.createElement(CrossIcon, {
+      label: "wrong",
+      primaryColor: "red"
+    })));
+  })) : !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, {
+    style: {
+      visibility: currentQuestionNumber !== 1 ? 'visible' : 'hidden'
+    },
+    onClick: handlePrevClick
+  }, /*#__PURE__*/React.createElement(ChevronLeftLargeIcon, {
+    label: "prev",
+    primaryColor: "#5e6c84",
+    size: "large"
+  }), /*#__PURE__*/React.createElement(NavAction, null, isLastSlide && props.score ? 'Review' : 'Previous')), isLastQuestion && !props.score ? /*#__PURE__*/React.createElement(Button, {
+    appearance: "primary",
+    onClick: onSubmitButtonClick,
+    isDisabled: isDisabledSubmit
+  }, "Submit") : isLastSlide ? /*#__PURE__*/React.createElement(NavQuiz, null, /*#__PURE__*/React.createElement(NavAction, null, "Learn More"), /*#__PURE__*/React.createElement(ChevronRightLargeIcon, {
+    label: "next",
+    primaryColor: "#5e6c84",
+    size: "large"
+  })) : /*#__PURE__*/React.createElement(NavQuiz, {
+    onClick: handleNextClick
+  }, /*#__PURE__*/React.createElement(NavAction, null, "Next"), /*#__PURE__*/React.createElement(ChevronRightLargeIcon, {
+    label: "next",
+    primaryColor: "#5e6c84",
+    size: "large"
+  }))));
 };
-export default QuizWidget;
-//# sourceMappingURL=index.js.map
+
+export default QuizWidget;

package/dist/es2019/components/QuizWidget/styled.js

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-export const Quiz = styled.div `
+export const Quiz = styled.div`
   display: flex;
   flex-direction: column;
   font-size: 16px;
@@ -10,38 +10,38 @@ export const Quiz = styled.div `
   min-width: 300px;
   max-width: 380px;
 `;
-export const QuizName = styled.div `
+export const QuizName = styled.div`
   margin: 3px 0;
   font-size: 24px;
   font-weight: 500;
   padding-left: 20px;
 `;
-export const Header = styled.div `
+export const Header = styled.div`
   display: flex;
   align-items: start;
   flex-direction: column;
 `;
-export const QuizBlock = styled.ul `
+export const QuizBlock = styled.ul`
   padding-left: 15px;
   margin-bottom: 15px;
   margin-top: 0;
   min-height: 105px;
 `;
-export const Footer = styled.div `
+export const Footer = styled.div`
   padding-left: 8px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   max-height: 32px;
 `;
-export const Question = styled.div `
+export const Question = styled.div`
   padding-left: 6px;
   margin-bottom: 10px;
   font-size: 14px;
   color: #707070;
   text-align: left;
 `;
-export const NavQuiz = styled.div `
+export const NavQuiz = styled.div`
   display: flex;
   align-content: center;
   justify-content: center;
@@ -50,13 +50,13 @@ export const NavQuiz = styled.div `
     color: grey;
   }
 `;
-export const NavAction = styled.span `
+export const NavAction = styled.span`
   font-size: 14px;
   font-weight: 500;
   display: flex;
   align-items: center;
 `;
-export const Score = styled.div `
+export const Score = styled.div`
   margin-top: 10px;
   padding-left: 6px;
   display: flex;
@@ -65,9 +65,8 @@ export const Score = styled.div `
   font-weight: 400;
   gap: 5px;
 `;
-export const Answer = styled.div `
+export const Answer = styled.div`
   display: flex;
   align-items: flex-end;
   max-height: 25px;
-`;
-//# sourceMappingURL=styled.js.map
+`;

package/dist/es2019/components/QuizWidget/types.js

@@ -1 +1 @@
-//# sourceMappingURL=types.js.map
+export {};

package/dist/es2019/index.js

@@ -1,2 +1 @@
-export { default as QuizWidget } from './components/QuizWidget';
-//# sourceMappingURL=index.js.map
+export { default as QuizWidget } from './components/QuizWidget';

package/dist/es2019/styled.js

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
-export const QuizWrapper = styled.div `
+export const QuizWrapper = styled.div`
   display: flex;
   justify-content: center;
   margin: 20px;
-`;
-//# sourceMappingURL=styled.js.map
+`;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/quiz-widget",
-	"version": "2.0.1",
+	"version": "2.0.4",
 	"sideEffects": false
 }