@micromag/screen-title 0.2.409 → 0.3.1

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 +182 -40
  3. package/lib/index.js +185 -43
  4. package/package.json +10 -10
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-screen-title-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-title-disabled.micromag-screen-title-container{overflow:hidden;pointer-events:none}.micromag-screen-title-hidden.micromag-screen-title-container{display:none;visibility:hidden}.micromag-screen-title-placeholder.micromag-screen-title-container .micromag-screen-title-content{position:relative;padding:6px}.micromag-screen-title-container .micromag-screen-title-emptyDescription,.micromag-screen-title-container .micromag-screen-title-emptySubtitle,.micromag-screen-title-container .micromag-screen-title-emptyTitle{margin:5px auto;border:2px dashed #343434;color:#343434;width:100%;margin:10px auto}.micromag-screen-title-container .micromag-screen-title-emptyTitle{height:100px}.micromag-screen-title-container .micromag-screen-title-emptyDescription,.micromag-screen-title-container .micromag-screen-title-emptySubtitle{height:50px}.micromag-screen-title-container .micromag-screen-title-subtitle.micromag-screen-title-withMargin,.micromag-screen-title-container .micromag-screen-title-title.micromag-screen-title-withMargin{margin-bottom:.2em}.micromag-screen-title-container.micromag-screen-title-isPlaceholder .micromag-screen-title-layout{padding:10px}
1
+ .micromag-screen-title-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-title-disabled.micromag-screen-title-container{overflow:hidden;pointer-events:none}.micromag-screen-title-hidden.micromag-screen-title-container{display:none;visibility:hidden}.micromag-screen-title-placeholder.micromag-screen-title-container .micromag-screen-title-content{position:relative;padding:6px}.micromag-screen-title-container .micromag-screen-title-emptyDescription,.micromag-screen-title-container .micromag-screen-title-emptySubtitle,.micromag-screen-title-container .micromag-screen-title-emptyTitle{margin:5px auto;border:2px dashed #343434;color:#343434;width:100%;margin:10px auto}.micromag-screen-title-container .micromag-screen-title-emptyTitle{height:100px}.micromag-screen-title-container .micromag-screen-title-emptyDescription,.micromag-screen-title-container .micromag-screen-title-emptySubtitle{height:50px}.micromag-screen-title-container .micromag-screen-title-subtitle.micromag-screen-title-withMargin,.micromag-screen-title-container .micromag-screen-title-title.micromag-screen-title-withMargin{margin-bottom:.2em}.micromag-screen-title-container .micromag-screen-title-box{padding:.5em}.micromag-screen-title-container.micromag-screen-title-isPlaceholder .micromag-screen-title-layout{padding:10px}.micromag-screen-title-container.micromag-screen-title-isPlaceholder .micromag-screen-title-box{border:2px solid rgba(28,28,28,.5)}
package/es/index.js CHANGED
@@ -1,33 +1,35 @@
1
1
  import { FormattedMessage, defineMessage } from 'react-intl';
2
2
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
- import React from 'react';
4
- import PropTypes from 'prop-types';
5
3
  import classNames from 'classnames';
4
+ import PropTypes from 'prop-types';
5
+ import React from 'react';
6
6
  import { PropTypes as PropTypes$1 } from '@micromag/core';
7
- import { useScreenSize, useViewer, useScreenRenderContext } from '@micromag/core/contexts';
8
7
  import { ScreenElement, TransitionsStagger } from '@micromag/core/components';
9
- import { isTextFilled } from '@micromag/core/utils';
8
+ import { useScreenSize, useViewer, useScreenRenderContext } from '@micromag/core/contexts';
9
+ import { isTextFilled, getStyleFromBox } from '@micromag/core/utils';
10
10
  import Background from '@micromag/element-background';
11
+ import CallToAction from '@micromag/element-call-to-action';
11
12
  import Container from '@micromag/element-container';
12
- import Layout, { Spacer } from '@micromag/element-layout';
13
13
  import Heading from '@micromag/element-heading';
14
+ import Layout, { Spacer } from '@micromag/element-layout';
14
15
  import Text from '@micromag/element-text';
15
- import CallToAction from '@micromag/element-call-to-action';
16
16
  import _extends from '@babel/runtime/helpers/extends';
17
17
  import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
18
18
  import _objectSpread from '@babel/runtime/helpers/objectSpread2';
19
19
  import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
20
20
  import { Heading1, Heading2, Text as Text$1, Container as Container$1 } from '@micromag/transforms/apple-news';
21
21
 
22
- var styles = {"container":"micromag-screen-title-container","disabled":"micromag-screen-title-disabled","hidden":"micromag-screen-title-hidden","placeholder":"micromag-screen-title-placeholder","content":"micromag-screen-title-content","emptyDescription":"micromag-screen-title-emptyDescription","emptySubtitle":"micromag-screen-title-emptySubtitle","emptyTitle":"micromag-screen-title-emptyTitle","subtitle":"micromag-screen-title-subtitle","withMargin":"micromag-screen-title-withMargin","title":"micromag-screen-title-title","isPlaceholder":"micromag-screen-title-isPlaceholder","layout":"micromag-screen-title-layout"};
22
+ var styles = {"container":"micromag-screen-title-container","disabled":"micromag-screen-title-disabled","hidden":"micromag-screen-title-hidden","placeholder":"micromag-screen-title-placeholder","content":"micromag-screen-title-content","emptyDescription":"micromag-screen-title-emptyDescription","emptySubtitle":"micromag-screen-title-emptySubtitle","emptyTitle":"micromag-screen-title-emptyTitle","subtitle":"micromag-screen-title-subtitle","withMargin":"micromag-screen-title-withMargin","title":"micromag-screen-title-title","box":"micromag-screen-title-box","isPlaceholder":"micromag-screen-title-isPlaceholder","layout":"micromag-screen-title-layout"};
23
23
 
24
- var propTypes$1 = {
24
+ var propTypes$2 = {
25
25
  layout: PropTypes.oneOf(['top', 'middle', 'bottom', 'split', 'split-top', 'split-bottom']),
26
26
  title: PropTypes$1.headingElement,
27
27
  subtitle: PropTypes$1.headingElement,
28
28
  description: PropTypes$1.textElement,
29
+ boxStyle: PropTypes$1.boxStyle,
29
30
  withSubtitle: PropTypes.bool,
30
31
  withDescription: PropTypes.bool,
32
+ withBox: PropTypes.bool,
31
33
  spacing: PropTypes.number,
32
34
  descriptionEmptyLabel: PropTypes$1.label,
33
35
  background: PropTypes$1.backgroundElement,
@@ -38,13 +40,15 @@ var propTypes$1 = {
38
40
  transitionStagger: PropTypes.number,
39
41
  className: PropTypes.string
40
42
  };
41
- var defaultProps$1 = {
43
+ var defaultProps$2 = {
42
44
  layout: 'top',
43
45
  title: null,
44
46
  subtitle: null,
45
47
  description: null,
48
+ boxStyle: null,
46
49
  withSubtitle: false,
47
50
  withDescription: false,
51
+ withBox: false,
48
52
  spacing: 20,
49
53
  descriptionEmptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
50
54
  id: "507VAi",
@@ -69,8 +73,10 @@ var TitleScreen = function TitleScreen(_ref) {
69
73
  title = _ref.title,
70
74
  subtitle = _ref.subtitle,
71
75
  description = _ref.description,
76
+ boxStyle = _ref.boxStyle,
72
77
  withSubtitle = _ref.withSubtitle,
73
78
  withDescription = _ref.withDescription,
79
+ withBox = _ref.withBox,
74
80
  spacing = _ref.spacing,
75
81
  descriptionEmptyLabel = _ref.descriptionEmptyLabel,
76
82
  background = _ref.background,
@@ -111,11 +117,8 @@ var TitleScreen = function TitleScreen(_ref) {
111
117
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
112
118
  var backgroundPlaying = current && (isView || isEdit);
113
119
  var backgroundShouldLoad = current || active || !isView;
114
- var hasCallToAction = callToAction !== null && callToAction.active === true; // Create elements
115
-
116
- var items = [!isPlaceholder && hasCallToAction && isMiddleLayout ? /*#__PURE__*/React.createElement(Spacer, {
117
- key: "spacer-cta-top"
118
- }) : null, /*#__PURE__*/React.createElement(ScreenElement, {
120
+ var hasCallToAction = callToAction !== null && callToAction.active === true;
121
+ var titleElement = /*#__PURE__*/React.createElement(ScreenElement, {
119
122
  key: "title",
120
123
  placeholder: "title",
121
124
  emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -131,9 +134,8 @@ var TitleScreen = function TitleScreen(_ref) {
131
134
  className: classNames([styles.title, _defineProperty({}, styles.withMargin, titleWithMargin)])
132
135
  }, title, {
133
136
  size: 1
134
- })) : null), isSplitted && (!withDescription || verticalAlign === 'bottom') && /*#__PURE__*/React.createElement(Spacer, {
135
- key: "spacer1"
136
- }), withSubtitle && /*#__PURE__*/React.createElement(ScreenElement, {
137
+ })) : null);
138
+ var subtitleElement = withSubtitle ? /*#__PURE__*/React.createElement(ScreenElement, {
137
139
  key: "subtitle",
138
140
  placeholder: "subtitle",
139
141
  emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -149,27 +151,14 @@ var TitleScreen = function TitleScreen(_ref) {
149
151
  className: classNames([styles.subtitle, _defineProperty({}, styles.withMargin, subtitleWithMargin)])
150
152
  }, subtitle, {
151
153
  size: 2
152
- })) : null), isSplitted && withDescription && verticalAlign === 'top' && /*#__PURE__*/React.createElement(Spacer, {
153
- key: "spacer2"
154
- }), withDescription && /*#__PURE__*/React.createElement(ScreenElement, {
154
+ })) : null) : null;
155
+ var descriptionElement = withDescription ? /*#__PURE__*/React.createElement(ScreenElement, {
155
156
  key: "description",
156
157
  placeholder: "shortText",
157
158
  emptyLabel: descriptionEmptyLabel,
158
159
  emptyClassName: styles.emptyDescription,
159
160
  isEmpty: !hasDescription
160
- }, hasDescription ? /*#__PURE__*/React.createElement(Text, description) : null), !isPlaceholder && hasCallToAction && (isTopLayout || isMiddleLayout) ? /*#__PURE__*/React.createElement(Spacer, {
161
- key: "spacer-cta-bottom"
162
- }) : null, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
163
- style: {
164
- margin: -spacing,
165
- marginTop: 0
166
- },
167
- key: "call-to-action"
168
- }, /*#__PURE__*/React.createElement(CallToAction, {
169
- callToAction: callToAction,
170
- animationDisabled: isPreview,
171
- focusable: current && isView
172
- })) : null];
161
+ }, hasDescription ? /*#__PURE__*/React.createElement(Text, description) : null) : null;
173
162
  return /*#__PURE__*/React.createElement("div", {
174
163
  className: classNames([styles.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles.isPlaceholder, isPlaceholder), _ref4)]),
