@micromag/screen-slideshow 0.3.348 → 0.3.356

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-screen-slideshow-container .micromag-screen-slideshow-background,.micromag-screen-slideshow-container .micromag-screen-slideshow-inner{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-slideshow-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-slideshow-disabled.micromag-screen-slideshow-container{overflow:hidden;pointer-events:none}.micromag-screen-slideshow-hidden.micromag-screen-slideshow-container{display:none;visibility:hidden}.micromag-screen-slideshow-placeholder.micromag-screen-slideshow-container .micromag-screen-slideshow-content{padding:6px;position:relative}.micromag-screen-slideshow-container .micromag-screen-slideshow-background{z-index:0}.micromag-screen-slideshow-container .micromag-screen-slideshow-content{z-index:1}
+.micromag-screen-slideshow-container .micromag-screen-slideshow-background,.micromag-screen-slideshow-container .micromag-screen-slideshow-inner{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-slideshow-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-slideshow-disabled.micromag-screen-slideshow-container{overflow:hidden;pointer-events:none}.micromag-screen-slideshow-hidden.micromag-screen-slideshow-container{display:none;visibility:hidden}.micromag-screen-slideshow-placeholder.micromag-screen-slideshow-container .micromag-screen-slideshow-content{padding:6px;position:relative}.micromag-screen-slideshow-container .micromag-screen-slideshow-background{z-index:0}.micromag-screen-slideshow-container .micromag-screen-slideshow-content{z-index:1}.micromag-screen-slideshow-container .micromag-screen-slideshow-header{left:0;position:absolute;top:0;width:100%;z-index:2}.micromag-screen-slideshow-container .micromag-screen-slideshow-footer{bottom:0;left:0;position:absolute;width:100%}

package/es/index.js

@@ -8,36 +8,41 @@ import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { Transitions, ScreenElement } from '@micromag/core/components';
 import { useScreenSize, useViewerContext, useViewerInteraction, useScreenRenderContext } from '@micromag/core/contexts';
 import { useDimensionObserver } from '@micromag/core/hooks';
-import { isTextFilled } from '@micromag/core/utils';
+import { isHeaderFilled, isFooterFilled, getFooterProps, 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 Header from '@micromag/element-header';
 import Text from '@micromag/element-text';
 import Visual from '@micromag/element-visual';
 
-var styles = {"container":"micromag-screen-slideshow-container","inner":"micromag-screen-slideshow-inner","background":"micromag-screen-slideshow-background","disabled":"micromag-screen-slideshow-disabled","hidden":"micromag-screen-slideshow-hidden","placeholder":"micromag-screen-slideshow-placeholder","content":"micromag-screen-slideshow-content"};
+var styles = {"container":"micromag-screen-slideshow-container","inner":"micromag-screen-slideshow-inner","background":"micromag-screen-slideshow-background","disabled":"micromag-screen-slideshow-disabled","hidden":"micromag-screen-slideshow-hidden","placeholder":"micromag-screen-slideshow-placeholder","content":"micromag-screen-slideshow-content","header":"micromag-screen-slideshow-header","footer":"micromag-screen-slideshow-footer"};
+
+// TODO: make this happen
 
 var propTypes = {
-  layout: PropTypes.oneOf(['top', 'middle', 'bottom']),
+  // layout: PropTypes.oneOf(['top', 'middle', 'bottom']),
   slides: PropTypes.oneOfType([PropTypes$1.imageMedias, PropTypes$1.imageElements]),
   withCaptions: PropTypes.bool,
   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,
   className: PropTypes.string
 };
 var defaultProps = {
-  layout: 'middle',
+  // layout: 'middle',
   withCaptions: false,
   slides: [],
   spacing: 20,
   captionMaxLines: 2,
   background: null,
-  callToAction: null,
+  header: null,
+  footer: null,
   current: true,
   active: true,
   transitions: null,
@@ -48,7 +53,8 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
   var slides = _ref.slides,
     withCaptions = _ref.withCaptions,
     background = _ref.background,
-    callToAction = _ref.callToAction,
+    header = _ref.header,
+    footer = _ref.footer,
     current = _ref.current,
     active = _ref.active,
     spacing = _ref.spacing,
@@ -81,32 +87,43 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
     setImagesLoaded = _useState2[1];
   var ready = true;
   var transitionPlaying = current && ready;
-  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
+  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview;
   var onImageLoaded = useCallback(function () {
     setImagesLoaded(imagesLoaded + 1);
   }, [imagesLoaded, setImagesLoaded]);
   var imagesEl = useRef([]);
 
-  // Call to Action
-  var hasCallToAction = callToAction !== null && callToAction.active === true;
+  // Head and foot
+  var hasHeader = isHeaderFilled(header);
+  var hasFooter = isFooterFilled(footer);
+  var footerProps = getFooterProps(footer, {
+    isView: isView,
+    current: current,
+    isPreview: isPreview,
+    enableInteraction: enableInteraction,
+    disableInteraction: disableInteraction
+  });
   var _useDimensionObserver = useDimensionObserver(),
-    callToActionRef = _useDimensionObserver.ref,
+    footerRef = _useDimensionObserver.ref,
     _useDimensionObserver2 = _useDimensionObserver.height,
-    callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
+    footerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
+  var _useDimensionObserver3 = useDimensionObserver(),
+    headerRef = _useDimensionObserver3.ref;
+    _useDimensionObserver3.height;
   var items = (slides || []).map(function (item, itemI) {
     var _ref2 = item || {},
-      _ref2$visual = _ref2.visual,
-      visual = _ref2$visual === void 0 ? null : _ref2$visual,
+      _ref2$media = _ref2.media,
+      media = _ref2$media === void 0 ? null : _ref2$media,
       _ref2$caption = _ref2.caption,
       caption = _ref2$caption === void 0 ? null : _ref2$caption;
     var imageSize = {
-      width: width / 2,
-      height: height / 2
+      width: width,
+      height: height
     };
-
+    // console.log(imageSize);
     // const { caption = null } = finalImage || {};
 
-    var hasImage = visual !== null;
+    var hasImage = media !== null;
     var hasCaption = isTextFilled(caption);
     return /*#__PURE__*/React.createElement("div", {
       key: "item-".concat(itemI),
@@ -139,7 +156,7 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
       isEmpty: !hasImage
     }, mediaShouldLoad ? /*#__PURE__*/React.createElement(Visual, Object.assign({
       className: styles.image,
-      media: visual
+      media: media
     }, imageSize, {
       resolution: resolution,
       objectFit: {
@@ -183,25 +200,21 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
     className: styles.inner,
     style: {
       paddingTop: !isPreview ? viewerTopHeight : null,
-      paddingBottom: (hasCallToAction ? callToActionHeight - finalSpacing : 0) + (current && !isPreview ? viewerBottomHeight : 0)
+      paddingBottom: (hasFooter ? footerHeight - finalSpacing : 0) + (current && !isPreview ? viewerBottomHeight : 0)
     }
-  }, items, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
+  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
+    className: styles.header,
+    ref: headerRef,
     style: {
-      marginTop: -finalSpacing
+      padding: finalSpacing
     }
-  }, /*#__PURE__*/React.createElement(CallToAction, {
-    ref: callToActionRef,
-    className: styles.callToAction,
-    callToAction: callToAction,
-    animationDisabled: isPreview,
-    focusable: current && isView,
-    screenSize: {
-      width: width,
-      height: height
-    },
-    enableInteraction: enableInteraction,
-    disableInteraction: disableInteraction
-  })) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
+  }, /*#__PURE__*/React.createElement(Header, header)) : null, items, !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
+    className: styles.footer,
+    ref: footerRef,
+    style: {
+      padding: finalSpacing / 2
+    }
+  }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
     background: background,
     width: width,
     height: height,
@@ -273,17 +286,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

@@ -14,8 +14,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 Text = require('@micromag/element-text');
 var Visual = require('@micromag/element-visual');
 
@@ -27,34 +28,39 @@ 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 Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
 var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
 
-var styles = {"container":"micromag-screen-slideshow-container","inner":"micromag-screen-slideshow-inner","background":"micromag-screen-slideshow-background","disabled":"micromag-screen-slideshow-disabled","hidden":"micromag-screen-slideshow-hidden","placeholder":"micromag-screen-slideshow-placeholder","content":"micromag-screen-slideshow-content"};
+var styles = {"container":"micromag-screen-slideshow-container","inner":"micromag-screen-slideshow-inner","background":"micromag-screen-slideshow-background","disabled":"micromag-screen-slideshow-disabled","hidden":"micromag-screen-slideshow-hidden","placeholder":"micromag-screen-slideshow-placeholder","content":"micromag-screen-slideshow-content","header":"micromag-screen-slideshow-header","footer":"micromag-screen-slideshow-footer"};
+
+// TODO: make this happen
 
 var propTypes = {
-  layout: PropTypes__default["default"].oneOf(['top', 'middle', 'bottom']),
+  // layout: PropTypes.oneOf(['top', 'middle', 'bottom']),
   slides: PropTypes__default["default"].oneOfType([core.PropTypes.imageMedias, core.PropTypes.imageElements]),
   withCaptions: PropTypes__default["default"].bool,
   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,
   className: PropTypes__default["default"].string
 };
 var defaultProps = {
-  layout: 'middle',
+  // layout: 'middle',
   withCaptions: false,
   slides: [],
   spacing: 20,
   captionMaxLines: 2,
   background: null,
-  callToAction: null,
+  header: null,
+  footer: null,
   current: true,
   active: true,
   transitions: null,
@@ -65,7 +71,8 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
   var slides = _ref.slides,
     withCaptions = _ref.withCaptions,
     background = _ref.background,
-    callToAction = _ref.callToAction,
+    header = _ref.header,
+    footer = _ref.footer,
     current = _ref.current,
     active = _ref.active,
     spacing = _ref.spacing,
@@ -98,32 +105,43 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
     setImagesLoaded = _useState2[1];
   var ready = true;
   var transitionPlaying = current && ready;
-  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
+  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview;
   var onImageLoaded = React.useCallback(function () {
     setImagesLoaded(imagesLoaded + 1);
   }, [imagesLoaded, setImagesLoaded]);
   var imagesEl = React.useRef([]);
 
-  // Call to Action
-  var hasCallToAction = callToAction !== null && callToAction.active === true;
+  // Head and foot
+  var hasHeader = utils.isHeaderFilled(header);
+  var hasFooter = utils.isFooterFilled(footer);
+  var footerProps = utils.getFooterProps(footer, {
+    isView: isView,
+    current: current,
+    isPreview: isPreview,
+    enableInteraction: enableInteraction,
+    disableInteraction: disableInteraction
+  });
   var _useDimensionObserver = hooks.useDimensionObserver(),
-    callToActionRef = _useDimensionObserver.ref,
+    footerRef = _useDimensionObserver.ref,
     _useDimensionObserver2 = _useDimensionObserver.height,
-    callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
+    footerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
+  var _useDimensionObserver3 = hooks.useDimensionObserver(),
+    headerRef = _useDimensionObserver3.ref;
+    _useDimensionObserver3.height;
   var items = (slides || []).map(function (item, itemI) {
     var _ref2 = item || {},
-      _ref2$visual = _ref2.visual,
-      visual = _ref2$visual === void 0 ? null : _ref2$visual,
+      _ref2$media = _ref2.media,
+      media = _ref2$media === void 0 ? null : _ref2$media,
       _ref2$caption = _ref2.caption,
       caption = _ref2$caption === void 0 ? null : _ref2$caption;
     var imageSize = {
-      width: width / 2,
-      height: height / 2
+      width: width,
+      height: height
     };
-
+    // console.log(imageSize);
     // const { caption = null } = finalImage || {};
 
-    var hasImage = visual !== null;
+    var hasImage = media !== null;
     var hasCaption = utils.isTextFilled(caption);
     return /*#__PURE__*/React__default["default"].createElement("div", {
       key: "item-".concat(itemI),
@@ -156,7 +174,7 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
       isEmpty: !hasImage
     }, mediaShouldLoad ? /*#__PURE__*/React__default["default"].createElement(Visual__default["default"], Object.assign({
       className: styles.image,
-      media: visual
+      media: media
     }, imageSize, {
       resolution: resolution,
       objectFit: {
@@ -200,25 +218,21 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
     className: styles.inner,
     style: {
       paddingTop: !isPreview ? viewerTopHeight : null,
-      paddingBottom: (hasCallToAction ? callToActionHeight - finalSpacing : 0) + (current && !isPreview ? viewerBottomHeight : 0)
+      paddingBottom: (hasFooter ? footerHeight - finalSpacing : 0) + (current && !isPreview ? viewerBottomHeight : 0)
     }
-  }, items, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles.header,
+    ref: headerRef,
     style: {
-      marginTop: -finalSpacing
+      padding: finalSpacing
     }
-  }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
-    ref: callToActionRef,
-    className: styles.callToAction,
-    callToAction: callToAction,
-    animationDisabled: isPreview,
-    focusable: current && isView,
-    screenSize: {
-      width: width,
-      height: height
-    },
-    enableInteraction: enableInteraction,
-    disableInteraction: disableInteraction
-  })) : null)), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
+  }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, items, !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles.footer,
+    ref: footerRef,
+    style: {
+      padding: finalSpacing / 2
+    }
+  }, /*#__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,
@@ -290,17 +304,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-slideshow",
-    "version": "0.3.348",
+    "version": "0.3.356",
     "description": "",
     "keywords": [
         "javascript"
@@ -49,14 +49,15 @@
     },
     "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-layout": "^0.3.348",
-        "@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-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",
@@ -66,5 +67,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "20ef008fdf5c678004b740f395f51cb548591dad"
+    "gitHead": "683c410d9fc568658e5907fb0a8fa470cb04f6eb"
 }