npm - @micromag/screen-image - Versions diffs - 0.3.310 → 0.3.318 - Mend

@micromag/screen-image 0.3.310 → 0.3.318

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/assets/css/styles.css CHANGED Viewed

	@@ -1 +1 @@
1	- .micromag-screen-image-container .micromag-screen-image-background,.micromag-screen-image-container .micromag-screen-image-image{position:absolute;top:0;~~left:0;~~width:100~~%;height:100~~%}.micromag-screen-image-container{position:relative;width:100~~%;height:100%;overflow:hidden~~}.micromag-screen-image-disabled.micromag-screen-image-container{overflow:hidden;pointer-events:none}.micromag-screen-image-hidden.micromag-screen-image-container{display:none;visibility:hidden}.micromag-screen-image-placeholder.micromag-screen-image-container .micromag-screen-image-content{position:relative~~;padding:6px~~}.micromag-screen-image-container .micromag-screen-image-emptyImage,.micromag-screen-image-container .micromag-screen-image-emptyLegend,.micromag-screen-image-container .micromag-screen-image-emptyText,.micromag-screen-image-container .micromag-screen-image-emptyTitle{~~margin:5px auto;~~border:2px dashed #343434;color:#343434}.micromag-screen-image-container .micromag-screen-image-background{z-index:0}.micromag-screen-image-container .micromag-screen-image-content{position:relative;z-index:1~~;height:100%~~}.micromag-screen-image-container .micromag-screen-image-emptyImage,.micromag-screen-image-container .micromag-screen-image-emptyLegend,.micromag-screen-image-container .micromag-screen-image-emptyText,.micromag-screen-image-container .micromag-screen-image-emptyTitle{~~width:100%;~~margin:10px auto}.micromag-screen-image-container .micromag-screen-image-emptyImage{height:100%}.micromag-screen-image-container .micromag-screen-image-emptyTitle{height:100px}.micromag-screen-image-container .micromag-screen-image-emptyText{height:80px}.micromag-screen-image-container .micromag-screen-image-emptyLegend{height:50px}.micromag-screen-image-container .micromag-screen-image-imageContainer{~~position:relative;-webkit~~-~~flex-grow:1;-~~ms-flex-positive:1;flex-grow:1}.micromag-screen-image-container .micromag-screen-image-placeholderImage{height:100%}.micromag-screen-image-container.micromag-screen-image-isPlaceholder .micromag-screen-image-layout{padding:10px}.micromag-screen-image-container.micromag-screen-image-isCard .micromag-screen-image-placeholderImage{margin:-10px -10px 0}.micromag-screen-image-container.micromag-screen-image-isCardReverse .micromag-screen-image-placeholderImage{margin:10px -10px 0}.micromag-screen-image-container.micromag-screen-image-isCardReverse .micromag-screen-image-callToAction{~~position:absolute;~~bottom:0;left:0;width:100%}.micromag-screen-image-container.micromag-screen-image-isFullscreen .micromag-screen-image-layout{padding:0}.micromag-screen-image-container.micromag-screen-image-isFullscreen .micromag-screen-image-callToAction{~~position:absolute;~~bottom:0;~~width:100%;~~margin-top:0}
1	+ .micromag-screen-image-container .micromag-screen-image-background,.micromag-screen-image-container .micromag-screen-image-image{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-image-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-image-disabled.micromag-screen-image-container{overflow:hidden;pointer-events:none}.micromag-screen-image-hidden.micromag-screen-image-container{display:none;visibility:hidden}.micromag-screen-image-placeholder.micromag-screen-image-container .micromag-screen-image-content{padding:6px;position:relative}.micromag-screen-image-container .micromag-screen-image-emptyImage,.micromag-screen-image-container .micromag-screen-image-emptyLegend,.micromag-screen-image-container .micromag-screen-image-emptyText,.micromag-screen-image-container .micromag-screen-image-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-image-container .micromag-screen-image-background{z-index:0}.micromag-screen-image-container .micromag-screen-image-content{height:100%;position:relative;z-index:1}.micromag-screen-image-container .micromag-screen-image-emptyImage,.micromag-screen-image-container .micromag-screen-image-emptyLegend,.micromag-screen-image-container .micromag-screen-image-emptyText,.micromag-screen-image-container .micromag-screen-image-emptyTitle{margin:10px auto;width:100%}.micromag-screen-image-container .micromag-screen-image-emptyImage{height:100%}.micromag-screen-image-container .micromag-screen-image-emptyTitle{height:100px}.micromag-screen-image-container .micromag-screen-image-emptyText{height:80px}.micromag-screen-image-container .micromag-screen-image-emptyLegend{height:50px}.micromag-screen-image-container .micromag-screen-image-imageContainer{-ms-flex-positive:1;flex-grow:1;position:relative}.micromag-screen-image-container .micromag-screen-image-placeholderImage{height:100%}.micromag-screen-image-container.micromag-screen-image-isPlaceholder .micromag-screen-image-layout{padding:10px}.micromag-screen-image-container.micromag-screen-image-isCard .micromag-screen-image-placeholderImage{margin:-10px -10px 0}.micromag-screen-image-container.micromag-screen-image-isCardReverse .micromag-screen-image-placeholderImage{margin:10px -10px 0}.micromag-screen-image-container.micromag-screen-image-isCardReverse .micromag-screen-image-callToAction{bottom:0;left:0;position:absolute;width:100%}.micromag-screen-image-container.micromag-screen-image-isFullscreen .micromag-screen-image-layout{padding:0}.micromag-screen-image-container.micromag-screen-image-isFullscreen .micromag-screen-image-callToAction{bottom:0;margin-top:0;position:absolute;width:100%}

package/es/index.js CHANGED Viewed

@@ -16,12 +16,13 @@ import Heading from '@micromag/element-heading';
 import Layout from '@micromag/element-layout';
 import Text from '@micromag/element-text';
 import Visual from '@micromag/element-visual';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
 import _extends from '@babel/runtime/helpers/extends';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { Image, Heading1, Text as Text$1, Container as Container$1 } from '@micromag/transforms/apple-news';
-var styles = {"container":"micromag-screen-image-container","background":"micromag-screen-image-background","image":"micromag-screen-image-image","disabled":"micromag-screen-image-disabled","hidden":"micromag-screen-image-hidden","placeholder":"micromag-screen-image-placeholder","content":"micromag-screen-image-content","emptyImage":"micromag-screen-image-emptyImage","emptyLegend":"micromag-screen-image-emptyLegend","emptyText":"micromag-screen-image-emptyText","emptyTitle":"micromag-screen-image-emptyTitle","imageContainer":"micromag-screen-image-imageContainer","placeholderImage":"micromag-screen-image-placeholderImage","isPlaceholder":"micromag-screen-image-isPlaceholder","layout":"micromag-screen-image-layout","isCard":"micromag-screen-image-isCard","isCardReverse":"micromag-screen-image-isCardReverse","callToAction":"micromag-screen-image-callToAction","isFullscreen":"micromag-screen-image-isFullscreen"};
+var styles = {"container":"micromag-screen-image-container","image":"micromag-screen-image-image","background":"micromag-screen-image-background","disabled":"micromag-screen-image-disabled","hidden":"micromag-screen-image-hidden","placeholder":"micromag-screen-image-placeholder","content":"micromag-screen-image-content","emptyImage":"micromag-screen-image-emptyImage","emptyTitle":"micromag-screen-image-emptyTitle","emptyText":"micromag-screen-image-emptyText","emptyLegend":"micromag-screen-image-emptyLegend","imageContainer":"micromag-screen-image-imageContainer","placeholderImage":"micromag-screen-image-placeholderImage","isPlaceholder":"micromag-screen-image-isPlaceholder","layout":"micromag-screen-image-layout","isCard":"micromag-screen-image-isCard","isCardReverse":"micromag-screen-image-isCardReverse","callToAction":"micromag-screen-image-callToAction","isFullscreen":"micromag-screen-image-isFullscreen"};
 var propTypes = {
   layout: PropTypes.oneOf(['normal', 'fullscreen', 'reverse', 'card', 'card-reverse', 'title-top']),
@@ -61,63 +62,53 @@ var defaultProps = {
   transitions: null,
   className: null
 };
 var ImageScreen = function ImageScreen(_ref) {
   var _ref2;
   var layout = _ref.layout,
-      image = _ref.image,
-      imageFit = _ref.imageFit,
-      defaultImageFit = _ref.defaultImageFit,
-      title = _ref.title,
-      text = _ref.text,
-      legend = _ref.legend,
-      withTitle = _ref.withTitle,
-      withText = _ref.withText,
-      withLegend = _ref.withLegend,
-      spacing = _ref.spacing,
-      background = _ref.background,
-      callToAction = _ref.callToAction,
-      current = _ref.current,
-      active = _ref.active,
-      transitions = _ref.transitions,
-      className = _ref.className;
+    image = _ref.image,
+    imageFit = _ref.imageFit,
+    defaultImageFit = _ref.defaultImageFit,
+    title = _ref.title,
+    text = _ref.text,
+    legend = _ref.legend,
+    withTitle = _ref.withTitle,
+    withText = _ref.withText,
+    withLegend = _ref.withLegend,
+    spacing = _ref.spacing,
+    background = _ref.background,
+    callToAction = _ref.callToAction,
+    current = _ref.current,
+    active = _ref.active,
+    transitions = _ref.transitions,
+    className = _ref.className;
   var _useScreenSize = useScreenSize(),
-      width = _useScreenSize.width,
-      height = _useScreenSize.height,
-      resolution = _useScreenSize.resolution;
+    width = _useScreenSize.width,
+    height = _useScreenSize.height,
+    resolution = _useScreenSize.resolution;
   var _useScreenRenderConte = useScreenRenderContext(),
-      isView = _useScreenRenderConte.isView,
-      isPreview = _useScreenRenderConte.isPreview,
-      isPlaceholder = _useScreenRenderConte.isPlaceholder,
-      isEdit = _useScreenRenderConte.isEdit,
-      isStatic = _useScreenRenderConte.isStatic,
-      isCapture = _useScreenRenderConte.isCapture;
+    isView = _useScreenRenderConte.isView,
+    isPreview = _useScreenRenderConte.isPreview,
+    isPlaceholder = _useScreenRenderConte.isPlaceholder,
+    isEdit = _useScreenRenderConte.isEdit,
+    isStatic = _useScreenRenderConte.isStatic,
+    isCapture = _useScreenRenderConte.isCapture;
   var _useViewerContext = useViewerContext(),
-      viewerTopHeight = _useViewerContext.topHeight,
-      viewerBottomHeight = _useViewerContext.bottomHeight,
-      viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
+    viewerTopHeight = _useViewerContext.topHeight,
+    viewerBottomHeight = _useViewerContext.bottomHeight,
+    viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
   var _useViewerWebView = useViewerWebView(),
-      openWebView = _useViewerWebView.open;
+    openWebView = _useViewerWebView.open;
   var _usePlaybackContext = usePlaybackContext(),
-      muted = _usePlaybackContext.muted;
+    muted = _usePlaybackContext.muted;
   var mediaRef = usePlaybackMediaRef(current);
   var hasImage = image !== null;
   var hasTitle = isTextFilled(title);
   var hasText = isTextFilled(text);
   var hasLegend = isTextFilled(legend);
   var _useState = useState(!hasImage),
-      _useState2 = _slicedToArray(_useState, 2),
-      ready = _useState2[0],
-      setReady = _useState2[1];
+    _useState2 = _slicedToArray(_useState, 2),
+    ready = _useState2[0],
+    setReady = _useState2[1];
   var backgroundPlaying = current && (isView || isEdit);
   var mediaShouldLoad = current || active;
   var transitionPlaying = current && ready;
@@ -136,12 +127,10 @@ var ImageScreen = function ImageScreen(_ref) {
   var isCardReverse = layout === 'card-reverse';
   var isFullscreen = layout === 'fullscreen';
   var finalSpacing = !isFullscreen && !isPlaceholder ? spacing : 0;
   var _useDimensionObserver = useDimensionObserver(),
-      imageCntRef = _useDimensionObserver.ref,
-      imageWidth = _useDimensionObserver.width,
-      imageHeight = _useDimensionObserver.height;
+    imageCntRef = _useDimensionObserver.ref,
+    imageWidth = _useDimensionObserver.width,
+    imageHeight = _useDimensionObserver.height;
   var cardImageMargin = isCardReverse ? "".concat(finalSpacing / 2, "px ").concat(-finalSpacing / 2, "px 0") : "0 ".concat(-finalSpacing / 2, "px ").concat(finalSpacing / 2, "px");
   var imageMargin = isCard || isCardReverse ? cardImageMargin : finalSpacing / 2;
   var items = [/*#__PURE__*/React.createElement("div", {
@@ -245,7 +234,6 @@ var ImageScreen = function ImageScreen(_ref) {
       margin: finalSpacing / 2
     } : null
   }, /*#__PURE__*/React.createElement(Text, legend))) : null)];
   if (isReversed) {
     items.reverse();
   } else if (isTitleTop) {
@@ -253,9 +241,7 @@ var ImageScreen = function ImageScreen(_ref) {
       items.splice(0, 0, items.splice(1, 1)[0]);
     }
   }
   var hasCallToAction = callToAction !== null && callToAction.active === true;
   if (!isPlaceholder && hasCallToAction) {
     items.push( /*#__PURE__*/React.createElement("div", {
       className: styles.callToAction,
@@ -278,20 +264,16 @@ var ImageScreen = function ImageScreen(_ref) {
       openWebView: openWebView
     }))));
   }
   var paddingBottom = (current && !isPreview ? viewerBottomHeight : 0) + finalSpacing / 2;
   var paddingTop = (!isPreview ? viewerTopHeight : 0) + finalSpacing / 2;
   if (isCard || isFullscreen) {
     paddingTop = 0;
     paddingBottom = 0;
   }
   if (isCardReverse) {
     paddingTop = current && !isPreview ? viewerTopHeight : 0;
     paddingBottom = current && !isPreview ? viewerBottomHeight : 0;
   }
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, (_ref2 = {}, _defineProperty(_ref2, className, className !== null), _defineProperty(_ref2, styles.isReversed, isReversed), _defineProperty(_ref2, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref2, styles.isCard, isCard), _defineProperty(_ref2, styles.isCardReverse, isCardReverse), _defineProperty(_ref2, styles.isFullscreen, isFullscreen), _ref2)]),
     "data-screen-ready": ready
