@micromag/screen-contribution 0.3.682 → 0.3.685

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-screen-contribution-container .micromag-screen-contribution-background,.micromag-screen-contribution-container .micromag-screen-contribution-inner{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-screen-contribution-container{position:relative}.micromag-screen-contribution-container .micromag-screen-contribution-background{z-index:0}.micromag-screen-contribution-container .micromag-screen-contribution-content{z-index:1}.micromag-screen-contribution-container .micromag-screen-contribution-header{left:0;position:relative;top:0;width:100%}@-webkit-keyframes micromag-screen-contribution-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes micromag-screen-contribution-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.micromag-screen-contribution-container .micromag-screen-contribution-emptyInputMessage,.micromag-screen-contribution-container .micromag-screen-contribution-emptyInputName,.micromag-screen-contribution-container .micromag-screen-contribution-emptySubmit,.micromag-screen-contribution-container .micromag-screen-contribution-emptyTitle{margin-bottom:10px;padding:10px}.micromag-screen-contribution-container .micromag-screen-contribution-emptyInputMessage{height:100px}.micromag-screen-contribution-container .micromag-screen-contribution-title{padding-bottom:20px}.micromag-screen-contribution-container .micromag-screen-contribution-interactiveContainer{-webkit-transition-property:height;transition-property:height;-webkit-transition-timing-function:ease;transition-timing-function:ease}.micromag-screen-contribution-container .micromag-screen-contribution-form{position:relative}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit,.micromag-screen-contribution-container .micromag-screen-contribution-inputMessage,.micromag-screen-contribution-container .micromag-screen-contribution-inputName{display:block;padding:4px;width:100%}.micromag-screen-contribution-container .micromag-screen-contribution-inputMessage,.micromag-screen-contribution-container .micromag-screen-contribution-inputName{margin-bottom:10px}.micromag-screen-contribution-container .micromag-screen-contribution-inputMessage{height:100px}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit{border:0}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit:disabled{opacity:1}.micromag-screen-contribution-container .micromag-screen-contribution-formContent{-webkit-transition-property:opacity;transition-property:opacity;-webkit-transition-timing-function:ease;transition-timing-function:ease}.micromag-screen-contribution-container .micromag-screen-contribution-formLoading{-webkit-animation:micromag-screen-contribution-rotate 1s linear infinite;animation:micromag-screen-contribution-rotate 1s linear infinite;height:40px;left:50%;margin-left:-20px;margin-top:-20px;opacity:0;pointer-events:none;position:absolute;top:50%;-webkit-transition:opacity .25s ease;transition:opacity .25s ease;width:40px}.micromag-screen-contribution-container .micromag-screen-contribution-formLoading .micromag-screen-contribution-loadingIcon{display:block;height:100%;width:100%}.micromag-screen-contribution-container .micromag-screen-contribution-contributionsContainer{opacity:0;position:relative;-webkit-transition:opacity .25s ease;transition:opacity .25s ease}.micromag-screen-contribution-container .micromag-screen-contribution-contributionsContent{height:0;overflow:hidden;position:absolute;width:100%}.micromag-screen-contribution-container .micromag-screen-contribution-contributions{position:relative}.micromag-screen-contribution-container .micromag-screen-contribution-contribution{border-bottom:1px solid #fff;margin-bottom:20px;padding-bottom:20px}.micromag-screen-contribution-container .micromag-screen-contribution-contribution:first-child{border-top:1px solid #fff;padding-top:20px}.micromag-screen-contribution-container .micromag-screen-contribution-contribution:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}.micromag-screen-contribution-container .micromag-screen-contribution-footer{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-contribution-container .micromag-screen-contribution-footer.micromag-screen-contribution-disabled{opacity:0;pointer-events:none}.micromag-screen-contribution-container.micromag-screen-contribution-submitting .micromag-screen-contribution-form{pointer-events:none}.micromag-screen-contribution-container.micromag-screen-contribution-submitting .micromag-screen-contribution-formContent{opacity:.4}.micromag-screen-contribution-container.micromag-screen-contribution-submitting .micromag-screen-contribution-formLoading{opacity:1}.micromag-screen-contribution-container.micromag-screen-contribution-submitted .micromag-screen-contribution-formContent{opacity:0}.micromag-screen-contribution-container.micromag-screen-contribution-showContributions .micromag-screen-contribution-form{display:none}.micromag-screen-contribution-container.micromag-screen-contribution-showContributions .micromag-screen-contribution-contributionsContainer{opacity:1}.micromag-screen-contribution-container.micromag-screen-contribution-showContributions .micromag-screen-contribution-contributionsContent{height:auto;overflow:visible;position:relative}.micromag-screen-contribution-container.micromag-screen-contribution-isPlaceholder .micromag-screen-contribution-inner{padding:10px}
+.micromag-screen-contribution-container .micromag-screen-contribution-background,.micromag-screen-contribution-container .micromag-screen-contribution-inner{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSkip:focus-visible,.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-screen-contribution-container{position:relative}.micromag-screen-contribution-container .micromag-screen-contribution-background{z-index:0}.micromag-screen-contribution-container .micromag-screen-contribution-content{z-index:1}.micromag-screen-contribution-container .micromag-screen-contribution-layout{position:relative}.micromag-screen-contribution-container .micromag-screen-contribution-scrollee{min-height:100%}.micromag-screen-contribution-container .micromag-screen-contribution-header{left:0;position:relative;top:0;width:100%}@-webkit-keyframes micromag-screen-contribution-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes micromag-screen-contribution-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.micromag-screen-contribution-container .micromag-screen-contribution-emptyInputMessage,.micromag-screen-contribution-container .micromag-screen-contribution-emptyInputName,.micromag-screen-contribution-container .micromag-screen-contribution-emptySkip,.micromag-screen-contribution-container .micromag-screen-contribution-emptySubmit,.micromag-screen-contribution-container .micromag-screen-contribution-emptyTitle{margin-bottom:10px;padding:10px}.micromag-screen-contribution-container .micromag-screen-contribution-emptyInputMessage{height:100px}.micromag-screen-contribution-container .micromag-screen-contribution-title{padding-bottom:20px}.micromag-screen-contribution-container .micromag-screen-contribution-interactiveContainer{-webkit-transition-property:height;transition-property:height;-webkit-transition-timing-function:ease;transition-timing-function:ease}.micromag-screen-contribution-container .micromag-screen-contribution-form{position:relative}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSkip,.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit,.micromag-screen-contribution-container .micromag-screen-contribution-inputMessage,.micromag-screen-contribution-container .micromag-screen-contribution-inputName{display:block;padding:4px;width:100%}.micromag-screen-contribution-container .micromag-screen-contribution-inputMessage,.micromag-screen-contribution-container .micromag-screen-contribution-inputName{margin-bottom:10px}.micromag-screen-contribution-container .micromag-screen-contribution-inputMessage{height:100px}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit{border:0}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit:disabled{opacity:1}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSkip{border:0;margin-top:20px}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSkip.micromag-screen-contribution-showBack{margin-bottom:20px;margin-top:0}.micromag-screen-contribution-container .micromag-screen-contribution-formContent{-webkit-transition-property:opacity;transition-property:opacity;-webkit-transition-timing-function:ease;transition-timing-function:ease}.micromag-screen-contribution-container .micromag-screen-contribution-formLoading{-webkit-animation:micromag-screen-contribution-rotate 1s linear infinite;animation:micromag-screen-contribution-rotate 1s linear infinite;height:40px;left:50%;margin-left:-20px;margin-top:-20px;opacity:0;pointer-events:none;position:absolute;top:50%;-webkit-transition:opacity .25s ease;transition:opacity .25s ease;width:40px}.micromag-screen-contribution-container .micromag-screen-contribution-formLoading .micromag-screen-contribution-loadingIcon{display:block;height:100%;width:100%}.micromag-screen-contribution-container .micromag-screen-contribution-contributionsContainer{opacity:0;position:relative;-webkit-transition:opacity .25s ease;transition:opacity .25s ease}.micromag-screen-contribution-container .micromag-screen-contribution-contributionsContent{height:0;overflow:hidden;position:absolute;width:100%}.micromag-screen-contribution-container .micromag-screen-contribution-contributions{position:relative}.micromag-screen-contribution-container .micromag-screen-contribution-contribution{border-bottom:1px solid #fff;margin-bottom:20px;padding-bottom:20px}.micromag-screen-contribution-container .micromag-screen-contribution-contribution:first-child{border-top:1px solid #fff;padding-top:20px}.micromag-screen-contribution-container .micromag-screen-contribution-contribution:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}.micromag-screen-contribution-container .micromag-screen-contribution-footer{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-contribution-container .micromag-screen-contribution-footer.micromag-screen-contribution-disabled{opacity:0;pointer-events:none}.micromag-screen-contribution-container.micromag-screen-contribution-submitting .micromag-screen-contribution-form{pointer-events:none}.micromag-screen-contribution-container.micromag-screen-contribution-submitting .micromag-screen-contribution-formContent{opacity:.4}.micromag-screen-contribution-container.micromag-screen-contribution-submitting .micromag-screen-contribution-formLoading{opacity:1}.micromag-screen-contribution-container.micromag-screen-contribution-submitted .micromag-screen-contribution-formContent{opacity:0}.micromag-screen-contribution-container.micromag-screen-contribution-showContributions .micromag-screen-contribution-form{display:none}.micromag-screen-contribution-container.micromag-screen-contribution-showContributions .micromag-screen-contribution-contributionsContainer{opacity:1}.micromag-screen-contribution-container.micromag-screen-contribution-showContributions .micromag-screen-contribution-contributionsContent{height:auto;overflow:visible;position:relative}.micromag-screen-contribution-container.micromag-screen-contribution-isPlaceholder .micromag-screen-contribution-inner{padding:10px}.micromag-screen-contribution-reset{background-color:transparent;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-contribution-reset:hover{border:0;opacity:.8}.micromag-screen-contribution-reset:hover:active{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}

package/es/index.js

@@ -1,7 +1,9 @@
-import { FormattedMessage, defineMessage } from 'react-intl';
+import { useIntl, FormattedMessage, defineMessage } from 'react-intl';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { faRedo } from '@fortawesome/free-solid-svg-icons/faRedo';
 import { faSpinner } from '@fortawesome/free-solid-svg-icons/faSpinner';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
@@ -19,11 +21,12 @@ import Container from '@micromag/element-container';
 import Footer from '@micromag/element-footer';
 import Header from '@micromag/element-header';
 import Heading from '@micromag/element-heading';
+import Layout 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-contribution-container","inner":"micromag-screen-contribution-inner","background":"micromag-screen-contribution-background","buttonSubmit":"micromag-screen-contribution-buttonSubmit","content":"micromag-screen-contribution-content","header":"micromag-screen-contribution-header","emptyTitle":"micromag-screen-contribution-emptyTitle","emptyInputName":"micromag-screen-contribution-emptyInputName","emptyInputMessage":"micromag-screen-contribution-emptyInputMessage","emptySubmit":"micromag-screen-contribution-emptySubmit","title":"micromag-screen-contribution-title","interactiveContainer":"micromag-screen-contribution-interactiveContainer","form":"micromag-screen-contribution-form","inputName":"micromag-screen-contribution-inputName","inputMessage":"micromag-screen-contribution-inputMessage","formContent":"micromag-screen-contribution-formContent","formLoading":"micromag-screen-contribution-formLoading","loadingIcon":"micromag-screen-contribution-loadingIcon","contributionsContainer":"micromag-screen-contribution-contributionsContainer","contributionsContent":"micromag-screen-contribution-contributionsContent","contributions":"micromag-screen-contribution-contributions","contribution":"micromag-screen-contribution-contribution","footer":"micromag-screen-contribution-footer","disabled":"micromag-screen-contribution-disabled","submitting":"micromag-screen-contribution-submitting","submitted":"micromag-screen-contribution-submitted","showContributions":"micromag-screen-contribution-showContributions","isPlaceholder":"micromag-screen-contribution-isPlaceholder"};
+var styles = {"container":"micromag-screen-contribution-container","inner":"micromag-screen-contribution-inner","background":"micromag-screen-contribution-background","buttonSkip":"micromag-screen-contribution-buttonSkip","buttonSubmit":"micromag-screen-contribution-buttonSubmit","content":"micromag-screen-contribution-content","layout":"micromag-screen-contribution-layout","scrollee":"micromag-screen-contribution-scrollee","header":"micromag-screen-contribution-header","emptyTitle":"micromag-screen-contribution-emptyTitle","emptyInputName":"micromag-screen-contribution-emptyInputName","emptyInputMessage":"micromag-screen-contribution-emptyInputMessage","emptySubmit":"micromag-screen-contribution-emptySubmit","emptySkip":"micromag-screen-contribution-emptySkip","title":"micromag-screen-contribution-title","interactiveContainer":"micromag-screen-contribution-interactiveContainer","form":"micromag-screen-contribution-form","inputName":"micromag-screen-contribution-inputName","inputMessage":"micromag-screen-contribution-inputMessage","showBack":"micromag-screen-contribution-showBack","formContent":"micromag-screen-contribution-formContent","formLoading":"micromag-screen-contribution-formLoading","loadingIcon":"micromag-screen-contribution-loadingIcon","contributionsContainer":"micromag-screen-contribution-contributionsContainer","contributionsContent":"micromag-screen-contribution-contributionsContent","contributions":"micromag-screen-contribution-contributions","contribution":"micromag-screen-contribution-contribution","footer":"micromag-screen-contribution-footer","disabled":"micromag-screen-contribution-disabled","submitting":"micromag-screen-contribution-submitting","submitted":"micromag-screen-contribution-submitted","showContributions":"micromag-screen-contribution-showContributions","isPlaceholder":"micromag-screen-contribution-isPlaceholder","reset":"micromag-screen-contribution-reset"};
 
 var propTypes = {
   id: PropTypes.string,
@@ -34,6 +37,11 @@ var propTypes = {
   submit: PropTypes$1.textElement,
   nameStyle: PropTypes$1.textStyle,
   messageStyle: PropTypes$1.textStyle,
+  settings: PropTypes.shape({
+    canViewAnswers: PropTypes.bool,
+    answerButton: PropTypes$1.buttonElement,
+    contributionButton: PropTypes$1.buttonElement
+  }),
   spacing: PropTypes.number,
   background: PropTypes$1.backgroundElement,
   header: PropTypes$1.header,
@@ -55,6 +63,7 @@ var defaultProps = {
   submit: null,
   nameStyle: null,
   messageStyle: null,
+  settings: null,
   spacing: 20,
   background: null,
   header: null,
@@ -76,6 +85,7 @@ var ContributionScreen = function ContributionScreen(_ref) {
     submit = _ref.submit,
     nameStyle = _ref.nameStyle,
     messageStyle = _ref.messageStyle,
+    settings = _ref.settings,
     spacing = _ref.spacing,
     background = _ref.background,
     header = _ref.header,
@@ -87,6 +97,7 @@ var ContributionScreen = function ContributionScreen(_ref) {
     resizeTransitionDuration = _ref.resizeTransitionDuration,
     type = _ref.type,
     className = _ref.className;
+  var intl = useIntl();
   var screenId = id || 'screen-id';
   var trackScreenEvent = useTrackScreenEvent(type);
   var _useScreenSize = useScreenSize(),
@@ -146,10 +157,38 @@ var ContributionScreen = function ContributionScreen(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     submitState = _useState8[0],
     setSubmitState = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    hasSubmitted = _useState10[0],
+    setHasSubmitted = _useState10[1];
+  var _ref2 = settings || {},
+    _ref2$canViewAnswers = _ref2.canViewAnswers,
+    canViewAnswers = _ref2$canViewAnswers === void 0 ? false : _ref2$canViewAnswers,
+    _ref2$skipButton = _ref2.skipButton,
+    skipButton = _ref2$skipButton === void 0 ? null : _ref2$skipButton,
+    _ref2$backButton = _ref2.backButton,
+    backButton = _ref2$backButton === void 0 ? null : _ref2$backButton;
+  var answersButton = submitState === 4 ? backButton : skipButton;
+  var finalAnswersButton = isTextFilled(answersButton) ? answersButton : _objectSpread(_objectSpread({}, answersButton), {}, {
+    body: submitState === 4 ? intl.formatMessage({
+      id: "8NyYTH",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Back"
+      }]
+    }) : intl.formatMessage({
+      id: "HpkW4J",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Skip"
+      }]
+    })
+  });
   var onContributionSubmitted = useCallback(function () {
     setSubmitState(2);
     trackScreenEvent('submit_success', "".concat(userName, ": ").concat(userMessage));
-  }, [setSubmitState, trackScreenEvent, userName, userMessage]);
+    setHasSubmitted(true);
+  }, [setSubmitState, setHasSubmitted, trackScreenEvent, userName, userMessage]);
   var _useContributionCreat = useContributionCreate({
       screenId: screenId
     }),
@@ -167,6 +206,12 @@ var ContributionScreen = function ContributionScreen(_ref) {
   var onMessageChange = useCallback(function (e) {
     setUserMessage(e.currentTarget.value);
   }, [setUserMessage]);
+  var onContributionReset = useCallback(function () {
+    setUserName('');
+    setUserMessage('');
+    setSubmitState(0);
+    setHasSubmitted(false);
+  }, [setUserName, setUserMessage, setSubmitState, setHasSubmitted]);
   var nameFilled = useRef(false);
   var onNameBlur = useCallback(function (e) {
     if (!nameFilled.current && e.currentTarget.value.length > 0) {
@@ -189,17 +234,17 @@ var ContributionScreen = function ContributionScreen(_ref) {
   }, [trackScreenEvent, userName]);
 
   // Call to Action
-  var _useState9 = useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    scrolledBottom = _useState10[0],
-    setScrolledBottom = _useState10[1];
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    scrolledBottom = _useState12[0],
+    setScrolledBottom = _useState12[1];
   var swipeUpLinkActive = scrolledBottom && submitState === 4;
   var _useDimensionObserver = useDimensionObserver(),
     footerRef = _useDimensionObserver.ref,
     _useDimensionObserver2 = _useDimensionObserver.height,
     callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
-  var onScrolledBottom = useCallback(function (_ref2) {
-    var initial = _ref2.initial;
+  var onScrolledBottom = useCallback(function (_ref3) {
+    var initial = _ref3.initial;
     if (initial) {
       trackScreenEvent('scroll', 'Contributions list');
     }
@@ -224,6 +269,15 @@ var ContributionScreen = function ContributionScreen(_ref) {
       });
     }
   }, [submitState, setSubmitState, userName, userMessage, trackScreenEvent, onContributionSubmitted]);
+  var onClickSkip = useCallback(function () {
+    if (submitState === 4) {
+      setSubmitState(0);
+      trackScreenEvent('click_skip', 'Skip button');
+    } else {
+      setSubmitState(4);
+      trackScreenEvent('click_back', 'Back button');
+    }
+  }, [submitState, setSubmitState, trackScreenEvent]);
   useEffect(function () {
     var timeout = null;
     if (submitState === 2) {
@@ -258,7 +312,7 @@ var ContributionScreen = function ContributionScreen(_ref) {
   }, hasTitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({}, title, {
     className: styles.title
   })) : null)];
-  var allContributions = [].concat(_toConsumableArray(userName !== null && userMessage !== null ? [{
+  var allContributions = [].concat(_toConsumableArray(userName !== null && userName !== '' && userMessage !== null && userMessage !== '' ? [{
     name: userName,
     message: userMessage
   }] : []), _toConsumableArray(contributions || []));
@@ -372,7 +426,37 @@ var ContributionScreen = function ContributionScreen(_ref) {
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     className: styles.loadingIcon,
     icon: faSpinner
-  }))), /*#__PURE__*/React.createElement("div", {
+  }))), canViewAnswers && !hasSubmitted ? /*#__PURE__*/React.createElement(ScreenElement, {
+    placeholder: "button",
+    emptyLabel: submitState !== 4 ? /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "U2RZp5",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Skip"
+      }]
+    }) : /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "AzN1aW",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Back"
+      }]
+    }),
+    emptyClassName: styles.emptySkip
+  }, /*#__PURE__*/React.createElement(Transitions, {
+    transitions: transitions,
+    playing: transitionPlaying,
+    delay: transitionStagger * 3,
+    disabled: transitionDisabled
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    className: classNames([styles.buttonSkip, _defineProperty({}, styles.showBack, submitState === 4)]),
+    disabled: isPreview,
+    onClick: onClickSkip,
+    buttonStyle: finalAnswersButton !== null ? finalAnswersButton.buttonStyle : null,
+    focusable: current && isView
+  }, /*#__PURE__*/React.createElement(Text, Object.assign({}, finalAnswersButton, {
+    inline: true
+  }))))) : null, /*#__PURE__*/React.createElement("div", {
     className: styles.contributionsContainer,
     "aria-hidden": submitState === 4 ? null : 'true'
   }, /*#__PURE__*/React.createElement("div", {
@@ -408,7 +492,7 @@ var ContributionScreen = function ContributionScreen(_ref) {
       paddingBottom: spacing
     }
   }, /*#__PURE__*/React.createElement(Header, header)) : null;
-  var headerInScroll = submitState >= 4;
+  var showReset = isEdit && submitState === 4;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.isPlaceholder, isPlaceholder), styles.submitting, submitState === 1), styles.submitted, submitState > 1), styles.showContributions, submitState === 4)]),
     "data-screen-ready": true
