@micromag/screen-title 0.3.348 → 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 (3) hide show
  1. package/es/index.js +108 -82
  2. package/lib/index.js +108 -81
  3. package/package.json +11 -10
package/es/index.js CHANGED
@@ -4,12 +4,13 @@ import classNames from 'classnames';
4
4
  import PropTypes from 'prop-types';
5
5
  import React from 'react';
6
6
  import { PropTypes as PropTypes$1 } from '@micromag/core';
7
- import { ScreenElement, TransitionsStagger } from '@micromag/core/components';
7
+ import { ScreenElement } from '@micromag/core/components';
8
8
  import { useScreenSize, useScreenRenderContext, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
9
- import { isTextFilled, getStyleFromBox } from '@micromag/core/utils';
9
+ import { isTextFilled, isHeaderFilled, isFooterFilled, getFooterProps, getStyleFromBox } from '@micromag/core/utils';
10
10
  import Background from '@micromag/element-background';
11
- import CallToAction from '@micromag/element-call-to-action';
12
11
  import Container from '@micromag/element-container';
12
+ import Footer from '@micromag/element-footer';
13
+ import Header from '@micromag/element-header';
13
14
  import Heading from '@micromag/element-heading';
14
15
  import Layout, { Spacer } from '@micromag/element-layout';
15
16
  import Text from '@micromag/element-text';
@@ -33,8 +34,9 @@ var propTypes$2 = {
33
34
  withBox: PropTypes.bool,
34
35
  spacing: PropTypes.number,
35
36
  descriptionEmptyLabel: PropTypes$1.label,
37
+ header: PropTypes$1.header,
38
+ footer: PropTypes$1.footer,
36
39
  background: PropTypes$1.backgroundElement,
37
- callToAction: PropTypes$1.callToAction,
38
40
  current: PropTypes.bool,
39
41
  active: PropTypes.bool,
40
42
  transitions: PropTypes$1.transitions,
@@ -58,8 +60,9 @@ var defaultProps$2 = {
58
60
  "value": "Description"
59
61
  }]
60
62
  }),
63
+ header: null,
64
+ footer: null,
61
65
  background: null,
62
- callToAction: null,
63
66
  current: true,
64
67
  active: true,
65
68
  transitions: null,
