@micromag/screen-quiz 0.3.410 → 0.3.416

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,
@@ -892,10 +909,6 @@ var propTypes$1 = {
   layout: PropTypes$1.string,
   focusable: PropTypes$1.bool,
   buttonDisabled: PropTypes$1.bool,
-  transitions: PropTypes.transitions,
-  transitionPlaying: PropTypes$1.bool,
-  transitionStagger: PropTypes$1.number,
-  transitionDisabled: PropTypes$1.bool,
   className: PropTypes$1.string,
   style: PropTypes$1.objectOf(PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number])),
   onClickButton: PropTypes$1.func
@@ -907,10 +920,6 @@ var defaultProps$1 = {
   button: null,
   buttonDisabled: false,
   focusable: false,
-  transitions: null,
-  transitionPlaying: false,
-  transitionStagger: 100,
-  transitionDisabled: false,
   className: null,
   style: null,
   onClickButton: null
@@ -922,16 +931,10 @@ var Title = function Title(_ref) {
     button = _ref.button,
     buttonDisabled = _ref.buttonDisabled,
     focusable = _ref.focusable,
-    transitions = _ref.transitions,
-    transitionPlaying = _ref.transitionPlaying,
-    transitionStagger = _ref.transitionStagger,
-    transitionDisabled = _ref.transitionDisabled,
     className = _ref.className,
     style = _ref.style,
     onClickButton = _ref.onClickButton;
-  var _useScreenRenderConte = useScreenRenderContext();
-    _useScreenRenderConte.isPreview;
-    _useScreenRenderConte.isEdit;
+  // const { isPreview, isEdit } = useScreenRenderContext();
   var isSplitted = layout === 'split';
   var verticalAlign = isSplitted ? null : layout;
   var hasTitle = isTextFilled(title);
@@ -954,13 +957,9 @@ var Title = function Title(_ref) {
     }),
     emptyClassName: styles.emptyTitle,
     isEmpty: !hasTitle
-  }, hasTitle ? /*#__PURE__*/React.createElement(Transitions, {
-    transitions: transitions,
-    playing: transitionPlaying,
-    disabled: transitionDisabled
-  }, /*#__PURE__*/React.createElement(Heading, Object.assign({}, title, {
+  }, hasTitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({}, title, {
     className: styles.title
-  }))) : null), /*#__PURE__*/React.createElement(ScreenElement, {
+  })) : null), /*#__PURE__*/React.createElement(ScreenElement, {
     key: "description",
     placeholder: "text",
     emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -972,23 +971,13 @@ var Title = function Title(_ref) {
     }),
     emptyClassName: styles.emptyDescription,
     isEmpty: !hasDescription
-  }, hasDescription ? /*#__PURE__*/React.createElement(Transitions, {
-    transitions: transitions,
-    playing: transitionPlaying,
-    disabled: transitionDisabled,
-    delay: transitionStagger
-  }, /*#__PURE__*/React.createElement(Text, Object.assign({}, description, {
+  }, hasDescription ? /*#__PURE__*/React.createElement(Text, Object.assign({}, description, {
     className: styles.description
-  }))) : null), isSplitted ? /*#__PURE__*/React.createElement(Spacer, {
+  })) : null), isSplitted ? /*#__PURE__*/React.createElement(Spacer, {
     key: "spacer"
   }) : null, /*#__PURE__*/React.createElement(ScreenElement, {
     key: "button",
     placeholder: "button"
-  }, /*#__PURE__*/React.createElement(Transitions, {
-    transitions: transitions,
-    playing: transitionPlaying,
-    disabled: transitionDisabled,
-    delay: transitionStagger * 2
   }, /*#__PURE__*/React.createElement(Button, {
     disabled: buttonDisabled,
     focusable: focusable,
@@ -1003,7 +992,7 @@ var Title = function Title(_ref) {
       "type": 0,
       "value": "Start"
     }]
-  }))))]);
+  })))]);
 };
 Title.propTypes = propTypes$1;
 Title.defaultProps = defaultProps$1;
