@twreporter/react-article-components 1.6.4-rc.1 → 1.6.4-rc.2

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.6.4-rc.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.6.4-rc.1...@twreporter/react-article-components@1.6.4-rc.2) (2022-08-22)
+
+**Note:** Version bump only for package @twreporter/react-article-components
+
+
+
+
+
 ## [1.6.4-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.6.4-rc.0...@twreporter/react-article-components@1.6.4-rc.1) (2022-08-22)
 
 **Note:** Version bump only for package @twreporter/react-article-components

package/lib/components/article-page.js

@@ -332,7 +332,9 @@ var Article = /*#__PURE__*/function (_PureComponent) {
       var backToTopic = leadingProps && leadingProps.isTopicPublished ? leadingProps.topicHref : ''; // only for tablet and below
 
       var metadataAndToolsJSX = /*#__PURE__*/_react["default"].createElement(MetadataAndToolsBlock, null, /*#__PURE__*/_react["default"].createElement(_metadata["default"], {
-        categories: post.categories,
+        categories: post.categories // TODO: remove when categorySet integration is done
+        ,
+        categorySet: post.categorySet,
         date: post.published_date,
         designers: post.designers,
         photographers: post.photographers,
@@ -365,7 +367,9 @@ var Article = /*#__PURE__*/function (_PureComponent) {
         onFontLevelChange: this.changeFontLevel
       }), /*#__PURE__*/_react["default"].createElement(DesktopAsideBlock, null, /*#__PURE__*/_react["default"].createElement(_desktopAside["default"], {
         backToTopic: backToTopic,
-        categories: post.categories,
+        categories: post.categories // TODO: remove when categorySet integration is done
+        ,
+        categorySet: post.categorySet,
         date: post.published_date,
         designers: post.designers,
         photographers: post.photographers,

package/lib/components/aside/desktop-aside.js

@@ -154,6 +154,7 @@ var Aside = /*#__PURE__*/function (_React$PureComponent) {
           articleMetaForBookmark = _this$props.articleMetaForBookmark,
           backToTopic = _this$props.backToTopic,
           categories = _this$props.categories,
+          categorySet = _this$props.categorySet,
           date = _this$props.date,
           designers = _this$props.designers,
           engineers = _this$props.engineers,
@@ -166,6 +167,7 @@ var Aside = /*#__PURE__*/function (_React$PureComponent) {
 
       var metadataJSX = /*#__PURE__*/_react["default"].createElement(_metadata["default"], {
         categories: categories,
+        categorySet: categorySet,
         date: date,
         designers: designers,
         photographers: photographers,

package/lib/components/aside/metadata.js

@@ -7,21 +7,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _dynamicComponentsContext = _interopRequireDefault(require("../../contexts/dynamic-components-context"));
-
 var _react = _interopRequireWildcard(require("react"));
 
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
 var _get = _interopRequireDefault(require("lodash/get"));
 
 var _map = _interopRequireDefault(require("lodash/map"));
 
-var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
-
-var _aside = _interopRequireDefault(require("../../constants/prop-types/aside"));
-
 var _sortBy = _interopRequireDefault(require("lodash/sortBy"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _dynamicComponentsContext = _interopRequireDefault(require("../../contexts/dynamic-components-context"));
+
+var _aside = _interopRequireDefault(require("../../constants/prop-types/aside"));
 
 var _theme = _interopRequireDefault(require("../../constants/theme"));
 
@@ -31,14 +29,18 @@ var _typography = _interopRequireDefault(require("../../constants/typography"));
 
 var _category = require("../../constants/category");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _featureFlag = require("@twreporter/core/lib/constants/feature-flag");
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 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); } }
@@ -93,71 +95,92 @@ var CategoryFlex = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   return props.flexGrow;
 }, _mediaQuery["default"].tabletAndBelow(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding-right: 15px;\n    padding-left: 15px;\n  "]))), _mediaQuery["default"].desktopAndAbove(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding-right: 5px;\n    padding-left: 5px;\n  "]))));
 
+var CategorySetFlexBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "metadata__CategorySetFlexBox",
+  componentId: "sc-1c3910m-2"
+})(["display:flex;flex-direction:column;"]);
+
+var LinkContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "metadata__LinkContainer",
+  componentId: "sc-1c3910m-3"
+})(["display:flex;"]);
+
+var CategorySetFlex = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "metadata__CategorySetFlex",
+  componentId: "sc-1c3910m-4"
+})(["", " ", " flex-basis:", ";", " ", ""], function (props) {
+  return props.isTop && createLine('top', props.theme.name);
+}, function (props) {
+  return props.isCategory && 'min-width: 100px;';
+}, function (props) {
+  return props.isCategory ? '100px' : 'calc(100% - 100px)';
+}, _mediaQuery["default"].tabletAndBelow(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    padding-right: 10px;\n    padding-left: 10px;\n  "]))), _mediaQuery["default"].desktopAndAbove(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    padding-right: 5px;\n    padding-left: 5px;\n  "]))));
+
 var CategoryText = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__CategoryText",
