@micromag/screen-ranking 0.2.286

package/assets/css/styles.css

@@ -0,0 +1 @@
+.micromag-screen-ranking-container .micromag-screen-ranking-empty{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-ranking-container{position:relative}.micromag-screen-ranking-container .micromag-screen-ranking-empty{height:50px;margin-right:10px}.micromag-screen-ranking-container .micromag-screen-ranking-item{position:relative;padding:10px 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{position:absolute;bottom:0;left:0;width:100%}.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-content,.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:rgba(28,28,28,.5);font-size:16px;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{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;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{width:24px;padding-top:8px;padding-right:4px}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder.micromag-screen-ranking-sideLayout .micromag-screen-ranking-content{padding:5px 0}

package/es/index.js

@@ -0,0 +1,379 @@
+import { FormattedMessage, defineMessage } from 'react-intl';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import React, { useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { PropTypes as PropTypes$1 } from '@micromag/core';
+import { Transitions, ScreenElement } from '@micromag/core/components';
+import { useScreenSize, useViewer, useScreenRenderContext } from '@micromag/core/contexts';
+import { useTrackScreenEvent, useResizeObserver } from '@micromag/core/hooks';
+import { isTextFilled } from '@micromag/core/utils';
+import Background from '@micromag/element-background';
+import Container from '@micromag/element-container';
+import Layout from '@micromag/element-layout';
+import Text from '@micromag/element-text';
+import Heading from '@micromag/element-heading';
+import Scroll from '@micromag/element-scroll';
+import CallToAction from '@micromag/element-call-to-action';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import { Text as Text$1, Container as Container$1 } from '@micromag/transforms/apple-news';
+
+var styles = {"container":"micromag-screen-ranking-container","empty":"micromag-screen-ranking-empty","item":"micromag-screen-ranking-item","rankText":"micromag-screen-ranking-rankText","description":"micromag-screen-ranking-description","title":"micromag-screen-ranking-title","callToAction":"micromag-screen-ranking-callToAction","sideLayout":"micromag-screen-ranking-sideLayout","layout":"micromag-screen-ranking-layout","content":"micromag-screen-ranking-content","rank":"micromag-screen-ranking-rank","isPlaceholder":"micromag-screen-ranking-isPlaceholder","scroll":"micromag-screen-ranking-scroll"};
+
+var propTypes = {
+  layout: PropTypes.oneOf(['side', 'over']),
+  items: PropTypes.arrayOf(PropTypes$1.textElement),
+  numbersStyle: PropTypes$1.textStyle,
+  ascending: PropTypes.bool,
+  spacing: PropTypes.number,
+  background: PropTypes$1.backgroundElement,
+  callToAction: PropTypes$1.callToAction,
+  current: PropTypes.bool,
+  transitions: PropTypes$1.transitions,
+  transitionStagger: PropTypes.number,
+  type: PropTypes.string,
+  className: PropTypes.string
+};
+var defaultProps = {
+  layout: 'side',
+  items: [null],
+  numbersStyle: null,
+  ascending: false,
+  spacing: 20,
+  background: null,
+  callToAction: null,
+  current: true,
+  transitions: null,
+  transitionStagger: 75,
+  type: null,
+  className: null
+};
+
+var RankingScreen = function RankingScreen(_ref) {
+  var _ref5;
+
+  var layout = _ref.layout,
+      items = _ref.items,
+      numbersStyle = _ref.numbersStyle,
+      ascending = _ref.ascending,
+      spacing = _ref.spacing,
+      background = _ref.background,
+      callToAction = _ref.callToAction,
+      current = _ref.current,
+      transitions = _ref.transitions,
+      transitionStagger = _ref.transitionStagger,
+      type = _ref.type,
+      className = _ref.className;
+  var trackScreenEvent = useTrackScreenEvent(type);
+
+  var _useScreenSize = useScreenSize(),
+      width = _useScreenSize.width,
+      height = _useScreenSize.height,
+      menuOverScreen = _useScreenSize.menuOverScreen;
+
+  var _useViewer = useViewer(),
+      menuSize = _useViewer.menuSize;
+
+  var _useScreenRenderConte = useScreenRenderContext(),
+      isView = _useScreenRenderConte.isView,
+      isPreview = _useScreenRenderConte.isPreview,
+      isPlaceholder = _useScreenRenderConte.isPlaceholder,
+      isEdit = _useScreenRenderConte.isEdit,
+      isStatic = _useScreenRenderConte.isStatic,
+      isCapture = _useScreenRenderConte.isCapture;
+
+  var finalItems = isPlaceholder ? _toConsumableArray(new Array(10)).map(function () {
+    return {};
+  }) : items || [null];
+  var itemsCount = finalItems !== null ? finalItems.length : 0;
+  var transitionPlaying = current;
+  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
+  var scrollingDisabled = !isEdit && transitionDisabled || !current;
+  var backgroundPlaying = current && (isView || isEdit);
+  var elements = (finalItems || []).map(function (item, itemI) {
+    var _ref2 = item || {},
+        _ref2$title = _ref2.title,
+        title = _ref2$title === void 0 ? null : _ref2$title,
+        _ref2$description = _ref2.description,
+        description = _ref2$description === void 0 ? null : _ref2$description;
+
+    var hasTitle = isTextFilled(title);
+    var hasDescription = isTextFilled(description);
+    var titleElement = /*#__PURE__*/React.createElement("div", {
+      className: styles.title
+    }, /*#__PURE__*/React.createElement(ScreenElement, {
+      placeholder: "title",
+      emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "2ZOPe+",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Title"
+        }]
+      }),
+      emptyClassName: styles.empty,
+      isEmpty: !hasTitle
+    }, hasTitle ? /*#__PURE__*/React.createElement(Transitions, {
+      transitions: transitions,
+      playing: transitionPlaying,
+      delay: transitionStagger * itemI,
+      disabled: transitionDisabled
+    }, /*#__PURE__*/React.createElement(Heading, title)) : null));
+    var descriptionElement = /*#__PURE__*/React.createElement("div", {
+      className: styles.description
+    }, /*#__PURE__*/React.createElement(ScreenElement, {
+      placeholder: "text",
+      emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "507VAi",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Description"
+        }]
+      }),
+      emptyClassName: styles.empty,
+      isEmpty: !hasDescription
+    }, hasDescription ? /*#__PURE__*/React.createElement(Transitions, {
+      transitions: transitions,
+      playing: transitionPlaying,
+      delay: transitionStagger * itemI,
+      disabled: transitionDisabled
+    }, /*#__PURE__*/React.createElement(Text, description)) : null));
+    var rankText = "".concat(ascending ? itemI + 1 : itemsCount - itemI);
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.item,
+      key: "item-".concat(itemI)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.rank
+    }, isPlaceholder ? rankText : /*#__PURE__*/React.createElement(Transitions, {
+      transitions: transitions,
+      playing: transitionPlaying,
+      delay: transitionStagger * itemI,
+      disabled: transitionDisabled
+    }, /*#__PURE__*/React.createElement(Text, {
+      className: styles.rankText,
+      body: rankText,
+      textStyle: numbersStyle
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: styles.content
+    }, titleElement, descriptionElement));
+  }); // Call to Action
+
+  var hasCallToAction = callToAction !== null && callToAction.active === true;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      scrolledBottom = _useState2[0],
+      setScrolledBottom = _useState2[1];
+
+  var _useResizeObserver = useResizeObserver(),
+      callToActionRef = _useResizeObserver.ref,
+      callToActionRect = _useResizeObserver.entry.contentRect;
+
+  var _ref3 = callToActionRect || {},
+      _ref3$height = _ref3.height,
+      callToActionHeight = _ref3$height === void 0 ? 0 : _ref3$height;
+
+  if (hasCallToAction) {
+    elements.push( /*#__PURE__*/React.createElement("div", {
+      key: "call-to-action-spacer",
+      style: {
+        height: callToActionHeight
+      }
+    }));
+  }
+
+  var onScrolledBottom = useCallback(function (_ref4) {
+    var initial = _ref4.initial;
+
+    if (initial) {
+      trackScreenEvent('scroll', 'Screen');
+    }
+
+    setScrolledBottom(true);
+  }, [trackScreenEvent]);
+  var onScrolledNotBottom = useCallback(function () {
+    setScrolledBottom(false);
+  }, [setScrolledBottom]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles.container, (_ref5 = {}, _defineProperty(_ref5, className, className !== null), _defineProperty(_ref5, styles["".concat(layout, "Layout")], layout !== null), _defineProperty(_ref5, styles.isPlaceholder, isPlaceholder), _ref5)]),
+    "data-screen-ready": true
+  }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, Object.assign({}, background, {
+    width: width,
+    height: height,
+    playing: backgroundPlaying
+  })) : null, /*#__PURE__*/React.createElement(Container, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React.createElement(Scroll, {
+    className: styles.scroll,
+    verticalAlign: "middle",
+    disabled: scrollingDisabled,
+    onScrolledBottom: onScrolledBottom,
+    onScrolledNotBottom: onScrolledNotBottom
+  }, /*#__PURE__*/React.createElement(Layout, {
+    className: styles.layout,
+    style: !isPlaceholder ? {
+      padding: spacing,
+      paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
+    } : null
+  }, elements)), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement(CallToAction, {
+    ref: callToActionRef,
+    className: styles.callToAction,
+    disabled: !scrolledBottom,
+    animationDisabled: isPreview,
+    callToAction: callToAction
+  }) : null));
+};
+
+RankingScreen.propTypes = propTypes;
+RankingScreen.defaultProps = defaultProps;
+
+var transform = function transform(newStory, _ref) {
+  var _ref$items = _ref.items,
+      items = _ref$items === void 0 ? [] : _ref$items,
+      _ref$ascending = _ref.ascending,
+      ascending = _ref$ascending === void 0 ? false : _ref$ascending;
+  var allItems = items || [];
+  var ordered = ascending ? allItems.reverse() : allItems;
+  var list = ordered.reduce(function (acc, it) {
+    var _Text = Text$1(acc.story, it.title),
+        titleStory = _Text.story,
+        titleComponent = _Text.component;
+
+    var _Text2 = Text$1(titleStory, it.description),
+        descriptionStory = _Text2.story,
+        descriptionComponent = _Text2.component;
+
+    var _Container = Container$1(descriptionStory, [].concat(_toConsumableArray(titleComponent ? [titleComponent] : []), _toConsumableArray(descriptionComponent ? [descriptionComponent] : []))),
+        containerStory = _Container.story,
+        containerComponent = _Container.component;
+
+    return {
+      story: containerStory,
+      components: [].concat(_toConsumableArray(acc.components || []), _toConsumableArray(containerComponent ? [containerComponent] : []))
+    };
+  }, {
+    story: newStory,
+    components: []
+  });
+
+  var _ref2 = list || {},
+      reducedStory = _ref2.story,
+      _ref2$components = _ref2.components,
+      reducedComponents = _ref2$components === void 0 ? [] : _ref2$components;
+
+  var _Container2 = Container$1(reducedStory, reducedComponents),
+      bigContainerStory = _Container2.story,
+      bigContainerComponent = _Container2.component;
+
+  return _objectSpread(_objectSpread({}, bigContainerStory), {}, {
+    components: [].concat(_toConsumableArray(newStory.components || []), _toConsumableArray(bigContainerComponent ? [bigContainerComponent] : []))
+  });
+};
+
+// eslint-disable-next-line
+
+var transforms = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    appleNews: transform
+});
+
+var definition = {
+  id: 'ranking',
+  type: 'screen',
+  group: {
+    label: defineMessage({
+      "id": "cGItoy",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "List"
+      }]
+    }),
+    order: 8
+  },
+  title: defineMessage({
+    "id": "17BMn2",
+    "defaultMessage": [{
+      "type": 0,
+      "value": "Ranking"
+    }]
+  }),
+  component: RankingScreen,
+  layouts: ['side', 'over'],
+  transforms: transforms,
+  fields: [{
+    name: 'layout',
+    type: 'screen-layout',
+    defaultValue: 'side',
+    label: defineMessage({
+      "id": "4iBXj2",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Layout"
+      }]
+    })
+  }, {
+    name: 'items',
+    type: 'entries',
+    theme: {
+      title: {
+        textStyle: 'heading2'
+      },
+      description: {
+        textStyle: 'text'
+      }
+    },
+    label: defineMessage({
+      "id": "sESmah",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Entries"
+      }]
+    })
+  }, {
+    name: 'ascending',
+    type: 'toggle',
+    label: defineMessage({
+      "id": "9DhYaZ",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Ascending"
+      }]
+    })
+  }, {
+    name: 'numbersStyle',
+    type: 'text-style',
+    theme: {
+      textStyle: 'heading1'
+    },
+    label: defineMessage({
+      "id": "UdrdRF",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Numbers style"
+      }]
+    })
+  }, {
+    name: 'background',
+    type: 'background',
+    label: defineMessage({
+      "id": "+MPZRu",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Background"
+      }]
+    })
+  }, {
+    name: 'callToAction',
+    type: 'call-to-action',
+    theme: {
+      label: {
+        textStyle: 'heading2'
+      }
+    }
+  }]
+};
+
+export default definition;
+export { RankingScreen };