@@ -416,21 +500,30 @@ var ContributionScreen = function ContributionScreen(_ref) {
     width: width,
     height: height,
     className: styles.content
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.inner,
-    style: !isPlaceholder ? {
-      paddingLeft: spacing,
-      paddingRight: spacing,
-      paddingTop: (!isPreview ? viewerTopHeight : 0) + (hasHeader ? spacing / 2 : spacing),
-      paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing
-    } : null
-  }, !headerInScroll ? headerElement : null, /*#__PURE__*/React.createElement(Scroll, {
+  }, showReset ? /*#__PURE__*/React.createElement(Button, {
+    className: styles.reset,
+    icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: faRedo,
+      size: "md"
+    }),
+    onClick: onContributionReset
+  }) : null, /*#__PURE__*/React.createElement("div", {
+    className: styles.inner
+  }, /*#__PURE__*/React.createElement(Scroll, {
     verticalAlign: layout,
     disabled: scrollingDisabled,
     onScrolledBottom: onScrolledBottom,
     onScrolledNotBottom: onScrolledNotBottom,
+    scrolleeClassName: styles.scrollee,
     withShadow: true
-  }, headerInScroll ? headerElement : null, items), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Layout, {
+    className: styles.layout,
+    style: !isPlaceholder ? {
+      padding: spacing,
+      paddingTop: hasHeader ? spacing / 2 + (!isPreview ? viewerTopHeight : 0) : spacing / 2,
+      paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing / 2
+    } : null
+  }, headerElement, items)), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
     ref: footerRef,
     className: classNames([styles.footer, _defineProperty({}, styles.disabled, !swipeUpLinkActive)]),
     style: {
@@ -570,6 +663,56 @@ var definition = {
         "value": "Published message style"
       }]
     })