175
164
  "data-screen-ready": true
@@ -190,17 +179,60 @@ var TitleScreen = function TitleScreen(_ref) {
190
179
  padding: spacing,
191
180
  paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
192
181
  } : null
182
+ }, !isPlaceholder && hasCallToAction && isMiddleLayout ? /*#__PURE__*/React.createElement(Spacer, {
183
+ key: "spacer-cta-top"
184
+ }) : null, withBox && !isSplitted ? /*#__PURE__*/React.createElement("div", {
185
+ className: styles.box,
186
+ style: getStyleFromBox(boxStyle)
193
187
  }, /*#__PURE__*/React.createElement(TransitionsStagger, {
194
188
  transitions: transitions,
195
189
  stagger: transitionStagger,
196
190
  disabled: transitionDisabled,
197
191
  playing: transitionPlaying,
198
192
  focusable: current && isView
199
- }, items))));
193
+ }, [titleElement, subtitleElement, descriptionElement])) : null, withBox && isSplitted ? /*#__PURE__*/React.createElement(TransitionsStagger, {
194
+ transitions: transitions,
195
+ stagger: transitionStagger,
196
+ disabled: transitionDisabled,
197
+ playing: transitionPlaying,
198
+ focusable: current && isView
199
+ }, /*#__PURE__*/React.createElement("div", {
200
+ className: styles.box,
201
+ key: "top",
202
+ style: getStyleFromBox(boxStyle)
203
+ }, titleElement, withDescription && verticalAlign === 'top' ? subtitleElement : null), /*#__PURE__*/React.createElement(Spacer, {
204
+ key: "spacer1"
205
+ }), /*#__PURE__*/React.createElement("div", {
206
+ className: styles.box,
207
+ key: "bottom",
208
+ style: getStyleFromBox(boxStyle)
209
+ }, !withDescription || verticalAlign === 'bottom' ? subtitleElement : null, descriptionElement)) : null, !withBox ? /*#__PURE__*/React.createElement(TransitionsStagger, {
210
+ transitions: transitions,
211
+ stagger: transitionStagger,
212
+ disabled: transitionDisabled,
213
+ playing: transitionPlaying,
214
+ focusable: current && isView
215
+ }, titleElement, isSplitted && (!withDescription || verticalAlign === 'bottom') && /*#__PURE__*/React.createElement(Spacer, {
216
+ key: "spacer1"
217
+ }), subtitleElement, isSplitted && withDescription && verticalAlign === 'top' && /*#__PURE__*/React.createElement(Spacer, {
218
+ key: "spacer2"
219
+ }), descriptionElement) : null, !isPlaceholder && hasCallToAction && (isTopLayout || isMiddleLayout) ? /*#__PURE__*/React.createElement(Spacer, {
220
+ key: "spacer-cta-bottom"
221
+ }) : null, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
222
+ style: {
223
+ margin: -spacing,
224
+ marginTop: 0
225
+ },
226
+ key: "call-to-action"
227
+ }, /*#__PURE__*/React.createElement(CallToAction, {
228
+ callToAction: callToAction,
229
+ animationDisabled: isPreview,
230
+ focusable: current && isView
231
+ })) : null)));
200
232
  };
