@micromag/screen-urbania-recommendation 0.3.349 → 0.3.356

package/es/index.js

@@ -9,10 +9,11 @@ import { PropTypes } from '@micromag/core';
 import { ScreenElement, PlaceholderTitle, PlaceholderText, TransitionsStagger } from '@micromag/core/components';
 import { useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenRenderContext } from '@micromag/core/contexts';
 import { useTrackScreenEvent } from '@micromag/core/hooks';
-import { isTextFilled } from '@micromag/core/utils';
+import { isTextFilled, isHeaderFilled, isFooterFilled, getFooterProps } from '@micromag/core/utils';
 import Background from '@micromag/element-background';
-import CallToAction from '@micromag/element-call-to-action';
 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, { Spacer } from '@micromag/element-layout';
 import Scroll from '@micromag/element-scroll';
@@ -27,8 +28,9 @@ var propTypes = {
   sponsor: PropTypes.textElement,
   description: PropTypes.textElement,
   spacing: PropTypes$1.number,
+  header: PropTypes.header,
+  footer: PropTypes.footer,
   background: PropTypes.backgroundElement,
-  callToAction: PropTypes.callToAction,
   current: PropTypes$1.bool,
   active: PropTypes$1.bool,
   animateBackground: PropTypes$1.bool,
@@ -43,8 +45,9 @@ var defaultProps = {
   sponsor: null,
   description: null,
   spacing: 20,
+  header: null,
+  footer: null,
   background: null,
-  callToAction: null,
   current: true,
   active: true,
   animateBackground: true,
@@ -53,15 +56,16 @@ var defaultProps = {
   className: null
 };
 var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
-  var _ref4, _ref5, _ref6, _ref8, _ref12;
+  var _ref3, _ref4, _ref5, _ref7, _ref11;
   var category = _ref.category,
     date = _ref.date,
     title = _ref.title,
     sponsor = _ref.sponsor,
     description = _ref.description,
     spacing = _ref.spacing,
+    header = _ref.header,
+    footer = _ref.footer,
     background = _ref.background,
-    callToAction = _ref.callToAction,
     current = _ref.current,
     active = _ref.active,
     animateBackground = _ref.animateBackground,
@@ -106,9 +110,14 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
   var transitionPlaying = current;
   var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
   var scrollingDisabled = !isEdit && transitionDisabled || !current;
-  var _ref2 = callToAction || {},
-    _ref2$active = _ref2.active,
-    hasCallToAction = _ref2$active === void 0 ? false : _ref2$active;
+  var hasHeader = isHeaderFilled(header);
+  var hasFooter = isFooterFilled(footer);
+  var footerProps = getFooterProps(footer, {
+    isView: isView,
+    current: current,
+    openWebView: openWebView,
+    isPreview: isPreview
+  });
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
     scrolledBottom = _useState4[0],
@@ -131,8 +140,8 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
       setAnimationStarted(true);
     }
   }, [isView, setAnimationStarted]);
-  var onScrolledBottom = useCallback(function (_ref3) {
-    var initial = _ref3.initial;
+  var onScrolledBottom = useCallback(function (_ref2) {
+    var initial = _ref2.initial;
     if (initial) {
       trackScreenEvent('scroll', 'Screen');
     }
@@ -151,10 +160,15 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
   }, [background]);
 
   // Create elements
-  var items = [!isPlaceholder ? /*#__PURE__*/React.createElement(Spacer, {
+  var items = [!isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
+    key: "header",
+    style: {
+      paddingBottom: spacing
+    }
+  }, /*#__PURE__*/React.createElement(Header, header)) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Spacer, {
     key: "spacer-cta-top"
   }) : null, hasTextCard || isPlaceholder || isEdit ? /*#__PURE__*/React.createElement(Container, {
-    className: classNames([styles.textCard, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref4, styles.appear, finalAnimateBackground), _ref4)])
+    className: classNames([styles.textCard, (_ref3 = {}, _defineProperty(_ref3, className, className !== null), _defineProperty(_ref3, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref3, styles.appear, finalAnimateBackground), _ref3)])
   }, /*#__PURE__*/React.createElement(ScreenElement, {
     key: "category",
     placeholder: /*#__PURE__*/React.createElement(PlaceholderTitle, {
@@ -170,9 +184,9 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     emptyClassName: styles.emptyText,
     isEmpty: !hasCategory
   }, hasCategory ? /*#__PURE__*/React.createElement(Heading, Object.assign({
-    className: classNames([styles.category, (_ref5 = {}, _defineProperty(_ref5, className, className !== null), _defineProperty(_ref5, styles.noBottomBorder, onlyCategory), _ref5)])
+    className: classNames([styles.category, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles.noBottomBorder, onlyCategory), _ref4)])
   }, category)) : null), hasDate || hasTitle || isPlaceholder ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.dateTitleRow, (_ref6 = {}, _defineProperty(_ref6, className, className !== null), _defineProperty(_ref6, styles.bottomBorder, hasSponsor || !hasSponsor && hasDescription), _defineProperty(_ref6, styles.isPlaceholder, isPlaceholder), _ref6)])
