@micromag/screen-urbania-recommendation 0.3.362 → 0.3.370

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.
@@ -1 +1 @@
1
- .micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-urbania-recommendation-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-urbania-recommendation-disabled.micromag-screen-urbania-recommendation-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-recommendation-hidden.micromag-screen-urbania-recommendation-container{display:none;visibility:hidden}.micromag-screen-urbania-recommendation-placeholder.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-content{padding:6px;position:relative}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-urbania-recommendation-container{-ms-flex-align:start;align-items:flex-start}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-background{z-index:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-content{z-index:1}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyTitle{margin:10px auto;width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyTitle{height:100px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText{height:50px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-callToAction{-webkit-transition:opacity .2 ease-out;-o-transition:opacity .2 ease-out;transition:opacity .2 ease-out}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-callToAction.micromag-screen-urbania-recommendation-disabled{opacity:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard{border:2px solid #000;border-radius:17px;-webkit-box-shadow:0 3px 34px rgba(0,0,0,.43);box-shadow:0 3px 34px rgba(0,0,0,.43);color:#000;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;text-align:center}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-isPlaceholder{background-color:#adadad;height:200px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-appear{-webkit-animation:micromag-screen-urbania-recommendation-appear 1s ease-in-out;animation:micromag-screen-urbania-recommendation-appear 1s ease-in-out;-webkit-animation-delay:.9s;animation-delay:.9s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;opacity:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-category{background-color:#ff4f46;border-bottom:2px solid #000;color:#fff;font-family:Agrandir Tight,sans-serif;font-size:28px;font-weight:900;padding:12px 10px 6px;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-category.micromag-screen-urbania-recommendation-noBottomBorder{border-bottom:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-categoryPlaceholder{background-color:#343434;padding:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateTitleRow{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;background-color:#fff;display:-ms-flexbox;display:flex;justify-content:center;width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateTitleRow.micromag-screen-urbania-recommendation-bottomBorder{border-bottom:2px solid #000}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateTitleRow.micromag-screen-urbania-recommendation-isPlaceholder{background-color:#e9e9e9;margin-left:2px;padding:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateContainer{-ms-flex-positive:1;flex-grow:1;height:inherit;max-width:50%;min-width:30%;overflow-wrap:break-word;padding:15px 10px;text-align:center}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateContainer strong{white-space:nowrap}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date{color:#ff4f46;font-family:Agrandir,sans-serif;font-size:12px;line-height:1}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date.micromag-screen-urbania-recommendation-centerDate{text-align:center}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-titleContainer{max-width:70%;min-width:50%;overflow-wrap:break-word}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-titleContainer.micromag-screen-urbania-recommendation-leftBorder{border-left:2px solid #000;margin-left:-2px;margin-right:-2px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-title{font-family:Agrandir Narrow,sans-serif;font-size:20px;font-weight:700;line-height:1;padding:15px 20px 11px;text-align:center;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor{background-color:#fffc00;font-family:Agrandir,sans-serif;font-size:10px;line-height:1;padding:5px 10px 3px;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor>p{margin-bottom:0;margin-top:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor.micromag-screen-urbania-recommendation-bottomBorder{border-bottom:2px solid #000}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsorPlaceholder{padding:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description{background-color:#fff;font-family:Roboto,sans-serif;font-size:12px;padding:10px;text-align:left}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description p{margin-bottom:1em}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description p:last-child{margin-bottom:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-descriptionPlaceholder{padding:10px 10px 30px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-background{-webkit-animation:micromag-screen-urbania-recommendation-roll .9s ease-out;animation:micromag-screen-urbania-recommendation-roll .9s ease-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.micromag-screen-urbania-recommendation-container.micromag-screen-urbania-recommendation-isPlaceholder .micromag-screen-urbania-recommendation-layout{padding:10px}@-webkit-keyframes micromag-screen-urbania-recommendation-roll{0%{background-position-y:-50vh}to{background-position-y:0}}@keyframes micromag-screen-urbania-recommendation-roll{0%{background-position-y:-50vh}to{background-position-y:0}}@-webkit-keyframes micromag-screen-urbania-recommendation-appear{0%{opacity:0}66%{opacity:0}to{opacity:1}}@keyframes micromag-screen-urbania-recommendation-appear{0%{opacity:0}66%{opacity:0}to{opacity:1}}
1
+ .micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-urbania-recommendation-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-urbania-recommendation-disabled.micromag-screen-urbania-recommendation-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-recommendation-hidden.micromag-screen-urbania-recommendation-container{display:none;visibility:hidden}.micromag-screen-urbania-recommendation-placeholder.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-content{padding:6px;position:relative}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-empty,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyCategory,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-urbania-recommendation-container{-ms-flex-align:start;align-items:flex-start}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-background{z-index:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-content{z-index:1}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-empty,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText{width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyVisual{height:50px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptySponsor,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyVisual{width:calc(100% - 10px)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptySponsor{padding:5px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyCategory{padding:10px;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-callToAction{-webkit-transition:opacity .2 ease-out;-o-transition:opacity .2 ease-out;transition:opacity .2 ease-out}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-callToAction.micromag-screen-urbania-recommendation-disabled{opacity:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard{background-color:#fff;border-radius:10px;-webkit-box-shadow:4px 4px 4px rgba(0,0,0,.25);box-shadow:4px 4px 4px rgba(0,0,0,.25);color:#000;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:0 auto;width:90%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-isPlaceholder{background-color:#adadad}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-appear{-webkit-animation:micromag-screen-urbania-recommendation-appear 1s ease-in-out;animation:micromag-screen-urbania-recommendation-appear 1s ease-in-out;-webkit-animation-delay:.5s;animation-delay:.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;opacity:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-visualBottom,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-visualBottom .micromag-screen-urbania-recommendation-visualContainer{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualContainer{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:250px;overflow:hidden}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visual{height:auto;max-height:250px;width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor{background-color:#fffc00;font-family:Agrandir,sans-serif;font-size:10px;line-height:1;padding:5px 10px 3px;text-align:center;text-transform:uppercase;width:100%;z-index:1}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor>p{margin-bottom:0;margin-top:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor.micromag-screen-urbania-recommendation-hasVisual{position:absolute}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsorPlaceholder{padding:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualWrapper{left:0;top:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-text{display:-ms-flexbox;display:flex}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-category{font-family:Agrandir Tight,sans-serif;font-size:28px;font-weight:900;padding:12px 10px 6px;text-align:center;text-transform:uppercase;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);width:20%;-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-categoryPlaceholder{background-color:#343434;padding:10px;width:20%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textContent{padding:14px 8px 14px 0;width:80%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textContent.micromag-screen-urbania-recommendation-isPlaceholder{background-color:#e9e9e9;margin-left:2px;padding:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-titleContainer{overflow-wrap:break-word}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-title{border-bottom:1px solid #000;font-family:Agrandir Tight,sans-serif;font-size:1.2rem;font-weight:700;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-location{border-bottom:1px solid #000;font-family:Agrandir Tight,sans-serif;padding-top:3px;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date{font-size:14px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-location{font-size:12px;font-weight:700}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description{font-family:Agrandir Tight,sans-serif;font-size:12px;font-weight:300;padding-top:3px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description p{margin-bottom:.5em}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description p:last-child{margin-bottom:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-descriptionPlaceholder{padding:10px 10px 30px}.micromag-screen-urbania-recommendation-container.micromag-screen-urbania-recommendation-isPlaceholder .micromag-screen-urbania-recommendation-layout{padding:10px}@-webkit-keyframes micromag-screen-urbania-recommendation-appear{0%{opacity:0}66%{opacity:0}to{opacity:1}}@keyframes micromag-screen-urbania-recommendation-appear{0%{opacity:0}66%{opacity:0}to{opacity:1}}
package/es/index.js CHANGED
@@ -1,14 +1,13 @@
1
1
  import { FormattedMessage, defineMessage } from 'react-intl';
2
2
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
- import _objectSpread from '@babel/runtime/helpers/objectSpread2';
4
3
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
5
4
  import classNames from 'classnames';
6
5
  import PropTypes$1 from 'prop-types';
7
- import React, { useState, useEffect, useCallback, useMemo } from 'react';
6
+ import React, { useState, useEffect, useCallback } from 'react';
8
7
  import { PropTypes } from '@micromag/core';
9
- import { ScreenElement, PlaceholderTitle, PlaceholderText, TransitionsStagger } from '@micromag/core/components';
8
+ import { ScreenElement, PlaceholderText, PlaceholderImage, PlaceholderTitle } from '@micromag/core/components';
10
9
  import { useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenRenderContext } from '@micromag/core/contexts';
11
- import { useTrackScreenEvent } from '@micromag/core/hooks';
10
+ import { useTrackScreenEvent, useResizeObserver } from '@micromag/core/hooks';
12
11
  import { isTextFilled, isHeaderFilled, isFooterFilled, getFooterProps } from '@micromag/core/utils';
13
12
  import Background from '@micromag/element-background';
14
13
  import Container from '@micromag/element-container';
@@ -18,59 +17,60 @@ import Heading from '@micromag/element-heading';
18
17
  import Layout, { Spacer } from '@micromag/element-layout';
19
18
  import Scroll from '@micromag/element-scroll';
20
19
  import Text from '@micromag/element-text';
20
+ import Visual from '@micromag/element-visual';
21
21
 
22
- var styles = {"container":"micromag-screen-urbania-recommendation-container","background":"micromag-screen-urbania-recommendation-background","disabled":"micromag-screen-urbania-recommendation-disabled","hidden":"micromag-screen-urbania-recommendation-hidden","placeholder":"micromag-screen-urbania-recommendation-placeholder","content":"micromag-screen-urbania-recommendation-content","emptyTitle":"micromag-screen-urbania-recommendation-emptyTitle","emptyText":"micromag-screen-urbania-recommendation-emptyText","callToAction":"micromag-screen-urbania-recommendation-callToAction","textCard":"micromag-screen-urbania-recommendation-textCard","isPlaceholder":"micromag-screen-urbania-recommendation-isPlaceholder","appear":"micromag-screen-urbania-recommendation-appear","category":"micromag-screen-urbania-recommendation-category","noBottomBorder":"micromag-screen-urbania-recommendation-noBottomBorder","categoryPlaceholder":"micromag-screen-urbania-recommendation-categoryPlaceholder","dateTitleRow":"micromag-screen-urbania-recommendation-dateTitleRow","bottomBorder":"micromag-screen-urbania-recommendation-bottomBorder","dateContainer":"micromag-screen-urbania-recommendation-dateContainer","date":"micromag-screen-urbania-recommendation-date","centerDate":"micromag-screen-urbania-recommendation-centerDate","titleContainer":"micromag-screen-urbania-recommendation-titleContainer","leftBorder":"micromag-screen-urbania-recommendation-leftBorder","title":"micromag-screen-urbania-recommendation-title","sponsor":"micromag-screen-urbania-recommendation-sponsor","sponsorPlaceholder":"micromag-screen-urbania-recommendation-sponsorPlaceholder","description":"micromag-screen-urbania-recommendation-description","descriptionPlaceholder":"micromag-screen-urbania-recommendation-descriptionPlaceholder","roll":"micromag-screen-urbania-recommendation-roll","layout":"micromag-screen-urbania-recommendation-layout"};
22
+ var styles = {"container":"micromag-screen-urbania-recommendation-container","background":"micromag-screen-urbania-recommendation-background","disabled":"micromag-screen-urbania-recommendation-disabled","hidden":"micromag-screen-urbania-recommendation-hidden","placeholder":"micromag-screen-urbania-recommendation-placeholder","content":"micromag-screen-urbania-recommendation-content","emptyCategory":"micromag-screen-urbania-recommendation-emptyCategory","empty":"micromag-screen-urbania-recommendation-empty","emptyText":"micromag-screen-urbania-recommendation-emptyText","emptyVisual":"micromag-screen-urbania-recommendation-emptyVisual","emptySponsor":"micromag-screen-urbania-recommendation-emptySponsor","callToAction":"micromag-screen-urbania-recommendation-callToAction","textCard":"micromag-screen-urbania-recommendation-textCard","isPlaceholder":"micromag-screen-urbania-recommendation-isPlaceholder","appear":"micromag-screen-urbania-recommendation-appear","visualBottom":"micromag-screen-urbania-recommendation-visualBottom","visualContainer":"micromag-screen-urbania-recommendation-visualContainer","visual":"micromag-screen-urbania-recommendation-visual","sponsor":"micromag-screen-urbania-recommendation-sponsor","hasVisual":"micromag-screen-urbania-recommendation-hasVisual","sponsorPlaceholder":"micromag-screen-urbania-recommendation-sponsorPlaceholder","visualWrapper":"micromag-screen-urbania-recommendation-visualWrapper","text":"micromag-screen-urbania-recommendation-text","category":"micromag-screen-urbania-recommendation-category","categoryPlaceholder":"micromag-screen-urbania-recommendation-categoryPlaceholder","textContent":"micromag-screen-urbania-recommendation-textContent","titleContainer":"micromag-screen-urbania-recommendation-titleContainer","title":"micromag-screen-urbania-recommendation-title","date":"micromag-screen-urbania-recommendation-date","location":"micromag-screen-urbania-recommendation-location","description":"micromag-screen-urbania-recommendation-description","descriptionPlaceholder":"micromag-screen-urbania-recommendation-descriptionPlaceholder","layout":"micromag-screen-urbania-recommendation-layout"};
23
23
 
24
24
  var propTypes = {
25
25
  category: PropTypes.headingElement,
26
- date: PropTypes.textElement,
26
+ visual: PropTypes$1.shape({
27
+ image: PropTypes.visualElement,
28
+ visualLayout: PropTypes$1.oneOf(['label-bottom', 'label-top'])
29
+ }),
27
30
  title: PropTypes.headingElement,
28
- sponsor: PropTypes.textElement,
31
+ date: PropTypes.textElement,
32
+ location: PropTypes.textElement,
29
33
  description: PropTypes.textElement,
34
+ sponsor: PropTypes.textElement,
30
35
  spacing: PropTypes$1.number,
31
36
  header: PropTypes.header,
32
37
  footer: PropTypes.footer,
33
38
  background: PropTypes.backgroundElement,
34
39
  current: PropTypes$1.bool,
35
40
  active: PropTypes$1.bool,
36
- animateBackground: PropTypes$1.bool,
37
- transitions: PropTypes.transitions,
38
- transitionStagger: PropTypes$1.number,
39
41
  className: PropTypes$1.string
40
42
  };
41
43
  var defaultProps = {
42
44
  category: null,
43
- date: null,
45
+ visual: null,
44
46
  title: null,
45
- sponsor: null,
47
+ date: null,
48
+ location: null,
46
49
  description: null,
50
+ sponsor: null,
47
51
  spacing: 20,
48
52
  header: null,
49
53
  footer: null,
50
54
  background: null,
51
55
  current: true,
52
56
  active: true,
53
- animateBackground: true,
54
- transitions: null,
55
- transitionStagger: 100,
56
57
  className: null
57
58
  };
58
59
  var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
59
- var _ref3, _ref4, _ref5, _ref7, _ref11;
60
+ var _ref5, _ref10;
60
61
  var category = _ref.category,
61
- date = _ref.date,
62
+ visual = _ref.visual,
62
63
  title = _ref.title,
63
- sponsor = _ref.sponsor,
64
+ date = _ref.date,
65
+ location = _ref.location,
64
66
  description = _ref.description,
67
+ sponsor = _ref.sponsor,
65
68
  spacing = _ref.spacing,
66
69
  header = _ref.header,
67
70
  footer = _ref.footer,
68
71
  background = _ref.background,
69
72
  current = _ref.current,
70
73
  active = _ref.active,
71
- animateBackground = _ref.animateBackground,
72
- transitions = _ref.transitions,
73
- transitionStagger = _ref.transitionStagger,
74
74
  className = _ref.className;
75
75
  var trackScreenEvent = useTrackScreenEvent();
76
76
  var _useScreenSize = useScreenSize(),
@@ -86,30 +86,40 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
86
86
  var _usePlaybackContext = usePlaybackContext(),
87
87
  muted = _usePlaybackContext.muted;
88
88
  var mediaRef = usePlaybackMediaRef(current);
89
+ var _useResizeObserver = useResizeObserver(),
90
+ cardRef = _useResizeObserver.ref,
91
+ _useResizeObserver$en = _useResizeObserver.entry.contentRect,
92
+ cardRect = _useResizeObserver$en === void 0 ? null : _useResizeObserver$en;
93
+ var _ref2 = cardRect || {},
94
+ _ref2$width = _ref2.width,
95
+ cardWidth = _ref2$width === void 0 ? 0 : _ref2$width;
89
96
  var _useScreenRenderConte = useScreenRenderContext(),
90
97
  isView = _useScreenRenderConte.isView,
91
98
  isPreview = _useScreenRenderConte.isPreview,
92
99
  isPlaceholder = _useScreenRenderConte.isPlaceholder,
93
100
  isEdit = _useScreenRenderConte.isEdit,
94
- isStatic = _useScreenRenderConte.isStatic,
95
- isCapture = _useScreenRenderConte.isCapture;
96
- var finalAnimateBackground = current && animateBackground && !isPlaceholder && !isStatic && !isPreview && !isEdit;
97
- var _useState = useState(finalAnimateBackground),
101
+ isStatic = _useScreenRenderConte.isStatic;
102
+ var animateBackground = current && !isPlaceholder && !isStatic && !isPreview && !isEdit;
103
+ var _useState = useState(animateBackground),
98
104
  _useState2 = _slicedToArray(_useState, 2),
99
105
  animationStarted = _useState2[0],
100
106
  setAnimationStarted = _useState2[1];
107
+ var _ref3 = visual || {},
108
+ _ref3$image = _ref3.image,
109
+ image = _ref3$image === void 0 ? null : _ref3$image,
110
+ _ref3$visualLayout = _ref3.visualLayout,
111
+ visualLayout = _ref3$visualLayout === void 0 ? null : _ref3$visualLayout; // note: image can be a video
112
+ var hasVisual = image !== null;
101
113
  var hasCategory = isTextFilled(category);
102
- var hasDate = isTextFilled(date);
103
114
  var hasTitle = isTextFilled(title);
104
- var hasSponsor = isTextFilled(sponsor);
115
+ var hasDate = isTextFilled(date);
116
+ var hasLocation = isTextFilled(location);
105
117
  var hasDescription = isTextFilled(description);
106
- var onlyCategory = hasCategory && !hasDate && !hasTitle && !hasSponsor && !hasDescription;
107
- var hasTextCard = hasCategory || hasDate || hasTitle || hasSponsor || hasDescription;
118
+ var hasSponsor = isTextFilled(sponsor);
119
+ var hasTextCard = hasCategory || hasTitle || hasDate || hasLocation || hasDescription || hasSponsor;
108
120
  var backgroundPlaying = current && (isView || isEdit);
109
121
  var mediaShouldLoad = current || active;
110
- var transitionPlaying = current;
111
- var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
112
- var scrollingDisabled = !isEdit && transitionDisabled || !current;
122
+ var scrollingDisabled = !isView && !isEdit || !current;
113
123
  var hasHeader = isHeaderFilled(header);
114
124
  var hasFooter = isFooterFilled(footer);
115
125
  var footerProps = getFooterProps(footer, {
@@ -122,17 +132,20 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
122
132
  _useState4 = _slicedToArray(_useState3, 2),
123
133
  scrolledBottom = _useState4[0],
124
134
  setScrolledBottom = _useState4[1];
135
+
136
+ // const [visualModalOpened, setVisualModalOpened] = useState(false);
137
+
125
138
  useEffect(function () {
126
139
  var id = null;
127
140
  if (animationStarted) {
128
141
  id = setTimeout(function () {
129
142
  setAnimationStarted(false);
130
- }, 3000);
143
+ }, 1500);
131
144
  }
132
145
  return function () {
133
146
  clearTimeout(id);
134
147
  };
135
- }, [animationStarted, finalAnimateBackground, setAnimationStarted]);
148
+ }, [animationStarted, animateBackground, setAnimationStarted]);
136
149
  useEffect(function () {
137
150
  if (!isView) {
138
151
  setAnimationStarted(false);
@@ -140,8 +153,8 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
140
153
  setAnimationStarted(true);
141
154
  }
142
155
  }, [isView, setAnimationStarted]);
143
- var onScrolledBottom = useCallback(function (_ref2) {
144
- var initial = _ref2.initial;
156
+ var onScrolledBottom = useCallback(function (_ref4) {
157
+ var initial = _ref4.initial;
145
158
  if (initial) {
146
159
  trackScreenEvent('scroll', 'Screen');
147
160
  }
@@ -150,14 +163,6 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
150
163
  var onScrolledNotBottom = useCallback(function () {
151
164
  setScrolledBottom(false);
152
165
  }, [setScrolledBottom]);
153
- var finalBackground = useMemo(function () {
154
- return _objectSpread({
155
- fit: 'cover',
156
- // horizontalAlign: 'left',
157
- // verticalAlign: '-20%',
158
- repeat: true
159
- }, background);
160
- }, [background]);
161
166
 
162
167
  // Create elements
163
168
  var items = [!isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
@@ -168,7 +173,52 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
168
173
  }, /*#__PURE__*/React.createElement(Header, header)) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Spacer, {
169
174
  key: "spacer-cta-top"
170
175
  }) : null, hasTextCard || isPlaceholder || isEdit ? /*#__PURE__*/React.createElement(Container, {
171
- className: classNames([styles.textCard, (_ref3 = {}, _defineProperty(_ref3, className, className !== null), _defineProperty(_ref3, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref3, styles.appear, finalAnimateBackground), _ref3)])
176
+ ref: cardRef,
177
+ className: classNames([styles.textCard, (_ref5 = {}, _defineProperty(_ref5, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref5, styles.visualBottom, visualLayout === 'label-top'), _defineProperty(_ref5, styles.appear, animationStarted), _ref5)])
178
+ }, /*#__PURE__*/React.createElement("div", {
179
+ className: styles.visualContainer
180
+ }, /*#__PURE__*/React.createElement(ScreenElement, {
181
+ key: "sponsor",
182
+ placeholder: /*#__PURE__*/React.createElement(PlaceholderText, {
183
+ className: styles.sponsorPlaceholder
184
+ })
185
+ }, hasSponsor ? /*#__PURE__*/React.createElement(Text, Object.assign({
186
+ className: classNames([styles.sponsor, _defineProperty({}, styles.hasVisual, hasVisual)])
187
+ }, sponsor)) : null), /*#__PURE__*/React.createElement(ScreenElement, {
188
+ key: "visual",
189
+ placeholder: /*#__PURE__*/React.createElement(PlaceholderImage, {
190
+ className: styles.visualPlaceholder
191
+ }),
192
+ emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
193
+ id: "JzSBzL",
194
+ defaultMessage: [{
195
+ "type": 0,
196
+ "value": "Visual"
197
+ }]
198
+ }),
199
+ emptyClassName: classNames([styles.empty, styles.emptyVisual]),
200
+ isEmpty: !hasVisual
201
+ }, hasVisual ?
202
+ /*#__PURE__*/
203
+ // <div className={styles.visualWrapper}>
204
+ React.createElement(Visual
205
+ // {...visual}
206
+ , {
207
+ imageClassName: styles.visual,
208
+ media: image,
209
+ muted: true,
210
+ width: cardWidth,
211
+ height: 250,
212
+ objectFit: {
213
+ fit: 'cover'
214
+ },
215
+ resolution: resolution,
216
+ active: active,
217
+ shouldLoad: mediaShouldLoad
218
+ }) :
219
+ // </div>
220
+ null)), /*#__PURE__*/React.createElement("div", {
221
+ className: styles.text
172
222
  }, /*#__PURE__*/React.createElement(ScreenElement, {
173
223
  key: "category",
174
224
  placeholder: /*#__PURE__*/React.createElement(PlaceholderTitle, {
@@ -181,61 +231,43 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
181
231
  "value": "Category"
182
232
  }]
183
233
  }),
184
- emptyClassName: styles.emptyText,
234
+ emptyClassName: styles.emptyCategory,
185
235
  isEmpty: !hasCategory
186
236
  }, hasCategory ? /*#__PURE__*/React.createElement(Heading, Object.assign({
187
- className: classNames([styles.category, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles.noBottomBorder, onlyCategory), _ref4)])
188
- }, category)) : null), hasDate || hasTitle || isPlaceholder ? /*#__PURE__*/React.createElement("div", {
189
- className: classNames([styles.dateTitleRow, (_ref5 = {}, _defineProperty(_ref5, className, className !== null), _defineProperty(_ref5, styles.bottomBorder, hasSponsor || !hasSponsor && hasDescription), _defineProperty(_ref5, styles.isPlaceholder, isPlaceholder), _ref5)])
237
+ className: styles.category
238
+ }, category)) : null), /*#__PURE__*/React.createElement("div", {
239
+ className: classNames([styles.textContent, _defineProperty({}, styles.isPlaceholder, isPlaceholder)])
190
240
  }, /*#__PURE__*/React.createElement(ScreenElement, {
191
- key: "date",
192
- placeholder: /*#__PURE__*/React.createElement(PlaceholderText, {
193
- className: styles.datePlaceholder
194
- })
195
- // emptyLabel={
196
- // <FormattedMessage
197
- // defaultMessage="Date"
198
- // description="Date placeholder"
199
- // />
200
- // }
201
- // emptyClassName={styles.emptyText}
202
- // isEmpty={!hasDate}
203
- }, hasDate ? /*#__PURE__*/React.createElement("div", {
204
- className: classNames([styles.dateContainer, _defineProperty({}, className, className !== null)])
205
- }, /*#__PURE__*/React.createElement(Text, Object.assign({
206
- className: classNames([styles.date, (_ref7 = {}, _defineProperty(_ref7, className, className !== null), _defineProperty(_ref7, styles.centerDate, !hasTitle), _ref7)])
207
- }, date))) : null), /*#__PURE__*/React.createElement(ScreenElement, {
208
241
  key: "title",
209
- placeholder: "title"
210
- // emptyLabel={
211
- // <FormattedMessage
212
- // defaultMessage="Title"
213
- // description="Title placeholder"
214
- // />
215
- // }
216
- // emptyClassName={styles.emptyTitle}
217
- // isEmpty={!hasTitle}
218
- }, hasTitle ? /*#__PURE__*/React.createElement("div", {
219
- className: classNames([styles.titleContainer, _defineProperty({}, styles.leftBorder, hasDate)])
220
- }, /*#__PURE__*/React.createElement(Heading, Object.assign({
221
- className: styles.title
222
- }, title))) : null)) : null, /*#__PURE__*/React.createElement(ScreenElement, {
223
- key: "sponsor",
224
- placeholder: /*#__PURE__*/React.createElement(PlaceholderText, {
225
- className: styles.sponsorPlaceholder
226
- }),
242
+ placeholder: "title",
227
243
  emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
228
- id: "Bv1Q38",
244
+ id: "2c1WFV",
229
245
  defaultMessage: [{
230
246
  "type": 0,
231
- "value": "Sponsor"
247
+ "value": "Title"
232
248
  }]
233
249
  }),
234
250
  emptyClassName: styles.emptyText,
235
- isEmpty: !hasSponsor
236
- }, hasSponsor ? /*#__PURE__*/React.createElement(Text, Object.assign({
237
- className: classNames([styles.sponsor, _defineProperty({}, styles.bottomBorder, hasDescription)])
238
- }, sponsor)) : null), /*#__PURE__*/React.createElement(ScreenElement, {
251
+ isEmpty: !hasTitle
252
+ }, hasTitle ? /*#__PURE__*/React.createElement("div", {
253
+ className: styles.titleContainer
254
+ }, /*#__PURE__*/React.createElement(Heading, Object.assign({
255
+ className: styles.title
256
+ }, title))) : null), /*#__PURE__*/React.createElement(ScreenElement, {
257
+ key: "date",
258
+ placeholder: /*#__PURE__*/React.createElement(PlaceholderText, {
259
+ className: styles.datePlaceholder
260
+ })
261
+ }, hasDate ? /*#__PURE__*/React.createElement(Text, Object.assign({
262
+ className: classNames([styles.date, _defineProperty({}, styles.centerDate, !hasTitle)])
263
+ }, date)) : null), /*#__PURE__*/React.createElement(ScreenElement, {
264
+ key: "location",
265
+ placeholder: /*#__PURE__*/React.createElement(PlaceholderText, {
266
+ className: styles.locationPlaceholder
267
+ })
268
+ }, hasLocation ? /*#__PURE__*/React.createElement(Text, Object.assign({
269
+ className: styles.location
270
+ }, location)) : null), /*#__PURE__*/React.createElement(ScreenElement, {
239
271
  key: "description",
240
272
  placeholder: /*#__PURE__*/React.createElement(PlaceholderText, {
241
273
  className: styles.descriptionPlaceholder
@@ -251,7 +283,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
251
283
  isEmpty: !hasDescription
252
284
  }, hasDescription ? /*#__PURE__*/React.createElement(Text, Object.assign({
253
285
  className: styles.description
254
- }, description)) : null)) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Spacer, {
286
+ }, description)) : null)))) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Spacer, {
255
287
  key: "spacer-cta-bottom"
256
288
  }) : null, !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
