@micromag/screen-ranking 0.3.410 → 0.3.416

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +49 -37
  3. package/lib/index.js +48 -36
  4. package/package.json +2 -2
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-screen-ranking-container .micromag-screen-ranking-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-ranking-container .micromag-screen-ranking-empty{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-ranking-container{position:relative}.micromag-screen-ranking-container .micromag-screen-ranking-background{z-index:0}.micromag-screen-ranking-container .micromag-screen-ranking-content{z-index:1}.micromag-screen-ranking-container .micromag-screen-ranking-empty{height:50px;margin-right:10px}.micromag-screen-ranking-container .micromag-screen-ranking-item{padding:10px 0;position:relative}.micromag-screen-ranking-container .micromag-screen-ranking-item:first-child{padding-top:0}.micromag-screen-ranking-container .micromag-screen-ranking-rankText{font-size:48px}.micromag-screen-ranking-container .micromag-screen-ranking-description,.micromag-screen-ranking-container .micromag-screen-ranking-title{padding:8px 0}.micromag-screen-ranking-container .micromag-screen-ranking-callToAction{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-ranking-container .micromag-screen-ranking-callToAction a{padding:0}.micromag-screen-ranking-container .micromag-screen-ranking-callToAction.micromag-screen-ranking-disabled{opacity:0;pointer-events:none}.micromag-screen-ranking-container.micromag-screen-ranking-sideLayout .micromag-screen-ranking-layout{display:table;width:100%}.micromag-screen-ranking-container.micromag-screen-ranking-sideLayout .micromag-screen-ranking-item{display:table-row;padding:0}.micromag-screen-ranking-container.micromag-screen-ranking-sideLayout .micromag-screen-ranking-label,.micromag-screen-ranking-container.micromag-screen-ranking-sideLayout .micromag-screen-ranking-rank{display:table-cell;padding:10px 0;vertical-align:top}.micromag-screen-ranking-container.micromag-screen-ranking-sideLayout .micromag-screen-ranking-rank{padding-right:20px}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder .micromag-screen-ranking-rank{color:hsla(0,0%,100%,.6);font-size:16px;mix-blend-mode:difference;text-align:left}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder .micromag-screen-ranking-scroll{padding:5px}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder .micromag-screen-ranking-description,.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder .micromag-screen-ranking-title{-ms-flex-pack:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:center;padding:0}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder .micromag-screen-ranking-item{padding:1px 0}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder.micromag-screen-ranking-sideLayout .micromag-screen-ranking-rank{padding-right:4px;padding-top:8px;width:24px}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder.micromag-screen-ranking-sideLayout .micromag-screen-ranking-label{padding:5px 0}
1
+ .micromag-screen-ranking-container .micromag-screen-ranking-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-ranking-container .micromag-screen-ranking-empty{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-ranking-container .micromag-screen-ranking-emptyTitle{height:100px;width:100%}.micromag-screen-ranking-container{position:relative}.micromag-screen-ranking-container .micromag-screen-ranking-background{z-index:0}.micromag-screen-ranking-container .micromag-screen-ranking-content{z-index:1}.micromag-screen-ranking-container .micromag-screen-ranking-empty{height:50px;margin-right:10px}.micromag-screen-ranking-container .micromag-screen-ranking-emptyTitle{min-width:100%}.micromag-screen-ranking-container .micromag-screen-ranking-item{padding:10px 0;position:relative}.micromag-screen-ranking-container .micromag-screen-ranking-item:first-child{padding-top:0}.micromag-screen-ranking-container .micromag-screen-ranking-rankText{font-size:48px}.micromag-screen-ranking-container .micromag-screen-ranking-description,.micromag-screen-ranking-container .micromag-screen-ranking-itemTitle{padding:8px 0}.micromag-screen-ranking-container .micromag-screen-ranking-callToAction{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-ranking-container .micromag-screen-ranking-callToAction a{padding:0}.micromag-screen-ranking-container .micromag-screen-ranking-callToAction.micromag-screen-ranking-disabled{opacity:0;pointer-events:none}.micromag-screen-ranking-container.micromag-screen-ranking-sideLayout .micromag-screen-ranking-elementsContainer{display:table;width:100%}.micromag-screen-ranking-container.micromag-screen-ranking-sideLayout .micromag-screen-ranking-item{display:table-row;padding:0}.micromag-screen-ranking-container.micromag-screen-ranking-sideLayout .micromag-screen-ranking-label,.micromag-screen-ranking-container.micromag-screen-ranking-sideLayout .micromag-screen-ranking-rank{display:table-cell;padding:10px 0;vertical-align:top}.micromag-screen-ranking-container.micromag-screen-ranking-sideLayout .micromag-screen-ranking-rank{padding-right:20px}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder .micromag-screen-ranking-rank{color:hsla(0,0%,100%,.6);font-size:16px;mix-blend-mode:difference;text-align:left}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder .micromag-screen-ranking-scroll{padding:5px}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder .micromag-screen-ranking-description,.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder .micromag-screen-ranking-itemTitle{-ms-flex-pack:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:center;padding:0}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder .micromag-screen-ranking-item{padding:1px 0}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder.micromag-screen-ranking-sideLayout .micromag-screen-ranking-rank{padding-right:4px;padding-top:8px;width:24px}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder.micromag-screen-ranking-sideLayout .micromag-screen-ranking-label{padding:5px 0}
package/es/index.js CHANGED
@@ -6,7 +6,7 @@ import classNames from 'classnames';
6
6
  import PropTypes from 'prop-types';
7
7
  import React, { useState, useCallback } from 'react';
8
8
  import { PropTypes as PropTypes$1 } from '@micromag/core';
9
- import { Transitions, ScreenElement } from '@micromag/core/components';
9
+ import { ScreenElement } from '@micromag/core/components';
10
10
  import { useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenRenderContext } from '@micromag/core/contexts';
11
11
  import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
12
12
  import { isTextFilled, isHeaderFilled, isFooterFilled, getFooterProps } from '@micromag/core/utils';
@@ -21,10 +21,11 @@ import Text from '@micromag/element-text';
21
21
  import _objectSpread from '@babel/runtime/helpers/objectSpread2';
22
22
  import { Text as Text$1, Container as Container$1 } from '@micromag/transforms/apple-news';
23
23
 
24
- var styles = {"container":"micromag-screen-ranking-container","background":"micromag-screen-ranking-background","empty":"micromag-screen-ranking-empty","content":"micromag-screen-ranking-content","item":"micromag-screen-ranking-item","rankText":"micromag-screen-ranking-rankText","title":"micromag-screen-ranking-title","description":"micromag-screen-ranking-description","callToAction":"micromag-screen-ranking-callToAction","disabled":"micromag-screen-ranking-disabled","sideLayout":"micromag-screen-ranking-sideLayout","layout":"micromag-screen-ranking-layout","rank":"micromag-screen-ranking-rank","label":"micromag-screen-ranking-label","isPlaceholder":"micromag-screen-ranking-isPlaceholder","scroll":"micromag-screen-ranking-scroll"};
24
+ var styles = {"container":"micromag-screen-ranking-container","background":"micromag-screen-ranking-background","empty":"micromag-screen-ranking-empty","emptyTitle":"micromag-screen-ranking-emptyTitle","content":"micromag-screen-ranking-content","item":"micromag-screen-ranking-item","rankText":"micromag-screen-ranking-rankText","itemTitle":"micromag-screen-ranking-itemTitle","description":"micromag-screen-ranking-description","callToAction":"micromag-screen-ranking-callToAction","disabled":"micromag-screen-ranking-disabled","sideLayout":"micromag-screen-ranking-sideLayout","elementsContainer":"micromag-screen-ranking-elementsContainer","rank":"micromag-screen-ranking-rank","label":"micromag-screen-ranking-label","isPlaceholder":"micromag-screen-ranking-isPlaceholder","scroll":"micromag-screen-ranking-scroll"};
25
25
 
26
26
  var propTypes = {
27
27
  layout: PropTypes.oneOf(['side', 'over']),
28
+ title: PropTypes$1.headingElement,
28
29
  items: PropTypes.arrayOf(PropTypes$1.textElement),
29
30
  numbersStyle: PropTypes$1.textStyle,
30
31
  ascending: PropTypes.bool,
@@ -34,13 +35,12 @@ var propTypes = {
34
35
  footer: PropTypes$1.footer,
35
36
  current: PropTypes.bool,
36
37
  active: PropTypes.bool,
37
- transitions: PropTypes$1.transitions,
38
- transitionStagger: PropTypes.number,
39
38
  type: PropTypes.string,
40
39
  className: PropTypes.string
41
40
  };
42
41
  var defaultProps = {
43
42
  layout: 'side',
43
+ title: null,
44
44
  items: [null],
45
45
  numbersStyle: null,
46
46
  ascending: false,
@@ -50,14 +50,13 @@ var defaultProps = {
50
50
  footer: null,
51
51
  current: true,
52
52
  active: true,
53
- transitions: null,
54
- transitionStagger: 75,
55
53
  type: null,
56
54
  className: null
57
55
  };
58
56
  var RankingScreen = function RankingScreen(_ref) {
59
57
  var _ref4;
60
58
  var layout = _ref.layout,
59
+ title = _ref.title,
61
60
  items = _ref.items,
62
61
  numbersStyle = _ref.numbersStyle,
63
62
  ascending = _ref.ascending,
@@ -67,8 +66,6 @@ var RankingScreen = function RankingScreen(_ref) {
67
66
  footer = _ref.footer,
68
67
  current = _ref.current,
69
68
  active = _ref.active,
70
- transitions = _ref.transitions,
71
- transitionStagger = _ref.transitionStagger,
72
69
  type = _ref.type,
73
70
  className = _ref.className;
74
71
  var trackScreenEvent = useTrackScreenEvent(type);
@@ -96,38 +93,47 @@ var RankingScreen = function RankingScreen(_ref) {
96
93
  return {};
97
94
  }) : items || [null];
98
95
  var itemsCount = finalItems !== null ? finalItems.length : 0;
99
- var transitionPlaying = current;
100
96
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
101
97
  var scrollingDisabled = !isEdit && transitionDisabled || !current;
102
98
  var backgroundPlaying = current && (isView || isEdit);
103
99
  var mediaShouldLoad = current || active;
100
+ var hasTitle = isTextFilled(title);
101
+ var titleElement = /*#__PURE__*/React.createElement(ScreenElement, {
102
+ placeholder: "Title",
103
+ emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
104
+ id: "BSTWf8",
105
+ defaultMessage: [{
106
+ "type": 0,
107
+ "value": "Title"
108
+ }]
109
+ }),
110
+ emptyClassName: classNames([styles.empty, styles.emptyTitle]),
111
+ isEmpty: !hasTitle
112
+ }, hasTitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({
113
+ className: styles.title
114
+ }, title)) : null);
104
115
  var elements = (finalItems || []).map(function (item, itemI) {
105
116
  var _ref2 = item || {},
106
117
  _ref2$title = _ref2.title,
107
- title = _ref2$title === void 0 ? null : _ref2$title,
118
+ itemTitle = _ref2$title === void 0 ? null : _ref2$title,
108
119
  _ref2$description = _ref2.description,
109
120
  description = _ref2$description === void 0 ? null : _ref2$description;
110
- var hasTitle = isTextFilled(title);
121
+ var hasItemTitle = isTextFilled(itemTitle);
111
122
  var hasDescription = isTextFilled(description);
112
- var titleElement = /*#__PURE__*/React.createElement("div", {
113
- className: styles.title
123
+ var itemTitleElement = /*#__PURE__*/React.createElement("div", {
124
+ className: styles.itemTitle
114
125
  }, /*#__PURE__*/React.createElement(ScreenElement, {
115
126
  placeholder: "title",
116
127
  emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
117
- id: "2ZOPe+",
128
+ id: "bmO4Ss",
118
129
  defaultMessage: [{
119
130
  "type": 0,
120
- "value": "Title"
131
+ "value": "Entry Title"
121
132
  }]
122
133
  }),
123
134
  emptyClassName: styles.empty,
124
- isEmpty: !hasTitle
125
- }, hasTitle ? /*#__PURE__*/React.createElement(Transitions, {
126
- transitions: transitions,
127
- playing: transitionPlaying,
128
- delay: transitionStagger * itemI,
129
- disabled: transitionDisabled
130
- }, /*#__PURE__*/React.createElement(Heading, title)) : null));
135
+ isEmpty: !hasItemTitle
136
+ }, hasItemTitle ? /*#__PURE__*/React.createElement(Heading, itemTitle) : null));
131
137
  var descriptionElement = /*#__PURE__*/React.createElement("div", {
132
138
  className: styles.description
133
139
  }, /*#__PURE__*/React.createElement(ScreenElement, {
@@ -141,30 +147,20 @@ var RankingScreen = function RankingScreen(_ref) {
141
147
  }),
142
148
  emptyClassName: styles.empty,
143
149
  isEmpty: !hasDescription
144
- }, hasDescription ? /*#__PURE__*/React.createElement(Transitions, {
145
- transitions: transitions,
146
- playing: transitionPlaying,
147
- delay: transitionStagger * itemI,
148
- disabled: transitionDisabled
149
- }, /*#__PURE__*/React.createElement(Text, description)) : null));
150
+ }, hasDescription ? /*#__PURE__*/React.createElement(Text, description) : null));
150
151
  var rankText = "".concat(ascending ? itemI + 1 : itemsCount - itemI);