-  componentId: "sc-1c3910m-2"
+  componentId: "sc-1c3910m-5"
 })(["display:inline-block;font-size:16px;line-height:1;padding-left:5px;&:hover{padding-bottom:2px;border-width:0 0 1px 0;border-style:solid;}"]);
 
 var DateSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__DateSection",
-  componentId: "sc-1c3910m-3"
+  componentId: "sc-1c3910m-6"
 })(["", " font-size:14px;color:", ";margin-left:5px;margin-top:15px;&::before{content:'\u520A\u51FA\u65E5\u671F';margin-right:10px;}"], function (props) {
   return createLine('top', props.theme.name);
 }, _color["default"].gray70);
 
 var AuthorSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__AuthorSection",
-  componentId: "sc-1c3910m-4"
+  componentId: "sc-1c3910m-7"
 })(["margin-top:15px;margin-bottom:45px;"]);
 
 var AuthorRow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__AuthorRow",
-  componentId: "sc-1c3910m-5"
+  componentId: "sc-1c3910m-8"
 })(["display:flex;align-items:flex-start;margin-bottom:10px;"]);
 
 var AuthorJobTitle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__AuthorJobTitle",
-  componentId: "sc-1c3910m-6"
+  componentId: "sc-1c3910m-9"
 })(["font-size:14px;color:", ";margin-left:5px;padding-top:2px;line-height:1;flex-shrink:0;"], _color["default"].gray80);
 
 var AuthorNames = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__AuthorNames",
-  componentId: "sc-1c3910m-7"
+  componentId: "sc-1c3910m-10"
 })(["display:flex;flex-wrap:wrap;"]);
 
 var AuthorName = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__AuthorName",
-  componentId: "sc-1c3910m-8"
-})(["font-size:16px;margin-left:5px;line-height:1;padding-bottom:3px;word-break:keep-all;vertical-align:top;&:hover{padding-bottom:2px;border-width:0 0 1px 0;border-style:solid;}", ""], _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: inline-block;\n  "]))));
+  componentId: "sc-1c3910m-11"
+})(["font-size:16px;margin-left:5px;line-height:1;padding-bottom:3px;word-break:keep-all;vertical-align:top;&:hover{padding-bottom:2px;border-width:0 0 1px 0;border-style:solid;}", ""], _mediaQuery["default"].mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    display: inline-block;\n  "]))));
 
 var RawAuthorText = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__RawAuthorText",
-  componentId: "sc-1c3910m-9"
+  componentId: "sc-1c3910m-12"
 })(["font-size:14px;color:", ";padding-left:5px;"], _color["default"].gray80);
 
 var AngledSeparationLine = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__AngledSeparationLine",
-  componentId: "sc-1c3910m-10"
+  componentId: "sc-1c3910m-13"
 })(["border-width:0.5px;border-style:solid;width:15px;transform:translateY(9px) rotate(-45deg);flex-shrink:0;"]);
 
 var TagButton = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__TagButton",
-  componentId: "sc-1c3910m-11"
+  componentId: "sc-1c3910m-14"
 })(["border-style:solid;border-width:1px;border-radius:50px;padding:5px 10px 5px 10px;font-size:14px;font-weight:", ";margin-bottom:10px;margin-right:10px;&:before{content:'#';}"], _typography["default"].font.weight.normal);
 
 var TagsSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__TagsSection",
-  componentId: "sc-1c3910m-12"
+  componentId: "sc-1c3910m-15"
 })(["display:flex;flex-wrap:wrap;align-content:center;", ""], function (props) {
   return createLine('bottom', props.theme.name);
 });
 
 var MetadataContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__MetadataContainer",