257
289
  key: "call-to-action",
@@ -265,7 +297,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
265
297
  return el !== null;
266
298
  });
267
299
  return /*#__PURE__*/React.createElement("div", {
268
- className: classNames([styles.container, (_ref11 = {}, _defineProperty(_ref11, className, className !== null), _defineProperty(_ref11, styles.isPlaceholder, isPlaceholder), _ref11)]),
300
+ className: classNames([styles.container, (_ref10 = {}, _defineProperty(_ref10, className, className !== null), _defineProperty(_ref10, styles.isPlaceholder, isPlaceholder), _ref10)]),
269
301
  "data-screen-ready": true
270
302
  }, /*#__PURE__*/React.createElement(Container, {
271
303
  width: width,
@@ -275,7 +307,8 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
275
307
  disabled: animationStarted || scrollingDisabled,
276
308
  onScrolledBottom: onScrolledBottom,
277
309
  onScrolledNotBottom: onScrolledNotBottom,
278
- verticalAlign: "top"
310
+ verticalAlign: "middle",
311
+ withShadow: true
279
312
  }, /*#__PURE__*/React.createElement(Layout, {
280
313
  className: styles.layout,
281
314
  style: !isPlaceholder ? {
@@ -283,20 +316,14 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
283
316
  paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing / 2,
284
317
  paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing / 2
285
318
  } : null
286
- }, /*#__PURE__*/React.createElement(TransitionsStagger, {
287
- transitions: transitions,
288
- stagger: transitionStagger,
289
- disabled: transitionDisabled,
290
- playing: transitionPlaying
291
- }, items)))), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
292
- background: finalBackground,
319
+ }, items))), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
320
+ background: background,
293
321
  width: width,