151
152
  return /*#__PURE__*/React.createElement("div", {
152
153
  className: styles.item,
153
154
  key: "item-".concat(itemI)
154
155
  }, /*#__PURE__*/React.createElement("div", {
155
156
  className: styles.rank
156
- }, isPlaceholder ? rankText : /*#__PURE__*/React.createElement(Transitions, {
157
- transitions: transitions,
158
- playing: transitionPlaying,
159
- delay: transitionStagger * itemI,
160
- disabled: transitionDisabled
161
- }, /*#__PURE__*/React.createElement(Text, {
157
+ }, isPlaceholder ? rankText : /*#__PURE__*/React.createElement(Text, {
162
158
  className: styles.rankText,
163
159
  body: rankText,
164
160
  textStyle: numbersStyle
165
- }))), /*#__PURE__*/React.createElement("div", {
161
+ })), /*#__PURE__*/React.createElement("div", {
166
162
  className: styles.label
167
- }, titleElement, descriptionElement));
163
+ }, itemTitleElement, descriptionElement));
168
164
  });
169
165
 
170
166
  // Call to Action
@@ -221,7 +217,9 @@ var RankingScreen = function RankingScreen(_ref) {
221
217
  paddingTop: !isPlaceholder && hasHeader ? spacing : (!isPreview ? viewerTopHeight : 0) + spacing,
222
218
  paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (foterHeight || spacing)
223
219
  } : null
