@micromag/screen-gallery 0.3.347 → 0.3.354

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-screen-gallery-container .micromag-screen-gallery-background,.micromag-screen-gallery-container .micromag-screen-gallery-image,.micromag-screen-gallery-container .micromag-screen-gallery-inner{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-gallery-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-gallery-disabled.micromag-screen-gallery-container{overflow:hidden;pointer-events:none}.micromag-screen-gallery-hidden.micromag-screen-gallery-container{display:none;visibility:hidden}.micromag-screen-gallery-placeholder.micromag-screen-gallery-container .micromag-screen-gallery-content{padding:6px;position:relative}.micromag-screen-gallery-container .micromag-screen-gallery-emptyCaption,.micromag-screen-gallery-container .micromag-screen-gallery-emptyImage{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-gallery-container .micromag-screen-gallery-background{z-index:0}.micromag-screen-gallery-container .micromag-screen-gallery-content{z-index:1}.micromag-screen-gallery-container .micromag-screen-gallery-inner{-webkit-transition:padding-bottom .2s ease-out;-o-transition:padding-bottom .2s ease-out;transition:padding-bottom .2s ease-out}.micromag-screen-gallery-container .micromag-screen-gallery-grid{height:100%;position:relative}.micromag-screen-gallery-container .micromag-screen-gallery-placeholder{height:100%}.micromag-screen-gallery-container .micromag-screen-gallery-emptyCaption,.micromag-screen-gallery-container .micromag-screen-gallery-emptyImage{width:100%}.micromag-screen-gallery-container .micromag-screen-gallery-emptyImage{height:100%}.micromag-screen-gallery-container .micromag-screen-gallery-emptyCaption{height:50px;margin-top:10px}.micromag-screen-gallery-container .micromag-screen-gallery-gridItem{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;position:relative}.micromag-screen-gallery-container .micromag-screen-gallery-imageContainer{-ms-flex-positive:1;flex-grow:1;overflow:hidden;position:relative}.micromag-screen-gallery-container .micromag-screen-gallery-callToAction{bottom:0;left:0;position:absolute;-webkit-transition:-webkit-transform .2s ease-out;transition:-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out;transition:transform .2s ease-out;transition:transform .2s ease-out,-webkit-transform .2s ease-out;width:100%}.micromag-screen-gallery-container .micromag-screen-gallery-caption{padding:10px 0}
+.micromag-screen-gallery-container .micromag-screen-gallery-background,.micromag-screen-gallery-container .micromag-screen-gallery-image,.micromag-screen-gallery-container .micromag-screen-gallery-inner{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-gallery-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-gallery-disabled.micromag-screen-gallery-container{overflow:hidden;pointer-events:none}.micromag-screen-gallery-hidden.micromag-screen-gallery-container{display:none;visibility:hidden}.micromag-screen-gallery-placeholder.micromag-screen-gallery-container .micromag-screen-gallery-content{padding:6px;position:relative}.micromag-screen-gallery-container .micromag-screen-gallery-emptyCaption,.micromag-screen-gallery-container .micromag-screen-gallery-emptyImage{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-gallery-container .micromag-screen-gallery-background{z-index:0}.micromag-screen-gallery-container .micromag-screen-gallery-content{z-index:1}.micromag-screen-gallery-container .micromag-screen-gallery-inner{-webkit-transition:padding-bottom .2s ease-out;-o-transition:padding-bottom .2s ease-out;transition:padding-bottom .2s ease-out}.micromag-screen-gallery-container .micromag-screen-gallery-grid{height:100%;position:relative}.micromag-screen-gallery-container .micromag-screen-gallery-placeholder{height:100%}.micromag-screen-gallery-container .micromag-screen-gallery-emptyCaption,.micromag-screen-gallery-container .micromag-screen-gallery-emptyImage{width:100%}.micromag-screen-gallery-container .micromag-screen-gallery-emptyImage{height:100%}.micromag-screen-gallery-container .micromag-screen-gallery-emptyCaption{height:50px;margin-top:10px}.micromag-screen-gallery-container .micromag-screen-gallery-gridItem{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;position:relative}.micromag-screen-gallery-container .micromag-screen-gallery-imageContainer{-ms-flex-positive:1;flex-grow:1;overflow:hidden;position:relative}.micromag-screen-gallery-container .micromag-screen-gallery-header{top:0}.micromag-screen-gallery-container .micromag-screen-gallery-footer,.micromag-screen-gallery-container .micromag-screen-gallery-header{left:0;position:absolute;-webkit-transition:-webkit-transform .2s ease-out;transition:-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out;transition:transform .2s ease-out;transition:transform .2s ease-out,-webkit-transform .2s ease-out;width:100%}.micromag-screen-gallery-container .micromag-screen-gallery-footer{bottom:0}.micromag-screen-gallery-container .micromag-screen-gallery-caption{padding:10px 0}

package/es/index.js

@@ -10,11 +10,12 @@ 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 { useDimensionObserver } from '@micromag/core/hooks';
-import { isImageFilled, isTextFilled } from '@micromag/core/utils';
+import { isHeaderFilled, isFooterFilled, getFooterProps, isImageFilled, isTextFilled } 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 Grid from '@micromag/element-grid';
+import Header from '@micromag/element-header';
 import Text from '@micromag/element-text';
 import Visual from '@micromag/element-visual';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
@@ -192,7 +193,7 @@ var layoutProps = {
   }
 };
 
-var styles = {"container":"micromag-screen-gallery-container","image":"micromag-screen-gallery-image","inner":"micromag-screen-gallery-inner","background":"micromag-screen-gallery-background","disabled":"micromag-screen-gallery-disabled","hidden":"micromag-screen-gallery-hidden","placeholder":"micromag-screen-gallery-placeholder","content":"micromag-screen-gallery-content","emptyImage":"micromag-screen-gallery-emptyImage","emptyCaption":"micromag-screen-gallery-emptyCaption","grid":"micromag-screen-gallery-grid","gridItem":"micromag-screen-gallery-gridItem","imageContainer":"micromag-screen-gallery-imageContainer","callToAction":"micromag-screen-gallery-callToAction","caption":"micromag-screen-gallery-caption"};
+var styles = {"container":"micromag-screen-gallery-container","image":"micromag-screen-gallery-image","inner":"micromag-screen-gallery-inner","background":"micromag-screen-gallery-background","disabled":"micromag-screen-gallery-disabled","hidden":"micromag-screen-gallery-hidden","placeholder":"micromag-screen-gallery-placeholder","content":"micromag-screen-gallery-content","emptyImage":"micromag-screen-gallery-emptyImage","emptyCaption":"micromag-screen-gallery-emptyCaption","grid":"micromag-screen-gallery-grid","gridItem":"micromag-screen-gallery-gridItem","imageContainer":"micromag-screen-gallery-imageContainer","header":"micromag-screen-gallery-header","footer":"micromag-screen-gallery-footer","caption":"micromag-screen-gallery-caption"};
 
 var propTypes = {
   layout: PropTypes.oneOf([
@@ -211,7 +212,8 @@ var propTypes = {
   spacing: PropTypes.number,
   captionMaxLines: 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,
@@ -225,7 +227,8 @@ var defaultProps = {
   spacing: 20,
   captionMaxLines: 2,
   background: null,
-  callToAction: null,
+  header: null,
+  footer: null,
   current: true,
   active: true,
   transitions: null,
@@ -233,12 +236,13 @@ var defaultProps = {
   className: null
 };
 var GalleryScreen = function GalleryScreen(_ref) {
-  var _ref5;
+  var _ref4;
   var layout = _ref.layout,
     images = _ref.images,
     withCaptions = _ref.withCaptions,
     background = _ref.background,
-    callToAction = _ref.callToAction,
+    header = _ref.header,
+    footer = _ref.footer,
     current = _ref.current,
     active = _ref.active,
     spacing = _ref.spacing,
@@ -314,14 +318,23 @@ var GalleryScreen = function GalleryScreen(_ref) {
     }
   }, [contentWidth, contentHeight, layout, setImagesSizes]);
 
-  // Call to Action
-  var _ref3 = callToAction || {},
-    _ref3$active = _ref3.active,
-    hasCallToAction = _ref3$active === void 0 ? false : _ref3$active;
+  // headre + footer
+  var hasHeader = isHeaderFilled(header);
+  var hasFooter = isFooterFilled(footer);
+  var footerProps = getFooterProps(footer, {
+    isView: isView,
+    current: current,
+    openWebView: openWebView,
+    isPreview: isPreview
+  });
   var _useDimensionObserver4 = useDimensionObserver(),
-    callToActionRef = _useDimensionObserver4.ref,
+    headerRef = _useDimensionObserver4.ref,
     _useDimensionObserver5 = _useDimensionObserver4.height,
-    callToActionHeight = _useDimensionObserver5 === void 0 ? 0 : _useDimensionObserver5;
+    headerHeight = _useDimensionObserver5 === void 0 ? 0 : _useDimensionObserver5;
+  var _useDimensionObserver6 = useDimensionObserver(),
+    footerRef = _useDimensionObserver6.ref,
+    _useDimensionObserver7 = _useDimensionObserver6.height,
+    footerHeight = _useDimensionObserver7 === void 0 ? 0 : _useDimensionObserver7;
 
   // items
   var items = _toConsumableArray(Array(gridSpaces)).map(function (item, itemI) {
@@ -330,9 +343,9 @@ var GalleryScreen = function GalleryScreen(_ref) {
     var finalImage = withCaptions ? image : {
       media: image
     };
-    var _ref4 = finalImage || {},
-      _ref4$caption = _ref4.caption,
-      caption = _ref4$caption === void 0 ? null : _ref4$caption;
+    var _ref3 = finalImage || {},
+      _ref3$caption = _ref3.caption,
+      caption = _ref3$caption === void 0 ? null : _ref3$caption;
     var hasImage = isImageFilled(finalImage);
     var hasCaption = isTextFilled(caption);
     return /*#__PURE__*/React.createElement("div", {
@@ -400,7 +413,7 @@ var GalleryScreen = function GalleryScreen(_ref) {
     }))))) : null);
   });
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, (_ref5 = {}, _defineProperty(_ref5, className, className !== null), _defineProperty(_ref5, styles.isPlaceholder, isPlaceholder), _ref5)]),
+    className: classNames([styles.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles.isPlaceholder, isPlaceholder), _ref4)]),
     "data-screen-ready": ready
   }, /*#__PURE__*/React.createElement(Container, {
     width: width,
@@ -409,29 +422,34 @@ var GalleryScreen = function GalleryScreen(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.inner,
     style: {
-      paddingTop: !isPreview ? viewerTopHeight : null,
-      paddingBottom: (hasCallToAction ? callToActionHeight : 0) + (current && !isPreview ? viewerBottomHeight : 0)
+      paddingTop: (hasHeader ? headerHeight : 0) + (!isPreview ? viewerTopHeight : 0),
+      paddingBottom: (hasFooter ? footerHeight : 0) + (current && !isPreview ? viewerBottomHeight : 0)
     },
     ref: contentRef
-  }, /*#__PURE__*/React.createElement(Grid, Object.assign({
+  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
+    className: styles.header,
+    ref: headerRef,
+    style: {
+      paddingTop: finalSpacing,
+      paddingLeft: spacing,
+      paddingRight: spacing,
+      transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
+    }
+  }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(Grid, Object.assign({
     className: styles.grid,
     spacing: finalSpacing,
     items: items
-  }, grid)), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
-    className: styles.callToAction,
-    ref: callToActionRef,
+  }, grid)), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
+    className: styles.footer,
+    ref: footerRef,
     style: {
       paddingLeft: Math.max(finalSpacing / 2, viewerBottomSidesWidth),
       paddingRight: Math.max(finalSpacing / 2, viewerBottomSidesWidth),
-      paddingTop: finalSpacing / 2,
+      // paddingTop: finalSpacing / 2,
       paddingBottom: finalSpacing / 2,
       transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null
     }
-  }, /*#__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,
@@ -624,17 +642,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,9 +16,10 @@ 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 Grid = require('@micromag/element-grid');
+var Header = require('@micromag/element-header');
 var Text = require('@micromag/element-text');
 var Visual = require('@micromag/element-visual');
 var _objectDestructuringEmpty = require('@babel/runtime/helpers/objectDestructuringEmpty');
@@ -36,9 +37,10 @@ var isPlainObject__default = /*#__PURE__*/_interopDefaultLegacy(isPlainObject);
 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 Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
