@twreporter/react-article-components 1.7.8 → 1.7.9-rc.0

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.7.9-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.7.8...@twreporter/react-article-components@1.7.9-rc.0) (2023-06-28)
+
+**Note:** Version bump only for package @twreporter/react-article-components
+
+
+
+
+
 ## [1.7.8](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.7.8-rc.11...@twreporter/react-article-components@1.7.8) (2023-06-21)
 
 **Note:** Version bump only for package @twreporter/react-article-components

package/lib/components/article-page.js

@@ -332,8 +332,6 @@ 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 // TODO: remove when categorySet integration is done
-        ,
         categorySet: post.category_set,
         date: post.published_date,
         designers: post.designers,
@@ -367,8 +365,6 @@ 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 // TODO: remove when categorySet integration is done
-        ,
         categorySet: post.category_set,
         date: post.published_date,
         designers: post.designers,

package/lib/components/aside/metadata.js

@@ -19,8 +19,6 @@ var _aside = _interopRequireDefault(require("../../constants/prop-types/aside"))
 
 var _typography = _interopRequireDefault(require("../../constants/typography"));
 
-var _category = require("../../constants/category");
-
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
 var _theme = require("@twreporter/core/lib/constants/theme");
@@ -31,15 +29,13 @@ var _categorySet = require("@twreporter/core/lib/constants/category-set");
 
 var _button = require("@twreporter/react-components/lib/button");
 
-var _featureFlag = require("@twreporter/core/lib/constants/feature-flag");
-
 var _get = _interopRequireDefault(require("lodash/get"));
 
 var _map = _interopRequireDefault(require("lodash/map"));
 
 var _sortBy = _interopRequireDefault(require("lodash/sortBy"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -87,111 +83,97 @@ var createLine = function createLine(topOrBottom, themeName) {
   return (0, _styledComponents.css)(["position:relative;border-", ":0.5px solid ", ";padding-", ":10px;&::after{content:'';border-right:0.5px solid ", ";width:1px;height:12px;", ":0;right:0;position:absolute;}"], topOrBottom, borderColor, topOrBottom, borderColor, topOrBottom);
 };
 
-var CategoryFlexBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "metadata__CategoryFlexBox",
-  componentId: "sc-1c3910m-0"
-})(["display:flex;"]);
-
-var CategoryFlex = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "metadata__CategoryFlex",
-  componentId: "sc-1c3910m-1"
-})(["", " flex-grow:", ";", " ", ""], function (props) {
-  return createLine('top', props.theme.name);
-}, function (props) {
-  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"
+  componentId: "sc-1c3910m-0"
 })(["display:flex;flex-direction:column;"]);
 
 var LinkContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__LinkContainer",
-  componentId: "sc-1c3910m-3"
+  componentId: "sc-1c3910m-1"
 })(["display:flex;"]);
 
 var CategorySetFlex = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__CategorySetFlex",
-  componentId: "sc-1c3910m-4"
+  componentId: "sc-1c3910m-2"
 })(["", " ", " 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  "]))));
+}, _mediaQuery["default"].tabletAndBelow(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding-right: 10px;\n    padding-left: 10px;\n  "]))), _mediaQuery["default"].desktopAndAbove(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding-right: 5px;\n    padding-left: 5px;\n  "]))));
 
 var CategoryText = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__CategoryText",
-  componentId: "sc-1c3910m-5"
+  componentId: "sc-1c3910m-3"
 })(["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-6"
+  componentId: "sc-1c3910m-4"
 })(["", " 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.COLOR_ARTICLE.gray70);
 
 var AuthorSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__AuthorSection",
-  componentId: "sc-1c3910m-7"
+  componentId: "sc-1c3910m-5"
 })(["margin-top:15px;margin-bottom:45px;"]);
 
 var AuthorRow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__AuthorRow",