@@ -78,12 +81,11 @@ var TitleScreen = function TitleScreen(_ref) {
78
81
  withBox = _ref.withBox,
79
82
  spacing = _ref.spacing,
80
83
  descriptionEmptyLabel = _ref.descriptionEmptyLabel,
84
+ header = _ref.header,
85
+ footer = _ref.footer,
81
86
  background = _ref.background,
82
- callToAction = _ref.callToAction,
83
87
  current = _ref.current,
84
88
  active = _ref.active,
85
- transitions = _ref.transitions,
86
- transitionStagger = _ref.transitionStagger,
87
89
  className = _ref.className;
88
90
  var _useScreenSize = useScreenSize(),
89
91
  width = _useScreenSize.width,
@@ -93,9 +95,7 @@ var TitleScreen = function TitleScreen(_ref) {
93
95
  isView = _useScreenRenderConte.isView,
94
96
  isPreview = _useScreenRenderConte.isPreview,
95
97
  isPlaceholder = _useScreenRenderConte.isPlaceholder,
96
- isEdit = _useScreenRenderConte.isEdit,
97
- isStatic = _useScreenRenderConte.isStatic,
98
- isCapture = _useScreenRenderConte.isCapture;
98
+ isEdit = _useScreenRenderConte.isEdit;
99
99
  var _useViewerContext = useViewerContext(),
100
100
  viewerTopHeight = _useViewerContext.topHeight,
101
101
  viewerBottomHeight = _useViewerContext.bottomHeight,
@@ -112,14 +112,20 @@ var TitleScreen = function TitleScreen(_ref) {
112
112
  var isSplitted = layoutParts[0] === 'split';
113
113
  var isTopLayout = layout === 'top';
114
114
  var isMiddleLayout = layout === 'middle';
115
+ var isBottomLayout = layout === 'bottom';
115
116
  var verticalAlign = isSplitted ? layoutParts[1] || null : layoutParts[0];
116
117
  var titleWithMargin = hasTitle && (hasSubtitle || hasDescription) && (!isSplitted || verticalAlign === 'top');
117
118
  var subtitleWithMargin = hasSubtitle && hasDescription && (!isSplitted || verticalAlign === 'bottom');
118
- var transitionPlaying = current;
119
- var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
120
119
  var backgroundPlaying = current && (isView || isEdit);
121
120
  var backgroundShouldLoad = current || active;
122
- var hasCallToAction = callToAction !== null && callToAction.active === true;
121
+ var hasHeader = isHeaderFilled(header);
122
+ var hasFooter = isFooterFilled(footer);
123
+ var footerProps = getFooterProps(footer, {
124
+ isView: isView,
125
+ current: current,
126
+ openWebView: openWebView,
127
+ isPreview: isPreview
128
+ });
123
129
  var titleElement = /*#__PURE__*/React.createElement(ScreenElement, {
124
130
  key: "title",
125
131
  placeholder: "title",
@@ -177,24 +183,20 @@ var TitleScreen = function TitleScreen(_ref) {
177
183
  paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
178
184
  paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing
179
185
  } : null
180
- }, !isPlaceholder && hasCallToAction && isMiddleLayout ? /*#__PURE__*/React.createElement(Spacer, {
186
+ }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
187
+ style: {
188
+ paddingBottom: spacing
189
+ }
190
+ }, /*#__PURE__*/React.createElement(Header, header)) : null, !isPlaceholder && hasFooter && isMiddleLayout ? /*#__PURE__*/React.createElement(Spacer, {
191
+ key: "spacer-cta-top"
192
+ }) : null, !isPlaceholder && hasHeader && isBottomLayout ? /*#__PURE__*/React.createElement(Spacer, {
193
+ key: "spacer-cta-top"
194
+ }) : null, !isPlaceholder && hasHeader && !hasFooter && isMiddleLayout ? /*#__PURE__*/React.createElement(Spacer, {
181
195
  key: "spacer-cta-top"
182
196
  }) : null, withBox && !isSplitted ? /*#__PURE__*/React.createElement("div", {
183
197
  className: styles.box,
184
198
  style: isEdit || isPlaceholder || hasTitle || hasSubtitle || hasDescription ? getStyleFromBox(boxStyle) : null
185
- }, /*#__PURE__*/React.createElement(TransitionsStagger, {
186
- transitions: transitions,
187
- stagger: transitionStagger,
188
- disabled: transitionDisabled,
189
- playing: transitionPlaying,
190
- focusable: current && isView
191
- }, [titleElement, subtitleElement, descriptionElement])) : null, withBox && isSplitted ? /*#__PURE__*/React.createElement(TransitionsStagger, {
192
- transitions: transitions,
193
- stagger: transitionStagger,
194
- disabled: transitionDisabled,
195
- playing: transitionPlaying,
196
- focusable: current && isView
197
- }, /*#__PURE__*/React.createElement("div", {
199
+ }, [titleElement, subtitleElement, descriptionElement]) : null, withBox && isSplitted ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
198
200
  className: styles.box,
199
201
  key: "top",
200
202
  style: isEdit || isPlaceholder || hasTitle || withDescription && verticalAlign === 'top' && hasSubtitle ? getStyleFromBox(boxStyle) : null
@@ -204,30 +206,22 @@ var TitleScreen = function TitleScreen(_ref) {
204
206
  className: styles.box,
205
207
  key: "bottom",
206
208
  style: isEdit || isPlaceholder || hasDescription || (!withDescription || verticalAlign === 'bottom') && hasSubtitle ? getStyleFromBox(boxStyle) : null
207
- }, !withDescription || verticalAlign === 'bottom' ? subtitleElement : null, descriptionElement)) : null, !withBox ? /*#__PURE__*/React.createElement(TransitionsStagger, {
208
- transitions: transitions,
209
- stagger: transitionStagger,
210
- disabled: transitionDisabled,
211
- playing: transitionPlaying,
212
- focusable: current && isView
213
- }, titleElement, isSplitted && (!withDescription || verticalAlign === 'bottom') && /*#__PURE__*/React.createElement(Spacer, {
209
+ }, !withDescription || verticalAlign === 'bottom' ? subtitleElement : null, descriptionElement)) : null, !withBox ? /*#__PURE__*/React.createElement(React.Fragment, null, titleElement, isSplitted && (!withDescription || verticalAlign === 'bottom') && /*#__PURE__*/React.createElement(Spacer, {
214
210
  key: "spacer1"
215
211
  }), subtitleElement, isSplitted && withDescription && verticalAlign === 'top' && /*#__PURE__*/React.createElement(Spacer, {
216
212
  key: "spacer2"
217
- }), descriptionElement) : null, !isPlaceholder && hasCallToAction && (isTopLayout || isMiddleLayout) ? /*#__PURE__*/React.createElement(Spacer, {
213
+ }), descriptionElement) : null, !isPlaceholder && hasFooter && (isTopLayout || isMiddleLayout) ? /*#__PURE__*/React.createElement(Spacer, {
214
+ key: "spacer-cta-bottom"
215
+ }) : null, !isPlaceholder && hasHeader && !hasFooter && isMiddleLayout ? /*#__PURE__*/React.createElement(Spacer, {
218
216
  key: "spacer-cta-bottom"
219
- }) : null, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
217
+ }) : null, !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
220
218
  key: "call-to-action",
