@micromag/screen-timeline 0.3.410 → 0.3.416

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-screen-timeline-container .micromag-screen-timeline-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-timeline-container .micromag-screen-timeline-empty{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-timeline-container{position:relative}.micromag-screen-timeline-container .micromag-screen-timeline-background{z-index:0}.micromag-screen-timeline-container .micromag-screen-timeline-content{z-index:1}.micromag-screen-timeline-container .micromag-screen-timeline-empty{height:50px;margin-right:10px}.micromag-screen-timeline-container .micromag-screen-timeline-item{position:relative}.micromag-screen-timeline-container .micromag-screen-timeline-element{display:-ms-flexbox;display:flex}.micromag-screen-timeline-container .micromag-screen-timeline-element.micromag-screen-timeline-hidden .micromag-screen-timeline-body{display:none;visibility:hidden}.micromag-screen-timeline-container .micromag-screen-timeline-timeline{-ms-flex-negative:0;-ms-flex-align:center;align-items:center;-webkit-box-sizing:content-box;box-sizing:content-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;flex-shrink:0;padding-right:20px;width:15px}.micromag-screen-timeline-container .micromag-screen-timeline-line{-ms-flex-positive:1;flex-grow:1;width:1px}.micromag-screen-timeline-container .micromag-screen-timeline-line.micromag-screen-timeline-hidden{width:auto}.micromag-screen-timeline-container .micromag-screen-timeline-bullet{border-style:solid;border-width:1px;height:15px;margin:2px 0;width:15px}.micromag-screen-timeline-container .micromag-screen-timeline-body{-ms-flex-positive:1;flex-grow:1}.micromag-screen-timeline-container .micromag-screen-timeline-body.micromag-screen-timeline-last{margin-bottom:20px}.micromag-screen-timeline-container .micromag-screen-timeline-description,.micromag-screen-timeline-container .micromag-screen-timeline-imageContainer,.micromag-screen-timeline-container .micromag-screen-timeline-title{padding:8px 0}.micromag-screen-timeline-container .micromag-screen-timeline-image,.micromag-screen-timeline-container .micromag-screen-timeline-imageContainer,.micromag-screen-timeline-container .micromag-screen-timeline-video{position:relative}.micromag-screen-timeline-container .micromag-screen-timeline-imageContainer{overflow:hidden}.micromag-screen-timeline-container .micromag-screen-timeline-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-timeline-container .micromag-screen-timeline-callToAction a{padding:0}.micromag-screen-timeline-container .micromag-screen-timeline-callToAction.micromag-screen-timeline-disabled{opacity:0;pointer-events:none}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-scroll{padding:10px}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-timeline{padding-right:0}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-bullet{background-color:hsla(0,0%,100%,.6);border-color:hsla(0,0%,100%,.6);height:10px;mix-blend-mode:difference;width:10px}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-body.micromag-screen-timeline-last{margin-bottom:4px}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-description,.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-imageContainer,.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-title{-ms-flex-pack:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;justify-content:center;padding:2px 0}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-line{background-color:hsla(0,0%,100%,.6);mix-blend-mode:difference}.micromag-screen-timeline-container.micromag-screen-timeline-circleBulletShape .micromag-screen-timeline-bullet{border-radius:50%}.micromag-screen-timeline-container.micromag-screen-timeline-withoutLines .micromag-screen-timeline-timeline{visibility:hidden}
+.micromag-screen-timeline-container .micromag-screen-timeline-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-timeline-container .micromag-screen-timeline-empty{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-timeline-container{position:relative}.micromag-screen-timeline-container .micromag-screen-timeline-background{z-index:0}.micromag-screen-timeline-container .micromag-screen-timeline-content{z-index:1}.micromag-screen-timeline-container .micromag-screen-timeline-empty{height:50px;margin-right:10px}.micromag-screen-timeline-container .micromag-screen-timeline-emptyTitle{width:100%}.micromag-screen-timeline-container .micromag-screen-timeline-item{position:relative}.micromag-screen-timeline-container .micromag-screen-timeline-element{display:-ms-flexbox;display:flex}.micromag-screen-timeline-container .micromag-screen-timeline-element.micromag-screen-timeline-hidden .micromag-screen-timeline-body{display:none;visibility:hidden}.micromag-screen-timeline-container .micromag-screen-timeline-timeline{-ms-flex-negative:0;-ms-flex-align:center;align-items:center;-webkit-box-sizing:content-box;box-sizing:content-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;flex-shrink:0;padding-right:20px;width:15px}.micromag-screen-timeline-container .micromag-screen-timeline-line{-ms-flex-positive:1;flex-grow:1;width:1px}.micromag-screen-timeline-container .micromag-screen-timeline-line.micromag-screen-timeline-hidden{width:auto}.micromag-screen-timeline-container .micromag-screen-timeline-bullet{border-style:solid;border-width:1px;height:15px;margin:2px 0;width:15px}.micromag-screen-timeline-container .micromag-screen-timeline-body{-ms-flex-positive:1;flex-grow:1}.micromag-screen-timeline-container .micromag-screen-timeline-body.micromag-screen-timeline-last{margin-bottom:20px}.micromag-screen-timeline-container .micromag-screen-timeline-description,.micromag-screen-timeline-container .micromag-screen-timeline-imageContainer,.micromag-screen-timeline-container .micromag-screen-timeline-title{padding:8px 0}.micromag-screen-timeline-container .micromag-screen-timeline-image,.micromag-screen-timeline-container .micromag-screen-timeline-imageContainer,.micromag-screen-timeline-container .micromag-screen-timeline-video{position:relative}.micromag-screen-timeline-container .micromag-screen-timeline-imageContainer{overflow:hidden}.micromag-screen-timeline-container .micromag-screen-timeline-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-timeline-container .micromag-screen-timeline-callToAction a{padding:0}.micromag-screen-timeline-container .micromag-screen-timeline-callToAction.micromag-screen-timeline-disabled{opacity:0;pointer-events:none}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-scroll{padding:10px}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-timeline{padding-right:0}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-bullet{background-color:hsla(0,0%,100%,.6);border-color:hsla(0,0%,100%,.6);height:10px;mix-blend-mode:difference;width:10px}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-body.micromag-screen-timeline-last{margin-bottom:4px}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-description,.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-imageContainer,.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-title{-ms-flex-pack:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;justify-content:center;padding:2px 0}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-line{background-color:hsla(0,0%,100%,.6);mix-blend-mode:difference}.micromag-screen-timeline-container.micromag-screen-timeline-circleBulletShape .micromag-screen-timeline-bullet{border-radius:50%}.micromag-screen-timeline-container.micromag-screen-timeline-withoutLines .micromag-screen-timeline-timeline{visibility:hidden}

package/es/index.js

@@ -24,10 +24,11 @@ import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructurin
 import _extends from '@babel/runtime/helpers/extends';
 import { Text as Text$1, Container as Container$1 } from '@micromag/transforms/apple-news';
 
-var styles = {"container":"micromag-screen-timeline-container","background":"micromag-screen-timeline-background","empty":"micromag-screen-timeline-empty","content":"micromag-screen-timeline-content","item":"micromag-screen-timeline-item","element":"micromag-screen-timeline-element","hidden":"micromag-screen-timeline-hidden","body":"micromag-screen-timeline-body","timeline":"micromag-screen-timeline-timeline","line":"micromag-screen-timeline-line","bullet":"micromag-screen-timeline-bullet","last":"micromag-screen-timeline-last","title":"micromag-screen-timeline-title","description":"micromag-screen-timeline-description","imageContainer":"micromag-screen-timeline-imageContainer","image":"micromag-screen-timeline-image","video":"micromag-screen-timeline-video","callToAction":"micromag-screen-timeline-callToAction","disabled":"micromag-screen-timeline-disabled","isPlaceholder":"micromag-screen-timeline-isPlaceholder","scroll":"micromag-screen-timeline-scroll","circleBulletShape":"micromag-screen-timeline-circleBulletShape","withoutLines":"micromag-screen-timeline-withoutLines"};
+var styles = {"container":"micromag-screen-timeline-container","background":"micromag-screen-timeline-background","empty":"micromag-screen-timeline-empty","content":"micromag-screen-timeline-content","emptyTitle":"micromag-screen-timeline-emptyTitle","item":"micromag-screen-timeline-item","element":"micromag-screen-timeline-element","hidden":"micromag-screen-timeline-hidden","body":"micromag-screen-timeline-body","timeline":"micromag-screen-timeline-timeline","line":"micromag-screen-timeline-line","bullet":"micromag-screen-timeline-bullet","last":"micromag-screen-timeline-last","title":"micromag-screen-timeline-title","description":"micromag-screen-timeline-description","imageContainer":"micromag-screen-timeline-imageContainer","image":"micromag-screen-timeline-image","video":"micromag-screen-timeline-video","callToAction":"micromag-screen-timeline-callToAction","disabled":"micromag-screen-timeline-disabled","isPlaceholder":"micromag-screen-timeline-isPlaceholder","scroll":"micromag-screen-timeline-scroll","circleBulletShape":"micromag-screen-timeline-circleBulletShape","withoutLines":"micromag-screen-timeline-withoutLines"};
 
 var propTypes = {
   layout: PropTypes.oneOf(['normal', 'title-description-image', 'title-image-description', 'image-title-description']),
+  title: PropTypes$1.headingElement,
   items: PropTypes.arrayOf(PropTypes$1.textElement),
   bulletColor: PropTypes$1.color,
   lineColor: PropTypes$1.color,
@@ -40,13 +41,12 @@ var propTypes = {
   background: PropTypes$1.backgroundElement,
   current: PropTypes.bool,
   active: PropTypes.bool,
-  // transitions: MicromagPropTypes.transitions,
-  // transitionStagger: PropTypes.number,
   type: PropTypes.string,
   className: PropTypes.string
 };
 var defaultProps = {
   layout: 'normal',
+  title: null,
   items: [null],
   bulletColor: null,
   lineColor: null,
@@ -59,14 +59,13 @@ var defaultProps = {
   background: null,
   current: true,
   active: true,
-  // transitions: null,
-  // transitionStagger: 75,
   type: null,
   className: null
 };
 var Timeline = function Timeline(_ref) {
   var _ref10;
   var layout = _ref.layout,
+    title = _ref.title,
     items = _ref.items,
     bulletColor = _ref.bulletColor,
     lineColor = _ref.lineColor,
@@ -107,6 +106,7 @@ var Timeline = function Timeline(_ref) {
       return {};
     }) : items || [null];
   }, [isPlaceholder, items]);
+  var hasTitle = isTextFilled(title);
   var itemsCount = finalItems !== null ? finalItems.length : 0;
   var hasItems = finalItems !== null && itemsCount;
   var imagesCount = hasItems ? finalItems.reduce(function (acc, curr) {
@@ -142,12 +142,12 @@ var Timeline = function Timeline(_ref) {
   var timelineElements = (finalItems || []).map(function (item, itemI) {
     var _ref3 = item || {},
       _ref3$title = _ref3.title,
-      title = _ref3$title === void 0 ? null : _ref3$title,
+      itemTitle = _ref3$title === void 0 ? null : _ref3$title,
       _ref3$description = _ref3.description,
       description = _ref3$description === void 0 ? null : _ref3$description,
       _ref3$image = _ref3.image,
       image = _ref3$image === void 0 ? null : _ref3$image;
-    var hasTitle = isTextFilled(title);
+    var hasItemTitle = isTextFilled(itemTitle);
     var hasDescription = isTextFilled(description);
     var hasImage = image !== null;
     var elementsTypes = (layout === 'normal' ? 'title-description-image' : layout).split('-');
@@ -167,21 +167,21 @@ var Timeline = function Timeline(_ref) {
       var hasElement = false;
       switch (elementType) {
         case 'title':
-          hasElement = hasTitle;
+          hasElement = hasItemTitle;
           elementContent = /*#__PURE__*/React.createElement("div", {
             className: styles.title
           }, /*#__PURE__*/React.createElement(ScreenElement, {
             placeholder: "title",
             emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-              id: "2ZOPe+",
+              id: "bmO4Ss",
               defaultMessage: [{
                 "type": 0,
-                "value": "Title"
+                "value": "Entry Title"
               }]
             }),
             emptyClassName: styles.empty,
-            isEmpty: !hasTitle
-          }, hasTitle ? /*#__PURE__*/React.createElement(Heading, title) : null));
+            isEmpty: !hasItemTitle
+          }, hasItemTitle ? /*#__PURE__*/React.createElement(Heading, itemTitle) : null));
           break;
         case 'image':
           hasElement = hasImage;
@@ -311,7 +311,20 @@ var Timeline = function Timeline(_ref) {
     style: {
       paddingBottom: spacing
     }
-  }, /*#__PURE__*/React.createElement(Header, header)) : null, timelineElements)), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(ScreenElement, {
+    placeholder: "Title",
+    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "BSTWf8",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Title"
+      }]
+    }),
+    emptyClassName: classNames([styles.empty, styles.emptyTitle]),
+    isEmpty: !hasTitle
+  }, hasTitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({
+    className: styles.title
+  }, title)) : null), timelineElements)), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
     ref: footerRef,
     className: classNames([styles.callToAction, _defineProperty({}, styles.disabled, !scrolledBottom)]),
     style: {
@@ -409,6 +422,20 @@ var definition = [{
   layouts: ['normal'],
   transforms: transforms,
   fields: [{
+    name: 'title',
+    type: 'heading-element',
+    // inline: true,
+    theme: {
+      textStyle: 'heading1'
+    },
+    label: defineMessage({
+      id: "N25iDO",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Title"
+      }]
+    })
+  }, {
     name: 'items',
     type: 'entries',
     theme: {
@@ -565,6 +592,20 @@ var definition = [{
   component: TimelineIllustratedScreen,
   layouts: ['title-image-description', 'title-description-image', 'image-title-description'],
   fields: [{
+    name: 'title',
+    type: 'heading-element',
+    // inline: true,
+    theme: {
+      textStyle: 'heading1'
+    },
+    label: defineMessage({
+      id: "N25iDO",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Title"
+      }]
+    })
+  }, {
     name: 'layout',
     type: 'screen-layout',
     defaultValue: 'title-image-description',

package/lib/index.js

@@ -49,10 +49,11 @@ var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
 var _objectDestructuringEmpty__default = /*#__PURE__*/_interopDefaultLegacy(_objectDestructuringEmpty);
 var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 
-var styles = {"container":"micromag-screen-timeline-container","background":"micromag-screen-timeline-background","empty":"micromag-screen-timeline-empty","content":"micromag-screen-timeline-content","item":"micromag-screen-timeline-item","element":"micromag-screen-timeline-element","hidden":"micromag-screen-timeline-hidden","body":"micromag-screen-timeline-body","timeline":"micromag-screen-timeline-timeline","line":"micromag-screen-timeline-line","bullet":"micromag-screen-timeline-bullet","last":"micromag-screen-timeline-last","title":"micromag-screen-timeline-title","description":"micromag-screen-timeline-description","imageContainer":"micromag-screen-timeline-imageContainer","image":"micromag-screen-timeline-image","video":"micromag-screen-timeline-video","callToAction":"micromag-screen-timeline-callToAction","disabled":"micromag-screen-timeline-disabled","isPlaceholder":"micromag-screen-timeline-isPlaceholder","scroll":"micromag-screen-timeline-scroll","circleBulletShape":"micromag-screen-timeline-circleBulletShape","withoutLines":"micromag-screen-timeline-withoutLines"};
+var styles = {"container":"micromag-screen-timeline-container","background":"micromag-screen-timeline-background","empty":"micromag-screen-timeline-empty","content":"micromag-screen-timeline-content","emptyTitle":"micromag-screen-timeline-emptyTitle","item":"micromag-screen-timeline-item","element":"micromag-screen-timeline-element","hidden":"micromag-screen-timeline-hidden","body":"micromag-screen-timeline-body","timeline":"micromag-screen-timeline-timeline","line":"micromag-screen-timeline-line","bullet":"micromag-screen-timeline-bullet","last":"micromag-screen-timeline-last","title":"micromag-screen-timeline-title","description":"micromag-screen-timeline-description","imageContainer":"micromag-screen-timeline-imageContainer","image":"micromag-screen-timeline-image","video":"micromag-screen-timeline-video","callToAction":"micromag-screen-timeline-callToAction","disabled":"micromag-screen-timeline-disabled","isPlaceholder":"micromag-screen-timeline-isPlaceholder","scroll":"micromag-screen-timeline-scroll","circleBulletShape":"micromag-screen-timeline-circleBulletShape","withoutLines":"micromag-screen-timeline-withoutLines"};
 
 var propTypes = {
   layout: PropTypes__default["default"].oneOf(['normal', 'title-description-image', 'title-image-description', 'image-title-description']),
+  title: core.PropTypes.headingElement,
   items: PropTypes__default["default"].arrayOf(core.PropTypes.textElement),
   bulletColor: core.PropTypes.color,
   lineColor: core.PropTypes.color,
@@ -65,13 +66,12 @@ var propTypes = {
   background: core.PropTypes.backgroundElement,
   current: PropTypes__default["default"].bool,
   active: PropTypes__default["default"].bool,
-  // transitions: MicromagPropTypes.transitions,
-  // transitionStagger: PropTypes.number,
   type: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string
 };
 var defaultProps = {
   layout: 'normal',
+  title: null,
   items: [null],
   bulletColor: null,
   lineColor: null,
@@ -84,14 +84,13 @@ var defaultProps = {
   background: null,
   current: true,
   active: true,
-  // transitions: null,
-  // transitionStagger: 75,
   type: null,
   className: null
 };
 var Timeline = function Timeline(_ref) {
   var _ref10;
   var layout = _ref.layout,
+    title = _ref.title,
     items = _ref.items,
     bulletColor = _ref.bulletColor,
     lineColor = _ref.lineColor,
@@ -132,6 +131,7 @@ var Timeline = function Timeline(_ref) {
       return {};
     }) : items || [null];
   }, [isPlaceholder, items]);
+  var hasTitle = utils.isTextFilled(title);
   var itemsCount = finalItems !== null ? finalItems.length : 0;
   var hasItems = finalItems !== null && itemsCount;
   var imagesCount = hasItems ? finalItems.reduce(function (acc, curr) {
@@ -167,12 +167,12 @@ var Timeline = function Timeline(_ref) {
   var timelineElements = (finalItems || []).map(function (item, itemI) {
     var _ref3 = item || {},
       _ref3$title = _ref3.title,
-      title = _ref3$title === void 0 ? null : _ref3$title,
+      itemTitle = _ref3$title === void 0 ? null : _ref3$title,
       _ref3$description = _ref3.description,
       description = _ref3$description === void 0 ? null : _ref3$description,
       _ref3$image = _ref3.image,
       image = _ref3$image === void 0 ? null : _ref3$image;
-    var hasTitle = utils.isTextFilled(title);
+    var hasItemTitle = utils.isTextFilled(itemTitle);
     var hasDescription = utils.isTextFilled(description);
     var hasImage = image !== null;
     var elementsTypes = (layout === 'normal' ? 'title-description-image' : layout).split('-');
@@ -192,21 +192,21 @@ var Timeline = function Timeline(_ref) {
       var hasElement = false;
       switch (elementType) {
         case 'title':
-          hasElement = hasTitle;
+          hasElement = hasItemTitle;
           elementContent = /*#__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+",
+              id: "bmO4Ss",
               defaultMessage: [{
                 "type": 0,
-                "value": "Title"
+                "value": "Entry Title"
               }]
             }),
             emptyClassName: styles.empty,
-            isEmpty: !hasTitle
-          }, hasTitle ? /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], title) : null));
+            isEmpty: !hasItemTitle
+          }, hasItemTitle ? /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], itemTitle) : null));
           break;
         case 'image':
           hasElement = hasImage;
@@ -336,7 +336,20 @@ var Timeline = function Timeline(_ref) {
     style: {
       paddingBottom: spacing
     }
-  }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, timelineElements)), !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
+    placeholder: "Title",
+    emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "BSTWf8",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Title"
+      }]
+    }),
+    emptyClassName: classNames__default["default"]([styles.empty, styles.emptyTitle]),
+    isEmpty: !hasTitle
+  }, hasTitle ? /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
+    className: styles.title
+  }, title)) : null), timelineElements)), !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
     ref: footerRef,
     className: classNames__default["default"]([styles.callToAction, _defineProperty__default["default"]({}, styles.disabled, !scrolledBottom)]),
     style: {
@@ -434,6 +447,20 @@ var definition = [{
   layouts: ['normal'],
   transforms: transforms,
   fields: [{
+    name: 'title',
+    type: 'heading-element',
+    // inline: true,
+    theme: {
+      textStyle: 'heading1'
+    },
+    label: reactIntl.defineMessage({
+      id: "N25iDO",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Title"
+      }]
+    })
+  }, {
     name: 'items',
     type: 'entries',
     theme: {
@@ -590,6 +617,20 @@ var definition = [{
   component: TimelineIllustratedScreen,
   layouts: ['title-image-description', 'title-description-image', 'image-title-description'],
   fields: [{
+    name: 'title',
+    type: 'heading-element',
+    // inline: true,
+    theme: {
+      textStyle: 'heading1'
+    },
+    label: reactIntl.defineMessage({
+      id: "N25iDO",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Title"
+      }]
+    })
+  }, {
     name: 'layout',
     type: 'screen-layout',
     defaultValue: 'title-image-description',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-timeline",
-    "version": "0.3.410",
+    "version": "0.3.416",
     "private": false,
     "description": "",
     "keywords": [
@@ -71,5 +71,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "3d20200b811ff19c75de0697a4c4543101bf755b"
+    "gitHead": "4990d8fa86965538a258b8061630290f8c2d7ae6"
 }