294
322
  height: height,
295
323
  resolution: resolution,
296
324
  playing: backgroundPlaying,
297
325
  muted: muted,
298
326
  shouldLoad: mediaShouldLoad,
299
- backgroundClassName: finalAnimateBackground ? styles.background : null,
300
327
  mediaRef: mediaRef,
301
328
  withoutVideo: isPreview,
302
329
  className: styles.background
@@ -329,23 +356,58 @@ var definition = [{
329
356
  }),
330
357
  component: UrbaniaRecommendation$1,
331
358
  fields: [{
332
- name: 'category',
333
- type: 'heading-element',
359
+ name: 'sponsor',
360
+ type: 'text-element',
334
361
  label: defineMessage({
335
- id: "4grcMU",
362
+ id: "WY14Zu",
336
363
  defaultMessage: [{
337
364
  "type": 0,
338
- "value": "Category"
365
+ "value": "Sponsor"
339
366
  }]
340
367
  })
341
368
  }, {
342
- name: 'date',
343
- type: 'text-element',
369
+ name: 'visual',
370
+ type: 'fields',
371
+ isList: true,
344
372
  label: defineMessage({
345
- id: "yEG9zh",
373
+ id: "HwqzVR",
346
374
  defaultMessage: [{
347
375
  "type": 0,
348
- "value": "Date"
376
+ "value": "Visual"
377
+ }]
378
+ }),
379
+ fields: [{
380
+ name: 'image',
381
+ type: 'visual',
382
+ label: defineMessage({
383
+ id: "xT/onn",
384
+ defaultMessage: [{
385
+ "type": 0,
386
+ "value": "Image"
387
+ }]
388
+ })
389
+ }, {
390
+ name: 'visualLayout',
391
+ type: 'button-layout',
392
+ types: ['label-bottom', 'label-top'],
393
+ defaultValue: 'label-bottom',
394
+ isHorizontal: true,
395
+ label: defineMessage({
396
+ id: "OPxJx/",
397
+ defaultMessage: [{
398
+ "type": 0,
399
+ "value": "Layout"
400
+ }]
401
+ })
402
+ }]
403
+ }, {
404
+ name: 'category',
405
+ type: 'heading-element',
406
+ label: defineMessage({
407
+ id: "4grcMU",
408
+ defaultMessage: [{
409
+ "type": 0,
410
+ "value": "Category"
349
411
  }]
350
412
  })
351
413
  }, {
@@ -359,13 +421,23 @@ var definition = [{
359
421
  }]
360
422
  })