221
219
  style: {
222
220
  paddingTop: spacing,
223
221
  paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
224
222
  paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
225
223
  }
226
- }, /*#__PURE__*/React.createElement(CallToAction, Object.assign({}, callToAction, {
227
- animationDisabled: isPreview,
228
- focusable: current && isView,
229
- openWebView: openWebView
230
- }))) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
224
+ }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
231
225
  background: background,
232
226
  width: width,
233
227
  height: height,
@@ -376,17 +370,25 @@ var definition = [{
376
370
  }]
377
371
  })
378
372
  }, {
379
- name: 'callToAction',
380
- type: 'call-to-action',
381
- theme: {
382
- boxStyle: 'cta',
383
- label: {
384
- textStyle: 'cta'
385
- }
386
- }
373
+ name: 'header',
374
+ type: 'header',
375
+ label: defineMessage({
376
+ id: "rhuDxI",
377
+ defaultMessage: [{
378
+ "type": 0,
379
+ "value": "Header"
380
+ }]
381
+ })
387
382
  }, {
388
- name: 'shareIncentive',
389
- type: 'share-incentive'
383
+ name: 'footer',
384
+ type: 'footer',
385
+ label: defineMessage({
386
+ id: "g4nybp",
387
+ defaultMessage: [{
388
+ "type": 0,
389
+ "value": "Footer"
390
+ }]
391
+ })
390
392
  }]
391
393
  }, {
392
394
  id: 'title-subtitle',
@@ -459,17 +461,25 @@ var definition = [{
459
461
  }]
460
462
  })
461
463
  }, {
462
- name: 'callToAction',
463
- type: 'call-to-action',
464
- theme: {
465
- boxStyle: 'cta',
466
- label: {
467
- textStyle: 'cta'
468
- }
469
- }
464
+ name: 'header',
465
+ type: 'header',
466
+ label: defineMessage({
467
+ id: "rhuDxI",
468
+ defaultMessage: [{
469
+ "type": 0,
470
+ "value": "Header"
471
+ }]
472
+ })
470
473
  }, {
471
- name: 'shareIncentive',
472
- type: 'share-incentive'
474
+ name: 'footer',
475
+ type: 'footer',
476
+ label: defineMessage({
477
+ id: "g4nybp",
478
+ defaultMessage: [{
479
+ "type": 0,
480
+ "value": "Footer"
481
+ }]
482
+ })
473
483
  }]
474
484
  }, {
475
485
  id: 'title-subtitle-credits',
@@ -555,17 +565,25 @@ var definition = [{
555
565
  }]
556
566
  })