-  componentId: "sc-1c3910m-13"
+  componentId: "sc-1c3910m-16"
 })(["", " letter-spacing:0.4px;", " ", ""], function (props) {
   return getMetadataContainerStyles(props.theme.name);
-}, _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: calc(300/355*100%);\n    margin: 0 auto;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    width: 513px;\n    margin: 0 auto;\n  "]))));
+}, _mediaQuery["default"].mobileOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    width: calc(300/355*100%);\n    margin: 0 auto;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    width: 513px;\n    margin: 0 auto;\n  "]))));
 
 function getMetadataContainerStyles(themeName) {
   switch (themeName) {
@@ -214,6 +237,36 @@ var Metadata = /*#__PURE__*/function (_PureComponent) {
         return categoriesJSX;
       }));
     }
+  }, {
+    key: "renderCategorySetSection",
+    value: function renderCategorySetSection() {
+      var categorySet = this.props.categorySet;
+      return /*#__PURE__*/_react["default"].createElement(CategorySetFlexBox, null, /*#__PURE__*/_react["default"].createElement(_dynamicComponentsContext["default"].Consumer, null, function (components) {
+        var categorySetJSX = _.map(categorySet, function (set, index) {
+          var _set$category, _set$category2, _set$subcategory, _set$subcategory2;
+
+          var genLink = function genLink(path, name) {
+            var isCategory = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+            return /*#__PURE__*/_react["default"].createElement(CategorySetFlex, {
+              isCategory: isCategory,
+              isTop: index === 0
+            }, path && name && /*#__PURE__*/_react["default"].createElement(components.Link, {
+              to: path
+            }, /*#__PURE__*/_react["default"].createElement(CategoryText, {
+              style: {
+                fontWeight: isCategory ? 'bold' : 'normal'
+              }
+            }, name)));
+          };
+
+          return /*#__PURE__*/_react["default"].createElement(LinkContainer, {
+            key: "categorySet-".concat(index)
+          }, genLink("/categories/".concat(set === null || set === void 0 ? void 0 : (_set$category = set.category) === null || _set$category === void 0 ? void 0 : _set$category.id), set === null || set === void 0 ? void 0 : (_set$category2 = set.category) === null || _set$category2 === void 0 ? void 0 : _set$category2.name, true), genLink("/tags/".concat(set === null || set === void 0 ? void 0 : (_set$subcategory = set.subcategory) === null || _set$subcategory === void 0 ? void 0 : _set$subcategory.id), set === null || set === void 0 ? void 0 : (_set$subcategory2 = set.subcategory) === null || _set$subcategory2 === void 0 ? void 0 : _set$subcategory2.name));
+        });
+
+        return categorySetJSX;
+      }));
+    }
   }, {
     key: "renderTagsSection",
     value: function renderTagsSection() {
@@ -264,7 +317,7 @@ var Metadata = /*#__PURE__*/function (_PureComponent) {
         month: 'numeric',
         day: 'numeric'
       }) : '';
-      return /*#__PURE__*/_react["default"].createElement(MetadataContainer, null, this.renderCategorySection(), /*#__PURE__*/_react["default"].createElement(DateSection, null, date), this.renderAuthorsSection(), this.renderTagsSection());
+      return /*#__PURE__*/_react["default"].createElement(MetadataContainer, null, _featureFlag.ENABLE_NEW_INFO_ARCH && this.renderCategorySetSection(), !_featureFlag.ENABLE_NEW_INFO_ARCH && this.renderCategorySection(), /*#__PURE__*/_react["default"].createElement(DateSection, null, date), this.renderAuthorsSection(), this.renderTagsSection());
     }
   }]);
 
@@ -275,6 +328,7 @@ _defineProperty(Metadata, "propTypes", _aside["default"].metadata);
 
 _defineProperty(Metadata, "defaultProps", {
   categories: [],
+  categorySet: [],
   tags: [],
   writers: [],
   photographers: [],

package/lib/constants/prop-types/aside.js

@@ -23,6 +23,10 @@ var _default = {
       name: _propTypes["default"].string.isRequired,
       sort_order: _propTypes["default"].number.isRequired
     })),
+    categorySet: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+      category: _propTypes["default"].string.isRequired,
+      subcategory: _propTypes["default"].string.isRequired
+    })),
     tags: _propTypes["default"].arrayOf(_propTypes["default"].shape({
       id: _propTypes["default"].string.isRequired,
       name: _propTypes["default"].string.isRequired

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "1.6.4-rc.1",
+  "version": "1.6.4-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",
@@ -40,5 +40,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "c39b265ecd77107f0e1aeb6d3d147efb969c6226"
+  "gitHead": "bd76b2c13e84ed0675cd7af84b5647e6d629d29e"
 }