+var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header);
 var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
 var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
 var _objectDestructuringEmpty__default = /*#__PURE__*/_interopDefaultLegacy(_objectDestructuringEmpty);
@@ -215,7 +217,7 @@ var layoutProps = {
   }
 };
 
-var styles = {"container":"micromag-screen-gallery-container","image":"micromag-screen-gallery-image","inner":"micromag-screen-gallery-inner","background":"micromag-screen-gallery-background","disabled":"micromag-screen-gallery-disabled","hidden":"micromag-screen-gallery-hidden","placeholder":"micromag-screen-gallery-placeholder","content":"micromag-screen-gallery-content","emptyImage":"micromag-screen-gallery-emptyImage","emptyCaption":"micromag-screen-gallery-emptyCaption","grid":"micromag-screen-gallery-grid","gridItem":"micromag-screen-gallery-gridItem","imageContainer":"micromag-screen-gallery-imageContainer","callToAction":"micromag-screen-gallery-callToAction","caption":"micromag-screen-gallery-caption"};
+var styles = {"container":"micromag-screen-gallery-container","image":"micromag-screen-gallery-image","inner":"micromag-screen-gallery-inner","background":"micromag-screen-gallery-background","disabled":"micromag-screen-gallery-disabled","hidden":"micromag-screen-gallery-hidden","placeholder":"micromag-screen-gallery-placeholder","content":"micromag-screen-gallery-content","emptyImage":"micromag-screen-gallery-emptyImage","emptyCaption":"micromag-screen-gallery-emptyCaption","grid":"micromag-screen-gallery-grid","gridItem":"micromag-screen-gallery-gridItem","imageContainer":"micromag-screen-gallery-imageContainer","header":"micromag-screen-gallery-header","footer":"micromag-screen-gallery-footer","caption":"micromag-screen-gallery-caption"};
 
 var propTypes = {
   layout: PropTypes__default["default"].oneOf([
@@ -234,7 +236,8 @@ var propTypes = {
   spacing: PropTypes__default["default"].number,
   captionMaxLines: 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,
@@ -248,7 +251,8 @@ var defaultProps = {
   spacing: 20,
   captionMaxLines: 2,
   background: null,
-  callToAction: null,
+  header: null,
+  footer: null,
   current: true,
   active: true,
   transitions: null,
@@ -256,12 +260,13 @@ var defaultProps = {
   className: null
 };
 var GalleryScreen = function GalleryScreen(_ref) {
-  var _ref5;
+  var _ref4;
   var layout = _ref.layout,
     images = _ref.images,
     withCaptions = _ref.withCaptions,
     background = _ref.background,
-    callToAction = _ref.callToAction,
+    header = _ref.header,
+    footer = _ref.footer,
     current = _ref.current,
     active = _ref.active,
     spacing = _ref.spacing,
@@ -337,14 +342,23 @@ var GalleryScreen = function GalleryScreen(_ref) {
     }
   }, [contentWidth, contentHeight, layout, setImagesSizes]);
 
-  // Call to Action
-  var _ref3 = callToAction || {},
-    _ref3$active = _ref3.active,
-    hasCallToAction = _ref3$active === void 0 ? false : _ref3$active;
+  // headre + footer
+  var hasHeader = utils.isHeaderFilled(header);
+  var hasFooter = utils.isFooterFilled(footer);
+  var footerProps = utils.getFooterProps(footer, {
+    isView: isView,
+    current: current,
+    openWebView: openWebView,
+    isPreview: isPreview
+  });
   var _useDimensionObserver4 = hooks.useDimensionObserver(),
-    callToActionRef = _useDimensionObserver4.ref,
+    headerRef = _useDimensionObserver4.ref,
     _useDimensionObserver5 = _useDimensionObserver4.height,
-    callToActionHeight = _useDimensionObserver5 === void 0 ? 0 : _useDimensionObserver5;
+    headerHeight = _useDimensionObserver5 === void 0 ? 0 : _useDimensionObserver5;
+  var _useDimensionObserver6 = hooks.useDimensionObserver(),
+    footerRef = _useDimensionObserver6.ref,
+    _useDimensionObserver7 = _useDimensionObserver6.height,
+    footerHeight = _useDimensionObserver7 === void 0 ? 0 : _useDimensionObserver7;
 
   // items
   var items = _toConsumableArray__default["default"](Array(gridSpaces)).map(function (item, itemI) {
@@ -353,9 +367,9 @@ var GalleryScreen = function GalleryScreen(_ref) {
     var finalImage = withCaptions ? image : {
       media: image
     };
-    var _ref4 = finalImage || {},
-      _ref4$caption = _ref4.caption,
-      caption = _ref4$caption === void 0 ? null : _ref4$caption;
+    var _ref3 = finalImage || {},
+      _ref3$caption = _ref3.caption,
+      caption = _ref3$caption === void 0 ? null : _ref3$caption;
     var hasImage = utils.isImageFilled(finalImage);
     var hasCaption = utils.isTextFilled(caption);
     return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -423,7 +437,7 @@ var GalleryScreen = function GalleryScreen(_ref) {
     }))))) : null);
   });
   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.isPlaceholder, isPlaceholder), _ref5)]),