+    className: classNames([styles.dateTitleRow, (_ref5 = {}, _defineProperty(_ref5, className, className !== null), _defineProperty(_ref5, styles.bottomBorder, hasSponsor || !hasSponsor && hasDescription), _defineProperty(_ref5, styles.isPlaceholder, isPlaceholder), _ref5)])
   }, /*#__PURE__*/React.createElement(ScreenElement, {
     key: "date",
     placeholder: /*#__PURE__*/React.createElement(PlaceholderText, {
@@ -189,7 +203,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
   }, hasDate ? /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.dateContainer, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement(Text, Object.assign({
-    className: classNames([styles.date, (_ref8 = {}, _defineProperty(_ref8, className, className !== null), _defineProperty(_ref8, styles.centerDate, !hasTitle), _ref8)])
+    className: classNames([styles.date, (_ref7 = {}, _defineProperty(_ref7, className, className !== null), _defineProperty(_ref7, styles.centerDate, !hasTitle), _ref7)])
   }, date))) : null), /*#__PURE__*/React.createElement(ScreenElement, {
     key: "title",
     placeholder: "title"
@@ -239,23 +253,19 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     className: styles.description
   }, description)) : null)) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Spacer, {
     key: "spacer-cta-bottom"
-  }) : null, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
+  }) : null, !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
+    key: "call-to-action",
     className: classNames([styles.callToAction, _defineProperty({}, styles.disabled, !scrolledBottom)]),
     style: {
       paddingTop: spacing,
       paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
       paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
-    },
-    key: "call-to-action"
-  }, /*#__PURE__*/React.createElement(CallToAction, Object.assign({}, callToAction, {
-    animationDisabled: isPreview,
-    focusable: current && isView,
-    openWebView: openWebView
-  }))) : null].filter(function (el) {
+    }
+  }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null].filter(function (el) {
     return el !== null;
   });
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, (_ref12 = {}, _defineProperty(_ref12, className, className !== null), _defineProperty(_ref12, styles.isPlaceholder, isPlaceholder), _ref12)]),
+    className: classNames([styles.container, (_ref11 = {}, _defineProperty(_ref11, className, className !== null), _defineProperty(_ref11, styles.isPlaceholder, isPlaceholder), _ref11)]),
     "data-screen-ready": true
   }, /*#__PURE__*/React.createElement(Container, {
     width: width,
@@ -379,17 +389,25 @@ var definition = [{
       }]
     })
   }, {
-    name: 'callToAction',
-    type: 'call-to-action',
-    theme: {
-      label: {
-        textStyle: 'cta'
-      },
-      boxStyle: 'cta'
-    }
+    name: 'header',
+    type: 'header',
+    label: defineMessage({
+      id: "rhuDxI",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Header"
+      }]
+    })
   }, {
-    name: 'shareIncentive',
-    type: 'share-incentive'
+    name: 'footer',
+    type: 'footer',
+    label: defineMessage({
+      id: "g4nybp",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Footer"
+      }]
+    })
   }]
 }];
 

package/lib/index.js

@@ -15,8 +15,9 @@ var contexts = require('@micromag/core/contexts');
 var hooks = require('@micromag/core/hooks');
 var utils = require('@micromag/core/utils');
 var Background = require('@micromag/element-background');
-var CallToAction = require('@micromag/element-call-to-action');
 var Container = require('@micromag/element-container');
+var Footer = require('@micromag/element-footer');
+var Header = require('@micromag/element-header');
 var Heading = require('@micromag/element-heading');
 var Layout = require('@micromag/element-layout');
 var Scroll = require('@micromag/element-scroll');
@@ -31,8 +32,9 @@ var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
-var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
 var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
