@twreporter/react-article-components 2.1.2-rc.0 → 2.2.0-rc.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.2.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@2.1.2-rc.1...@twreporter/react-article-components@2.2.0-rc.0) (2024-06-18)
+
+
+### Bug Fixes
+
+* **react-article-component:** fix tracking section propTypes ([9bf13d3](https://github.com/twreporter/twreporter-npm-packages/commit/9bf13d32a23d1907283e05ec904ccee1c55b2aa0))
+
+
+### Features
+
+* add tracking section for article components ([669d39d](https://github.com/twreporter/twreporter-npm-packages/commit/669d39d4046456299feb3bbf254eda134987d063))
+
+
+
+
+
+## [2.1.2-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@2.1.2-rc.0...@twreporter/react-article-components@2.1.2-rc.1) (2024-06-18)
+
+**Note:** Version bump only for package @twreporter/react-article-components
+
+
+
+
+
 ## [2.1.2-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@2.1.1...@twreporter/react-article-components@2.1.2-rc.0) (2024-06-18)
 
 

package/lib/components/article-page.js

@@ -361,7 +361,8 @@ var Article = /*#__PURE__*/function (_PureComponent) {
           hasMoreRelateds = _this$props2.hasMoreRelateds,
           loadMoreRelateds = _this$props2.loadMoreRelateds,
           releaseBranch = _this$props2.releaseBranch,
-          onToggleTabExpanded = _this$props2.onToggleTabExpanded;
+          onToggleTabExpanded = _this$props2.onToggleTabExpanded,
+          trackingSection = _this$props2.trackingSection;
       var articleMetaForBookmark = {
         slug: _.get(post, 'slug', ''),
         title: _.get(post, 'title', ''),
@@ -428,7 +429,8 @@ var Article = /*#__PURE__*/function (_PureComponent) {
         brief: _.get(post, 'brief.api_data'),
         content: _.get(post, 'content.api_data'),
         onToggleTabExpanded: onToggleTabExpanded,
-        scrollStage: this.state.scrollStage
+        scrollStage: this.state.scrollStage,
+        trackingSection: trackingSection
       })), metadataAndToolsJSX), /*#__PURE__*/_react["default"].createElement(_donationBox["default"], null), /*#__PURE__*/_react["default"].createElement(_license["default"], {
         license: post.copyright,
         publishedDate: post.published_date,
@@ -458,7 +460,8 @@ _defineProperty(Article, "propTypes", {
   hasMoreRelateds: _propTypes["default"].bool,
   loadMoreRelateds: _propTypes["default"].func,
   releaseBranch: _propTypes2["default"].releaseBranch,
-  onToggleTabExpanded: _propTypes["default"].func
+  onToggleTabExpanded: _propTypes["default"].func,
+  trackingSection: _propTypes["default"].array
 });
 
 _defineProperty(Article, "defaultProps", {
@@ -469,5 +472,6 @@ _defineProperty(Article, "defaultProps", {
   hasMoreRelateds: false,
   loadMoreRelateds: noop,
   releaseBranch: _releaseBranch["default"].master,
-  onToggleTabExpanded: function onToggleTabExpanded() {}
+  onToggleTabExpanded: function onToggleTabExpanded() {},
+  trackingSection: []
 });

package/lib/components/body/index.js

@@ -50,6 +50,8 @@ var _tableOfContents = _interopRequireDefault(require("../table-of-contents"));
 
 var _youtube = _interopRequireDefault(require("./youtube"));
 
+var _trackingSection = _interopRequireDefault(require("./tracking-section"));
+
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
 var _get = _interopRequireDefault(require("lodash/get"));
@@ -68,6 +70,18 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -192,6 +206,11 @@ var ClearFloat = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "body__ClearFloat",
   componentId: "dwuu2m-18"
 })(["", ""], clearFloatCSS);
+
+var StyledTrackingSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "body__StyledTrackingSection",
+  componentId: "dwuu2m-19"
+})(["", ";margin:40px auto 48px;"], normalWidthCSS);
 /**
  *  Element Data
  *  See `elementData` in `src/constants/prop-types/body.js`
@@ -383,6 +402,13 @@ function renderElement() {
         data: data
       });
 
+    case 'tracking-section':
+      return /*#__PURE__*/_react["default"].createElement(StyledTrackingSection, {
+        key: data.id
+      }, /*#__PURE__*/_react["default"].createElement(_trackingSection["default"], {
+        data: data
+      }));
+
     default:
       return /*#__PURE__*/_react["default"].createElement(StyledParagraph, {
         key: data.id,
@@ -470,9 +496,24 @@ var Body = /*#__PURE__*/function (_Component) {
           brief = _this$props.brief,
           content = _this$props.content,
           onToggleTabExpanded = _this$props.onToggleTabExpanded,
-          scrollStage = _this$props.scrollStage;
+          scrollStage = _this$props.scrollStage,
+          trackingSection = _this$props.trackingSection;
+      var trackingSectionHeaderOne = {
+        type: 'header-one',
+        content: ['後續與迴響']
+      };
       var enableTOC = false;
-      var contentJsx = Array.isArray(content) ? _.map(content, function (data, index) {
+      var renderContent = null;
+
+      if (Array.isArray(content)) {
+        if (Array.isArray(trackingSection) && trackingSection.length > 0) {
+          renderContent = [].concat(_toConsumableArray(content), [trackingSectionHeaderOne], _toConsumableArray(trackingSection));
+        } else {
+          renderContent = _toConsumableArray(content);
+        }
+      }
+
+      var contentJsx = Array.isArray(renderContent) ? _.map(renderContent, function (data, index) {
         var elementJSX = _this2._buildContentElement(data, index);
 
         if (data.type === 'header-one') {
@@ -508,12 +549,15 @@ _defineProperty(Body, "propTypes", {
   brief: _propTypes["default"].arrayOf(_body["default"].elementData),
   content: _propTypes["default"].arrayOf(_body["default"].elementData),
   onToggleTabExpanded: _propTypes["default"].func,
-  scrollStage: _propTypes["default"].number
+  scrollStage: _propTypes["default"].number,
+  // for tracking section feature toggle
+  trackingSection: _propTypes["default"].array
 });
 
 _defineProperty(Body, "defaultProps", {
   brief: [],
   content: [],
   onToggleTabExpanded: function onToggleTabExpanded() {},
-  scollStage: 1
+  scollStage: 1,
+  trackingSection: []
 });

package/lib/components/body/infobox.js

@@ -29,7 +29,7 @@ var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/med
 
 var _color = require("@twreporter/core/lib/constants/color");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -64,19 +64,24 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 var _ = {
   get: _get["default"]
 };
-var widthCSS = /*#__PURE__*/(0, _styledComponents.css)(["", " ", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: calc(248/300*100%);\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: 445px;\n  "]))), _mediaQuery["default"].desktopOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: 480px;\n  "]))), _mediaQuery["default"].hdOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: 580px;\n  "]))));
+var articleBodyWidthCSS = /*#__PURE__*/(0, _styledComponents.css)(["", " ", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: calc(248/300*100%);\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: 445px;\n  "]))), _mediaQuery["default"].desktopOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: 480px;\n  "]))), _mediaQuery["default"].hdOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: 580px;\n  "]))));
+var trackingSectionWidthCSS = /*#__PURE__*/(0, _styledComponents.css)(["", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    width: 256px;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    width: 386px;\n  "]))), _mediaQuery["default"].desktopAndAbove(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    width: 476px;\n  "]))));
 
 var Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "infobox__Title",
   componentId: "sc-1rp3uhy-0"
-})(["", " color:", ";line-height:1.9;letter-spacing:0.7px;font-weight:", ";font-size:", "px;margin:0 auto 21px auto;"], widthCSS, _color.colorGrayscale.gray700, _typography["default"].font.weight.bold, function (props) {
+})(["", " color:", ";line-height:1.9;letter-spacing:0.7px;font-weight:", ";font-size:", "px;margin:0 auto 21px auto;"], function (props) {
+  return props.$forTrackingSection ? trackingSectionWidthCSS : articleBodyWidthCSS;
+}, _color.colorGrayscale.gray700, _typography["default"].font.weight.bold, function (props) {
   return props.theme.fontSizeOffset + 20;
 });
 
 var Content = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "infobox__Content",
   componentId: "sc-1rp3uhy-1"
-})(["", " color:", ";line-height:1.75;letter-spacing:0.5px;font-weight:", ";font-size:", "px;margin:0 auto;"], widthCSS, _color.colorGrayscale.gray700, _typography["default"].font.weight.normal, function (props) {
+})(["", " color:", ";line-height:1.75;letter-spacing:0.5px;font-weight:", ";font-size:", "px;margin:0 auto;"], function (props) {
+  return props.$forTrackingSection ? trackingSectionWidthCSS : articleBodyWidthCSS;
+}, _color.colorGrayscale.gray700, _typography["default"].font.weight.normal, function (props) {
   return props.theme.fontSizeOffset + 16;
 });
 
