@micromag/screen-image 0.3.347 → 0.3.354

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
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +68 -40
  3. package/lib/index.js +69 -40
  4. package/package.json +12 -11
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
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%}
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-footer{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-header{left:0;margin-top:0;position:absolute;top:0;width:100%;z-index:1}.micromag-screen-image-container.micromag-screen-image-isFullscreen .micromag-screen-image-footer{bottom:0;left:0;margin-top:0;position:absolute;width:100%}
package/es/index.js CHANGED
@@ -8,10 +8,11 @@ import { PropTypes as PropTypes$1 } from '@micromag/core';
8
8
  import { ScreenElement, Transitions } from '@micromag/core/components';
9
9
  import { useScreenSize, useScreenRenderContext, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
10
10
  import { useDimensionObserver } from '@micromag/core/hooks';
11
- import { isTextFilled } from '@micromag/core/utils';
11
+ import { isTextFilled, isHeaderFilled, isFooterFilled, getFooterProps } from '@micromag/core/utils';
12
12
  import Background from '@micromag/element-background';
13
- import CallToAction from '@micromag/element-call-to-action';
14
13
  import Container from '@micromag/element-container';
14
+ import Footer from '@micromag/element-footer';
15
+ import Header from '@micromag/element-header';
15
16
  import Heading from '@micromag/element-heading';
16
17
  import Layout from '@micromag/element-layout';
17
18
  import Text from '@micromag/element-text';
@@ -22,7 +23,9 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
22
23
  import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
23
24
  import { Image, Heading1, Text as Text$1, Container as Container$1 } from '@micromag/transforms/apple-news';
24
25
 
25
- 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"};
26
+ 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","footer":"micromag-screen-image-footer","isFullscreen":"micromag-screen-image-isFullscreen","header":"micromag-screen-image-header"};
27
+
28
+ // NOTE: should this be a scrolling element ?
26
29
 
27
30
  var propTypes = {
28
31
  layout: PropTypes.oneOf(['normal', 'fullscreen', 'reverse', 'card', 'card-reverse', 'title-top']),
@@ -37,7 +40,8 @@ var propTypes = {
37
40
  withLegend: PropTypes.bool,
38
41
  spacing: PropTypes.number,
39
42
  background: PropTypes$1.backgroundElement,
40
- callToAction: PropTypes$1.callToAction,
43
+ header: PropTypes$1.header,
44
+ footer: PropTypes$1.footer,
41
45
  current: PropTypes.bool,
42
46
  active: PropTypes.bool,
43
47
  transitions: PropTypes$1.transitions,
@@ -56,7 +60,8 @@ var defaultProps = {
56
60
  withLegend: false,
57
61
  spacing: 20,
58
62
  background: null,
59
- callToAction: null,
63
+ header: null,
64
+ footer: null,
60
65
  current: true,
61
66
  active: true,
62
67
  transitions: null,
@@ -76,7 +81,8 @@ var ImageScreen = function ImageScreen(_ref) {
76
81
  withLegend = _ref.withLegend,
77
82
  spacing = _ref.spacing,
78
83
  background = _ref.background,
79
- callToAction = _ref.callToAction,
84
+ header = _ref.header,
85
+ footer = _ref.footer,
80
86
  current = _ref.current,
81
87
  active = _ref.active,
82
88
  transitions = _ref.transitions,
@@ -241,29 +247,14 @@ var ImageScreen = function ImageScreen(_ref) {
241
247
  items.splice(0, 0, items.splice(1, 1)[0]);
242
248
  }
243
249
  }
244
- var hasCallToAction = callToAction !== null && callToAction.active === true;
245
- if (!isPlaceholder && hasCallToAction) {
246
- items.push( /*#__PURE__*/React.createElement("div", {
247
- className: styles.callToAction,
248
- style: isFullscreen || isCardReverse ? {
249
- paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
250
- paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
251
- paddingTop: spacing / 2,
252
- paddingBottom: spacing / 2,
253
- transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null
254
- } : {
255
- paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
256
- paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0),
257
- paddingTop: isCard ? spacing / 2 : null,
258
- paddingBottom: isCard ? spacing / 2 : null
259
- },
260
- key: "call-to-action"
261
- }, /*#__PURE__*/React.createElement(CallToAction, Object.assign({}, callToAction, {
262
- animationDisabled: isPreview,
263
- focusable: current && isView,
264
- openWebView: openWebView
265
- }))));
266
- }
250
+ var hasHeader = isHeaderFilled(header);
251
+ var hasFooter = isFooterFilled(footer);
252
+ var footerProps = getFooterProps(footer, {
253
+ isView: isView,
254
+ current: current,
255
+ openWebView: openWebView,
256
+ isPreview: isPreview
257
+ });
267
258
  var paddingBottom = (current && !isPreview ? viewerBottomHeight : 0) + finalSpacing / 2;
268
259
  var paddingTop = (!isPreview ? viewerTopHeight : 0) + finalSpacing / 2;
269
260
  if (isCard || isFullscreen) {
@@ -289,7 +280,36 @@ var ImageScreen = function ImageScreen(_ref) {
289
280
  paddingTop: paddingTop,
290
281
  paddingBottom: paddingBottom
291
282
  } : null
292
- }, items)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
283
+ }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
284
+ className: styles.header,
285
+ style: isFullscreen || isCardReverse ? {
286
+ paddingTop: spacing,
287
+ paddingBottom: spacing / 2,
288
+ paddingLeft: isCardReverse ? spacing / 2 : spacing,
289
+ paddingRight: isCardReverse ? spacing / 2 : spacing,
290
+ transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
291
+ } : {
292
+ paddingTop: isCard || isCardReverse ? spacing : spacing / 2,
293
+ paddingBottom: isCard || isCardReverse ? spacing : spacing / 2,
294
+ paddingLeft: spacing / 2,
295
+ paddingRight: spacing / 2
296
+ }
297
+ }, /*#__PURE__*/React.createElement(Header, header)) : null, items, !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
298
+ className: styles.footer,
299
+ style: isFullscreen || isCardReverse ? {
300
+ paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
301
+ paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
302
+ paddingTop: spacing / 2,
303
+ paddingBottom: spacing / 2,
304
+ transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null
305
+ } : {
306
+ paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
307
+ paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0),
308
+ paddingTop: isCard ? spacing / 2 : null,
309
+ paddingBottom: isCard ? spacing / 2 : null
310
+ },
311
+ key: "call-to-action"
312
+ }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
293
313
  background: background,