361
423
  }, {
362
- name: 'sponsor',
424
+ name: 'date',
363
425
  type: 'text-element',
364
426
  label: defineMessage({
365
- id: "WY14Zu",
427
+ id: "yEG9zh",
366
428
  defaultMessage: [{
367
429
  "type": 0,
368
- "value": "Sponsor"
430
+ "value": "Date"
431
+ }]
432
+ })
433
+ }, {
434
+ name: 'location',
435
+ type: 'text-element',
436
+ label: defineMessage({
437
+ id: "zLxBdl",
438
+ defaultMessage: [{
439
+ "type": 0,
440
+ "value": "Location"
369
441
  }]
370
442
  })
371
443
  }, {
package/lib/index.js CHANGED
@@ -4,7 +4,6 @@ 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 _objectSpread = require('@babel/runtime/helpers/objectSpread2');
8
7
  var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
9
8
  var classNames = require('classnames');
10
9
  var PropTypes = require('prop-types');
@@ -22,11 +21,11 @@ var Heading = require('@micromag/element-heading');
22
21
  var Layout = require('@micromag/element-layout');
23
22
  var Scroll = require('@micromag/element-scroll');
24
23
  var Text = require('@micromag/element-text');
24
+ var Visual = require('@micromag/element-visual');
25
25
 
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 _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
30
29
  var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
31
30
  var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
32
31
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
@@ -39,59 +38,60 @@ var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
39
38
  var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
40
39
  var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
41
40
  var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
41
+ var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
42
42
 
43
- var styles = {"container":"micromag-screen-urbania-recommendation-container","background":"micromag-screen-urbania-recommendation-background","disabled":"micromag-screen-urbania-recommendation-disabled","hidden":"micromag-screen-urbania-recommendation-hidden","placeholder":"micromag-screen-urbania-recommendation-placeholder","content":"micromag-screen-urbania-recommendation-content","emptyTitle":"micromag-screen-urbania-recommendation-emptyTitle","emptyText":"micromag-screen-urbania-recommendation-emptyText","callToAction":"micromag-screen-urbania-recommendation-callToAction","textCard":"micromag-screen-urbania-recommendation-textCard","isPlaceholder":"micromag-screen-urbania-recommendation-isPlaceholder","appear":"micromag-screen-urbania-recommendation-appear","category":"micromag-screen-urbania-recommendation-category","noBottomBorder":"micromag-screen-urbania-recommendation-noBottomBorder","categoryPlaceholder":"micromag-screen-urbania-recommendation-categoryPlaceholder","dateTitleRow":"micromag-screen-urbania-recommendation-dateTitleRow","bottomBorder":"micromag-screen-urbania-recommendation-bottomBorder","dateContainer":"micromag-screen-urbania-recommendation-dateContainer","date":"micromag-screen-urbania-recommendation-date","centerDate":"micromag-screen-urbania-recommendation-centerDate","titleContainer":"micromag-screen-urbania-recommendation-titleContainer","leftBorder":"micromag-screen-urbania-recommendation-leftBorder","title":"micromag-screen-urbania-recommendation-title","sponsor":"micromag-screen-urbania-recommendation-sponsor","sponsorPlaceholder":"micromag-screen-urbania-recommendation-sponsorPlaceholder","description":"micromag-screen-urbania-recommendation-description","descriptionPlaceholder":"micromag-screen-urbania-recommendation-descriptionPlaceholder","roll":"micromag-screen-urbania-recommendation-roll","layout":"micromag-screen-urbania-recommendation-layout"};
43
+ var styles = {"container":"micromag-screen-urbania-recommendation-container","background":"micromag-screen-urbania-recommendation-background","disabled":"micromag-screen-urbania-recommendation-disabled","hidden":"micromag-screen-urbania-recommendation-hidden","placeholder":"micromag-screen-urbania-recommendation-placeholder","content":"micromag-screen-urbania-recommendation-content","emptyCategory":"micromag-screen-urbania-recommendation-emptyCategory","empty":"micromag-screen-urbania-recommendation-empty","emptyText":"micromag-screen-urbania-recommendation-emptyText","emptyVisual":"micromag-screen-urbania-recommendation-emptyVisual","emptySponsor":"micromag-screen-urbania-recommendation-emptySponsor","callToAction":"micromag-screen-urbania-recommendation-callToAction","textCard":"micromag-screen-urbania-recommendation-textCard","isPlaceholder":"micromag-screen-urbania-recommendation-isPlaceholder","appear":"micromag-screen-urbania-recommendation-appear","visualBottom":"micromag-screen-urbania-recommendation-visualBottom","visualContainer":"micromag-screen-urbania-recommendation-visualContainer","visual":"micromag-screen-urbania-recommendation-visual","sponsor":"micromag-screen-urbania-recommendation-sponsor","hasVisual":"micromag-screen-urbania-recommendation-hasVisual","sponsorPlaceholder":"micromag-screen-urbania-recommendation-sponsorPlaceholder","visualWrapper":"micromag-screen-urbania-recommendation-visualWrapper","text":"micromag-screen-urbania-recommendation-text","category":"micromag-screen-urbania-recommendation-category","categoryPlaceholder":"micromag-screen-urbania-recommendation-categoryPlaceholder","textContent":"micromag-screen-urbania-recommendation-textContent","titleContainer":"micromag-screen-urbania-recommendation-titleContainer","title":"micromag-screen-urbania-recommendation-title","date":"micromag-screen-urbania-recommendation-date","location":"micromag-screen-urbania-recommendation-location","description":"micromag-screen-urbania-recommendation-description","descriptionPlaceholder":"micromag-screen-urbania-recommendation-descriptionPlaceholder","layout":"micromag-screen-urbania-recommendation-layout"};
44
44
 
45
45
  var propTypes = {
46
46
  category: core.PropTypes.headingElement,
47
- date: core.PropTypes.textElement,
47
+ visual: PropTypes__default["default"].shape({
48
+ image: core.PropTypes.visualElement,
49
+ visualLayout: PropTypes__default["default"].oneOf(['label-bottom', 'label-top'])
50
+ }),
48
51
  title: core.PropTypes.headingElement,
49
- sponsor: core.PropTypes.textElement,
52
+ date: core.PropTypes.textElement,
53
+ location: core.PropTypes.textElement,
50
54
  description: core.PropTypes.textElement,
55
+ sponsor: core.PropTypes.textElement,
51
56
  spacing: PropTypes__default["default"].number,
52
57
  header: core.PropTypes.header,
53
58
  footer: core.PropTypes.footer,
54
59
  background: core.PropTypes.backgroundElement,
55
60
  current: PropTypes__default["default"].bool,
56
61
  active: PropTypes__default["default"].bool,
57
- animateBackground: PropTypes__default["default"].bool,
58
- transitions: core.PropTypes.transitions,
59
- transitionStagger: PropTypes__default["default"].number,
60
62
  className: PropTypes__default["default"].string
61
63
  };
62
64
  var defaultProps = {
63
65
  category: null,
64
- date: null,
66
+ visual: null,
65
67
  title: null,
66
- sponsor: null,
68
+ date: null,
69
+ location: null,
67
70
  description: null,
71
+ sponsor: null,
68
72
  spacing: 20,
69
73
  header: null,
70
74
  footer: null,
71
75
  background: null,
72
76
  current: true,
73
77
  active: true,
74
- animateBackground: true,
75
- transitions: null,
76
- transitionStagger: 100,
77
78
  className: null
78
79
  };
79
80
  var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
80
- var _ref3, _ref4, _ref5, _ref7, _ref11;
81
+ var _ref5, _ref10;
81
82
  var category = _ref.category,
82
- date = _ref.date,
83
+ visual = _ref.visual,
83
84
  title = _ref.title,
84
- sponsor = _ref.sponsor,
85
+ date = _ref.date,
86
+ location = _ref.location,
85
87
  description = _ref.description,
88
+ sponsor = _ref.sponsor,
86
89
  spacing = _ref.spacing,
87
90
  header = _ref.header,
88
91
  footer = _ref.footer,
89
92
  background = _ref.background,
90
93
  current = _ref.current,
91
94
  active = _ref.active,
92
- animateBackground = _ref.animateBackground,
93
- transitions = _ref.transitions,
94
- transitionStagger = _ref.transitionStagger,
95
95
  className = _ref.className;
96
96
  var trackScreenEvent = hooks.useTrackScreenEvent();
97
97
  var _useScreenSize = contexts.useScreenSize(),
@@ -107,30 +107,40 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
107
107
  var _usePlaybackContext = contexts.usePlaybackContext(),
108
108
  muted = _usePlaybackContext.muted;
109
109
  var mediaRef = contexts.usePlaybackMediaRef(current);
110
+ var _useResizeObserver = hooks.useResizeObserver(),
111
+ cardRef = _useResizeObserver.ref,
112
+ _useResizeObserver$en = _useResizeObserver.entry.contentRect,
113
+ cardRect = _useResizeObserver$en === void 0 ? null : _useResizeObserver$en;
114
+ var _ref2 = cardRect || {},
115
+ _ref2$width = _ref2.width,
116
+ cardWidth = _ref2$width === void 0 ? 0 : _ref2$width;
110
117
  var _useScreenRenderConte = contexts.useScreenRenderContext(),
111
118
  isView = _useScreenRenderConte.isView,
112
119
  isPreview = _useScreenRenderConte.isPreview,
113
120
  isPlaceholder = _useScreenRenderConte.isPlaceholder,
114
121
  isEdit = _useScreenRenderConte.isEdit,
115
- isStatic = _useScreenRenderConte.isStatic,
116
- isCapture = _useScreenRenderConte.isCapture;
117
- var finalAnimateBackground = current && animateBackground && !isPlaceholder && !isStatic && !isPreview && !isEdit;
118
- var _useState = React.useState(finalAnimateBackground),
122
+ isStatic = _useScreenRenderConte.isStatic;
123
+ var animateBackground = current && !isPlaceholder && !isStatic && !isPreview && !isEdit;
124
+ var _useState = React.useState(animateBackground),
119
125
  _useState2 = _slicedToArray__default["default"](_useState, 2),
120
126
  animationStarted = _useState2[0],
121
127
  setAnimationStarted = _useState2[1];
128
+ var _ref3 = visual || {},
129
+ _ref3$image = _ref3.image,
130
+ image = _ref3$image === void 0 ? null : _ref3$image,
131
+ _ref3$visualLayout = _ref3.visualLayout,
132
+ visualLayout = _ref3$visualLayout === void 0 ? null : _ref3$visualLayout; // note: image can be a video
133
+ var hasVisual = image !== null;
122
134
  var hasCategory = utils.isTextFilled(category);
123
- var hasDate = utils.isTextFilled(date);
124
135
  var hasTitle = utils.isTextFilled(title);
125
- var hasSponsor = utils.isTextFilled(sponsor);
136
+ var hasDate = utils.isTextFilled(date);
137
+ var hasLocation = utils.isTextFilled(location);
126
138
  var hasDescription = utils.isTextFilled(description);
127
- var onlyCategory = hasCategory && !hasDate && !hasTitle && !hasSponsor && !hasDescription;
128
- var hasTextCard = hasCategory || hasDate || hasTitle || hasSponsor || hasDescription;
139
+ var hasSponsor = utils.isTextFilled(sponsor);
140
+ var hasTextCard = hasCategory || hasTitle || hasDate || hasLocation || hasDescription || hasSponsor;
129
141
  var backgroundPlaying = current && (isView || isEdit);
130
142
  var mediaShouldLoad = current || active;
131
- var transitionPlaying = current;
132
- var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
133
- var scrollingDisabled = !isEdit && transitionDisabled || !current;
143
+ var scrollingDisabled = !isView && !isEdit || !current;
134
144
  var hasHeader = utils.isHeaderFilled(header);
135
145
  var hasFooter = utils.isFooterFilled(footer);
136
146
  var footerProps = utils.getFooterProps(footer, {
@@ -143,17 +153,20 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
143
153
  _useState4 = _slicedToArray__default["default"](_useState3, 2),
144
154
  scrolledBottom = _useState4[0],
145
155
  setScrolledBottom = _useState4[1];
156
+
157
+ // const [visualModalOpened, setVisualModalOpened] = useState(false);
158
+
146
159
  React.useEffect(function () {
147
160
  var id = null;
148
161
  if (animationStarted) {
149
162
  id = setTimeout(function () {
150
163
  setAnimationStarted(false);
151
- }, 3000);
164
+ }, 1500);
152
165
  }
153
166
  return function () {
154
167
  clearTimeout(id);
155
168
  };
156
- }, [animationStarted, finalAnimateBackground, setAnimationStarted]);
169
+ }, [animationStarted, animateBackground, setAnimationStarted]);
157
170
  React.useEffect(function () {
158
171
  if (!isView) {
159
172
  setAnimationStarted(false);
@@ -161,8 +174,8 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
161
174
  setAnimationStarted(true);
162
175
  }
163
176
  }, [isView, setAnimationStarted]);
