@micromag/screen-quiz 0.3.619 → 0.3.624

package/es/index.js

@@ -269,8 +269,9 @@ var Answers = function Answers(_ref) {
     var hasAnswer = isTextFilled(label);
     var isUserAnswer = withoutGoodAnswer && userAnswer;
     var isOtherAnswer = withoutGoodAnswer && !userAnswer;
-    var inactiveButtonStyle = isOtherAnswer ? inactiveButtonsStyle : null;
-    var inactiveButtonTextStyle = isOtherAnswer ? inactiveButtonsTextStyle : null;
+    var isInactive = isOtherAnswer && answeredIndex !== null;
+    var inactiveButtonStyle = isInactive ? inactiveButtonsStyle : null;
+    var inactiveButtonTextStyle = isInactive ? inactiveButtonsTextStyle : null;
     return /*#__PURE__*/React.createElement(animated.div, {
       key: "answer-".concat(answerI),
       className: classNames([styles$4.item, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$4.rightAnswer, !withoutGoodAnswer && rightAnswer === true), styles$4.userAnswer, isUserAnswer), styles$4.otherAnswer, isOtherAnswer), styles$4.withoutOpacity, !hasOpacity)]),
@@ -349,6 +350,7 @@ var propTypes$4 = {
   buttonsTextStyle: PropTypes.textStyle,
   inactiveButtonsTextStyle: PropTypes.textStyle,
   questionsHeadingStyle: PropTypes.textStyle,
+  feedbackTextStyle: PropTypes.textStyle,
   goodAnswerColor: PropTypes.color,
   badAnswerColor: PropTypes.color,
   focusable: PropTypes$1.bool,
@@ -381,6 +383,7 @@ var defaultProps$4 = {
   buttonsTextStyle: null,
   inactiveButtonsTextStyle: null,
   questionsHeadingStyle: null,
+  feedbackTextStyle: null,
   goodAnswerColor: null,
   badAnswerColor: null,
   focusable: false,
@@ -413,6 +416,7 @@ var Question = function Question(_ref) {
     buttonsTextStyle = _ref.buttonsTextStyle,
     inactiveButtonsTextStyle = _ref.inactiveButtonsTextStyle,
     questionsHeadingStyle = _ref.questionsHeadingStyle,
+    feedbackTextStyle = _ref.feedbackTextStyle,
     goodAnswerColor = _ref.goodAnswerColor,
     badAnswerColor = _ref.badAnswerColor,
     focusable = _ref.focusable,
@@ -454,6 +458,10 @@ var Question = function Question(_ref) {
   var hasResultVisual = isImageFilled(answerImage) || isImageFilled(resultImage);
   var defaultResult = isTextFilled(result) ? result : null;
   var customResult = isTextFilled(customAnswerLabel) ? customAnswerLabel : null;
+  var finalResult = customResult || defaultResult;
+  var _ref4 = finalResult || {},
+    _ref4$textStyle = _ref4.textStyle,
+    resultTextStyle = _ref4$textStyle === undefined ? null : _ref4$textStyle;
   var onAnswersCollapse = useCallback(function () {
     setResultVisible(true);
   }, [setResultVisible]);
@@ -536,8 +544,9 @@ var Question = function Question(_ref) {
     playing: transitionPlaying,
     delay: (1 + answers.length) * transitionStagger,
     disabled: transitionDisabled
-  }, hasResult ? /*#__PURE__*/React.createElement(Text, Object.assign({}, customResult || defaultResult, {
-    className: styles$3.resultText
+  }, hasResult ? /*#__PURE__*/React.createElement(Text, Object.assign({}, finalResult || {}, {
+    className: styles$3.resultText,
+    textStyle: _objectSpread(_objectSpread({}, feedbackTextStyle || null), resultTextStyle || null)
   })) : null, hasResultVisual ? /*#__PURE__*/React.createElement(Visual, {
     media: answerImage || resultImage,
     width: "100%",
@@ -563,6 +572,7 @@ var propTypes$3 = {
   inactiveButtonsStyle: PropTypes.boxStyle,
   buttonsTextStyle: PropTypes.textStyle,
   inactiveButtonsTextStyle: PropTypes.textStyle,
+  feedbackTextStyle: PropTypes.textStyle,
   goodAnswerColor: PropTypes.color,
   badAnswerColor: PropTypes.color,
   withoutTrueFalse: PropTypes$1.bool,
@@ -589,6 +599,7 @@ var defaultProps$3 = {
   inactiveButtonsStyle: null,
   buttonsTextStyle: null,
   inactiveButtonsTextStyle: null,
+  feedbackTextStyle: null,
   goodAnswerColor: null,
   badAnswerColor: null,
   withoutTrueFalse: false,
@@ -615,6 +626,7 @@ var QuizScreen = function QuizScreen(_ref) {
     inactiveButtonsStyle = _ref.inactiveButtonsStyle,
     buttonsTextStyle = _ref.buttonsTextStyle,
     inactiveButtonsTextStyle = _ref.inactiveButtonsTextStyle,
+    feedbackTextStyle = _ref.feedbackTextStyle,
     goodAnswerColor = _ref.goodAnswerColor,
     badAnswerColor = _ref.badAnswerColor,
     withoutTrueFalse = _ref.withoutTrueFalse,
@@ -796,6 +808,7 @@ var QuizScreen = function QuizScreen(_ref) {
     buttonsTextStyle: buttonsTextStyle,
     inactiveButtonsStyle: inactiveButtonsStyle,
     inactiveButtonsTextStyle: inactiveButtonsTextStyle,
+    feedbackTextStyle: feedbackTextStyle,
     goodAnswerColor: goodAnswerColor,
     badAnswerColor: badAnswerColor,
     withoutTrueFalse: withoutTrueFalse,
@@ -1673,6 +1686,16 @@ var definition = [{
           "value": "Inactive buttons"
         }]
       })
+    }, {
+      name: 'feedbackTextStyle',
+      type: 'text-style-form',
+      label: defineMessage({
+        id: "4w7K2K",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Feedback text"
+        }]
+      })
     }, {
       name: 'goodAnswerColor',
       type: 'color',
@@ -2003,6 +2026,26 @@ var definition = [{
           "value": "Buttons text"
         }]
       })
+    }, {
+      name: 'inactiveButtonsTextStyle',
+      type: 'text-style-form',
+      label: defineMessage({
+        id: "my7Kox",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Inactive buttons text"
+        }]
+      })
+    }, {
+      name: 'inactiveButtonsStyle',
+      type: 'box-style-form',
+      label: defineMessage({
+        id: "xlFOg3",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Inactive buttons"
+        }]
+      })
     }, {
       name: 'questionsHeadingStyle',
       type: 'text-style-form',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-quiz",
-    "version": "0.3.619",
+    "version": "0.3.624",
     "private": false,
     "description": "",
     "keywords": [
@@ -89,5 +89,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "21a901b0f800114994f30dfe692c664d378e12f7"
+    "gitHead": "dae93d8ee83abe0aa8f51a31a94e32f7b5ad9104"
 }