+var Footer__default = /*#__PURE__*/_interopDefaultLegacy(Footer);
+var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header);
 var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
 var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
 var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
@@ -47,8 +49,9 @@ var propTypes = {
   sponsor: core.PropTypes.textElement,
   description: core.PropTypes.textElement,
   spacing: PropTypes__default["default"].number,
+  header: core.PropTypes.header,
+  footer: core.PropTypes.footer,
   background: core.PropTypes.backgroundElement,
-  callToAction: core.PropTypes.callToAction,
   current: PropTypes__default["default"].bool,
   active: PropTypes__default["default"].bool,
   animateBackground: PropTypes__default["default"].bool,
@@ -63,8 +66,9 @@ var defaultProps = {
   sponsor: null,
   description: null,
   spacing: 20,
+  header: null,
+  footer: null,
   background: null,
-  callToAction: null,
   current: true,
   active: true,
   animateBackground: true,
@@ -73,15 +77,16 @@ var defaultProps = {
   className: null
 };
 var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
-  var _ref4, _ref5, _ref6, _ref8, _ref12;
+  var _ref3, _ref4, _ref5, _ref7, _ref11;
   var category = _ref.category,
     date = _ref.date,
     title = _ref.title,
     sponsor = _ref.sponsor,
     description = _ref.description,
     spacing = _ref.spacing,
+    header = _ref.header,
+    footer = _ref.footer,
     background = _ref.background,
-    callToAction = _ref.callToAction,
     current = _ref.current,
     active = _ref.active,
     animateBackground = _ref.animateBackground,
@@ -126,9 +131,14 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
   var transitionPlaying = current;
   var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
   var scrollingDisabled = !isEdit && transitionDisabled || !current;
-  var _ref2 = callToAction || {},
-    _ref2$active = _ref2.active,
-    hasCallToAction = _ref2$active === void 0 ? false : _ref2$active;
+  var hasHeader = utils.isHeaderFilled(header);
+  var hasFooter = utils.isFooterFilled(footer);
+  var footerProps = utils.getFooterProps(footer, {
+    isView: isView,
+    current: current,
+    openWebView: openWebView,
+    isPreview: isPreview
+  });
   var _useState3 = React.useState(false),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
     scrolledBottom = _useState4[0],
@@ -151,8 +161,8 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
       setAnimationStarted(true);
     }
   }, [isView, setAnimationStarted]);
-  var onScrolledBottom = React.useCallback(function (_ref3) {
-    var initial = _ref3.initial;
+  var onScrolledBottom = React.useCallback(function (_ref2) {
+    var initial = _ref2.initial;
     if (initial) {
       trackScreenEvent('scroll', 'Screen');
     }
@@ -171,10 +181,15 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
   }, [background]);
 
   // Create elements
-  var items = [!isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
+  var items = [!isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
+    key: "header",
+    style: {
+      paddingBottom: spacing
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
     key: "spacer-cta-top"
   }) : null, hasTextCard || isPlaceholder || isEdit ? /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
-    className: classNames__default["default"]([styles.textCard, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className !== null), _defineProperty__default["default"](_ref4, styles.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref4, styles.appear, finalAnimateBackground), _ref4)])
+    className: classNames__default["default"]([styles.textCard, (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className !== null), _defineProperty__default["default"](_ref3, styles.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref3, styles.appear, finalAnimateBackground), _ref3)])
   }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
     key: "category",
     placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderTitle, {
@@ -190,9 +205,9 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     emptyClassName: styles.emptyText,
     isEmpty: !hasCategory
   }, hasCategory ? /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
-    className: classNames__default["default"]([styles.category, (_ref5 = {}, _defineProperty__default["default"](_ref5, className, className !== null), _defineProperty__default["default"](_ref5, styles.noBottomBorder, onlyCategory), _ref5)])
+    className: classNames__default["default"]([styles.category, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className !== null), _defineProperty__default["default"](_ref4, styles.noBottomBorder, onlyCategory), _ref4)])
   }, category)) : null), hasDate || hasTitle || isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.dateTitleRow, (_ref6 = {}, _defineProperty__default["default"](_ref6, className, className !== null), _defineProperty__default["default"](_ref6, styles.bottomBorder, hasSponsor || !hasSponsor && hasDescription), _defineProperty__default["default"](_ref6, styles.isPlaceholder, isPlaceholder), _ref6)])
