@micromag/screen-urbania-article 0.4.49 → 0.4.50

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 (2) hide show
  1. package/es/index.js +365 -325
  2. package/package.json +17 -17
package/es/index.js CHANGED
@@ -18,6 +18,7 @@ import Heading from '@micromag/element-heading';
18
18
  import Text from '@micromag/element-text';
19
19
  import UrbaniaAuthor from '@micromag/element-urbania-author';
20
20
  import Visual from '@micromag/element-visual';
21
+ import { jsx, jsxs } from 'react/jsx-runtime';
21
22
  import { useSpring, easings, animated } from '@react-spring/web';
22
23
  import { useGesture } from '@use-gesture/react';
23
24
  import isString from 'lodash/isString';
@@ -31,7 +32,7 @@ function Arrow(_ref) {
31
32
  strokeWidth = _ref$strokeWidth === void 0 ? 3 : _ref$strokeWidth,
32
33
  _ref$className = _ref.className,
33
34
  className = _ref$className === void 0 ? null : _ref$className;
34
- return /*#__PURE__*/React.createElement("svg", {
35
+ return /*#__PURE__*/jsx("svg", {
35
36
  version: "1.1",
36
37
  xmlns: "http://www.w3.org/2000/svg",
37
38
  xmlnsXlink: "http://www.w3.org/1999/xlink",
@@ -41,18 +42,20 @@ function Arrow(_ref) {
41
42
  height: "12.38px",
42
43
  viewBox: "0 0 48.53 12.38",
43
44
  className: className,
44
- xmlSpace: "preserve"
45
- }, /*#__PURE__*/React.createElement("g", {
46
- transform: "matrix(1, 0, 0, 1, 0, 0)"
47
- }, /*#__PURE__*/React.createElement("path", {
48
- id: "b",
49
- fill: "none",
50
- stroke: color,
51
- strokeWidth: "".concat(strokeWidth, "px"),
52
- strokeLinejoin: "round",
53
- strokeLinecap: "round",
54
- d: "M1.5,10.88L24.26,1.5l22.77,9.38"
55
- })));
45
+ xmlSpace: "preserve",
46
+ children: /*#__PURE__*/jsx("g", {
47
+ transform: "matrix(1, 0, 0, 1, 0, 0)",
48
+ children: /*#__PURE__*/jsx("path", {
49
+ id: "b",
50
+ fill: "none",
51
+ stroke: color,
52
+ strokeWidth: "".concat(strokeWidth, "px"),
53
+ strokeLinejoin: "round",
54
+ strokeLinecap: "round",
55
+ d: "M1.5,10.88L24.26,1.5l22.77,9.38"
56
+ })
57
+ })
58
+ });
56
59
  }
57
60
 
58
61
  function WatchIcon(_ref) {
@@ -60,7 +63,7 @@ function WatchIcon(_ref) {
60
63
  color = _ref$color === void 0 ? '#222' : _ref$color,
61
64
  _ref$className = _ref.className,
62
65
  className = _ref$className === void 0 ? null : _ref$className;
63
- return /*#__PURE__*/React.createElement("svg", {
66
+ return /*#__PURE__*/jsx("svg", {
64
67
  version: "1.1",
65
68
  xmlns: "http://www.w3.org/2000/svg",
66
69
  xmlnsXlink: "http://www.w3.org/1999/xlink",
@@ -70,16 +73,18 @@ function WatchIcon(_ref) {
70
73
  height: "17.76px",
71
74
  viewBox: "0 0 17.76 17.76",
72
75
  className: className,
73
- xmlSpace: "preserve"
74
- }, /*#__PURE__*/React.createElement("g", {
75
- transform: "translate(0 0)"
76
- }, /*#__PURE__*/React.createElement("path", {
77
- fill: color,
78
- d: "M8.34,0h1.08s.06,.02,.1,.02c.89,.07,1.77,.26,2.6,.59,1.9,.74,3.48,2.11,4.48,3.88,.5,.88,.85,1.84,1.02,2.84,.06,.34,.1,.69,.14,1.04v1.05s-.02,.1-.03,.15c-.2,2.62-1.55,5.01-3.69,6.53-1.17,.85-2.54,1.39-3.98,1.57l-.64,.09h-1.08s-.1-.02-.15-.03c-.94-.07-1.87-.3-2.74-.66C2.55,15.85,.51,13.18,.08,10.06c-.03-.21-.06-.43-.08-.64v-1.08c0-.06,.02-.11,.03-.17C.21,5.84,1.32,3.67,3.1,2.15,4.4,1.02,6,.3,7.71,.08l.63-.08Zm7.94,8.71c-.09-4.09-3.48-7.32-7.57-7.23-4.09,.09-7.32,3.48-7.23,7.57,.09,4.09,3.48,7.32,7.57,7.23,.04,0,.07,0,.11,0,4.04-.16,7.2-3.53,7.12-7.56h0Z"
79
- }), /*#__PURE__*/React.createElement("path", {
80
- fill: color,
81
- d: "M7.42,8.89v-2.61c-.02-.2,.09-.4,.28-.48,.15-.06,.32-.04,.44,.06,.39,.28,.78,.56,1.17,.85,.82,.59,1.63,1.19,2.45,1.78,.22,.11,.3,.38,.19,.59-.04,.08-.11,.15-.19,.19-.6,.45-1.21,.89-1.82,1.33-.59,.43-1.18,.86-1.78,1.29-.16,.17-.43,.17-.6,0-.02-.02-.03-.03-.04-.05-.07-.11-.1-.24-.1-.37,0-.86,0-1.72,0-2.58h0Z"
82
- })));
76
+ xmlSpace: "preserve",
77
+ children: /*#__PURE__*/jsxs("g", {
78
+ transform: "translate(0 0)",
79
+ children: [/*#__PURE__*/jsx("path", {
80
+ fill: color,
81
+ d: "M8.34,0h1.08s.06,.02,.1,.02c.89,.07,1.77,.26,2.6,.59,1.9,.74,3.48,2.11,4.48,3.88,.5,.88,.85,1.84,1.02,2.84,.06,.34,.1,.69,.14,1.04v1.05s-.02,.1-.03,.15c-.2,2.62-1.55,5.01-3.69,6.53-1.17,.85-2.54,1.39-3.98,1.57l-.64,.09h-1.08s-.1-.02-.15-.03c-.94-.07-1.87-.3-2.74-.66C2.55,15.85,.51,13.18,.08,10.06c-.03-.21-.06-.43-.08-.64v-1.08c0-.06,.02-.11,.03-.17C.21,5.84,1.32,3.67,3.1,2.15,4.4,1.02,6,.3,7.71,.08l.63-.08Zm7.94,8.71c-.09-4.09-3.48-7.32-7.57-7.23-4.09,.09-7.32,3.48-7.23,7.57,.09,4.09,3.48,7.32,7.57,7.23,.04,0,.07,0,.11,0,4.04-.16,7.2-3.53,7.12-7.56h0Z"
82
+ }), /*#__PURE__*/jsx("path", {
83
+ fill: color,
84
+ d: "M7.42,8.89v-2.61c-.02-.2,.09-.4,.28-.48,.15-.06,.32-.04,.44,.06,.39,.28,.78,.56,1.17,.85,.82,.59,1.63,1.19,2.45,1.78,.22,.11,.3,.38,.19,.59-.04,.08-.11,.15-.19,.19-.6,.45-1.21,.89-1.82,1.33-.59,.43-1.18,.86-1.78,1.29-.16,.17-.43,.17-.6,0-.02-.02-.03-.03-.04-.05-.07-.11-.1-.24-.1-.37,0-.86,0-1.72,0-2.58h0Z"
85
+ })]
86
+ })
87
+ });
83
88
  }
84
89
 
85
90
  var styles$1 = {"container":"micromag-screen-urbania-article-urbania-base-article-container","isPlaceholder":"micromag-screen-urbania-article-urbania-base-article-isPlaceholder","articleContent":"micromag-screen-urbania-article-urbania-base-article-articleContent","visual":"micromag-screen-urbania-article-urbania-base-article-visual","isVideo":"micromag-screen-urbania-article-urbania-base-article-isVideo","title":"micromag-screen-urbania-article-urbania-base-article-title","description":"micromag-screen-urbania-article-urbania-base-article-description","sponsors":"micromag-screen-urbania-article-urbania-base-article-sponsors","callToAction":"micromag-screen-urbania-article-urbania-base-article-callToAction","placeholder":"micromag-screen-urbania-article-urbania-base-article-placeholder","emptyContainer":"micromag-screen-urbania-article-urbania-base-article-emptyContainer","small":"micromag-screen-urbania-article-urbania-base-article-small","empty":"micromag-screen-urbania-article-urbania-base-article-empty","background":"micromag-screen-urbania-article-urbania-base-article-background","video":"micromag-screen-urbania-article-urbania-base-article-video","content":"micromag-screen-urbania-article-urbania-base-article-content","overTitle":"micromag-screen-urbania-article-urbania-base-article-overTitle","authors":"micromag-screen-urbania-article-urbania-base-article-authors","lede":"micromag-screen-urbania-article-urbania-base-article-lede","isAboveDescription":"micromag-screen-urbania-article-urbania-base-article-isAboveDescription","sponsor":"micromag-screen-urbania-article-urbania-base-article-sponsor","quatre95":"micromag-screen-urbania-article-urbania-base-article-quatre95","author":"micromag-screen-urbania-article-urbania-base-article-author","urbania":"micromag-screen-urbania-article-urbania-base-article-urbania","dehors":"micromag-screen-urbania-article-urbania-base-article-dehors","universities":"micromag-screen-urbania-article-urbania-base-article-universities","footerContainer":"micromag-screen-urbania-article-urbania-base-article-footerContainer","footer":"micromag-screen-urbania-article-urbania-base-article-footer","arrow":"micromag-screen-urbania-article-urbania-base-article-arrow","icon":"micromag-screen-urbania-article-urbania-base-article-icon","button":"micromag-screen-urbania-article-urbania-base-article-button","mediaControls":"micromag-screen-urbania-article-urbania-base-article-mediaControls","header":"micromag-screen-urbania-article-urbania-base-article-header","bottom":"micromag-screen-urbania-article-urbania-base-article-bottom","visible":"micromag-screen-urbania-article-urbania-base-article-visible","withGradient":"micromag-screen-urbania-article-urbania-base-article-withGradient","image":"micromag-screen-urbania-article-urbania-base-article-image","isCurrent":"micromag-screen-urbania-article-urbania-base-article-isCurrent","slowZoom":"micromag-screen-urbania-article-urbania-base-article-slowZoom","img":"micromag-screen-urbania-article-urbania-base-article-img"};
@@ -183,8 +188,8 @@ function UrbaniaArticle(_ref) {
183
188
  buttonClassName: styles$1.button,
184
189
  labelClassName: styles$1.label,
185
190
  arrowClassName: styles$1.arrow,
186
- arrow: /*#__PURE__*/React.createElement(Arrow, null),
187
- icon: type === 'video' ? /*#__PURE__*/React.createElement(WatchIcon, {
191
+ arrow: /*#__PURE__*/jsx(Arrow, {}),
192
+ icon: type === 'video' ? /*#__PURE__*/jsx(WatchIcon, {
188
193
  className: styles$1.icon
189
194
  }) : null
190
195
  };
@@ -216,203 +221,227 @@ function UrbaniaArticle(_ref) {
216
221
  _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
217
222
  isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
218
223
  var backgroundPlaying = current && !openedWebView && (isView || isEdit) && (isCurrentMedia || !isView);
219
- var items = [/*#__PURE__*/React.createElement(ScreenElement, {
220
- key: "overTitle",
221
- placeholder: /*#__PURE__*/React.createElement(PlaceholderSubtitle, {
224
+ var items = [/*#__PURE__*/jsx(ScreenElement, {
225
+ placeholder: /*#__PURE__*/jsx(PlaceholderSubtitle, {
222
226
  className: styles$1.placeholder
223
227
  }),
224
- empty: /*#__PURE__*/React.createElement("div", {
225
- className: classNames([styles$1.emptyContainer, styles$1.small])
226
- }, /*#__PURE__*/React.createElement(Empty, {
227
- className: styles$1.empty
228
- }, /*#__PURE__*/React.createElement(FormattedMessage, {
229
- id: "pRzSQ7",
230
- defaultMessage: [{
231
- "type": 0,
232
- "value": "Overtitle"
233
- }]
234
- }))),
235
- isEmpty: !hasOverTitle
236
- }, hasOverTitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({
237
- className: classNames([styles$1.overTitle])
238
- }, overTitle)) : null), /*#__PURE__*/React.createElement(ScreenElement, {
239
- key: "title",
240
- placeholder: /*#__PURE__*/React.createElement(PlaceholderTitle, {
228
+ empty: /*#__PURE__*/jsx("div", {
229
+ className: classNames([styles$1.emptyContainer, styles$1.small]),
230
+ children: /*#__PURE__*/jsx(Empty, {
231
+ className: styles$1.empty,
232
+ children: /*#__PURE__*/jsx(FormattedMessage, {
233
+ id: "pRzSQ7",
234
+ defaultMessage: [{
235
+ "type": 0,
236
+ "value": "Overtitle"
237
+ }]
238
+ })
239
+ })
240
+ }),
241
+ isEmpty: !hasOverTitle,
242
+ children: hasOverTitle ? /*#__PURE__*/jsx(Heading, _objectSpread({
243
+ className: classNames([styles$1.overTitle])
244
+ }, overTitle)) : null
245
+ }, "overTitle"), /*#__PURE__*/jsx(ScreenElement, {
246
+ placeholder: /*#__PURE__*/jsx(PlaceholderTitle, {
241
247
  className: styles$1.placeholder
242
248
  }),
243
- empty: /*#__PURE__*/React.createElement("div", {
244
- className: styles$1.emptyContainer
245
- }, /*#__PURE__*/React.createElement(Empty, {
246
- className: styles$1.empty
247
- }, /*#__PURE__*/React.createElement(FormattedMessage, {
248
- id: "2ZOPe+",
249
- defaultMessage: [{
250
- "type": 0,
251
- "value": "Title"
252
- }]
253
- }))),
254
- isEmpty: !hasTitle
255
- }, hasTitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({
256
- className: classNames([styles$1.title])
257
- }, title)) : null), /*#__PURE__*/React.createElement(ScreenElement, {
258
- key: "authors",
259
- empty: /*#__PURE__*/React.createElement("div", {
260
- className: styles$1.emptyContainer
261
- }, /*#__PURE__*/React.createElement(Empty, {
262
- className: styles$1.empty
263
- }, /*#__PURE__*/React.createElement(FormattedMessage, {
264
- id: "6jX5Tb",
265
- defaultMessage: [{
266
- "type": 0,
267
- "value": "Authors"
268
- }]
269
- }))),
270
- isEmpty: !hasAuthor
271
- }, hasAuthor ? /*#__PURE__*/React.createElement("div", {
272
- className: classNames([styles$1.authors, _defineProperty({}, styles$1.isAboveDescription, hasDescription)])
273
- }, /*#__PURE__*/React.createElement(UrbaniaAuthor, {
274
- author: author,
275
- shouldLoad: mediaShouldLoad
276
- })) : null), /*#__PURE__*/React.createElement(ScreenElement, {
277
- key: "description",
278
- empty: /*#__PURE__*/React.createElement("div", {
279
- className: styles$1.emptyContainer
280
- }, /*#__PURE__*/React.createElement(Empty, {
281
- className: styles$1.empty
282
- }, /*#__PURE__*/React.createElement(FormattedMessage, {
283
- id: "zl6zsZ",
284
- defaultMessage: [{
285
- "type": 0,
286
- "value": "Lede"
287
- }]
288
- }))),
289
- isEmpty: !hasDescription && !hasArticle
290
- }, hasDescription ? /*#__PURE__*/React.createElement("div", {
291
- className: classNames([styles$1.description])
292
- }, /*#__PURE__*/React.createElement(Text, Object.assign({
293
- className: classNames([styles$1.lede])
294
- }, description))) : null), /*#__PURE__*/React.createElement(ScreenElement, {
295
- key: "sponsors",
296
- empty: /*#__PURE__*/React.createElement("div", {
297
- className: classNames([styles$1.emptyContainer, styles$1.small])
298
- }, /*#__PURE__*/React.createElement(Empty, {
299
- className: styles$1.empty
300
- }, /*#__PURE__*/React.createElement(FormattedMessage, {
301
- id: "zGIcdn",
302
- defaultMessage: [{
303
- "type": 0,
304
- "value": "Sponsors"
305
- }]
306
- }))),
307
- isEmpty: !hasSponsor && !hasArticle
308
- }, hasSponsor ? /*#__PURE__*/React.createElement("div", {
309
- className: styles$1.sponsors,
310
- style: _objectSpread({}, getStyleFromColor(sponsorColor))
311
- }, sponsors.map(function () {
312
- var sponsor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
313
- var _ref9 = sponsor || {},
314
- _ref9$body = _ref9.body,
315
- body = _ref9$body === void 0 ? '' : _ref9$body;
316
- return /*#__PURE__*/React.createElement(React.Fragment, {
317
- key: body
318
- }, sponsorPrefix !== null ? /*#__PURE__*/React.createElement("span", {
319
- className: styles$1.sponsor
320
- }, sponsorPrefix) : null, /*#__PURE__*/React.createElement("span", null, "\xA0"), /*#__PURE__*/React.createElement(Heading, Object.assign({
321
- className: styles$1.sponsor,
322
- size: "6"
323
- }, sponsor)));
324
- })) : null)].filter(function (it) {
249
+ empty: /*#__PURE__*/jsx("div", {
250
+ className: styles$1.emptyContainer,
251
+ children: /*#__PURE__*/jsx(Empty, {
252
+ className: styles$1.empty,
253
+ children: /*#__PURE__*/jsx(FormattedMessage, {
254
+ id: "2ZOPe+",
255
+ defaultMessage: [{
256
+ "type": 0,
257
+ "value": "Title"
258
+ }]
259
+ })
260
+ })
261
+ }),
262
+ isEmpty: !hasTitle,
263
+ children: hasTitle ? /*#__PURE__*/jsx(Heading, _objectSpread({
264
+ className: classNames([styles$1.title])
265
+ }, title)) : null
266
+ }, "title"), /*#__PURE__*/jsx(ScreenElement, {
267
+ empty: /*#__PURE__*/jsx("div", {
268
+ className: styles$1.emptyContainer,
269
+ children: /*#__PURE__*/jsx(Empty, {
270
+ className: styles$1.empty,
271
+ children: /*#__PURE__*/jsx(FormattedMessage, {
272
+ id: "6jX5Tb",
273
+ defaultMessage: [{
274
+ "type": 0,
275
+ "value": "Authors"
276
+ }]
277
+ })
278
+ })
279
+ }),
280
+ isEmpty: !hasAuthor,
281
+ children: hasAuthor ? /*#__PURE__*/jsx("div", {
282
+ className: classNames([styles$1.authors, _defineProperty({}, styles$1.isAboveDescription, hasDescription)]),
283
+ children: /*#__PURE__*/jsx(UrbaniaAuthor, {
284
+ author: author,
285
+ shouldLoad: mediaShouldLoad
286
+ })
287
+ }) : null
288
+ }, "authors"), /*#__PURE__*/jsx(ScreenElement, {
289
+ empty: /*#__PURE__*/jsx("div", {
290
+ className: styles$1.emptyContainer,
291
+ children: /*#__PURE__*/jsx(Empty, {
292
+ className: styles$1.empty,
293
+ children: /*#__PURE__*/jsx(FormattedMessage, {
294
+ id: "zl6zsZ",
295
+ defaultMessage: [{
296
+ "type": 0,
297
+ "value": "Lede"
298
+ }]
299
+ })
300
+ })
301
+ }),
302
+ isEmpty: !hasDescription && !hasArticle,
303
+ children: hasDescription ? /*#__PURE__*/jsx("div", {
304
+ className: classNames([styles$1.description]),
305
+ children: /*#__PURE__*/jsx(Text, _objectSpread({
306
+ className: classNames([styles$1.lede])
307
+ }, description))
308
+ }) : null
309
+ }, "description"), /*#__PURE__*/jsx(ScreenElement, {
310
+ empty: /*#__PURE__*/jsx("div", {
311
+ className: classNames([styles$1.emptyContainer, styles$1.small]),
312
+ children: /*#__PURE__*/jsx(Empty, {
313
+ className: styles$1.empty,
314
+ children: /*#__PURE__*/jsx(FormattedMessage, {
315
+ id: "zGIcdn",
316
+ defaultMessage: [{
317
+ "type": 0,
318
+ "value": "Sponsors"
319
+ }]
320
+ })
321
+ })
322
+ }),
323
+ isEmpty: !hasSponsor && !hasArticle,
324
+ children: hasSponsor ? /*#__PURE__*/jsx("div", {
325
+ className: styles$1.sponsors,
326
+ style: _objectSpread({}, getStyleFromColor(sponsorColor)),
327
+ children: sponsors.map(function () {
328
+ var sponsor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
329
+ var _ref9 = sponsor || {},
330
+ _ref9$body = _ref9.body,
331
+ body = _ref9$body === void 0 ? '' : _ref9$body;
332
+ return /*#__PURE__*/jsxs(React.Fragment, {
333
+ children: [sponsorPrefix !== null ? /*#__PURE__*/jsx("span", {
334
+ className: styles$1.sponsor,
335
+ children: sponsorPrefix
336
+ }) : null, /*#__PURE__*/jsx("span", {
337
+ children: "\xA0"
338
+ }), /*#__PURE__*/jsx(Heading, _objectSpread({
339
+ className: styles$1.sponsor,
340
+ size: "6"
341
+ }, sponsor))]
342
+ }, body);
343
+ })
344
+ }) : null
345
+ }, "sponsors")].filter(function (it) {
325
346
  return it !== null;
326
347
  });
327
- return /*#__PURE__*/React.createElement("div", {
348
+ return /*#__PURE__*/jsxs("div", {
328
349
  className: classNames([styles$1.container, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$1.isCurrent, current), styles$1.isVideo, isVideo), styles$1.hasVideoBackground, hasVideoBackground), styles$1.isPlaceholder, isPlaceholder)]),
329
- "data-screen-ready": isStatic || isCapture
330
- }, /*#__PURE__*/React.createElement(Background, {
331
- className: styles$1.background,
332
- background: background,
333
- width: width,
334
- height: height,
335
- resolution: resolution,
336
- playing: backgroundPlaying,
337
- muted: muted,
338
- shouldLoad: mediaShouldLoad,
339
- mediaRef: isVideoBackground ? mediaRef : null,
340
- withoutVideo: isPreview
341
- }), /*#__PURE__*/React.createElement(Container, {
342
- className: styles$1.content,
343
- width: width,
344
- height: height
345
- }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
346
- key: "header",
347
- className: styles$1.header,
348
- style: {
349
- paddingTop: spacing / 2,
350
- paddingLeft: spacing,
351
- paddingRight: spacing,
352
- transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
353
- }
354
- }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement("div", {
355
- className: classNames([styles$1.articleContent, _defineProperty({}, styles$1["".concat(site)], site !== null)]),
356
- style: _objectSpread({
357
- paddingTop: spacing,
358
- minHeight: minContentHeight
359
- }, !isVideo ? getStyleFromColor(backgroundColor, 'backgroundColor') : null),
360
- ref: contentRef
361
- }, items), /*#__PURE__*/React.createElement("div", {
362
- className: styles$1.visual
363
- }, /*#__PURE__*/React.createElement(ScreenElement, {
364
- key: "image",
365
- placeholder: /*#__PURE__*/React.createElement(PlaceholderImage, {
366
- className: styles$1.placeholder
367
- }),
368
- empty: /*#__PURE__*/React.createElement("div", {
369
- className: styles$1.emptyContainer
370
- }, /*#__PURE__*/React.createElement(Empty, {
371
- className: styles$1.empty
372
- }, /*#__PURE__*/React.createElement(FormattedMessage, {
373
- id: "ebsPd4",
374
- defaultMessage: [{
375
- "type": 0,
376
- "value": "Image"
377
- }]
378
- }))),
379
- isEmpty: !hasImage && !hasArticle
380
- }, hasImage && !isVideo ? /*#__PURE__*/React.createElement(Visual, {
381
- className: styles$1.image,
382
- imageClassName: styles$1.img,
383
- media: image,
384
- width: width,
385
- height: height,
386
- resolution: resolution,
387
- objectFit: {
388
- fit: 'cover'
389
- },
390
- shouldLoad: mediaShouldLoad
391
- }) : null, hasImage && isVideo && !hasVideoBackground ? /*#__PURE__*/React.createElement(Visual, {
392
- className: styles$1.video,
393
- media: image,
394
- width: width,
395
- height: height,
396
- resolution: resolution,
397
- objectFit: {
398
- fit: 'cover'
399
- },
400
- shouldLoad: mediaShouldLoad,
401
- playing: finalPlaying,
402
- muted: muted,
403
- withoutVideo: isPreview,
404
- mediaRef: mediaRef,
405
- autoPlay: true
406
- }) : null)), /*#__PURE__*/React.createElement("div", {
407
- className: styles$1.footerContainer
408
- }, !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
409
- style: {
410
- paddingTop: spacing,
411
- paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
412
- paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
413
- },
414
- className: styles$1.footer
415
- }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null)));
350
+ "data-screen-ready": isStatic || isCapture,
351
+ children: [/*#__PURE__*/jsx(Background, {
352
+ className: styles$1.background,
353
+ background: background,
354
+ width: width,
355
+ height: height,
356
+ resolution: resolution,
357
+ playing: backgroundPlaying,
358
+ muted: muted,
359
+ shouldLoad: mediaShouldLoad,
360
+ mediaRef: isVideoBackground ? mediaRef : null,
361
+ withoutVideo: isPreview
362
+ }), /*#__PURE__*/jsxs(Container, {
363
+ className: styles$1.content,
364
+ width: width,
365
+ height: height,
366
+ children: [!isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
367
+ className: styles$1.header,
368
+ style: {
369
+ paddingTop: spacing / 2,
370
+ paddingLeft: spacing,
371
+ paddingRight: spacing,
372
+ transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
373
+ },
374
+ children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
375
+ }, "header") : null, /*#__PURE__*/jsx("div", {
376
+ className: classNames([styles$1.articleContent, _defineProperty({}, styles$1["".concat(site)], site !== null)]),
377
+ style: _objectSpread({
378
+ paddingTop: spacing,
379
+ minHeight: minContentHeight
380
+ }, !isVideo ? getStyleFromColor(backgroundColor, 'backgroundColor') : null),
381
+ ref: contentRef,
382
+ children: items
383
+ }), /*#__PURE__*/jsx("div", {
384
+ className: styles$1.visual,
385
+ children: /*#__PURE__*/jsxs(ScreenElement, {
386
+ placeholder: /*#__PURE__*/jsx(PlaceholderImage, {
387
+ className: styles$1.placeholder
388
+ }),
389
+ empty: /*#__PURE__*/jsx("div", {
390
+ className: styles$1.emptyContainer,
391
+ children: /*#__PURE__*/jsx(Empty, {
392
+ className: styles$1.empty,
393
+ children: /*#__PURE__*/jsx(FormattedMessage, {
394
+ id: "ebsPd4",
395
+ defaultMessage: [{
396
+ "type": 0,
397
+ "value": "Image"
398
+ }]
399
+ })
400
+ })
401
+ }),
402
+ isEmpty: !hasImage && !hasArticle,
403
+ children: [hasImage && !isVideo ? /*#__PURE__*/jsx(Visual, {
404
+ className: styles$1.image,
405
+ imageClassName: styles$1.img,
406
+ media: image,
407
+ width: width,
408
+ height: height,
409
+ resolution: resolution,
410
+ objectFit: {
411
+ fit: 'cover'
412
+ },
413
+ shouldLoad: mediaShouldLoad
414
+ }) : null, hasImage && isVideo && !hasVideoBackground ? /*#__PURE__*/jsx(Visual, {
415
+ className: styles$1.video,
416
+ media: image,
417
+ width: width,
418
+ height: height,
419
+ resolution: resolution,
420
+ objectFit: {
421
+ fit: 'cover'
422
+ },
423
+ shouldLoad: mediaShouldLoad,
424
+ playing: finalPlaying,
425
+ muted: muted,
426
+ withoutVideo: isPreview,
427
+ mediaRef: mediaRef,
428
+ autoPlay: true
429
+ }) : null]
430
+ }, "image")
431
+ }), /*#__PURE__*/jsx("div", {
432
+ className: styles$1.footerContainer,
433
+ children: !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
434
+ style: {
435
+ paddingTop: spacing,
436
+ paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
437
+ paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
438
+ },
439
+ className: styles$1.footer,
440
+ children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
441
+ }) : null
442
+ })]
443
+ })]
444
+ });
416
445
  }
