@micromag/screen-article 0.3.410 → 0.3.411

package/es/index.js

@@ -10,6 +10,7 @@ import { ScreenElement } from '@micromag/core/components';
 import { useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenRenderContext } from '@micromag/core/contexts';
 import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
 import { isTextFilled, isHeaderFilled, isFooterFilled, isImageFilled, getFooterProps } from '@micromag/core/utils';
+import Author from '@micromag/element-author';
 import Background from '@micromag/element-background';
 import Container from '@micromag/element-container';
 import Footer from '@micromag/element-footer';
@@ -31,8 +32,8 @@ var propTypes = {
   title: PropTypes$1.title,
   surtitle: PropTypes$1.text,
   date: PropTypes$1.date,
-  // author: MicromagPropTypes.author, // potential to integrate more complete author element
-  author: PropTypes$1.text,
+  author: PropTypes$1.author,
+  // author: MicromagPropTypes.text,
   text: PropTypes$1.text,
   spacing: PropTypes.number,
   background: PropTypes$1.backgroundElement,
@@ -61,7 +62,7 @@ var defaultProps = {
   className: null
 };
 var ArticleScreen = function ArticleScreen(_ref) {
-  var _ref5;
+  var _ref6;
   var image = _ref.image,
     title = _ref.title,
     surtitle = _ref.surtitle,
@@ -106,12 +107,16 @@ var ArticleScreen = function ArticleScreen(_ref) {
   var ready = true;
   var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
   var scrollingDisabled = !isEdit && transitionDisabled || !current;
+  var _ref2 = author || {},
+    _ref2$name = _ref2.name,
+    authorName = _ref2$name === void 0 ? null : _ref2$name;
   var hasText = isTextFilled(text);
   var hasHeader = isHeaderFilled(header);
   var hasFooter = isFooterFilled(footer);
   var hasTitle = isTextFilled(title);
   var hasSurtitle = isTextFilled(surtitle);
-  var hasAuthor = isTextFilled(author);
+  var hasSimpleAuthor = isTextFilled(author); // legacy
+  var hasAuthor = isTextFilled(authorName);
   var hasImage = isImageFilled(image);
   var hasDate = isTextFilled(date);
   var footerProps = getFooterProps(footer, {
@@ -124,23 +129,23 @@ var ArticleScreen = function ArticleScreen(_ref) {
     if (!hasImage) {
       return 0;
     }
-    var _ref2 = image || {},
-      _ref2$metadata = _ref2.metadata,
-      metadata = _ref2$metadata === void 0 ? {} : _ref2$metadata;
-    var _ref3 = metadata || {},
-      _ref3$width = _ref3.width,
-      initialWidth = _ref3$width === void 0 ? 0 : _ref3$width,
-      _ref3$height = _ref3.height,
-      initialHeight = _ref3$height === void 0 ? 0 : _ref3$height;
+    var _ref3 = image || {},
+      _ref3$metadata = _ref3.metadata,
+      metadata = _ref3$metadata === void 0 ? {} : _ref3$metadata;
+    var _ref4 = metadata || {},
+      _ref4$width = _ref4.width,
+      initialWidth = _ref4$width === void 0 ? 0 : _ref4$width,
+      _ref4$height = _ref4.height,
+      initialHeight = _ref4$height === void 0 ? 0 : _ref4$height;
     return width * initialHeight / initialWidth;
   }, [image]);
   var partialDate = hasDate ? date.body || null : null;
   var finalDate = useMemo(function () {
-    return partialDate !== null ? intl.formatDate(dayjs(partialDate).toDate(), {
+    return partialDate !== null ? "<p>".concat(intl.formatDate(dayjs(partialDate).toDate(), {
       year: 'numeric',
       month: 'long',
       day: '2-digit'
-    }) : null;
+    }), "</p>") : null;
   }, [partialDate]);
   var imageElement = /*#__PURE__*/React.createElement(ScreenElement, {
     placeholder: "image",
@@ -160,12 +165,8 @@ var ArticleScreen = function ArticleScreen(_ref) {
     media: image
     // width={width - spacing * 2} // in layout flow
     ,
-    width: width
-    // width="100%"
-    ,
-    height: mediaHeight
-    // height="100%"
-    ,
+    width: width,
+    height: mediaHeight,
     resolution: resolution,
     className: styles.visual
   }) : null));
@@ -227,10 +228,12 @@ var ArticleScreen = function ArticleScreen(_ref) {
       }]
     }),
     emptyClassName: styles.emptyAuthor,
