@micromag/screen-timeline 0.3.349 → 0.3.356

package/es/index.js

@@ -10,10 +10,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, getStyleFromColor } from '@micromag/core/utils';
+import { isTextFilled, getStyleFromColor, 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';
@@ -34,8 +35,9 @@ var propTypes = {
   bulletFilled: PropTypes.bool,
   illustrated: PropTypes.bool,
   spacing: PropTypes.number,
+  header: PropTypes$1.header,
+  footer: PropTypes$1.footer,
   background: PropTypes$1.backgroundElement,
-  callToAction: PropTypes$1.callToAction,
   current: PropTypes.bool,
   active: PropTypes.bool,
   transitions: PropTypes$1.transitions,
@@ -52,8 +54,9 @@ var defaultProps = {
   bulletFilled: true,
   illustrated: false,
   spacing: 20,
+  header: null,
+  footer: null,
   background: null,
-  callToAction: null,
   current: true,
   active: true,
   transitions: null,
@@ -62,7 +65,7 @@ var defaultProps = {
   className: null
 };
 var Timeline = function Timeline(_ref) {
-  var _ref10;
+  var _ref9;
   var layout = _ref.layout,
     items = _ref.items,
     bulletColor = _ref.bulletColor,
@@ -71,8 +74,9 @@ var Timeline = function Timeline(_ref) {
     bulletFilled = _ref.bulletFilled,
     illustrated = _ref.illustrated,
     spacing = _ref.spacing,
+    header = _ref.header,
+    footer = _ref.footer,
     background = _ref.background,
-    callToAction = _ref.callToAction,
     current = _ref.current,
     active = _ref.active,
     transitions = _ref.transitions,
@@ -263,10 +267,14 @@ var Timeline = function Timeline(_ref) {
   });
 
   // Call to Action
-
-  var _ref8 = callToAction || {},
-    _ref8$active = _ref8.active,
-    hasCallToAction = _ref8$active === void 0 ? false : _ref8$active;
+  var hasHeader = isHeaderFilled(header);
+  var hasFooter = isFooterFilled(footer);
+  var footerProps = getFooterProps(footer, {
+    isView: isView,
+    current: current,
+    openWebView: openWebView,
+    isPreview: isPreview
+  });
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     scrolledBottom = _useState6[0],
@@ -275,8 +283,8 @@ var Timeline = function Timeline(_ref) {
     callToActionRef = _useDimensionObserver.ref,
     _useDimensionObserver2 = _useDimensionObserver.height,
     callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
-  var onScrolledBottom = useCallback(function (_ref9) {
-    var initial = _ref9.initial;
+  var onScrolledBottom = useCallback(function (_ref8) {
+    var initial = _ref8.initial;
     if (initial) {
       trackScreenEvent('scroll', 'Screen');
     }
@@ -286,7 +294,7 @@ var Timeline = function Timeline(_ref) {
     setScrolledBottom(false);
   }, [setScrolledBottom]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, (_ref10 = {}, _defineProperty(_ref10, className, className !== null), _defineProperty(_ref10, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref10, styles["".concat(bulletShape, "BulletShape")], bulletShape !== null), _defineProperty(_ref10, styles.withoutLines, itemsCount < 2), _ref10)]),
+    className: classNames([styles.container, (_ref9 = {}, _defineProperty(_ref9, className, className !== null), _defineProperty(_ref9, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref9, styles["".concat(bulletShape, "BulletShape")], bulletShape !== null), _defineProperty(_ref9, styles.withoutLines, itemsCount < 2), _ref9)]),
     "data-screen-ready": ready
   }, /*#__PURE__*/React.createElement(Container, {
     width: width,
@@ -304,7 +312,12 @@ var Timeline = function Timeline(_ref) {
       paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
       paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
     } : null
-  }, timelineElements)), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
+  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
+    key: "header",
+    style: {
+      paddingBottom: spacing
+    }
+  }, /*#__PURE__*/React.createElement(Header, header)) : null, timelineElements)), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
     ref: callToActionRef,
     className: classNames([styles.callToAction, _defineProperty({}, styles.disabled, !scrolledBottom)]),
     style: {
@@ -314,11 +327,7 @@ var Timeline = function Timeline(_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,
@@ -328,7 +337,7 @@ var Timeline = function Timeline(_ref) {
     shouldLoad: mediaShouldLoad,
     mediaRef: mediaRef,
     withoutVideo: isPreview,
-    className: styles.container
+    className: styles.background
   }) : null);
 };
 Timeline.propTypes = propTypes;