294
314
  width: width,
295
315
  height: height,
@@ -443,17 +463,25 @@ var definition = [{
443
463
  }]
444
464
  })
445
465
  }, {
446
- name: 'callToAction',
447
- type: 'call-to-action',
448
- theme: {
449
- boxStyle: 'cta',
450
- label: {
451
- textStyle: 'cta'
452
- }
453
- }
466
+ name: 'header',
467
+ type: 'header',
468
+ label: defineMessage({
469
+ id: "rhuDxI",
470
+ defaultMessage: [{
471
+ "type": 0,
472
+ "value": "Header"
473
+ }]
474
+ })
454
475
  }, {
455
- name: 'shareIncentive',
456
- type: 'share-incentive'
476
+ name: 'footer',
477
+ type: 'footer',
478
+ label: defineMessage({
479
+ id: "g4nybp",
480
+ defaultMessage: [{
481
+ "type": 0,
482
+ "value": "Footer"
483
+ }]
484
+ })
457
485
  }]
458
486
  }, {
459
487
  id: 'image-title',
package/lib/index.js CHANGED
@@ -14,8 +14,9 @@ var contexts = require('@micromag/core/contexts');
14
14
  var hooks = require('@micromag/core/hooks');
15
15
  var utils = require('@micromag/core/utils');
16
16
  var Background = require('@micromag/element-background');
17
- var CallToAction = require('@micromag/element-call-to-action');
18
17
  var Container = require('@micromag/element-container');
18
+ var Footer = require('@micromag/element-footer');
19
+ var Header = require('@micromag/element-header');
19
20
  var Heading = require('@micromag/element-heading');
20
21
  var Layout = require('@micromag/element-layout');
21
22
  var Text = require('@micromag/element-text');
@@ -34,8 +35,9 @@ var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
34
35
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
35
36
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
36
37
  var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
37
- var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
38
38
  var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
39
+ var Footer__default = /*#__PURE__*/_interopDefaultLegacy(Footer);
40
+ var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header);
39
41
  var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
