@micromag/screen-quiz 0.3.408 → 0.3.412

package/es/index.js

@@ -10,7 +10,7 @@ import { PropTypes } from '@micromag/core';
 import { ScreenElement, Transitions, Button as Button$1 } from '@micromag/core/components';
 import { useScreenRenderContext, useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenState } from '@micromag/core/contexts';
 import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
-import { isTextFilled, getStyleFromColor, isHeaderFilled, isFooterFilled, getFooterProps } from '@micromag/core/utils';
+import { isTextFilled, getStyleFromColor, isImageFilled, isHeaderFilled, isFooterFilled, getFooterProps } from '@micromag/core/utils';
 import { useQuizCreate } from '@micromag/data';
 import Background from '@micromag/element-background';
 import Container from '@micromag/element-container';
@@ -21,6 +21,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import Heading from '@micromag/element-heading';
 import Layout, { Spacer } from '@micromag/element-layout';
 import Text from '@micromag/element-text';
+import Visual from '@micromag/element-visual';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
 import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
@@ -314,6 +315,7 @@ var propTypes$4 = {
     image: PropTypes.imageElement,
     text: PropTypes.textElement
   }),
+  resultImage: PropTypes.visualElement,
   index: PropTypes$1.number,
   totalCount: PropTypes$1.number,
   answeredIndex: PropTypes$1.number,
@@ -343,6 +345,7 @@ var defaultProps$4 = {
   question: null,
   answers: null,
   result: null,
+  resultImage: null,
   index: null,
   totalCount: null,
   answeredIndex: null,
@@ -373,6 +376,7 @@ var Question = function Question(_ref) {
   var question = _ref.question,
     answers = _ref.answers,
     result = _ref.result,
+    resultImage = _ref.resultImage,
     index = _ref.index,
     totalCount = _ref.totalCount,
     answeredIndex = _ref.answeredIndex,
@@ -413,8 +417,11 @@ 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 === void 0 ? null : _ref3$customAnswerLab,
+    _ref3$answerImage = _ref3.answerImage,
+    answerImage = _ref3$answerImage === void 0 ? null : _ref3$answerImage;
   var hasResult = isTextFilled(customAnswerLabel) || isTextFilled(result);
+  var hasResultVisual = isImageFilled(answerImage) || isImageFilled(resultImage);
   var defaultResult = isTextFilled(result) ? result : null;
   var customResult = isTextFilled(customAnswerLabel) ? customAnswerLabel : null;
   var onAnswersCollapse = useCallback(function () {
@@ -492,14 +499,18 @@ var Question = function Question(_ref) {
     }) : null,
     isEmpty: answered && !hasResult,
     emptyClassName: styles$3.emptyResult
-  }, hasResult && answers !== null ? /*#__PURE__*/React.createElement(Transitions, {
+  }, (hasResult || hasResultVisual) && answers !== null ? /*#__PURE__*/React.createElement(Transitions, {
     transitions: transitions,
     playing: transitionPlaying,
     delay: (1 + answers.length) * transitionStagger,
     disabled: transitionDisabled
-  }, /*#__PURE__*/React.createElement(Text, Object.assign({}, customResult || defaultResult, {
+  }, hasResult ? /*#__PURE__*/React.createElement(Text, Object.assign({}, customResult || defaultResult, {
     className: styles$3.resultText
-  }))) : null))) : null]);
+  })) : null, hasResultVisual ? /*#__PURE__*/React.createElement(Visual, {
+    media: answerImage || resultImage,
+    width: "100%",
+    height: "auto"
+  }) : null) : null))) : null]);
 };
 Question.propTypes = propTypes$4;
 Question.defaultProps = defaultProps$4;
@@ -515,6 +526,7 @@ var propTypes$3 = {
     image: PropTypes.imageElement,
     text: PropTypes.textElement
   }),
+  resultImage: PropTypes.visualElement,
   buttonsStyle: PropTypes.boxStyle,
   buttonsTextStyle: PropTypes.textStyle,
   goodAnswerColor: PropTypes.color,
