@micromag/screen-contribution 0.3.683 → 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-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)}
+.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

@@ -21,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","reset":"micromag-screen-contribution-reset"};
+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,
@@ -156,6 +157,10 @@ 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,
@@ -182,7 +187,8 @@ var ContributionScreen = function ContributionScreen(_ref) {
   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
     }),
@@ -204,7 +210,8 @@ var ContributionScreen = function ContributionScreen(_ref) {
     setUserName('');
     setUserMessage('');
     setSubmitState(0);
-  }, [setUserName, setUserMessage, setSubmitState]);
+    setHasSubmitted(false);
+  }, [setUserName, setUserMessage, setSubmitState, setHasSubmitted]);
   var nameFilled = useRef(false);
   var onNameBlur = useCallback(function (e) {
     if (!nameFilled.current && e.currentTarget.value.length > 0) {
@@ -227,10 +234,10 @@ 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,
@@ -419,16 +426,22 @@ var ContributionScreen = function ContributionScreen(_ref) {
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     className: styles.loadingIcon,
     icon: faSpinner
-  }))), canViewAnswers ? /*#__PURE__*/React.createElement(ScreenElement, {
+  }))), canViewAnswers && !hasSubmitted ? /*#__PURE__*/React.createElement(ScreenElement, {
     placeholder: "button",
-    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "DoFRL4",
+    emptyLabel: submitState !== 4 ? /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "U2RZp5",
       defaultMessage: [{
         "type": 0,
-        "value": "Skip button"
+        "value": "Skip"
+      }]
+    }) : /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "AzN1aW",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Back"
       }]
     }),
-    emptyClassName: styles.emptySubmit
+    emptyClassName: styles.emptySkip
   }, /*#__PURE__*/React.createElement(Transitions, {
     transitions: transitions,
     playing: transitionPlaying,
@@ -436,7 +449,7 @@ var ContributionScreen = function ContributionScreen(_ref) {
     disabled: transitionDisabled
   }, /*#__PURE__*/React.createElement(Button, {
     type: "button",
-    className: styles.buttonSubmit,
+    className: classNames([styles.buttonSkip, _defineProperty({}, styles.showBack, submitState === 4)]),
     disabled: isPreview,
     onClick: onClickSkip,
     buttonStyle: finalAnswersButton !== null ? finalAnswersButton.buttonStyle : null,
@@ -479,7 +492,6 @@ 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)]),
@@ -496,20 +508,22 @@ var ContributionScreen = function ContributionScreen(_ref) {
     }),
     onClick: onContributionReset
   }) : null, /*#__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, {
+    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: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-contribution",
-    "version": "0.3.683",
+    "version": "0.3.685",
     "private": false,
     "description": "",
     "keywords": [
@@ -71,6 +71,7 @@
         "@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",
@@ -86,5 +87,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "758c665c2a62aba2e46bde9d80903232bfefd6dd"
+    "gitHead": "3e74f8b63cad090ee472a21a8bd04f0ec03e44cb"
 }