224
- }, elements)), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
220
+ }, titleElement, /*#__PURE__*/React.createElement("div", {
221
+ className: styles.elementsContainer
222
+ }, elements))), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
225
223
  ref: footerRef,
226
224
  className: classNames([styles.callToAction, _defineProperty({}, styles.disabled, !scrolledBottom)]),
227
225
  style: {
@@ -325,6 +323,20 @@ var definition = {
325
323
  "value": "Layout"
326
324
  }]
327
325
  })
326
+ }, {
327
+ name: 'title',
328
+ type: 'heading-element',
329
+ // inline: true,
330
+ theme: {
331
+ textStyle: 'heading1'
332
+ },
333
+ label: defineMessage({
334
+ id: "N25iDO",
335
+ defaultMessage: [{
336
+ "type": 0,
337
+ "value": "Title"
338
+ }]
339
+ })
328
340
  }, {
329
341
  name: 'items',
330
342
  type: 'entries',
package/lib/index.js CHANGED
@@ -43,10 +43,11 @@ var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
43
43
  var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
44
44
  var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
45
45
 
46
- var styles = {"container":"micromag-screen-ranking-container","background":"micromag-screen-ranking-background","empty":"micromag-screen-ranking-empty","content":"micromag-screen-ranking-content","item":"micromag-screen-ranking-item","rankText":"micromag-screen-ranking-rankText","title":"micromag-screen-ranking-title","description":"micromag-screen-ranking-description","callToAction":"micromag-screen-ranking-callToAction","disabled":"micromag-screen-ranking-disabled","sideLayout":"micromag-screen-ranking-sideLayout","layout":"micromag-screen-ranking-layout","rank":"micromag-screen-ranking-rank","label":"micromag-screen-ranking-label","isPlaceholder":"micromag-screen-ranking-isPlaceholder","scroll":"micromag-screen-ranking-scroll"};
46
+ var styles = {"container":"micromag-screen-ranking-container","background":"micromag-screen-ranking-background","empty":"micromag-screen-ranking-empty","emptyTitle":"micromag-screen-ranking-emptyTitle","content":"micromag-screen-ranking-content","item":"micromag-screen-ranking-item","rankText":"micromag-screen-ranking-rankText","itemTitle":"micromag-screen-ranking-itemTitle","description":"micromag-screen-ranking-description","callToAction":"micromag-screen-ranking-callToAction","disabled":"micromag-screen-ranking-disabled","sideLayout":"micromag-screen-ranking-sideLayout","elementsContainer":"micromag-screen-ranking-elementsContainer","rank":"micromag-screen-ranking-rank","label":"micromag-screen-ranking-label","isPlaceholder":"micromag-screen-ranking-isPlaceholder","scroll":"micromag-screen-ranking-scroll"};
47
47
 
48
48
  var propTypes = {
49
49
  layout: PropTypes__default["default"].oneOf(['side', 'over']),
50
+ title: core.PropTypes.headingElement,
50
51
  items: PropTypes__default["default"].arrayOf(core.PropTypes.textElement),
51
52
  numbersStyle: core.PropTypes.textStyle,
52
53
  ascending: PropTypes__default["default"].bool,
@@ -56,13 +57,12 @@ var propTypes = {
56
57
  footer: core.PropTypes.footer,
57
58
  current: PropTypes__default["default"].bool,
58
59
  active: PropTypes__default["default"].bool,
59
- transitions: core.PropTypes.transitions,
60
- transitionStagger: PropTypes__default["default"].number,
61
60
  type: PropTypes__default["default"].string,
62
61
  className: PropTypes__default["default"].string
63
62
  };
64
63
  var defaultProps = {
65
64
  layout: 'side',
65
+ title: null,
66
66
  items: [null],
67
67
  numbersStyle: null,
68
68
  ascending: false,
@@ -72,14 +72,13 @@ var defaultProps = {
72
72
  footer: null,
73
73
  current: true,
74
74
  active: true,
75
- transitions: null,
76
- transitionStagger: 75,
77
75
  type: null,
78
76
  className: null
79
77
  };
80
78
  var RankingScreen = function RankingScreen(_ref) {
81
79
  var _ref4;
82
80
  var layout = _ref.layout,
81
+ title = _ref.title,
83
82
  items = _ref.items,
84
83
  numbersStyle = _ref.numbersStyle,
85
84
  ascending = _ref.ascending,
@@ -89,8 +88,6 @@ var RankingScreen = function RankingScreen(_ref) {
89
88
  footer = _ref.footer,
90
89
  current = _ref.current,
91
90
  active = _ref.active,
92
- transitions = _ref.transitions,
93
- transitionStagger = _ref.transitionStagger,
94
91
  type = _ref.type,
95
92
  className = _ref.className;
96
93
  var trackScreenEvent = hooks.useTrackScreenEvent(type);
@@ -118,38 +115,47 @@ var RankingScreen = function RankingScreen(_ref) {
118
115
  return {};
119
116
  }) : items || [null];
120
117
  var itemsCount = finalItems !== null ? finalItems.length : 0;
121
- var transitionPlaying = current;
122
118
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
123
119
  var scrollingDisabled = !isEdit && transitionDisabled || !current;
124
120
  var backgroundPlaying = current && (isView || isEdit);
125
121
  var mediaShouldLoad = current || active;
122
+ var hasTitle = utils.isTextFilled(title);
123
+ var titleElement = /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
124
+ placeholder: "Title",
125
+ emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
126
+ id: "BSTWf8",
127
+ defaultMessage: [{
128
+ "type": 0,
129
+ "value": "Title"
130
+ }]
131
+ }),
132
+ emptyClassName: classNames__default["default"]([styles.empty, styles.emptyTitle]),
133
+ isEmpty: !hasTitle
134
+ }, hasTitle ? /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
135
+ className: styles.title
136
+ }, title)) : null);
126
137
  var elements = (finalItems || []).map(function (item, itemI) {
127
138
  var _ref2 = item || {},
128
139
  _ref2$title = _ref2.title,
129
- title = _ref2$title === void 0 ? null : _ref2$title,
140
+ itemTitle = _ref2$title === void 0 ? null : _ref2$title,
130
141
  _ref2$description = _ref2.description,
131
142
  description = _ref2$description === void 0 ? null : _ref2$description;
132
- var hasTitle = utils.isTextFilled(title);
143
+ var hasItemTitle = utils.isTextFilled(itemTitle);
133
144
  var hasDescription = utils.isTextFilled(description);
134
- var titleElement = /*#__PURE__*/React__default["default"].createElement("div", {
135
- className: styles.title
145
+ var itemTitleElement = /*#__PURE__*/React__default["default"].createElement("div", {
146
+ className: styles.itemTitle
136
147
  }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
137
148
  placeholder: "title",
138
149
  emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
139
- id: "2ZOPe+",
150
+ id: "bmO4Ss",
140
151
  defaultMessage: [{
141
152
  "type": 0,
142
- "value": "Title"
153
+ "value": "Entry Title"
143
154
  }]
144
155
  }),
145
156
  emptyClassName: styles.empty,
146
- isEmpty: !hasTitle
147
- }, hasTitle ? /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
148
- transitions: transitions,
149
- playing: transitionPlaying,
150
- delay: transitionStagger * itemI,
151
- disabled: transitionDisabled
152
- }, /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], title)) : null));
157
+ isEmpty: !hasItemTitle
158
+ }, hasItemTitle ? /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], itemTitle) : null));
153
159
  var descriptionElement = /*#__PURE__*/React__default["default"].createElement("div", {
154
160
  className: styles.description
155
161
  }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
@@ -163,30 +169,20 @@ var RankingScreen = function RankingScreen(_ref) {
163
169
  }),