201
233
 
202
- TitleScreen.propTypes = propTypes$1;
203
- TitleScreen.defaultProps = defaultProps$1;
234
+ TitleScreen.propTypes = propTypes$2;
235
+ TitleScreen.defaultProps = defaultProps$2;
204
236
  var TitleScreen$1 = /*#__PURE__*/React.memo(TitleScreen);
205
237
 
206
238
  var TitleSubtitleScreen = function TitleSubtitleScreen(_ref) {
@@ -212,10 +244,10 @@ var TitleSubtitleScreen = function TitleSubtitleScreen(_ref) {
212
244
  };
213
245
 
214
246
  var _excluded = ["credits"];
215
- var propTypes = {
247
+ var propTypes$1 = {
216
248
  credits: PropTypes$1.textElement
217
249
  };
218
- var defaultProps = {
250
+ var defaultProps$1 = {
219
251
  credits: null
220
252
  };
221
253
 
@@ -237,8 +269,23 @@ var TitleSubtitleCreditsScreen = function TitleSubtitleCreditsScreen(_ref) {
237
269
  }));
238
270
  };
239
271
 
240
- TitleSubtitleCreditsScreen.propTypes = propTypes;
241
- TitleSubtitleCreditsScreen.defaultProps = defaultProps;
272
+ TitleSubtitleCreditsScreen.propTypes = propTypes$1;
273
+ TitleSubtitleCreditsScreen.defaultProps = defaultProps$1;
274
+
275
+ /* eslint-disable react/jsx-props-no-spreading */
276
+ var propTypes = {};
277
+ var defaultProps = {};
278
+
279
+ var TitleWithBoxScreen = function TitleWithBoxScreen(props) {
280
+ return /*#__PURE__*/React.createElement(TitleScreen$1, Object.assign({}, props, {
281
+ withSubtitle: true,
282
+ withDescription: true,
283
+ withBox: true
284
+ }));
285
+ };
286
+
287
+ TitleWithBoxScreen.propTypes = propTypes;
288
+ TitleWithBoxScreen.defaultProps = defaultProps;
242
289
 
