@micromag/screen-article 0.3.410 → 0.3.412

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 +48 -42
  3. package/lib/index.js +49 -42
  4. package/package.json +3 -2
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-screen-article-container .micromag-screen-article-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-article-container .micromag-screen-article-emptyAuthor,.micromag-screen-article-container .micromag-screen-article-emptyDate,.micromag-screen-article-container .micromag-screen-article-emptySurtitle,.micromag-screen-article-container .micromag-screen-article-emptyText,.micromag-screen-article-container .micromag-screen-article-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-article-container{position:relative}.micromag-screen-article-container .micromag-screen-article-background{z-index:0}.micromag-screen-article-container .micromag-screen-article-content{z-index:1}.micromag-screen-article-container .micromag-screen-article-layout{position:relative}.micromag-screen-article-container .micromag-screen-article-emptyAuthor,.micromag-screen-article-container .micromag-screen-article-emptyText,.micromag-screen-article-container .micromag-screen-article-emptyTitle{margin:10px auto;padding:12px 0 10px;width:100%}.micromag-screen-article-container .micromag-screen-article-emptyDate,.micromag-screen-article-container .micromag-screen-article-emptySurtitle{-ms-flex-negative:0;flex-shrink:0;padding:4px 0;width:50%}.micromag-screen-article-container .micromag-screen-article-visualContainer{height:auto;left:0;position:absolute;top:0;width:100%;z-index:-1}.micromag-screen-article-container .micromag-screen-article-surtitle{font-size:12px;width:100%}.micromag-screen-article-container .micromag-screen-article-date{font-size:12px;text-align:right;width:100%}.micromag-screen-article-container .micromag-screen-article-title{margin:10px 0}.micromag-screen-article-container .micromag-screen-article-text{margin-top:2.5em}.micromag-screen-article-container .micromag-screen-article-text blockquote,.micromag-screen-article-container .micromag-screen-article-text h2,.micromag-screen-article-container .micromag-screen-article-text h3,.micromag-screen-article-container .micromag-screen-article-text img,.micromag-screen-article-container .micromag-screen-article-text ol,.micromag-screen-article-container .micromag-screen-article-text p,.micromag-screen-article-container .micromag-screen-article-text ul{margin-bottom:1rem}.micromag-screen-article-container .micromag-screen-article-text blockquote:last-child,.micromag-screen-article-container .micromag-screen-article-text h2:last-child,.micromag-screen-article-container .micromag-screen-article-text h3:last-child,.micromag-screen-article-container .micromag-screen-article-text img:last-child,.micromag-screen-article-container .micromag-screen-article-text ol:last-child,.micromag-screen-article-container .micromag-screen-article-text p:last-child,.micromag-screen-article-container .micromag-screen-article-text ul:last-child{margin-bottom:0}.micromag-screen-article-container .micromag-screen-article-text h2{font-size:2em}.micromag-screen-article-container .micromag-screen-article-text h3{font-size:1.5em}.micromag-screen-article-container .micromag-screen-article-text ol,.micromag-screen-article-container .micromag-screen-article-text ul{list-style-position:inside}.micromag-screen-article-container .micromag-screen-article-text blockquote{border-left:1px solid;padding-left:.5em}.micromag-screen-article-container .micromag-screen-article-topContent{-ms-flex-pack:justify;display:-ms-flexbox;display:flex;justify-content:space-between}.micromag-screen-article-container .micromag-screen-article-footer{-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out}.micromag-screen-article-container .micromag-screen-article-footer a{padding:0}.micromag-screen-article-container .micromag-screen-article-footer.micromag-screen-article-disabled{opacity:0;pointer-events:none}.micromag-screen-article-container.micromag-screen-article-isPlaceholder .micromag-screen-article-layout{padding:10px}
1
+ .micromag-screen-article-container .micromag-screen-article-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-article-container .micromag-screen-article-emptyAuthor,.micromag-screen-article-container .micromag-screen-article-emptyDate,.micromag-screen-article-container .micromag-screen-article-emptySurtitle,.micromag-screen-article-container .micromag-screen-article-emptyText,.micromag-screen-article-container .micromag-screen-article-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-article-container{position:relative}.micromag-screen-article-container .micromag-screen-article-background{z-index:0}.micromag-screen-article-container .micromag-screen-article-content{z-index:1}.micromag-screen-article-container .micromag-screen-article-layout{position:relative}.micromag-screen-article-container .micromag-screen-article-emptyAuthor,.micromag-screen-article-container .micromag-screen-article-emptyText,.micromag-screen-article-container .micromag-screen-article-emptyTitle{margin:10px auto;padding:12px 0 10px;width:100%}.micromag-screen-article-container .micromag-screen-article-emptyDate,.micromag-screen-article-container .micromag-screen-article-emptySurtitle{-ms-flex-negative:0;flex-shrink:0;padding:4px 0;width:50%}.micromag-screen-article-container .micromag-screen-article-main.micromag-screen-article-hasText{margin-bottom:30px}.micromag-screen-article-container .micromag-screen-article-visualContainer{height:auto;left:0;position:absolute;top:0;width:100%;z-index:-1}.micromag-screen-article-container .micromag-screen-article-surtitle{font-size:12px;width:100%}.micromag-screen-article-container .micromag-screen-article-date{font-size:12px;text-align:right;width:100%}.micromag-screen-article-container .micromag-screen-article-title{margin:10px 0}.micromag-screen-article-container .micromag-screen-article-text blockquote,.micromag-screen-article-container .micromag-screen-article-text h2,.micromag-screen-article-container .micromag-screen-article-text h3,.micromag-screen-article-container .micromag-screen-article-text img,.micromag-screen-article-container .micromag-screen-article-text ol,.micromag-screen-article-container .micromag-screen-article-text p,.micromag-screen-article-container .micromag-screen-article-text ul{margin-bottom:1rem}.micromag-screen-article-container .micromag-screen-article-text blockquote:last-child,.micromag-screen-article-container .micromag-screen-article-text h2:last-child,.micromag-screen-article-container .micromag-screen-article-text h3:last-child,.micromag-screen-article-container .micromag-screen-article-text img:last-child,.micromag-screen-article-container .micromag-screen-article-text ol:last-child,.micromag-screen-article-container .micromag-screen-article-text p:last-child,.micromag-screen-article-container .micromag-screen-article-text ul:last-child{margin-bottom:0}.micromag-screen-article-container .micromag-screen-article-text h2{font-size:2em}.micromag-screen-article-container .micromag-screen-article-text h3{font-size:1.5em}.micromag-screen-article-container .micromag-screen-article-text ol,.micromag-screen-article-container .micromag-screen-article-text ul{list-style-position:inside}.micromag-screen-article-container .micromag-screen-article-text blockquote{border-left:1px solid;padding-left:.5em}.micromag-screen-article-container .micromag-screen-article-topContent{-ms-flex-pack:justify;display:-ms-flexbox;display:flex;justify-content:space-between}.micromag-screen-article-container .micromag-screen-article-footer{-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out}.micromag-screen-article-container .micromag-screen-article-footer a{padding:0}.micromag-screen-article-container .micromag-screen-article-footer.micromag-screen-article-disabled{opacity:0;pointer-events:none}.micromag-screen-article-container.micromag-screen-article-isPlaceholder .micromag-screen-article-layout{padding:10px}
package/es/index.js CHANGED
@@ -10,6 +10,7 @@ import { ScreenElement } from '@micromag/core/components';
10
10
  import { useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenRenderContext } from '@micromag/core/contexts';