-    isEmpty: !hasAuthor
-  }, hasAuthor ? /*#__PURE__*/React.createElement(Text, Object.assign({
+    isEmpty: !hasAuthor && !hasSimpleAuthor
+  }, hasSimpleAuthor ? /*#__PURE__*/React.createElement(Text, Object.assign({
     className: styles.author
-  }, author)) : null);
+  }, author)) : null, hasAuthor ? /*#__PURE__*/React.createElement(Author, {
+    author: author
+  }) : null);
   var contentElement = /*#__PURE__*/React.createElement(ScreenElement, {
     placeholder: "text",
     emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -249,8 +252,8 @@ var ArticleScreen = function ArticleScreen(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     scrolledBottom = _useState2[0],
     setScrolledBottom = _useState2[1];
-  var onScrolledBottom = useCallback(function (_ref4) {
-    var initial = _ref4.initial;
+  var onScrolledBottom = useCallback(function (_ref5) {
+    var initial = _ref5.initial;
     if (initial) {
       trackScreenEvent('scroll', 'Screen');
     }
@@ -260,7 +263,7 @@ var ArticleScreen = function ArticleScreen(_ref) {
     setScrolledBottom(false);
   }, [setScrolledBottom]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, (_ref5 = {}, _defineProperty(_ref5, className, className !== null), _defineProperty(_ref5, styles.isPlaceholder, isPlaceholder), _ref5)]),
+    className: classNames([styles.container, (_ref6 = {}, _defineProperty(_ref6, className, className !== null), _defineProperty(_ref6, styles.isPlaceholder, isPlaceholder), _ref6)]),
     "data-screen-ready": ready
   }, /*#__PURE__*/React.createElement(Container, {
     width: width,
@@ -394,26 +397,27 @@ var definition = [{
         "value": "Date"
       }]
     })
+  }, {
+    name: 'author',
+    type: 'author-element',
+    label: defineMessage({
+      id: "73hxYw",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Author"
+      }]
+    })
   },
   // {
   //     name: 'author',
-  //     type: 'author-element',
+  //     type: 'text-element',
   //     label: defineMessage({
   //         defaultMessage: 'Author',
   //         description: 'Author field label',
   //     }),
   // },
+
   {
-    name: 'author',
-    type: 'text-element',
-    label: defineMessage({
-      id: "73hxYw",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Author"
-      }]
-    })
-  }, {
     name: 'text',
     type: 'text-modal',
     label: defineMessage({

package/lib/index.js

@@ -14,6 +14,7 @@ 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 Author = require('@micromag/element-author');
 var Background = require('@micromag/element-background');
 var Container = require('@micromag/element-container');
 var Footer = require('@micromag/element-footer');
@@ -35,6 +36,7 @@ var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var Author__default = /*#__PURE__*/_interopDefaultLegacy(Author);
 var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
 var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
 var Footer__default = /*#__PURE__*/_interopDefaultLegacy(Footer);
@@ -55,8 +57,8 @@ var propTypes = {
   title: core.PropTypes.title,
   surtitle: core.PropTypes.text,
   date: core.PropTypes.date,
-  // author: MicromagPropTypes.author, // potential to integrate more complete author element
-  author: core.PropTypes.text,
+  author: core.PropTypes.author,
+  // author: MicromagPropTypes.text,
   text: core.PropTypes.text,
   spacing: PropTypes__default["default"].number,
   background: core.PropTypes.backgroundElement,
@@ -85,7 +87,7 @@ var defaultProps = {
   className: null
 };
 var ArticleScreen = function ArticleScreen(_ref) {
-  var _ref5;
+  var _ref6;
   var image = _ref.image,
     title = _ref.title,
     surtitle = _ref.surtitle,
@@ -130,12 +132,16 @@ var ArticleScreen = function ArticleScreen(_ref) {
   var ready = true;
   var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
   var scrollingDisabled = !isEdit && transitionDisabled || !current;
+  var _ref2 = author || {},
+    _ref2$name = _ref2.name,
+    authorName = _ref2$name === void 0 ? null : _ref2$name;
   var hasText = utils.isTextFilled(text);
   var hasHeader = utils.isHeaderFilled(header);
   var hasFooter = utils.isFooterFilled(footer);
   var hasTitle = utils.isTextFilled(title);
   var hasSurtitle = utils.isTextFilled(surtitle);
-  var hasAuthor = utils.isTextFilled(author);
+  var hasSimpleAuthor = utils.isTextFilled(author); // legacy
+  var hasAuthor = utils.isTextFilled(authorName);
   var hasImage = utils.isImageFilled(image);
   var hasDate = utils.isTextFilled(date);
   var footerProps = utils.getFooterProps(footer, {
@@ -148,23 +154,23 @@ var ArticleScreen = function ArticleScreen(_ref) {
     if (!hasImage) {
       return 0;
     }
-    var _ref2 = image || {},
-      _ref2$metadata = _ref2.metadata,
-      metadata = _ref2$metadata === void 0 ? {} : _ref2$metadata;
-    var _ref3 = metadata || {},
-      _ref3$width = _ref3.width,
-      initialWidth = _ref3$width === void 0 ? 0 : _ref3$width,
-      _ref3$height = _ref3.height,
-      initialHeight = _ref3$height === void 0 ? 0 : _ref3$height;
+    var _ref3 = image || {},
+      _ref3$metadata = _ref3.metadata,
+      metadata = _ref3$metadata === void 0 ? {} : _ref3$metadata;
+    var _ref4 = metadata || {},
+      _ref4$width = _ref4.width,
+      initialWidth = _ref4$width === void 0 ? 0 : _ref4$width,
+      _ref4$height = _ref4.height,
+      initialHeight = _ref4$height === void 0 ? 0 : _ref4$height;
     return width * initialHeight / initialWidth;
   }, [image]);
   var partialDate = hasDate ? date.body || null : null;
   var finalDate = React.useMemo(function () {
-    return partialDate !== null ? intl.formatDate(dayjs__default["default"](partialDate).toDate(), {
+    return partialDate !== null ? "<p>".concat(intl.formatDate(dayjs__default["default"](partialDate).toDate(), {
       year: 'numeric',
       month: 'long',
       day: '2-digit'
-    }) : null;
+    }), "</p>") : null;
   }, [partialDate]);
   var imageElement = /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
     placeholder: "image",
@@ -184,12 +190,8 @@ var ArticleScreen = function ArticleScreen(_ref) {
     media: image
     // width={width - spacing * 2} // in layout flow
     ,
-    width: width
-    // width="100%"
-    ,
-    height: mediaHeight
-    // height="100%"
-    ,
+    width: width,
+    height: mediaHeight,
     resolution: resolution,
     className: styles.visual
   }) : null));
@@ -251,10 +253,12 @@ var ArticleScreen = function ArticleScreen(_ref) {
       }]
     }),
     emptyClassName: styles.emptyAuthor,
-    isEmpty: !hasAuthor
-  }, hasAuthor ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
+    isEmpty: !hasAuthor && !hasSimpleAuthor
+  }, hasSimpleAuthor ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
     className: styles.author