557
567
  }, {
558
- name: 'callToAction',
559
- type: 'call-to-action',
560
- theme: {
561
- boxStyle: 'cta',
562
- label: {
563
- textStyle: 'cta'
564
- }
565
- }
568
+ name: 'header',
569
+ type: 'header',
570
+ label: defineMessage({
571
+ id: "rhuDxI",
572
+ defaultMessage: [{
573
+ "type": 0,
574
+ "value": "Header"
575
+ }]
576
+ })
566
577
  }, {
567
- name: 'shareIncentive',
568
- type: 'share-incentive'
578
+ name: 'footer',
579
+ type: 'footer',
580
+ label: defineMessage({
581
+ id: "g4nybp",
582
+ defaultMessage: [{
583
+ "type": 0,
584
+ "value": "Footer"
585
+ }]
586
+ })
569
587
  }]
570
588
  }, {
571
589
  id: 'title-with-box',
@@ -672,17 +690,25 @@ var definition = [{
672
690
  }]
673
691
  })
674
692
  }, {
675
- name: 'callToAction',
676
- type: 'call-to-action',
677
- theme: {
678
- boxStyle: 'cta',
679
- label: {
680
- textStyle: 'cta'
681
- }
682
- }
693
+ name: 'header',
694
+ type: 'header',
695
+ label: defineMessage({
696
+ id: "rhuDxI",
697
+ defaultMessage: [{
698
+ "type": 0,
699
+ "value": "Header"
700
+ }]
701
+ })
683
702
  }, {
684
- name: 'shareIncentive',
685
- type: 'share-incentive'
703
+ name: 'footer',
704
+ type: 'footer',
705
+ label: defineMessage({
706
+ id: "g4nybp",
707
+ defaultMessage: [{
708
+ "type": 0,
709
+ "value": "Footer"
710
+ }]
711
+ })
686
712
  }]
687
713
  }];
688
714
 
package/lib/index.js CHANGED
@@ -12,8 +12,9 @@ var components = require('@micromag/core/components');
12
12
  var contexts = require('@micromag/core/contexts');
13
13
  var utils = require('@micromag/core/utils');
14
14
  var Background = require('@micromag/element-background');
15
- var CallToAction = require('@micromag/element-call-to-action');
16
15
  var Container = require('@micromag/element-container');
16
+ var Footer = require('@micromag/element-footer');
17
+ var Header = require('@micromag/element-header');
17
18
  var Heading = require('@micromag/element-heading');
18
19
  var Layout = require('@micromag/element-layout');
19
20
  var Text = require('@micromag/element-text');
@@ -31,8 +32,9 @@ var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
31
32
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
32
33
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
33
34
  var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
34
- var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
35
35
  var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
36
+ var Footer__default = /*#__PURE__*/_interopDefaultLegacy(Footer);
37
+ var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header);
36
38
  var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
37
39
  var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
38
40
  var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
@@ -55,8 +57,9 @@ var propTypes$2 = {
55
57
  withBox: PropTypes__default["default"].bool,
56
58
  spacing: PropTypes__default["default"].number,
57
59
  descriptionEmptyLabel: core.PropTypes.label,
60
+ header: core.PropTypes.header,
61
+ footer: core.PropTypes.footer,
58
62
  background: core.PropTypes.backgroundElement,
59
- callToAction: core.PropTypes.callToAction,
60
63
  current: PropTypes__default["default"].bool,
61
64
  active: PropTypes__default["default"].bool,
62
65
  transitions: core.PropTypes.transitions,
@@ -80,8 +83,9 @@ var defaultProps$2 = {
80
83
  "value": "Description"
81
84
  }]
82
85
  }),
86
+ header: null,
87
+ footer: null,
83
88
  background: null,
84
- callToAction: null,
85
89
  current: true,
86
90
  active: true,
87
91
  transitions: null,
