@micromag/screen-survey 0.3.647 → 0.3.651

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-screen-survey-container .micromag-screen-survey-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-survey-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-survey-disabled.micromag-screen-survey-container{overflow:hidden;pointer-events:none}.micromag-screen-survey-hidden.micromag-screen-survey-container{display:none;visibility:hidden}.micromag-screen-survey-placeholder.micromag-screen-survey-container .micromag-screen-survey-content{padding:6px;position:relative}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer,.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-survey-container .micromag-screen-survey-background{z-index:0}.micromag-screen-survey-container .micromag-screen-survey-content{z-index:1}.micromag-screen-survey-container .micromag-screen-survey-question{margin-bottom:20px}.micromag-screen-survey-container .micromag-screen-survey-answers,.micromag-screen-survey-container .micromag-screen-survey-items{position:relative}.micromag-screen-survey-container .micromag-screen-survey-header{left:0;position:absolute;top:0;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-survey-container .micromag-screen-survey-header.micromag-screen-survey-disabled{opacity:0;pointer-events:none}.micromag-screen-survey-container .micromag-screen-survey-footer{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-survey-container .micromag-screen-survey-footer a{padding:0}.micromag-screen-survey-container .micromag-screen-survey-footer.micromag-screen-survey-disabled{opacity:0;pointer-events:none}.micromag-screen-survey-container .micromag-screen-survey-item{padding:5px 0}.micromag-screen-survey-container .micromag-screen-survey-item:first-child .micromag-screen-survey-placeholderAnswer{width:80%}.micromag-screen-survey-container .micromag-screen-survey-item:last-child .micromag-screen-survey-placeholderAnswer{width:90%}.micromag-screen-survey-container .micromag-screen-survey-itemContent{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.micromag-screen-survey-container .micromag-screen-survey-resultBar{background-color:hsla(0,0%,100%,.2);height:100%;left:0;position:absolute;top:0}.micromag-screen-survey-container .micromag-screen-survey-resultLabel{color:#fff;padding:0 8px;position:absolute;right:0;text-align:right;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:4em;z-index:1}.micromag-screen-survey-container .micromag-screen-survey-itemInner{width:100%}.micromag-screen-survey-container .micromag-screen-survey-button{display:-ms-flexbox;display:flex;overflow:hidden;padding:10px;position:relative;-webkit-transition:opacity .5s ease-out;transition:opacity .5s ease-out;width:100%}.micromag-screen-survey-container .micromag-screen-survey-button:disabled{opacity:1;pointer-events:none}.micromag-screen-survey-container .micromag-screen-survey-itemLabel{width:100%}.micromag-screen-survey-container .micromag-screen-survey-itemLabel,.micromag-screen-survey-container .micromag-screen-survey-itemText{display:inline-block;-webkit-transition:margin-left .3s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out,-webkit-transform .3s ease-out}.micromag-screen-survey-container .micromag-screen-survey-itemText{position:relative;z-index:1}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer,.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{margin:0 auto;width:100%}.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{height:75px}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer{height:50px}.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-button,.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-result,.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-resultLabel{opacity:1!important}.micromag-screen-survey-container.micromag-screen-survey-answered{line-height:1}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultContainer{padding-left:15px;padding-right:50px}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultContent{opacity:1;width:100%}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-button{background-color:transparent;border-color:transparent}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-button,.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-result,.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultLabel{opacity:.6}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-itemLabel{margin-left:0;margin-right:0;text-align:left}.micromag-screen-survey-container.micromag-screen-survey-answered.micromag-screen-survey-withPercentage .micromag-screen-survey-itemText{-webkit-transform:translate(-2em);-ms-transform:translate(-2em);transform:translate(-2em)}.micromag-screen-survey-container.micromag-screen-survey-withPercentage .micromag-screen-survey-itemLabel{margin-left:2em;margin-right:2em}.micromag-screen-survey-container.micromag-screen-survey-isPlaceholder .micromag-screen-survey-layout{padding:10px}.micromag-screen-survey-container.micromag-screen-survey-isPlaceholder .micromag-screen-survey-item{padding:1px 0}
+.micromag-screen-survey-container .micromag-screen-survey-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-survey-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-survey-disabled.micromag-screen-survey-container{overflow:hidden;pointer-events:none}.micromag-screen-survey-hidden.micromag-screen-survey-container{display:none;visibility:hidden}.micromag-screen-survey-placeholder.micromag-screen-survey-container .micromag-screen-survey-content{padding:6px;position:relative}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer,.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-survey-container .micromag-screen-survey-background{z-index:0}.micromag-screen-survey-container .micromag-screen-survey-content{z-index:1}.micromag-screen-survey-container .micromag-screen-survey-question{margin-bottom:20px}.micromag-screen-survey-container .micromag-screen-survey-answers,.micromag-screen-survey-container .micromag-screen-survey-items{position:relative}.micromag-screen-survey-container .micromag-screen-survey-header{left:0;position:absolute;top:0;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-survey-container .micromag-screen-survey-header.micromag-screen-survey-disabled{opacity:0;pointer-events:none}.micromag-screen-survey-container .micromag-screen-survey-footer{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-survey-container .micromag-screen-survey-footer a{padding:0}.micromag-screen-survey-container .micromag-screen-survey-footer.micromag-screen-survey-disabled{opacity:0;pointer-events:none}.micromag-screen-survey-container .micromag-screen-survey-item{padding:5px 0}.micromag-screen-survey-container .micromag-screen-survey-item:first-child .micromag-screen-survey-placeholderAnswer{width:80%}.micromag-screen-survey-container .micromag-screen-survey-item:last-child .micromag-screen-survey-placeholderAnswer{width:90%}.micromag-screen-survey-container .micromag-screen-survey-itemContent{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.micromag-screen-survey-container .micromag-screen-survey-resultBar{background-color:hsla(0,0%,100%,.2);height:100%;left:0;position:absolute;top:0}.micromag-screen-survey-container .micromag-screen-survey-resultLabel{color:#fff;padding:0 8px;position:absolute;right:0;text-align:right;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:4em;z-index:1}.micromag-screen-survey-container .micromag-screen-survey-resultText{margin-top:10px}.micromag-screen-survey-container .micromag-screen-survey-itemInner{width:100%}.micromag-screen-survey-container .micromag-screen-survey-button{display:-ms-flexbox;display:flex;overflow:hidden;padding:10px;position:relative;-webkit-transition:opacity .5s ease-out;transition:opacity .5s ease-out;width:100%}.micromag-screen-survey-container .micromag-screen-survey-button:disabled{opacity:1;pointer-events:none}.micromag-screen-survey-container .micromag-screen-survey-itemLabel{width:100%}.micromag-screen-survey-container .micromag-screen-survey-itemLabel,.micromag-screen-survey-container .micromag-screen-survey-itemText{display:inline-block;-webkit-transition:margin-left .3s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out,-webkit-transform .3s ease-out}.micromag-screen-survey-container .micromag-screen-survey-itemText{position:relative;z-index:1}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer,.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{margin:0 auto;width:100%}.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{height:75px}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer{height:50px}.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-button,.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-result,.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-resultLabel{opacity:1!important}.micromag-screen-survey-container .micromag-screen-survey-input{margin:5px 0;position:relative}.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-disabled{opacity:.5}.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-disabled .micromag-screen-survey-confirm,.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-disabled .micromag-screen-survey-textInput{background:transparent}.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-selected{opacity:1!important}.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-selected .micromag-screen-survey-confirm{opacity:0}.micromag-screen-survey-container .micromag-screen-survey-textInput{color:#fff;display:-ms-flexbox;display:flex;margin:0;overflow:hidden;padding:10px 40px 10px 10px;position:relative;-webkit-transition:opacity .5s ease-out;transition:opacity .5s ease-out;width:100%;z-index:0}.micromag-screen-survey-container .micromag-screen-survey-confirm{bottom:0;position:absolute;right:0;top:0;z-index:1}.micromag-screen-survey-container.micromag-screen-survey-answered{line-height:1}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultContainer{padding-left:15px;padding-right:50px}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultContent{opacity:1;width:100%}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-button{background-color:transparent;border-color:transparent}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-button,.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-result,.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultLabel{opacity:.6}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-itemLabel{margin-left:0;margin-right:0;text-align:left}.micromag-screen-survey-container.micromag-screen-survey-answered.micromag-screen-survey-withPercentage .micromag-screen-survey-itemText{-webkit-transform:translate(-2em);-ms-transform:translate(-2em);transform:translate(-2em)}.micromag-screen-survey-container.micromag-screen-survey-withPercentage .micromag-screen-survey-itemLabel{margin-left:2em;margin-right:2em}.micromag-screen-survey-container.micromag-screen-survey-inputFocused .micromag-screen-survey-answers,.micromag-screen-survey-container.micromag-screen-survey-inputFocused .micromag-screen-survey-question{opacity:.5}.micromag-screen-survey-container.micromag-screen-survey-isPlaceholder .micromag-screen-survey-layout{padding:10px}.micromag-screen-survey-container.micromag-screen-survey-isPlaceholder .micromag-screen-survey-item{padding:1px 0}

package/es/index.js

@@ -8,7 +8,7 @@ import isNumber from 'lodash/isNumber';
 import PropTypes from 'prop-types';
 import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
-import { ScreenElement, Transitions } from '@micromag/core/components';
+import { ScreenElement, Transitions, ArrowIcon } from '@micromag/core/components';
 import { useScreenSize, useScreenRenderContext, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
 import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
 import { isTextFilled, getLargestRemainderRound, isHeaderFilled, isFooterFilled, getFooterProps, getStyleFromColor } from '@micromag/core/utils';
@@ -22,14 +22,16 @@ import Heading from '@micromag/element-heading';
 import Layout, { Spacer } from '@micromag/element-layout';
 import Scroll from '@micromag/element-scroll';
 import Text from '@micromag/element-text';
+import TextInput from '@micromag/element-text-input';
 
-var styles = {"container":"micromag-screen-survey-container","background":"micromag-screen-survey-background","disabled":"micromag-screen-survey-disabled","content":"micromag-screen-survey-content","emptyQuestion":"micromag-screen-survey-emptyQuestion","emptyAnswer":"micromag-screen-survey-emptyAnswer","question":"micromag-screen-survey-question","answers":"micromag-screen-survey-answers","items":"micromag-screen-survey-items","header":"micromag-screen-survey-header","footer":"micromag-screen-survey-footer","item":"micromag-screen-survey-item","placeholderAnswer":"micromag-screen-survey-placeholderAnswer","itemContent":"micromag-screen-survey-itemContent","resultBar":"micromag-screen-survey-resultBar","resultLabel":"micromag-screen-survey-resultLabel","itemInner":"micromag-screen-survey-itemInner","button":"micromag-screen-survey-button","itemLabel":"micromag-screen-survey-itemLabel","itemText":"micromag-screen-survey-itemText","userAnswer":"micromag-screen-survey-userAnswer","answered":"micromag-screen-survey-answered","withPercentage":"micromag-screen-survey-withPercentage","isPlaceholder":"micromag-screen-survey-isPlaceholder","layout":"micromag-screen-survey-layout"};
+var styles = {"container":"micromag-screen-survey-container","background":"micromag-screen-survey-background","disabled":"micromag-screen-survey-disabled","content":"micromag-screen-survey-content","emptyQuestion":"micromag-screen-survey-emptyQuestion","emptyAnswer":"micromag-screen-survey-emptyAnswer","question":"micromag-screen-survey-question","answers":"micromag-screen-survey-answers","items":"micromag-screen-survey-items","header":"micromag-screen-survey-header","footer":"micromag-screen-survey-footer","item":"micromag-screen-survey-item","placeholderAnswer":"micromag-screen-survey-placeholderAnswer","itemContent":"micromag-screen-survey-itemContent","resultBar":"micromag-screen-survey-resultBar","resultLabel":"micromag-screen-survey-resultLabel","resultText":"micromag-screen-survey-resultText","itemInner":"micromag-screen-survey-itemInner","button":"micromag-screen-survey-button","itemLabel":"micromag-screen-survey-itemLabel","itemText":"micromag-screen-survey-itemText","userAnswer":"micromag-screen-survey-userAnswer","input":"micromag-screen-survey-input","textInput":"micromag-screen-survey-textInput","confirm":"micromag-screen-survey-confirm","selected":"micromag-screen-survey-selected","answered":"micromag-screen-survey-answered","withPercentage":"micromag-screen-survey-withPercentage","inputFocused":"micromag-screen-survey-inputFocused","isPlaceholder":"micromag-screen-survey-isPlaceholder","layout":"micromag-screen-survey-layout"};
 
 var propTypes = {
   id: PropTypes.string,
   layout: PropTypes.oneOf(['top', 'middle', 'bottom', 'split']),
   question: PropTypes$1.textElement,
   answers: PropTypes$1.answers,
+  result: PropTypes$1.result,
   buttonsStyle: PropTypes$1.boxStyle,
   buttonsTextStyle: PropTypes$1.textStyle,
   resultsStyle: PropTypes.shape({
@@ -41,6 +43,7 @@ var propTypes = {
   header: PropTypes$1.header,
   footer: PropTypes$1.footer,
   background: PropTypes$1.backgroundElement,
+  showInput: PropTypes.bool,
   showCount: PropTypes.bool,
   withoutPercentage: PropTypes.bool,
   withoutBar: PropTypes.bool,
@@ -57,6 +60,7 @@ var defaultProps = {
   layout: 'middle',
   question: null,
   answers: null,
+  result: null,
   buttonsStyle: null,
   buttonsTextStyle: null,
   resultsStyle: null,
@@ -64,6 +68,7 @@ var defaultProps = {
   header: null,
   footer: null,
   background: null,
+  showInput: false,
   showCount: false,
   withoutPercentage: false,
   withoutBar: false,
@@ -80,6 +85,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
     layout = _ref.layout,
     question = _ref.question,
     answers = _ref.answers,
+    result = _ref.result,
     buttonsStyle = _ref.buttonsStyle,
     buttonsTextStyle = _ref.buttonsTextStyle,
     resultsStyle = _ref.resultsStyle,
@@ -87,6 +93,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
     header = _ref.header,
     footer = _ref.footer,
     background = _ref.background,
+    showInput = _ref.showInput,
     showCount = _ref.showCount,
     withoutPercentage = _ref.withoutPercentage,
     withoutBar = _ref.withoutBar,
@@ -154,6 +161,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
     return false;
   });
   var hasQuestion = isTextFilled(question);
+  var hasDefaultResult = isTextFilled(result);
   var showInstantAnswer = isStatic || isCapture;
   var _useState = useState(showInstantAnswer ? -1 : null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -224,6 +232,48 @@ var SurveyScreen = function SurveyScreen(_ref) {
       setUserAnswerIndex(null);
     }
   }, [isEdit, current, userAnswerIndex, setUserAnswerIndex]);
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    textInput = _useState4[0],
+    setTextInput = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    inputFocused = _useState6[0],
+    setInputFocused = _useState6[1];
+  var inputDisabled = isPreview || answered;
+  var onInputFocused = useCallback(function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    setInputFocused(true);
+  }, [setInputFocused]);
+  var onInputBlurred = useCallback(function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    setInputFocused(false);
+  }, [setInputFocused]);
+  var onTextInputChange = useCallback(function (e) {
+    var _ref9 = e.target || {},
+      _ref9$value = _ref9.value,
+      value = _ref9$value === undefined ? null : _ref9$value;
+    setTextInput(value);
+  }, [setTextInput]);
+  var onSubmitSuggestion = useCallback(function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (textInput !== null && textInput !== '' && !answered) {
+      // console.log('submitting survey suggestion', textInput);
+      submitQuiz({
+        choice: textInput,
+        value: 1
+      });
+      setUserAnswerIndex('input');
+      setInputFocused(false);
+      trackScreenEvent('submit_answer', "Answer: ".concat(textInput), {
+        textInput: textInput,
+        answerIndex: -1
+      });
+    }
+  }, [textInput, submitQuiz, answered, setUserAnswerIndex, setInputFocused, trackScreenEvent]);
   var hasHeader = isHeaderFilled(header);
   var hasFooter = isFooterFilled(footer);
   var footerProps = getFooterProps(footer, {
@@ -241,12 +291,12 @@ var SurveyScreen = function SurveyScreen(_ref) {
     _useDimensionObserver4 = _useDimensionObserver3.height,
     footerHeight = _useDimensionObserver4 === undefined ? 0 : _useDimensionObserver4;
   var scrollingDisabled = !isEdit && transitionDisabled || !current;
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    scrolledBottom = _useState4[0],
-    setScrolledBottom = _useState4[1];
-  var onScrolledBottom = useCallback(function (_ref9) {
-    var initial = _ref9.initial;
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    scrolledBottom = _useState8[0],
+    setScrolledBottom = _useState8[1];
+  var onScrolledBottom = useCallback(function (_ref10) {
+    var initial = _ref10.initial;
     if (initial) {
       trackScreenEvent('scroll', 'Screen');
     }
@@ -255,13 +305,13 @@ var SurveyScreen = function SurveyScreen(_ref) {
   var onScrolledNotBottom = useCallback(function () {
     setScrolledBottom(false);
   }, [setScrolledBottom]);
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    hasScroll = _useState6[0],
-    setHasScroll = _useState6[1];
-  var onScrollHeightChange = useCallback(function (_ref10) {
-    var _ref10$canScroll = _ref10.canScroll,
-      canScroll = _ref10$canScroll === undefined ? false : _ref10$canScroll;
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    hasScroll = _useState10[0],
+    setHasScroll = _useState10[1];
+  var onScrollHeightChange = useCallback(function (_ref11) {
+    var _ref11$canScroll = _ref11.canScroll,
+      canScroll = _ref11$canScroll === undefined ? false : _ref11$canScroll;
     setHasScroll(canScroll);
   }, [setHasScroll]);
 
@@ -290,14 +340,24 @@ var SurveyScreen = function SurveyScreen(_ref) {
       key: "spacer"
     }));
   }
-  var finalTransitionDuration = showInstantAnswer ? 0 : "".concat(resultTransitionDuration, "ms");
-  var _ref11 = resultsStyle || {},
-    _ref11$barColor = _ref11.barColor,
-    resultsBarColor = _ref11$barColor === undefined ? null : _ref11$barColor,
-    _ref11$textColor = _ref11.textColor,
-    resultsTextColor = _ref11$textColor === undefined ? null : _ref11$textColor,
-    _ref11$percentageText = _ref11.percentageTextStyle,
-    resultsPercentageTextStyle = _ref11$percentageText === undefined ? null : _ref11$percentageText;
+  var finalTransitionDuration = useMemo(function () {
+    return showInstantAnswer ? 0 : "".concat(resultTransitionDuration, "ms");
+  }, [showInstantAnswer, resultTransitionDuration]);
+  var _ref12 = resultsStyle || {},
+    _ref12$barColor = _ref12.barColor,
+    resultsBarColor = _ref12$barColor === undefined ? null : _ref12$barColor,
+    _ref12$textColor = _ref12.textColor,
+    resultsTextColor = _ref12$textColor === undefined ? null : _ref12$textColor,
+    _ref12$percentageText = _ref12.percentageTextStyle,
+    resultsPercentageTextStyle = _ref12$percentageText === undefined ? null : _ref12$percentageText;
+  var finalResult = useMemo(function () {
+    var defaultResult = hasDefaultResult ? result : null;
+    var answer = userAnswerIndex !== null ? answers[userAnswerIndex] : null;
+    var _ref13 = answer || {},
+      _ref13$result = _ref13.result,
+      answerResult = _ref13$result === undefined ? null : _ref13$result;
+    return answerResult || defaultResult;
+  }, [hasDefaultResult, result, answers, userAnswerIndex]);
   items.push(/*#__PURE__*/React.createElement("div", {
     key: "answers",
     className: styles.answers
@@ -305,43 +365,43 @@ var SurveyScreen = function SurveyScreen(_ref) {
     className: styles.items
   }, (isPlaceholder ? _toConsumableArray(new Array(3)) : answers).map(function (answer, answerIndex) {
     var hasAnswer = answer !== null;
-    var _ref12 = answer || {},
-      _ref12$label = _ref12.label,
-      label = _ref12$label === undefined ? null : _ref12$label,
-      _ref12$buttonStyle = _ref12.buttonStyle,
-      answerButtonStyle = _ref12$buttonStyle === undefined ? null : _ref12$buttonStyle,
-      _ref12$textStyle = _ref12.textStyle,
-      answerButtonTextStyle = _ref12$textStyle === undefined ? null : _ref12$textStyle,
-      _ref12$resultStyle = _ref12.resultStyle,
-      answerResultStyle = _ref12$resultStyle === undefined ? null : _ref12$resultStyle;
-    var _ref13 = answerResultStyle || {},
-      _ref13$barColor = _ref13.barColor,
-      answerResultBarColor = _ref13$barColor === undefined ? null : _ref13$barColor,
-      answerResultTextColor = _ref13.textColor,
-      _ref13$percentageText = _ref13.percentageTextStyle,
-      answerResultPercentageTextStyle = _ref13$percentageText === undefined ? null : _ref13$percentageText;
-    var _ref14 = label || {},
-      _ref14$body = _ref14.body,
-      body = _ref14$body === undefined ? null : _ref14$body;
-    var _ref15 = body !== null ? quizAnswersComputed[body] || {} : {},
-      _ref15$percent = _ref15.percent,
-      percent = _ref15$percent === undefined ? 0 : _ref15$percent,
-      _ref15$count = _ref15.count,
-      count = _ref15$count === undefined ? 0 : _ref15$count;
+    var _ref14 = answer || {},
+      _ref14$label = _ref14.label,
+      label = _ref14$label === undefined ? null : _ref14$label,
+      _ref14$buttonStyle = _ref14.buttonStyle,
+      answerButtonStyle = _ref14$buttonStyle === undefined ? null : _ref14$buttonStyle,
+      _ref14$textStyle = _ref14.textStyle,
+      answerButtonTextStyle = _ref14$textStyle === undefined ? null : _ref14$textStyle,
+      _ref14$resultStyle = _ref14.resultStyle,
+      answerResultStyle = _ref14$resultStyle === undefined ? null : _ref14$resultStyle;
+    var _ref15 = answerResultStyle || {},
+      _ref15$barColor = _ref15.barColor,
+      answerResultBarColor = _ref15$barColor === undefined ? null : _ref15$barColor,
+      answerResultTextColor = _ref15.textColor,
+      _ref15$percentageText = _ref15.percentageTextStyle,
+      answerResultPercentageTextStyle = _ref15$percentageText === undefined ? null : _ref15$percentageText;
     var _ref16 = label || {},
-      _ref16$textStyle = _ref16.textStyle,
-      textStyle = _ref16$textStyle === undefined ? null : _ref16$textStyle;
-    var _ref17 = textStyle || {},
-      _ref17$color = _ref17.color,
-      labelColor = _ref17$color === undefined ? null : _ref17$color;
+      _ref16$body = _ref16.body,
+      body = _ref16$body === undefined ? null : _ref16$body;
+    var _ref17 = body !== null ? quizAnswersComputed[body] || {} : {},
+      _ref17$percent = _ref17.percent,
+      percent = _ref17$percent === undefined ? 0 : _ref17$percent,
+      _ref17$count = _ref17.count,
+      count = _ref17$count === undefined ? 0 : _ref17$count;
+    var _ref18 = label || {},
+      _ref18$textStyle = _ref18.textStyle,
+      textStyle = _ref18$textStyle === undefined ? null : _ref18$textStyle;
+    var _ref19 = textStyle || {},
+      _ref19$color = _ref19.color,
+      labelColor = _ref19$color === undefined ? null : _ref19$color;
     var hasAnswerLabel = isTextFilled(label);
     var userAnswer = userAnswerIndex === answerIndex;
     var buttonStyles = _objectSpread(_objectSpread(_objectSpread({}, buttonsStyle), answerButtonStyle), answered ? {
       textAlign: 'left'
     } : null);
-    var _ref18 = buttonStyles || {},
-      _ref18$borderRadius = _ref18.borderRadius,
-      answerResultBorderRadius = _ref18$borderRadius === undefined ? null : _ref18$borderRadius;
+    var _ref20 = buttonStyles || {},
+      _ref20$borderRadius = _ref20.borderRadius,
+      answerResultBorderRadius = _ref20$borderRadius === undefined ? null : _ref20$borderRadius;
     var finalBarBorderRadius = answerResultBorderRadius !== null && isNumber(answerResultBorderRadius) && answerResultBorderRadius > 2 ? answerResultBorderRadius - 2 : answerResultBorderRadius;
     return /*#__PURE__*/React.createElement("div", {
       key: "answer-".concat(answerIndex),
@@ -411,7 +471,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
     }) : null)))) : null));
   })) : null));
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.answered, answered), styles.withPercentage, !withoutPercentage), styles.isPlaceholder, isPlaceholder)])
+    className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.answered, answered), styles.inputFocused, inputFocused), styles.withPercentage, !withoutPercentage), styles.isPlaceholder, isPlaceholder)])
   }, /*#__PURE__*/React.createElement(Container, {
     width: width,
     height: height,
@@ -441,7 +501,30 @@ var SurveyScreen = function SurveyScreen(_ref) {
       paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
       paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (footerHeight + spacing)
     } : null
-  }, items)), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
+  }, items, !isPlaceholder && showInput ? /*#__PURE__*/React.createElement("form", {
+    className: classNames([styles.input, _defineProperty(_defineProperty(_defineProperty({}, styles.focused, inputFocused), styles.disabled, inputDisabled), styles.selected, userAnswerIndex === 'input')]),
+    onSubmit: onSubmitSuggestion
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    className: styles.textInput,
+    disabled: inputDisabled,
+    focusable: current && isView,
+    buttonStyle: buttonsStyle,
+    textStyle: _objectSpread({}, buttonsTextStyle),
+    value: textInput,
+    onChange: onTextInputChange,
+    onFocus: onInputFocused,
+    onBlur: onInputBlurred
+  }), /*#__PURE__*/React.createElement(Button, {
+    className: styles.confirm,
+    type: "submit",
+    disabled: inputDisabled
+  }, /*#__PURE__*/React.createElement(ArrowIcon, null))) : null, userAnswerIndex !== null && finalResult !== null ? /*#__PURE__*/React.createElement(Transitions, {
+    transitions: transitions,
+    playing: transitionPlaying,
+    disabled: transitionDisabled
+  }, /*#__PURE__*/React.createElement(Text, Object.assign({}, finalResult || {}, {
+    className: styles.resultText
+  }))) : null)), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
     ref: footerRef,
     className: classNames([styles.footer, _defineProperty({}, styles.disabled, !scrolledBottom)]),
     style: {
@@ -528,6 +611,19 @@ var definition = {
         "value": "Answers"
       }]
     })