243
290
  var transform = function transform(newStory, _ref) {
244
291
  var title = _ref.title,
@@ -510,6 +557,101 @@ var definition = [{
510
557
  }
511
558
  }
512
559
  }]
560
+ }, {
561
+ id: 'title-with-box',
562
+ type: 'screen',
563
+ group: {
564
+ label: defineMessage({
565
+ id: "uKJRh2",
566
+ defaultMessage: [{
567
+ "type": 0,
568
+ "value": "Title"
569
+ }]
570
+ }),
571
+ order: 1
572
+ },
573
+ title: defineMessage({
574
+ id: "9a5s+m",
575
+ defaultMessage: [{
576
+ "type": 0,
577
+ "value": "Title with box"
578
+ }]
579
+ }),
580
+ component: TitleWithBoxScreen,
581
+ layouts: ['top', 'middle', 'bottom', 'split-top', 'split-bottom'],
582
+ transforms: transforms,
583
+ fields: [{
584
+ name: 'layout',
585
+ type: 'screen-layout',
586
+ defaultValue: 'top',
587
+ label: defineMessage({
588
+ id: "4iBXj2",
589
+ defaultMessage: [{
590
+ "type": 0,
591
+ "value": "Layout"
592
+ }]
593
+ })
594
+ }, {
595
+ name: 'title',
596
+ type: 'heading-element',
597
+ theme: {
598
+ textStyle: 'heading1'
599
+ },
600
+ label: defineMessage({
601
+ id: "N25iDO",
602
+ defaultMessage: [{
603
+ "type": 0,
604
+ "value": "Title"
605
+ }]
606
+ })
607
+ }, {
608
+ name: 'subtitle',
609
+ type: 'heading-element',
610
+ theme: {
611
+ textStyle: 'heading2'
612
+ },
613
+ label: defineMessage({
614
+ id: "EcZYpr",
615
+ defaultMessage: [{
616
+ "type": 0,
617
+ "value": "Subtitle"
618
+ }]
619
+ })
620
+ }, {
621
+ name: 'description',
622
+ type: 'text-element',
623
+ theme: {
624
+ textStyle: 'text'
625
+ },
626
+ label: defineMessage({
627
+ id: "ZCe0r4",
628
+ defaultMessage: [{
629
+ "type": 0,
630
+ "value": "Description"
631
+ }]
632
+ })
633
+ }, {
634
+ name: 'boxStyle',
635
+ type: 'box-style'
636
+ }, {
637
+ name: 'background',
638
+ type: 'background',
639
+ label: defineMessage({
640
+ id: "+MPZRu",
641
+ defaultMessage: [{
642
+ "type": 0,
643
+ "value": "Background"
644
+ }]
645
+ })
646
+ }, {
647
+ name: 'callToAction',
648
+ type: 'call-to-action',
649
+ theme: {
650
+ label: {
651
+ textStyle: 'heading2'
652
+ }
653
+ }
654
+ }]
513
655
  }];