+  }, {
+    name: 'settings',
+    component: 'toggle-section',
+    toggleField: 'canViewAnswers',
+    isList: true,
+    label: defineMessage({
+      id: "9omJnT",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Answer settings"
+      }]
+    }),
+    fields: [{
+      name: 'canViewAnswers',
+      type: 'toggle',
+      isHorizontal: true,
+      label: defineMessage({
+        id: "xcHW4o",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Can view answers"
+        }]
+      })
+    }, {
+      name: 'skipButton',
+      type: 'button-element',
+      theme: {
+        textStyle: 'button'
+      },
+      label: defineMessage({
+        id: "CpCykm",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Skip button"
+        }]
+      })
+    }, {
+      name: 'backButton',
+      type: 'button-element',
+      theme: {
+        textStyle: 'button'
+      },
+      label: defineMessage({
+        id: "KIXg9M",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Back button"
+        }]
+      })
+    }]
   }, {
     name: 'background',
     type: 'background',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-contribution",
-    "version": "0.3.682",
+    "version": "0.3.685",
     "private": false,
     "description": "",
     "keywords": [
@@ -71,10 +71,11 @@
         "@micromag/element-footer": "^0.3.679",
         "@micromag/element-header": "^0.3.679",
         "@micromag/element-heading": "^0.3.679",
+        "@micromag/element-layout": "^0.3.679",
         "@micromag/element-scroll": "^0.3.679",
         "@micromag/element-share-incentive": "^0.3.679",
         "@micromag/element-text": "^0.3.679",
-        "@micromag/element-text-input": "^0.3.679",
+        "@micromag/element-text-input": "^0.3.683",
         "@micromag/transforms": "^0.3.679",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
@@ -86,5 +87,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "ff77a57d44913b0e5afa373445ae9f014799e183"
+    "gitHead": "3e74f8b63cad090ee472a21a8bd04f0ec03e44cb"
 }