-  }, author)) : null);
+  }, author)) : null, hasAuthor ? /*#__PURE__*/React__default["default"].createElement(Author__default["default"], {
+    author: author
+  }) : null);
   var contentElement = /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
     placeholder: "text",
     emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
@@ -273,8 +277,8 @@ var ArticleScreen = function ArticleScreen(_ref) {
     _useState2 = _slicedToArray__default["default"](_useState, 2),
     scrolledBottom = _useState2[0],
     setScrolledBottom = _useState2[1];
-  var onScrolledBottom = React.useCallback(function (_ref4) {
-    var initial = _ref4.initial;
+  var onScrolledBottom = React.useCallback(function (_ref5) {
+    var initial = _ref5.initial;
     if (initial) {
       trackScreenEvent('scroll', 'Screen');
     }
@@ -284,7 +288,7 @@ var ArticleScreen = function ArticleScreen(_ref) {
     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.isPlaceholder, isPlaceholder), _ref5)]),
+    className: classNames__default["default"]([styles.container, (_ref6 = {}, _defineProperty__default["default"](_ref6, className, className !== null), _defineProperty__default["default"](_ref6, styles.isPlaceholder, isPlaceholder), _ref6)]),
     "data-screen-ready": ready
   }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
     width: width,
@@ -418,26 +422,27 @@ var definition = [{
         "value": "Date"
       }]
     })
+  }, {
+    name: 'author',
+    type: 'author-element',
+    label: reactIntl.defineMessage({
+      id: "73hxYw",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Author"
+      }]
+    })
   },
   // {
   //     name: 'author',
-  //     type: 'author-element',
+  //     type: 'text-element',
   //     label: defineMessage({
   //         defaultMessage: 'Author',
   //         description: 'Author field label',
   //     }),
   // },
+
   {
-    name: 'author',
-    type: 'text-element',
-    label: reactIntl.defineMessage({
-      id: "73hxYw",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Author"
-      }]
-    })
-  }, {
     name: 'text',
     type: 'text-modal',
     label: reactIntl.defineMessage({

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-article",
-    "version": "0.3.410",
+    "version": "0.3.411",
     "private": false,
     "description": "",
     "keywords": [
@@ -47,6 +47,7 @@
     "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@micromag/core": "^0.3.410",
+        "@micromag/element-author": "^0.3.411",
         "@micromag/element-background": "^0.3.410",
         "@micromag/element-container": "^0.3.410",
         "@micromag/element-footer": "^0.3.410",
@@ -69,5 +70,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "3d20200b811ff19c75de0697a4c4543101bf755b"
+    "gitHead": "06ef83636bf6f3ed8dea7fa2a7aee9909d6da7d4"
 }