514
656
 
515
657
  export { TitleScreen$1 as TitleScreen, TitleSubtitleCreditsScreen, TitleSubtitleScreen, definition as default };
package/lib/index.js CHANGED
@@ -4,19 +4,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var reactIntl = require('react-intl');
6
6
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
7
- var React = require('react');
8
- var PropTypes = require('prop-types');
9
7
  var classNames = require('classnames');
8
+ var PropTypes = require('prop-types');
9
+ var React = require('react');
10
10
  var core = require('@micromag/core');
11
- var contexts = require('@micromag/core/contexts');
12
11
  var components = require('@micromag/core/components');
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');
15
16
  var Container = require('@micromag/element-container');
16
- var Layout = require('@micromag/element-layout');
17
17
  var Heading = require('@micromag/element-heading');
18
+ var Layout = require('@micromag/element-layout');
18
19
  var Text = require('@micromag/element-text');
19
- var CallToAction = require('@micromag/element-call-to-action');
20
20
  var _extends = require('@babel/runtime/helpers/extends');
21
21
  var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
22
22
  var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
@@ -26,29 +26,31 @@ var appleNews = require('@micromag/transforms/apple-news');
26
26
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
27
27
 
28
28
  var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
29
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
30
- var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
31
29
  var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
30
+ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
31
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
32
32
  var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
33
+ var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
33
34
  var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
34
- var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
35
35
  var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
36
+ var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
36
37
  var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
37
- var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
38
38
  var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
39
39
  var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
40
40
  var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
41
41
  var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
42
42
 
43
- var styles = {"container":"micromag-screen-title-container","disabled":"micromag-screen-title-disabled","hidden":"micromag-screen-title-hidden","placeholder":"micromag-screen-title-placeholder","content":"micromag-screen-title-content","emptyDescription":"micromag-screen-title-emptyDescription","emptySubtitle":"micromag-screen-title-emptySubtitle","emptyTitle":"micromag-screen-title-emptyTitle","subtitle":"micromag-screen-title-subtitle","withMargin":"micromag-screen-title-withMargin","title":"micromag-screen-title-title","isPlaceholder":"micromag-screen-title-isPlaceholder","layout":"micromag-screen-title-layout"};
43
+ var styles = {"container":"micromag-screen-title-container","disabled":"micromag-screen-title-disabled","hidden":"micromag-screen-title-hidden","placeholder":"micromag-screen-title-placeholder","content":"micromag-screen-title-content","emptyDescription":"micromag-screen-title-emptyDescription","emptySubtitle":"micromag-screen-title-emptySubtitle","emptyTitle":"micromag-screen-title-emptyTitle","subtitle":"micromag-screen-title-subtitle","withMargin":"micromag-screen-title-withMargin","title":"micromag-screen-title-title","box":"micromag-screen-title-box","isPlaceholder":"micromag-screen-title-isPlaceholder","layout":"micromag-screen-title-layout"};
44
44
 
