@twreporter/react-components 8.25.2-rc.0 → 8.26.0-rc.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.26.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.25.2-rc.0...@twreporter/react-components@8.26.0-rc.0) (2024-03-07)
+
+
+### Features
+
+* change topic listing page title components ([bc79321](https://github.com/twreporter/twreporter-npm-packages/commit/bc793217e4ebb30639685343df295a773a67909f))
+* topic listing page title color ([4fcb3cd](https://github.com/twreporter/twreporter-npm-packages/commit/4fcb3cdad6ece175591230734fb398199a7c0bfb))
+
+
+
+
+
 ## [8.25.2-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.25.1...@twreporter/react-components@8.25.2-rc.0) (2024-02-21)
 
 **Note:** Version bump only for package @twreporter/react-components

package/lib/listing-page/components/topics/index.js

@@ -29,6 +29,8 @@ var _font = require("@twreporter/core/lib/constants/font");
 
 var _titleBar = require("@twreporter/react-components/lib/title-bar");
 
+var _headline = require("@twreporter/react-components/lib/text/headline");
+
 var _color = require("@twreporter/core/lib/constants/color");
 
 var _get = _interopRequireDefault(require("lodash/get"));
@@ -73,6 +75,16 @@ var NoData = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "sc-1n6udj1-0"
 })(["width:100%;font-size:16px;color:", ";font-weight:", ";text-align:center;"], _color.colorGrayscale.gray900, _font.fontWeight.normal);
 
+var Title2Wrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "topics__Title2Wrapper",
+  componentId: "sc-1n6udj1-1"
+})(["padding-top:24px;"]);
+
+var Gray800H2 = /*#__PURE__*/(0, _styledComponents["default"])(_headline.H2).withConfig({
+  displayName: "topics__Gray800H2",
+  componentId: "sc-1n6udj1-2"
+})(["color:", ";"], _color.colorGrayscale.gray800);
+
 var Topics = /*#__PURE__*/function (_Component) {
   _inherits(Topics, _Component);
 
@@ -166,11 +178,14 @@ var Topics = /*#__PURE__*/function (_Component) {
 
         topTopicName = _.get(topics, [0, 'topic_name'], '');
         topicUrl = _.get(topics, [0, 'linkTo'], '');
-        topSectionJSX = [/*#__PURE__*/_react["default"].createElement(_titleBar.Title1, {
-          key: "top-title",
-          title: "\u6DF1\u5EA6\u5C08\u984C",
-          subtitle: _topics.TEXT.SECTION_TITLE_FEATURED
-        }), /*#__PURE__*/_react["default"].createElement(_section.TopSectionContent, {
+        topSectionJSX = [/*#__PURE__*/_react["default"].createElement(Gray800H2, {
+          text: '深度專題',
+          key: "top-title"
+        }), /*#__PURE__*/_react["default"].createElement(Title2Wrapper, {
+          key: "section-title"
+        }, /*#__PURE__*/_react["default"].createElement(_titleBar.Title2, {
+          title: _topics.TEXT.SECTION_TITLE_FEATURED
+        })), /*#__PURE__*/_react["default"].createElement(_section.TopSectionContent, {
           key: "top-section",
           topicName: topTopicName,
           topicUrl: topicUrl
@@ -180,9 +195,9 @@ var Topics = /*#__PURE__*/function (_Component) {
       }
 
       var WrappedListSectionContent = (0, _isFetchingWrapper["default"])( /*#__PURE__*/_react["default"].createElement(_section.ListSectionContent, null, listedTopicsJSX));
-      return /*#__PURE__*/_react["default"].createElement(_pageContent["default"], null, topSectionJSX, isFetching && isFirstPage ? null : /*#__PURE__*/_react["default"].createElement(_titleBar.Title1, {
-        subtitle: _topics.TEXT.SECTION_TITLE_OTHERS
-      }), /*#__PURE__*/_react["default"].createElement(WrappedListSectionContent, {
+      return /*#__PURE__*/_react["default"].createElement(_pageContent["default"], null, topSectionJSX, isFetching && isFirstPage ? null : /*#__PURE__*/_react["default"].createElement(Title2Wrapper, null, /*#__PURE__*/_react["default"].createElement(_titleBar.Title2, {
+        title: _topics.TEXT.SECTION_TITLE_OTHERS
+      })), /*#__PURE__*/_react["default"].createElement(WrappedListSectionContent, {
         isFetching: isFetching,
         showSpinner: showSpinner
       }));

package/lib/listing-page/components/topics/section.js

@@ -50,9 +50,9 @@ var styles = {
   goToTopicMargin: [20, 'auto', 0, 'auto'],
   goToTopicPadding: [14, 0, 14, 0],
   sectionMargin: {
-    mobile: [24, 0, 36, 0],
-    tablet: [32, 0, 64, 0],
-    desktop: [64, 0, 64, 0]
+    mobile: [24, 0, 24, 0],
+    tablet: [24, 0, 24, 0],
+    desktop: [24, 0, 24, 0]
   },
   titleMargin: {
     mobile: [0, 0, 24, 0],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.25.2-rc.0",
+  "version": "8.26.0-rc.0",
   "main": "lib/index.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
   "author": "twreporter <developer@twreporter.org>",
@@ -51,5 +51,5 @@
     "react-dom": "^16.0.0",
     "storybook": "^7.5.2"
   },
-  "gitHead": "5ef7eb4a12e173cc368fcc1a846cbbec13b631f5"
+  "gitHead": "b27eac6524ef68652b0505cced31509275ea5c58"
 }