@micromag/screen-article 0.3.619 → 0.3.624

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-screen-article-container .micromag-screen-article-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-article-container .micromag-screen-article-emptyAuthor,.micromag-screen-article-container .micromag-screen-article-emptyDate,.micromag-screen-article-container .micromag-screen-article-emptySurtitle,.micromag-screen-article-container .micromag-screen-article-emptyText,.micromag-screen-article-container .micromag-screen-article-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-article-container{position:relative}.micromag-screen-article-container .micromag-screen-article-background{z-index:0}.micromag-screen-article-container .micromag-screen-article-content{z-index:1}.micromag-screen-article-container .micromag-screen-article-layout{position:relative}.micromag-screen-article-container .micromag-screen-article-emptyAuthor,.micromag-screen-article-container .micromag-screen-article-emptyText,.micromag-screen-article-container .micromag-screen-article-emptyTitle{margin:10px auto;padding:12px 0 10px;width:100%}.micromag-screen-article-container .micromag-screen-article-emptyDate,.micromag-screen-article-container .micromag-screen-article-emptySurtitle{-ms-flex-negative:0;flex-shrink:0;padding:4px 0;width:50%}.micromag-screen-article-container .micromag-screen-article-main.micromag-screen-article-hasText{margin-bottom:30px}.micromag-screen-article-container .micromag-screen-article-visualContainer{height:auto;left:0;position:absolute;top:0;width:100%;z-index:-1}.micromag-screen-article-container .micromag-screen-article-surtitle{font-size:12px;width:100%}.micromag-screen-article-container .micromag-screen-article-date{font-size:12px;text-align:right;width:100%}.micromag-screen-article-container .micromag-screen-article-title{margin:10px 0}.micromag-screen-article-container .micromag-screen-article-text blockquote,.micromag-screen-article-container .micromag-screen-article-text h2,.micromag-screen-article-container .micromag-screen-article-text h3,.micromag-screen-article-container .micromag-screen-article-text img,.micromag-screen-article-container .micromag-screen-article-text ol,.micromag-screen-article-container .micromag-screen-article-text p,.micromag-screen-article-container .micromag-screen-article-text ul{margin-bottom:1rem}.micromag-screen-article-container .micromag-screen-article-text blockquote:last-child,.micromag-screen-article-container .micromag-screen-article-text h2:last-child,.micromag-screen-article-container .micromag-screen-article-text h3:last-child,.micromag-screen-article-container .micromag-screen-article-text img:last-child,.micromag-screen-article-container .micromag-screen-article-text ol:last-child,.micromag-screen-article-container .micromag-screen-article-text p:last-child,.micromag-screen-article-container .micromag-screen-article-text ul:last-child{margin-bottom:0}.micromag-screen-article-container .micromag-screen-article-text h2{font-size:2em}.micromag-screen-article-container .micromag-screen-article-text h3{font-size:1.5em}.micromag-screen-article-container .micromag-screen-article-text ol,.micromag-screen-article-container .micromag-screen-article-text ul{list-style-position:inside}.micromag-screen-article-container .micromag-screen-article-text blockquote{border-left:1px solid;padding-left:.5em}.micromag-screen-article-container .micromag-screen-article-topContent{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.micromag-screen-article-container .micromag-screen-article-footer{-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out}.micromag-screen-article-container .micromag-screen-article-footer a{padding:0}.micromag-screen-article-container .micromag-screen-article-footer.micromag-screen-article-disabled{opacity:0;pointer-events:none}.micromag-screen-article-container.micromag-screen-article-isPlaceholder .micromag-screen-article-layout{padding:10px}
+.micromag-screen-article-container .micromag-screen-article-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-article-container .micromag-screen-article-emptyAuthor,.micromag-screen-article-container .micromag-screen-article-emptyDate,.micromag-screen-article-container .micromag-screen-article-emptySubtitle,.micromag-screen-article-container .micromag-screen-article-emptySurtitle,.micromag-screen-article-container .micromag-screen-article-emptyText,.micromag-screen-article-container .micromag-screen-article-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-article-container{position:relative}.micromag-screen-article-container .micromag-screen-article-background{z-index:0}.micromag-screen-article-container .micromag-screen-article-content{z-index:1}.micromag-screen-article-container .micromag-screen-article-layout{position:relative}.micromag-screen-article-container .micromag-screen-article-emptyAuthor,.micromag-screen-article-container .micromag-screen-article-emptySubtitle,.micromag-screen-article-container .micromag-screen-article-emptyText,.micromag-screen-article-container .micromag-screen-article-emptyTitle{margin:10px auto;padding:12px 0 10px;width:100%}.micromag-screen-article-container .micromag-screen-article-emptyDate,.micromag-screen-article-container .micromag-screen-article-emptySurtitle{-ms-flex-negative:0;flex-shrink:0;padding:4px 0;width:50%}.micromag-screen-article-container .micromag-screen-article-main.micromag-screen-article-hasText{margin-bottom:30px}.micromag-screen-article-container .micromag-screen-article-visualContainer{height:auto;left:0;position:absolute;top:0;width:100%;z-index:-1}.micromag-screen-article-container .micromag-screen-article-surtitle{font-size:12px;width:100%}.micromag-screen-article-container .micromag-screen-article-subtitle{font-size:12px;margin:10px 0 0;width:100%}.micromag-screen-article-container .micromag-screen-article-date{font-size:12px;text-align:right;width:100%}.micromag-screen-article-container .micromag-screen-article-title{margin:10px 0}.micromag-screen-article-container .micromag-screen-article-author{width:100%}.micromag-screen-article-container .micromag-screen-article-text blockquote,.micromag-screen-article-container .micromag-screen-article-text h2,.micromag-screen-article-container .micromag-screen-article-text h3,.micromag-screen-article-container .micromag-screen-article-text img,.micromag-screen-article-container .micromag-screen-article-text ol,.micromag-screen-article-container .micromag-screen-article-text p,.micromag-screen-article-container .micromag-screen-article-text ul{margin-bottom:1rem}.micromag-screen-article-container .micromag-screen-article-text blockquote:last-child,.micromag-screen-article-container .micromag-screen-article-text h2:last-child,.micromag-screen-article-container .micromag-screen-article-text h3:last-child,.micromag-screen-article-container .micromag-screen-article-text img:last-child,.micromag-screen-article-container .micromag-screen-article-text ol:last-child,.micromag-screen-article-container .micromag-screen-article-text p:last-child,.micromag-screen-article-container .micromag-screen-article-text ul:last-child{margin-bottom:0}.micromag-screen-article-container .micromag-screen-article-text h2{font-size:2em}.micromag-screen-article-container .micromag-screen-article-text h3{font-size:1.5em}.micromag-screen-article-container .micromag-screen-article-text ol,.micromag-screen-article-container .micromag-screen-article-text ul{list-style-position:inside}.micromag-screen-article-container .micromag-screen-article-text blockquote{border-left:1px solid;padding-left:.5em}.micromag-screen-article-container .micromag-screen-article-topContent{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.micromag-screen-article-container .micromag-screen-article-footer{-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out}.micromag-screen-article-container .micromag-screen-article-footer a{padding:0}.micromag-screen-article-container .micromag-screen-article-footer.micromag-screen-article-disabled{opacity:0;pointer-events:none}.micromag-screen-article-container.micromag-screen-article-isPlaceholder .micromag-screen-article-layout{padding:10px}

package/es/index.js

@@ -21,7 +21,7 @@ import Scroll from '@micromag/element-scroll';
 import Text from '@micromag/element-text';
 import Visual from '@micromag/element-visual';
 
-var styles = {"container":"micromag-screen-article-container","background":"micromag-screen-article-background","emptySurtitle":"micromag-screen-article-emptySurtitle","emptyDate":"micromag-screen-article-emptyDate","emptyTitle":"micromag-screen-article-emptyTitle","emptyAuthor":"micromag-screen-article-emptyAuthor","emptyText":"micromag-screen-article-emptyText","content":"micromag-screen-article-content","layout":"micromag-screen-article-layout","main":"micromag-screen-article-main","hasText":"micromag-screen-article-hasText","visualContainer":"micromag-screen-article-visualContainer","surtitle":"micromag-screen-article-surtitle","date":"micromag-screen-article-date","title":"micromag-screen-article-title","text":"micromag-screen-article-text","topContent":"micromag-screen-article-topContent","footer":"micromag-screen-article-footer","disabled":"micromag-screen-article-disabled","isPlaceholder":"micromag-screen-article-isPlaceholder"};
+var styles = {"container":"micromag-screen-article-container","background":"micromag-screen-article-background","emptySurtitle":"micromag-screen-article-emptySurtitle","emptyDate":"micromag-screen-article-emptyDate","emptyTitle":"micromag-screen-article-emptyTitle","emptyAuthor":"micromag-screen-article-emptyAuthor","emptySubtitle":"micromag-screen-article-emptySubtitle","emptyText":"micromag-screen-article-emptyText","content":"micromag-screen-article-content","layout":"micromag-screen-article-layout","main":"micromag-screen-article-main","hasText":"micromag-screen-article-hasText","visualContainer":"micromag-screen-article-visualContainer","surtitle":"micromag-screen-article-surtitle","subtitle":"micromag-screen-article-subtitle","date":"micromag-screen-article-date","title":"micromag-screen-article-title","author":"micromag-screen-article-author","text":"micromag-screen-article-text","topContent":"micromag-screen-article-topContent","footer":"micromag-screen-article-footer","disabled":"micromag-screen-article-disabled","isPlaceholder":"micromag-screen-article-isPlaceholder"};
 
 var propTypes = {
   layout: PropTypes.oneOf(['normal']),
@@ -32,6 +32,7 @@ var propTypes = {
   author: PropTypes.shape({}),
   // author: MicromagPropTypes.text,
   text: PropTypes$1.text,
+  subtitle: PropTypes$1.text,
   spacing: PropTypes.number,
   background: PropTypes$1.backgroundElement,
   header: PropTypes$1.header,
@@ -48,6 +49,7 @@ var defaultProps = {
   surtitle: null,
   date: null,
   author: null,
+  subtitle: null,
   text: null,
   spacing: 20,
   background: null,
@@ -64,6 +66,7 @@ var ArticleScreen = function ArticleScreen(_ref) {
     surtitle = _ref.surtitle,
     date = _ref.date,
     author = _ref.author,
+    subtitle = _ref.subtitle,
     text = _ref.text,
     spacing = _ref.spacing,
     background = _ref.background,
@@ -114,6 +117,7 @@ var ArticleScreen = function ArticleScreen(_ref) {
   var hasFooter = isFooterFilled(footer);
   var hasTitle = isTextFilled(title);
   var hasSurtitle = isTextFilled(surtitle);
+  var hasSubtitle = isTextFilled(subtitle);
   var hasSimpleAuthor = isTextFilled(author); // legacy
   var hasAuthor = isTextFilled(authorName) || isImageFilled(authorImage) || isTextFilled(authorCollabs);
   var hasImage = isImageFilled(image);
@@ -200,6 +204,21 @@ var ArticleScreen = function ArticleScreen(_ref) {
   }, hasSurtitle ? /*#__PURE__*/React.createElement(Text, Object.assign({
     className: styles.surtitle
   }, surtitle)) : null);
+  var subtitleElement = /*#__PURE__*/React.createElement(ScreenElement, {
+    key: "subtitle",
+    placeholder: "line",
+    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "d60tSn",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Subtitle"
+      }]
+    }),
+    emptyClassName: styles.emptySubtitle,
+    isEmpty: !hasSubtitle
+  }, hasSubtitle ? /*#__PURE__*/React.createElement(Text, Object.assign({
+    className: styles.subtitle
+  }, subtitle)) : null);
   var dateElement = /*#__PURE__*/React.createElement(ScreenElement, {
     key: "date",
     placeholder: "line",
@@ -291,7 +310,7 @@ var ArticleScreen = function ArticleScreen(_ref) {
     className: classNames([styles.main, _defineProperty({}, styles.hasText, hasText && hasAuthor)])
   }, imageElement, /*#__PURE__*/React.createElement("div", {
     className: styles.topContent
-  }, surtitleElement, dateElement), titleElement, authorElement), contentElement, !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
+  }, surtitleElement, dateElement), titleElement, authorElement, subtitleElement), contentElement, !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.footer, _defineProperty({}, styles.disabled, !scrolledBottom)]),
     style: {
       paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
@@ -393,17 +412,17 @@ var definition = [{
         "value": "Author"
       }]
     })