+    className: classNames__default["default"]([styles.dateTitleRow, (_ref5 = {}, _defineProperty__default["default"](_ref5, className, className !== null), _defineProperty__default["default"](_ref5, styles.bottomBorder, hasSponsor || !hasSponsor && hasDescription), _defineProperty__default["default"](_ref5, styles.isPlaceholder, isPlaceholder), _ref5)])
   }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
     key: "date",
     placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderText, {
@@ -209,7 +224,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
   }, hasDate ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles.dateContainer, _defineProperty__default["default"]({}, className, className !== null)])
   }, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
-    className: classNames__default["default"]([styles.date, (_ref8 = {}, _defineProperty__default["default"](_ref8, className, className !== null), _defineProperty__default["default"](_ref8, styles.centerDate, !hasTitle), _ref8)])
+    className: classNames__default["default"]([styles.date, (_ref7 = {}, _defineProperty__default["default"](_ref7, className, className !== null), _defineProperty__default["default"](_ref7, styles.centerDate, !hasTitle), _ref7)])
   }, date))) : null), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
     key: "title",
     placeholder: "title"
@@ -259,23 +274,19 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     className: styles.description
   }, description)) : null)) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
     key: "spacer-cta-bottom"
-  }) : null, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }) : null, !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
+    key: "call-to-action",
     className: classNames__default["default"]([styles.callToAction, _defineProperty__default["default"]({}, styles.disabled, !scrolledBottom)]),
     style: {
       paddingTop: spacing,
       paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
       paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
-    },
-    key: "call-to-action"
-  }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], Object.assign({}, callToAction, {
-    animationDisabled: isPreview,
-    focusable: current && isView,
-    openWebView: openWebView
-  }))) : null].filter(function (el) {
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(Footer__default["default"], footerProps)) : null].filter(function (el) {
     return el !== null;
   });
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.container, (_ref12 = {}, _defineProperty__default["default"](_ref12, className, className !== null), _defineProperty__default["default"](_ref12, styles.isPlaceholder, isPlaceholder), _ref12)]),
+    className: classNames__default["default"]([styles.container, (_ref11 = {}, _defineProperty__default["default"](_ref11, className, className !== null), _defineProperty__default["default"](_ref11, styles.isPlaceholder, isPlaceholder), _ref11)]),
     "data-screen-ready": true
   }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
     width: width,
@@ -399,17 +410,25 @@ var definition = [{
       }]
     })
   }, {
-    name: 'callToAction',
-    type: 'call-to-action',
-    theme: {
-      label: {
-        textStyle: 'cta'
-      },
-      boxStyle: 'cta'
-    }
+    name: 'header',
+    type: 'header',
+    label: reactIntl.defineMessage({
+      id: "rhuDxI",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Header"
+      }]
+    })
   }, {
-    name: 'shareIncentive',
-    type: 'share-incentive'
+    name: 'footer',
+    type: 'footer',
+    label: reactIntl.defineMessage({
+      id: "g4nybp",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Footer"
+      }]
+    })
   }]
 }];
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-urbania-recommendation",
-    "version": "0.3.349",
+    "version": "0.3.356",
     "description": "",
     "keywords": [
         "javascript"
@@ -49,15 +49,16 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.348",
-        "@micromag/element-background": "^0.3.348",
-        "@micromag/element-call-to-action": "^0.3.348",
-        "@micromag/element-container": "^0.3.348",
-        "@micromag/element-heading": "^0.3.348",
-        "@micromag/element-layout": "^0.3.348",
-        "@micromag/element-scroll": "^0.3.349",
-        "@micromag/element-text": "^0.3.348",
-        "@micromag/transforms": "^0.3.348",
+        "@micromag/core": "^0.3.354",
+        "@micromag/element-background": "^0.3.354",
+        "@micromag/element-container": "^0.3.354",
+        "@micromag/element-footer": "^0.3.354",
+        "@micromag/element-header": "^0.3.356",
+        "@micromag/element-heading": "^0.3.354",
+        "@micromag/element-layout": "^0.3.354",
+        "@micromag/element-scroll": "^0.3.354",
+        "@micromag/element-text": "^0.3.354",
+        "@micromag/transforms": "^0.3.354",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -67,5 +68,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "5e3c2c33b7e3c1833b1c43f97792b11d746864b1"
+    "gitHead": "683c410d9fc568658e5907fb0a8fa470cb04f6eb"
 }