@@ -503,17 +512,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"
+      }]
+    })
   }]
 }, {
   id: 'timeline-illustrated',
@@ -646,17 +663,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

@@ -16,8 +16,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');
@@ -37,8 +38,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);
@@ -58,8 +60,9 @@ var propTypes = {
   bulletFilled: PropTypes__default["default"].bool,
   illustrated: PropTypes__default["default"].bool,
   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,
   transitions: core.PropTypes.transitions,
@@ -76,8 +79,9 @@ var defaultProps = {
   bulletFilled: true,
   illustrated: false,
   spacing: 20,
+  header: null,
+  footer: null,
   background: null,
-  callToAction: null,
   current: true,
   active: true,
   transitions: null,
@@ -86,7 +90,7 @@ var defaultProps = {
   className: null
 };
 var Timeline = function Timeline(_ref) {
-  var _ref10;
+  var _ref9;
   var layout = _ref.layout,
     items = _ref.items,
     bulletColor = _ref.bulletColor,
@@ -95,8 +99,9 @@ var Timeline = function Timeline(_ref) {
     bulletFilled = _ref.bulletFilled,
     illustrated = _ref.illustrated,
     spacing = _ref.spacing,
+    header = _ref.header,
+    footer = _ref.footer,
     background = _ref.background,
-    callToAction = _ref.callToAction,
     current = _ref.current,
     active = _ref.active,
     transitions = _ref.transitions,
@@ -287,10 +292,14 @@ var Timeline = function Timeline(_ref) {
   });
 
   // Call to Action
-
-  var _ref8 = callToAction || {},
-    _ref8$active = _ref8.active,
-    hasCallToAction = _ref8$active === void 0 ? false : _ref8$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 _useState5 = React.useState(false),
     _useState6 = _slicedToArray__default["default"](_useState5, 2),
     scrolledBottom = _useState6[0],
@@ -299,8 +308,8 @@ var Timeline = function Timeline(_ref) {
     callToActionRef = _useDimensionObserver.ref,
     _useDimensionObserver2 = _useDimensionObserver.height,
     callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
-  var onScrolledBottom = React.useCallback(function (_ref9) {
-    var initial = _ref9.initial;
+  var onScrolledBottom = React.useCallback(function (_ref8) {
+    var initial = _ref8.initial;
     if (initial) {
       trackScreenEvent('scroll', 'Screen');
     }
@@ -310,7 +319,7 @@ var Timeline = function Timeline(_ref) {
     setScrolledBottom(false);
   }, [setScrolledBottom]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.container, (_ref10 = {}, _defineProperty__default["default"](_ref10, className, className !== null), _defineProperty__default["default"](_ref10, styles.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref10, styles["".concat(bulletShape, "BulletShape")], bulletShape !== null), _defineProperty__default["default"](_ref10, styles.withoutLines, itemsCount < 2), _ref10)]),
+    className: classNames__default["default"]([styles.container, (_ref9 = {}, _defineProperty__default["default"](_ref9, className, className !== null), _defineProperty__default["default"](_ref9, styles.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref9, styles["".concat(bulletShape, "BulletShape")], bulletShape !== null), _defineProperty__default["default"](_ref9, styles.withoutLines, itemsCount < 2), _ref9)]),
     "data-screen-ready": ready
   }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
     width: width,
@@ -328,7 +337,12 @@ var Timeline = function Timeline(_ref) {
       paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
       paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
     } : null
-  }, timelineElements)), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
+    key: "header",
+    style: {
+      paddingBottom: spacing
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, timelineElements)), !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
     ref: callToActionRef,
     className: classNames__default["default"]([styles.callToAction, _defineProperty__default["default"]({}, styles.disabled, !scrolledBottom)]),
     style: {
@@ -338,11 +352,7 @@ var Timeline = function Timeline(_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,
@@ -352,7 +362,7 @@ var Timeline = function Timeline(_ref) {
     shouldLoad: mediaShouldLoad,
     mediaRef: mediaRef,
     withoutVideo: isPreview,
-    className: styles.container
+    className: styles.background
   }) : null);
 };
 Timeline.propTypes = propTypes;
@@ -527,17 +537,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"
+      }]
+    })
   }]
 }, {
   id: 'timeline-illustrated',
@@ -670,17 +688,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-timeline",
-    "version": "0.3.349",
+    "version": "0.3.356",
     "description": "",
     "keywords": [
         "javascript"
@@ -49,16 +49,17 @@
     },
     "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/element-visual": "^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/element-visual": "^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": "683c410d9fc568658e5907fb0a8fa470cb04f6eb"
 }