45
- var propTypes$1 = {
45
+ var propTypes$2 = {
46
46
  layout: PropTypes__default["default"].oneOf(['top', 'middle', 'bottom', 'split', 'split-top', 'split-bottom']),
47
47
  title: core.PropTypes.headingElement,
48
48
  subtitle: core.PropTypes.headingElement,
49
49
  description: core.PropTypes.textElement,
50
+ boxStyle: core.PropTypes.boxStyle,
50
51
  withSubtitle: PropTypes__default["default"].bool,
51
52
  withDescription: PropTypes__default["default"].bool,
53
+ withBox: PropTypes__default["default"].bool,
52
54
  spacing: PropTypes__default["default"].number,
53
55
  descriptionEmptyLabel: core.PropTypes.label,
54
56
  background: core.PropTypes.backgroundElement,
@@ -59,13 +61,15 @@ var propTypes$1 = {
59
61
  transitionStagger: PropTypes__default["default"].number,
60
62
  className: PropTypes__default["default"].string
61
63
  };
62
- var defaultProps$1 = {
64
+ var defaultProps$2 = {
63
65
  layout: 'top',
64
66
  title: null,
65
67
  subtitle: null,
66
68
  description: null,
69
+ boxStyle: null,
67
70
  withSubtitle: false,
68
71
  withDescription: false,
72
+ withBox: false,
69
73
  spacing: 20,
70
74
  descriptionEmptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
71
75
  id: "507VAi",
@@ -90,8 +94,10 @@ var TitleScreen = function TitleScreen(_ref) {
90
94
  title = _ref.title,
91
95
  subtitle = _ref.subtitle,
92
96
  description = _ref.description,
97
+ boxStyle = _ref.boxStyle,
93
98
  withSubtitle = _ref.withSubtitle,
94
99
  withDescription = _ref.withDescription,
100
+ withBox = _ref.withBox,
95
101
  spacing = _ref.spacing,
96
102
  descriptionEmptyLabel = _ref.descriptionEmptyLabel,
97
103
  background = _ref.background,
@@ -132,11 +138,8 @@ var TitleScreen = function TitleScreen(_ref) {
132
138
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
133
139
  var backgroundPlaying = current && (isView || isEdit);
134
140
  var backgroundShouldLoad = current || active || !isView;
135
- var hasCallToAction = callToAction !== null && callToAction.active === true; // Create elements
136
-
137
- var items = [!isPlaceholder && hasCallToAction && isMiddleLayout ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
138
- key: "spacer-cta-top"
139
- }) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
141
+ var hasCallToAction = callToAction !== null && callToAction.active === true;
142
+ var titleElement = /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
140
143
  key: "title",
141
144
  placeholder: "title",
142
145
  emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
@@ -152,9 +155,8 @@ var TitleScreen = function TitleScreen(_ref) {
152
155
  className: classNames__default["default"]([styles.title, _defineProperty__default["default"]({}, styles.withMargin, titleWithMargin)])
153
156
  }, title, {
154
157
  size: 1
155
- })) : null), isSplitted && (!withDescription || verticalAlign === 'bottom') && /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
156
- key: "spacer1"
157
- }), withSubtitle && /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
158
+ })) : null);
159
+ var subtitleElement = withSubtitle ? /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
158
160
  key: "subtitle",
159
161
  placeholder: "subtitle",
160
162
  emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
@@ -170,27 +172,14 @@ var TitleScreen = function TitleScreen(_ref) {
170
172
  className: classNames__default["default"]([styles.subtitle, _defineProperty__default["default"]({}, styles.withMargin, subtitleWithMargin)])
171
173
  }, subtitle, {
172
174
  size: 2
173
- })) : null), isSplitted && withDescription && verticalAlign === 'top' && /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
174
- key: "spacer2"
175
- }), withDescription && /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
175
+ })) : null) : null;
176
+ var descriptionElement = withDescription ? /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
176
177
  key: "description",
177
178
  placeholder: "shortText",
178
179
  emptyLabel: descriptionEmptyLabel,
179
180
  emptyClassName: styles.emptyDescription,
180
181
  isEmpty: !hasDescription
181
- }, hasDescription ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], description) : null), !isPlaceholder && hasCallToAction && (isTopLayout || isMiddleLayout) ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
182
- key: "spacer-cta-bottom"
183
- }) : null, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
184
- style: {
185
- margin: -spacing,
186
- marginTop: 0
187
- },
188
- key: "call-to-action"
189
- }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
190
- callToAction: callToAction,
191
- animationDisabled: isPreview,
192
- focusable: current && isView
193
- })) : null];
182
+ }, hasDescription ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], description) : null) : null;
194
183
  return /*#__PURE__*/React__default["default"].createElement("div", {
195
184
  className: classNames__default["default"]([styles.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className !== null), _defineProperty__default["default"](_ref4, styles.isPlaceholder, isPlaceholder), _ref4)]),
196
185
  "data-screen-ready": true
@@ -211,17 +200,60 @@ var TitleScreen = function TitleScreen(_ref) {
211
200
  padding: spacing,
212
201
  paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
213
202
  } : null