package/lib/index.js

@@ -0,0 +1,400 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactIntl = require('react-intl');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var React = require('react');
+var PropTypes = require('prop-types');
+var classNames = require('classnames');
+var core = require('@micromag/core');
+var components = require('@micromag/core/components');
+var contexts = require('@micromag/core/contexts');
+var hooks = require('@micromag/core/hooks');
+var utils = require('@micromag/core/utils');
+var Background = require('@micromag/element-background');
+var Container = require('@micromag/element-container');
+var Layout = require('@micromag/element-layout');
+var Text = require('@micromag/element-text');
+var Heading = require('@micromag/element-heading');
+var Scroll = require('@micromag/element-scroll');
+var CallToAction = require('@micromag/element-call-to-action');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var appleNews = require('@micromag/transforms/apple-news');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
+var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
+var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
+var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
+var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
+var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
+var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
+var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
+var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
+
+var styles = {"container":"micromag-screen-ranking-container","empty":"micromag-screen-ranking-empty","item":"micromag-screen-ranking-item","rankText":"micromag-screen-ranking-rankText","description":"micromag-screen-ranking-description","title":"micromag-screen-ranking-title","callToAction":"micromag-screen-ranking-callToAction","sideLayout":"micromag-screen-ranking-sideLayout","layout":"micromag-screen-ranking-layout","content":"micromag-screen-ranking-content","rank":"micromag-screen-ranking-rank","isPlaceholder":"micromag-screen-ranking-isPlaceholder","scroll":"micromag-screen-ranking-scroll"};
+
+var propTypes = {
+  layout: PropTypes__default['default'].oneOf(['side', 'over']),
+  items: PropTypes__default['default'].arrayOf(core.PropTypes.textElement),
+  numbersStyle: core.PropTypes.textStyle,
+  ascending: PropTypes__default['default'].bool,
+  spacing: PropTypes__default['default'].number,
+  background: core.PropTypes.backgroundElement,
+  callToAction: core.PropTypes.callToAction,
+  current: PropTypes__default['default'].bool,
+  transitions: core.PropTypes.transitions,
+  transitionStagger: PropTypes__default['default'].number,
+  type: PropTypes__default['default'].string,
+  className: PropTypes__default['default'].string
+};
+var defaultProps = {
+  layout: 'side',
+  items: [null],
+  numbersStyle: null,
+  ascending: false,
+  spacing: 20,
+  background: null,
+  callToAction: null,
+  current: true,
+  transitions: null,
+  transitionStagger: 75,
+  type: null,
+  className: null
+};
+
+var RankingScreen = function RankingScreen(_ref) {
+  var _ref5;
+
+  var layout = _ref.layout,
+      items = _ref.items,
+      numbersStyle = _ref.numbersStyle,
+      ascending = _ref.ascending,
+      spacing = _ref.spacing,
+      background = _ref.background,
+      callToAction = _ref.callToAction,
+      current = _ref.current,
+      transitions = _ref.transitions,
+      transitionStagger = _ref.transitionStagger,
+      type = _ref.type,
+      className = _ref.className;
+  var trackScreenEvent = hooks.useTrackScreenEvent(type);
+
+  var _useScreenSize = contexts.useScreenSize(),
+      width = _useScreenSize.width,
+      height = _useScreenSize.height,
+      menuOverScreen = _useScreenSize.menuOverScreen;
+
+  var _useViewer = contexts.useViewer(),
+      menuSize = _useViewer.menuSize;
+
+  var _useScreenRenderConte = contexts.useScreenRenderContext(),
+      isView = _useScreenRenderConte.isView,
+      isPreview = _useScreenRenderConte.isPreview,
+      isPlaceholder = _useScreenRenderConte.isPlaceholder,
+      isEdit = _useScreenRenderConte.isEdit,
+      isStatic = _useScreenRenderConte.isStatic,
+      isCapture = _useScreenRenderConte.isCapture;
+
+  var finalItems = isPlaceholder ? _toConsumableArray__default['default'](new Array(10)).map(function () {
+    return {};
+  }) : items || [null];
+  var itemsCount = finalItems !== null ? finalItems.length : 0;
+  var transitionPlaying = current;
+  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
+  var scrollingDisabled = !isEdit && transitionDisabled || !current;
+  var backgroundPlaying = current && (isView || isEdit);
+  var elements = (finalItems || []).map(function (item, itemI) {
+    var _ref2 = item || {},
+        _ref2$title = _ref2.title,
+        title = _ref2$title === void 0 ? null : _ref2$title,
+        _ref2$description = _ref2.description,
+        description = _ref2$description === void 0 ? null : _ref2$description;
+
+    var hasTitle = utils.isTextFilled(title);
+    var hasDescription = utils.isTextFilled(description);
+    var titleElement = /*#__PURE__*/React__default['default'].createElement("div", {
+      className: styles.title
+    }, /*#__PURE__*/React__default['default'].createElement(components.ScreenElement, {
+      placeholder: "title",
+      emptyLabel: /*#__PURE__*/React__default['default'].createElement(reactIntl.FormattedMessage, {
+        id: "2ZOPe+",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Title"
+        }]
+      }),
+      emptyClassName: styles.empty,
+      isEmpty: !hasTitle
+    }, hasTitle ? /*#__PURE__*/React__default['default'].createElement(components.Transitions, {
+      transitions: transitions,
+      playing: transitionPlaying,
+      delay: transitionStagger * itemI,
+      disabled: transitionDisabled
+    }, /*#__PURE__*/React__default['default'].createElement(Heading__default['default'], title)) : null));
+    var descriptionElement = /*#__PURE__*/React__default['default'].createElement("div", {
+      className: styles.description
+    }, /*#__PURE__*/React__default['default'].createElement(components.ScreenElement, {
+      placeholder: "text",
+      emptyLabel: /*#__PURE__*/React__default['default'].createElement(reactIntl.FormattedMessage, {
+        id: "507VAi",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Description"
+        }]
+      }),
+      emptyClassName: styles.empty,
+      isEmpty: !hasDescription
+    }, hasDescription ? /*#__PURE__*/React__default['default'].createElement(components.Transitions, {
+      transitions: transitions,
+      playing: transitionPlaying,
+      delay: transitionStagger * itemI,
+      disabled: transitionDisabled
+    }, /*#__PURE__*/React__default['default'].createElement(Text__default['default'], description)) : null));
+    var rankText = "".concat(ascending ? itemI + 1 : itemsCount - itemI);
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      className: styles.item,
+      key: "item-".concat(itemI)
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: styles.rank
+    }, isPlaceholder ? rankText : /*#__PURE__*/React__default['default'].createElement(components.Transitions, {
+      transitions: transitions,
+      playing: transitionPlaying,
+      delay: transitionStagger * itemI,
+      disabled: transitionDisabled
+    }, /*#__PURE__*/React__default['default'].createElement(Text__default['default'], {
+      className: styles.rankText,
+      body: rankText,
+      textStyle: numbersStyle
+    }))), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: styles.content
+    }, titleElement, descriptionElement));
+  }); // Call to Action
+
+  var hasCallToAction = callToAction !== null && callToAction.active === true;
+
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray__default['default'](_useState, 2),
+      scrolledBottom = _useState2[0],
+      setScrolledBottom = _useState2[1];
+
+  var _useResizeObserver = hooks.useResizeObserver(),
+      callToActionRef = _useResizeObserver.ref,
+      callToActionRect = _useResizeObserver.entry.contentRect;
+
+  var _ref3 = callToActionRect || {},
+      _ref3$height = _ref3.height,
+      callToActionHeight = _ref3$height === void 0 ? 0 : _ref3$height;
+
+  if (hasCallToAction) {
+    elements.push( /*#__PURE__*/React__default['default'].createElement("div", {
+      key: "call-to-action-spacer",
+      style: {
+        height: callToActionHeight
+      }
+    }));
+  }
+
+  var onScrolledBottom = React.useCallback(function (_ref4) {
+    var initial = _ref4.initial;
+
+    if (initial) {
+      trackScreenEvent('scroll', 'Screen');
+    }
+
+    setScrolledBottom(true);
+  }, [trackScreenEvent]);
+  var onScrolledNotBottom = React.useCallback(function () {
+    setScrolledBottom(false);
+  }, [setScrolledBottom]);
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: classNames__default['default']([styles.container, (_ref5 = {}, _defineProperty__default['default'](_ref5, className, className !== null), _defineProperty__default['default'](_ref5, styles["".concat(layout, "Layout")], layout !== null), _defineProperty__default['default'](_ref5, styles.isPlaceholder, isPlaceholder), _ref5)]),
+    "data-screen-ready": true
+  }, !isPlaceholder ? /*#__PURE__*/React__default['default'].createElement(Background__default['default'], Object.assign({}, background, {
+    width: width,
+    height: height,
+    playing: backgroundPlaying
+  })) : null, /*#__PURE__*/React__default['default'].createElement(Container__default['default'], {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React__default['default'].createElement(Scroll__default['default'], {
+    className: styles.scroll,
+    verticalAlign: "middle",
+    disabled: scrollingDisabled,
+    onScrolledBottom: onScrolledBottom,
+    onScrolledNotBottom: onScrolledNotBottom
+  }, /*#__PURE__*/React__default['default'].createElement(Layout__default['default'], {
+    className: styles.layout,
+    style: !isPlaceholder ? {
+      padding: spacing,
+      paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
+    } : null
+  }, elements)), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default['default'].createElement(CallToAction__default['default'], {
+    ref: callToActionRef,
+    className: styles.callToAction,
+    disabled: !scrolledBottom,
+    animationDisabled: isPreview,
+    callToAction: callToAction
+  }) : null));
+};
+
+RankingScreen.propTypes = propTypes;
+RankingScreen.defaultProps = defaultProps;
+
+var transform = function transform(newStory, _ref) {
+  var _ref$items = _ref.items,
+      items = _ref$items === void 0 ? [] : _ref$items,
+      _ref$ascending = _ref.ascending,
+      ascending = _ref$ascending === void 0 ? false : _ref$ascending;
+  var allItems = items || [];
+  var ordered = ascending ? allItems.reverse() : allItems;
+  var list = ordered.reduce(function (acc, it) {
+    var _Text = appleNews.Text(acc.story, it.title),
+        titleStory = _Text.story,
+        titleComponent = _Text.component;
+
+    var _Text2 = appleNews.Text(titleStory, it.description),
+        descriptionStory = _Text2.story,
+        descriptionComponent = _Text2.component;
+
+    var _Container = appleNews.Container(descriptionStory, [].concat(_toConsumableArray__default['default'](titleComponent ? [titleComponent] : []), _toConsumableArray__default['default'](descriptionComponent ? [descriptionComponent] : []))),
+        containerStory = _Container.story,
+        containerComponent = _Container.component;
+
+    return {
+      story: containerStory,
+      components: [].concat(_toConsumableArray__default['default'](acc.components || []), _toConsumableArray__default['default'](containerComponent ? [containerComponent] : []))
+    };
+  }, {
+    story: newStory,
+    components: []
+  });
+
+  var _ref2 = list || {},
+      reducedStory = _ref2.story,
+      _ref2$components = _ref2.components,
+      reducedComponents = _ref2$components === void 0 ? [] : _ref2$components;
+
+  var _Container2 = appleNews.Container(reducedStory, reducedComponents),
+      bigContainerStory = _Container2.story,
+      bigContainerComponent = _Container2.component;
+
+  return _objectSpread__default['default'](_objectSpread__default['default']({}, bigContainerStory), {}, {
+    components: [].concat(_toConsumableArray__default['default'](newStory.components || []), _toConsumableArray__default['default'](bigContainerComponent ? [bigContainerComponent] : []))
+  });
+};
+
+// eslint-disable-next-line
+
+var transforms = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    appleNews: transform
+});
+
+var definition = {
+  id: 'ranking',
+  type: 'screen',
+  group: {
+    label: reactIntl.defineMessage({
+      "id": "cGItoy",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "List"
+      }]
+    }),
+    order: 8
+  },
+  title: reactIntl.defineMessage({
+    "id": "17BMn2",
+    "defaultMessage": [{
+      "type": 0,
+      "value": "Ranking"
+    }]
+  }),
+  component: RankingScreen,
+  layouts: ['side', 'over'],
+  transforms: transforms,
+  fields: [{
+    name: 'layout',
+    type: 'screen-layout',
+    defaultValue: 'side',
+    label: reactIntl.defineMessage({
+      "id": "4iBXj2",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Layout"
+      }]
+    })
+  }, {
+    name: 'items',
+    type: 'entries',
+    theme: {
+      title: {
+        textStyle: 'heading2'
+      },
+      description: {
+        textStyle: 'text'
+      }
+    },
+    label: reactIntl.defineMessage({
+      "id": "sESmah",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Entries"
+      }]
+    })
+  }, {
+    name: 'ascending',
+    type: 'toggle',
+    label: reactIntl.defineMessage({
+      "id": "9DhYaZ",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Ascending"
+      }]
+    })
+  }, {
+    name: 'numbersStyle',
+    type: 'text-style',
+    theme: {
+      textStyle: 'heading1'
+    },
+    label: reactIntl.defineMessage({
+      "id": "UdrdRF",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Numbers style"
+      }]
+    })
+  }, {
+    name: 'background',
+    type: 'background',
+    label: reactIntl.defineMessage({
+      "id": "+MPZRu",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Background"
+      }]
+    })
+  }, {
+    name: 'callToAction',
+    type: 'call-to-action',
+    theme: {
+      label: {
+        textStyle: 'heading2'
+      }
+    }
+  }]
+};
+
+exports.RankingScreen = RankingScreen;
+exports.default = definition;