11
11
  import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
12
12
  import { isTextFilled, isHeaderFilled, isFooterFilled, isImageFilled, getFooterProps } from '@micromag/core/utils';
13
+ import Author from '@micromag/element-author';
13
14
  import Background from '@micromag/element-background';
14
15
  import Container from '@micromag/element-container';
15
16
  import Footer from '@micromag/element-footer';
@@ -23,7 +24,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
23
24
  import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
24
25
  import { Container as Container$1 } from '@micromag/transforms/apple-news';
25
26
 
26
- var styles = {"container":"micromag-screen-article-container","background":"micromag-screen-article-background","emptySurtitle":"micromag-screen-article-emptySurtitle","emptyDate":"micromag-screen-article-emptyDate","emptyTitle":"micromag-screen-article-emptyTitle","emptyAuthor":"micromag-screen-article-emptyAuthor","emptyText":"micromag-screen-article-emptyText","content":"micromag-screen-article-content","layout":"micromag-screen-article-layout","visualContainer":"micromag-screen-article-visualContainer","surtitle":"micromag-screen-article-surtitle","date":"micromag-screen-article-date","title":"micromag-screen-article-title","text":"micromag-screen-article-text","topContent":"micromag-screen-article-topContent","footer":"micromag-screen-article-footer","disabled":"micromag-screen-article-disabled","isPlaceholder":"micromag-screen-article-isPlaceholder"};
27
+ var styles = {"container":"micromag-screen-article-container","background":"micromag-screen-article-background","emptySurtitle":"micromag-screen-article-emptySurtitle","emptyDate":"micromag-screen-article-emptyDate","emptyTitle":"micromag-screen-article-emptyTitle","emptyAuthor":"micromag-screen-article-emptyAuthor","emptyText":"micromag-screen-article-emptyText","content":"micromag-screen-article-content","layout":"micromag-screen-article-layout","main":"micromag-screen-article-main","hasText":"micromag-screen-article-hasText","visualContainer":"micromag-screen-article-visualContainer","surtitle":"micromag-screen-article-surtitle","date":"micromag-screen-article-date","title":"micromag-screen-article-title","text":"micromag-screen-article-text","topContent":"micromag-screen-article-topContent","footer":"micromag-screen-article-footer","disabled":"micromag-screen-article-disabled","isPlaceholder":"micromag-screen-article-isPlaceholder"};
27
28
 