+  }, {
+    name: 'result',
+    type: 'text-element',
+    theme: {
+      textStyle: 'text'
+    },
+    label: defineMessage({
+      id: "iQ5Uf7",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Default feedback"
+      }]
+    })
   }, {
     type: 'fields',
     isList: true,
@@ -539,6 +635,17 @@ var definition = {
       }]
     }),
     fields: [{
+      name: 'showInput',
+      type: 'toggle',
+      defaultValue: false,
+      label: defineMessage({
+        id: "sLskqO",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Show input answer"
+        }]
+      })
+    }, {
       name: 'showCount',
       type: 'toggle',
       defaultValue: false,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-survey",
-    "version": "0.3.647",
+    "version": "0.3.651",
     "private": false,
     "description": "",
     "keywords": [
@@ -60,18 +60,19 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.637",
-        "@micromag/data": "^0.3.637",
-        "@micromag/element-background": "^0.3.637",
-        "@micromag/element-button": "^0.3.637",
-        "@micromag/element-container": "^0.3.637",
-        "@micromag/element-footer": "^0.3.637",
-        "@micromag/element-header": "^0.3.637",
-        "@micromag/element-heading": "^0.3.637",
-        "@micromag/element-layout": "^0.3.637",
-        "@micromag/element-scroll": "^0.3.646",
-        "@micromag/element-text": "^0.3.637",
-        "@micromag/transforms": "^0.3.637",
+        "@micromag/core": "^0.3.651",
+        "@micromag/data": "^0.3.651",
+        "@micromag/element-background": "^0.3.651",
+        "@micromag/element-button": "^0.3.651",
+        "@micromag/element-container": "^0.3.651",
+        "@micromag/element-footer": "^0.3.651",
+        "@micromag/element-header": "^0.3.651",
+        "@micromag/element-heading": "^0.3.651",
+        "@micromag/element-layout": "^0.3.651",
+        "@micromag/element-scroll": "^0.3.651",
+        "@micromag/element-text": "^0.3.651",
+        "@micromag/element-text-input": "^0.3.651",
+        "@micromag/transforms": "^0.3.651",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -82,5 +83,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "e6fba3fbff05d9a7d4deb27687a042e19a766c7d"
+    "gitHead": "9639dccc046f7adfe9673f53ede77360b8b75d51"
 }