164
- var onScrolledBottom = React.useCallback(function (_ref2) {
165
- var initial = _ref2.initial;
177
+ var onScrolledBottom = React.useCallback(function (_ref4) {
178
+ var initial = _ref4.initial;
166
179
  if (initial) {
167
180
  trackScreenEvent('scroll', 'Screen');
168
181
  }
@@ -171,14 +184,6 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
171
184
  var onScrolledNotBottom = React.useCallback(function () {
172
185
  setScrolledBottom(false);
173
186
  }, [setScrolledBottom]);
174
- var finalBackground = React.useMemo(function () {
175
- return _objectSpread__default["default"]({
176
- fit: 'cover',
177
- // horizontalAlign: 'left',
178
- // verticalAlign: '-20%',
179
- repeat: true
180
- }, background);
181
- }, [background]);
182
187
 
183
188
  // Create elements
184
189
  var items = [!isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -189,7 +194,52 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
189
194
  }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
190
195
  key: "spacer-cta-top"
191
196
  }) : null, hasTextCard || isPlaceholder || isEdit ? /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
192
- className: classNames__default["default"]([styles.textCard, (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className !== null), _defineProperty__default["default"](_ref3, styles.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref3, styles.appear, finalAnimateBackground), _ref3)])
197
+ ref: cardRef,
198
+ className: classNames__default["default"]([styles.textCard, (_ref5 = {}, _defineProperty__default["default"](_ref5, styles.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref5, styles.visualBottom, visualLayout === 'label-top'), _defineProperty__default["default"](_ref5, styles.appear, animationStarted), _ref5)])
199
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
200
+ className: styles.visualContainer
201
+ }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
202
+ key: "sponsor",
203
+ placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderText, {
204
+ className: styles.sponsorPlaceholder
205
+ })
206
+ }, hasSponsor ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
207
+ className: classNames__default["default"]([styles.sponsor, _defineProperty__default["default"]({}, styles.hasVisual, hasVisual)])
208
+ }, sponsor)) : null), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
209
+ key: "visual",
210
+ placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderImage, {
211
+ className: styles.visualPlaceholder
212
+ }),
213
+ emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
214
+ id: "JzSBzL",
215
+ defaultMessage: [{
216
+ "type": 0,
217
+ "value": "Visual"
218
+ }]
219
+ }),
220
+ emptyClassName: classNames__default["default"]([styles.empty, styles.emptyVisual]),
221
+ isEmpty: !hasVisual
222
+ }, hasVisual ?
223
+ /*#__PURE__*/
224
+ // <div className={styles.visualWrapper}>
225
+ React__default["default"].createElement(Visual__default["default"]
226
+ // {...visual}
227
+ , {
228
+ imageClassName: styles.visual,
229
+ media: image,
230
+ muted: true,
231
+ width: cardWidth,
232
+ height: 250,
233
+ objectFit: {
234
+ fit: 'cover'
235
+ },
236
+ resolution: resolution,
237
+ active: active,
238
+ shouldLoad: mediaShouldLoad
239
+ }) :
240
+ // </div>
241
+ null)), /*#__PURE__*/React__default["default"].createElement("div", {
242
+ className: styles.text
193
243
  }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
194
244
  key: "category",
195
245
  placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderTitle, {
@@ -202,61 +252,43 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
202
252
  "value": "Category"
203
253
  }]