164
170
  emptyClassName: styles.empty,
165
171
  isEmpty: !hasDescription
166
- }, hasDescription ? /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
167
- transitions: transitions,
168
- playing: transitionPlaying,
169
- delay: transitionStagger * itemI,
170
- disabled: transitionDisabled
171
- }, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], description)) : null));
172
+ }, hasDescription ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], description) : null));
172
173
  var rankText = "".concat(ascending ? itemI + 1 : itemsCount - itemI);
173
174
  return /*#__PURE__*/React__default["default"].createElement("div", {
174
175
  className: styles.item,
175
176
  key: "item-".concat(itemI)
176
177
  }, /*#__PURE__*/React__default["default"].createElement("div", {
177
178
  className: styles.rank
178
- }, isPlaceholder ? rankText : /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
179
- transitions: transitions,
180
- playing: transitionPlaying,
181
- delay: transitionStagger * itemI,
182
- disabled: transitionDisabled
183
- }, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], {
179
+ }, isPlaceholder ? rankText : /*#__PURE__*/React__default["default"].createElement(Text__default["default"], {
184
180
  className: styles.rankText,
185
181
  body: rankText,
186
182
  textStyle: numbersStyle
187
- }))), /*#__PURE__*/React__default["default"].createElement("div", {
183
+ })), /*#__PURE__*/React__default["default"].createElement("div", {
188
184
  className: styles.label
189
- }, titleElement, descriptionElement));
185
+ }, itemTitleElement, descriptionElement));
190
186
  });