@@ -1573,6 +1562,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,
@@ -915,10 +933,6 @@ var propTypes$1 = {
   layout: PropTypes__default["default"].string,
   focusable: PropTypes__default["default"].bool,
   buttonDisabled: PropTypes__default["default"].bool,
-  transitions: core.PropTypes.transitions,
-  transitionPlaying: PropTypes__default["default"].bool,
-  transitionStagger: PropTypes__default["default"].number,
-  transitionDisabled: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string,
   style: PropTypes__default["default"].objectOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])),
   onClickButton: PropTypes__default["default"].func
@@ -930,10 +944,6 @@ var defaultProps$1 = {
   button: null,
   buttonDisabled: false,
   focusable: false,
-  transitions: null,
-  transitionPlaying: false,
-  transitionStagger: 100,
-  transitionDisabled: false,
   className: null,
   style: null,
   onClickButton: null
@@ -945,16 +955,10 @@ var Title = function Title(_ref) {
     button = _ref.button,
     buttonDisabled = _ref.buttonDisabled,
     focusable = _ref.focusable,
-    transitions = _ref.transitions,
-    transitionPlaying = _ref.transitionPlaying,
-    transitionStagger = _ref.transitionStagger,
-    transitionDisabled = _ref.transitionDisabled,
     className = _ref.className,
     style = _ref.style,
     onClickButton = _ref.onClickButton;
-  var _useScreenRenderConte = contexts.useScreenRenderContext();
-    _useScreenRenderConte.isPreview;
-    _useScreenRenderConte.isEdit;
+  // const { isPreview, isEdit } = useScreenRenderContext();
   var isSplitted = layout === 'split';
   var verticalAlign = isSplitted ? null : layout;
   var hasTitle = utils.isTextFilled(title);
@@ -977,13 +981,9 @@ var Title = function Title(_ref) {
     }),
     emptyClassName: styles.emptyTitle,
     isEmpty: !hasTitle
-  }, hasTitle ? /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
-    transitions: transitions,
-    playing: transitionPlaying,
-    disabled: transitionDisabled
-  }, /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({}, title, {
+  }, hasTitle ? /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({}, title, {
     className: styles.title
-  }))) : null), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
+  })) : null), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
     key: "description",
     placeholder: "text",
     emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
@@ -995,23 +995,13 @@ var Title = function Title(_ref) {
     }),
     emptyClassName: styles.emptyDescription,
     isEmpty: !hasDescription
-  }, hasDescription ? /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
-    transitions: transitions,
-    playing: transitionPlaying,
-    disabled: transitionDisabled,
-    delay: transitionStagger
-  }, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, description, {
+  }, hasDescription ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, description, {
     className: styles.description
-  }))) : null), isSplitted ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
+  })) : null), isSplitted ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
     key: "spacer"
   }) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
     key: "button",
     placeholder: "button"
-  }, /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
-    transitions: transitions,
-    playing: transitionPlaying,
-    disabled: transitionDisabled,
-    delay: transitionStagger * 2
   }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     disabled: buttonDisabled,
     focusable: focusable,
@@ -1026,7 +1016,7 @@ var Title = function Title(_ref) {
       "type": 0,
       "value": "Start"
     }]
-  }))))]);
+  })))]);
 };
 Title.propTypes = propTypes$1;
 Title.defaultProps = defaultProps$1;
@@ -1596,6 +1586,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.410",
+    "version": "0.3.416",
     "private": false,
     "description": "",
     "keywords": [
@@ -64,6 +64,7 @@
         "@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",
@@ -78,5 +79,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "3d20200b811ff19c75de0697a4c4543101bf755b"
+    "gitHead": "4990d8fa86965538a258b8061630290f8c2d7ae6"
 }