204
254
  }),
205
- emptyClassName: styles.emptyText,
255
+ emptyClassName: styles.emptyCategory,
206
256
  isEmpty: !hasCategory
207
257
  }, hasCategory ? /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
208
- className: classNames__default["default"]([styles.category, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className !== null), _defineProperty__default["default"](_ref4, styles.noBottomBorder, onlyCategory), _ref4)])
209
- }, category)) : null), hasDate || hasTitle || isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
210
- className: classNames__default["default"]([styles.dateTitleRow, (_ref5 = {}, _defineProperty__default["default"](_ref5, className, className !== null), _defineProperty__default["default"](_ref5, styles.bottomBorder, hasSponsor || !hasSponsor && hasDescription), _defineProperty__default["default"](_ref5, styles.isPlaceholder, isPlaceholder), _ref5)])
258
+ className: styles.category
259
+ }, category)) : null), /*#__PURE__*/React__default["default"].createElement("div", {
260
+ className: classNames__default["default"]([styles.textContent, _defineProperty__default["default"]({}, styles.isPlaceholder, isPlaceholder)])
211
261
  }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
212
- key: "date",
213
- placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderText, {
214
- className: styles.datePlaceholder
215
- })
216
- // emptyLabel={
217
- // <FormattedMessage
218
- // defaultMessage="Date"
219
- // description="Date placeholder"
220
- // />
221
- // }
222
- // emptyClassName={styles.emptyText}
223
- // isEmpty={!hasDate}
224
- }, hasDate ? /*#__PURE__*/React__default["default"].createElement("div", {
225
- className: classNames__default["default"]([styles.dateContainer, _defineProperty__default["default"]({}, className, className !== null)])
226
- }, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
227
- className: classNames__default["default"]([styles.date, (_ref7 = {}, _defineProperty__default["default"](_ref7, className, className !== null), _defineProperty__default["default"](_ref7, styles.centerDate, !hasTitle), _ref7)])
228
- }, date))) : null), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
229
262
  key: "title",
