@twreporter/react-article-components 1.6.2-rc.0 → 1.6.3-rc.0

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.6.3-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.6.2...@twreporter/react-article-components@1.6.3-rc.0) (2022-08-10)
+
+**Note:** Version bump only for package @twreporter/react-article-components
+
+
+
+
+
+## [1.6.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.6.2-rc.1...@twreporter/react-article-components@1.6.2) (2022-08-09)
+
+**Note:** Version bump only for package @twreporter/react-article-components
+
+
+
+
+
+## [1.6.2-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.6.2-rc.0...@twreporter/react-article-components@1.6.2-rc.1) (2022-08-03)
+
+
+### Bug Fixes
+
+* update isLoaded initially for non-infogram embed ([#296](https://github.com/twreporter/twreporter-npm-packages/issues/296)) ([714b12e](https://github.com/twreporter/twreporter-npm-packages/commit/714b12ebff7b36f970813435f7b268a92fde0250))
+
+
+
+
+
 ## [1.6.2-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.6.1...@twreporter/react-article-components@1.6.2-rc.0) (2022-07-27)
 
 **Note:** Version bump only for package @twreporter/react-article-components

package/lib/components/article-page.js

@@ -41,8 +41,6 @@ var _theme = _interopRequireDefault(require("../constants/theme"));
 
 var _color = _interopRequireDefault(require("../constants/color"));
 
-var _typography = _interopRequireDefault(require("../constants/typography"));
-
 var _anchor = require("../constants/anchor");
 
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
@@ -88,7 +86,6 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 var _ = {
   get: _get["default"]
 };
-var fontFamilyCss = /*#__PURE__*/(0, _styledComponents.css)(["font-family:", ";"], _typography["default"].font.family["default"]);
 var shiftLeftCss = /*#__PURE__*/(0, _styledComponents.css)(["position:relative;width:calc(100% + 20px);left:-10px;"]);
 
 var BorderBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -156,7 +153,7 @@ var RelatedBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var BackgroundBlock = /*#__PURE__*/(0, _styledComponents["default"])(BorderBox).withConfig({
   displayName: "article-page__BackgroundBlock",
   componentId: "sc-1wuywdb-12"
-})(["", " ", " @media print{-webkit-print-color-adjust:exact;color-adjust:exact;.hidden-print{display:none;}.avoid-break{break-inside:avoid;}}padding-left:10px;padding-right:10px;"], fontFamilyCss, function (props) {
+})(["", " @media print{-webkit-print-color-adjust:exact;color-adjust:exact;.hidden-print{display:none;}.avoid-break{break-inside:avoid;}}padding-left:10px;padding-right:10px;"], function (props) {
   return getBackgroundBlockStyles(props.theme.name);
 });
 

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

@@ -202,7 +202,9 @@ var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
 
       // Delay loading infogram in loadEmbed()
       if (!((_this$_embeddedCodeWi = this._embeddedCodeWithoutScript) !== null && _this$_embeddedCodeWi !== void 0 && _this$_embeddedCodeWi.includes(infogramEmbed))) {
-        this.executeScript();
+        this.setState({
+          isLoaded: true
+        }, this.executeScript);
       }
     }
   }, {
@@ -278,13 +280,21 @@ var WayPointWrapper = function WayPointWrapper(props) {
     setIsInViewPort(false);
   };
 
-  return /*#__PURE__*/_react["default"].createElement(_reactWaypoint.Waypoint, {
-    onEnter: onEnter,
-    onLeave: onLeave,
-    fireOnRapidScroll: false
-  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(EmbeddedCode, _extends({}, props, {
-    ref: embedRef
-  }))));
+  return (
+    /*#__PURE__*/
+    // Note: When an anchor is exactly below an infogram embed, onLeave() is not fired
+    // when jumping to the anchor because infogram's bottom boundary is just overlapped
+    // with viewport's top boundary. Setting topOffset is to shorter infogram's boundary
+    // a little bit to make sure onLeave() fires.
+    _react["default"].createElement(_reactWaypoint.Waypoint, {
+      onEnter: onEnter,
+      onLeave: onLeave,
+      fireOnRapidScroll: false,
+      topOffset: 5
+    }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(EmbeddedCode, _extends({}, props, {
+      ref: embedRef
+    }))))
+  );
 };
 
 WayPointWrapper.defaultProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "1.6.2-rc.0",
+  "version": "1.6.3-rc.0",
   "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",
@@ -24,10 +24,10 @@
     "webpack-dev-server": "^3.7.2"
   },
   "dependencies": {
-    "@twreporter/core": "^1.4.2-rc.0",
-    "@twreporter/react-components": "^8.11.1-rc.0",
+    "@twreporter/core": "^1.5.0-rc.0",
+    "@twreporter/react-components": "^8.12.0-rc.0",
     "@twreporter/redux": "^7.2.2",
-    "@twreporter/universal-header": "^2.2.12-rc.0",
+    "@twreporter/universal-header": "^2.2.13-rc.0",
     "howler": "^2.2.3",
     "lodash": "^4.17.11",
     "memoize-one": "^5.0.5",
@@ -40,5 +40,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "adbbd91639cb9a74438108b97083294acf57d8cf"
+  "gitHead": "1581b4cbe2575efda67131f0d6954cb7dfd3a82d"
 }