40
42
  var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
41
43
  var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
@@ -45,7 +47,9 @@ var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
45
47
  var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
46
48
  var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
47
49
 
48
- 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"};
50
+ 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","footer":"micromag-screen-image-footer","isFullscreen":"micromag-screen-image-isFullscreen","header":"micromag-screen-image-header"};
51
+
52
+ // NOTE: should this be a scrolling element ?
49
53
 
50
54
  var propTypes = {
51
55
  layout: PropTypes__default["default"].oneOf(['normal', 'fullscreen', 'reverse', 'card', 'card-reverse', 'title-top']),
@@ -60,7 +64,8 @@ var propTypes = {
60
64
  withLegend: PropTypes__default["default"].bool,
61
65
  spacing: PropTypes__default["default"].number,
62
66
  background: core.PropTypes.backgroundElement,
63
- callToAction: core.PropTypes.callToAction,
67
+ header: core.PropTypes.header,
68
+ footer: core.PropTypes.footer,
64
69
  current: PropTypes__default["default"].bool,
65
70
  active: PropTypes__default["default"].bool,
66
71
  transitions: core.PropTypes.transitions,
@@ -79,7 +84,8 @@ var defaultProps = {
79
84
  withLegend: false,
80
85
  spacing: 20,
81
86
  background: null,
82
- callToAction: null,
87
+ header: null,
88
+ footer: null,
83
89
  current: true,
84
90
  active: true,
85
91
  transitions: null,
@@ -99,7 +105,8 @@ var ImageScreen = function ImageScreen(_ref) {
99
105
  withLegend = _ref.withLegend,
100
106
  spacing = _ref.spacing,
101
107
  background = _ref.background,
102
- callToAction = _ref.callToAction,
108
+ header = _ref.header,
109
+ footer = _ref.footer,
103
110
  current = _ref.current,
104
111
  active = _ref.active,
105
112
  transitions = _ref.transitions,
@@ -264,29 +271,14 @@ var ImageScreen = function ImageScreen(_ref) {
264
271
  items.splice(0, 0, items.splice(1, 1)[0]);
265
272
  }
266
273
  }
267
- var hasCallToAction = callToAction !== null && callToAction.active === true;
268
- if (!isPlaceholder && hasCallToAction) {
269
- items.push( /*#__PURE__*/React__default["default"].createElement("div", {
270
- className: styles.callToAction,
271
- style: isFullscreen || isCardReverse ? {
272
- paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
273
- paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
274
- paddingTop: spacing / 2,
275
- paddingBottom: spacing / 2,
276
- transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null
277
- } : {
278
- paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
279
- paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0),
280
- paddingTop: isCard ? spacing / 2 : null,
281
- paddingBottom: isCard ? spacing / 2 : null
282
- },
283
- key: "call-to-action"
284
- }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], Object.assign({}, callToAction, {
285
- animationDisabled: isPreview,
286
- focusable: current && isView,
287
- openWebView: openWebView
288
- }))));
289
- }
274
+ var hasHeader = utils.isHeaderFilled(header);
275
+ var hasFooter = utils.isFooterFilled(footer);
276
+ var footerProps = utils.getFooterProps(footer, {
277
+ isView: isView,
278
+ current: current,
279
+ openWebView: openWebView,
280
+ isPreview: isPreview
281
+ });
290
282
  var paddingBottom = (current && !isPreview ? viewerBottomHeight : 0) + finalSpacing / 2;
291
283
  var paddingTop = (!isPreview ? viewerTopHeight : 0) + finalSpacing / 2;
