@twreporter/react-article-components 2.4.0-rc.0 → 2.4.0-rc.2

package/lib/components/body/embedded-code.js

@@ -132,6 +132,7 @@ var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
         _this.setState({
           isLoaded: true
         }, _this.executeScript);
+        _this.props.handleIsLoaded();
       }
     });
     _this._embedded = /*#__PURE__*/_react["default"].createRef();
@@ -206,11 +207,13 @@ var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
 _defineProperty(EmbeddedCode, "propTypes", {
   className: _propTypes["default"].string,
   data: _body["default"].elementData,
-  showCaption: _propTypes["default"].bool
+  showCaption: _propTypes["default"].bool,
+  handleIsLoaded: _propTypes["default"].func
 });
 _defineProperty(EmbeddedCode, "defaultProps", {
   className: '',
-  showCaption: true
+  showCaption: true,
+  handleIsLoaded: function handleIsLoaded() {}
 });
 var WayPointWrapper = function WayPointWrapper(props) {
   var isScrollingToAnchor = props.isScrollingToAnchor;

package/lib/components/leading/embedded.js

@@ -44,7 +44,7 @@ var EmbeddedBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var ContentBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "embedded__ContentBlock",
   componentId: "sc-1uuttwk-1"
-})(["width:100%;display:flex;margin-top:16px;margin-bottom:64px;justify-content:space-between;", " ", " ", " ", ""], _mediaQuery["default"].hdOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: 1280px;\n    margin: 16px auto 64px;\n  "]))), _mediaQuery["default"].desktopOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding: 0 48px;\n  "]))), _mediaQuery["default"].tabletAndBelow(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    flex-direction: column;\n    width: 66.7%;\n    margin: 16px auto 64px;\n    "]))), _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: 100%;\n    padding: 0 24px;\n  "]))));
+})(["width:100%;display:flex;margin-top:16px;justify-content:space-between;", " ", " ", " ", ""], _mediaQuery["default"].hdOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: 1280px;\n    margin: 16px auto 0px;\n  "]))), _mediaQuery["default"].desktopOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding: 0 48px;\n  "]))), _mediaQuery["default"].tabletAndBelow(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    flex-direction: column;\n    width: 66.7%;\n    margin: 16px auto 0px;\n    "]))), _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: 100%;\n    padding: 0 24px;\n  "]))));
 var TitleBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "embedded__TitleBlock",
   componentId: "sc-1uuttwk-2"
@@ -101,6 +101,9 @@ var Embedded = function Embedded(_ref) {
   var onTopicClick = function onTopicClick() {
     navigate.push(topicHref);
   };
+  var handleIsLoaded = function handleIsLoaded() {
+    setIsLoading(false);
+  };
   (0, _react.useEffect)(function () {
     if (embedded.length > 0) {
       _.map(embedded, function (code) {
@@ -120,19 +123,12 @@ var Embedded = function Embedded(_ref) {
         }
       });
     }
-    var handleLoad = function handleLoad() {
-      setIsLoading(false);
-    };
-    window.addEventListener('load', handleLoad);
-    return function () {
-      window.removeEventListener('load', handleLoad);
-    };
   }, []);
-  if (isLoading) return /*#__PURE__*/_react["default"].createElement(LoaderContainer, null, /*#__PURE__*/_react["default"].createElement(Loader, null));
-  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(EmbeddedBlock, null, /*#__PURE__*/_react["default"].createElement(_embeddedCode["default"], {
+  return /*#__PURE__*/_react["default"].createElement("div", null, isLoading ? /*#__PURE__*/_react["default"].createElement(LoaderContainer, null, /*#__PURE__*/_react["default"].createElement(Loader, null)) : null, embeddedCode ? /*#__PURE__*/_react["default"].createElement(EmbeddedBlock, null, /*#__PURE__*/_react["default"].createElement(_embeddedCode["default"], {
     data: embeddedCode,
-    showCaption: !captionText
-  })), /*#__PURE__*/_react["default"].createElement(ContentBlock, null, /*#__PURE__*/_react["default"].createElement(TitleBlock, null, isTopicPublished && shortTitle ? /*#__PURE__*/_react["default"].createElement(TopicTitle, {
+    showCaption: !captionText,
+    handleIsLoaded: handleIsLoaded
+  })) : null, /*#__PURE__*/_react["default"].createElement(ContentBlock, null, /*#__PURE__*/_react["default"].createElement(TitleBlock, null, isTopicPublished && shortTitle ? /*#__PURE__*/_react["default"].createElement(TopicTitle, {
     onClick: onTopicClick
   }, /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
     text: shortTitle,
@@ -140,7 +136,8 @@ var Embedded = function Embedded(_ref) {
   })) : null, subtitle && /*#__PURE__*/_react["default"].createElement(SubTitle, {
     text: subtitle
   }), /*#__PURE__*/_react["default"].createElement(Title, {
-    text: title
+    text: title,
+    type: _headline.H1.Type.ARTICLE
   })), captionText ? /*#__PURE__*/_react["default"].createElement(CaptionBlock, null, /*#__PURE__*/_react["default"].createElement(Caption, {
     text: captionText
   })) : null));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "2.4.0-rc.0",
+  "version": "2.4.0-rc.2",
   "description": "The Reporter react article components, which are used in article page",
   "main": "lib/components/article-page.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
@@ -41,5 +41,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "e7e704404a5723189a9386ac47cadad098b8d2f2"
+  "gitHead": "8b2b8f9c2bb10b1c43033fab78bd2ebf16757dd2"
 }