@@ -100,12 +104,11 @@ var TitleScreen = function TitleScreen(_ref) {
100
104
  withBox = _ref.withBox,
101
105
  spacing = _ref.spacing,
102
106
  descriptionEmptyLabel = _ref.descriptionEmptyLabel,
107
+ header = _ref.header,
108
+ footer = _ref.footer,
103
109
  background = _ref.background,
104
- callToAction = _ref.callToAction,
105
110
  current = _ref.current,
106
111
  active = _ref.active,
107
- transitions = _ref.transitions,
108
- transitionStagger = _ref.transitionStagger,
109
112
  className = _ref.className;
110
113
  var _useScreenSize = contexts.useScreenSize(),
111
114
  width = _useScreenSize.width,
@@ -115,9 +118,7 @@ var TitleScreen = function TitleScreen(_ref) {
115
118
  isView = _useScreenRenderConte.isView,
116
119
  isPreview = _useScreenRenderConte.isPreview,
117
120
  isPlaceholder = _useScreenRenderConte.isPlaceholder,
118
- isEdit = _useScreenRenderConte.isEdit,
119
- isStatic = _useScreenRenderConte.isStatic,
120
- isCapture = _useScreenRenderConte.isCapture;
121
+ isEdit = _useScreenRenderConte.isEdit;
121
122
  var _useViewerContext = contexts.useViewerContext(),
122
123
  viewerTopHeight = _useViewerContext.topHeight,
123
124
  viewerBottomHeight = _useViewerContext.bottomHeight,
@@ -134,14 +135,20 @@ var TitleScreen = function TitleScreen(_ref) {
134
135
  var isSplitted = layoutParts[0] === 'split';
135
136
  var isTopLayout = layout === 'top';
136
137
  var isMiddleLayout = layout === 'middle';
138
+ var isBottomLayout = layout === 'bottom';
137
139
  var verticalAlign = isSplitted ? layoutParts[1] || null : layoutParts[0];
138
140
  var titleWithMargin = hasTitle && (hasSubtitle || hasDescription) && (!isSplitted || verticalAlign === 'top');
139
141
  var subtitleWithMargin = hasSubtitle && hasDescription && (!isSplitted || verticalAlign === 'bottom');
140
- var transitionPlaying = current;
141
- var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
142
142
  var backgroundPlaying = current && (isView || isEdit);
143
143
  var backgroundShouldLoad = current || active;
144
- var hasCallToAction = callToAction !== null && callToAction.active === true;
144
+ var hasHeader = utils.isHeaderFilled(header);
145
+ var hasFooter = utils.isFooterFilled(footer);
146
+ var footerProps = utils.getFooterProps(footer, {
147
+ isView: isView,
148
+ current: current,
149
+ openWebView: openWebView,
150
+ isPreview: isPreview
151
+ });
145
152
  var titleElement = /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
146
153
  key: "title",
147
154
  placeholder: "title",
@@ -199,24 +206,20 @@ var TitleScreen = function TitleScreen(_ref) {
199
206
  paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
200
207
  paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing
201
208
  } : null
202
- }, !isPlaceholder && hasCallToAction && isMiddleLayout ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
209
+ }, !isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
210
+ style: {
211
+ paddingBottom: spacing
212
+ }
213
+ }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, !isPlaceholder && hasFooter && isMiddleLayout ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
214
+ key: "spacer-cta-top"
215
+ }) : null, !isPlaceholder && hasHeader && isBottomLayout ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
216
+ key: "spacer-cta-top"
217
+ }) : null, !isPlaceholder && hasHeader && !hasFooter && isMiddleLayout ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
203
218
  key: "spacer-cta-top"