@@ -320,38 +302,33 @@ var ImageScreen = function ImageScreen(_ref) {
     className: styles.background
   }) : null);
 };
 ImageScreen.propTypes = propTypes;
 ImageScreen.defaultProps = defaultProps;
 var ImageScreen$1 = /*#__PURE__*/React.memo(ImageScreen);
 var ImageLegendScreen = function ImageLegendScreen(_ref) {
-  var props = _extends({}, _ref);
+  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
     withLegend: true
   }));
 };
 var ImageTextScreen = function ImageTextScreen(_ref) {
-  var props = _extends({}, _ref);
+  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
     withText: true
   }));
 };
 var ImageTitleScreen = function ImageTitleScreen(_ref) {
-  var props = _extends({}, _ref);
+  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
     withTitle: true
   }));
 };
 var ImageTitleTextScreen = function ImageTitleTextScreen(_ref) {
-  var props = _extends({}, _ref);
+  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
     withTitle: true,
     withText: true
@@ -360,42 +337,33 @@ var ImageTitleTextScreen = function ImageTitleTextScreen(_ref) {
 var transform = function transform(newStory, _ref) {
   var layout = _ref.layout,
-      image = _ref.image,
-      text = _ref.text,
-      title = _ref.title;
+    image = _ref.image,
+    text = _ref.text,
+    title = _ref.title;
   var _Image = Image(newStory, image),
-      imageStory = _Image.story,
-      imageComponent = _Image.component;
+    imageStory = _Image.story,
+    imageComponent = _Image.component;
   var _Heading = Heading1(imageStory, title),
-      titleStory = _Heading.story,
-      titleComponent = _Heading.component;
+    titleStory = _Heading.story,
+    titleComponent = _Heading.component;
   var _Text = Text$1(titleStory, text),
-      textStory = _Text.story,
-      textComponent = _Text.component;
+    textStory = _Text.story,
+    textComponent = _Text.component;
   var items = [];
   switch (layout) {
     case 'reverse':
       items = [].concat(_toConsumableArray(textComponent ? [textComponent] : []), _toConsumableArray(titleComponent ? [titleComponent] : []), _toConsumableArray(imageComponent ? [imageComponent] : []));
       break;
     case 'title-top':
       items = [].concat(_toConsumableArray(titleComponent ? [titleComponent] : []), _toConsumableArray(imageComponent ? [imageComponent] : []), _toConsumableArray(textComponent ? [textComponent] : []));
       break;
     default:
       items = [].concat(_toConsumableArray(imageComponent ? [imageComponent] : []), _toConsumableArray(titleComponent ? [titleComponent] : []), _toConsumableArray(textComponent ? [textComponent] : []));
       break;
   }
   var _Container = Container$1(textStory, items),
-      containerStory = _Container.story,
-      component = _Container.component;
+    containerStory = _Container.story,
+    component = _Container.component;
   return _objectSpread(_objectSpread({}, containerStory), {}, {
     components: [].concat(_toConsumableArray(newStory.components || []), _toConsumableArray(component ? [component] : []))
   });

package/lib/index.js CHANGED Viewed

@@ -20,6 +20,7 @@ var Heading = require('@micromag/element-heading');
 var Layout = require('@micromag/element-layout');
 var Text = require('@micromag/element-text');
 var Visual = require('@micromag/element-visual');
+var _objectDestructuringEmpty = require('@babel/runtime/helpers/objectDestructuringEmpty');
 var _extends = require('@babel/runtime/helpers/extends');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
@@ -39,11 +40,12 @@ var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
 var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
 var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
 var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
+var _objectDestructuringEmpty__default = /*#__PURE__*/_interopDefaultLegacy(_objectDestructuringEmpty);
 var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
-var styles = {"container":"micromag-screen-image-container","background":"micromag-screen-image-background","image":"micromag-screen-image-image","disabled":"micromag-screen-image-disabled","hidden":"micromag-screen-image-hidden","placeholder":"micromag-screen-image-placeholder","content":"micromag-screen-image-content","emptyImage":"micromag-screen-image-emptyImage","emptyLegend":"micromag-screen-image-emptyLegend","emptyText":"micromag-screen-image-emptyText","emptyTitle":"micromag-screen-image-emptyTitle","imageContainer":"micromag-screen-image-imageContainer","placeholderImage":"micromag-screen-image-placeholderImage","isPlaceholder":"micromag-screen-image-isPlaceholder","layout":"micromag-screen-image-layout","isCard":"micromag-screen-image-isCard","isCardReverse":"micromag-screen-image-isCardReverse","callToAction":"micromag-screen-image-callToAction","isFullscreen":"micromag-screen-image-isFullscreen"};
+var styles = {"container":"micromag-screen-image-container","image":"micromag-screen-image-image","background":"micromag-screen-image-background","disabled":"micromag-screen-image-disabled","hidden":"micromag-screen-image-hidden","placeholder":"micromag-screen-image-placeholder","content":"micromag-screen-image-content","emptyImage":"micromag-screen-image-emptyImage","emptyTitle":"micromag-screen-image-emptyTitle","emptyText":"micromag-screen-image-emptyText","emptyLegend":"micromag-screen-image-emptyLegend","imageContainer":"micromag-screen-image-imageContainer","placeholderImage":"micromag-screen-image-placeholderImage","isPlaceholder":"micromag-screen-image-isPlaceholder","layout":"micromag-screen-image-layout","isCard":"micromag-screen-image-isCard","isCardReverse":"micromag-screen-image-isCardReverse","callToAction":"micromag-screen-image-callToAction","isFullscreen":"micromag-screen-image-isFullscreen"};
 var propTypes = {
   layout: PropTypes__default["default"].oneOf(['normal', 'fullscreen', 'reverse', 'card', 'card-reverse', 'title-top']),
@@ -83,63 +85,53 @@ var defaultProps = {
   transitions: null,
   className: null
 };
 var ImageScreen = function ImageScreen(_ref) {
   var _ref2;
   var layout = _ref.layout,
-      image = _ref.image,
-      imageFit = _ref.imageFit,
-      defaultImageFit = _ref.defaultImageFit,
-      title = _ref.title,
-      text = _ref.text,
-      legend = _ref.legend,
-      withTitle = _ref.withTitle,
-      withText = _ref.withText,
-      withLegend = _ref.withLegend,
-      spacing = _ref.spacing,
-      background = _ref.background,
-      callToAction = _ref.callToAction,
-      current = _ref.current,
-      active = _ref.active,
-      transitions = _ref.transitions,
-      className = _ref.className;
+    image = _ref.image,
+    imageFit = _ref.imageFit,
+    defaultImageFit = _ref.defaultImageFit,
+    title = _ref.title,
+    text = _ref.text,
+    legend = _ref.legend,
+    withTitle = _ref.withTitle,
+    withText = _ref.withText,
+    withLegend = _ref.withLegend,
+    spacing = _ref.spacing,
+    background = _ref.background,
+    callToAction = _ref.callToAction,
+    current = _ref.current,
+    active = _ref.active,
+    transitions = _ref.transitions,
+    className = _ref.className;
   var _useScreenSize = contexts.useScreenSize(),
-      width = _useScreenSize.width,
-      height = _useScreenSize.height,
-      resolution = _useScreenSize.resolution;
+    width = _useScreenSize.width,
+    height = _useScreenSize.height,
+    resolution = _useScreenSize.resolution;
   var _useScreenRenderConte = contexts.useScreenRenderContext(),
-      isView = _useScreenRenderConte.isView,
-      isPreview = _useScreenRenderConte.isPreview,
-      isPlaceholder = _useScreenRenderConte.isPlaceholder,
-      isEdit = _useScreenRenderConte.isEdit,
-      isStatic = _useScreenRenderConte.isStatic,
-      isCapture = _useScreenRenderConte.isCapture;
+    isView = _useScreenRenderConte.isView,
+    isPreview = _useScreenRenderConte.isPreview,
+    isPlaceholder = _useScreenRenderConte.isPlaceholder,
+    isEdit = _useScreenRenderConte.isEdit,
+    isStatic = _useScreenRenderConte.isStatic,
+    isCapture = _useScreenRenderConte.isCapture;
   var _useViewerContext = contexts.useViewerContext(),
-      viewerTopHeight = _useViewerContext.topHeight,
-      viewerBottomHeight = _useViewerContext.bottomHeight,
-      viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
+    viewerTopHeight = _useViewerContext.topHeight,
+    viewerBottomHeight = _useViewerContext.bottomHeight,
+    viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
   var _useViewerWebView = contexts.useViewerWebView(),
-      openWebView = _useViewerWebView.open;
+    openWebView = _useViewerWebView.open;
   var _usePlaybackContext = contexts.usePlaybackContext(),
-      muted = _usePlaybackContext.muted;
+    muted = _usePlaybackContext.muted;
   var mediaRef = contexts.usePlaybackMediaRef(current);
   var hasImage = image !== null;
   var hasTitle = utils.isTextFilled(title);
   var hasText = utils.isTextFilled(text);
   var hasLegend = utils.isTextFilled(legend);
   var _useState = React.useState(!hasImage),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      ready = _useState2[0],
-      setReady = _useState2[1];
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    ready = _useState2[0],
+    setReady = _useState2[1];
   var backgroundPlaying = current && (isView || isEdit);
   var mediaShouldLoad = current || active;
   var transitionPlaying = current && ready;
@@ -158,12 +150,10 @@ var ImageScreen = function ImageScreen(_ref) {
   var isCardReverse = layout === 'card-reverse';
   var isFullscreen = layout === 'fullscreen';
   var finalSpacing = !isFullscreen && !isPlaceholder ? spacing : 0;
   var _useDimensionObserver = hooks.useDimensionObserver(),
-      imageCntRef = _useDimensionObserver.ref,
-      imageWidth = _useDimensionObserver.width,
-      imageHeight = _useDimensionObserver.height;
+    imageCntRef = _useDimensionObserver.ref,
+    imageWidth = _useDimensionObserver.width,
+    imageHeight = _useDimensionObserver.height;
   var cardImageMargin = isCardReverse ? "".concat(finalSpacing / 2, "px ").concat(-finalSpacing / 2, "px 0") : "0 ".concat(-finalSpacing / 2, "px ").concat(finalSpacing / 2, "px");
   var imageMargin = isCard || isCardReverse ? cardImageMargin : finalSpacing / 2;
   var items = [/*#__PURE__*/React__default["default"].createElement("div", {
@@ -267,7 +257,6 @@ var ImageScreen = function ImageScreen(_ref) {
       margin: finalSpacing / 2
     } : null
   }, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], legend))) : null)];
   if (isReversed) {
     items.reverse();
   } else if (isTitleTop) {
@@ -275,9 +264,7 @@ var ImageScreen = function ImageScreen(_ref) {
       items.splice(0, 0, items.splice(1, 1)[0]);
     }
   }
   var hasCallToAction = callToAction !== null && callToAction.active === true;
   if (!isPlaceholder && hasCallToAction) {
     items.push( /*#__PURE__*/React__default["default"].createElement("div", {
       className: styles.callToAction,
@@ -300,20 +287,16 @@ var ImageScreen = function ImageScreen(_ref) {
       openWebView: openWebView
     }))));
   }
   var paddingBottom = (current && !isPreview ? viewerBottomHeight : 0) + finalSpacing / 2;
   var paddingTop = (!isPreview ? viewerTopHeight : 0) + finalSpacing / 2;
   if (isCard || isFullscreen) {
     paddingTop = 0;
     paddingBottom = 0;
   }
   if (isCardReverse) {
     paddingTop = current && !isPreview ? viewerTopHeight : 0;
     paddingBottom = current && !isPreview ? viewerBottomHeight : 0;
   }
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className !== null), _defineProperty__default["default"](_ref2, styles.isReversed, isReversed), _defineProperty__default["default"](_ref2, styles.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref2, styles.isCard, isCard), _defineProperty__default["default"](_ref2, styles.isCardReverse, isCardReverse), _defineProperty__default["default"](_ref2, styles.isFullscreen, isFullscreen), _ref2)]),
     "data-screen-ready": ready