+    className: classNames__default["default"]([styles.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className !== null), _defineProperty__default["default"](_ref4, styles.isPlaceholder, isPlaceholder), _ref4)]),
     "data-screen-ready": ready
   }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
     width: width,
@@ -432,29 +446,34 @@ var GalleryScreen = function GalleryScreen(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles.inner,
     style: {
-      paddingTop: !isPreview ? viewerTopHeight : null,
-      paddingBottom: (hasCallToAction ? callToActionHeight : 0) + (current && !isPreview ? viewerBottomHeight : 0)
+      paddingTop: (hasHeader ? headerHeight : 0) + (!isPreview ? viewerTopHeight : 0),
+      paddingBottom: (hasFooter ? footerHeight : 0) + (current && !isPreview ? viewerBottomHeight : 0)
     },
     ref: contentRef
-  }, /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], Object.assign({
+  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles.header,
+    ref: headerRef,
+    style: {
+      paddingTop: finalSpacing,
+      paddingLeft: spacing,
+      paddingRight: spacing,
+      transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], Object.assign({
     className: styles.grid,
     spacing: finalSpacing,
     items: items
-  }, grid)), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles.callToAction,
-    ref: callToActionRef,
+  }, grid)), !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles.footer,
+    ref: footerRef,
     style: {
       paddingLeft: Math.max(finalSpacing / 2, viewerBottomSidesWidth),
       paddingRight: Math.max(finalSpacing / 2, viewerBottomSidesWidth),
-      paddingTop: finalSpacing / 2,
+      // paddingTop: finalSpacing / 2,
       paddingBottom: finalSpacing / 2,
       transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null
     }
-  }, /*#__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,
@@ -647,17 +666,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-gallery",
-    "version": "0.3.347",
+    "version": "0.3.354",
     "description": "",
     "keywords": [
         "javascript"
@@ -49,15 +49,16 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.347",
-        "@micromag/element-background": "^0.3.347",
-        "@micromag/element-call-to-action": "^0.3.347",
-        "@micromag/element-container": "^0.3.347",
-        "@micromag/element-grid": "^0.3.347",
-        "@micromag/element-layout": "^0.3.347",
-        "@micromag/element-text": "^0.3.347",
-        "@micromag/element-visual": "^0.3.347",
-        "@micromag/transforms": "^0.3.347",
+        "@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-grid": "^0.3.354",
+        "@micromag/element-header": "^0.3.354",
+        "@micromag/element-layout": "^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",
@@ -67,5 +68,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "63a7e46763ae34c4143f0aa29a4c9467126e7734"
+    "gitHead": "ccf852d0a7df8f222365088e7de3843492e720e7"
 }