@micromag/screen-urbania-recommendation 0.3.57

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/assets/css/styles.css +1 -0
  2. package/es/index.js +384 -0
  3. package/lib/index.js +405 -0
  4. package/package.json +71 -0
package/assets/css/styles.css ADDED
@@ -0,0 +1 @@
1
+ .micromag-screen-urbania-recommendation-container{position:relative;width:100%;height:100%;overflow:hidden}.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{position:relative;padding:6px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyTitle{margin:5px auto;border:2px dashed #343434;color:#343434;width:100%;margin:10px auto}.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-textCard{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;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;text-align:center}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-isPlaceholder{height:200px;background-color:#adadad}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-category{padding:14px 10px 12px;border-bottom:2px solid #000;background-color:#ff3b41;color:#fff;font-family:AgrandirTight,sans-serif;font-size:28px;font-weight:900;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{padding:10px;background-color:#343434}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateTitleRow{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:100%;background-color:#fff}.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{margin-left:2px;padding:10px;background-color:#e9e9e9}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateContainer{min-width:25%;max-width:50%;height:inherit;padding:15px 10px;text-align:left}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-dateContainer.micromag-screen-urbania-recommendation-rightBorder{border-right:2px solid #000}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date{color:#ff4f46;font-family:Agrandir,sans-serif;font-size:12px}.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:75%;overflow-wrap:break-word}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-titleContainer.micromag-screen-urbania-recommendation-leftBorder{margin-right:-2px;margin-left:-2px;border-left:2px solid #000}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-title{padding:15px 30px 13px;font-family:AgrandirNarrow,sans-serif;font-size:24px;font-weight:700;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor{padding:5px 10px;background-color:#ff0;font-family:Agrandir,sans-serif;font-size:10px;text-transform:uppercase}.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{padding:10px;background-color:#fff;font-family:Roboto,sans-serif;font-size:12px;text-align:left}.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 3s ease-out;animation:micromag-screen-urbania-recommendation-roll 3s 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:0}to{background-position-y:9000px}}@keyframes micromag-screen-urbania-recommendation-roll{0%{background-position-y:0}to{background-position-y:9000px}}
package/es/index.js ADDED
@@ -0,0 +1,384 @@
1
+ import { FormattedMessage, defineMessage } from 'react-intl';
2
+ import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
+ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
4
+ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
5
+ import classNames from 'classnames';
6
+ import PropTypes$1 from 'prop-types';
7
+ import React, { useState, useCallback, useMemo } from 'react';
8
+ import { PropTypes } from '@micromag/core';
9
+ import { ScreenElement, PlaceholderTitle, PlaceholderText, TransitionsStagger } from '@micromag/core/components';
10
+ import { useScreenSize, useViewer, useScreenRenderContext } from '@micromag/core/contexts';
11
+ import { useTrackScreenEvent } from '@micromag/core/hooks';
12
+ import { isTextFilled } from '@micromag/core/utils';
13
+ import Background from '@micromag/element-background';
14
+ import CallToAction from '@micromag/element-call-to-action';
15
+ import Container from '@micromag/element-container';
16
+ import Heading from '@micromag/element-heading';
17
+ import Layout, { Spacer } from '@micromag/element-layout';
18
+ import Scroll from '@micromag/element-scroll';
19
+ import Text from '@micromag/element-text';
20
+
21
+ var styles = {"container":"micromag-screen-urbania-recommendation-container","disabled":"micromag-screen-urbania-recommendation-disabled","hidden":"micromag-screen-urbania-recommendation-hidden","placeholder":"micromag-screen-urbania-recommendation-placeholder","content":"micromag-screen-urbania-recommendation-content","emptyText":"micromag-screen-urbania-recommendation-emptyText","emptyTitle":"micromag-screen-urbania-recommendation-emptyTitle","textCard":"micromag-screen-urbania-recommendation-textCard","isPlaceholder":"micromag-screen-urbania-recommendation-isPlaceholder","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","rightBorder":"micromag-screen-urbania-recommendation-rightBorder","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","background":"micromag-screen-urbania-recommendation-background","roll":"micromag-screen-urbania-recommendation-roll","layout":"micromag-screen-urbania-recommendation-layout"};
22
+
23
+ var propTypes = {
24
+ category: PropTypes.headingElement,
25
+ date: PropTypes.textElement,
26
+ title: PropTypes.headingElement,
27
+ sponsor: PropTypes.textElement,
28
+ description: PropTypes.textElement,
29
+ spacing: PropTypes$1.number,
30
+ background: PropTypes.backgroundElement,
31
+ callToAction: PropTypes.callToAction,
32
+ current: PropTypes$1.bool,
33
+ active: PropTypes$1.bool,
34
+ animateBackground: PropTypes$1.bool,
35
+ transitions: PropTypes.transitions,
36
+ transitionStagger: PropTypes$1.number,
37
+ className: PropTypes$1.string
38
+ };
39
+ var defaultProps = {
40
+ category: null,
41
+ date: null,
42
+ title: null,
43
+ sponsor: null,
44
+ description: null,
45
+ spacing: 20,
46
+ background: null,
47
+ callToAction: null,
48
+ current: true,
49
+ active: true,
50
+ animateBackground: false,
51
+ transitions: null,
52
+ transitionStagger: 100,
53
+ className: null
54
+ };
55
+
56
+ var Recommendation = function Recommendation(_ref) {
57
+ var _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10;
58
+
59
+ var category = _ref.category,
60
+ date = _ref.date,
61
+ title = _ref.title,
62
+ sponsor = _ref.sponsor,
63
+ description = _ref.description,
64
+ spacing = _ref.spacing,
65
+ background = _ref.background,
66
+ callToAction = _ref.callToAction,
67
+ current = _ref.current,
68
+ active = _ref.active,
69
+ animateBackground = _ref.animateBackground,
70
+ transitions = _ref.transitions,
71
+ transitionStagger = _ref.transitionStagger,
72
+ className = _ref.className;
73
+ var trackScreenEvent = useTrackScreenEvent();
74
+
75
+ var _useScreenSize = useScreenSize(),
76
+ width = _useScreenSize.width,
77
+ height = _useScreenSize.height,
78
+ menuOverScreen = _useScreenSize.menuOverScreen;
79
+
80
+ var _useViewer = useViewer(),
81
+ menuSize = _useViewer.menuSize;
82
+
83
+ var _useScreenRenderConte = useScreenRenderContext(),
84
+ isView = _useScreenRenderConte.isView,
85
+ isPreview = _useScreenRenderConte.isPreview,
86
+ isPlaceholder = _useScreenRenderConte.isPlaceholder,
87
+ isEdit = _useScreenRenderConte.isEdit,
88
+ isStatic = _useScreenRenderConte.isStatic,
89
+ isCapture = _useScreenRenderConte.isCapture;
90
+
91
+ var hasCategory = isTextFilled(category);
92
+ var hasDate = isTextFilled(date);
93
+ var hasTitle = isTextFilled(title);
94
+ var hasSponsor = isTextFilled(sponsor);
95
+ var hasDescription = isTextFilled(description);
96
+ var onlyCategory = hasCategory && !hasDate && !hasTitle && !hasSponsor && !hasDescription;
97
+ var hasTextCard = hasCategory || hasDate || hasTitle || hasSponsor || hasDescription;
98
+ var transitionPlaying = current;
99
+ var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
100
+ var scrollingDisabled = !isEdit && transitionDisabled || !current;
101
+ var backgroundPlaying = current && (isView || isEdit);
102
+ var backgroundShouldLoad = current || active || !isView;
103
+ var finalAnimateBackground = animateBackground && !isPlaceholder && !isStatic && !isPreview;
104
+ var hasCallToAction = callToAction !== null && callToAction.active === true;
105
+
106
+ var _useState = useState(false),
107
+ _useState2 = _slicedToArray(_useState, 2),
108
+ scrolledBottom = _useState2[0],
109
+ setScrolledBottom = _useState2[1];
110
+
111
+ var onScrolledBottom = useCallback(function (_ref2) {
112
+ var initial = _ref2.initial;
113
+
114
+ if (initial) {
115
+ trackScreenEvent('scroll', 'Screen');
116
+ }
117
+
118
+ setScrolledBottom(true);
119
+ }, [trackScreenEvent]);
120
+ var onScrolledNotBottom = useCallback(function () {
121
+ setScrolledBottom(false);
122
+ }, [setScrolledBottom]);
123
+ var finalBackground = useMemo(function () {
124
+ return _objectSpread({
125
+ fit: 'contain',
126
+ horizontalAlign: 'left',
127
+ verticalAlign: '-20%',
128
+ repeat: true
129
+ }, background);
130
+ }, [background]); // Create elements
131
+
132
+ var items = [!isPlaceholder ? /*#__PURE__*/React.createElement(Spacer, {
133
+ key: "spacer-cta-top"
134
+ }) : null, hasTextCard || isPlaceholder ? /*#__PURE__*/React.createElement(Container, {
135
+ className: classNames([styles.textCard, (_ref3 = {}, _defineProperty(_ref3, className, className !== null), _defineProperty(_ref3, styles.isPlaceholder, isPlaceholder), _ref3)])
136
+ }, /*#__PURE__*/React.createElement(ScreenElement, {
137
+ key: "category",
138
+ placeholder: /*#__PURE__*/React.createElement(PlaceholderTitle, {
139
+ className: styles.categoryPlaceholder
140
+ }),
141
+ emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
142
+ id: "I5+AHN",
143
+ defaultMessage: [{
144
+ "type": 0,
145
+ "value": "Category"
146
+ }]
147
+ }),
148
+ emptyClassName: styles.emptyText,
149
+ isEmpty: !hasCategory
150
+ }, hasCategory ? /*#__PURE__*/React.createElement(Heading, Object.assign({
151
+ className: classNames([styles.category, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles.noBottomBorder, onlyCategory), _ref4)])
152
+ }, category)) : null), hasDate || hasTitle || isPlaceholder ? /*#__PURE__*/React.createElement("div", {
153
+ className: classNames([styles.dateTitleRow, (_ref5 = {}, _defineProperty(_ref5, className, className !== null), _defineProperty(_ref5, styles.bottomBorder, hasSponsor || !hasSponsor && hasDescription), _defineProperty(_ref5, styles.isPlaceholder, isPlaceholder), _ref5)])
154
+ }, /*#__PURE__*/React.createElement(ScreenElement, {
155
+ key: "date",
156
+ placeholder: /*#__PURE__*/React.createElement(PlaceholderText, {
157
+ className: styles.datePlaceholder
158
+ }),
159
+ emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
160
+ id: "/MsgWe",
161
+ defaultMessage: [{
162
+ "type": 0,
163
+ "value": "Date"
164
+ }]
165
+ }),
166
+ emptyClassName: styles.emptyText,
167
+ isEmpty: !hasDate
168
+ }, hasDate ? /*#__PURE__*/React.createElement("div", {
169
+ className: classNames([styles.dateContainer, (_ref6 = {}, _defineProperty(_ref6, className, className !== null), _defineProperty(_ref6, styles.rightBorder, hasTitle), _ref6)])
170
+ }, /*#__PURE__*/React.createElement(Text, Object.assign({
171
+ className: classNames([styles.date, (_ref7 = {}, _defineProperty(_ref7, className, className !== null), _defineProperty(_ref7, styles.centerDate, !hasTitle), _ref7)])
172
+ }, date))) : null), /*#__PURE__*/React.createElement(ScreenElement, {
173
+ key: "title",
174
+ placeholder: "title",
175
+ emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
176
+ id: "2ZOPe+",
177
+ defaultMessage: [{
178
+ "type": 0,
179
+ "value": "Title"
180
+ }]
181
+ }),
182
+ emptyClassName: styles.emptyTitle,
183
+ isEmpty: !hasTitle
184
+ }, hasTitle ? /*#__PURE__*/React.createElement("div", {
185
+ className: classNames([styles.titleContainer, (_ref8 = {}, _defineProperty(_ref8, className, className !== null), _defineProperty(_ref8, styles.leftBorder, hasDate), _ref8)])
186
+ }, /*#__PURE__*/React.createElement(Heading, Object.assign({
187
+ className: styles.title
188
+ }, title))) : null)) : null, /*#__PURE__*/React.createElement(ScreenElement, {
189
+ key: "sponsor",
190
+ placeholder: /*#__PURE__*/React.createElement(PlaceholderText, {
191
+ className: styles.sponsorPlaceholder
192
+ }),
193
+ emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
194
+ id: "Bv1Q38",
195
+ defaultMessage: [{
196
+ "type": 0,
197
+ "value": "Sponsor"
198
+ }]
199
+ }),
200
+ emptyClassName: styles.emptyText,
201
+ isEmpty: !hasSponsor
202
+ }, hasSponsor ? /*#__PURE__*/React.createElement(Text, Object.assign({
203
+ className: classNames([styles.sponsor, (_ref9 = {}, _defineProperty(_ref9, className, className !== null), _defineProperty(_ref9, styles.bottomBorder, hasDescription), _ref9)])
204
+ }, sponsor)) : null), /*#__PURE__*/React.createElement(ScreenElement, {
205
+ key: "description",
206
+ placeholder: /*#__PURE__*/React.createElement(PlaceholderText, {
207
+ className: styles.descriptionPlaceholder
208
+ }),
209
+ emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
210
+ id: "EQdIAR",
211
+ defaultMessage: [{
212
+ "type": 0,
213
+ "value": "Description"
214
+ }]
215
+ }),
216
+ emptyClassName: styles.emptyText,
217
+ isEmpty: !hasDescription
218
+ }, hasDescription ? /*#__PURE__*/React.createElement(Text, Object.assign({
219
+ className: styles.description
220
+ }, description)) : null)) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Spacer, {
221
+ key: "spacer-cta-bottom"
222
+ }) : null, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
223
+ style: {
224
+ margin: -spacing,
225
+ marginTop: '10px'
226
+ },
227
+ key: "call-to-action"
228
+ }, /*#__PURE__*/React.createElement(CallToAction, {
229
+ callToAction: callToAction,
230
+ disabled: !scrolledBottom,
231
+ animationDisabled: isPreview,
232
+ focusable: current && isView,
233
+ screenSize: {
234
+ width: width,
235
+ height: height
236
+ }
237
+ })) : null].filter(function (el) {
238
+ return el !== null;
239
+ });
240
+ return /*#__PURE__*/React.createElement("div", {
241
+ className: classNames([styles.container, (_ref10 = {}, _defineProperty(_ref10, className, className !== null), _defineProperty(_ref10, styles.isPlaceholder, isPlaceholder), _ref10)]),
242
+ "data-screen-ready": true
243
+ }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
244
+ background: finalBackground,
245
+ width: width,
246
+ height: height,
247
+ playing: backgroundPlaying,
248
+ shouldLoad: backgroundShouldLoad,
249
+ backgroundClassName: finalAnimateBackground ? styles.background : null
250
+ }) : null, /*#__PURE__*/React.createElement(Container, {
251
+ width: width,
252
+ height: height
253
+ }, /*#__PURE__*/React.createElement(Scroll, {
254
+ disabled: scrollingDisabled,
255
+ onScrolledBottom: onScrolledBottom,
256
+ onScrolledNotBottom: onScrolledNotBottom,
257
+ verticalAlign: "middle"
258
+ }, /*#__PURE__*/React.createElement(Layout, {
259
+ className: styles.layout,
260
+ style: !isPlaceholder ? {
261
+ padding: spacing,
262
+ paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
263
+ } : null
264
+ }, /*#__PURE__*/React.createElement(TransitionsStagger, {
265
+ transitions: transitions,
266
+ stagger: transitionStagger,
267
+ disabled: transitionDisabled,
268
+ playing: transitionPlaying
269
+ }, items)))));
270
+ };
271
+
272
+ Recommendation.propTypes = propTypes;
273
+ Recommendation.defaultProps = defaultProps;
274
+ var Recommendation$1 = /*#__PURE__*/React.memo(Recommendation);
275
+
276
+ var definition = [{
277
+ id: 'urbania-recommendation',
278
+ type: 'screen',
279
+ namespaces: ['urbania'],
280
+ group: {
281
+ label: defineMessage({
282
+ id: "oPjl8f",
283
+ defaultMessage: [{
284
+ "type": 0,
285
+ "value": "Urbania"
286
+ }]
287
+ }),
288
+ order: 10
289
+ },
290
+ title: defineMessage({
291
+ id: "18XpuL",
292
+ defaultMessage: [{
293
+ "type": 0,
294
+ "value": "Urbania recommendation screen"
295
+ }]
296
+ }),
297
+ component: Recommendation$1,
298
+ fields: [{
299
+ name: 'category',
300
+ type: 'heading-element',
301
+ theme: {
302
+ textStyle: 'heading1'
303
+ },
304
+ label: defineMessage({
305
+ id: "4grcMU",
306
+ defaultMessage: [{
307
+ "type": 0,
308
+ "value": "Category"
309
+ }]
310
+ })
311
+ }, {
312
+ name: 'date',
313
+ type: 'text-element',
314
+ theme: {
315
+ textStyle: 'text'
316
+ },
317
+ label: defineMessage({
318
+ id: "yEG9zh",
319
+ defaultMessage: [{
320
+ "type": 0,
321
+ "value": "Date"
322
+ }]
323
+ })
324
+ }, {
325
+ name: 'title',
326
+ type: 'heading-element',
327
+ theme: {
328
+ textStyle: 'heading1'
329
+ },
330
+ label: defineMessage({
331
+ id: "N25iDO",
332
+ defaultMessage: [{
333
+ "type": 0,
334
+ "value": "Title"
335
+ }]
336
+ })
337
+ }, {
338
+ name: 'sponsor',
339
+ type: 'text-element',
340
+ theme: {
341
+ textStyle: 'text'
342
+ },
343
+ label: defineMessage({
344
+ id: "WY14Zu",
345
+ defaultMessage: [{
346
+ "type": 0,
347
+ "value": "Sponsor"
348
+ }]
349
+ })
350
+ }, {
351
+ name: 'description',
352
+ type: 'text-element',
353
+ theme: {
354
+ textStyle: 'text'
355
+ },
356
+ label: defineMessage({
357
+ id: "Y7bs1v",
358
+ defaultMessage: [{
359
+ "type": 0,
360
+ "value": "Description"
361
+ }]
362
+ })
363
+ }, {
364
+ name: 'background',
365
+ type: 'background',
366
+ label: defineMessage({
367
+ id: "+MPZRu",
368
+ defaultMessage: [{
369
+ "type": 0,
370
+ "value": "Background"
371
+ }]
372
+ })
373
+ }, {
374
+ name: 'callToAction',
375
+ type: 'call-to-action',
376
+ theme: {
377
+ label: {
378
+ textStyle: 'heading2'
379
+ }
380
+ }
381
+ }]
382
+ }];
383
+
384
+ export { Recommendation$1 as Recommendation, definition as default };
package/lib/index.js ADDED
@@ -0,0 +1,405 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var reactIntl = require('react-intl');
6
+ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
7
+ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
8
+ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
9
+ var classNames = require('classnames');
10
+ var PropTypes = require('prop-types');
11
+ var React = require('react');
12
+ var core = require('@micromag/core');
13
+ var components = require('@micromag/core/components');
14
+ var contexts = require('@micromag/core/contexts');
15
+ var hooks = require('@micromag/core/hooks');
16
+ var utils = require('@micromag/core/utils');
17
+ var Background = require('@micromag/element-background');
18
+ var CallToAction = require('@micromag/element-call-to-action');
19
+ var Container = require('@micromag/element-container');
20
+ var Heading = require('@micromag/element-heading');
21
+ var Layout = require('@micromag/element-layout');
22
+ var Scroll = require('@micromag/element-scroll');
23
+ var Text = require('@micromag/element-text');
24
+
25
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
26
+
27
+ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
28
+ var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
29
+ var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
30
+ var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
31
+ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
32
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
33
+ var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
34
+ var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
35
+ var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
36
+ var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
37
+ var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
38
+ var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
39
+ var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
40
+
41
+ var styles = {"container":"micromag-screen-urbania-recommendation-container","disabled":"micromag-screen-urbania-recommendation-disabled","hidden":"micromag-screen-urbania-recommendation-hidden","placeholder":"micromag-screen-urbania-recommendation-placeholder","content":"micromag-screen-urbania-recommendation-content","emptyText":"micromag-screen-urbania-recommendation-emptyText","emptyTitle":"micromag-screen-urbania-recommendation-emptyTitle","textCard":"micromag-screen-urbania-recommendation-textCard","isPlaceholder":"micromag-screen-urbania-recommendation-isPlaceholder","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","rightBorder":"micromag-screen-urbania-recommendation-rightBorder","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","background":"micromag-screen-urbania-recommendation-background","roll":"micromag-screen-urbania-recommendation-roll","layout":"micromag-screen-urbania-recommendation-layout"};
42
+
43
+ var propTypes = {
44
+ category: core.PropTypes.headingElement,
45
+ date: core.PropTypes.textElement,
46
+ title: core.PropTypes.headingElement,
47
+ sponsor: core.PropTypes.textElement,
48
+ description: core.PropTypes.textElement,
49
+ spacing: PropTypes__default["default"].number,
50
+ background: core.PropTypes.backgroundElement,
51
+ callToAction: core.PropTypes.callToAction,
52
+ current: PropTypes__default["default"].bool,
53
+ active: PropTypes__default["default"].bool,
54
+ animateBackground: PropTypes__default["default"].bool,
55
+ transitions: core.PropTypes.transitions,
56
+ transitionStagger: PropTypes__default["default"].number,
57
+ className: PropTypes__default["default"].string
58
+ };
59
+ var defaultProps = {
60
+ category: null,
61
+ date: null,
62
+ title: null,
63
+ sponsor: null,
64
+ description: null,
65
+ spacing: 20,
66
+ background: null,
67
+ callToAction: null,
68
+ current: true,
69
+ active: true,
70
+ animateBackground: false,
71
+ transitions: null,
72
+ transitionStagger: 100,
73
+ className: null
74
+ };
75
+
76
+ var Recommendation = function Recommendation(_ref) {
77
+ var _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10;
78
+
79
+ var category = _ref.category,
80
+ date = _ref.date,
81
+ title = _ref.title,
82
+ sponsor = _ref.sponsor,
83
+ description = _ref.description,
84
+ spacing = _ref.spacing,
85
+ background = _ref.background,
86
+ callToAction = _ref.callToAction,
87
+ current = _ref.current,
88
+ active = _ref.active,
89
+ animateBackground = _ref.animateBackground,
90
+ transitions = _ref.transitions,
91
+ transitionStagger = _ref.transitionStagger,
92
+ className = _ref.className;
93
+ var trackScreenEvent = hooks.useTrackScreenEvent();
94
+
95
+ var _useScreenSize = contexts.useScreenSize(),
96
+ width = _useScreenSize.width,
97
+ height = _useScreenSize.height,
98
+ menuOverScreen = _useScreenSize.menuOverScreen;
99
+
100
+ var _useViewer = contexts.useViewer(),
101
+ menuSize = _useViewer.menuSize;
102
+
103
+ var _useScreenRenderConte = contexts.useScreenRenderContext(),
104
+ isView = _useScreenRenderConte.isView,
105
+ isPreview = _useScreenRenderConte.isPreview,
106
+ isPlaceholder = _useScreenRenderConte.isPlaceholder,
107
+ isEdit = _useScreenRenderConte.isEdit,
108
+ isStatic = _useScreenRenderConte.isStatic,
109
+ isCapture = _useScreenRenderConte.isCapture;
110
+
111
+ var hasCategory = utils.isTextFilled(category);
112
+ var hasDate = utils.isTextFilled(date);
113
+ var hasTitle = utils.isTextFilled(title);
114
+ var hasSponsor = utils.isTextFilled(sponsor);
115
+ var hasDescription = utils.isTextFilled(description);
116
+ var onlyCategory = hasCategory && !hasDate && !hasTitle && !hasSponsor && !hasDescription;
117
+ var hasTextCard = hasCategory || hasDate || hasTitle || hasSponsor || hasDescription;
118
+ var transitionPlaying = current;
119
+ var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
120
+ var scrollingDisabled = !isEdit && transitionDisabled || !current;
121
+ var backgroundPlaying = current && (isView || isEdit);
122
+ var backgroundShouldLoad = current || active || !isView;
123
+ var finalAnimateBackground = animateBackground && !isPlaceholder && !isStatic && !isPreview;
124
+ var hasCallToAction = callToAction !== null && callToAction.active === true;
125
+
126
+ var _useState = React.useState(false),
127
+ _useState2 = _slicedToArray__default["default"](_useState, 2),
128
+ scrolledBottom = _useState2[0],
129
+ setScrolledBottom = _useState2[1];
130
+
131
+ var onScrolledBottom = React.useCallback(function (_ref2) {
132
+ var initial = _ref2.initial;
133
+
134
+ if (initial) {
135
+ trackScreenEvent('scroll', 'Screen');
136
+ }
137
+
138
+ setScrolledBottom(true);
139
+ }, [trackScreenEvent]);
140
+ var onScrolledNotBottom = React.useCallback(function () {
141
+ setScrolledBottom(false);
142
+ }, [setScrolledBottom]);
143
+ var finalBackground = React.useMemo(function () {
144
+ return _objectSpread__default["default"]({
145
+ fit: 'contain',
146
+ horizontalAlign: 'left',
147
+ verticalAlign: '-20%',
148
+ repeat: true
149
+ }, background);
150
+ }, [background]); // Create elements
151
+
152
+ var items = [!isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
153
+ key: "spacer-cta-top"
154
+ }) : null, hasTextCard || isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
155
+ className: classNames__default["default"]([styles.textCard, (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className !== null), _defineProperty__default["default"](_ref3, styles.isPlaceholder, isPlaceholder), _ref3)])
156
+ }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
157
+ key: "category",
158
+ placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderTitle, {
159
+ className: styles.categoryPlaceholder
160
+ }),
161
+ emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
162
+ id: "I5+AHN",
163
+ defaultMessage: [{
164
+ "type": 0,
165
+ "value": "Category"
166
+ }]
167
+ }),
168
+ emptyClassName: styles.emptyText,
169
+ isEmpty: !hasCategory
170
+ }, hasCategory ? /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
171
+ className: classNames__default["default"]([styles.category, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className !== null), _defineProperty__default["default"](_ref4, styles.noBottomBorder, onlyCategory), _ref4)])
172
+ }, category)) : null), hasDate || hasTitle || isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
173
+ 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)])
174
+ }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
175
+ key: "date",
176
+ placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderText, {
177
+ className: styles.datePlaceholder
178
+ }),
179
+ emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
180
+ id: "/MsgWe",
181
+ defaultMessage: [{
182
+ "type": 0,
183
+ "value": "Date"
184
+ }]
185
+ }),
186
+ emptyClassName: styles.emptyText,
187
+ isEmpty: !hasDate
188
+ }, hasDate ? /*#__PURE__*/React__default["default"].createElement("div", {
189
+ className: classNames__default["default"]([styles.dateContainer, (_ref6 = {}, _defineProperty__default["default"](_ref6, className, className !== null), _defineProperty__default["default"](_ref6, styles.rightBorder, hasTitle), _ref6)])
190
+ }, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
191
+ className: classNames__default["default"]([styles.date, (_ref7 = {}, _defineProperty__default["default"](_ref7, className, className !== null), _defineProperty__default["default"](_ref7, styles.centerDate, !hasTitle), _ref7)])
192
+ }, date))) : null), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
193
+ key: "title",
194
+ placeholder: "title",
195
+ emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
196
+ id: "2ZOPe+",
197
+ defaultMessage: [{
198
+ "type": 0,
199
+ "value": "Title"
200
+ }]
201
+ }),
202
+ emptyClassName: styles.emptyTitle,
203
+ isEmpty: !hasTitle
204
+ }, hasTitle ? /*#__PURE__*/React__default["default"].createElement("div", {
205
+ className: classNames__default["default"]([styles.titleContainer, (_ref8 = {}, _defineProperty__default["default"](_ref8, className, className !== null), _defineProperty__default["default"](_ref8, styles.leftBorder, hasDate), _ref8)])
206
+ }, /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
207
+ className: styles.title
208
+ }, title))) : null)) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
209
+ key: "sponsor",
210
+ placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderText, {
211
+ className: styles.sponsorPlaceholder
212
+ }),
213
+ emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
214
+ id: "Bv1Q38",
215
+ defaultMessage: [{
216
+ "type": 0,
217
+ "value": "Sponsor"
218
+ }]
219
+ }),
220
+ emptyClassName: styles.emptyText,
221
+ isEmpty: !hasSponsor
222
+ }, hasSponsor ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
223
+ className: classNames__default["default"]([styles.sponsor, (_ref9 = {}, _defineProperty__default["default"](_ref9, className, className !== null), _defineProperty__default["default"](_ref9, styles.bottomBorder, hasDescription), _ref9)])
224
+ }, sponsor)) : null), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
225
+ key: "description",
226
+ placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderText, {
227
+ className: styles.descriptionPlaceholder
228
+ }),
229
+ emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
230
+ id: "EQdIAR",
231
+ defaultMessage: [{
232
+ "type": 0,
233
+ "value": "Description"
234
+ }]
235
+ }),
236
+ emptyClassName: styles.emptyText,
237
+ isEmpty: !hasDescription
238
+ }, hasDescription ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
239
+ className: styles.description
240
+ }, description)) : null)) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
241
+ key: "spacer-cta-bottom"
242
+ }) : null, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
243
+ style: {
244
+ margin: -spacing,
245
+ marginTop: '10px'
246
+ },
247
+ key: "call-to-action"
248
+ }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
249
+ callToAction: callToAction,
250
+ disabled: !scrolledBottom,
251
+ animationDisabled: isPreview,
252
+ focusable: current && isView,
253
+ screenSize: {
254
+ width: width,
255
+ height: height
256
+ }
257
+ })) : null].filter(function (el) {
258
+ return el !== null;
259
+ });
260
+ return /*#__PURE__*/React__default["default"].createElement("div", {
261
+ className: classNames__default["default"]([styles.container, (_ref10 = {}, _defineProperty__default["default"](_ref10, className, className !== null), _defineProperty__default["default"](_ref10, styles.isPlaceholder, isPlaceholder), _ref10)]),
262
+ "data-screen-ready": true
263
+ }, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
264
+ background: finalBackground,
265
+ width: width,
266
+ height: height,
267
+ playing: backgroundPlaying,
268
+ shouldLoad: backgroundShouldLoad,
269
+ backgroundClassName: finalAnimateBackground ? styles.background : null
270
+ }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
271
+ width: width,
272
+ height: height
273
+ }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
274
+ disabled: scrollingDisabled,
275
+ onScrolledBottom: onScrolledBottom,
276
+ onScrolledNotBottom: onScrolledNotBottom,
277
+ verticalAlign: "middle"
278
+ }, /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
279
+ className: styles.layout,
280
+ style: !isPlaceholder ? {
281
+ padding: spacing,
282
+ paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
283
+ } : null
284
+ }, /*#__PURE__*/React__default["default"].createElement(components.TransitionsStagger, {
285
+ transitions: transitions,
286
+ stagger: transitionStagger,
287
+ disabled: transitionDisabled,
288
+ playing: transitionPlaying
289
+ }, items)))));
290
+ };
291
+
292
+ Recommendation.propTypes = propTypes;
293
+ Recommendation.defaultProps = defaultProps;
294
+ var Recommendation$1 = /*#__PURE__*/React__default["default"].memo(Recommendation);
295
+
296
+ var definition = [{
297
+ id: 'urbania-recommendation',
298
+ type: 'screen',
299
+ namespaces: ['urbania'],
300
+ group: {
301
+ label: reactIntl.defineMessage({
302
+ id: "oPjl8f",
303
+ defaultMessage: [{
304
+ "type": 0,
305
+ "value": "Urbania"
306
+ }]
307
+ }),
308
+ order: 10
309
+ },
310
+ title: reactIntl.defineMessage({
311
+ id: "18XpuL",
312
+ defaultMessage: [{
313
+ "type": 0,
314
+ "value": "Urbania recommendation screen"
315
+ }]
316
+ }),
317
+ component: Recommendation$1,
318
+ fields: [{
319
+ name: 'category',
320
+ type: 'heading-element',
321
+ theme: {
322
+ textStyle: 'heading1'
323
+ },
324
+ label: reactIntl.defineMessage({
325
+ id: "4grcMU",
326
+ defaultMessage: [{
327
+ "type": 0,
328
+ "value": "Category"
329
+ }]
330
+ })
331
+ }, {
332
+ name: 'date',
333
+ type: 'text-element',
334
+ theme: {
335
+ textStyle: 'text'
336
+ },
337
+ label: reactIntl.defineMessage({
338
+ id: "yEG9zh",
339
+ defaultMessage: [{
340
+ "type": 0,
341
+ "value": "Date"
342
+ }]
343
+ })
344
+ }, {
345
+ name: 'title',
346
+ type: 'heading-element',
347
+ theme: {
348
+ textStyle: 'heading1'
349
+ },
350
+ label: reactIntl.defineMessage({
351
+ id: "N25iDO",
352
+ defaultMessage: [{
353
+ "type": 0,
354
+ "value": "Title"
355
+ }]
356
+ })
357
+ }, {
358
+ name: 'sponsor',
359
+ type: 'text-element',
360
+ theme: {
361
+ textStyle: 'text'
362
+ },
363
+ label: reactIntl.defineMessage({
364
+ id: "WY14Zu",
365
+ defaultMessage: [{
366
+ "type": 0,
367
+ "value": "Sponsor"
368
+ }]
369
+ })
370
+ }, {
371
+ name: 'description',
372
+ type: 'text-element',
373
+ theme: {
374
+ textStyle: 'text'
375
+ },
376
+ label: reactIntl.defineMessage({
377
+ id: "Y7bs1v",
378
+ defaultMessage: [{
379
+ "type": 0,
380
+ "value": "Description"
381
+ }]
382
+ })
383
+ }, {
384
+ name: 'background',
385
+ type: 'background',
386
+ label: reactIntl.defineMessage({
387
+ id: "+MPZRu",
388
+ defaultMessage: [{
389
+ "type": 0,
390
+ "value": "Background"
391
+ }]
392
+ })
393
+ }, {
394
+ name: 'callToAction',
395
+ type: 'call-to-action',
396
+ theme: {
397
+ label: {
398
+ textStyle: 'heading2'
399
+ }
400
+ }
401
+ }]
402
+ }];
403
+
404
+ exports.Recommendation = Recommendation$1;
405
+ exports["default"] = definition;
package/package.json ADDED
@@ -0,0 +1,71 @@
1
+ {
2
+ "name": "@micromag/screen-urbania-recommendation",
3
+ "version": "0.3.57",
4
+ "description": "",
5
+ "keywords": [
6
+ "javascript"
7
+ ],
8
+ "homepage": "https://github.com/urbania-media/micromag-js",
9
+ "repository": {
10
+ "type": "git",
11
+ "url": "git+https://github.com/urbania-media/micromag-js.git"
12
+ },
13
+ "author": {
14
+ "name": "Folklore",
15
+ "email": "info@folklore.email"
16
+ },
17
+ "contributors": [
18
+ {
19
+ "name": "David Mongeau-Petitpas",
20
+ "email": "dmp@folklore.email"
21
+ },
22
+ {
23
+ "name": "Nicolas Roy-Bourdages",
24
+ "email": "nrb@folklore.email"
25
+ },
26
+ {
27
+ "name": "Julien Carignan",
28
+ "email": "jc@folklore.email"
29
+ }
30
+ ],
31
+ "license": "ISC",
32
+ "main": "lib/index.js",
33
+ "module": "es/index.js",
34
+ "files": [
35
+ "lib",
36
+ "es",
37
+ "assets"
38
+ ],
39
+ "scripts": {
40
+ "prepare": "../../scripts/prepare-package.sh"
41
+ },
42
+ "devDependencies": {
43
+ "react": "^16.8.0 || ^17.0.0",
44
+ "react-dom": "^16.8.0 || ^17.0.0"
45
+ },
46
+ "peerDependencies": {
47
+ "react": "^16.8.0 || ^17.0.0",
48
+ "react-dom": "^16.8.0 || ^17.0.0"
49
+ },
50
+ "dependencies": {
51
+ "@babel/runtime": "^7.13.10",
52
+ "@micromag/core": "^0.3.57",
53
+ "@micromag/element-background": "^0.3.57",
54
+ "@micromag/element-call-to-action": "^0.3.57",
55
+ "@micromag/element-container": "^0.3.57",
56
+ "@micromag/element-heading": "^0.3.57",
57
+ "@micromag/element-layout": "^0.3.57",
58
+ "@micromag/element-scroll": "^0.3.57",
59
+ "@micromag/element-text": "^0.3.57",
60
+ "@micromag/transforms": "^0.3.57",
61
+ "classnames": "^2.2.6",
62
+ "lodash": "^4.17.21",
63
+ "prop-types": "^15.7.2",
64
+ "react-intl": "^5.12.1",
65
+ "uuid": "^8.3.2"
66
+ },
67
+ "publishConfig": {
68
+ "access": "public"
69
+ },
70
+ "gitHead": "0cd1abafd1bee77d9dccbedde58f7b83f2351794"
71
+ }