204
219
  }) : null, withBox && !isSplitted ? /*#__PURE__*/React__default["default"].createElement("div", {
205
220
  className: styles.box,
206
221
  style: isEdit || isPlaceholder || hasTitle || hasSubtitle || hasDescription ? utils.getStyleFromBox(boxStyle) : null
207
- }, /*#__PURE__*/React__default["default"].createElement(components.TransitionsStagger, {
208
- transitions: transitions,
209
- stagger: transitionStagger,
210
- disabled: transitionDisabled,
211
- playing: transitionPlaying,
212
- focusable: current && isView
213
- }, [titleElement, subtitleElement, descriptionElement])) : null, withBox && isSplitted ? /*#__PURE__*/React__default["default"].createElement(components.TransitionsStagger, {
214
- transitions: transitions,
215
- stagger: transitionStagger,
216
- disabled: transitionDisabled,
217
- playing: transitionPlaying,
218
- focusable: current && isView
219
- }, /*#__PURE__*/React__default["default"].createElement("div", {
222
+ }, [titleElement, subtitleElement, descriptionElement]) : null, withBox && isSplitted ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
220
223
  className: styles.box,
221
224
  key: "top",
222
225
  style: isEdit || isPlaceholder || hasTitle || withDescription && verticalAlign === 'top' && hasSubtitle ? utils.getStyleFromBox(boxStyle) : null
@@ -226,30 +229,22 @@ var TitleScreen = function TitleScreen(_ref) {
226
229
  className: styles.box,
227
230
  key: "bottom",
228
231
  style: isEdit || isPlaceholder || hasDescription || (!withDescription || verticalAlign === 'bottom') && hasSubtitle ? utils.getStyleFromBox(boxStyle) : null
229
- }, !withDescription || verticalAlign === 'bottom' ? subtitleElement : null, descriptionElement)) : null, !withBox ? /*#__PURE__*/React__default["default"].createElement(components.TransitionsStagger, {
230
- transitions: transitions,
231
- stagger: transitionStagger,
232
- disabled: transitionDisabled,
233
- playing: transitionPlaying,
234
- focusable: current && isView
235
- }, titleElement, isSplitted && (!withDescription || verticalAlign === 'bottom') && /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
232
+ }, !withDescription || verticalAlign === 'bottom' ? subtitleElement : null, descriptionElement)) : null, !withBox ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, titleElement, isSplitted && (!withDescription || verticalAlign === 'bottom') && /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
236
233
  key: "spacer1"
237
234
  }), subtitleElement, isSplitted && withDescription && verticalAlign === 'top' && /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
238
235
  key: "spacer2"
239
- }), descriptionElement) : null, !isPlaceholder && hasCallToAction && (isTopLayout || isMiddleLayout) ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
236
+ }), descriptionElement) : null, !isPlaceholder && hasFooter && (isTopLayout || isMiddleLayout) ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
237
+ key: "spacer-cta-bottom"
238
+ }) : null, !isPlaceholder && hasHeader && !hasFooter && isMiddleLayout ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
240
239
  key: "spacer-cta-bottom"
241
- }) : null, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
240
+ }) : null, !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
242
241
  key: "call-to-action",
243
242
  style: {
244
243
  paddingTop: spacing,
245
244
  paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
246
245
  paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
247
246
  }
248
- }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], Object.assign({}, callToAction, {
249
- animationDisabled: isPreview,
250
- focusable: current && isView,
251
- openWebView: openWebView
252
- }))) : null)), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
247
+ }, /*#__PURE__*/React__default["default"].createElement(Footer__default["default"], footerProps)) : null)), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
253
248
  background: background,
254
249
  width: width,
255
250
  height: height,
@@ -398,17 +393,25 @@ var definition = [{
398
393
  }]
399
394
  })
400
395
  }, {
401
- name: 'callToAction',
402
- type: 'call-to-action',
403
- theme: {
404
- boxStyle: 'cta',
405
- label: {
406
- textStyle: 'cta'
407
- }
408
- }
396
+ name: 'header',
397
+ type: 'header',
398
+ label: reactIntl.defineMessage({
399
+ id: "rhuDxI",
400
+ defaultMessage: [{
401
+ "type": 0,
402
+ "value": "Header"
403
+ }]
404
+ })
409
405
  }, {
410
- name: 'shareIncentive',
411
- type: 'share-incentive'
406
+ name: 'footer',
407
+ type: 'footer',
408
+ label: reactIntl.defineMessage({
409
+ id: "g4nybp",
410
+ defaultMessage: [{
411
+ "type": 0,
412
+ "value": "Footer"
413
+ }]
414
+ })
412
415
  }]
413
416
  }, {
414
417
  id: 'title-subtitle',
@@ -481,17 +484,25 @@ var definition = [{
481
484
  }]
482
485
  })