417
446
 
418
447
  var _excluded = ["component", "title", "articleType", "overTitle", "sponsorLabel", "author", "image", "header", "footer", "url", "article"];
@@ -538,7 +567,7 @@ function UrbaniaLoader(_ref) {
538
567
  var hasOverTitle = isTextFilled(overTitle);
539
568
  var hasSponsorProps = isTextFilled(sponsorLabel);
540
569
  var hasAuthorProps = author !== null && author.name !== null && isTextFilled(author.name);
541
- var sponsorPrefix = !hasSponsorProps && defaultSponsor !== null ? /*#__PURE__*/React.createElement(FormattedMessage, {
570
+ var sponsorPrefix = !hasSponsorProps && defaultSponsor !== null ? /*#__PURE__*/jsx(FormattedMessage, {
542
571
  id: "+TPjd4",
543
572
  defaultMessage: [{
544
573
  "type": 0,
@@ -593,7 +622,7 @@ function UrbaniaLoader(_ref) {
593
622
  var _ref14 = articleTitle || {},
594
623
  _ref14$body = _ref14.body,
595
624
  titleBody = _ref14$body === void 0 ? null : _ref14$body;
596
- return /*#__PURE__*/React.createElement(Component, Object.assign({}, props, values, {
625
+ return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread(_objectSpread({}, props), values), {}, {
597
626
  hasArticle: titleBody !== null
598
627
  }));
599
628
  }
@@ -973,122 +1002,133 @@ function UrbaniaArticleCard(_ref) {
973
1002
  setControlsSuggestPlay(true);
974
1003
  }
975
1004
  }, [isView, current, playing, isBackgroundVideo, setPlaying, setControlsSuggestPlay]);
976
- return /*#__PURE__*/React.createElement("div", {
1005
+ return /*#__PURE__*/jsxs("div", {
977
1006
  className: classNames([styles.container, className, _defineProperty(_defineProperty({}, styles.isCurrent, current), styles.isPlaceholder, isPlaceholder)]),
978
- "data-screen-ready": isStatic || isCapture
979
- }, /*#__PURE__*/React.createElement(Background, {
980
- className: styles.background,
981
- background: finalBackground,
982
- width: width,
983
- height: height,
984
- resolution: resolution,
985
- playing: backgroundPlaying && !webviewOpened,
986
- muted: muted,
987
- mediaRef: mediaRef,
988
- onPlayError: onPlayError,
989
- shouldLoad: mediaShouldLoad,
990
- withoutVideo: isPreview
991
- }), /*#__PURE__*/React.createElement(Container, {
992
- className: styles.content,
993
- width: width,
994
- height: height
995
- }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
996
- key: "header",
997
- className: styles.header,
998
- style: {
999
- paddingTop: spacing / 2,
1000
- paddingLeft: spacing,
1001
- paddingRight: spacing,
1002
- transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
1003
- }
1004
- }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(Layout, {
1005
- className: styles.layout,
1006
- height: height * 0.65
1007
- }, /*#__PURE__*/React.createElement(ScreenElement, {
1008
- key: "text",
1009
- empty: /*#__PURE__*/React.createElement(Empty, {
1010
- className: styles.emptyText
1011
- }, /*#__PURE__*/React.createElement(FormattedMessage, {
1012
- id: "z4CiV1",
1013
- defaultMessage: [{
1014
- "type": 0,
1015
- "value": "Text"
1016
- }]
1017
- })),
1018
- placeholder: /*#__PURE__*/React.createElement(PlaceholderText, {
1019
- className: styles.placeholderText
1020
- })
1021
- }, hasText ? /*#__PURE__*/React.createElement(Text, Object.assign({
1022
- className: styles.text
1023
- }, text)) : null)), /*#__PURE__*/React.createElement(Container, {
1024
- className: classNames([styles.cardContainer, _defineProperty({}, styles.isPlaceholder, isPlaceholder)])
1025
- }, /*#__PURE__*/React.createElement(ScreenElement, {
1026
- placeholderProps: {
1027
- className: styles.placeholder
1028
- },
1029
- emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
1030
- id: "yMpGIc",
1031
- defaultMessage: [{
1032
- "type": 0,
1033
- "value": "Article"
1034
- }]
1035
- }),
1036
- emptyClassName: styles.empty,
1037
- isEmpty: !hasUrl || !hasArticle
1038
- }, !isPlaceholder && hasArticle ? /*#__PURE__*/React.createElement(animated.div, {
1039
- className: styles.card,
1040
- style: {
1007
+ "data-screen-ready": isStatic || isCapture,
1008
+ children: [/*#__PURE__*/jsx(Background, {
1009
+ className: styles.background,
1010
+ background: finalBackground,
1011
+ width: width,
1041
1012
  height: height,
1013
+ resolution: resolution,
1014
+ playing: backgroundPlaying && !webviewOpened,
1015
+ muted: muted,
1016
+ mediaRef: mediaRef,
1017
+ onPlayError: onPlayError,
1018
+ shouldLoad: mediaShouldLoad,
1019
+ withoutVideo: isPreview
1020
+ }), /*#__PURE__*/jsxs(Container, {
1021
+ className: styles.content,
1042
1022
  width: width,
1043
- transform: !isPreview ? springStyle.y.to(function (value) {
1044
- return "translateY(".concat(value, "%");
1045
- }) : "translateY(".concat(100 - minimumVisibility, "%)")
1046
- }
1047
- }, /*#__PURE__*/React.createElement("button", Object.assign({
1048
- type: "button",
1049
- onClick: toggleCard,
1050
- className: styles.dragHandle,
1051
- tabIndex: !current ? -1 : 0,
1052
- "aria-label": intl.formatMessage({
1053
- id: "IoMJgw",
1054
- defaultMessage: [{
1055
- "type": 0,
1056
- "value": "Toggle article"
1057
- }]
1058
- }),
1059
- "aria-pressed": webviewOpened
1060
- }, current ? bindGesture() : null)), /*#__PURE__*/React.createElement("div", {
1061
- className: classNames([styles.cardInner, _defineProperty({}, styles.pulse, withCardBounce)])
1062
- }, hasCta ? /*#__PURE__*/React.createElement("div", {
1063
- className: styles.callToAction
1064
- }, /*#__PURE__*/React.createElement(Arrow, {
1065
- strokeWidth: 1,
1066
- className: styles.arrow
1067
- }), /*#__PURE__*/React.createElement(Text, Object.assign({
1068
- className: styles.ctaText
1069
- }, callToAction))) : null, /*#__PURE__*/React.createElement("div", {
1070
- className: styles.articlePreview,
1071
- ref: articlePreviewRef
1072
- }, /*#__PURE__*/React.createElement("div", {
1073
- className: styles.articlePreviewInner,
1074
- style: {
1075
- paddingBottom: current && !isPreview ? Math.max(viewerBottomHeight, 20) : null
1076
- }
1077
- }, hasTitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({
1078
- className: classNames([styles.articleTitle])
1079
- }, title)) : null, hasAuthorName ? /*#__PURE__*/React.createElement(UrbaniaAuthor, {
1080
- isSmall: true,
1081
- withoutBackground: true,
1082
- author: author,
1083
- shouldLoad: mediaShouldLoad
1084
- }) : null)))) : null))));
1023
+ height: height,
1024
+ children: [!isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
1025
+ className: styles.header,
1026
+ style: {
1027
+ paddingTop: spacing / 2,
1028
+ paddingLeft: spacing,
1029
+ paddingRight: spacing,
1030
+ transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
1031
+ },
1032
+ children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
1033
+ }, "header") : null, /*#__PURE__*/jsx(Layout, {
1034
+ className: styles.layout,
1035
+ height: height * 0.65,
1036
+ children: /*#__PURE__*/jsx(ScreenElement, {
1037
+ empty: /*#__PURE__*/jsx(Empty, {
1038
+ className: styles.emptyText,
1039
+ children: /*#__PURE__*/jsx(FormattedMessage, {
1040
+ id: "z4CiV1",
1041
+ defaultMessage: [{
1042
+ "type": 0,
1043
+ "value": "Text"
1044
+ }]
1045
+ })
1046
+ }),
1047
+ placeholder: /*#__PURE__*/jsx(PlaceholderText, {
1048
+ className: styles.placeholderText
1049
+ }),
1050
+ children: hasText ? /*#__PURE__*/jsx(Text, _objectSpread({
1051
+ className: styles.text
1052
+ }, text)) : null
1053
+ }, "text")
1054
+ }), /*#__PURE__*/jsx(Container, {
1055
+ className: classNames([styles.cardContainer, _defineProperty({}, styles.isPlaceholder, isPlaceholder)]),
1056
+ children: /*#__PURE__*/jsx(ScreenElement, {
1057
+ placeholderProps: {
1058
+ className: styles.placeholder
1059
+ },
1060
+ emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
1061
+ id: "yMpGIc",
1062
+ defaultMessage: [{
1063
+ "type": 0,
1064
+ "value": "Article"
1065
+ }]
1066
+ }),
1067
+ emptyClassName: styles.empty,
1068
+ isEmpty: !hasUrl || !hasArticle,
1069
+ children: !isPlaceholder && hasArticle ? /*#__PURE__*/jsxs(animated.div, {
1070
+ className: styles.card,
1071
+ style: {
1072
+ height: height,
1073
+ width: width,
1074
+ transform: !isPreview ? springStyle.y.to(function (value) {
1075
+ return "translateY(".concat(value, "%");
1076
+ }) : "translateY(".concat(100 - minimumVisibility, "%)")
1077
+ },
1078
+ children: [/*#__PURE__*/jsx("button", _objectSpread({
1079
+ type: "button",
1080
+ onClick: toggleCard,
1081
+ className: styles.dragHandle,
1082
+ tabIndex: !current ? -1 : 0,
1083
+ "aria-label": intl.formatMessage({
1084
+ id: "IoMJgw",
1085
+ defaultMessage: [{
1086
+ "type": 0,
1087
+ "value": "Toggle article"
1088
+ }]
1089
+ }),
1090
+ "aria-pressed": webviewOpened
1091
+ }, current ? bindGesture() : null)), /*#__PURE__*/jsxs("div", {
1092
+ className: classNames([styles.cardInner, _defineProperty({}, styles.pulse, withCardBounce)]),
1093
+ children: [hasCta ? /*#__PURE__*/jsxs("div", {
1094
+ className: styles.callToAction,
1095
+ children: [/*#__PURE__*/jsx(Arrow, {
1096
+ strokeWidth: 1,
1097
+ className: styles.arrow
1098
+ }), /*#__PURE__*/jsx(Text, _objectSpread({
1099
+ className: styles.ctaText
1100
+ }, callToAction))]
1101
+ }) : null, /*#__PURE__*/jsx("div", {
1102
+ className: styles.articlePreview,
1103
+ ref: articlePreviewRef,
1104
+ children: /*#__PURE__*/jsxs("div", {
1105
+ className: styles.articlePreviewInner,
1106
+ style: {
1107
+ paddingBottom: current && !isPreview ? Math.max(viewerBottomHeight, 20) : null
1108
+ },
1109
+ children: [hasTitle ? /*#__PURE__*/jsx(Heading, _objectSpread({
1110
+ className: classNames([styles.articleTitle])
1111
+ }, title)) : null, hasAuthorName ? /*#__PURE__*/jsx(UrbaniaAuthor, {
1112
+ isSmall: true,
1113
+ withoutBackground: true,
1114
+ author: author,
1115
+ shouldLoad: mediaShouldLoad
1116
+ }) : null]
1117
+ })
1118
+ })]
1119
+ })]
1120
+ }) : null
1121
+ })
1122
+ })]
1123
+ })]
1124
+ });
1085
1125
  }
