@twreporter/react-article-components 1.7.3-rc.3 → 1.7.3-rc.4

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.7.3-rc.4](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.7.3-rc.3...@twreporter/react-article-components@1.7.3-rc.4) (2023-02-13)
+
+
+### Bug Fixes
+
+* abstract padding ([bdb104b](https://github.com/twreporter/twreporter-npm-packages/commit/bdb104ba374dd4210d3517c95edd5050274509f1))
+* leverage theme constants to core ([a3d1604](https://github.com/twreporter/twreporter-npm-packages/commit/a3d1604286cb31881837661b2d85911ae0389eb9))
+* replace color constant ([c4b4dcd](https://github.com/twreporter/twreporter-npm-packages/commit/c4b4dcdd3190105c13007201451f910053cf92f0))
+
+
+
+
+
 ## [1.7.3-rc.3](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.7.3-rc.2...@twreporter/react-article-components@1.7.3-rc.3) (2023-02-10)
 
 

package/lib/components/aside/metadata.js

@@ -9,6 +9,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _get = _interopRequireDefault(require("lodash/get"));
@@ -21,18 +23,20 @@ var _dynamicComponentsContext = _interopRequireDefault(require("../../contexts/d
 
 var _aside = _interopRequireDefault(require("../../constants/prop-types/aside"));
 
-var _theme = _interopRequireDefault(require("../../constants/theme"));
-
-var _color = _interopRequireDefault(require("../../constants/color"));
-
 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");
+
+var _color = require("@twreporter/core/lib/constants/color");
+
 var _featureFlag = require("@twreporter/core/lib/constants/feature-flag");
 
+var _link = _interopRequireDefault(require("@twreporter/react-components/lib/text/link"));
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -72,10 +76,10 @@ var _ = {
 };
 
 var createLine = function createLine(topOrBottom, themeName) {
-  var borderColor = _color["default"].gray50;
+  var borderColor = _color.COLOR_ARTICLE.gray50;
 
-  if (themeName === _theme["default"].article.v2.photo) {
-    borderColor = _color["default"].gray10;
+  if (themeName === _theme.ARTICLE_THEME.v2.photo) {
+    borderColor = _color.COLOR_ARTICLE.gray10;
   }
 
   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);
@@ -126,7 +130,7 @@ var DateSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   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);
+}, _color.COLOR_ARTICLE.gray70);
 
 var AuthorSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__AuthorSection",
@@ -141,7 +145,7 @@ var AuthorRow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var AuthorJobTitle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__AuthorJobTitle",
   componentId: "sc-1c3910m-9"
-})(["font-size:14px;color:", ";margin-left:5px;padding-top:2px;line-height:1;flex-shrink:0;"], _color["default"].gray80);
+})(["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",
@@ -156,7 +160,7 @@ var AuthorName = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var RawAuthorText = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__RawAuthorText",
   componentId: "sc-1c3910m-12"
-})(["font-size:14px;color:", ";padding-left:5px;"], _color["default"].gray80);
+})(["font-size:14px;color:", ";padding-left:5px;"], _color.COLOR_ARTICLE.gray80);
 
 var AngledSeparationLine = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__AngledSeparationLine",
@@ -184,18 +188,50 @@ var MetadataContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig
 
 function getMetadataContainerStyles(themeName) {
   switch (themeName) {
-    case _theme["default"].article.v2.photo:
-      return (0, _styledComponents.css)(["", ",", "{color:", ";&:hover{border-color:", ";}}", "{border-color:", ";}", "{border-color:", ";color:", ";&:hover{color:", ";border-color:", ";}}"], CategoryText, AuthorName, _color["default"].milkTea, _color["default"].milkTea, AngledSeparationLine, _color["default"].brown, TagButton, _color["default"].gray80, _color["default"].gray80, _color["default"].white, _color["default"].white);
+    case _theme.ARTICLE_THEME.v2.photo:
+      return (0, _styledComponents.css)(["", ",", "{color:", ";&:hover{border-color:", ";}}", "{border-color:", ";}", "{border-color:", ";color:", ";&:hover{color:", ";border-color:", ";}}"], CategoryText, AuthorName, _color.COLOR_ARTICLE.milkTea, _color.COLOR_ARTICLE.milkTea, AngledSeparationLine, _color.COLOR_ARTICLE.brown, TagButton, _color.COLOR_ARTICLE.gray80, _color.COLOR_ARTICLE.gray80, _color.COLOR_ARTICLE.white, _color.COLOR_ARTICLE.white);
 
-    case _theme["default"].article.v2.pink:
-      return (0, _styledComponents.css)(["", ",", "{color:", ";&:hover{border-color:", ";}}", "{border-color:", ";}", "{border-color:", ";color:", ";&:hover{background-color:", ";}}"], CategoryText, AuthorName, _color["default"].blue, _color["default"].blue, AngledSeparationLine, _color["default"].pink, TagButton, _color["default"].gray80, _color["default"].gray80, _color["default"].white);
+    case _theme.ARTICLE_THEME.v2.pink:
+      return (0, _styledComponents.css)(["", ",", "{color:", ";&:hover{border-color:", ";}}", "{border-color:", ";}", "{border-color:", ";color:", ";&:hover{background-color:", ";}}"], CategoryText, AuthorName, _color.COLOR_ARTICLE.blue, _color.COLOR_ARTICLE.blue, AngledSeparationLine, _color.COLOR_ARTICLE.pink, TagButton, _color.COLOR_ARTICLE.gray80, _color.COLOR_ARTICLE.gray80, _color.COLOR_ARTICLE.white);
 
-    case _theme["default"].article.v2["default"]:
+    case _theme.ARTICLE_THEME.v2["default"]:
     default:
-      return (0, _styledComponents.css)(["", ",", "{color:", ";&:hover{border-color:", ";}}", "{border-color:", ";}", "{border-color:", ";color:", ";&:hover{background-color:", ";}}"], CategoryText, AuthorName, _color["default"].brown, _color["default"].brown, AngledSeparationLine, _color["default"].milkTea, TagButton, _color["default"].gray80, _color["default"].gray80, _color["default"].white);
+      return (0, _styledComponents.css)(["", ",", "{color:", ";&:hover{border-color:", ";}}", "{border-color:", ";}", "{border-color:", ";color:", ";&:hover{background-color:", ";}}"], CategoryText, AuthorName, _color.COLOR_ARTICLE.brown, _color.COLOR_ARTICLE.brown, AngledSeparationLine, _color.COLOR_ARTICLE.milkTea, TagButton, _color.COLOR_ARTICLE.gray80, _color.COLOR_ARTICLE.gray80, _color.COLOR_ARTICLE.white);
   }
 }
 
