@micromag/screen-ranking 0.3.349 → 0.3.354

package/es/index.js

@@ -9,10 +9,11 @@ import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { Transitions, ScreenElement } from '@micromag/core/components';
 import { useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenRenderContext } from '@micromag/core/contexts';
 import { useTrackScreenEvent, useDimensionObserver } 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 from '@micromag/element-layout';
 import Scroll from '@micromag/element-scroll';
@@ -29,7 +30,8 @@ var propTypes = {
   ascending: PropTypes.bool,
   spacing: PropTypes.number,
   background: PropTypes$1.backgroundElement,
-  callToAction: PropTypes$1.callToAction,
+  header: PropTypes$1.header,
+  footer: PropTypes$1.footer,
   current: PropTypes.bool,
   active: PropTypes.bool,
   transitions: PropTypes$1.transitions,
@@ -44,7 +46,8 @@ var defaultProps = {
   ascending: false,
   spacing: 20,
   background: null,
-  callToAction: null,
+  header: null,
+  footer: null,
   current: true,
   active: true,
   transitions: null,
@@ -53,14 +56,15 @@ var defaultProps = {
   className: null
 };
 var RankingScreen = function RankingScreen(_ref) {
-  var _ref5;
+  var _ref4;
   var layout = _ref.layout,
     items = _ref.items,
     numbersStyle = _ref.numbersStyle,
     ascending = _ref.ascending,
     spacing = _ref.spacing,
     background = _ref.background,
-    callToAction = _ref.callToAction,
+    header = _ref.header,
+    footer = _ref.footer,
     current = _ref.current,
     active = _ref.active,
     transitions = _ref.transitions,
@@ -165,9 +169,14 @@ var RankingScreen = function RankingScreen(_ref) {
 
   // Call to Action
 
-  var _ref3 = callToAction || {},
-    _ref3$active = _ref3.active,
-    hasCallToAction = _ref3$active === void 0 ? false : _ref3$active;
+  var hasHeader = isHeaderFilled(header);
+  var hasFooter = isFooterFilled(footer);
+  var footerProps = getFooterProps(footer, {
+    isView: isView,
+    current: current,
+    openWebView: openWebView,
+    isPreview: isPreview
+  });
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     scrolledBottom = _useState2[0],
@@ -176,8 +185,8 @@ var RankingScreen = function RankingScreen(_ref) {
     callToActionRef = _useDimensionObserver.ref,
     _useDimensionObserver2 = _useDimensionObserver.height,
     callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
-  var onScrolledBottom = useCallback(function (_ref4) {
-    var initial = _ref4.initial;
+  var onScrolledBottom = useCallback(function (_ref3) {
+    var initial = _ref3.initial;
     if (initial) {
       trackScreenEvent('scroll', 'Screen');
     }
@@ -187,7 +196,7 @@ var RankingScreen = function RankingScreen(_ref) {
     setScrolledBottom(false);
   }, [setScrolledBottom]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, (_ref5 = {}, _defineProperty(_ref5, className, className !== null), _defineProperty(_ref5, styles["".concat(layout, "Layout")], layout !== null), _defineProperty(_ref5, styles.isPlaceholder, isPlaceholder), _ref5)]),
+    className: classNames([styles.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles["".concat(layout, "Layout")], layout !== null), _defineProperty(_ref4, styles.isPlaceholder, isPlaceholder), _ref4)]),
     "data-screen-ready": true
   }, /*#__PURE__*/React.createElement(Container, {
     width: width,
@@ -199,14 +208,20 @@ var RankingScreen = function RankingScreen(_ref) {
     disabled: scrollingDisabled,
     onScrolledBottom: onScrolledBottom,
     onScrolledNotBottom: onScrolledNotBottom
-  }, /*#__PURE__*/React.createElement(Layout, {
+  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      paddingTop: spacing,
+      paddingLeft: spacing,
+      paddingRight: spacing
+    }
+  }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(Layout, {
     className: styles.layout,
     style: !isPlaceholder ? {
       padding: spacing,
       paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
       paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
     } : null
-  }, elements)), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
+  }, elements)), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
     ref: callToActionRef,
     className: classNames([styles.callToAction, _defineProperty({}, styles.disabled, !scrolledBottom)]),
     style: {
@@ -216,11 +231,7 @@ var RankingScreen = function RankingScreen(_ref) {
       paddingTop: spacing / 2,
       paddingBottom: spacing / 2
     }
-  }, /*#__PURE__*/React.createElement(CallToAction, Object.assign({}, callToAction, {
-    animationDisabled: isPreview,
-    focusable: current && isView,
-    openWebView: openWebView
-  }))) : null), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
+  }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
     background: background,
     width: width,
     height: height,