-  componentId: "sc-1c3910m-8"
+  componentId: "sc-1c3910m-6"
 })(["display:flex;align-items:flex-start;margin-bottom:10px;"]);
 
 var AuthorJobTitle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__AuthorJobTitle",
-  componentId: "sc-1c3910m-9"
+  componentId: "sc-1c3910m-7"
 })(["font-size:14px;color:", ";margin-left:5px;padding-top:2px;line-height:1;flex-shrink:0;"], _color.COLOR_ARTICLE.gray80);
 
 var AuthorNames = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__AuthorNames",
-  componentId: "sc-1c3910m-10"
+  componentId: "sc-1c3910m-8"
 })(["display:flex;flex-wrap:wrap;"]);
 
 var AuthorName = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__AuthorName",
-  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  "]))));
+  componentId: "sc-1c3910m-9"
+})(["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  "]))));
 
 var RawAuthorText = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__RawAuthorText",
-  componentId: "sc-1c3910m-12"
+  componentId: "sc-1c3910m-10"
 })(["font-size:14px;color:", ";padding-left:5px;"], _color.COLOR_ARTICLE.gray80);
 
 var AngledSeparationLine = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__AngledSeparationLine",
-  componentId: "sc-1c3910m-13"
+  componentId: "sc-1c3910m-11"
 })(["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-14"
+  componentId: "sc-1c3910m-12"
 })(["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-15"
+  componentId: "sc-1c3910m-13"
 })(["display:flex;flex-wrap:wrap;align-content:center;", ""], function (props) {
   return createLine('bottom', props.theme.name);
 });
 
 var TextLink = /*#__PURE__*/(0, _styledComponents["default"])(_button.LinkButton).withConfig({
   displayName: "metadata__TextLink",
-  componentId: "sc-1c3910m-16"
+  componentId: "sc-1c3910m-14"
 })(["padding:0 0 0 5px;"]);
 
 var MetadataContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__MetadataContainer",