1086
1126
 
1087
1127
  function UrbaniaCardLoader(props) {
1088
1128
  var _ref = props || {},
1089
1129
  _ref$cardCallToAction = _ref.cardCallToAction,
1090
1130
  cardCallToAction = _ref$cardCallToAction === void 0 ? {} : _ref$cardCallToAction;
1091
- return /*#__PURE__*/React.createElement(UrbaniaLoader, Object.assign({
1131
+ return /*#__PURE__*/jsx(UrbaniaLoader, _objectSpread({
1092
1132
  component: UrbaniaArticleCard,
1093
1133
  callToAction: cardCallToAction
1094
1134
  }, props));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-urbania-article",
3
- "version": "0.4.49",
3
+ "version": "0.4.50",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -63,21 +63,21 @@
63
63
  "@babel/runtime": "^7.28.6",
64
64
  "@folklore/fetch": "^0.1.17",
65
65
  "@folklore/size": "^0.1.20",
66
- "@micromag/core": "^0.4.49",
67
- "@micromag/element-background": "^0.4.49",
68
- "@micromag/element-button": "^0.4.49",
69
- "@micromag/element-closed-captions": "^0.4.49",
70
- "@micromag/element-container": "^0.4.49",
71
- "@micromag/element-footer": "^0.4.49",
72
- "@micromag/element-header": "^0.4.49",
73
- "@micromag/element-heading": "^0.4.49",
74
- "@micromag/element-image": "^0.4.49",
75
- "@micromag/element-layout": "^0.4.49",
76
- "@micromag/element-text": "^0.4.49",
77
- "@micromag/element-urbania-author": "^0.4.49",
78
- "@micromag/element-video": "^0.4.49",
79
- "@micromag/element-visual": "^0.4.49",
80
- "@micromag/transforms": "^0.4.49",
66
+ "@micromag/core": "^0.4.50",
67
+ "@micromag/element-background": "^0.4.50",
68
+ "@micromag/element-button": "^0.4.50",
69
+ "@micromag/element-closed-captions": "^0.4.50",
70
+ "@micromag/element-container": "^0.4.50",
71
+ "@micromag/element-footer": "^0.4.50",
72
+ "@micromag/element-header": "^0.4.50",
73
+ "@micromag/element-heading": "^0.4.50",
74
+ "@micromag/element-image": "^0.4.50",
75
+ "@micromag/element-layout": "^0.4.50",
76
+ "@micromag/element-text": "^0.4.50",
77
+ "@micromag/element-urbania-author": "^0.4.50",
78
+ "@micromag/element-video": "^0.4.50",
79
+ "@micromag/element-visual": "^0.4.50",
80
+ "@micromag/transforms": "^0.4.50",
81
81
  "@react-spring/web": "^10.0.3",
82
82
  "@use-gesture/react": "^10.3.0",
83
83
  "classnames": "^2.2.6",
@@ -90,6 +90,6 @@
90
90
  "access": "public",
91
91
  "registry": "https://registry.npmjs.org/"
92
92
  },
93
- "gitHead": "0a225ff29387217cccb0fcc5a731e23c74bd202e",
93
+ "gitHead": "940d5ca98f8f448b79eaa3e2fa685c3ee95185b8",
94
94
  "types": "es/index.d.ts"
95
95
  }