230
- placeholder: "title"
231
- // emptyLabel={
232
- // <FormattedMessage
233
- // defaultMessage="Title"
234
- // description="Title placeholder"
235
- // />
236
- // }
237
- // emptyClassName={styles.emptyTitle}
238
- // isEmpty={!hasTitle}
239
- }, hasTitle ? /*#__PURE__*/React__default["default"].createElement("div", {
240
- className: classNames__default["default"]([styles.titleContainer, _defineProperty__default["default"]({}, styles.leftBorder, hasDate)])
241
- }, /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
242
- className: styles.title
243
- }, title))) : null)) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
244
- key: "sponsor",
245
- placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderText, {
246
- className: styles.sponsorPlaceholder
247
- }),
263
+ placeholder: "title",
248
264
  emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
249
- id: "Bv1Q38",
265
+ id: "2c1WFV",
250
266
  defaultMessage: [{
251
267
  "type": 0,
252
- "value": "Sponsor"
268
+ "value": "Title"
253
269
  }]
254
270
  }),
255
271
  emptyClassName: styles.emptyText,
256
- isEmpty: !hasSponsor
257
- }, hasSponsor ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
258
- className: classNames__default["default"]([styles.sponsor, _defineProperty__default["default"]({}, styles.bottomBorder, hasDescription)])
259
- }, sponsor)) : null), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
272
+ isEmpty: !hasTitle
273
+ }, hasTitle ? /*#__PURE__*/React__default["default"].createElement("div", {
274
+ className: styles.titleContainer
275
+ }, /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
276
+ className: styles.title
277
+ }, title))) : null), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
278
+ key: "date",
279
+ placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderText, {
280
+ className: styles.datePlaceholder
281
+ })
282
+ }, hasDate ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
283
+ className: classNames__default["default"]([styles.date, _defineProperty__default["default"]({}, styles.centerDate, !hasTitle)])
284
+ }, date)) : null), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
285
+ key: "location",
286
+ placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderText, {
287
+ className: styles.locationPlaceholder
288
+ })
289
+ }, hasLocation ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
290
+ className: styles.location
291
+ }, location)) : null), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
260
292
  key: "description",
