@twreporter/react-components 8.17.0-rc.8 → 8.17.0

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [8.17.0-rc.8](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.17.0-rc.7...@twreporter/react-components@8.17.0-rc.8) (2023-04-27)
+# [8.17.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.17.0-rc.15...@twreporter/react-components@8.17.0) (2023-05-09)
 
 **Note:** Version bump only for package @twreporter/react-components
 
@@ -11,40 +11,123 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [8.17.0-rc.7](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.17.0-rc.6...@twreporter/react-components@8.17.0-rc.7) (2023-04-24)
+# [8.17.0-rc.15](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.17.0-rc.14...@twreporter/react-components@8.17.0-rc.15) (2023-05-09)
 
 
 ### Bug Fixes
 
-* card list rwd ([f28ef4f](https://github.com/twreporter/twreporter-npm-packages/commit/f28ef4f77401bbbdd741d37349b94d00df5d3ba6))
+* change image width ([8fabb25](https://github.com/twreporter/twreporter-npm-packages/commit/8fabb254101f39019e39db1c0dc9a3d2bf5403da))
 
 
 
 
 
-# [8.17.0-rc.6](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.17.0-rc.5...@twreporter/react-components@8.17.0-rc.6) (2023-04-18)
+# [8.17.0-rc.14](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.17.0-rc.13...@twreporter/react-components@8.17.0-rc.14) (2023-05-09)
+
+
+### Bug Fixes
+
+* listing-page style ([47493e8](https://github.com/twreporter/twreporter-npm-packages/commit/47493e8dca634122e85371cc208155ec37407e61))
+
+
+
+
+
+# [8.17.0-rc.13](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.17.0-rc.12...@twreporter/react-components@8.17.0-rc.13) (2023-05-08)
 
 
 ### Bug Fixes
 
-* add type prop for Icon component & refactor ([06a1f9c](https://github.com/twreporter/twreporter-npm-packages/commit/06a1f9c1b00c6741a2b0cbd878cd24dd11d26a30))
-* address review comments ([022d112](https://github.com/twreporter/twreporter-npm-packages/commit/022d112baa7001db775b55ef604e909aa7f76462))
-* adjust PillButton style ([f17124a](https://github.com/twreporter/twreporter-npm-packages/commit/f17124a0a884ec26d2838d869264e711644f2d90))
-* make paragraph & link button support inline style ([822a864](https://github.com/twreporter/twreporter-npm-packages/commit/822a8645bf1ea1f65dc86c7f636c7db840b56c68))
-* merge text/link into buttom/link component & migrate ([0b526b2](https://github.com/twreporter/twreporter-npm-packages/commit/0b526b2c9171169377d188add257c062811f7758))
-* refactor use of enums in react-components ([fadd2a5](https://github.com/twreporter/twreporter-npm-packages/commit/fadd2a5e963a3fa6f55dbcba82f1dc3b5c03b6d2))
-* remove storybook related const from @twreporter/core packages ([4d22736](https://github.com/twreporter/twreporter-npm-packages/commit/4d22736f409a002537d1912300ff911197582729))
-* use component defined enums to assign props ([2e0ff41](https://github.com/twreporter/twreporter-npm-packages/commit/2e0ff41dec714b4a9c97a02027dc4fdb91c958b9))
+* [@font-face](https://github.com/font-face) should use in root file ([4029c23](https://github.com/twreporter/twreporter-npm-packages/commit/4029c2312ed223588fde7308e15d50ed9a34e140))
+
+
+
+
+
+# [8.17.0-rc.12](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.17.0-rc.11...@twreporter/react-components@8.17.0-rc.12) (2023-05-05)
+
+**Note:** Version bump only for package @twreporter/react-components
+
+
+
+
+
+# [8.17.0-rc.11](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.17.0-rc.10...@twreporter/react-components@8.17.0-rc.11) (2023-05-05)
 
 
 ### Features
 
-* add Letter & Google icon components ([fbf1dfc](https://github.com/twreporter/twreporter-npm-packages/commit/fbf1dfc111a021d5d9fd9254cef8e402e0f2384e))
-* add LinkButton component with storybook ([25a9976](https://github.com/twreporter/twreporter-npm-packages/commit/25a9976bfe0998dc9985fb6aa3ab921dae00f6a8))
+* add empty state component ([ca74cbb](https://github.com/twreporter/twreporter-npm-packages/commit/ca74cbbc08dd5c7ea0ee651df5a932d0fe61d57e))
+* add empty state enums ([0fb55fd](https://github.com/twreporter/twreporter-npm-packages/commit/0fb55fd59cfbd2fdde6e13eefaf1781c5f726221))
+* fix comment ([f97b2bb](https://github.com/twreporter/twreporter-npm-packages/commit/f97b2bb22f1542b31ba474517f25122bacb67708))
+* fix comment ([028e8b9](https://github.com/twreporter/twreporter-npm-packages/commit/028e8b9798e2164930e584d050964f98ceb70aee))
+* fix comment ([9e20be1](https://github.com/twreporter/twreporter-npm-packages/commit/9e20be174f3b939437d3ddfb400520be9bb6449e))
+* set props and storybook ([9aabed0](https://github.com/twreporter/twreporter-npm-packages/commit/9aabed0640f1d509859aaf659705b1f93c766f04))
+* set style to bookmark ([91c76fb](https://github.com/twreporter/twreporter-npm-packages/commit/91c76fb73f9656dee57bb8ba823d7e92709e4a14))
+
+
+
+
+
+# [8.17.0-rc.10](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.17.0-rc.9...@twreporter/react-components@8.17.0-rc.10) (2023-05-03)
+
+
+### Bug Fixes
+
+* add MaterialIcon component to support google material symbols ([af520b1](https://github.com/twreporter/twreporter-npm-packages/commit/af520b1c300c9b092d6c79d983b777c5ce6646e2))
+* use `material-symbols` package instead of `react-material-symbols` ([1937a3f](https://github.com/twreporter/twreporter-npm-packages/commit/1937a3fbf7841aad7176d644cc3c9bb77575fb64))
+
 
 
 
 
+# [8.17.0-rc.9](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.17.0-rc.8...@twreporter/react-components@8.17.0-rc.9) (2023-04-28)
+
+
+### Bug Fixes
+
+* add `showCategory` prop for List component ([20da390](https://github.com/twreporter/twreporter-npm-packages/commit/20da3909f564a660490e81391d989df452a0ac9c))
+
+
+
+
+
+# [8.17.0-rc.8](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.17.0-rc.7...@twreporter/react-components@8.17.0-rc.8) (2023-04-27)
+
+**Note:** Version bump only for package @twreporter/react-components
+
+
+
+
+
+# [8.17.0-rc.7](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.17.0-rc.6...@twreporter/react-components@8.17.0-rc.7) (2023-04-24)
+
+
+### Bug Fixes
+
+* card list rwd ([f28ef4f](https://github.com/twreporter/twreporter-npm-packages/commit/f28ef4f77401bbbdd741d37349b94d00df5d3ba6))
+
+
+
+
+
+# [8.17.0-rc.6](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.17.0-rc.5...@twreporter/react-components@8.17.0-rc.6) (2023-04-18)
+
+### Bug Fixes
+
+- add type prop for Icon component & refactor ([06a1f9c](https://github.com/twreporter/twreporter-npm-packages/commit/06a1f9c1b00c6741a2b0cbd878cd24dd11d26a30))
+- address review comments ([022d112](https://github.com/twreporter/twreporter-npm-packages/commit/022d112baa7001db775b55ef604e909aa7f76462))
+- adjust PillButton style ([f17124a](https://github.com/twreporter/twreporter-npm-packages/commit/f17124a0a884ec26d2838d869264e711644f2d90))
+- make paragraph & link button support inline style ([822a864](https://github.com/twreporter/twreporter-npm-packages/commit/822a8645bf1ea1f65dc86c7f636c7db840b56c68))
+- merge text/link into buttom/link component & migrate ([0b526b2](https://github.com/twreporter/twreporter-npm-packages/commit/0b526b2c9171169377d188add257c062811f7758))
+- refactor use of enums in react-components ([fadd2a5](https://github.com/twreporter/twreporter-npm-packages/commit/fadd2a5e963a3fa6f55dbcba82f1dc3b5c03b6d2))
+- remove storybook related const from @twreporter/core packages ([4d22736](https://github.com/twreporter/twreporter-npm-packages/commit/4d22736f409a002537d1912300ff911197582729))
+- use component defined enums to assign props ([2e0ff41](https://github.com/twreporter/twreporter-npm-packages/commit/2e0ff41dec714b4a9c97a02027dc4fdb91c958b9))
+
+### Features
+
+- add Letter & Google icon components ([fbf1dfc](https://github.com/twreporter/twreporter-npm-packages/commit/fbf1dfc111a021d5d9fd9254cef8e402e0f2384e))
+- add LinkButton component with storybook ([25a9976](https://github.com/twreporter/twreporter-npm-packages/commit/25a9976bfe0998dc9985fb6aa3ab921dae00f6a8))
 
 # [8.17.0-rc.5](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.17.0-rc.4...@twreporter/react-components@8.17.0-rc.5) (2023-04-17)
 

package/lib/bookmark-list/bookmarks.js

@@ -13,7 +13,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _bookmark = _interopRequireDefault(require("./bookmark"));
 
-var _emptyGuide = _interopRequireDefault(require("./empty-guide"));
+var _emptyState = _interopRequireDefault(require("../empty-state"));
 
 var _headline = require("../text/headline");
 
@@ -21,6 +21,8 @@ var _paragraph = require("../text/paragraph");
 
 var _divider = _interopRequireDefault(require("../divider"));
 
+var _icon = require("../icon");
+
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
 var _propTypes2 = _interopRequireDefault(require("@twreporter/core/lib/constants/prop-types"));
@@ -29,11 +31,13 @@ var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/consta
 
 var _color = require("@twreporter/core/lib/constants/color");
 
+var _requestOrigins = _interopRequireDefault(require("@twreporter/core/lib/constants/request-origins"));
+
 var _get = _interopRequireDefault(require("lodash/get"));
 
 var _map = _interopRequireDefault(require("lodash/map"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -52,12 +56,12 @@ var PageContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var Column = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "bookmarks__Column",
   componentId: "sc-1m95x6z-1"
-})(["margin:0 auto;width:97%;max-width:834px;", " ", ""], _mediaQuery["default"].tabletOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: 100%;\n    max-width: 707px;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: 100%;\n  "]))));
+})(["margin:0 auto;width:97%;max-width:922px;", " ", ""], _mediaQuery["default"].tabletOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: 100%;\n    max-width: 698px;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: 100%;\n  "]))));
 
 var StatusBar = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "bookmarks__StatusBar",
   componentId: "sc-1m95x6z-2"
-})(["", " padding-bottom:64px;width:stretch;"], _mediaQuery["default"].mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding-left: 1em;\n    padding-right: 1em;\n  "]))));
+})(["", " ", " padding-bottom:64px;width:stretch;"], _mediaQuery["default"].mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding-left: 24px;\n    padding-right: 24px;\n    padding-bottom: 24px;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    padding-bottom: 32px;\n  "]))));
 
 var TitleContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "bookmarks__TitleContainer",
@@ -100,7 +104,19 @@ function Bookmarks(_ref) {
     text: total,
     weight: "bold"
   }));
-  var contentJSX = total === 0 ? /*#__PURE__*/_react["default"].createElement(_emptyGuide["default"], {
+  var contentJSX = total === 0 ? /*#__PURE__*/_react["default"].createElement(_emptyState["default"], {
+    style: _emptyState["default"].Style.DEFAULT,
+    title: "\u4F60\u9084\u6C92\u6709\u5132\u5B58\u4EFB\u4F55\u6587\u7AE0\uFF01",
+    guide: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
+      text: "\u9EDE\u64CA"
+    }), /*#__PURE__*/_react["default"].createElement(_icon.Bookmark, {
+      type: _icon.Bookmark.Type.ADD,
+      releaseBranch: releaseBranch
+    }), /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
+      text: "\u5C07\u559C\u611B\u7684\u6587\u7AE0\u52A0\u5165\u6211\u7684\u66F8\u7C64"
+    })),
+    buttonText: "\u958B\u59CB\u63A2\u7D22",
+    buttonUrl: _requestOrigins["default"].forClientSideRendering[releaseBranch].main,
     releaseBranch: releaseBranch
   }) : /*#__PURE__*/_react["default"].createElement(BookmarksContainer, null, _.map(bookmarks, buildBookmark));
   return /*#__PURE__*/_react["default"].createElement(PageContainer, null, /*#__PURE__*/_react["default"].createElement(Column, null, /*#__PURE__*/_react["default"].createElement(StatusBar, null, /*#__PURE__*/_react["default"].createElement(TitleContainer, null, /*#__PURE__*/_react["default"].createElement(_headline.H1, {

package/lib/button/components/iconWithTextButton.js

@@ -38,10 +38,10 @@ var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   return props.hoverColor;
 }));
 
-var StyledP4 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P4).withConfig({
-  displayName: "iconWithTextButton__StyledP4",
+var StyledP3 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P3).withConfig({
+  displayName: "iconWithTextButton__StyledP3",
   componentId: "sc-1f9d1q4-1"
-})(["max-height:", ";opacity:", ";transition:opacity 100ms;"], function (props) {
+})(["margin-top:2px;max-height:", ";opacity:", ";transition:opacity 100ms;"], function (props) {
   return props.hideText ? '0px' : 'none';
 }, function (props) {
   return props.hideText ? '0' : '1';
@@ -67,9 +67,9 @@ var IconWithTextButton = function IconWithTextButton(_ref) {
   return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
     color: color,
     hoverColor: hoverColor
-  }, iconComponent, /*#__PURE__*/_react["default"].createElement(StyledP4, {
+  }, iconComponent, /*#__PURE__*/_react["default"].createElement(StyledP3, {
     text: text,
-    weight: "bold",
+    weight: _paragraph.P3.Weight.NORMAL,
     hideText: hideText
   }));
 };

package/lib/empty-state/enums/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Style = void 0;
+var Style = Object.freeze({
+  DEFAULT: 'default',
+  PENCIL: 'pencil',
+  UNDER_CONSTRUCTION: 'under_construction'
+});
+exports.Style = Style;

package/lib/empty-state/index.js

@@ -0,0 +1,121 @@
+"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 _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
+
+var _paragraph = require("../text/paragraph");
+
+var _button = require("../button");
+
+var _enums = require("./enums");
+
+var _sharedEnum = require("../shared-enum");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+// @twreporter
+// components
+var OuterContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "empty-state__OuterContainer",
+  componentId: "sc-4ba2ko-0"
+})(["width:100%;margin-top:8px;display:flex;flex-direction:column;align-items:center;"]);
+
+var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "empty-state__Container",
+  componentId: "sc-4ba2ko-1"
+})(["display:flex;flex-direction:column;align-items:center;max-width:280px;"]);
+
+var TextContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "empty-state__TextContainer",
+  componentId: "sc-4ba2ko-2"
+})(["margin:48px 0 24px 0;display:flex;flex-direction:column;align-items:center;color:", ";"], _color.colorGrayscale.gray800);
+
+var ButtonContainer = /*#__PURE__*/_styledComponents["default"].a.withConfig({
+  displayName: "empty-state__ButtonContainer",
+  componentId: "sc-4ba2ko-3"
+})(["text-decoration:none;"]);
+
+var GuideContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "empty-state__GuideContainer",
+  componentId: "sc-4ba2ko-4"
+})(["display:flex;align-items:baseline;color:", ";svg{background-color:", ";width:18px;height:18px;margin:0 4px;transform:translateY(3px);}"], _color.colorGrayscale.gray600, _color.colorGrayscale.gray600);
+
+var EmptyState = function EmptyState(_ref) {
+  var _ref$releaseBranch = _ref.releaseBranch,
+      releaseBranch = _ref$releaseBranch === void 0 ? _releaseBranch.BRANCH.master : _ref$releaseBranch,
+      _ref$style = _ref.style,
+      style = _ref$style === void 0 ? _enums.Style.DEFAULT : _ref$style,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
+      _ref$showGuide = _ref.showGuide,
+      showGuide = _ref$showGuide === void 0 ? true : _ref$showGuide,
+      _ref$guide = _ref.guide,
+      guide = _ref$guide === void 0 ? null : _ref$guide,
+      _ref$showButton = _ref.showButton,
+      showButton = _ref$showButton === void 0 ? true : _ref$showButton,
+      _ref$buttonText = _ref.buttonText,
+      buttonText = _ref$buttonText === void 0 ? '' : _ref$buttonText,
+      _ref$buttonUrl = _ref.buttonUrl,
+      buttonUrl = _ref$buttonUrl === void 0 ? '/' : _ref$buttonUrl;
+  var imageUrl = '';
+  var imageWidth = '';
+
+  switch (style) {
+    case _enums.Style.DEFAULT:
+    default:
+      imageUrl = "https://www.twreporter.org/assets/empty-state/".concat(releaseBranch, "/seek.png");
+      imageWidth = '170';
+      break;
+
+    case _enums.Style.PENCIL:
+      imageUrl = "https://www.twreporter.org/assets/empty-state/".concat(releaseBranch, "/pencil.png");
+      imageWidth = '232';
+      break;
+
+    case _enums.Style.UNDER_CONSTRUCTION:
+      imageUrl = "https://www.twreporter.org/assets/empty-state/".concat(releaseBranch, "/under_construction.png");
+      imageWidth = '177';
+      break;
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(OuterContainer, null, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement("img", {
+    src: imageUrl,
+    width: imageWidth
+  }), /*#__PURE__*/_react["default"].createElement(TextContainer, null, /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
+    text: title,
+    weight: _paragraph.P1.Weight.BOLD
+  }), showGuide && /*#__PURE__*/_react["default"].createElement(GuideContainer, null, typeof guide === 'string' ? /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
+    text: guide
+  }) : guide)), showButton && /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
+    href: buttonUrl
+  }, /*#__PURE__*/_react["default"].createElement(_button.PillButton, {
+    text: buttonText,
+    size: _sharedEnum.Size.L
+  }))));
+};
+
+EmptyState.propTypes = {
+  releaseBranch: _releaseBranch.BRANCH_PROP_TYPES,
+  style: _propTypes["default"].oneOf(Object.values(_enums.Style)),
+  title: _propTypes["default"].string,
+  showGuide: _propTypes["default"].bool,
+  guide: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string]),
+  showButton: _propTypes["default"].bool,
+  buttonText: _propTypes["default"].string,
+  buttonUrl: _propTypes["default"].string
+};
+EmptyState.Style = _enums.Style;
+var _default = EmptyState;
+exports["default"] = _default;

package/lib/empty-state/stories/empty-guide.stories.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.emptyState = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("../index"));
+
+var _enums = require("../enums");
+
+var _getEnumArg = require("../../storybook/utils/get-enum-arg");
+
+var _constants = require("../../storybook/constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  title: 'Empty State',
+  component: _index["default"],
+  argTypes: {
+    releaseBranch: _constants.BRANCH_STORYBOOK_ARG_TYPE,
+    style: (0, _getEnumArg.getRadioArg)(_enums.Style, _enums.Style.DEFAULT)
+  }
+};
+exports["default"] = _default;
+
+var emptyState = function emptyState(args) {
+  return /*#__PURE__*/_react["default"].createElement(_index["default"], args);
+};
+
+exports.emptyState = emptyState;
+emptyState.args = {
+  title: '文字',
+  showGuide: true,
+  guide: '文字文字',
+  showButton: true,
+  buttonText: '按鈕',
+  buttonUrl: '/'
+};

package/lib/listing-page/components/card-list.js

@@ -39,7 +39,7 @@ var _get = _interopRequireDefault(require("lodash/get"));
 
 var _map = _interopRequireDefault(require("lodash/map"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -65,7 +65,7 @@ var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var Item = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "card-list__Item",
   componentId: "yvf001-2"
-})(["margin-bottom:24px;&:hover{opacity:0.7;}&:last-child{margin-bottom:0;}width:100%;", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", "%;\n  "])), _mockupSpec["default"].mobile.cardWidth / _mockupSpec["default"].mobile.maxWidth * 100));
+})(["margin-bottom:24px;&:hover{opacity:0.7;}&:last-child{margin-bottom:0;}width:100%;"]);
 
 var StyledDivider = /*#__PURE__*/(0, _styledComponents["default"])(_divider["default"]).withConfig({
   displayName: "card-list__StyledDivider",
@@ -75,7 +75,7 @@ var StyledDivider = /*#__PURE__*/(0, _styledComponents["default"])(_divider["def
 var FlexItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "card-list__FlexItem",
   componentId: "yvf001-4"
-})(["width:", "px;margin:0 auto;display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;", " ", " ", ""], _mockupSpec["default"].hd.maxWidth, _mediaQuery["default"].desktopOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), _mockupSpec["default"].desktop.maxWidth), _mediaQuery["default"].tabletOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), _mockupSpec["default"].tablet.maxWidth), _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: 100%;\n    justify-content: center;\n  "]))));
+})(["width:", "px;margin:0 auto;display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;", " ", " ", ""], _mockupSpec["default"].hd.maxWidth, _mediaQuery["default"].desktopOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), _mockupSpec["default"].desktop.maxWidth), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), _mockupSpec["default"].tablet.maxWidth), _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: 100%;\n    justify-content: center;\n  "]))));
 
 var Content = (0, _isFetchingWrapper["default"])(FlexItem);
 

package/lib/listing-page/components/list-item.js

@@ -69,7 +69,7 @@ var _ = {
 var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "list-item__Container",
   componentId: "sc-1dx5lew-0"
-})(["width:", "px;", " ", " ", " a{color:", ";}"], _mockupSpec["default"].hd.cardWidth, _mediaQuery["default"].desktopOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), _mockupSpec["default"].desktop.cardWidth), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), _mockupSpec["default"].tablet.cardWidth), _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: ", "%;\n  "])), _mockupSpec["default"].mobile.cardWidth / _mockupSpec["default"].mobile.maxWidth * 100), _color["default"].darkGray);
+})(["width:", "px;", " ", " ", " a{color:", ";}"], _mockupSpec["default"].hd.cardWidth, _mediaQuery["default"].desktopOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), _mockupSpec["default"].desktop.cardWidth), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), _mockupSpec["default"].tablet.cardWidth), _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: 100%;\n  "]))), _color["default"].darkGray);
 
 var HoverEffect = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "list-item__HoverEffect",

package/lib/listing-page/components/list.js

@@ -19,16 +19,16 @@ var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/med
 
 var _date = require("@twreporter/core/lib/utils/date");
 
-var _font = require("@twreporter/core/lib/constants/font");
-
 var _theme = require("@twreporter/core/lib/constants/theme");
 
 var _mockupSpec = _interopRequireDefault(require("../constants/mockup-spec"));
 
-var _color = _interopRequireDefault(require("../constants/color"));
-
 var _listItem = _interopRequireDefault(require("./list-item"));
 
+var _pageContent = _interopRequireDefault(require("./page-content"));
+
+var _titleBar = require("../../title-bar");
+
 var _isFetchingWrapper = _interopRequireDefault(require("../../is-fetching-wrapper"));
 
 var _forEach = _interopRequireDefault(require("lodash/forEach"));
@@ -37,7 +37,7 @@ var _get = _interopRequireDefault(require("lodash/get"));
 
 var _map = _interopRequireDefault(require("lodash/map"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3;
 
 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); }
 
@@ -73,20 +73,10 @@ var _ = {
   map: _map["default"]
 };
 
-var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "list__Container",
-  componentId: "sc-1olquk4-0"
-})(["margin:0 auto;"]);
-
-var Header = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "list__Header",
-  componentId: "sc-1olquk4-1"
-})(["font-size:36px;font-weight:", ";color:", ";margin:0 auto 45px auto;text-align:center;", ""], _font.fontWeight.bold, _color["default"].darkDarkGray, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", "%;\n    text-align: left;\n  "])), _mockupSpec["default"].mobile.cardWidth / _mockupSpec["default"].mobile.maxWidth * 100));
-
 var FlexItems = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "list__FlexItems",
-  componentId: "sc-1olquk4-2"
-})(["width:", "px;margin:0 auto;display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;> div:nth-child(odd){margin-right:", "px;}", " ", " ", ""], _mockupSpec["default"].hd.maxWidth, _mockupSpec["default"].marginBetweenItems, _mediaQuery["default"].desktopOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), _mockupSpec["default"].desktop.maxWidth), _mediaQuery["default"].tabletOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), _mockupSpec["default"].tablet.maxWidth), _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: 100%;\n    > div:nth-child(odd) {\n      margin-right: 0;\n    }\n    justify-content: center;\n  "]))));
+  componentId: "sc-1olquk4-0"
+})(["width:", "px;margin:64px auto 0;display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;> div:nth-child(odd){margin-right:", "px;}", " ", " ", ""], _mockupSpec["default"].hd.maxWidth, _mockupSpec["default"].marginBetweenItems, _mediaQuery["default"].desktopOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), _mockupSpec["default"].desktop.maxWidth), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "px;\n    margin-top: 32px;\n  "])), _mockupSpec["default"].tablet.maxWidth), _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: 100%;\n    margin-top: 24px;\n    > div:nth-child(odd) {\n      margin-right: 0;\n    }\n    justify-content: center;\n  "]))));
 
 var Items = (0, _isFetchingWrapper["default"])(FlexItems);
 
@@ -109,7 +99,8 @@ var List = /*#__PURE__*/function (_PureComponent) {
           catName = _this$props.catName,
           tagName = _this$props.tagName,
           isFetching = _this$props.isFetching,
-          showSpinner = _this$props.showSpinner;
+          showSpinner = _this$props.showSpinner,
+          showCategory = _this$props.showCategory;
       var listJSX = [];
 
       _.forEach(data, function (item) {
@@ -145,7 +136,7 @@ var List = /*#__PURE__*/function (_PureComponent) {
             // In cases which do not have `hero_image`, display `og_image` as fallback.
             src: _.get(item, 'hero_image.resized_targets.mobile.url') || _.get(item, 'og_image.resized_targets.mobile.url')
           },
-          category: _.get(item, 'categories.0.name', ''),
+          category: showCategory && _.get(item, 'category_set.0.category.name', ''),
           pubDate: (0, _date.date2yyyymmdd)(_.get(item, 'published_date', ''), '.'),
           tags: tags,
           link: {
@@ -156,8 +147,10 @@ var List = /*#__PURE__*/function (_PureComponent) {
       });
 
       var headerTitle = catName || (tagName ? "#".concat(tagName) : '');
-      var headerJSX = headerTitle ? /*#__PURE__*/_react["default"].createElement(Header, null, headerTitle) : null;
-      return /*#__PURE__*/_react["default"].createElement(Container, null, headerJSX, /*#__PURE__*/_react["default"].createElement(Items, {
+      var headerJSX = headerTitle ? /*#__PURE__*/_react["default"].createElement(_titleBar.TitleBar, {
+        title: headerTitle !== null && headerTitle !== void 0 ? headerTitle : ''
+      }) : null;
+      return /*#__PURE__*/_react["default"].createElement(_pageContent["default"], null, headerJSX, /*#__PURE__*/_react["default"].createElement(Items, {
         isFetching: isFetching,
         showSpinner: showSpinner
       }, listJSX));
@@ -172,7 +165,8 @@ List.defaultProps = {
   catName: '',
   tagName: '',
   isFetching: false,
-  showSpinner: false
+  showSpinner: false,
+  showCategory: false
 };
 List.propTypes = {
   data: _propTypes["default"].arrayOf(_propTypes["default"].shape({
@@ -188,7 +182,8 @@ List.propTypes = {
   tagName: _propTypes["default"].string,
   catName: _propTypes["default"].string,
   isFetching: _propTypes["default"].bool,
-  showSpinner: _propTypes["default"].bool
+  showSpinner: _propTypes["default"].bool,
+  showCategory: _propTypes["default"].bool
 };
 var _default = List;
 exports["default"] = _default;

package/lib/listing-page/components/{topics/page-content.js → page-content.js}

@@ -7,11 +7,11 @@ exports["default"] = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _predefinedCss = require("../../constants/predefined-css");
+var _predefinedCss = require("../constants/predefined-css");
 
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -21,11 +21,13 @@ var styles = {
   contentWidth: {
     min: 300,
     // px
-    mobile: 95,
+    mobile: 100,
     // %
-    tablet: 700,
+    tablet: 698,
     // px
-    desktop: 870 // px
+    desktop: 922,
+    // px
+    hd: 1130 // px
 
   },
   titlePadding: 0,
@@ -37,8 +39,8 @@ var styles = {
 
 var PageContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "page-content__PageContent",
-  componentId: "sc-1x8tj4h-0"
-})(["min-width:", "px;width:", "%;", " ", " margin:0 auto;", ""], styles.contentWidth.min, styles.contentWidth.mobile, _mediaQuery["default"].tabletOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), styles.contentWidth.tablet), _mediaQuery["default"].desktopAndAbove(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), styles.contentWidth.desktop), _predefinedCss.resetLinkStyle);
+  componentId: "sc-10tix5l-0"
+})(["min-width:", "px;width:", "%;", " ", " ", " margin:0 auto;", ""], styles.contentWidth.min, styles.contentWidth.mobile, _mediaQuery["default"].tabletOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), styles.contentWidth.tablet), _mediaQuery["default"].desktopOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), styles.contentWidth.desktop), _mediaQuery["default"].hdOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), styles.contentWidth.hd), _predefinedCss.resetLinkStyle);
 
 var _default = PageContent;
 exports["default"] = _default;

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

@@ -19,7 +19,7 @@ var _postItem = _interopRequireDefault(require("./post-item"));
 
 var _topicItem = _interopRequireDefault(require("./topic-item"));
 
-var _pageContent = _interopRequireDefault(require("./page-content"));
+var _pageContent = _interopRequireDefault(require("../page-content"));
 
 var _section = require("./section");
 
@@ -29,6 +29,8 @@ var _color = _interopRequireDefault(require("../../constants/color"));
 
 var _font = require("@twreporter/core/lib/constants/font");
 
+var _titleBar = require("@twreporter/react-components/lib/title-bar");
+
 var _get = _interopRequireDefault(require("lodash/get"));
 
 var _map = _interopRequireDefault(require("lodash/map"));
@@ -164,9 +166,11 @@ var Topics = /*#__PURE__*/function (_Component) {
 
         topTopicName = _.get(topics, [0, 'topic_name'], '');
         topicUrl = _.get(topics, [0, 'linkTo'], '');
-        topSectionJSX = [/*#__PURE__*/_react["default"].createElement(_section.SectionTitle, {
-          key: "top-title"
-        }, _topics.TEXT.SECTION_TITLE_FEATURED), /*#__PURE__*/_react["default"].createElement(_section.TopSectionContent, {
+        topSectionJSX = [/*#__PURE__*/_react["default"].createElement(_titleBar.TitleBar, {
+          key: "top-title",
+          title: "\u6DF1\u5EA6\u5C08\u984C",
+          subtitle: _topics.TEXT.SECTION_TITLE_FEATURED
+        }), /*#__PURE__*/_react["default"].createElement(_section.TopSectionContent, {
           key: "top-section",
           topicName: topTopicName,
           topicUrl: topicUrl
@@ -176,7 +180,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(_section.SectionTitle, null, _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(_titleBar.TitleBar, {
+        subtitle: _topics.TEXT.SECTION_TITLE_OTHERS
+      }), /*#__PURE__*/_react["default"].createElement(WrappedListSectionContent, {
         isFetching: isFetching,
         showSpinner: showSpinner
       }));

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SectionTitle = exports.ListSectionContent = exports.TopSectionContent = void 0;
+exports.ListSectionContent = exports.TopSectionContent = void 0;
 
 var _reactRouterDom = require("react-router-dom");
 
@@ -50,13 +50,14 @@ var styles = {
   goToTopicMargin: [20, 'auto', 0, 'auto'],
   goToTopicPadding: [14, 0, 14, 0],
   sectionMargin: {
-    mobile: [0, 0, 35, 0],
-    tablet: [0, 0, 42, 0],
-    desktop: [0, 0, 60, 0]
+    mobile: [24, 0, 36, 0],
+    tablet: [32, 0, 64, 0],
+    desktop: [64, 0, 64, 0]
   },
   titleMargin: {
     mobile: [0, 0, 24, 0],
-    tablet: [0, 0, 42, 0]
+    tablet: [0, 0, 32, 0],
+    desktop: [0, 0, 64, 0]
   },
   titlePadding: [16, 0, 16, 0]
 };
@@ -65,21 +66,14 @@ var StyledLink = /*#__PURE__*/(0, _styledComponents["default"])(_reactRouterDom.
   componentId: "sc-125nvxn-0"
 })(["", " display:block;margin:", ";"], _predefinedCss.resetLinkStyle, (0, _css.arrayToCssShorthand)(styles.goToTopicMargin));
 
-var SectionTitle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "section__SectionTitle",
-  componentId: "sc-125nvxn-1"
-})(["width:100%;border-bottom:2px solid ", ";padding:", ";color:", ";font-size:18px;font-weight:", ";line-height:1;margin:", ";", ""], _color["default"].gray, (0, _css.arrayToCssShorthand)(styles.titlePadding), _color["default"].darkGray, _font.fontWeight.bold, (0, _css.arrayToCssShorthand)(styles.titleMargin.mobile), _mediaQuery["default"].tabletAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    margin: ", ";\n  "])), (0, _css.arrayToCssShorthand)(styles.titleMargin.tablet)));
-
-exports.SectionTitle = SectionTitle;
-
 var SectionContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "section__SectionContent",
-  componentId: "sc-125nvxn-2"
-})(["width:100%;margin:", ";", " ", ""], (0, _css.arrayToCssShorthand)(styles.sectionMargin.mobile), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    margin: ", ";\n  "])), (0, _css.arrayToCssShorthand)(styles.sectionMargin.tablet)), _mediaQuery["default"].desktopAndAbove(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    margin: ", ";\n  "])), (0, _css.arrayToCssShorthand)(styles.sectionMargin.desktop)));
+  componentId: "sc-125nvxn-1"
+})(["width:100%;", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    margin: ", ";\n  "])), (0, _css.arrayToCssShorthand)(styles.sectionMargin.mobile)), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    margin: ", ";\n  "])), (0, _css.arrayToCssShorthand)(styles.sectionMargin.tablet)), _mediaQuery["default"].desktopAndAbove(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    margin: ", ";\n  "])), (0, _css.arrayToCssShorthand)(styles.sectionMargin.desktop)));
 
 var GoToTopic = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "section__GoToTopic",
-  componentId: "sc-125nvxn-3"
+  componentId: "sc-125nvxn-2"
 })(["color:", ";text-align:center;line-height:1;padding:", ";span{display:inline-block;max-width:400px;", " white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0.1px;font-size:16px;font-weight:", ";}svg{height:16px;vertical-align:baseline;margin-left:0.5em;}"], _color["default"].blue, (0, _css.arrayToCssShorthand)(styles.goToTopicPadding), _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      max-width: 290px;\n    "]))), _font.fontWeight.normal);
 
 var TopSectionContent = function TopSectionContent(props) {

package/lib/listing-page/constants/mockup-spec.js

@@ -9,7 +9,7 @@ var marginBetweenItems = 20;
 var _default = {
   marginBetweenItems: marginBetweenItems,
   mobile: {
-    maxWidth: 375,
+    maxWidth: 325 * 2 + marginBetweenItems,
     cardWidth: 325,
     tagsWidth: 240,
     imgHeight: 205

package/lib/material-icon.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var StyledSymbol = /*#__PURE__*/_styledComponents["default"].span.withConfig({
+  displayName: "material-icon__StyledSymbol",
+  componentId: "sc-1mjrid5-0"
+})(["font-variation-settings:", ";"], function (props) {
+  return "\n    'FILL': ".concat(props.fill, ",\n    'wght': ").concat(props.weight, ",\n    'GRAD': ").concat(props.grade, ",\n    'opsz': ").concat(props.size, "\n  ");
+});
+
+var MeterialSymbol = function MeterialSymbol(_ref) {
+  var icon = _ref.icon,
+      _ref$fill = _ref.fill,
+      fill = _ref$fill === void 0 ? false : _ref$fill,
+      _ref$weight = _ref.weight,
+      weight = _ref$weight === void 0 ? 400 : _ref$weight,
+      _ref$grade = _ref.grade,
+      grade = _ref$grade === void 0 ? 0 : _ref$grade,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size;
+  var className = 'material-symbols-outlined';
+  return /*#__PURE__*/_react["default"].createElement(StyledSymbol, {
+    className: className,
+    fill: fill ? '0' : '1',
+    weight: weight,
+    grade: grade,
+    size: size
+  }, icon);
+};
+
+MeterialSymbol.propTypes = {
+  icon: _propTypes["default"].string.isRequired,
+  fill: _propTypes["default"].bool,
+  weight: _propTypes["default"].number,
+  grade: _propTypes["default"].number,
+  size: _propTypes["default"].number
+};
+var _default = MeterialSymbol;
+exports["default"] = _default;

package/lib/title-bar/components/bar.js

@@ -33,12 +33,12 @@ var TitleBar = function TitleBar(_ref) {
       title = _ref$title === void 0 ? '' : _ref$title,
       _ref$subtitle = _ref.subtitle,
       subtitle = _ref$subtitle === void 0 ? '' : _ref$subtitle;
-  return /*#__PURE__*/_react["default"].createElement(BarContainer, null, /*#__PURE__*/_react["default"].createElement(_headline.H1, {
+  return /*#__PURE__*/_react["default"].createElement(BarContainer, null, title ? /*#__PURE__*/_react["default"].createElement(_headline.H1, {
     text: title
-  }), /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
+  }) : null, subtitle ? /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
     text: subtitle,
     weight: _paragraph.P1.Weight.BOLD
-  }), /*#__PURE__*/_react["default"].createElement(_divider["default"], {
+  }) : null, /*#__PURE__*/_react["default"].createElement(_divider["default"], {
     direction: _divider["default"].Direction.HORIZONTAL
   }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.17.0-rc.8",
+  "version": "8.17.0",
   "main": "lib/index.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
   "author": "twreporter <developer@twreporter.org>",
@@ -15,11 +15,12 @@
     "chromatic": "npx chromatic --exit-zero-on-changes"
   },
   "dependencies": {
-    "@twreporter/core": "^1.9.0-rc.1",
-    "@twreporter/redux": "^7.5.1-rc.4",
+    "@twreporter/core": "^1.9.0",
+    "@twreporter/redux": "^7.5.1",
     "fontfaceobserver-es": "^3.3.3",
     "hoist-non-react-statics": "^2.3.1",
     "lodash": "^4.0.0",
+    "material-symbols": "^0.5.5",
     "memoize-one": "^5.0.5",
     "prop-types": "^15.0.0",
     "react": "^16.3.0",
@@ -44,5 +45,5 @@
     "babel-loader": "^8.2.4",
     "chromatic": "^6.5.4"
   },
-  "gitHead": "c01dca1ff16ef8918bc360c10867494f27528ac4"
+  "gitHead": "9dfafcb33035b713b397e10d001ba09eafe6eefb"
 }

package/lib/bookmark-list/empty-guide.js

@@ -1,81 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _color = require("@twreporter/core/lib/constants/color");
-
-var _propTypes = _interopRequireDefault(require("@twreporter/core/lib/constants/prop-types"));
-
-var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
-
-var _requestOrigins = _interopRequireDefault(require("@twreporter/core/lib/constants/request-origins"));
-
-var _icon = require("../icon");
-
-var _paragraph = require("../text/paragraph");
-
-var _button = require("../button");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-// @twreporter
-// components
-var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "empty-guide__Container",
-  componentId: "sc-1y7u9aq-0"
-})(["width:100%;display:flex;flex-direction:column;align-items:center;margin-top:8px;"]);
-
-var TextContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "empty-guide__TextContainer",
-  componentId: "sc-1y7u9aq-1"
-})(["margin:48px 0 24px 0;display:flex;flex-direction:column;align-items:center;color:", ";"], _color.colorGrayscale.gray800);
-
-var ButtonContainer = /*#__PURE__*/_styledComponents["default"].a.withConfig({
-  displayName: "empty-guide__ButtonContainer",
-  componentId: "sc-1y7u9aq-2"
-})(["text-decoration:none;"]);
-
-var GuideContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "empty-guide__GuideContainer",
-  componentId: "sc-1y7u9aq-3"
-})(["display:flex;align-items:baseline;color:", ";svg{background-color:", ";width:18px;height:18px;margin:0 4px;transform:translateY(3px);}"], _color.colorGrayscale.gray600, _color.colorGrayscale.gray600);
-
-var EmptyGuide = function EmptyGuide(_ref) {
-  var _ref$releaseBranch = _ref.releaseBranch,
-      releaseBranch = _ref$releaseBranch === void 0 ? _releaseBranch["default"].master : _ref$releaseBranch;
-  var homepageUrl = _requestOrigins["default"].forClientSideRendering[releaseBranch].main;
-  var seekImageUrl = "https://www.twreporter.org/assets/bookmark/".concat(releaseBranch, "/seek.png");
-  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement("img", {
-    alt: "Seek Bookmark",
-    src: seekImageUrl,
-    width: "170"
-  }), /*#__PURE__*/_react["default"].createElement(TextContainer, null, /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
-    text: "\u4F60\u9084\u6C92\u6709\u5132\u5B58\u4EFB\u4F55\u6587\u7AE0\uFF01",
-    weight: "bold"
-  }), /*#__PURE__*/_react["default"].createElement(GuideContainer, null, /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
-    text: "\u9EDE\u64CA"
-  }), /*#__PURE__*/_react["default"].createElement(_icon.Bookmark, {
-    type: "add",
-    releaseBranch: releaseBranch
-  }), /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
-    text: "\u5C07\u559C\u611B\u7684\u6587\u7AE0\u52A0\u5165\u6211\u7684\u66F8\u7C64"
-  }))), /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
-    href: homepageUrl
-  }, /*#__PURE__*/_react["default"].createElement(_button.PillButton, {
-    text: "\u958B\u59CB\u63A2\u7D22",
-    size: "L"
-  })));
-};
-
-EmptyGuide.propTypes = {
-  releaseBranch: _propTypes["default"].releaseBranch
-};
-var _default = EmptyGuide;
-exports["default"] = _default;

package/lib/bookmark-list/stories/empty-guide.stories.js

@@ -1,39 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.emptyGuide = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _emptyGuide = _interopRequireDefault(require("../empty-guide"));
-
-var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var master = _releaseBranch["default"].master,
-    staging = _releaseBranch["default"].staging,
-    preview = _releaseBranch["default"].preview,
-    release = _releaseBranch["default"].release;
-var _default = {
-  title: 'Bookmark/Empty Guide',
-  component: _emptyGuide["default"],
-  argTypes: {
-    releaseBranch: {
-      defaultValue: master,
-      options: [master, staging, preview, release],
-      control: {
-        type: 'radio'
-      }
-    }
-  }
-};
-exports["default"] = _default;
-
-var emptyGuide = function emptyGuide(args) {
-  return /*#__PURE__*/_react["default"].createElement(_emptyGuide["default"], args);
-};
-
-exports.emptyGuide = emptyGuide;