28
29
  var propTypes = {
29
30
  layout: PropTypes.oneOf(['normal']),
@@ -31,8 +32,8 @@ var propTypes = {
31
32
  title: PropTypes$1.title,
32
33
  surtitle: PropTypes$1.text,
33
34
  date: PropTypes$1.date,
34
- // author: MicromagPropTypes.author, // potential to integrate more complete author element
35
- author: PropTypes$1.text,
35
+ author: PropTypes$1.author,
36
+ // author: MicromagPropTypes.text,
36
37
  text: PropTypes$1.text,
37
38
  spacing: PropTypes.number,
38
39
  background: PropTypes$1.backgroundElement,
@@ -61,7 +62,7 @@ var defaultProps = {
61
62
  className: null
62
63
  };
63
64
  var ArticleScreen = function ArticleScreen(_ref) {
64
- var _ref5;
65
+ var _ref6;
65
66
  var image = _ref.image,
66
67
  title = _ref.title,
67
68
  surtitle = _ref.surtitle,
@@ -106,12 +107,16 @@ var ArticleScreen = function ArticleScreen(_ref) {
106
107
  var ready = true;
107
108
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
108
109
  var scrollingDisabled = !isEdit && transitionDisabled || !current;
110
+ var _ref2 = author || {},
111
+ _ref2$name = _ref2.name,
112
+ authorName = _ref2$name === void 0 ? null : _ref2$name;
109
113
  var hasText = isTextFilled(text);
110
114
  var hasHeader = isHeaderFilled(header);
111
115
  var hasFooter = isFooterFilled(footer);
112
116
  var hasTitle = isTextFilled(title);
113
117
  var hasSurtitle = isTextFilled(surtitle);
114
- var hasAuthor = isTextFilled(author);
118
+ var hasSimpleAuthor = isTextFilled(author); // legacy
119
+ var hasAuthor = isTextFilled(authorName);
115
120
  var hasImage = isImageFilled(image);
116
121
  var hasDate = isTextFilled(date);
117
122
  var footerProps = getFooterProps(footer, {
@@ -124,23 +129,23 @@ var ArticleScreen = function ArticleScreen(_ref) {
124
129
  if (!hasImage) {
125
130
  return 0;
126
131
  }
127
- var _ref2 = image || {},
128
- _ref2$metadata = _ref2.metadata,
129
- metadata = _ref2$metadata === void 0 ? {} : _ref2$metadata;
130
- var _ref3 = metadata || {},
131
- _ref3$width = _ref3.width,
132
- initialWidth = _ref3$width === void 0 ? 0 : _ref3$width,
133
- _ref3$height = _ref3.height,
134
- initialHeight = _ref3$height === void 0 ? 0 : _ref3$height;
132
+ var _ref3 = image || {},
133
+ _ref3$metadata = _ref3.metadata,
134
+ metadata = _ref3$metadata === void 0 ? {} : _ref3$metadata;
135
+ var _ref4 = metadata || {},
136
+ _ref4$width = _ref4.width,
137
+ initialWidth = _ref4$width === void 0 ? 0 : _ref4$width,
138
+ _ref4$height = _ref4.height,
139
+ initialHeight = _ref4$height === void 0 ? 0 : _ref4$height;
135
140
  return width * initialHeight / initialWidth;
136
141
  }, [image]);
137
142
  var partialDate = hasDate ? date.body || null : null;
138
143
  var finalDate = useMemo(function () {
139
- return partialDate !== null ? intl.formatDate(dayjs(partialDate).toDate(), {
144
+ return partialDate !== null ? "<p>".concat(intl.formatDate(dayjs(partialDate).toDate(), {
140
145
  year: 'numeric',
141
146
  month: 'long',
142
147
  day: '2-digit'
143
- }) : null;
148
+ }), "</p>") : null;
144
149
  }, [partialDate]);
145
150
  var imageElement = /*#__PURE__*/React.createElement(ScreenElement, {
146
151
  placeholder: "image",
@@ -160,12 +165,8 @@ var ArticleScreen = function ArticleScreen(_ref) {
160
165
  media: image
161
166
  // width={width - spacing * 2} // in layout flow
162
167
  ,
163
- width: width
164
- // width="100%"
165
- ,
166
- height: mediaHeight
167
- // height="100%"
168
- ,
168
+ width: width,
169
+ height: mediaHeight,
169
170
  resolution: resolution,
170
171
  className: styles.visual
171
172
  }) : null));
@@ -227,10 +228,12 @@ var ArticleScreen = function ArticleScreen(_ref) {
227
228
  }]
228
229
  }),
229
230
  emptyClassName: styles.emptyAuthor,
230
- isEmpty: !hasAuthor
231
- }, hasAuthor ? /*#__PURE__*/React.createElement(Text, Object.assign({
231
+ isEmpty: !hasAuthor && !hasSimpleAuthor
232
+ }, hasSimpleAuthor ? /*#__PURE__*/React.createElement(Text, Object.assign({
232
233
  className: styles.author
233
- }, author)) : null);
234
+ }, author)) : null, hasAuthor ? /*#__PURE__*/React.createElement(Author, {
235
+ author: author
236
+ }) : null);
234
237
  var contentElement = /*#__PURE__*/React.createElement(ScreenElement, {
235
238
  placeholder: "text",
236
239
  emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -249,8 +252,8 @@ var ArticleScreen = function ArticleScreen(_ref) {
249
252
  _useState2 = _slicedToArray(_useState, 2),
250
253
  scrolledBottom = _useState2[0],
251
254
  setScrolledBottom = _useState2[1];
252
- var onScrolledBottom = useCallback(function (_ref4) {
253
- var initial = _ref4.initial;
255
+ var onScrolledBottom = useCallback(function (_ref5) {
256
+ var initial = _ref5.initial;
254
257
  if (initial) {
255
258
  trackScreenEvent('scroll', 'Screen');
256
259
  }
@@ -260,7 +263,7 @@ var ArticleScreen = function ArticleScreen(_ref) {
260
263
  setScrolledBottom(false);
261
264
  }, [setScrolledBottom]);
262
265
  return /*#__PURE__*/React.createElement("div", {
263
- className: classNames([styles.container, (_ref5 = {}, _defineProperty(_ref5, className, className !== null), _defineProperty(_ref5, styles.isPlaceholder, isPlaceholder), _ref5)]),
266
+ className: classNames([styles.container, (_ref6 = {}, _defineProperty(_ref6, className, className !== null), _defineProperty(_ref6, styles.isPlaceholder, isPlaceholder), _ref6)]),
264
267
  "data-screen-ready": ready
265
268
  }, /*#__PURE__*/React.createElement(Container, {
266
269
  width: width,
@@ -281,11 +284,13 @@ var ArticleScreen = function ArticleScreen(_ref) {
281
284
  key: "header",
282
285
  style: {
283
286
  height: hasImage && imageHeight > 0 ? 0 : 'auto',
284
- paddingBottom: imageHeight > 0 ? imageHeight : spacing
287
+ paddingBottom: imageHeight > 0 ? imageHeight - viewerTopHeight : spacing
285
288
  }
286
- }, /*#__PURE__*/React.createElement(Header, header)) : null, imageElement, /*#__PURE__*/React.createElement("div", {
289
+ }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement("div", {
290
+ className: classNames([styles.main, _defineProperty({}, styles.hasText, hasText)])
291
+ }, imageElement, /*#__PURE__*/React.createElement("div", {
287
292
  className: styles.topContent
288
- }, surtitleElement, dateElement), titleElement, authorElement, contentElement, !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
293
+ }, surtitleElement, dateElement), titleElement, authorElement), contentElement, !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
289
294
  className: classNames([styles.footer, _defineProperty({}, styles.disabled, !scrolledBottom)]),
290
295
  style: {
291
296
  paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
@@ -365,7 +370,7 @@ var definition = [{
365
370
  type: 'heading-element',
366
371
  inline: true,
367
372
  theme: {
368
- textStyle: 'heading2'
373
+ textStyle: 'header2'
369
374
  },
370
375
  label: defineMessage({
371
376
  id: "N25iDO",
@@ -394,26 +399,27 @@ var definition = [{
394
399
  "value": "Date"
395
400
  }]
396
401
  })
402
+ }, {
403
+ name: 'author',
404
+ type: 'author-element',
405
+ label: defineMessage({
406
+ id: "73hxYw",
407
+ defaultMessage: [{
408
+ "type": 0,
409
+ "value": "Author"
410
+ }]
411
+ })
397
412
  },
398
413
  // {
399
414
  // name: 'author',
400
- // type: 'author-element',
415
+ // type: 'text-element',
401
416
  // label: defineMessage({
402
417
  // defaultMessage: 'Author',
403
418
  // description: 'Author field label',
404
419
  // }),
405
420
  // },
421
+
406
422
  {
407
- name: 'author',
408
- type: 'text-element',
409
- label: defineMessage({
410
- id: "73hxYw",
411
- defaultMessage: [{
412
- "type": 0,
413
- "value": "Author"
414
- }]
415
- })
416
- }, {
417
423
  name: 'text',
418
424
  type: 'text-modal',
419
425
  label: defineMessage({
package/lib/index.js CHANGED
@@ -14,6 +14,7 @@ var components = require('@micromag/core/components');
14
14
  var contexts = require('@micromag/core/contexts');
15
15
  var hooks = require('@micromag/core/hooks');
16
16
  var utils = require('@micromag/core/utils');
17
+ var Author = require('@micromag/element-author');
17
18
  var Background = require('@micromag/element-background');
18
19
  var Container = require('@micromag/element-container');
19
20
  var Footer = require('@micromag/element-footer');
@@ -35,6 +36,7 @@ var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
35
36
  var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
36
37
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
37
38
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
39
+ var Author__default = /*#__PURE__*/_interopDefaultLegacy(Author);
38
40
  var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
39
41
  var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
40
42
  var Footer__default = /*#__PURE__*/_interopDefaultLegacy(Footer);
@@ -47,7 +49,7 @@ var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
47
49
  var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
48
50
  var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
49
51
 
50
- var styles = {"container":"micromag-screen-article-container","background":"micromag-screen-article-background","emptySurtitle":"micromag-screen-article-emptySurtitle","emptyDate":"micromag-screen-article-emptyDate","emptyTitle":"micromag-screen-article-emptyTitle","emptyAuthor":"micromag-screen-article-emptyAuthor","emptyText":"micromag-screen-article-emptyText","content":"micromag-screen-article-content","layout":"micromag-screen-article-layout","visualContainer":"micromag-screen-article-visualContainer","surtitle":"micromag-screen-article-surtitle","date":"micromag-screen-article-date","title":"micromag-screen-article-title","text":"micromag-screen-article-text","topContent":"micromag-screen-article-topContent","footer":"micromag-screen-article-footer","disabled":"micromag-screen-article-disabled","isPlaceholder":"micromag-screen-article-isPlaceholder"};
52
+ var styles = {"container":"micromag-screen-article-container","background":"micromag-screen-article-background","emptySurtitle":"micromag-screen-article-emptySurtitle","emptyDate":"micromag-screen-article-emptyDate","emptyTitle":"micromag-screen-article-emptyTitle","emptyAuthor":"micromag-screen-article-emptyAuthor","emptyText":"micromag-screen-article-emptyText","content":"micromag-screen-article-content","layout":"micromag-screen-article-layout","main":"micromag-screen-article-main","hasText":"micromag-screen-article-hasText","visualContainer":"micromag-screen-article-visualContainer","surtitle":"micromag-screen-article-surtitle","date":"micromag-screen-article-date","title":"micromag-screen-article-title","text":"micromag-screen-article-text","topContent":"micromag-screen-article-topContent","footer":"micromag-screen-article-footer","disabled":"micromag-screen-article-disabled","isPlaceholder":"micromag-screen-article-isPlaceholder"};
51
53
 
52
54
  var propTypes = {
53
55
  layout: PropTypes__default["default"].oneOf(['normal']),
@@ -55,8 +57,8 @@ var propTypes = {
55
57
  title: core.PropTypes.title,
56
58
  surtitle: core.PropTypes.text,
57
59
  date: core.PropTypes.date,
58
- // author: MicromagPropTypes.author, // potential to integrate more complete author element
59
- author: core.PropTypes.text,
60
+ author: core.PropTypes.author,
61
+ // author: MicromagPropTypes.text,
60
62
  text: core.PropTypes.text,
61
63
  spacing: PropTypes__default["default"].number,
62
64
  background: core.PropTypes.backgroundElement,
@@ -85,7 +87,7 @@ var defaultProps = {
85
87
  className: null
86
88
  };
87
89
  var ArticleScreen = function ArticleScreen(_ref) {
88
- var _ref5;
90
+ var _ref6;
89
91
  var image = _ref.image,
90
92
  title = _ref.title,
91
93
  surtitle = _ref.surtitle,
@@ -130,12 +132,16 @@ var ArticleScreen = function ArticleScreen(_ref) {
130
132
  var ready = true;
131
133
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
132
134
  var scrollingDisabled = !isEdit && transitionDisabled || !current;
135
+ var _ref2 = author || {},
136
+ _ref2$name = _ref2.name,
137
+ authorName = _ref2$name === void 0 ? null : _ref2$name;
133
138
  var hasText = utils.isTextFilled(text);
134
139
  var hasHeader = utils.isHeaderFilled(header);
135
140
  var hasFooter = utils.isFooterFilled(footer);
136
141
  var hasTitle = utils.isTextFilled(title);
137
142
  var hasSurtitle = utils.isTextFilled(surtitle);
138
- var hasAuthor = utils.isTextFilled(author);
143
+ var hasSimpleAuthor = utils.isTextFilled(author); // legacy
144
+ var hasAuthor = utils.isTextFilled(authorName);
139
145
  var hasImage = utils.isImageFilled(image);
140
146
  var hasDate = utils.isTextFilled(date);
141
147
  var footerProps = utils.getFooterProps(footer, {
@@ -148,23 +154,23 @@ var ArticleScreen = function ArticleScreen(_ref) {
148
154
  if (!hasImage) {
149
155
  return 0;
150
156
  }
151
- var _ref2 = image || {},
152
- _ref2$metadata = _ref2.metadata,
153
- metadata = _ref2$metadata === void 0 ? {} : _ref2$metadata;
154
- var _ref3 = metadata || {},
155
- _ref3$width = _ref3.width,
156
- initialWidth = _ref3$width === void 0 ? 0 : _ref3$width,
157
- _ref3$height = _ref3.height,
158
- initialHeight = _ref3$height === void 0 ? 0 : _ref3$height;
157
+ var _ref3 = image || {},
158
+ _ref3$metadata = _ref3.metadata,
159
+ metadata = _ref3$metadata === void 0 ? {} : _ref3$metadata;
160
+ var _ref4 = metadata || {},
161
+ _ref4$width = _ref4.width,
162
+ initialWidth = _ref4$width === void 0 ? 0 : _ref4$width,
163
+ _ref4$height = _ref4.height,
164
+ initialHeight = _ref4$height === void 0 ? 0 : _ref4$height;
159
165
  return width * initialHeight / initialWidth;
160
166
  }, [image]);
161
167
  var partialDate = hasDate ? date.body || null : null;
162
168
  var finalDate = React.useMemo(function () {
163
- return partialDate !== null ? intl.formatDate(dayjs__default["default"](partialDate).toDate(), {
169
+ return partialDate !== null ? "<p>".concat(intl.formatDate(dayjs__default["default"](partialDate).toDate(), {
164
170
  year: 'numeric',
165
171
  month: 'long',
166
172
  day: '2-digit'
167
- }) : null;
173
+ }), "</p>") : null;
168
174
  }, [partialDate]);
169
175
  var imageElement = /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
170
176
  placeholder: "image",
@@ -184,12 +190,8 @@ var ArticleScreen = function ArticleScreen(_ref) {
184
190
  media: image
185
191
  // width={width - spacing * 2} // in layout flow
186
192
  ,
187
- width: width
188
- // width="100%"
189
- ,
190
- height: mediaHeight
191
- // height="100%"
192
- ,
193
+ width: width,
194
+ height: mediaHeight,
193
195
  resolution: resolution,
194
196
  className: styles.visual
195
197
  }) : null));
@@ -251,10 +253,12 @@ var ArticleScreen = function ArticleScreen(_ref) {
251
253
  }]
252
254
  }),
253
255
  emptyClassName: styles.emptyAuthor,
254
- isEmpty: !hasAuthor
255
- }, hasAuthor ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
256
+ isEmpty: !hasAuthor && !hasSimpleAuthor
257
+ }, hasSimpleAuthor ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
256
258
  className: styles.author
257
- }, author)) : null);
259
+ }, author)) : null, hasAuthor ? /*#__PURE__*/React__default["default"].createElement(Author__default["default"], {
260
+ author: author
261
+ }) : null);
258
262
  var contentElement = /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
259
263
  placeholder: "text",
260
264
  emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
@@ -273,8 +277,8 @@ var ArticleScreen = function ArticleScreen(_ref) {
273
277
  _useState2 = _slicedToArray__default["default"](_useState, 2),
274
278
  scrolledBottom = _useState2[0],
275
279
  setScrolledBottom = _useState2[1];
276
- var onScrolledBottom = React.useCallback(function (_ref4) {
277
- var initial = _ref4.initial;
280
+ var onScrolledBottom = React.useCallback(function (_ref5) {
281
+ var initial = _ref5.initial;
278
282
  if (initial) {
279
283
  trackScreenEvent('scroll', 'Screen');
280
284
  }
@@ -284,7 +288,7 @@ var ArticleScreen = function ArticleScreen(_ref) {
284
288
  setScrolledBottom(false);
285
289
  }, [setScrolledBottom]);
286
290
  return /*#__PURE__*/React__default["default"].createElement("div", {
287
- className: classNames__default["default"]([styles.container, (_ref5 = {}, _defineProperty__default["default"](_ref5, className, className !== null), _defineProperty__default["default"](_ref5, styles.isPlaceholder, isPlaceholder), _ref5)]),
291
+ className: classNames__default["default"]([styles.container, (_ref6 = {}, _defineProperty__default["default"](_ref6, className, className !== null), _defineProperty__default["default"](_ref6, styles.isPlaceholder, isPlaceholder), _ref6)]),
288
292
  "data-screen-ready": ready
289
293
  }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
290
294
  width: width,
@@ -305,11 +309,13 @@ var ArticleScreen = function ArticleScreen(_ref) {
305
309
  key: "header",
306
310
  style: {
307
311
  height: hasImage && imageHeight > 0 ? 0 : 'auto',
308
- paddingBottom: imageHeight > 0 ? imageHeight : spacing
312
+ paddingBottom: imageHeight > 0 ? imageHeight - viewerTopHeight : spacing
309
313
  }
310
- }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, imageElement, /*#__PURE__*/React__default["default"].createElement("div", {
314
+ }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, /*#__PURE__*/React__default["default"].createElement("div", {
315
+ className: classNames__default["default"]([styles.main, _defineProperty__default["default"]({}, styles.hasText, hasText)])
316
+ }, imageElement, /*#__PURE__*/React__default["default"].createElement("div", {
311
317
  className: styles.topContent
312
- }, surtitleElement, dateElement), titleElement, authorElement, contentElement, !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
318
+ }, surtitleElement, dateElement), titleElement, authorElement), contentElement, !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
313
319
  className: classNames__default["default"]([styles.footer, _defineProperty__default["default"]({}, styles.disabled, !scrolledBottom)]),
314
320
  style: {
315
321
  paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
@@ -389,7 +395,7 @@ var definition = [{
389
395
  type: 'heading-element',
390
396
  inline: true,
391
397
  theme: {
392
- textStyle: 'heading2'
398
+ textStyle: 'header2'
393
399
  },
394
400
  label: reactIntl.defineMessage({
395
401
  id: "N25iDO",
@@ -418,26 +424,27 @@ var definition = [{
418
424
  "value": "Date"
419
425
  }]
420
426
  })
427
+ }, {
428
+ name: 'author',
429
+ type: 'author-element',
430
+ label: reactIntl.defineMessage({
431
+ id: "73hxYw",
432
+ defaultMessage: [{
433
+ "type": 0,
434
+ "value": "Author"
435
+ }]
436
+ })
421
437
  },
422
438
  // {
423
439
  // name: 'author',
424
- // type: 'author-element',
440
+ // type: 'text-element',
425
441
  // label: defineMessage({
426
442
  // defaultMessage: 'Author',
427
443
  // description: 'Author field label',
428
444
  // }),
429
445
  // },
446
+
430
447
  {
431
- name: 'author',
432
- type: 'text-element',
433
- label: reactIntl.defineMessage({
434
- id: "73hxYw",
435
- defaultMessage: [{
436
- "type": 0,
437
- "value": "Author"
438
- }]
439
- })
440
- }, {
441
448
  name: 'text',
442
449
  type: 'text-modal',
443
450
  label: reactIntl.defineMessage({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-article",
3
- "version": "0.3.410",
3
+ "version": "0.3.412",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -47,6 +47,7 @@
47
47
  "dependencies": {
48
48
  "@babel/runtime": "^7.13.10",
49
49
  "@micromag/core": "^0.3.410",
50
+ "@micromag/element-author": "^0.3.412",
50
51
  "@micromag/element-background": "^0.3.410",
51
52
  "@micromag/element-container": "^0.3.410",
52
53
  "@micromag/element-footer": "^0.3.410",
@@ -69,5 +70,5 @@
69
70
  "access": "public",
70
71
  "registry": "https://registry.npmjs.org/"
71
72
  },
72
- "gitHead": "3d20200b811ff19c75de0697a4c4543101bf755b"
73
+ "gitHead": "4d0b827ed8a3282317d05f9c3a4c5346639c5fe7"
73
74
  }