+var CategorySet = function CategorySet(props) {
+  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
+
+  var categorySetJSX = _.map(props.categorySet, function (set, index) {
+    var _set$category, _set$category2, _set$subcategory, _set$subcategory2, _set$category3;
+
+    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
+      }, /*#__PURE__*/_react["default"].createElement(_link["default"], {
+        path: path,
+        name: name,
+        theme: themeContext.name,
+        isBold: isCategory,
+        padding: '0 0 0 5px'
+      }));
+    };
+
+    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), set !== null && set !== void 0 && (_set$subcategory = set.subcategory) !== null && _set$subcategory !== void 0 && _set$subcategory.id && set !== null && set !== void 0 && (_set$subcategory2 = set.subcategory) !== null && _set$subcategory2 !== void 0 && _set$subcategory2.name ? genLink("/tags/".concat(set.subcategory.id), set.subcategory.name) : genLink("/categories/".concat(set === null || set === void 0 ? void 0 : (_set$category3 = set.category) === null || _set$category3 === void 0 ? void 0 : _set$category3.id), '全部'));
+  });
+
+  return /*#__PURE__*/_react["default"].createElement(CategorySetFlexBox, null, categorySetJSX);
+};
+
+CategorySet.propTypes = {
+  categorySet: _propTypes["default"].array
+};
+
 var Metadata = /*#__PURE__*/function (_PureComponent) {
   _inherits(Metadata, _PureComponent);
 
@@ -237,36 +273,6 @@ 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, _set$category3;
-
-          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), set !== null && set !== void 0 && (_set$subcategory = set.subcategory) !== null && _set$subcategory !== void 0 && _set$subcategory.id && set !== null && set !== void 0 && (_set$subcategory2 = set.subcategory) !== null && _set$subcategory2 !== void 0 && _set$subcategory2.name ? genLink("/tags/".concat(set.subcategory.id), set.subcategory.name) : genLink("/categories/".concat(set === null || set === void 0 ? void 0 : (_set$category3 = set.category) === null || _set$category3 === void 0 ? void 0 : _set$category3.id), '全部'));
-        });
-
-        return categorySetJSX;
-      }));
-    }
   }, {
     key: "renderTagsSection",
     value: function renderTagsSection() {
@@ -312,12 +318,17 @@ var Metadata = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var date = this.props.date ? new Date(this.props.date).toLocaleString('zh-hant', {
+      var _this$props2 = this.props,
+          categorySet = _this$props2.categorySet,
+          date = _this$props2.date;
+      var dateStr = date ? new Date(date).toLocaleString('zh-hant', {
         year: 'numeric',
         month: 'numeric',
         day: 'numeric'
       }) : '';
-      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());
+      return /*#__PURE__*/_react["default"].createElement(MetadataContainer, null, _featureFlag.ENABLE_NEW_INFO_ARCH && /*#__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());
     }
   }]);
 

package/lib/constants/color.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+// TODO: remove this constant & use @twreporter/core/lib/constants/color
 var _default = {
   transparent: 'rgba(0, 0, 0, 0)',
   white: '#ffffff',

package/lib/constants/theme.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+// TODO: remove this constant & use @twreporter/core/lib/constants/theme
 var _default = {
   article: {
     v2: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "1.7.3-rc.3",
+  "version": "1.7.3-rc.4",
   "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.8.2-rc.0",
-    "@twreporter/react-components": "^8.15.2-rc.2",
-    "@twreporter/redux": "^7.5.0-rc.1",
-    "@twreporter/universal-header": "^2.4.2-rc.2",
+    "@twreporter/core": "^1.8.2-rc.1",
+    "@twreporter/react-components": "^8.16.0-rc.0",
+    "@twreporter/redux": "^7.5.0-rc.2",
+    "@twreporter/universal-header": "^2.4.2-rc.3",
     "howler": "^2.2.3",
     "lodash": "^4.17.11",
     "memoize-one": "^5.0.5",
@@ -40,5 +40,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "c29f1ae7320dc7670c07f02bfd7c2bc9fd56f406"
+  "gitHead": "1ebf9eeda3976aad554b576bf974c2718752ef4e"
 }