191
187
 
192
188
  // Call to Action
@@ -243,7 +239,9 @@ var RankingScreen = function RankingScreen(_ref) {
243
239
  paddingTop: !isPlaceholder && hasHeader ? spacing : (!isPreview ? viewerTopHeight : 0) + spacing,
244
240
  paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (foterHeight || spacing)
245
241
  } : null
246
- }, elements)), !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
242
+ }, titleElement, /*#__PURE__*/React__default["default"].createElement("div", {
243
+ className: styles.elementsContainer
244
+ }, elements))), !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
247
245
  ref: footerRef,
248
246
  className: classNames__default["default"]([styles.callToAction, _defineProperty__default["default"]({}, styles.disabled, !scrolledBottom)]),
249
247
  style: {
@@ -347,6 +345,20 @@ var definition = {
347
345
  "value": "Layout"
348
346
  }]
349
347
  })
348
+ }, {
349
+ name: 'title',
350
+ type: 'heading-element',
351
+ // inline: true,
352
+ theme: {
353
+ textStyle: 'heading1'
354
+ },
355
+ label: reactIntl.defineMessage({
356
+ id: "N25iDO",
357
+ defaultMessage: [{
358
+ "type": 0,
359
+ "value": "Title"
360
+ }]
361
+ })
350
362
  }, {
351
363
  name: 'items',
352
364
  type: 'entries',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-ranking",
3
- "version": "0.3.410",
3
+ "version": "0.3.416",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -71,5 +71,5 @@
71
71
  "access": "public",
72
72
  "registry": "https://registry.npmjs.org/"
73
73
  },
74
- "gitHead": "3d20200b811ff19c75de0697a4c4543101bf755b"
74
+ "gitHead": "4990d8fa86965538a258b8061630290f8c2d7ae6"
75
75
  }