@@ -538,6 +550,7 @@ var defaultProps$3 = {
   question: null,
   answers: null,
   result: null,
+  resultImage: null,
   buttonsStyle: null,
   buttonsTextStyle: null,
   goodAnswerColor: null,
@@ -562,6 +575,7 @@ var QuizScreen = function QuizScreen(_ref) {
     question = _ref.question,
     answers = _ref.answers,
     result = _ref.result,
+    resultImage = _ref.resultImage,
     buttonsStyle = _ref.buttonsStyle,
     buttonsTextStyle = _ref.buttonsTextStyle,
     goodAnswerColor = _ref.goodAnswerColor,
@@ -714,13 +728,15 @@ var QuizScreen = function QuizScreen(_ref) {
     }),
     onClick: onQuizReset
   }) : null, /*#__PURE__*/React.createElement(Scroll, {
-    verticalAlign: verticalAlign,
-    disabled: scrollingDisabled || userAnswerIndex !== null,
+    verticalAlign: verticalAlign
+    // disabled={scrollingDisabled || userAnswerIndex !== null}
+    ,
+    disabled: scrollingDisabled,
     onScrolledBottom: onScrolledBottom,
     onScrolledNotBottom: onScrolledNotBottom,
     onScrollHeightChange: onScrollHeightChange
   }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$2.header, _defineProperty({}, styles$2.disabled, scrolledBottom && !scrollingDisabled && hasScroll)]),
+    className: classNames([styles$2.header, _defineProperty({}, styles$2.disabled, userAnswerIndex !== null || scrolledBottom && !scrollingDisabled && hasScroll)]),
     ref: headerRef,
     style: {
       paddingTop: spacing / 2,
@@ -733,6 +749,7 @@ var QuizScreen = function QuizScreen(_ref) {
     question: question,
     answers: answers,
     result: result,
+    resultImage: resultImage,
     answeredIndex: userAnswerIndex,
     buttonsStyle: buttonsStyle,
     buttonsTextStyle: buttonsTextStyle,
@@ -1573,6 +1590,16 @@ var definition = [{
         "value": "Default feedback"
       }]
     })
+  }, {
+    name: 'resultImage',
+    type: 'visual',
+    label: defineMessage({
+      id: "yA4B6h",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Result feedback image"
+      }]
+    })
   }, {
     type: 'fields',
     isList: true,

package/lib/index.js

@@ -25,6 +25,7 @@ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var Heading = require('@micromag/element-heading');
 var Layout = require('@micromag/element-layout');
 var Text = require('@micromag/element-text');
+var Visual = require('@micromag/element-visual');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var faCheck = require('@fortawesome/free-solid-svg-icons/faCheck');
 var faTimes = require('@fortawesome/free-solid-svg-icons/faTimes');
@@ -48,6 +49,7 @@ var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
 var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
 var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
 var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
+var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 
@@ -337,6 +339,7 @@ var propTypes$4 = {
     image: core.PropTypes.imageElement,
     text: core.PropTypes.textElement
   }),
+  resultImage: core.PropTypes.visualElement,
   index: PropTypes__default["default"].number,
   totalCount: PropTypes__default["default"].number,
   answeredIndex: PropTypes__default["default"].number,
@@ -366,6 +369,7 @@ var defaultProps$4 = {
   question: null,
   answers: null,
   result: null,
+  resultImage: null,
   index: null,
   totalCount: null,
   answeredIndex: null,
@@ -396,6 +400,7 @@ var Question = function Question(_ref) {
   var question = _ref.question,
     answers = _ref.answers,
     result = _ref.result,
+    resultImage = _ref.resultImage,
     index = _ref.index,
     totalCount = _ref.totalCount,
     answeredIndex = _ref.answeredIndex,
@@ -436,8 +441,11 @@ 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 === void 0 ? null : _ref3$customAnswerLab,
+    _ref3$answerImage = _ref3.answerImage,
+    answerImage = _ref3$answerImage === void 0 ? null : _ref3$answerImage;
   var hasResult = utils.isTextFilled(customAnswerLabel) || utils.isTextFilled(result);
+  var hasResultVisual = utils.isImageFilled(answerImage) || utils.isImageFilled(resultImage);
   var defaultResult = utils.isTextFilled(result) ? result : null;
   var customResult = utils.isTextFilled(customAnswerLabel) ? customAnswerLabel : null;
   var onAnswersCollapse = React.useCallback(function () {
@@ -515,14 +523,18 @@ var Question = function Question(_ref) {
     }) : null,
     isEmpty: answered && !hasResult,
     emptyClassName: styles$3.emptyResult
-  }, hasResult && answers !== null ? /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
+  }, (hasResult || hasResultVisual) && answers !== null ? /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
     transitions: transitions,
     playing: transitionPlaying,
     delay: (1 + answers.length) * transitionStagger,
     disabled: transitionDisabled
-  }, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, customResult || defaultResult, {
+  }, hasResult ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, customResult || defaultResult, {
     className: styles$3.resultText
-  }))) : null))) : null]);
+  })) : null, hasResultVisual ? /*#__PURE__*/React__default["default"].createElement(Visual__default["default"], {
+    media: answerImage || resultImage,
+    width: "100%",
+    height: "auto"
+  }) : null) : null))) : null]);
 };
 Question.propTypes = propTypes$4;
 Question.defaultProps = defaultProps$4;
