@micromag/screen-urbania-recommendation 0.3.103 → 0.3.107

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-screen-urbania-recommendation-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-urbania-recommendation-disabled.micromag-screen-urbania-recommendation-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-recommendation-hidden.micromag-screen-urbania-recommendation-container{display:none;visibility:hidden}.micromag-screen-urbania-recommendation-placeholder.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-content{position:relative;padding:6px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyTitle{margin:5px auto;border:2px dashed #343434;color:#343434;width:100%;margin:10px auto}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyTitle{height:100px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText{height:50px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border:2px solid #000;border-radius:17px;-webkit-box-shadow:0 3px 34px rgba(0,0,0,.43);box-shadow:0 3px 34px rgba(0,0,0,.43);color:#000;text-align:center}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-isPlaceholder{height:200px;background-color:#adadad}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-appear{-webkit-animation:micromag-screen-urbania-recommendation-appear 2s ease-in-out;animation:micromag-screen-urbania-recommendation-appear 2s ease-in-out}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-category{padding:12px 10px 6px;border-bottom:2px solid #000;background-color:#ff4f46;color:#fff;font-family:Agrandir Tight,sans-serif;font-size:28px;font-weight:900;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-category.micromag-screen-urbania-recommendation-noBottomBorder{border-bottom:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-categoryPlaceholder{padding:10px;background-color:#343434}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateTitleRow{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:100%;background-color:#fff}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateTitleRow.micromag-screen-urbania-recommendation-bottomBorder{border-bottom:2px solid #000}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateTitleRow.micromag-screen-urbania-recommendation-isPlaceholder{margin-left:2px;padding:10px;background-color:#e9e9e9}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateContainer{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;min-width:30%;max-width:50%;height:inherit;padding:15px 10px;text-align:center;overflow-wrap:break-word}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateContainer.micromag-screen-urbania-recommendation-rightBorder{border-right:2px solid #000}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateContainer strong{white-space:nowrap}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date{color:#ff4f46;font-family:Agrandir,sans-serif;font-size:12px;line-height:1}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date.micromag-screen-urbania-recommendation-centerDate{text-align:center}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-titleContainer{min-width:50%;max-width:70%;overflow-wrap:break-word}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-titleContainer.micromag-screen-urbania-recommendation-leftBorder{margin-right:-2px;margin-left:-2px;border-left:2px solid #000}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-title{padding:15px 20px 11px;font-family:Agrandir Narrow,sans-serif;font-size:20px;font-weight:700;text-align:center}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-title{line-height:1;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor{padding:5px 10px 3px;background-color:#fffc00;font-family:Agrandir,sans-serif;font-size:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor>p{margin-top:0;margin-bottom:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor.micromag-screen-urbania-recommendation-bottomBorder{border-bottom:2px solid #000}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsorPlaceholder{padding:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description{padding:10px;background-color:#fff;font-family:Roboto,sans-serif;font-size:12px;text-align:left}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description p{margin-bottom:1em}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description p:last-child{margin-bottom:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-descriptionPlaceholder{padding:10px 10px 30px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-background{-webkit-animation:micromag-screen-urbania-recommendation-roll 3s ease-out;animation:micromag-screen-urbania-recommendation-roll 3s ease-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.micromag-screen-urbania-recommendation-container.micromag-screen-urbania-recommendation-isPlaceholder .micromag-screen-urbania-recommendation-layout{padding:10px}@-webkit-keyframes micromag-screen-urbania-recommendation-roll{0%{background-position-y:0}to{background-position-y:9000px}}@keyframes micromag-screen-urbania-recommendation-roll{0%{background-position-y:0}to{background-position-y:9000px}}@-webkit-keyframes micromag-screen-urbania-recommendation-appear{0%{opacity:0}66%{opacity:0}to{opacity:1}}@keyframes micromag-screen-urbania-recommendation-appear{0%{opacity:0}66%{opacity:0}to{opacity:1}}
+.micromag-screen-urbania-recommendation-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-urbania-recommendation-disabled.micromag-screen-urbania-recommendation-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-recommendation-hidden.micromag-screen-urbania-recommendation-container{display:none;visibility:hidden}.micromag-screen-urbania-recommendation-placeholder.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-content{position:relative;padding:6px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyTitle{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-urbania-recommendation-container{-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyTitle{width:100%;margin:10px auto}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyTitle{height:100px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText{height:50px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border:2px solid #000;border-radius:17px;-webkit-box-shadow:0 3px 34px rgba(0,0,0,.43);box-shadow:0 3px 34px rgba(0,0,0,.43);color:#000;text-align:center}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-isPlaceholder{height:200px;background-color:#adadad}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-appear{-webkit-animation:micromag-screen-urbania-recommendation-appear 2s ease-in-out;animation:micromag-screen-urbania-recommendation-appear 2s ease-in-out}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-category{padding:12px 10px 6px;border-bottom:2px solid #000;background-color:#ff4f46;color:#fff;font-family:Agrandir Tight,sans-serif;font-size:28px;font-weight:900;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-category.micromag-screen-urbania-recommendation-noBottomBorder{border-bottom:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-categoryPlaceholder{padding:10px;background-color:#343434}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateTitleRow{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:100%;background-color:#fff}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateTitleRow.micromag-screen-urbania-recommendation-bottomBorder{border-bottom:2px solid #000}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateTitleRow.micromag-screen-urbania-recommendation-isPlaceholder{margin-left:2px;padding:10px;background-color:#e9e9e9}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateContainer{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;min-width:30%;max-width:50%;height:inherit;padding:15px 10px;text-align:center;overflow-wrap:break-word}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateContainer.micromag-screen-urbania-recommendation-rightBorder{border-right:2px solid #000}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateContainer strong{white-space:nowrap}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date{color:#ff4f46;font-family:Agrandir,sans-serif;font-size:12px;line-height:1}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date.micromag-screen-urbania-recommendation-centerDate{text-align:center}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-titleContainer{min-width:50%;max-width:70%;overflow-wrap:break-word}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-titleContainer.micromag-screen-urbania-recommendation-leftBorder{margin-right:-2px;margin-left:-2px;border-left:2px solid #000}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-title{padding:15px 20px 11px;font-family:Agrandir Narrow,sans-serif;font-size:20px;font-weight:700;text-align:center}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-title{line-height:1;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor{padding:5px 10px 3px;background-color:#fffc00;font-family:Agrandir,sans-serif;font-size:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor>p{margin-top:0;margin-bottom:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor.micromag-screen-urbania-recommendation-bottomBorder{border-bottom:2px solid #000}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsorPlaceholder{padding:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description{padding:10px;background-color:#fff;font-family:Roboto,sans-serif;font-size:12px;text-align:left}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description p{margin-bottom:1em}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description p:last-child{margin-bottom:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-descriptionPlaceholder{padding:10px 10px 30px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-background{-webkit-animation:micromag-screen-urbania-recommendation-roll 3s ease-out;animation:micromag-screen-urbania-recommendation-roll 3s ease-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.micromag-screen-urbania-recommendation-container.micromag-screen-urbania-recommendation-isPlaceholder .micromag-screen-urbania-recommendation-layout{padding:10px}@-webkit-keyframes micromag-screen-urbania-recommendation-roll{0%{background-position-y:0}to{background-position-y:9000px}}@keyframes micromag-screen-urbania-recommendation-roll{0%{background-position-y:0}to{background-position-y:9000px}}@-webkit-keyframes micromag-screen-urbania-recommendation-appear{0%{opacity:0}66%{opacity:0}to{opacity:1}}@keyframes micromag-screen-urbania-recommendation-appear{0%{opacity:0}66%{opacity:0}to{opacity:1}}

package/es/index.js

@@ -4,7 +4,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import classNames from 'classnames';
 import PropTypes$1 from 'prop-types';
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { PropTypes } from '@micromag/core';
 import { ScreenElement, PlaceholderTitle, PlaceholderText, TransitionsStagger } from '@micromag/core/components';
 import { useScreenSize, useViewer, useScreenRenderContext } from '@micromag/core/contexts';
@@ -95,6 +95,13 @@ var Recommendation = function Recommendation(_ref) {
       isStatic = _useScreenRenderConte.isStatic,
       isCapture = _useScreenRenderConte.isCapture;
 
+  var finalAnimateBackground = current && animateBackground && !isPlaceholder && !isStatic && !isPreview && !isEdit;
+
+  var _useState = useState(finalAnimateBackground),
+      _useState2 = _slicedToArray(_useState, 2),
+      animationStarted = _useState2[0],
+      setAnimationStarted = _useState2[1];
+
   var hasCategory = isTextFilled(category);
   var hasDate = isTextFilled(date);
   var hasTitle = isTextFilled(title);
@@ -103,22 +110,37 @@ var Recommendation = function Recommendation(_ref) {
   var onlyCategory = hasCategory && !hasDate && !hasTitle && !hasSponsor && !hasDescription;
   var hasTextCard = hasCategory || hasDate || hasTitle || hasSponsor || hasDescription;
   var backgroundPlaying = current && (isView || isEdit);
-  var backgroundShouldLoad = current || active || !isView;
-  var finalAnimateBackground = animateBackground && !isPlaceholder && !isStatic && !isPreview && !isEdit;
+  var backgroundShouldLoad = current || active;
   var transitionPlaying = current;
   var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
   var scrollingDisabled = !isEdit && transitionDisabled || !current;
-  var scrollTimein = setTimeout(function () {
-    return true;
-  }, 3000);
-  var finalScrollTimein = finalAnimateBackground && scrollTimein;
   var hasCallToAction = callToAction !== null && callToAction.active === true;
 
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      scrolledBottom = _useState2[0],
-      setScrolledBottom = _useState2[1];
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      scrolledBottom = _useState4[0],
+      setScrolledBottom = _useState4[1];
 
+  useEffect(function () {
+    var id = null;
+
+    if (animationStarted) {
+      id = setTimeout(function () {
+        setAnimationStarted(false);
+      }, 3000);
+    }
+
+    return function () {
+      clearTimeout(id);
+    };
+  }, [animationStarted, finalAnimateBackground, setAnimationStarted]);
+  useEffect(function () {
+    if (!isView) {
+      setAnimationStarted(false);
+    } else {
+      setAnimationStarted(true);
+    }
+  }, [isView, setAnimationStarted]);
   var onScrolledBottom = useCallback(function (_ref2) {
     var initial = _ref2.initial;
 
@@ -263,10 +285,10 @@ var Recommendation = function Recommendation(_ref) {
     width: width,
     height: height
   }, /*#__PURE__*/React.createElement(Scroll, {
-    disabled: finalScrollTimein && scrollingDisabled,
+    disabled: animationStarted || scrollingDisabled,
     onScrolledBottom: onScrolledBottom,
     onScrolledNotBottom: onScrolledNotBottom,
-    verticalAlign: "middle"
+    verticalAlign: "top"
   }, /*#__PURE__*/React.createElement(Layout, {
     className: styles.layout,
     style: !isPlaceholder ? {

package/lib/index.js

@@ -115,6 +115,13 @@ var Recommendation = function Recommendation(_ref) {
       isStatic = _useScreenRenderConte.isStatic,
       isCapture = _useScreenRenderConte.isCapture;
 
+  var finalAnimateBackground = current && animateBackground && !isPlaceholder && !isStatic && !isPreview && !isEdit;
+
+  var _useState = React.useState(finalAnimateBackground),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      animationStarted = _useState2[0],
+      setAnimationStarted = _useState2[1];
+
   var hasCategory = utils.isTextFilled(category);
   var hasDate = utils.isTextFilled(date);
   var hasTitle = utils.isTextFilled(title);
@@ -123,22 +130,37 @@ var Recommendation = function Recommendation(_ref) {
   var onlyCategory = hasCategory && !hasDate && !hasTitle && !hasSponsor && !hasDescription;
   var hasTextCard = hasCategory || hasDate || hasTitle || hasSponsor || hasDescription;
   var backgroundPlaying = current && (isView || isEdit);
-  var backgroundShouldLoad = current || active || !isView;
-  var finalAnimateBackground = animateBackground && !isPlaceholder && !isStatic && !isPreview && !isEdit;
+  var backgroundShouldLoad = current || active;
   var transitionPlaying = current;
   var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
   var scrollingDisabled = !isEdit && transitionDisabled || !current;
-  var scrollTimein = setTimeout(function () {
-    return true;
-  }, 3000);
-  var finalScrollTimein = finalAnimateBackground && scrollTimein;
   var hasCallToAction = callToAction !== null && callToAction.active === true;
 
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      scrolledBottom = _useState2[0],
-      setScrolledBottom = _useState2[1];
+  var _useState3 = React.useState(false),
+      _useState4 = _slicedToArray__default["default"](_useState3, 2),
+      scrolledBottom = _useState4[0],
+      setScrolledBottom = _useState4[1];
 
+  React.useEffect(function () {
+    var id = null;
+
+    if (animationStarted) {
+      id = setTimeout(function () {
+        setAnimationStarted(false);
+      }, 3000);
+    }
+
+    return function () {
+      clearTimeout(id);
+    };
+  }, [animationStarted, finalAnimateBackground, setAnimationStarted]);
+  React.useEffect(function () {
+    if (!isView) {
+      setAnimationStarted(false);
+    } else {
+      setAnimationStarted(true);
+    }
+  }, [isView, setAnimationStarted]);
   var onScrolledBottom = React.useCallback(function (_ref2) {
     var initial = _ref2.initial;
 
@@ -283,10 +305,10 @@ var Recommendation = function Recommendation(_ref) {
     width: width,
     height: height
   }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
-    disabled: finalScrollTimein && scrollingDisabled,
+    disabled: animationStarted || scrollingDisabled,
     onScrolledBottom: onScrolledBottom,
     onScrolledNotBottom: onScrolledNotBottom,
-    verticalAlign: "middle"
+    verticalAlign: "top"
   }, /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
     className: styles.layout,
     style: !isPlaceholder ? {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-urbania-recommendation",
-    "version": "0.3.103",
+    "version": "0.3.107",
     "description": "",
     "keywords": [
         "javascript"
@@ -40,24 +40,24 @@
         "prepare": "../../scripts/prepare-package.sh"
     },
     "devDependencies": {
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
     },
     "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.91",
-        "@micromag/element-background": "^0.3.91",
-        "@micromag/element-call-to-action": "^0.3.103",
-        "@micromag/element-container": "^0.3.91",
-        "@micromag/element-heading": "^0.3.91",
-        "@micromag/element-layout": "^0.3.91",
-        "@micromag/element-scroll": "^0.3.91",
-        "@micromag/element-text": "^0.3.91",
-        "@micromag/transforms": "^0.3.91",
+        "@micromag/core": "^0.3.107",
+        "@micromag/element-background": "^0.3.107",
+        "@micromag/element-call-to-action": "^0.3.107",
+        "@micromag/element-container": "^0.3.107",
+        "@micromag/element-heading": "^0.3.107",
+        "@micromag/element-layout": "^0.3.107",
+        "@micromag/element-scroll": "^0.3.107",
+        "@micromag/element-text": "^0.3.107",
+        "@micromag/transforms": "^0.3.107",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -67,5 +67,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "660b2ada7b03941feb841470abf5cd2cc6e3e68f"
+    "gitHead": "952ef450fe62328a0ae3ab6dbb3c3079bb66d17a"
 }