483
486
  }, {
484
- name: 'callToAction',
485
- type: 'call-to-action',
486
- theme: {
487
- boxStyle: 'cta',
488
- label: {
489
- textStyle: 'cta'
490
- }
491
- }
487
+ name: 'header',
488
+ type: 'header',
489
+ label: reactIntl.defineMessage({
490
+ id: "rhuDxI",
491
+ defaultMessage: [{
492
+ "type": 0,
493
+ "value": "Header"
494
+ }]
495
+ })
492
496
  }, {
493
- name: 'shareIncentive',
494
- type: 'share-incentive'
497
+ name: 'footer',
498
+ type: 'footer',
499
+ label: reactIntl.defineMessage({
500
+ id: "g4nybp",
501
+ defaultMessage: [{
502
+ "type": 0,
503
+ "value": "Footer"
504
+ }]
505
+ })
495
506
  }]
496
507
  }, {
497
508
  id: 'title-subtitle-credits',
@@ -577,17 +588,25 @@ var definition = [{
577
588
  }]
578
589
  })
579
590
  }, {
580
- name: 'callToAction',
581
- type: 'call-to-action',
582
- theme: {
583
- boxStyle: 'cta',
584
- label: {
585
- textStyle: 'cta'
586
- }
587
- }
591
+ name: 'header',
592
+ type: 'header',
593
+ label: reactIntl.defineMessage({
594
+ id: "rhuDxI",
595
+ defaultMessage: [{
596
+ "type": 0,
597
+ "value": "Header"
598
+ }]
599
+ })
588
600
  }, {
589
- name: 'shareIncentive',
590
- type: 'share-incentive'
601
+ name: 'footer',
602
+ type: 'footer',
603
+ label: reactIntl.defineMessage({
604
+ id: "g4nybp",
605
+ defaultMessage: [{
606
+ "type": 0,
607
+ "value": "Footer"
608
+ }]
609
+ })
591
610
  }]
592
611
  }, {
593
612
  id: 'title-with-box',
@@ -694,17 +713,25 @@ var definition = [{
694
713
  }]
695
714
  })
696
715
  }, {
697
- name: 'callToAction',
698
- type: 'call-to-action',
699
- theme: {
700
- boxStyle: 'cta',
701
- label: {
702
- textStyle: 'cta'
703
- }
704
- }
716
+ name: 'header',
717
+ type: 'header',
718
+ label: reactIntl.defineMessage({
719
+ id: "rhuDxI",
720
+ defaultMessage: [{
721
+ "type": 0,
722
+ "value": "Header"
723
+ }]
724
+ })
705
725
  }, {
706
- name: 'shareIncentive',
707
- type: 'share-incentive'
726
+ name: 'footer',
727
+ type: 'footer',
728
+ label: reactIntl.defineMessage({
729
+ id: "g4nybp",
730
+ defaultMessage: [{
731
+ "type": 0,
732
+ "value": "Footer"
733
+ }]
734
+ })
708
735
  }]
709
736
  }];
710
737
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-title",
3
- "version": "0.3.348",
3
+ "version": "0.3.354",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -49,14 +49,15 @@
49
49
  },
50
50
  "dependencies": {
51
51
  "@babel/runtime": "^7.13.10",
52
- "@micromag/core": "^0.3.348",
53
- "@micromag/element-background": "^0.3.348",
54
- "@micromag/element-call-to-action": "^0.3.348",
55
- "@micromag/element-container": "^0.3.348",
56
- "@micromag/element-heading": "^0.3.348",
57
- "@micromag/element-layout": "^0.3.348",
58
- "@micromag/element-text": "^0.3.348",
59
- "@micromag/transforms": "^0.3.348",
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/transforms": "^0.3.354",
60
61
  "classnames": "^2.2.6",
61
62
  "lodash": "^4.17.21",
62
63
  "prop-types": "^15.7.2",
@@ -66,5 +67,5 @@
66
67
  "publishConfig": {
67
68
  "access": "public"
68
69
  },
69
- "gitHead": "20ef008fdf5c678004b740f395f51cb548591dad"
70
+ "gitHead": "ccf852d0a7df8f222365088e7de3843492e720e7"
70
71
  }