261
293
  placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderText, {
262
294
  className: styles.descriptionPlaceholder
@@ -272,7 +304,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
272
304
  isEmpty: !hasDescription
273
305
  }, hasDescription ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
274
306
  className: styles.description
275
- }, description)) : null)) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
307
+ }, description)) : null)))) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
276
308
  key: "spacer-cta-bottom"
277
309
  }) : null, !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
278
310
  key: "call-to-action",
@@ -286,7 +318,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
286
318
  return el !== null;
287
319
  });
288
320
  return /*#__PURE__*/React__default["default"].createElement("div", {
289
- className: classNames__default["default"]([styles.container, (_ref11 = {}, _defineProperty__default["default"](_ref11, className, className !== null), _defineProperty__default["default"](_ref11, styles.isPlaceholder, isPlaceholder), _ref11)]),
321
+ className: classNames__default["default"]([styles.container, (_ref10 = {}, _defineProperty__default["default"](_ref10, className, className !== null), _defineProperty__default["default"](_ref10, styles.isPlaceholder, isPlaceholder), _ref10)]),
290
322
  "data-screen-ready": true
291
323
  }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
292
324
  width: width,
@@ -296,7 +328,8 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
296
328
  disabled: animationStarted || scrollingDisabled,
297
329
  onScrolledBottom: onScrolledBottom,
298
330
  onScrolledNotBottom: onScrolledNotBottom,
299
- verticalAlign: "top"
331
+ verticalAlign: "middle",
332
+ withShadow: true
300
333
  }, /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
301
334
  className: styles.layout,
302
335
  style: !isPlaceholder ? {
@@ -304,20 +337,14 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
304
337
  paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing / 2,
305
338
  paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing / 2
306
339
  } : null
307
- }, /*#__PURE__*/React__default["default"].createElement(components.TransitionsStagger, {
308
- transitions: transitions,
309
- stagger: transitionStagger,
310
- disabled: transitionDisabled,
311
- playing: transitionPlaying
312
- }, items)))), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
313
- background: finalBackground,
340
+ }, items))), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
341
+ background: background,
314
342
  width: width,
315
343
  height: height,
316
344
  resolution: resolution,
317
345
  playing: backgroundPlaying,
318
346
  muted: muted,
319
347
  shouldLoad: mediaShouldLoad,
320
- backgroundClassName: finalAnimateBackground ? styles.background : null,
321
348
  mediaRef: mediaRef,
322
349
  withoutVideo: isPreview,
323
350
  className: styles.background
@@ -350,23 +377,58 @@ var definition = [{
350
377
  }),
351
378
  component: UrbaniaRecommendation$1,
352
379
  fields: [{
353
- name: 'category',
354
- type: 'heading-element',
380
+ name: 'sponsor',
381
+ type: 'text-element',
355
382
  label: reactIntl.defineMessage({
356
- id: "4grcMU",
383
+ id: "WY14Zu",
357
384
  defaultMessage: [{
358
385
  "type": 0,
359
- "value": "Category"
386
+ "value": "Sponsor"
360
387
  }]
361
388
  })
362
389
  }, {
363
- name: 'date',
364
- type: 'text-element',
390
+ name: 'visual',
391
+ type: 'fields',
392
+ isList: true,
365
393
  label: reactIntl.defineMessage({
366
- id: "yEG9zh",
394
+ id: "HwqzVR",
367
395
  defaultMessage: [{
368
396
  "type": 0,
369
- "value": "Date"
397
+ "value": "Visual"
398
+ }]
399
+ }),
400
+ fields: [{
401
+ name: 'image',
402
+ type: 'visual',
403
+ label: reactIntl.defineMessage({
404
+ id: "xT/onn",
405
+ defaultMessage: [{
406
+ "type": 0,
407
+ "value": "Image"
408
+ }]
409
+ })
410
+ }, {
411
+ name: 'visualLayout',
412
+ type: 'button-layout',
413
+ types: ['label-bottom', 'label-top'],
414
+ defaultValue: 'label-bottom',
415
+ isHorizontal: true,
416
+ label: reactIntl.defineMessage({
417
+ id: "OPxJx/",
418
+ defaultMessage: [{
419
+ "type": 0,
420
+ "value": "Layout"
421
+ }]
422
+ })
423
+ }]
424
+ }, {
425
+ name: 'category',
426
+ type: 'heading-element',
427
+ label: reactIntl.defineMessage({
428
+ id: "4grcMU",
429
+ defaultMessage: [{
430
+ "type": 0,
431
+ "value": "Category"
370
432
  }]
371
433
  })
372
434
  }, {
@@ -380,13 +442,23 @@ var definition = [{
380
442
  }]
381
443
  })
382
444
  }, {
383
- name: 'sponsor',
445
+ name: 'date',
384
446
  type: 'text-element',
385
447
  label: reactIntl.defineMessage({
386
- id: "WY14Zu",
448
+ id: "yEG9zh",
387
449
  defaultMessage: [{
388
450
  "type": 0,
389
- "value": "Sponsor"
451
+ "value": "Date"
452
+ }]
453
+ })
454
+ }, {
455
+ name: 'location',
456
+ type: 'text-element',
457
+ label: reactIntl.defineMessage({
458
+ id: "zLxBdl",
459
+ defaultMessage: [{
460
+ "type": 0,
461
+ "value": "Location"
390
462
  }]
391
463
  })
392
464
  }, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-urbania-recommendation",
3
- "version": "0.3.362",
3
+ "version": "0.3.370",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -49,16 +49,17 @@
49
49
  },
50
50
  "dependencies": {
51
51
  "@babel/runtime": "^7.13.10",
52
- "@micromag/core": "^0.3.362",
53
- "@micromag/element-background": "^0.3.362",
54
- "@micromag/element-container": "^0.3.362",
55
- "@micromag/element-footer": "^0.3.362",
56
- "@micromag/element-header": "^0.3.362",
57
- "@micromag/element-heading": "^0.3.362",
58
- "@micromag/element-layout": "^0.3.362",
59
- "@micromag/element-scroll": "^0.3.362",
60
- "@micromag/element-text": "^0.3.362",
61
- "@micromag/transforms": "^0.3.362",
52
+ "@micromag/core": "^0.3.370",
53
+ "@micromag/element-background": "^0.3.370",
54
+ "@micromag/element-container": "^0.3.370",
55
+ "@micromag/element-footer": "^0.3.370",
56
+ "@micromag/element-header": "^0.3.370",
57
+ "@micromag/element-heading": "^0.3.370",
58
+ "@micromag/element-layout": "^0.3.370",
59
+ "@micromag/element-scroll": "^0.3.370",
60
+ "@micromag/element-text": "^0.3.370",
61
+ "@micromag/element-visual": "^0.3.370",
62
+ "@micromag/transforms": "^0.3.370",
62
63
  "classnames": "^2.2.6",
63
64
  "lodash": "^4.17.21",
64
65
  "prop-types": "^15.7.2",
@@ -68,5 +69,5 @@
68
69
  "publishConfig": {
69
70
  "access": "public"
70
71
  },
71
- "gitHead": "21619f51536d95517afabfdf316ef8fc345f6562"
72
+ "gitHead": "69c07e59593e42e3d6f3f4e9deba937a7ea60734"
72
73
  }