@@ -538,6 +550,7 @@ var propTypes$3 = {
     image: core.PropTypes.imageElement,
     text: core.PropTypes.textElement
   }),
+  resultImage: core.PropTypes.visualElement,
   buttonsStyle: core.PropTypes.boxStyle,
   buttonsTextStyle: core.PropTypes.textStyle,
   goodAnswerColor: core.PropTypes.color,
@@ -561,6 +574,7 @@ var defaultProps$3 = {
   question: null,
   answers: null,
   result: null,
+  resultImage: null,
   buttonsStyle: null,
   buttonsTextStyle: null,
   goodAnswerColor: null,
@@ -585,6 +599,7 @@ var QuizScreen = function QuizScreen(_ref) {
     question = _ref.question,
     answers = _ref.answers,
     result = _ref.result,
+    resultImage = _ref.resultImage,
     buttonsStyle = _ref.buttonsStyle,
     buttonsTextStyle = _ref.buttonsTextStyle,
     goodAnswerColor = _ref.goodAnswerColor,
@@ -737,13 +752,15 @@ var QuizScreen = function QuizScreen(_ref) {
     }),
     onClick: onQuizReset
   }) : null, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
-    verticalAlign: verticalAlign,
-    disabled: scrollingDisabled || userAnswerIndex !== null,
+    verticalAlign: verticalAlign
+    // disabled={scrollingDisabled || userAnswerIndex !== null}
+    ,
+    disabled: scrollingDisabled,
     onScrolledBottom: onScrolledBottom,
     onScrolledNotBottom: onScrolledNotBottom,
     onScrollHeightChange: onScrollHeightChange
   }, !isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$2.header, _defineProperty__default["default"]({}, styles$2.disabled, scrolledBottom && !scrollingDisabled && hasScroll)]),
+    className: classNames__default["default"]([styles$2.header, _defineProperty__default["default"]({}, styles$2.disabled, userAnswerIndex !== null || scrolledBottom && !scrollingDisabled && hasScroll)]),
     ref: headerRef,
     style: {
       paddingTop: spacing / 2,
@@ -756,6 +773,7 @@ var QuizScreen = function QuizScreen(_ref) {
     question: question,
     answers: answers,
     result: result,
+    resultImage: resultImage,
     answeredIndex: userAnswerIndex,
     buttonsStyle: buttonsStyle,
     buttonsTextStyle: buttonsTextStyle,
@@ -1596,6 +1614,16 @@ var definition = [{
         "value": "Default feedback"
       }]
     })
+  }, {
+    name: 'resultImage',
+    type: 'visual',
+    label: reactIntl.defineMessage({
+      id: "yA4B6h",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Result feedback image"
+      }]
+    })
   }, {
     type: 'fields',
     isList: true,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-quiz",
-    "version": "0.3.408",
+    "version": "0.3.412",
     "private": false,
     "description": "",
     "keywords": [
@@ -53,18 +53,19 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.13",
-        "@micromag/core": "^0.3.408",
-        "@micromag/data": "^0.3.408",
-        "@micromag/element-background": "^0.3.408",
-        "@micromag/element-button": "^0.3.408",
-        "@micromag/element-container": "^0.3.408",
-        "@micromag/element-footer": "^0.3.408",
-        "@micromag/element-header": "^0.3.408",
-        "@micromag/element-heading": "^0.3.408",
-        "@micromag/element-layout": "^0.3.408",
-        "@micromag/element-scroll": "^0.3.408",
-        "@micromag/element-text": "^0.3.408",
-        "@micromag/transforms": "^0.3.408",
+        "@micromag/core": "^0.3.410",
+        "@micromag/data": "^0.3.410",
+        "@micromag/element-background": "^0.3.410",
+        "@micromag/element-button": "^0.3.410",
+        "@micromag/element-container": "^0.3.410",
+        "@micromag/element-footer": "^0.3.410",
+        "@micromag/element-header": "^0.3.410",
+        "@micromag/element-heading": "^0.3.410",
+        "@micromag/element-layout": "^0.3.410",
+        "@micromag/element-scroll": "^0.3.410",
+        "@micromag/element-text": "^0.3.410",
+        "@micromag/element-visual": "^0.3.410",
+        "@micromag/transforms": "^0.3.410",
         "@react-spring/core": "^9.6.1",
         "@react-spring/web": "^9.6.1",
         "classnames": "^2.2.6",
@@ -78,5 +79,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "da827edbb305a6e1cc9832e33f2d4263dadd2331"
+    "gitHead": "4d0b827ed8a3282317d05f9c3a4c5346639c5fe7"
 }