-  },
-  // {
-  //     name: 'author',
-  //     type: 'text-element',
-  //     label: defineMessage({
-  //         defaultMessage: 'Author',
-  //         description: 'Author field label',
-  //     }),
-  // },
-
-  {
+  }, {
+    name: 'subtitle',
+    type: 'text-element',
+    label: defineMessage({
+      id: "EcZYpr",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Subtitle"
+      }]
+    })
+  }, {
     name: 'text',
     type: 'text-modal',
     label: defineMessage({
@@ -413,7 +432,35 @@ var definition = [{
         "value": "Text"
       }]
     })
-  }, {
+  },
+  // TODO: think about how to implement this wthout injecting the styles
+  // {
+  //     type: 'fields',
+  //     isList: true,
+  //     label: defineMessage({
+  //         defaultMessage: 'Styles',
+  //         description: 'Field section label',
+  //     }),
+  //     fields: [
+  //         {
+  //             name: 'textTitleStyle',
+  //             type: 'text-style-form',
+  //             label: defineMessage({
+  //                 defaultMessage: 'Text title style',
+  //                 description: 'Field label',
+  //             }),
+  //         },
+  //         {
+  //             name: 'textQuoteStyle',
+  //             type: 'text-style-form',
+  //             label: defineMessage({
+  //                 defaultMessage: 'Text quote style',
+  //                 description: 'Field label',
+  //             }),
+  //         },
+  //     ],
+  // },
+  {
     name: 'background',
     type: 'background',
     label: defineMessage({

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-article",
-    "version": "0.3.619",
+    "version": "0.3.624",
     "private": false,
     "description": "",
     "keywords": [
@@ -57,7 +57,7 @@
     "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@micromag/core": "^0.3.619",
-        "@micromag/element-author": "^0.3.619",
+        "@micromag/element-author": "^0.3.624",
         "@micromag/element-background": "^0.3.619",
         "@micromag/element-container": "^0.3.619",
         "@micromag/element-footer": "^0.3.619",
@@ -80,5 +80,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "21a901b0f800114994f30dfe692c664d378e12f7"
+    "gitHead": "dae93d8ee83abe0aa8f51a31a94e32f7b5ad9104"
 }