package/package.json

@@ -0,0 +1,72 @@
+{
+    "name": "@micromag/screen-ranking",
+    "version": "0.2.286",
+    "description": "",
+    "keywords": [
+        "javascript"
+    ],
+    "homepage": "https://github.com/urbania-media/micromag-js",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/urbania-media/micromag-js.git"
+    },
+    "author": {
+        "name": "Folklore",
+        "email": "info@folklore.email"
+    },
+    "contributors": [
+        {
+            "name": "David Mongeau-Petitpas",
+            "email": "dmp@folklore.email"
+        },
+        {
+            "name": "Nicolas Roy-Bourdages",
+            "email": "nrb@folklore.email"
+        },
+        {
+            "name": "Julien Carignan",
+            "email": "jc@folklore.email"
+        }
+    ],
+    "license": "ISC",
+    "main": "lib/index.js",
+    "module": "es/index.js",
+    "files": [
+        "lib",
+        "es",
+        "assets"
+    ],
+    "scripts": {
+        "prepare": "../../scripts/prepare-package.sh"
+    },
+    "devDependencies": {
+        "react": "^16.8.0",
+        "react-dom": "^16.8.0"
+    },
+    "peerDependencies": {
+        "react": "^16.8.0",
+        "react-dom": "^16.8.0"
+    },
+    "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@micromag/core": "^0.2.286",
+        "@micromag/data": "^0.2.286",
+        "@micromag/element-background": "^0.2.286",
+        "@micromag/element-call-to-action": "^0.2.286",
+        "@micromag/element-container": "^0.2.286",
+        "@micromag/element-heading": "^0.2.286",
+        "@micromag/element-layout": "^0.2.286",
+        "@micromag/element-scroll": "^0.2.286",
+        "@micromag/element-text": "^0.2.286",
+        "@micromag/transforms": "^0.2.286",
+        "classnames": "^2.2.6",
+        "lodash": "^4.17.20",
+        "prop-types": "^15.7.2",
+        "react-intl": "^5.12.1",
+        "uuid": "^8.3.2"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "gitHead": "380a52b4b3f57dc2535014af6241032f09055d40"
+}