@@ -366,17 +377,25 @@ var definition = {
       }]
     })
   }, {
-    name: 'callToAction',
-    type: 'call-to-action',
-    theme: {
-      boxStyle: 'cta',
-      label: {
-        textStyle: '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');
@@ -33,8 +34,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);
@@ -50,7 +52,8 @@ var propTypes = {
   ascending: PropTypes__default["default"].bool,
   spacing: PropTypes__default["default"].number,
   background: core.PropTypes.backgroundElement,
-  callToAction: core.PropTypes.callToAction,
+  header: core.PropTypes.header,
+  footer: core.PropTypes.footer,
   current: PropTypes__default["default"].bool,
   active: PropTypes__default["default"].bool,
   transitions: core.PropTypes.transitions,
@@ -65,7 +68,8 @@ var defaultProps = {
   ascending: false,
   spacing: 20,
   background: null,
-  callToAction: null,
+  header: null,
+  footer: null,
   current: true,
   active: true,
   transitions: null,
@@ -74,14 +78,15 @@ var defaultProps = {
   className: null
 };
 var RankingScreen = function RankingScreen(_ref) {
-  var _ref5;
+  var _ref4;
   var layout = _ref.layout,
     items = _ref.items,
     numbersStyle = _ref.numbersStyle,
     ascending = _ref.ascending,
     spacing = _ref.spacing,
     background = _ref.background,
-    callToAction = _ref.callToAction,
+    header = _ref.header,
+    footer = _ref.footer,
     current = _ref.current,
     active = _ref.active,
     transitions = _ref.transitions,
@@ -186,9 +191,14 @@ var RankingScreen = function RankingScreen(_ref) {
 
   // Call to Action
 
-  var _ref3 = callToAction || {},
-    _ref3$active = _ref3.active,
-    hasCallToAction = _ref3$active === void 0 ? false : _ref3$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 _useState = React.useState(false),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
     scrolledBottom = _useState2[0],
@@ -197,8 +207,8 @@ var RankingScreen = function RankingScreen(_ref) {
     callToActionRef = _useDimensionObserver.ref,
     _useDimensionObserver2 = _useDimensionObserver.height,
     callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
-  var onScrolledBottom = React.useCallback(function (_ref4) {
-    var initial = _ref4.initial;
+  var onScrolledBottom = React.useCallback(function (_ref3) {
+    var initial = _ref3.initial;
     if (initial) {
       trackScreenEvent('scroll', 'Screen');
     }
@@ -208,7 +218,7 @@ var RankingScreen = function RankingScreen(_ref) {
     setScrolledBottom(false);
   }, [setScrolledBottom]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.container, (_ref5 = {}, _defineProperty__default["default"](_ref5, className, className !== null), _defineProperty__default["default"](_ref5, styles["".concat(layout, "Layout")], layout !== null), _defineProperty__default["default"](_ref5, styles.isPlaceholder, isPlaceholder), _ref5)]),
+    className: classNames__default["default"]([styles.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className !== null), _defineProperty__default["default"](_ref4, styles["".concat(layout, "Layout")], layout !== null), _defineProperty__default["default"](_ref4, styles.isPlaceholder, isPlaceholder), _ref4)]),
     "data-screen-ready": true
   }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
     width: width,
@@ -220,14 +230,20 @@ var RankingScreen = function RankingScreen(_ref) {
     disabled: scrollingDisabled,
     onScrolledBottom: onScrolledBottom,
     onScrolledNotBottom: onScrolledNotBottom
-  }, /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
+  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      paddingTop: spacing,
+      paddingLeft: spacing,
+      paddingRight: spacing
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
     className: styles.layout,
     style: !isPlaceholder ? {
       padding: spacing,
       paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
       paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
     } : null
-  }, elements)), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, elements)), !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
     ref: callToActionRef,
     className: classNames__default["default"]([styles.callToAction, _defineProperty__default["default"]({}, styles.disabled, !scrolledBottom)]),
     style: {
@@ -237,11 +253,7 @@ var RankingScreen = function RankingScreen(_ref) {
       paddingTop: spacing / 2,
       paddingBottom: spacing / 2
     }
-  }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], Object.assign({}, callToAction, {
-    animationDisabled: isPreview,
-    focusable: current && isView,
-    openWebView: openWebView
-  }))) : null), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
+  }, /*#__PURE__*/React__default["default"].createElement(Footer__default["default"], footerProps)) : null), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
     background: background,
     width: width,
     height: height,
@@ -387,17 +399,25 @@ var definition = {
       }]
     })
   }, {
-    name: 'callToAction',
-    type: 'call-to-action',
-    theme: {
-      boxStyle: 'cta',
-      label: {
-        textStyle: '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-ranking",
-    "version": "0.3.349",
+    "version": "0.3.354",
     "description": "",
     "keywords": [
         "javascript"
@@ -49,16 +49,17 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.348",
-        "@micromag/data": "^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/data": "^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.354",
+        "@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",
@@ -68,5 +69,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "5e3c2c33b7e3c1833b1c43f97792b11d746864b1"
+    "gitHead": "ccf852d0a7df8f222365088e7de3843492e720e7"
 }