-  componentId: "sc-1c3910m-17"
+  componentId: "sc-1c3910m-15"
 })(["", " letter-spacing:0.4px;", " ", ""], function (props) {
   return getMetadataContainerStyles(props.theme.name);
-}, _mediaQuery["default"].mobileOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    padding-left: 24px;\n    padding-right: 24px;\n    margin: 0 auto;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    width: 513px;\n    margin: 0 auto;\n  "]))));
+}, _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    padding-left: 24px;\n    padding-right: 24px;\n    margin: 0 auto;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    width: 513px;\n    margin: 0 auto;\n  "]))));
 
 function getMetadataContainerStyles(themeName) {
   switch (themeName) {
@@ -207,8 +189,11 @@ function getMetadataContainerStyles(themeName) {
   }
 }
 
-var CategorySet = function CategorySet(props) {
-  var categorySetJSX = _.map(props.categorySet, function (set, index) {
+var CategorySet = function CategorySet(_ref) {
+  var _ref$categorySet = _ref.categorySet,
+      categorySet = _ref$categorySet === void 0 ? [] : _ref$categorySet;
+
+  var categorySetJSX = _.map(categorySet, function (set, index) {
     var _set$category, _set$subcategory, _set$category2, _set$subcategory2;
 
     var genLink = function genLink(path, name) {
@@ -254,36 +239,6 @@ var Metadata = /*#__PURE__*/function (_PureComponent) {
   }
 
   _createClass(Metadata, [{
-    key: "renderCategorySection",
-    value: function renderCategorySection() {
-      var categories = this.props.categories;
-
-      _.sortBy(categories, ['sort_order']);
-
-      return /*#__PURE__*/_react["default"].createElement(CategoryFlexBox, null, /*#__PURE__*/_react["default"].createElement(_dynamicComponentsContext["default"].Consumer, null, function (components) {
-        var numOfCats = _.get(categories, 'length', 0);
-
-        var categoriesJSX = _.map(categories, function (cat, index) {
-          // if only one category,
-          // then `flexGrow = 1`,
-          // which makes flex item fill the flex box.
-          var flexGrow = numOfCats === 1 ? 1 : index;
-          return /*#__PURE__*/_react["default"].createElement(CategoryFlex, {
-            key: "category_".concat(cat.id),
-            flexGrow: flexGrow
-          }, /*#__PURE__*/_react["default"].createElement(components.Link, {
-            to: "/categories/".concat(_category.idToPathSegment[cat.id])
-          }, /*#__PURE__*/_react["default"].createElement(CategoryText, {
-            style: {
-              fontWeight: index === 0 ? 'bold' : 'normal'
-            }
-          }, cat.name)));
-        });
-
-        return categoriesJSX;
-      }));
-    }
-  }, {
     key: "renderTagsSection",
     value: function renderTagsSection() {
       var tags = this.props.tags;
@@ -336,9 +291,9 @@ var Metadata = /*#__PURE__*/function (_PureComponent) {
         month: 'numeric',
         day: 'numeric'
       }) : '';
-      return /*#__PURE__*/_react["default"].createElement(MetadataContainer, null, _featureFlag.ENABLE_NEW_INFO_ARCH && /*#__PURE__*/_react["default"].createElement(CategorySet, {
+      return /*#__PURE__*/_react["default"].createElement(MetadataContainer, null, /*#__PURE__*/_react["default"].createElement(CategorySet, {
         categorySet: categorySet
-      }), !_featureFlag.ENABLE_NEW_INFO_ARCH && this.renderCategorySection(), /*#__PURE__*/_react["default"].createElement(DateSection, null, dateStr), this.renderAuthorsSection(), this.renderTagsSection());
+      }), /*#__PURE__*/_react["default"].createElement(DateSection, null, dateStr), this.renderAuthorsSection(), this.renderTagsSection());
     }
   }]);
 
@@ -348,7 +303,6 @@ var Metadata = /*#__PURE__*/function (_PureComponent) {
 _defineProperty(Metadata, "propTypes", _aside["default"].metadata);
 
 _defineProperty(Metadata, "defaultProps", {
-  categories: [],
   categorySet: [],
   tags: [],
   writers: [],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "1.7.8",
+  "version": "1.7.9-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.10.0",
-    "@twreporter/react-components": "^8.18.0",
-    "@twreporter/redux": "^7.6.0",
-    "@twreporter/universal-header": "^2.6.0",
+    "@twreporter/core": "^1.10.1-rc.0",
+    "@twreporter/react-components": "^8.18.1-rc.0",
+    "@twreporter/redux": "^7.6.1-rc.0",
+    "@twreporter/universal-header": "^2.6.1-rc.0",
     "howler": "^2.2.3",
     "lodash": "^4.17.11",
     "memoize-one": "^5.0.5",
@@ -40,5 +40,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "8bb552690874aabe203b3c8205f725eef6285282"
+  "gitHead": "d0cdc973332d7c8b7e8d8bd4370e6b789961a1a0"
 }

package/lib/constants/category.js

@@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.idToPathSegment = void 0;
-var idToPathSegment = {
-  '57175d923970a5e46ff854db': 'culture_and_art',
-  '5951db9b507c6a0d00ab063d': 'environment_and_education',
-  '5951db87507c6a0d00ab063c': 'human_rights_and_society',
-  '59671cd2507c6a0d00ab06ba': 'infographic',
-  '5743d35a940ee41000e81f4a': 'international',
-  '59783ad89092de0d00b41691': 'living_and_medical_care',
-  '574d028748fa171000c45d48': 'photography',
-  '5951dbc2507c6a0d00ab0640': 'politics_and_economy',
-  '573177cb8c0c261000b3f6d2': 'reviews',
-  '5cb40f712203b617004ad35d': 'behind_the_scenes'
-};
-exports.idToPathSegment = idToPathSegment;