@@ -342,38 +325,33 @@ var ImageScreen = function ImageScreen(_ref) {
     className: styles.background
   }) : null);
 };
 ImageScreen.propTypes = propTypes;
 ImageScreen.defaultProps = defaultProps;
 var ImageScreen$1 = /*#__PURE__*/React__default["default"].memo(ImageScreen);
 var ImageLegendScreen = function ImageLegendScreen(_ref) {
-  var props = _extends__default["default"]({}, _ref);
+  var props = _extends__default["default"]({}, (_objectDestructuringEmpty__default["default"](_ref), _ref));
   return /*#__PURE__*/React__default["default"].createElement(ImageScreen$1, Object.assign({}, props, {
     withLegend: true
   }));
 };
 var ImageTextScreen = function ImageTextScreen(_ref) {
-  var props = _extends__default["default"]({}, _ref);
+  var props = _extends__default["default"]({}, (_objectDestructuringEmpty__default["default"](_ref), _ref));
   return /*#__PURE__*/React__default["default"].createElement(ImageScreen$1, Object.assign({}, props, {
     withText: true
   }));
 };
 var ImageTitleScreen = function ImageTitleScreen(_ref) {
-  var props = _extends__default["default"]({}, _ref);
+  var props = _extends__default["default"]({}, (_objectDestructuringEmpty__default["default"](_ref), _ref));
   return /*#__PURE__*/React__default["default"].createElement(ImageScreen$1, Object.assign({}, props, {
     withTitle: true
   }));
 };
 var ImageTitleTextScreen = function ImageTitleTextScreen(_ref) {
-  var props = _extends__default["default"]({}, _ref);
+  var props = _extends__default["default"]({}, (_objectDestructuringEmpty__default["default"](_ref), _ref));
   return /*#__PURE__*/React__default["default"].createElement(ImageScreen$1, Object.assign({}, props, {
     withTitle: true,
     withText: true
@@ -382,42 +360,33 @@ var ImageTitleTextScreen = function ImageTitleTextScreen(_ref) {
 var transform = function transform(newStory, _ref) {
   var layout = _ref.layout,
-      image = _ref.image,
-      text = _ref.text,
-      title = _ref.title;
+    image = _ref.image,
+    text = _ref.text,
+    title = _ref.title;
   var _Image = appleNews.Image(newStory, image),
-      imageStory = _Image.story,
-      imageComponent = _Image.component;
+    imageStory = _Image.story,
+    imageComponent = _Image.component;
   var _Heading = appleNews.Heading1(imageStory, title),
-      titleStory = _Heading.story,
-      titleComponent = _Heading.component;
+    titleStory = _Heading.story,
+    titleComponent = _Heading.component;
   var _Text = appleNews.Text(titleStory, text),
-      textStory = _Text.story,
-      textComponent = _Text.component;
+    textStory = _Text.story,
+    textComponent = _Text.component;
   var items = [];
   switch (layout) {
     case 'reverse':
       items = [].concat(_toConsumableArray__default["default"](textComponent ? [textComponent] : []), _toConsumableArray__default["default"](titleComponent ? [titleComponent] : []), _toConsumableArray__default["default"](imageComponent ? [imageComponent] : []));
       break;
     case 'title-top':
       items = [].concat(_toConsumableArray__default["default"](titleComponent ? [titleComponent] : []), _toConsumableArray__default["default"](imageComponent ? [imageComponent] : []), _toConsumableArray__default["default"](textComponent ? [textComponent] : []));
       break;
     default:
       items = [].concat(_toConsumableArray__default["default"](imageComponent ? [imageComponent] : []), _toConsumableArray__default["default"](titleComponent ? [titleComponent] : []), _toConsumableArray__default["default"](textComponent ? [textComponent] : []));
       break;
   }
   var _Container = appleNews.Container(textStory, items),
-      containerStory = _Container.story,
-      component = _Container.component;
+    containerStory = _Container.story,
+    component = _Container.component;
   return _objectSpread__default["default"](_objectSpread__default["default"]({}, containerStory), {}, {
     components: [].concat(_toConsumableArray__default["default"](newStory.components || []), _toConsumableArray__default["default"](component ? [component] : []))
   });

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-image",
-    "version": "0.3.310",
+    "version": "0.3.318",
     "description": "",
     "keywords": [
         "javascript"
@@ -49,23 +49,23 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.307",
-        "@micromag/element-background": "^0.3.307",
-        "@micromag/element-call-to-action": "^0.3.310",
-        "@micromag/element-container": "^0.3.307",
-        "@micromag/element-heading": "^0.3.307",
-        "@micromag/element-layout": "^0.3.307",
-        "@micromag/element-text": "^0.3.307",
-        "@micromag/element-visual": "^0.3.307",
-        "@micromag/transforms": "^0.3.307",
+        "@micromag/core": "^0.3.318",
+        "@micromag/element-background": "^0.3.318",
+        "@micromag/element-call-to-action": "^0.3.318",
+        "@micromag/element-container": "^0.3.318",
+        "@micromag/element-heading": "^0.3.318",
+        "@micromag/element-layout": "^0.3.318",
+        "@micromag/element-text": "^0.3.318",
+        "@micromag/element-visual": "^0.3.318",
+        "@micromag/transforms": "^0.3.318",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
         "react-intl": "^5.12.1",
-        "uuid": "^8.3.2"
+        "uuid": "^9.0.0"
     },
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "c2f4fbfcf0f643737a77f99dccf4d353f7856c2c"
+    "gitHead": "7d1a296e0c0d410e1225279e1f19e3a7715bfa96"
 }