203
+ }, !isPlaceholder && hasCallToAction && isMiddleLayout ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
204
+ key: "spacer-cta-top"
205
+ }) : null, withBox && !isSplitted ? /*#__PURE__*/React__default["default"].createElement("div", {
206
+ className: styles.box,
207
+ style: utils.getStyleFromBox(boxStyle)
214
208
  }, /*#__PURE__*/React__default["default"].createElement(components.TransitionsStagger, {
215
209
  transitions: transitions,
216
210
  stagger: transitionStagger,
217
211
  disabled: transitionDisabled,
218
212
  playing: transitionPlaying,
219
213
  focusable: current && isView
220
- }, items))));
214
+ }, [titleElement, subtitleElement, descriptionElement])) : null, withBox && isSplitted ? /*#__PURE__*/React__default["default"].createElement(components.TransitionsStagger, {
215
+ transitions: transitions,
216
+ stagger: transitionStagger,
217
+ disabled: transitionDisabled,
218
+ playing: transitionPlaying,
219
+ focusable: current && isView
220
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
221
+ className: styles.box,
222
+ key: "top",
223
+ style: utils.getStyleFromBox(boxStyle)
224
+ }, titleElement, withDescription && verticalAlign === 'top' ? subtitleElement : null), /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
225
+ key: "spacer1"
226
+ }), /*#__PURE__*/React__default["default"].createElement("div", {
227
+ className: styles.box,
228
+ key: "bottom",
229
+ style: utils.getStyleFromBox(boxStyle)
230
+ }, !withDescription || verticalAlign === 'bottom' ? subtitleElement : null, descriptionElement)) : null, !withBox ? /*#__PURE__*/React__default["default"].createElement(components.TransitionsStagger, {
231
+ transitions: transitions,
232
+ stagger: transitionStagger,
233
+ disabled: transitionDisabled,
234
+ playing: transitionPlaying,
235
+ focusable: current && isView
236
+ }, titleElement, isSplitted && (!withDescription || verticalAlign === 'bottom') && /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
237
+ key: "spacer1"
238
+ }), subtitleElement, isSplitted && withDescription && verticalAlign === 'top' && /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
239
+ key: "spacer2"
240
+ }), descriptionElement) : null, !isPlaceholder && hasCallToAction && (isTopLayout || isMiddleLayout) ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
241
+ key: "spacer-cta-bottom"
242
+ }) : null, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
243
+ style: {
244
+ margin: -spacing,
245
+ marginTop: 0
246
+ },
247
+ key: "call-to-action"
248
+ }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
249
+ callToAction: callToAction,
250
+ animationDisabled: isPreview,
251
+ focusable: current && isView
252
+ })) : null)));
221
253
  };
222
254
 
223
- TitleScreen.propTypes = propTypes$1;
224
- TitleScreen.defaultProps = defaultProps$1;
255
+ TitleScreen.propTypes = propTypes$2;
256
+ TitleScreen.defaultProps = defaultProps$2;
225
257
  var TitleScreen$1 = /*#__PURE__*/React__default["default"].memo(TitleScreen);
226
258
 
227
259
  var TitleSubtitleScreen = function TitleSubtitleScreen(_ref) {
@@ -233,10 +265,10 @@ var TitleSubtitleScreen = function TitleSubtitleScreen(_ref) {
233
265
  };
234
266
 
235
267
  var _excluded = ["credits"];
236
- var propTypes = {
268
+ var propTypes$1 = {
237
269
  credits: core.PropTypes.textElement
238
270
  };
239
- var defaultProps = {
271
+ var defaultProps$1 = {
240
272
  credits: null
241
273
  };
242
274
 
@@ -258,8 +290,23 @@ var TitleSubtitleCreditsScreen = function TitleSubtitleCreditsScreen(_ref) {
258
290
  }));
259
291
  };
260
292
 
261
- TitleSubtitleCreditsScreen.propTypes = propTypes;
262
- TitleSubtitleCreditsScreen.defaultProps = defaultProps;
293
+ TitleSubtitleCreditsScreen.propTypes = propTypes$1;
294
+ TitleSubtitleCreditsScreen.defaultProps = defaultProps$1;
295
+
296
+ /* eslint-disable react/jsx-props-no-spreading */
297
+ var propTypes = {};
298
+ var defaultProps = {};
299
+
300
+ var TitleWithBoxScreen = function TitleWithBoxScreen(props) {
301
+ return /*#__PURE__*/React__default["default"].createElement(TitleScreen$1, Object.assign({}, props, {
302
+ withSubtitle: true,
303
+ withDescription: true,
304
+ withBox: true
305
+ }));
306
+ };
307
+
308
+ TitleWithBoxScreen.propTypes = propTypes;
309
+ TitleWithBoxScreen.defaultProps = defaultProps;
263
310
 
264
311
  var transform = function transform(newStory, _ref) {
265
312
  var title = _ref.title,
@@ -531,6 +578,101 @@ var definition = [{
531
578
  }
532
579
  }
533
580
  }]
