@micromag/screen-quiz 0.3.606 → 0.3.608

package/assets/css/styles.css

@@ -1,4 +1,4 @@
-.micromag-screen-quiz-answers-emptyAnswer{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-quiz-answers-button:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-screen-quiz-answers-container,.micromag-screen-quiz-answers-items{position:relative}.micromag-screen-quiz-answers-emptyAnswer{font-size:.75em;height:40px;margin:0 auto;width:100%}.micromag-screen-quiz-answers-item{margin:0;padding:0;position:relative;-webkit-transition:opacity .6s ease-out;transition:opacity .6s ease-out}.micromag-screen-quiz-answers-isPlaceholder .micromag-screen-quiz-answers-item{padding:1px 0}.micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-userAnswer{opacity:1!important}.micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-otherAnswer{opacity:.6!important}.micromag-screen-quiz-answers-button{color:#fff;padding:10px;position:relative;width:100%}.micromag-screen-quiz-answers-button:disabled{opacity:1;pointer-events:none}.micromag-screen-quiz-answers-withIcon .micromag-screen-quiz-answers-button{padding-left:42px;padding-right:42px}.micromag-screen-quiz-answers-resultIcon{display:-ms-flexbox;display:flex;left:5px;position:absolute;top:50%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;background-color:#ff2945;border:2px solid #1c1c1c;border-radius:50%;height:32px;justify-content:center;margin-top:-16px;opacity:0;padding:5px;-webkit-transition:opacity .15s ease;transition:opacity .15s ease;width:32px}.micromag-screen-quiz-answers-answered .micromag-screen-quiz-answers-resultIcon{opacity:1}.micromag-screen-quiz-answers-rightAnswer .micromag-screen-quiz-answers-resultIcon{background-color:#0ed88f}.micromag-screen-quiz-answers-resultIcon .micromag-screen-quiz-answers-faIcon{display:block}.micromag-screen-quiz-answers-itemContent{padding:5px 0}
+.micromag-screen-quiz-answers-emptyAnswer{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-quiz-answers-button:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-screen-quiz-answers-container,.micromag-screen-quiz-answers-items{position:relative}.micromag-screen-quiz-answers-emptyAnswer{font-size:.75em;height:40px;margin:0 auto;width:100%}.micromag-screen-quiz-answers-item{margin:0;padding:0;position:relative;-webkit-transition:opacity .6s ease-out;transition:opacity .6s ease-out}.micromag-screen-quiz-answers-isPlaceholder .micromag-screen-quiz-answers-item{padding:1px 0}.micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-userAnswer{opacity:1!important}.micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-otherAnswer{opacity:.6!important}.micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-withoutOpacity{opacity:1!important}.micromag-screen-quiz-answers-button{color:#fff;padding:10px;position:relative;width:100%}.micromag-screen-quiz-answers-button:disabled{opacity:1;pointer-events:none}.micromag-screen-quiz-answers-withIcon .micromag-screen-quiz-answers-button{padding-left:42px;padding-right:42px}.micromag-screen-quiz-answers-resultIcon{display:-ms-flexbox;display:flex;left:5px;position:absolute;top:50%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;background-color:#ff2945;border:2px solid #1c1c1c;border-radius:50%;height:32px;justify-content:center;margin-top:-16px;opacity:0;padding:5px;-webkit-transition:opacity .15s ease;transition:opacity .15s ease;width:32px}.micromag-screen-quiz-answers-answered .micromag-screen-quiz-answers-resultIcon{opacity:1}.micromag-screen-quiz-answers-rightAnswer .micromag-screen-quiz-answers-resultIcon{background-color:#0ed88f}.micromag-screen-quiz-answers-resultIcon .micromag-screen-quiz-answers-faIcon{display:block}.micromag-screen-quiz-answers-itemContent{padding:5px 0}
 .micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyQuestion,.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyResult{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-question{margin-bottom:10px}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-index{display:block;margin-bottom:1em;text-align:center;width:100%}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-result{opacity:0;pointer-events:none;position:absolute;-webkit-transition:opacity .5s ease;transition:opacity .5s ease;-webkit-transition-delay:.3s;transition-delay:.3s}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-resultContent{padding:20px 0}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyQuestion,.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyResult{margin:0 auto;width:100%}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyQuestion{height:60px;margin-bottom:10px}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyResult{height:100px}.micromag-screen-quiz-question-container.micromag-screen-quiz-question-resultVisible .micromag-screen-quiz-question-result{opacity:1;pointer-events:all;position:relative}.micromag-screen-quiz-question-container.micromag-screen-quiz-question-isPlaceholder{padding:10px}.micromag-screen-quiz-question-container.micromag-screen-quiz-question-isPlaceholder .micromag-screen-quiz-question-index{color:hsla(0,0%,100%,.6);font-size:8px;mix-blend-mode:difference}
 .micromag-screen-quiz-container .micromag-screen-quiz-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-quiz-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-quiz-disabled.micromag-screen-quiz-container{overflow:hidden;pointer-events:none}.micromag-screen-quiz-hidden.micromag-screen-quiz-container{display:none;visibility:hidden}.micromag-screen-quiz-placeholder.micromag-screen-quiz-container .micromag-screen-quiz-content{padding:6px;position:relative}.micromag-screen-quiz-container .micromag-screen-quiz-background{z-index:0}.micromag-screen-quiz-container .micromag-screen-quiz-content{z-index:2}.micromag-screen-quiz-container.micromag-screen-quiz-disabled{pointer-events:none}.micromag-screen-quiz-reset{border:0;padding:10px;position:absolute;right:0;top:0;-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transition:opacity .15s ease-out,-webkit-transform .15s ease-out;transition:opacity .15s ease-out,-webkit-transform .15s ease-out;transition:opacity .15s ease-out,transform .15s ease-out;transition:opacity .15s ease-out,transform .15s ease-out,-webkit-transform .15s ease-out;z-index:1000}.micromag-screen-quiz-reset:hover{border:0;opacity:.8}.micromag-screen-quiz-reset:hover:active{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.micromag-screen-quiz-points{color:#fff;left:0;padding:10px;position:absolute;top:0;z-index:1000}.micromag-screen-quiz-layout{bottom:0;left:0;position:absolute;right:0;top:0}.micromag-screen-quiz-header{left:0;position:absolute;top:0;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-quiz-header.micromag-screen-quiz-disabled{opacity:0;pointer-events:none}.micromag-screen-quiz-footer{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-quiz-footer a{padding:0}.micromag-screen-quiz-footer.micromag-screen-quiz-disabled{opacity:0;pointer-events:none}.micromag-screen-quiz-transition{bottom:0;left:0;position:absolute;right:0;top:0}.micromag-screen-quiz-intro,.micromag-screen-quiz-question,.micromag-screen-quiz-results{overflow:hidden}.micromag-screen-quiz-intro.micromag-screen-quiz-enter,.micromag-screen-quiz-question.micromag-screen-quiz-enter,.micromag-screen-quiz-results.micromag-screen-quiz-enter{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-enter,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-enter,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-enter{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}.micromag-screen-quiz-intro.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-enterActive,.micromag-screen-quiz-question.micromag-screen-quiz-enterActive,.micromag-screen-quiz-results.micromag-screen-quiz-enterActive{left:0;min-height:100%;position:absolute;top:0;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;transition:transform 1s ease;transition:transform 1s ease,-webkit-transform 1s ease;width:100%}.micromag-screen-quiz-intro.micromag-screen-quiz-exit,.micromag-screen-quiz-question.micromag-screen-quiz-exit,.micromag-screen-quiz-results.micromag-screen-quiz-exit{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.micromag-screen-quiz-intro.micromag-screen-quiz-exitActive,.micromag-screen-quiz-question.micromag-screen-quiz-exitActive,.micromag-screen-quiz-results.micromag-screen-quiz-exitActive{left:0;min-height:100%;position:absolute;top:0;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;transition:transform 1s ease;transition:transform 1s ease,-webkit-transform 1s ease;width:100%}.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-exitActive,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-exitActive,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-exitActive{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.micromag-screen-quiz-background.micromag-screen-quiz-enter{opacity:0}.micromag-screen-quiz-background.micromag-screen-quiz-enterActive{opacity:1;-webkit-transition:opacity 1s ease;transition:opacity 1s ease;z-index:1}.micromag-screen-quiz-background.micromag-screen-quiz-exit{opacity:1}.micromag-screen-quiz-background.micromag-screen-quiz-exitActive{opacity:0;-webkit-transition:opacity 1s ease;transition:opacity 1s ease;z-index:0}
 .micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyDescription,.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-title{margin-bottom:10px}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyDescription,.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyTitle{margin:0 auto;width:100%}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyTitle{height:60px}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyDescription{height:100px}.micromag-screen-quiz-results-container.micromag-screen-quiz-results-isPlaceholder{padding:10px}

package/es/index.js

@@ -29,14 +29,16 @@ import { animated, useTransition, easings } from '@react-spring/web';
 import Button from '@micromag/element-button';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 
-var styles$4 = {"emptyAnswer":"micromag-screen-quiz-answers-emptyAnswer","button":"micromag-screen-quiz-answers-button","container":"micromag-screen-quiz-answers-container","items":"micromag-screen-quiz-answers-items","item":"micromag-screen-quiz-answers-item","isPlaceholder":"micromag-screen-quiz-answers-isPlaceholder","userAnswer":"micromag-screen-quiz-answers-userAnswer","otherAnswer":"micromag-screen-quiz-answers-otherAnswer","withIcon":"micromag-screen-quiz-answers-withIcon","resultIcon":"micromag-screen-quiz-answers-resultIcon","answered":"micromag-screen-quiz-answers-answered","rightAnswer":"micromag-screen-quiz-answers-rightAnswer","faIcon":"micromag-screen-quiz-answers-faIcon","itemContent":"micromag-screen-quiz-answers-itemContent"};
+var styles$4 = {"emptyAnswer":"micromag-screen-quiz-answers-emptyAnswer","button":"micromag-screen-quiz-answers-button","container":"micromag-screen-quiz-answers-container","items":"micromag-screen-quiz-answers-items","item":"micromag-screen-quiz-answers-item","isPlaceholder":"micromag-screen-quiz-answers-isPlaceholder","userAnswer":"micromag-screen-quiz-answers-userAnswer","otherAnswer":"micromag-screen-quiz-answers-otherAnswer","withoutOpacity":"micromag-screen-quiz-answers-withoutOpacity","withIcon":"micromag-screen-quiz-answers-withIcon","resultIcon":"micromag-screen-quiz-answers-resultIcon","answered":"micromag-screen-quiz-answers-answered","rightAnswer":"micromag-screen-quiz-answers-rightAnswer","faIcon":"micromag-screen-quiz-answers-faIcon","itemContent":"micromag-screen-quiz-answers-itemContent"};
 
 var propTypes$5 = {
   items: PropTypes.quizAnswers.isRequired,
   answeredIndex: PropTypes$1.number,
   answersCollapseDelay: PropTypes$1.number,
   buttonsStyle: PropTypes.boxStyle,
+  inactiveButtonsStyle: PropTypes.boxStyle,
   buttonsTextStyle: PropTypes.textStyle,
+  inactiveButtonsTextStyle: PropTypes.textStyle,
   goodAnswerColor: PropTypes.color,
   badAnswerColor: PropTypes.color,
   showUserAnswer: PropTypes$1.bool,
@@ -55,7 +57,9 @@ var defaultProps$5 = {
   answeredIndex: null,
   answersCollapseDelay: 1000,
   buttonsStyle: null,
+  inactiveButtonsStyle: null,
   buttonsTextStyle: null,
+  inactiveButtonsTextStyle: null,
   goodAnswerColor: null,
   badAnswerColor: null,
   showUserAnswer: false,
@@ -75,7 +79,9 @@ var Answers = function Answers(_ref) {
     answeredIndex = _ref.answeredIndex,
     answersCollapseDelay = _ref.answersCollapseDelay,
     buttonsStyle = _ref.buttonsStyle,
+    inactiveButtonsStyle = _ref.inactiveButtonsStyle,
     buttonsTextStyle = _ref.buttonsTextStyle,
+    inactiveButtonsTextStyle = _ref.inactiveButtonsTextStyle,
     goodAnswerColor = _ref.goodAnswerColor,
     badAnswerColor = _ref.badAnswerColor,
     showUserAnswer = _ref.showUserAnswer,
@@ -97,14 +103,14 @@ var Answers = function Answers(_ref) {
   var answered = answeredIndex !== null;
   var _ref2 = answeredIndex !== null ? items[answeredIndex] : {},
     _ref2$good = _ref2.good,
-    hasAnsweredRight = _ref2$good === void 0 ? false : _ref2$good;
+    hasAnsweredRight = _ref2$good === undefined ? false : _ref2$good;
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 1),
     visible = _useState2[0];
   var hasRightAnswer = items !== null && !isPlaceholder ? items.reduce(function (hasGood, answer) {
     var _ref3 = answer || {},
       _ref3$good = _ref3.good,
-      good = _ref3$good === void 0 ? false : _ref3$good;
+      good = _ref3$good === undefined ? false : _ref3$good;
     return hasGood || good;
   }, false) : false;
   var finalShowUserAnswer = showUserAnswer || !hasRightAnswer;
@@ -173,7 +179,7 @@ var Answers = function Answers(_ref) {
         if (itemsRefs.current[i] && collapseAnimated) {
           var _ref4 = itemsRefs.current[i].getBoundingClientRect() || {},
             _ref4$height = _ref4.height,
-            height = _ref4$height === void 0 ? 0 : _ref4$height;
+            height = _ref4$height === undefined ? 0 : _ref4$height;
           acc.push(height);
         }
         return acc;
@@ -188,7 +194,7 @@ var Answers = function Answers(_ref) {
     var userAnswer = answerI === answeredIndex;
     var _ref5 = answer || {},
       _ref5$good = _ref5.good,
-      rightAnswer = _ref5$good === void 0 ? false : _ref5$good;
+      rightAnswer = _ref5$good === undefined ? false : _ref5$good;
     var hidden = false;
     if (answeredIndex !== null && showAnimation && answersDidCollapse && !rightAnswer && (hasRightAnswer || !userAnswer)) {
       hidden = true;
@@ -206,16 +212,16 @@ var Answers = function Answers(_ref) {
   var transitions = useTransition(filteredListOfItems, {
     key: function key(_ref6) {
       var _ref6$index = _ref6.index,
-        index = _ref6$index === void 0 ? 0 : _ref6$index,
+        index = _ref6$index === undefined ? 0 : _ref6$index,
         _ref6$label = _ref6.label,
-        label = _ref6$label === void 0 ? null : _ref6$label;
-      return "key-".concat(index, "-").concat((label === null || label === void 0 ? void 0 : label.body) || null);
+        label = _ref6$label === undefined ? null : _ref6$label;
+      return "key-".concat(index, "-").concat((label === null || label === undefined ? undefined : label.body) || null);
     },
     update: function update(_ref7) {
       var _ref7$hidden = _ref7.hidden,
-        hidden = _ref7$hidden === void 0 ? false : _ref7$hidden,
+        hidden = _ref7$hidden === undefined ? false : _ref7$hidden,
         _ref7$maxHeight = _ref7.maxHeight,
-        maxHeight = _ref7$maxHeight === void 0 ? 0 : _ref7$maxHeight;
+        maxHeight = _ref7$maxHeight === undefined ? 0 : _ref7$maxHeight;
       return {
         opacity: hidden && showAnimation && !withoutGoodAnswer ? 0 : 1,
         // Animate this, not height
@@ -236,28 +242,38 @@ var Answers = function Answers(_ref) {
       onTransitionEnd();
     }
   }, [transitioned, onTransitionEnd]);
+  var hasOpacity = useMemo(function () {
+    var _ref8 = inactiveButtonsStyle || {},
+      _ref8$backgroundColor = _ref8.backgroundColor,
+      backgroundColor = _ref8$backgroundColor === undefined ? null : _ref8$backgroundColor;
+    return backgroundColor === null;
+  }, [inactiveButtonsStyle]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$4.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$4.answered, answered), styles$4.withIcon, !withoutIcon), styles$4.isPlaceholder, isPlaceholder), className, className !== null)])
   }, filteredListOfItems !== null || isPlaceholder ? /*#__PURE__*/React.createElement("div", {
     className: styles$4.items
   }, transitions(function (style, answer, t, answerI) {
     var userAnswer = answerI === answeredIndex;
-    var _ref9 = answer || {},
-      _ref9$good = _ref9.good,
-      rightAnswer = _ref9$good === void 0 ? null : _ref9$good,
-      _ref9$label = _ref9.label,
-      label = _ref9$label === void 0 ? null : _ref9$label,
-      _ref9$buttonStyle = _ref9.buttonStyle,
-      answerButtonStyle = _ref9$buttonStyle === void 0 ? null : _ref9$buttonStyle,
-      _ref9$textStyle = _ref9.textStyle,
-      answerButtonTextStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle;
-    var _ref10 = label || {},
+    var _ref10 = answer || {},
+      _ref10$good = _ref10.good,
+      rightAnswer = _ref10$good === undefined ? null : _ref10$good,
+      _ref10$label = _ref10.label,
+      label = _ref10$label === undefined ? null : _ref10$label,
+      _ref10$buttonStyle = _ref10.buttonStyle,
+      answerButtonStyle = _ref10$buttonStyle === undefined ? null : _ref10$buttonStyle,
       _ref10$textStyle = _ref10.textStyle,
-      textStyle = _ref10$textStyle === void 0 ? null : _ref10$textStyle;
+      answerButtonTextStyle = _ref10$textStyle === undefined ? null : _ref10$textStyle;
+    var _ref11 = label || {},
+      _ref11$textStyle = _ref11.textStyle,
+      textStyle = _ref11$textStyle === undefined ? null : _ref11$textStyle;
     var hasAnswer = isTextFilled(label);
+    var isUserAnswer = withoutGoodAnswer && userAnswer;
+    var isOtherAnswer = withoutGoodAnswer && !userAnswer;
+    var inactiveButtonStyle = isOtherAnswer ? inactiveButtonsStyle : null;
+    var inactiveButtonTextStyle = isOtherAnswer ? inactiveButtonsTextStyle : null;
     return /*#__PURE__*/React.createElement(animated.div, {
       key: "answer-".concat(answerI),
-      className: classNames([styles$4.item, _defineProperty(_defineProperty(_defineProperty({}, styles$4.rightAnswer, !withoutGoodAnswer && rightAnswer === true), styles$4.userAnswer, withoutGoodAnswer && userAnswer), styles$4.otherAnswer, withoutGoodAnswer && !userAnswer)]),
+      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)]),
       onTransitionEnd: onAnswerTransitionEnd,
       style: _objectSpread({}, style)
     }, /*#__PURE__*/React.createElement("div", {
@@ -292,8 +308,8 @@ var Answers = function Answers(_ref) {
       },
       disabled: !visible || isPreview || answered,
       focusable: focusable,
-      buttonStyle: _objectSpread(_objectSpread({}, buttonsStyle), answerButtonStyle),
-      textStyle: _objectSpread(_objectSpread({}, buttonsTextStyle), answerButtonTextStyle)
+      buttonStyle: _objectSpread(_objectSpread(_objectSpread({}, buttonsStyle), inactiveButtonStyle), answerButtonStyle),
+      textStyle: _objectSpread(_objectSpread(_objectSpread({}, buttonsTextStyle), inactiveButtonTextStyle), answerButtonTextStyle)
     }, answered && !withoutIcon && rightAnswer === true ? /*#__PURE__*/React.createElement("span", {
       className: styles$4.resultIcon,
       style: getStyleFromColor(goodAnswerColor, 'backgroundColor')
@@ -329,7 +345,9 @@ var propTypes$4 = {
   totalCount: PropTypes$1.number,
   answeredIndex: PropTypes$1.number,
   buttonsStyle: PropTypes.boxStyle,
+  inactiveButtonsStyle: PropTypes.boxStyle,
   buttonsTextStyle: PropTypes.textStyle,
+  inactiveButtonsTextStyle: PropTypes.textStyle,
   questionsHeadingStyle: PropTypes.textStyle,
   goodAnswerColor: PropTypes.color,
   badAnswerColor: PropTypes.color,
@@ -359,7 +377,9 @@ var defaultProps$4 = {
   totalCount: null,
   answeredIndex: null,
   buttonsStyle: null,
+  inactiveButtonsStyle: null,
   buttonsTextStyle: null,
+  inactiveButtonsTextStyle: null,
   questionsHeadingStyle: null,
   goodAnswerColor: null,
   badAnswerColor: null,
@@ -389,7 +409,9 @@ var Question = function Question(_ref) {
     totalCount = _ref.totalCount,
     answeredIndex = _ref.answeredIndex,
     buttonsStyle = _ref.buttonsStyle,
+    inactiveButtonsStyle = _ref.inactiveButtonsStyle,
     buttonsTextStyle = _ref.buttonsTextStyle,
+    inactiveButtonsTextStyle = _ref.inactiveButtonsTextStyle,
     questionsHeadingStyle = _ref.questionsHeadingStyle,
     goodAnswerColor = _ref.goodAnswerColor,
     badAnswerColor = _ref.badAnswerColor,
@@ -416,7 +438,7 @@ var Question = function Question(_ref) {
   var hasQuestion = isTextFilled(question);
   var _ref2 = question || {},
     _ref2$textStyle = _ref2.textStyle,
-    questionTextStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
+    questionTextStyle = _ref2$textStyle === undefined ? null : _ref2$textStyle;
   var _useState = useState(showInstantAnswer),
     _useState2 = _slicedToArray(_useState, 2),
     resultVisible = _useState2[0],
@@ -425,9 +447,9 @@ var Question = function Question(_ref) {
   var answer = answeredIndex !== null && answers[answeredIndex] ? answers[answeredIndex] : null;
   var _ref3 = answer || {},
     _ref3$customAnswerLab = _ref3.customAnswerLabel,
-    customAnswerLabel = _ref3$customAnswerLab === void 0 ? null : _ref3$customAnswerLab,
+    customAnswerLabel = _ref3$customAnswerLab === undefined ? null : _ref3$customAnswerLab,
     _ref3$answerImage = _ref3.answerImage,
-    answerImage = _ref3$answerImage === void 0 ? null : _ref3$answerImage;
+    answerImage = _ref3$answerImage === undefined ? null : _ref3$answerImage;
   var hasResult = isTextFilled(customAnswerLabel) || isTextFilled(result);
   var hasResultVisual = isImageFilled(answerImage) || isImageFilled(resultImage);
   var defaultResult = isTextFilled(result) ? result : null;
@@ -482,7 +504,9 @@ var Question = function Question(_ref) {
     withoutIcon: withoutTrueFalse,
     showUserAnswer: withoutTrueFalse,
     buttonsStyle: buttonsStyle,
+    inactiveButtonsStyle: inactiveButtonsStyle,
     buttonsTextStyle: buttonsTextStyle,
+    inactiveButtonsTextStyle: inactiveButtonsTextStyle,
     focusable: focusable,
     animated: animated,
     transitions: transitions,
@@ -536,7 +560,9 @@ var propTypes$3 = {
   }),
   resultImage: PropTypes.visualElement,
   buttonsStyle: PropTypes.boxStyle,
+  inactiveButtonsStyle: PropTypes.boxStyle,
   buttonsTextStyle: PropTypes.textStyle,
+  inactiveButtonsTextStyle: PropTypes.textStyle,
   goodAnswerColor: PropTypes.color,
   badAnswerColor: PropTypes.color,
   withoutTrueFalse: PropTypes$1.bool,
@@ -560,7 +586,9 @@ var defaultProps$3 = {
   result: null,
   resultImage: null,
   buttonsStyle: null,
+  inactiveButtonsStyle: null,
   buttonsTextStyle: null,
+  inactiveButtonsTextStyle: null,
   goodAnswerColor: null,
   badAnswerColor: null,
   withoutTrueFalse: false,
@@ -584,7 +612,9 @@ var QuizScreen = function QuizScreen(_ref) {
     result = _ref.result,
     resultImage = _ref.resultImage,
     buttonsStyle = _ref.buttonsStyle,
+    inactiveButtonsStyle = _ref.inactiveButtonsStyle,
     buttonsTextStyle = _ref.buttonsTextStyle,
+    inactiveButtonsTextStyle = _ref.inactiveButtonsTextStyle,
     goodAnswerColor = _ref.goodAnswerColor,
     badAnswerColor = _ref.badAnswerColor,
     withoutTrueFalse = _ref.withoutTrueFalse,
@@ -637,11 +667,11 @@ var QuizScreen = function QuizScreen(_ref) {
   var _useDimensionObserver = useDimensionObserver(),
     headerRef = _useDimensionObserver.ref,
     _useDimensionObserver2 = _useDimensionObserver.height,
-    headerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
+    headerHeight = _useDimensionObserver2 === undefined ? 0 : _useDimensionObserver2;
   var _useDimensionObserver3 = useDimensionObserver(),
     footerRef = _useDimensionObserver3.ref,
     _useDimensionObserver4 = _useDimensionObserver3.height,
-    footerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
+    footerHeight = _useDimensionObserver4 === undefined ? 0 : _useDimensionObserver4;
   var showInstantAnswer = isStatic || isCapture;
   var goodAnswerIndex = answers !== null ? answers.findIndex(function (answer) {
     return answer !== null && answer.good;
@@ -677,12 +707,12 @@ var QuizScreen = function QuizScreen(_ref) {
     if (userAnswerIndex !== null) {
       var _ref2 = userAnswerIndex !== null && answers ? answers[userAnswerIndex] : {},
         _ref2$good = _ref2.good,
-        isGood = _ref2$good === void 0 ? false : _ref2$good,
+        isGood = _ref2$good === undefined ? false : _ref2$good,
         _ref2$label = _ref2.label,
-        label = _ref2$label === void 0 ? {} : _ref2$label;
+        label = _ref2$label === undefined ? {} : _ref2$label;
       var _ref3 = label || {},
         _ref3$body = _ref3.body,
-        body = _ref3$body === void 0 ? '' : _ref3$body;
+        body = _ref3$body === undefined ? '' : _ref3$body;
       submitQuiz({
         choice: body || userAnswerIndex,
         value: isGood ? 1 : 0
@@ -710,7 +740,7 @@ var QuizScreen = function QuizScreen(_ref) {
     setHasScroll = _useState6[1];
   var onScrollHeightChange = useCallback(function (_ref5) {
     var _ref5$canScroll = _ref5.canScroll,
-      canScroll = _ref5$canScroll === void 0 ? false : _ref5$canScroll;
+      canScroll = _ref5$canScroll === undefined ? false : _ref5$canScroll;
     setHasScroll(canScroll);
   }, [setHasScroll]);
   var onQuizReset = useCallback(function () {
@@ -764,6 +794,8 @@ var QuizScreen = function QuizScreen(_ref) {
     answeredIndex: userAnswerIndex,
     buttonsStyle: buttonsStyle,
     buttonsTextStyle: buttonsTextStyle,
+    inactiveButtonsStyle: inactiveButtonsStyle,
+    inactiveButtonsTextStyle: inactiveButtonsTextStyle,
     goodAnswerColor: goodAnswerColor,
     badAnswerColor: badAnswerColor,
     withoutTrueFalse: withoutTrueFalse,
@@ -855,11 +887,11 @@ var Results = function Results(_ref) {
   var hasTitle = isTextFilled(title);
   var _ref2 = title || {},
     _ref2$textStyle = _ref2.textStyle,
-    titleTextStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
+    titleTextStyle = _ref2$textStyle === undefined ? null : _ref2$textStyle;
   var hasDescription = isTextFilled(description);
   var _ref3 = description || {},
     _ref3$textStyle = _ref3.textStyle,
-    descriptionTextStyle = _ref3$textStyle === void 0 ? null : _ref3$textStyle;
+    descriptionTextStyle = _ref3$textStyle === undefined ? null : _ref3$textStyle;
   return /*#__PURE__*/React.createElement(Layout, {
     className: classNames([styles$1.container, _defineProperty({}, className, className !== null)]),
     fullscreen: true,
@@ -1023,7 +1055,9 @@ var propTypes = {
     description: PropTypes.textElement
   })),
   buttonsStyle: PropTypes.boxStyle,
+  inactiveButtonsStyle: PropTypes.boxStyle,
   buttonsTextStyle: PropTypes.textStyle,
+  inactiveButtonsTextStyle: PropTypes.textStyle,
   questionsHeadingStyle: PropTypes.textStyle,
   resultsHeadingStyle: PropTypes.textStyle,
   resultsTextStyle: PropTypes.textStyle,
@@ -1051,7 +1085,9 @@ var defaultProps = {
   questions: null,
   results: null,
   buttonsStyle: null,
+  inactiveButtonsStyle: null,
   buttonsTextStyle: null,
+  inactiveButtonsTextStyle: null,
   questionsHeadingStyle: null,
   resultsHeadingStyle: null,
   resultsTextStyle: null,
@@ -1079,7 +1115,9 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     questions = _ref.questions,
     results = _ref.results,
     buttonsStyle = _ref.buttonsStyle,
+    inactiveButtonsStyle = _ref.inactiveButtonsStyle,
     buttonsTextStyle = _ref.buttonsTextStyle,
+    inactiveButtonsTextStyle = _ref.inactiveButtonsTextStyle,
     questionsHeadingStyle = _ref.questionsHeadingStyle,
     resultsHeadingStyle = _ref.resultsHeadingStyle,
     resultsTextStyle = _ref.resultsTextStyle,
@@ -1123,9 +1161,9 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
   var _ref2 = screenState !== null ? screenState.split('.') : [],
     _ref3 = _slicedToArray(_ref2, 2),
     _ref3$ = _ref3[0],
-    stateId = _ref3$ === void 0 ? null : _ref3$,
+    stateId = _ref3$ === undefined ? null : _ref3$,
     _ref3$2 = _ref3[1],
-    stateIndex = _ref3$2 === void 0 ? 0 : _ref3$2;
+    stateIndex = _ref3$2 === undefined ? 0 : _ref3$2;
   var transitionPlaying = current;
   var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
   var backgroundPlaying = current && (isView || isEdit);
@@ -1144,11 +1182,11 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
   var _useDimensionObserver = useDimensionObserver(),
     headerRef = _useDimensionObserver.ref,
     _useDimensionObserver2 = _useDimensionObserver.height,
-    headerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
+    headerHeight = _useDimensionObserver2 === undefined ? 0 : _useDimensionObserver2;
   var _useDimensionObserver3 = useDimensionObserver(),
     footerRef = _useDimensionObserver3.ref,
     _useDimensionObserver4 = _useDimensionObserver3.height,
-    callToActionHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
+    callToActionHeight = _useDimensionObserver4 === undefined ? 0 : _useDimensionObserver4;
   var showInstantAnswer = isStatic || isCapture;
   var hasIntro = title !== null || description !== null || isEdit || stateId === 'intro';
   var _useState = useState(null),
@@ -1202,23 +1240,23 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
   var hasQuestions = questions !== null && questions.length > 0;
   var currentQuestion = hasQuestions ? questions[questionIndex] || {} : {};
   var _currentQuestion$text = currentQuestion.text,
-    text = _currentQuestion$text === void 0 ? null : _currentQuestion$text,
+    text = _currentQuestion$text === undefined ? null : _currentQuestion$text,
     _currentQuestion$answ = currentQuestion.answers,
-    answers = _currentQuestion$answ === void 0 ? [] : _currentQuestion$answ,
+    answers = _currentQuestion$answ === undefined ? [] : _currentQuestion$answ,
     _currentQuestion$back = currentQuestion.background,
-    questionBackground = _currentQuestion$back === void 0 ? null : _currentQuestion$back,
+    questionBackground = _currentQuestion$back === undefined ? null : _currentQuestion$back,
     _currentQuestion$layo = currentQuestion.layout,
-    questionLayout = _currentQuestion$layo === void 0 ? null : _currentQuestion$layo;
+    questionLayout = _currentQuestion$layo === undefined ? null : _currentQuestion$layo;
   var currentAnsweredIndex = userAnswers !== null && typeof userAnswers[questionIndex] !== 'undefined' ? userAnswers[questionIndex] : null;
   var currentPoints = useMemo(function () {
     return userAnswers !== null ? Object.keys(userAnswers).reduce(function (totalPoints, answerQuestionIndex) {
       var _ref4 = questions !== null ? questions[answerQuestionIndex] || {} : {},
         _ref4$answers = _ref4.answers,
-        questionAnswers = _ref4$answers === void 0 ? [] : _ref4$answers;
+        questionAnswers = _ref4$answers === undefined ? [] : _ref4$answers;
       var answerIndex = userAnswers[answerQuestionIndex];
       var _ref5 = questionAnswers[answerIndex] || {},
         _ref5$points = _ref5.points,
-        points = _ref5$points === void 0 ? 0 : _ref5$points;
+        points = _ref5$points === undefined ? 0 : _ref5$points;
       return points + totalPoints;
     }, 0) : 0;
   }, [userAnswers, questions]);
@@ -1234,9 +1272,9 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     }
     return (results || []).sort(function (_ref6, _ref7) {
       var _ref6$points = _ref6.points,
-        pointsA = _ref6$points === void 0 ? 0 : _ref6$points;
+        pointsA = _ref6$points === undefined ? 0 : _ref6$points;
       var _ref7$points = _ref7.points,
-        pointsB = _ref7$points === void 0 ? 0 : _ref7$points;
+        pointsB = _ref7$points === undefined ? 0 : _ref7$points;
       if (pointsA === pointsB) {
         return 0;
       }
@@ -1244,18 +1282,18 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     }).reduce(function (lastResult, result) {
       var _ref8 = lastResult || {},
         _ref8$points = _ref8.points,
-        lastPoints = _ref8$points === void 0 ? 0 : _ref8$points;
+        lastPoints = _ref8$points === undefined ? 0 : _ref8$points;
       var _ref9 = result || {},
         _ref9$points = _ref9.points,
-        points = _ref9$points === void 0 ? 0 : _ref9$points;
+        points = _ref9$points === undefined ? 0 : _ref9$points;
       return currentPoints >= (lastPoints || 0) && currentPoints >= points ? result : lastResult;
     }, null);
   }, [isResults, results, currentPoints, stateId, stateIndex]);
   var _ref10 = currentResult || {},
     _ref10$background = _ref10.background,
-    resultBackground = _ref10$background === void 0 ? null : _ref10$background,
+    resultBackground = _ref10$background === undefined ? null : _ref10$background,
     _ref10$layout = _ref10.layout,
-    resultLayout = _ref10$layout === void 0 ? null : _ref10$layout;
+    resultLayout = _ref10$layout === undefined ? null : _ref10$layout;
   var _useQuizCreate = useQuizCreate({
       screenId: screenId
     }),
@@ -1331,7 +1369,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     setHasScroll = _useState8[1];
   var onScrollHeightChange = useCallback(function (_ref12) {
     var _ref12$canScroll = _ref12.canScroll,
-      canScroll = _ref12$canScroll === void 0 ? false : _ref12$canScroll;
+      canScroll = _ref12$canScroll === undefined ? false : _ref12$canScroll;
     setHasScroll(canScroll);
   }, [setHasScroll]);
   var onQuizReset = useCallback(function () {
@@ -1420,7 +1458,9 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     answers: answers,
     answeredIndex: currentAnsweredIndex,
     buttonsStyle: buttonsStyle,
+    inactiveButtonsStyle: inactiveButtonsStyle,
     buttonsTextStyle: buttonsTextStyle,
+    inactiveButtonsTextStyle: inactiveButtonsTextStyle,
     questionsHeadingStyle: questionsHeadingStyle,
     goodAnswerColor: goodAnswerColor,
     badAnswerColor: badAnswerColor,
@@ -1613,24 +1653,44 @@ var definition = [{
           "value": "Buttons"
         }]
       })
+    }, {
+      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: 'goodAnswerColor',
       type: 'color',
       label: defineMessage({
-        id: "I2bIHm",
+        id: "hZcXoa",
         defaultMessage: [{
           "type": 0,
-          "value": "Good answer color"
+          "value": "Good answer icon color"
         }]
       })
     }, {
       name: 'badAnswerColor',
       type: 'color',
       label: defineMessage({
-        id: "ru3tjH",
+        id: "NbTtNk",
         defaultMessage: [{
           "type": 0,
-          "value": "Bad answer color"
+          "value": "Bad answer icon color"
         }]
       })
     }]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-quiz",
-    "version": "0.3.606",
+    "version": "0.3.608",
     "private": false,
     "description": "",
     "keywords": [
@@ -63,19 +63,19 @@
         "@fortawesome/fontawesome-svg-core": "^6.5.2",
         "@fortawesome/free-solid-svg-icons": "^6.5.2",
         "@fortawesome/react-fontawesome": "^0.2.0",
-        "@micromag/core": "^0.3.606",
-        "@micromag/data": "^0.3.606",
-        "@micromag/element-background": "^0.3.606",
-        "@micromag/element-button": "^0.3.606",
-        "@micromag/element-container": "^0.3.606",
-        "@micromag/element-footer": "^0.3.606",
-        "@micromag/element-header": "^0.3.606",
-        "@micromag/element-heading": "^0.3.606",
-        "@micromag/element-layout": "^0.3.606",
-        "@micromag/element-scroll": "^0.3.606",
-        "@micromag/element-text": "^0.3.606",
-        "@micromag/element-visual": "^0.3.606",
-        "@micromag/transforms": "^0.3.606",
+        "@micromag/core": "^0.3.608",
+        "@micromag/data": "^0.3.608",
+        "@micromag/element-background": "^0.3.608",
+        "@micromag/element-button": "^0.3.608",
+        "@micromag/element-container": "^0.3.608",
+        "@micromag/element-footer": "^0.3.608",
+        "@micromag/element-header": "^0.3.608",
+        "@micromag/element-heading": "^0.3.608",
+        "@micromag/element-layout": "^0.3.608",
+        "@micromag/element-scroll": "^0.3.608",
+        "@micromag/element-text": "^0.3.608",
+        "@micromag/element-visual": "^0.3.608",
+        "@micromag/transforms": "^0.3.608",
         "@react-spring/core": "^9.6.1",
         "@react-spring/web": "^9.6.1",
         "classnames": "^2.2.6",
@@ -89,5 +89,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "0e2ee772952cc24e6824806bd23a7c65c8858c73"
+    "gitHead": "02f8cfe4dde0c33bec9ed7c3bdb671cd8acf78bc"
 }