292
284
  if (isCard || isFullscreen) {
@@ -312,7 +304,36 @@ var ImageScreen = function ImageScreen(_ref) {
312
304
  paddingTop: paddingTop,
313
305
  paddingBottom: paddingBottom
314
306
  } : null
315
- }, items)), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
307
+ }, !isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
308
+ className: styles.header,
309
+ style: isFullscreen || isCardReverse ? {
310
+ paddingTop: spacing,
311
+ paddingBottom: spacing / 2,
312
+ paddingLeft: isCardReverse ? spacing / 2 : spacing,
313
+ paddingRight: isCardReverse ? spacing / 2 : spacing,
314
+ transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
315
+ } : {
316
+ paddingTop: isCard || isCardReverse ? spacing : spacing / 2,
317
+ paddingBottom: isCard || isCardReverse ? spacing : spacing / 2,
318
+ paddingLeft: spacing / 2,
319
+ paddingRight: spacing / 2
320
+ }
321
+ }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, items, !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
322
+ className: styles.footer,
323
+ style: isFullscreen || isCardReverse ? {
324
+ paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
325
+ paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
326
+ paddingTop: spacing / 2,
327
+ paddingBottom: spacing / 2,
328
+ transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null
329
+ } : {
330
+ paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
331
+ paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0),
332
+ paddingTop: isCard ? spacing / 2 : null,
333
+ paddingBottom: isCard ? spacing / 2 : null
334
+ },
335
+ key: "call-to-action"
336
+ }, /*#__PURE__*/React__default["default"].createElement(Footer__default["default"], footerProps)) : null)), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
316
337
  background: background,
317
338
  width: width,
318
339
  height: height,
@@ -466,17 +487,25 @@ var definition = [{
466
487
  }]
467
488
  })
468
489
  }, {
469
- name: 'callToAction',
470
- type: 'call-to-action',
471
- theme: {
472
- boxStyle: 'cta',
473
- label: {
474
- textStyle: 'cta'
475
- }
476
- }
490
+ name: 'header',
491
+ type: 'header',
492
+ label: reactIntl.defineMessage({
493
+ id: "rhuDxI",
494
+ defaultMessage: [{
495
+ "type": 0,
496
+ "value": "Header"
497
+ }]
498
+ })
477
499
  }, {
478
- name: 'shareIncentive',
479
- type: 'share-incentive'
500
+ name: 'footer',
501
+ type: 'footer',
502
+ label: reactIntl.defineMessage({
503
+ id: "g4nybp",
504
+ defaultMessage: [{
505
+ "type": 0,
506
+ "value": "Footer"
507
+ }]
508
+ })
480
509
  }]
481
510
  }, {
482
511
  id: 'image-title',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-image",
3
- "version": "0.3.347",
3
+ "version": "0.3.354",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -49,15 +49,16 @@
49
49
  },
50
50
  "dependencies": {
51
51
  "@babel/runtime": "^7.13.10",
52
- "@micromag/core": "^0.3.347",
53
- "@micromag/element-background": "^0.3.347",
54
- "@micromag/element-call-to-action": "^0.3.347",
55
- "@micromag/element-container": "^0.3.347",
56
- "@micromag/element-heading": "^0.3.347",
57
- "@micromag/element-layout": "^0.3.347",
58
- "@micromag/element-text": "^0.3.347",
59
- "@micromag/element-visual": "^0.3.347",
60
- "@micromag/transforms": "^0.3.347",
52
+ "@micromag/core": "^0.3.354",
53
+ "@micromag/element-background": "^0.3.354",
54
+ "@micromag/element-container": "^0.3.354",
55
+ "@micromag/element-footer": "^0.3.354",
56
+ "@micromag/element-header": "^0.3.354",
57
+ "@micromag/element-heading": "^0.3.354",
58
+ "@micromag/element-layout": "^0.3.354",
59
+ "@micromag/element-text": "^0.3.354",
60
+ "@micromag/element-visual": "^0.3.354",
61
+ "@micromag/transforms": "^0.3.354",
61
62
  "classnames": "^2.2.6",
62
63
  "lodash": "^4.17.21",
63
64
  "prop-types": "^15.7.2",
@@ -67,5 +68,5 @@
67
68
  "publishConfig": {
68
69
  "access": "public"
69
70
  },
70
- "gitHead": "63a7e46763ae34c4143f0aa29a4c9467126e7734"
71
+ "gitHead": "ccf852d0a7df8f222365088e7de3843492e720e7"
71
72
  }