@@ -99,7 +104,7 @@ var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "sc-1rp3uhy-2"
 })(["", " ", " white-space:pre-wrap;background:", ";position:relative;margin:60px auto 0 auto;", " ", " &::before{content:'';display:block;width:58px;height:1px;transform:rotate(34.51deg);transform-origin:right center;position:absolute;right:-15px;top:28px;}&::after{content:'';display:block;width:58px;height:1px;transform:rotate(34.51deg);transform-origin:left center;position:absolute;left:-6px;bottom:22px;}"], function (props) {
   return getContainerStyles(props.theme.name);
-}, _css["default"].linkChildren, _color.colorGrayscale.white, _mediaQuery["default"].tabletAndBelow(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding-top: 30px;\n    padding-bottom: 30px;\n  "]))), _mediaQuery["default"].desktopAndAbove(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    padding-top: 40px;\n    padding-bottom: 40px;\n  "]))));
+}, _css["default"].linkChildren, _color.colorGrayscale.white, _mediaQuery["default"].tabletAndBelow(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    padding-top: 30px;\n    padding-bottom: 30px;\n  "]))), _mediaQuery["default"].desktopAndAbove(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    padding-top: 40px;\n    padding-bottom: 40px;\n  "]))));
 
 var Infobox = /*#__PURE__*/function (_PureComponent) {
   _inherits(Infobox, _PureComponent);
@@ -117,7 +122,8 @@ var Infobox = /*#__PURE__*/function (_PureComponent) {
     value: function render() {
       var _this$props = this.props,
           className = _this$props.className,
-          data = _this$props.data;
+          data = _this$props.data,
+          forTrackingSection = _this$props.forTrackingSection;
 
       var contentHtmlString = _.get(data, ['content', 0, 'body'], '');
 
@@ -131,8 +137,12 @@ var Infobox = /*#__PURE__*/function (_PureComponent) {
         return hashRegex.exec(anchorString) ? "<a ".concat(_anchor.ARTICLE_ANCHOR_SCROLL, "=\"true\" ").concat(attrs, ">") : anchorString;
       });
       return mutatedContentHtmlString ? /*#__PURE__*/_react["default"].createElement(Container, {
-        className: className
-      }, title ? /*#__PURE__*/_react["default"].createElement(Title, null, title) : null, /*#__PURE__*/_react["default"].createElement(Content, {
+        className: className,
+        $forTrackingSection: forTrackingSection
+      }, title ? /*#__PURE__*/_react["default"].createElement(Title, {
+        $forTrackingSection: forTrackingSection
+      }, title) : null, /*#__PURE__*/_react["default"].createElement(Content, {
+        $forTrackingSection: forTrackingSection,
         dangerouslySetInnerHTML: {
           __html: mutatedContentHtmlString
         }
@@ -147,9 +157,11 @@ exports["default"] = Infobox;
 
 _defineProperty(Infobox, "propTypes", {
   className: _propTypes["default"].string,
-  data: _body["default"].elementData.isRequired
+  data: _body["default"].elementData.isRequired,
+  forTrackingSection: _propTypes["default"].bool
 });
 
 _defineProperty(Infobox, "defaultProps", {
-  className: ''
+  className: '',
+  forTrackingSection: false
 });

package/lib/components/body/tracking-section.js

@@ -0,0 +1,180 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _color = require("@twreporter/core/lib/constants/color");
+
+var _paragraph = require("@twreporter/react-components/lib/text/paragraph");
+
+var _headline = require("@twreporter/react-components/lib/text/headline");
+
+var _date = require("@twreporter/core/lib/utils/date");
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _body = _interopRequireDefault(require("../../constants/prop-types/body"));
+
+var _annotation = _interopRequireDefault(require("./annotation"));
+
+var _paragraph2 = _interopRequireDefault(require("./paragraph"));
+
+var _image = _interopRequireDefault(require("./image"));
+
+var _infobox = _interopRequireDefault(require("./infobox"));
+
+var _list = _interopRequireDefault(require("./list"));
+
+var _centeredQuote = _interopRequireDefault(require("./centered-quote"));
+
+var _blockquote = _interopRequireDefault(require("./blockquote"));
+
+var _map = _interopRequireDefault(require("lodash/map"));
+
+var _templateObject, _templateObject2, _templateObject3;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var _ = {
+  map: _map["default"]
+};
+
+var TrackingSectionContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "tracking-section__TrackingSectionContainer",
+  componentId: "sc-104lyb5-0"
+})(["display:flex;flex-direction:column;width:100%;"]);
+
+var Dot = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "tracking-section__Dot",
+  componentId: "sc-104lyb5-1"
+})(["width:8px;height:8px;background-color:", ";border-radius:50%;"], _color.colorSupportive.heavy);
+
+var P2Gray600 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P2).withConfig({
+  displayName: "tracking-section__P2Gray600",
+  componentId: "sc-104lyb5-2"
+})(["color:", ";"], _color.colorGrayscale.gray600);
+var H4Gray800 = /*#__PURE__*/(0, _styledComponents["default"])(_headline.H4).withConfig({
+  displayName: "tracking-section__H4Gray800",
+  componentId: "sc-104lyb5-3"
+})(["color:", ";"], _color.colorGrayscale.gray800);
+
+var DateRow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "tracking-section__DateRow",
+  componentId: "sc-104lyb5-4"
+})(["display:flex;width:100%;gap:24px;&:first-child{align-items:center;}"]);
+
+var ContentContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "tracking-section__ContentContainer",
+  componentId: "sc-104lyb5-5"
+})(["display:flex;margin-top:20px;margin-left:4px;border-left:1px solid ", ";"], _color.colorGrayscale.gray300);
+
+var Content = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "tracking-section__Content",
+  componentId: "sc-104lyb5-6"
+})(["display:flex;flex-direction:column;margin-left:24px;gap:20px;"]);
+
+var InfoBoxContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "tracking-section__InfoBoxContainer",
+  componentId: "sc-104lyb5-7"
+})(["", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: 296px;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: 456px;\n  "]))), _mediaQuery["default"].desktopAndAbove(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: 556px;\n  "]))));
+
+var TrackingSection = function TrackingSection(_ref) {
+  var data = _ref.data;
+  var title = data.title,
+      publishDate = data.publishDate,
+      content = data.content;
+
+  var createContentElement = function createContentElement(data, idx) {
+    if (!data.id) {
+      data.id = "body_element_".concat(idx);
+    }
+
+    switch (data.type) {
+      case 'annotation':
+        return /*#__PURE__*/_react["default"].createElement(_annotation["default"], {
+          key: data.id,
+          data: data
+        });
+
+      case 'centered-quote':
+      case 'quoteby':
+        return /*#__PURE__*/_react["default"].createElement(_centeredQuote["default"], {
+          key: data.id,
+          data: data
+        });
+
+      case 'blockquote':
+        return /*#__PURE__*/_react["default"].createElement(_blockquote["default"], {
+          key: data.id,
+          data: data
+        });
+
+      case 'unstyled':
+        return /*#__PURE__*/_react["default"].createElement(_paragraph2["default"], {
+          key: data.id,
+          data: data
+        });
+
+      case 'small-image':
+      case 'image':
+      case 'image-link':
+        return /*#__PURE__*/_react["default"].createElement(_image["default"], {
+          key: data.id,
+          data: data
+        });
+
+      case 'infobox':
+        return /*#__PURE__*/_react["default"].createElement(InfoBoxContainer, {
+          key: data.id
+        }, /*#__PURE__*/_react["default"].createElement(_infobox["default"], {
+          data: data,
+          forTrackingSection: true
+        }));
+
+      case 'ordered-list-item':
+        return /*#__PURE__*/_react["default"].createElement(_list["default"].OrderedList, {
+          key: data.id,
+          data: data
+        });
+
+      case 'unordered-list-item':
+        return /*#__PURE__*/_react["default"].createElement(_list["default"].UnorderedList, {
+          key: data.id,
+          data: data
+        });
+
+      default:
+        return null;
+    }
+  };
+
+  var contentJSX = Array.isArray(content) ? _.map(content, function (data, idx) {
+    var elementJSX = createContentElement(data, idx);
+    return elementJSX;
+  }) : null;
+  return /*#__PURE__*/_react["default"].createElement(TrackingSectionContainer, null, /*#__PURE__*/_react["default"].createElement(DateRow, null, /*#__PURE__*/_react["default"].createElement(Dot, null), /*#__PURE__*/_react["default"].createElement(P2Gray600, {
+    text: (0, _date.date2yyyymmdd)(publishDate, '/')
+  })), /*#__PURE__*/_react["default"].createElement(ContentContainer, null, /*#__PURE__*/_react["default"].createElement(Content, null, /*#__PURE__*/_react["default"].createElement(H4Gray800, {
+    text: title
+  }), contentJSX)));
+};
+
+TrackingSection.propTypes = {
+  data: _propTypes["default"].shape({
+    title: _propTypes["default"].string,
+    publishDate: _propTypes["default"].string,
+    content: _propTypes["default"].arrayOf(_body["default"].elementData)
+  }).isRequired
+};
+var _default = TrackingSection;
+exports["default"] = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "2.1.2-rc.0",
+  "version": "2.2.0-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",
@@ -25,9 +25,9 @@
   },
   "dependencies": {
     "@twreporter/core": "^1.22.1",
-    "@twreporter/react-components": "^9.0.2",
+    "@twreporter/react-components": "^9.0.3-rc.0",
     "@twreporter/redux": "^8.0.2",
-    "@twreporter/universal-header": "^3.0.2",
+    "@twreporter/universal-header": "^3.0.3-rc.0",
     "howler": "^2.2.3",
     "lodash": "^4.17.11",
     "memoize-one": "^5.0.5",
@@ -41,5 +41,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "5157e771e069bf7bc8b8422d9e17e25b3c15f8b8"
+  "gitHead": "ce3c5ec8cd131df3f79db9cabb6269a1d14c5dbd"
 }