581
+ }, {
582
+ id: 'title-with-box',
583
+ type: 'screen',
584
+ group: {
585
+ label: reactIntl.defineMessage({
586
+ id: "uKJRh2",
587
+ defaultMessage: [{
588
+ "type": 0,
589
+ "value": "Title"
590
+ }]
591
+ }),
592
+ order: 1
593
+ },
594
+ title: reactIntl.defineMessage({
595
+ id: "9a5s+m",
596
+ defaultMessage: [{
597
+ "type": 0,
598
+ "value": "Title with box"
599
+ }]
600
+ }),
601
+ component: TitleWithBoxScreen,
602
+ layouts: ['top', 'middle', 'bottom', 'split-top', 'split-bottom'],
603
+ transforms: transforms,
604
+ fields: [{
605
+ name: 'layout',
606
+ type: 'screen-layout',
607
+ defaultValue: 'top',
608
+ label: reactIntl.defineMessage({
609
+ id: "4iBXj2",
610
+ defaultMessage: [{
611
+ "type": 0,
612
+ "value": "Layout"
613
+ }]
614
+ })
615
+ }, {
616
+ name: 'title',
617
+ type: 'heading-element',
618
+ theme: {
619
+ textStyle: 'heading1'
620
+ },
621
+ label: reactIntl.defineMessage({
622
+ id: "N25iDO",
623
+ defaultMessage: [{
624
+ "type": 0,
625
+ "value": "Title"
626
+ }]
627
+ })
628
+ }, {
629
+ name: 'subtitle',
630
+ type: 'heading-element',
631
+ theme: {
632
+ textStyle: 'heading2'
633
+ },
634
+ label: reactIntl.defineMessage({
635
+ id: "EcZYpr",
636
+ defaultMessage: [{
637
+ "type": 0,
638
+ "value": "Subtitle"
639
+ }]
640
+ })
641
+ }, {
642
+ name: 'description',
643
+ type: 'text-element',
644
+ theme: {
645
+ textStyle: 'text'
646
+ },
647
+ label: reactIntl.defineMessage({
648
+ id: "ZCe0r4",
649
+ defaultMessage: [{
650
+ "type": 0,
651
+ "value": "Description"
652
+ }]
653
+ })
654
+ }, {
655
+ name: 'boxStyle',
656
+ type: 'box-style'
657
+ }, {
658
+ name: 'background',
659
+ type: 'background',
660
+ label: reactIntl.defineMessage({
661
+ id: "+MPZRu",
662
+ defaultMessage: [{
663
+ "type": 0,
664
+ "value": "Background"
665
+ }]
666
+ })
667
+ }, {
668
+ name: 'callToAction',
669
+ type: 'call-to-action',
670
+ theme: {
671
+ label: {
672
+ textStyle: 'heading2'
673
+ }
674
+ }
675
+ }]
534
676
  }];
535
677
 
536
678
  exports.TitleScreen = TitleScreen$1;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-title",
3
- "version": "0.2.409",
3
+ "version": "0.3.1",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -49,14 +49,14 @@
49
49
  },
50
50
  "dependencies": {
51
51
  "@babel/runtime": "^7.13.10",
52
- "@micromag/core": "^0.2.409",
53
- "@micromag/element-background": "^0.2.409",
54
- "@micromag/element-call-to-action": "^0.2.409",
55
- "@micromag/element-container": "^0.2.409",
56
- "@micromag/element-heading": "^0.2.409",
57
- "@micromag/element-layout": "^0.2.409",
58
- "@micromag/element-text": "^0.2.409",
59
- "@micromag/transforms": "^0.2.409",
52
+ "@micromag/core": "^0.3.1",
53
+ "@micromag/element-background": "^0.3.1",
54
+ "@micromag/element-call-to-action": "^0.3.1",
55
+ "@micromag/element-container": "^0.3.1",
56
+ "@micromag/element-heading": "^0.3.1",
57
+ "@micromag/element-layout": "^0.3.1",
58
+ "@micromag/element-text": "^0.3.1",
59
+ "@micromag/transforms": "^0.3.1",
60
60
  "classnames": "^2.2.6",
61
61
  "lodash": "^4.17.21",
62
62
  "prop-types": "^15.7.2",
@@ -66,5 +66,5 @@
66
66
  "publishConfig": {
67
67
  "access": "public"
68
68
  },
69
- "gitHead": "4c16c3bb63644d1bd5b7d50086098337317ee3f6"
69
+ "gitHead": "7a9abcecc77a97ec7b698743fd38378ac159a9c4"
70
70
  }