@twreporter/react-components 8.24.0-rc.1 → 8.24.0-rc.3

package/CHANGELOG.md

@@ -3,6 +3,49 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.24.0-rc.3](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.24.0-rc.2...@twreporter/react-components@8.24.0-rc.3) (2024-01-17)
+
+
+### Bug Fixes
+
+* pass bookmark as parameter when create ([c467e68](https://github.com/twreporter/twreporter-npm-packages/commit/c467e68afc1bb401d9a7e9718d9514d69d4564a2))
+
+
+
+
+
+# [8.24.0-rc.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.24.0-rc.1...@twreporter/react-components@8.24.0-rc.2) (2024-01-15)
+
+
+### Bug Fixes
+
+* add twreporter-redex to storybook config ([22f32ac](https://github.com/twreporter/twreporter-npm-packages/commit/22f32ac1fe777ea8c3a7b1992696b114b72847ae))
+* article card description line climp ([97102e8](https://github.com/twreporter/twreporter-npm-packages/commit/97102e81916ec4cfac09736f3532f2338e6547e5))
+* import title1 & title2 ([4818159](https://github.com/twreporter/twreporter-npm-packages/commit/4818159b12923e107720a590b89e2ec8dade88b5))
+* import title1 to listing-page ([6c69a1d](https://github.com/twreporter/twreporter-npm-packages/commit/6c69a1d37192f29eaa56e1940da149d364a0e304))
+* replace TitleBar by Title1 ([64ec60b](https://github.com/twreporter/twreporter-npm-packages/commit/64ec60b596200eea00bfe240a4a6a1dd1cd3239f))
+* topic id prop types fix ([c66ff8a](https://github.com/twreporter/twreporter-npm-packages/commit/c66ff8a0a4d59ec9023e978522f8242f712181fd))
+* use renderButton istead of cloneElement ([826eda9](https://github.com/twreporter/twreporter-npm-packages/commit/826eda908f6052bf920f22fe1eb93bfe38eaa731))
+* useBookmark throw error ([b332f96](https://github.com/twreporter/twreporter-npm-packages/commit/b332f96f0bf8b0c6bbe9cea7fbf8b0dd3851dd53))
+
+
+### Features
+
+* add short story components ([8f07375](https://github.com/twreporter/twreporter-npm-packages/commit/8f07375709beb48e234a1b2ad4076e27795b73f1))
+* add title2 ([eaf58ae](https://github.com/twreporter/twreporter-npm-packages/commit/eaf58ae4da5d57f73ae7778011b0424a58fd6381))
+* add useBookmark & useStore ([7fd48e5](https://github.com/twreporter/twreporter-npm-packages/commit/7fd48e521e659307b1b91a6b4acdfb4d0a2fd683))
+* article card bookmark button ([824c138](https://github.com/twreporter/twreporter-npm-packages/commit/824c1386f2fa60330fdd7352ad5236715e2b447d))
+* change headline font size ([74b83a1](https://github.com/twreporter/twreporter-npm-packages/commit/74b83a1b853e061dcce10c14a0e7ad4a1986f888))
+* change storybook description ([b9e24d1](https://github.com/twreporter/twreporter-npm-packages/commit/b9e24d11b500f13950d03452f790315c0a68b475))
+* change title bar to title 1 ([951803d](https://github.com/twreporter/twreporter-npm-packages/commit/951803d77cbc22c365f4ad5ef55cc66ee8999aa2))
+* hover on article-card ([4004040](https://github.com/twreporter/twreporter-npm-packages/commit/4004040431825f56b8a5ba1e9c1b02efe1fa3608))
+* no hover effect on bookmark button ([769f0f9](https://github.com/twreporter/twreporter-npm-packages/commit/769f0f9918e4098d8925c9dc4c2196aea258e01d))
+* remove comment ([945f59f](https://github.com/twreporter/twreporter-npm-packages/commit/945f59fc69e1e73168bff6758bd8e423bbd4d013))
+
+
+
+
+
 # [8.24.0-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.24.0-rc.0...@twreporter/react-components@8.24.0-rc.1) (2024-01-15)
 
 **Note:** Version bump only for package @twreporter/react-components

package/lib/card/components/article-card.js

@@ -21,12 +21,18 @@ var _icon = require("../../icon");
 
 var _button = require("../../button");
 
+var _customizedLink = _interopRequireDefault(require("../../customized-link"));
+
 var _sharedEnum = require("../../shared-enum");
 
 var _color = require("@twreporter/core/lib/constants/color");
 
 var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
 
+var _theme = require("@twreporter/core/lib/constants/theme");
+
+var _entityPath = _interopRequireDefault(require("@twreporter/core/lib/constants/entity-path"));
+
 var _width, _height, _marginLeft, _marginTop, _marginBottom;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -44,25 +50,29 @@ var bookmarkStyle = {
 var metaStyle = {
   marginBottom: (_marginBottom = {}, _defineProperty(_marginBottom, _sharedEnum.Size.S, '4px'), _defineProperty(_marginBottom, _sharedEnum.Size.L, '8px'), _marginBottom)
 };
+var Container = /*#__PURE__*/(0, _styledComponents["default"])(_customizedLink["default"]).withConfig({
+  displayName: "article-card__Container",
+  componentId: "sc-9196c7-0"
+})(["text-decoration:none;&:hover{.hover{opacity:0.8;}}"]);
 
 var FlexGroup = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "article-card__FlexGroup",
-  componentId: "sc-9196c7-0"
+  componentId: "sc-9196c7-1"
 })(["display:flex;"]);
 
 var FlexGroupColumn = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "article-card__FlexGroupColumn",
-  componentId: "sc-9196c7-1"
+  componentId: "sc-9196c7-2"
 })(["display:flex;flex-direction:column;"]);
 
 var FlexSpaceBetween = /*#__PURE__*/(0, _styledComponents["default"])(FlexGroup).withConfig({
   displayName: "article-card__FlexSpaceBetween",
-  componentId: "sc-9196c7-2"
+  componentId: "sc-9196c7-3"
 })(["justify-content:space-between;"]);
 var Meta = /*#__PURE__*/(0, _styledComponents["default"])(FlexGroup).withConfig({
   displayName: "article-card__Meta",
-  componentId: "sc-9196c7-3"
-})(["color:", ";flex-direction:row;align-items:center;margin-bottom:", ";& > div{margin-right:8px;}&:last-child{margin-right:0;}", ""], _color.colorGrayscale.gray600, function (props) {
+  componentId: "sc-9196c7-4"
+})(["color:", ";flex-direction:row;align-items:center;margin-bottom:", ";& > p{margin-right:8px;}&:last-child{margin-right:0;}", ""], _color.colorGrayscale.gray600, function (props) {
   return metaStyle.marginBottom[props.size];
 }, function (props) {
   return props.hide ? "display: none;" : '';
@@ -70,18 +80,18 @@ var Meta = /*#__PURE__*/(0, _styledComponents["default"])(FlexGroup).withConfig(
 
 var DescContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "article-card__DescContainer",
-  componentId: "sc-9196c7-4"
-})(["color:", ";margin-top:8px;div{display:-webkit-box;text-overflow:ellipsis;overflow:hidden;line-clamp:3;-webkit-line-clamp:3;-webkit-box-orient:vertical;}"], _color.colorGrayscale.gray800);
+  componentId: "sc-9196c7-5"
+})(["color:", ";margin-top:8px;p{display:-webkit-box;text-overflow:ellipsis;overflow:hidden;line-clamp:3;-webkit-line-clamp:3;-webkit-box-orient:vertical;}"], _color.colorGrayscale.gray800);
 
 var BookmarkContainer = /*#__PURE__*/(0, _styledComponents["default"])(FlexGroup).withConfig({
   displayName: "article-card__BookmarkContainer",
-  componentId: "sc-9196c7-5"
+  componentId: "sc-9196c7-6"
 })(["align-self:flex-end;margin-top:", ";"], function (props) {
   return bookmarkStyle.marginTop[props.size];
 });
 var ImageContainer = /*#__PURE__*/(0, _styledComponents["default"])(FlexGroup).withConfig({
   displayName: "article-card__ImageContainer",
-  componentId: "sc-9196c7-6"
+  componentId: "sc-9196c7-7"
 })(["flex:0 0 auto;align-self:center;width:", ";height:", ";margin-left:", ";"], function (props) {
   return imageStyle.width[props.size];
 }, function (props) {
@@ -91,11 +101,11 @@ var ImageContainer = /*#__PURE__*/(0, _styledComponents["default"])(FlexGroup).w
 });
 var LeftColumn = /*#__PURE__*/(0, _styledComponents["default"])(FlexGroupColumn).withConfig({
   displayName: "article-card__LeftColumn",
-  componentId: "sc-9196c7-7"
+  componentId: "sc-9196c7-8"
 })(["flex:1;"]);
 var TitleText = /*#__PURE__*/(0, _styledComponents["default"])(_headline.H4).withConfig({
   displayName: "article-card__TitleText",
-  componentId: "sc-9196c7-8"
+  componentId: "sc-9196c7-9"
 })(["color:", ";"], _color.colorGrayscale.gray800);
 
 var ArticleCard = function ArticleCard(_ref) {
@@ -115,50 +125,71 @@ var ArticleCard = function ArticleCard(_ref) {
       isBookmarked = _ref$isBookmarked === void 0 ? false : _ref$isBookmarked,
       toggleBookmark = _ref.toggleBookmark,
       _ref$releaseBranch = _ref.releaseBranch,
-      releaseBranch = _ref$releaseBranch === void 0 ? _releaseBranch.BRANCH.master : _ref$releaseBranch;
+      releaseBranch = _ref$releaseBranch === void 0 ? _releaseBranch.BRANCH.master : _ref$releaseBranch,
+      _ref$showIsBookmarked = _ref.showIsBookmarked,
+      showIsBookmarked = _ref$showIsBookmarked === void 0 ? false : _ref$showIsBookmarked,
+      _ref$style = _ref.style,
+      style = _ref$style === void 0 ? _theme.ARTICLE_THEME.v2["default"] : _ref$style,
+      _ref$slug = _ref.slug,
+      slug = _ref$slug === void 0 ? '' : _ref$slug;
   var hideMeta = !category && !date;
   var titleJSX = title ? /*#__PURE__*/_react["default"].createElement(TitleText, {
     text: title,
-    type: "article"
+    type: "article",
+    className: "hover"
   }) : null;
   var dateJSX = date ? /*#__PURE__*/_react["default"].createElement(_paragraph.P3, {
-    text: date
+    text: date,
+    className: "hover"
   }) : null;
   var categoryJSX = category ? /*#__PURE__*/_react["default"].createElement(_paragraph.P3, {
-    text: category
+    text: category,
+    className: "hover"
   }) : null;
   var descriptionJSX = description ? size === _sharedEnum.Size.S ? /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
-    text: description
+    text: description,
+    className: "hover"
   }) : /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
-    text: description
+    text: description,
+    className: "hover"
   }) : null;
+  var isInteractiveArticle = style === _theme.ARTICLE_THEME.v2.interactive;
+  var link = {
+    to: "".concat(isInteractiveArticle ? _entityPath["default"].interactiveArticle : _entityPath["default"].article).concat(slug),
+    target: isInteractiveArticle ? '_blank' : ''
+  };
+
+  var onBookmarkClick = function onBookmarkClick(event) {
+    event.preventDefault();
+    toggleBookmark();
+  };
 
   var bookmarkIcon = /*#__PURE__*/_react["default"].createElement(_icon.Bookmark, {
-    type: _icon.Bookmark.Type.SAVED,
+    type: isBookmarked ? _icon.Bookmark.Type.SAVED : _icon.Bookmark.Type.ADD,
     releaseBranch: releaseBranch
   });
 
-  var bookmarkButton = size === _sharedEnum.Size.S ? /*#__PURE__*/_react["default"].createElement(_button.TextButton, {
+  var bookmarkButton = /*#__PURE__*/_react["default"].createElement(_button.TextButton, {
     theme: _button.TextButton.THEME.normal,
     style: _button.TextButton.Style.LIGHT,
     leftIconComponent: bookmarkIcon,
-    text: "\u53D6\u6D88\u6536\u85CF"
-  }) : /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
-    theme: _button.IconButton.THEME.normal,
-    iconComponent: bookmarkIcon
+    text: isBookmarked ? '已收藏' : '收藏'
   });
-  var bookmarkJSX = isBookmarked ? /*#__PURE__*/_react["default"].createElement(BookmarkContainer, {
-    onClick: toggleBookmark,
+
+  var bookmarkJSX = showIsBookmarked ? /*#__PURE__*/_react["default"].createElement(BookmarkContainer, {
+    onClick: onBookmarkClick,
     size: size
   }, bookmarkButton) : null;
 
   var metaJSX = /*#__PURE__*/_react["default"].createElement(Meta, {
     hide: hideMeta,
-    size: size
+    size: size,
+    className: "hover"
   }, categoryJSX, dateJSX);
 
   var imageJSX = /*#__PURE__*/_react["default"].createElement(ImageContainer, {
-    size: size
+    size: size,
+    className: "hover"
   }, /*#__PURE__*/_react["default"].createElement(_imageWithFallback["default"], {
     src: image.src,
     alt: image.alt,
@@ -166,11 +197,11 @@ var ArticleCard = function ArticleCard(_ref) {
   }));
 
   if (size === _sharedEnum.Size.S) {
-    return /*#__PURE__*/_react["default"].createElement(FlexGroupColumn, null, /*#__PURE__*/_react["default"].createElement(FlexSpaceBetween, null, /*#__PURE__*/_react["default"].createElement(FlexGroupColumn, null, metaJSX, titleJSX), /*#__PURE__*/_react["default"].createElement(FlexGroup, null, imageJSX)), /*#__PURE__*/_react["default"].createElement(FlexGroupColumn, null, /*#__PURE__*/_react["default"].createElement(DescContainer, null, descriptionJSX), bookmarkJSX));
+    return /*#__PURE__*/_react["default"].createElement(Container, link, /*#__PURE__*/_react["default"].createElement(FlexGroupColumn, null, /*#__PURE__*/_react["default"].createElement(FlexSpaceBetween, null, /*#__PURE__*/_react["default"].createElement(FlexGroupColumn, null, metaJSX, titleJSX), /*#__PURE__*/_react["default"].createElement(FlexGroup, null, imageJSX)), /*#__PURE__*/_react["default"].createElement(FlexGroupColumn, null, /*#__PURE__*/_react["default"].createElement(DescContainer, null, descriptionJSX), bookmarkJSX)));
   } // L size
 
 
-  return /*#__PURE__*/_react["default"].createElement(FlexSpaceBetween, null, /*#__PURE__*/_react["default"].createElement(LeftColumn, null, metaJSX, /*#__PURE__*/_react["default"].createElement(FlexGroupColumn, null, titleJSX, /*#__PURE__*/_react["default"].createElement(DescContainer, null, descriptionJSX), bookmarkJSX)), imageJSX);
+  return /*#__PURE__*/_react["default"].createElement(Container, link, /*#__PURE__*/_react["default"].createElement(FlexSpaceBetween, null, /*#__PURE__*/_react["default"].createElement(LeftColumn, null, metaJSX, /*#__PURE__*/_react["default"].createElement(FlexGroupColumn, null, titleJSX, /*#__PURE__*/_react["default"].createElement(DescContainer, null, descriptionJSX), bookmarkJSX)), imageJSX));
 };
 
 ArticleCard.propTypes = {
@@ -186,7 +217,10 @@ ArticleCard.propTypes = {
   size: _propTypes["default"].oneOf(Object.values(_sharedEnum.Size)),
   isBookmarked: _propTypes["default"].bool,
   toggleBookmark: _propTypes["default"].func,
-  releaseBranch: _releaseBranch.BRANCH_PROP_TYPES
+  releaseBranch: _releaseBranch.BRANCH_PROP_TYPES,
+  showIsBookmarked: _propTypes["default"].bool,
+  style: _propTypes["default"].oneOf(Object.values(_theme.ARTICLE_THEME.v2)),
+  slug: _propTypes["default"].string
 };
 ArticleCard.Size = _sharedEnum.Size;
 var _default = ArticleCard;

package/lib/card/components/short-story.js

@@ -0,0 +1,163 @@
+"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"));
+
+var _imageWithFallback = _interopRequireDefault(require("../../image-with-fallback"));
+
+var _paragraph = require("../../text/paragraph");
+
+var _headline = require("../../text/headline");
+
+var _customizedLink = _interopRequireDefault(require("../../customized-link"));
+
+var _sharedEnum = require("../../shared-enum");
+
+var _color = require("@twreporter/core/lib/constants/color");
+
+var _theme = require("@twreporter/core/lib/constants/theme");
+
+var _entityPath = _interopRequireDefault(require("@twreporter/core/lib/constants/entity-path"));
+
+var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
+
+var _width, _height, _marginLeft, _marginBottom;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var imageStyle = {
+  width: (_width = {}, _defineProperty(_width, _sharedEnum.Size.S, '48px'), _defineProperty(_width, _sharedEnum.Size.L, '80px'), _width),
+  height: (_height = {}, _defineProperty(_height, _sharedEnum.Size.S, '48px'), _defineProperty(_height, _sharedEnum.Size.L, '80px'), _height),
+  marginLeft: (_marginLeft = {}, _defineProperty(_marginLeft, _sharedEnum.Size.S, '8px'), _defineProperty(_marginLeft, _sharedEnum.Size.L, '16px'), _marginLeft)
+};
+var metaStyle = {
+  marginBottom: (_marginBottom = {}, _defineProperty(_marginBottom, _sharedEnum.Size.S, '4px'), _defineProperty(_marginBottom, _sharedEnum.Size.L, '8px'), _marginBottom)
+};
+var Container = /*#__PURE__*/(0, _styledComponents["default"])(_customizedLink["default"]).withConfig({
+  displayName: "short-story__Container",
+  componentId: "sc-119yx1u-0"
+})(["text-decoration:none;&:hover{opacity:0.8;}"]);
+
+var FlexGroup = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "short-story__FlexGroup",
+  componentId: "sc-119yx1u-1"
+})(["display:flex;"]);
+
+var FlexGroupColumn = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "short-story__FlexGroupColumn",
+  componentId: "sc-119yx1u-2"
+})(["display:flex;flex-direction:column;"]);
+
+var FlexSpaceBetween = /*#__PURE__*/(0, _styledComponents["default"])(FlexGroup).withConfig({
+  displayName: "short-story__FlexSpaceBetween",
+  componentId: "sc-119yx1u-3"
+})(["justify-content:space-between;"]);
+var Meta = /*#__PURE__*/(0, _styledComponents["default"])(FlexGroup).withConfig({
+  displayName: "short-story__Meta",
+  componentId: "sc-119yx1u-4"
+})(["color:", ";flex-direction:row;align-items:center;margin-bottom:", ";& > p{margin-right:8px;}&:last-child{margin-right:0;}", ""], _color.colorGrayscale.gray600, function (props) {
+  return metaStyle.marginBottom[props.size];
+}, function (props) {
+  return props.hide ? "display: none;" : '';
+});
+var ImageContainer = /*#__PURE__*/(0, _styledComponents["default"])(FlexGroup).withConfig({
+  displayName: "short-story__ImageContainer",
+  componentId: "sc-119yx1u-5"
+})(["flex:0 0 auto;align-self:center;width:", ";height:", ";margin-left:", ";"], function (props) {
+  return imageStyle.width[props.size];
+}, function (props) {
+  return imageStyle.height[props.size];
+}, function (props) {
+  return imageStyle.marginLeft[props.size];
+});
+var LeftColumn = /*#__PURE__*/(0, _styledComponents["default"])(FlexGroupColumn).withConfig({
+  displayName: "short-story__LeftColumn",
+  componentId: "sc-119yx1u-6"
+})(["flex:1;"]);
+var TitleText = /*#__PURE__*/(0, _styledComponents["default"])(_headline.H6).withConfig({
+  displayName: "short-story__TitleText",
+  componentId: "sc-119yx1u-7"
+})(["color:", ";"], _color.colorGrayscale.gray800);
+
+var ShortStory = function ShortStory(_ref) {
+  var _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
+      _ref$date = _ref.date,
+      date = _ref$date === void 0 ? '' : _ref$date,
+      _ref$image = _ref.image,
+      image = _ref$image === void 0 ? {} : _ref$image,
+      _ref$category = _ref.category,
+      category = _ref$category === void 0 ? '' : _ref$category,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _sharedEnum.Size.S : _ref$size,
+      _ref$releaseBranch = _ref.releaseBranch,
+      releaseBranch = _ref$releaseBranch === void 0 ? _releaseBranch.BRANCH.master : _ref$releaseBranch,
+      _ref$style = _ref.style,
+      style = _ref$style === void 0 ? _theme.ARTICLE_THEME.v2["default"] : _ref$style,
+      _ref$slug = _ref.slug,
+      slug = _ref$slug === void 0 ? '' : _ref$slug;
+  var hideMeta = !category && !date;
+  var titleJSX = title ? /*#__PURE__*/_react["default"].createElement(TitleText, {
+    text: title,
+    type: "article"
+  }) : null;
+  var dateJSX = date ? /*#__PURE__*/_react["default"].createElement(_paragraph.P3, {
+    text: date
+  }) : null;
+  var categoryJSX = category ? /*#__PURE__*/_react["default"].createElement(_paragraph.P3, {
+    text: category
+  }) : null;
+  var isInteractiveArticle = style === _theme.ARTICLE_THEME.v2.interactive;
+  var link = {
+    to: "".concat(isInteractiveArticle ? _entityPath["default"].interactiveArticle : _entityPath["default"].article).concat(slug),
+    target: isInteractiveArticle ? '_blank' : ''
+  };
+
+  var metaJSX = /*#__PURE__*/_react["default"].createElement(Meta, {
+    hide: hideMeta,
+    size: size
+  }, categoryJSX, dateJSX);
+
+  var imageJSX = /*#__PURE__*/_react["default"].createElement(ImageContainer, {
+    size: size
+  }, /*#__PURE__*/_react["default"].createElement(_imageWithFallback["default"], {
+    src: image.src,
+    alt: image.alt,
+    releaseBranch: releaseBranch
+  }));
+
+  if (size === _sharedEnum.Size.S) {
+    return /*#__PURE__*/_react["default"].createElement(Container, link, /*#__PURE__*/_react["default"].createElement(FlexGroupColumn, null, /*#__PURE__*/_react["default"].createElement(FlexSpaceBetween, null, /*#__PURE__*/_react["default"].createElement(FlexGroupColumn, null, metaJSX, titleJSX), /*#__PURE__*/_react["default"].createElement(FlexGroup, null, imageJSX))));
+  } // L size
+
+
+  return /*#__PURE__*/_react["default"].createElement(Container, link, /*#__PURE__*/_react["default"].createElement(FlexSpaceBetween, null, /*#__PURE__*/_react["default"].createElement(LeftColumn, null, metaJSX, /*#__PURE__*/_react["default"].createElement(FlexGroupColumn, null, titleJSX)), imageJSX));
+};
+
+ShortStory.propTypes = {
+  title: _propTypes["default"].string.isRequired,
+  date: _propTypes["default"].string,
+  image: _propTypes["default"].shape({
+    alt: _propTypes["default"].string,
+    src: _propTypes["default"].string.isRequired,
+    srcSet: _propTypes["default"].string
+  }),
+  category: _propTypes["default"].string,
+  size: _propTypes["default"].oneOf(Object.values(_sharedEnum.Size)),
+  releaseBranch: _releaseBranch.BRANCH_PROP_TYPES,
+  style: _propTypes["default"].oneOf(Object.values(_theme.ARTICLE_THEME.v2)),
+  slug: _propTypes["default"].string
+};
+ShortStory.Size = _sharedEnum.Size;
+var _default = ShortStory;
+exports["default"] = _default;

package/lib/card/stories/articleCard.stories.js

@@ -51,7 +51,9 @@ var article = {
       src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/220px-Google_Images_2015_logo.svg.png',
       alt: 'test'
     },
-    releaseBranch: _releaseBranch.BRANCH.master
+    releaseBranch: _releaseBranch.BRANCH.master,
+    isBookmarked: true,
+    showIsBookmarked: false
   }
 };
 exports.article = article;

package/lib/card/stories/shortStory.stories.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shortStory = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _shortStory = _interopRequireDefault(require("../components/short-story"));
+
+var _constants = require("../../storybook/constants");
+
+var _getEnumArg = require("../../storybook/utils/get-enum-arg");
+
+var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
+
+var _theme = require("@twreporter/core/lib/constants/theme");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/* eslint react/display-name:0 */
+// components
+// storybooks
+// @twreporters
+var _default = {
+  title: 'Card/Short Story',
+  component: _shortStory["default"],
+  argTypes: {
+    releaseBranch: _constants.BRANCH_STORYBOOK_ARG_TYPE,
+    size: _constants.SIZE_STORYBOOK_ARG_TYPE,
+    style: (0, _getEnumArg.getRadioArg)(_theme.ARTICLE_THEME.v2, _theme.ARTICLE_THEME.v2["default"])
+  }
+};
+exports["default"] = _default;
+
+var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "shortStorystories__Container",
+  componentId: "luhojz-0"
+})(["width:", "px;"], function (props) {
+  return props.size === _shortStory["default"].Size.S ? '343' : '516';
+});
+
+var shortStory = {
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(Container, {
+      size: args.size
+    }, /*#__PURE__*/_react["default"].createElement(_shortStory["default"], args));
+  },
+  args: {
+    size: _shortStory["default"].Size.L,
+    title: '文章標題文章標題文章標題文章標題文章標題文章標題文章標題文章標題',
+    category: '主分類',
+    date: '2022/01/01',
+    image: {
+      src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/220px-Google_Images_2015_logo.svg.png',
+      alt: 'test'
+    },
+    releaseBranch: _releaseBranch.BRANCH.master,
+    style: _theme.ARTICLE_THEME.v2["default"],
+    slug: 'a-test-slug'
+  }
+};
+exports.shortStory = shortStory;

package/lib/hook/index.js

@@ -4,6 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+Object.defineProperty(exports, "useBookmark", {
+  enumerable: true,
+  get: function get() {
+    return _useBookmark["default"];
+  }
+});
 Object.defineProperty(exports, "useFontFaceObserver", {
   enumerable: true,
   get: function get() {
@@ -16,15 +22,27 @@ Object.defineProperty(exports, "useOutsideClick", {
     return _useOutsideClick["default"];
   }
 });
+Object.defineProperty(exports, "useStore", {
+  enumerable: true,
+  get: function get() {
+    return _useStore["default"];
+  }
+});
 
 var _useOutsideClick = _interopRequireDefault(require("./use-outside-click"));
 
 var _useFontFaceObserver = _interopRequireDefault(require("./use-font-face-observer"));
 
+var _useBookmark = _interopRequireDefault(require("./use-bookmark"));
+
+var _useStore = _interopRequireDefault(require("./use-store"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
   useOutsideClick: _useOutsideClick["default"],
-  useFontFaceObserver: _useFontFaceObserver["default"]
+  useFontFaceObserver: _useFontFaceObserver["default"],
+  useBookmark: _useBookmark["default"],
+  useStore: _useStore["default"]
 };
 exports["default"] = _default;

package/lib/hook/use-bookmark.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _redux = _interopRequireDefault(require("@twreporter/redux"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var _ = {
+  get: _get["default"]
+};
+
+function getHostFromWindowLocation() {
+  var defaultHost = 'https://www.twreporter.org';
+
+  try {
+    var _window$location = window.location,
+        host = _window$location.host,
+        protocol = _window$location.protocol;
+
+    if (host && protocol) {
+      return "".concat(protocol, "//").concat(host);
+    } else {
+      console.warn('The host or protocol in `window.location` is not valid:', 'window.location.protocol:', protocol, 'window.location.host:', host, "Return default host '".concat(defaultHost, "' instead."));
+      return defaultHost;
+    }
+  } catch (err) {
+    console.warn('Error on getting `host` and `protocol` from `window.location`:', err);
+  }
+}
+
+var _twreporterRedux$acti = _redux["default"].actions,
+    createSingleBookmark = _twreporterRedux$acti.createSingleBookmark,
+    deleteSingleBookmark = _twreporterRedux$acti.deleteSingleBookmark;
+/**
+ * hook for create or delete bookmark
+ * @param {Array.<{state: object, dispatch: Function}>} store
+ * @param {object} bookmark
+ * @param {string} bookmark.slug
+ * @param {boolean} bookmark.is_external
+ * @param {string} bookmark.title
+ * @param {string} bookmark.desc
+ * @param {string} bookmark.thumbnail
+ * @param {string} bookmark.published_date
+ */
+
+var useBookmark = function useBookmark(store) {
+  var _store = _slicedToArray(store, 2),
+      state = _store[0],
+      dispatch = _store[1];
+
+  var jwt = _.get(state, 'auth.accessToken');
+
+  var userID = _.get(state, 'auth.userInfo.user_id');
+
+  var addCurrentPageToBookmarks = function addCurrentPageToBookmarks(bookmark) {
+    var bookmarkToBeCreated = _objectSpread(_objectSpread({}, bookmark), {}, {
+      host: getHostFromWindowLocation()
+    });
+
+    return dispatch(createSingleBookmark(jwt, userID, bookmarkToBeCreated));
+  };
+
+  var removeCurrentPageFromBookmarks = function removeCurrentPageFromBookmarks(bookmarkID) {
+    if (bookmarkID) {
+      return dispatch(deleteSingleBookmark(jwt, userID, bookmarkID));
+    } else {
+      throw new Error('Error on deleting bookmark: No valid bookmark id.');
+    }
+  };
+
+  return {
+    addAction: addCurrentPageToBookmarks,
+    removeAction: removeCurrentPageFromBookmarks
+  };
+};
+
+var _default = useBookmark;
+exports["default"] = _default;

package/lib/hook/use-store.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = require("react");
+
+var _reactRedux = require("react-redux");
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function useStore() {
+  var _useContext = (0, _react.useContext)(_reactRedux.ReactReduxContext),
+      store = _useContext.store;
+
+  var getState = store.getState,
+      dispatch = store.dispatch,
+      subscribe = store.subscribe;
+
+  var _useState = (0, _react.useState)(getState()),
+      _useState2 = _slicedToArray(_useState, 2),
+      storeState = _useState2[0],
+      setStoreState = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    return subscribe(function () {
+      setStoreState(getState());
+    }, []);
+  });
+  return [storeState, dispatch];
+}
+
+var _default = useStore;
+exports["default"] = _default;

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

@@ -17,22 +17,16 @@ var _isFetchingWrapper = _interopRequireDefault(require("../../is-fetching-wrapp
 
 var _divider = _interopRequireDefault(require("../../divider"));
 
-var _customizedLink = _interopRequireDefault(require("../../customized-link"));
-
 var _rwd = require("../../rwd");
 
 var _mockupSpec = _interopRequireDefault(require("../constants/mockup-spec"));
 
-var _entityPath = _interopRequireDefault(require("@twreporter/core/lib/constants/entity-path"));
-
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
 var _date = require("@twreporter/core/lib/utils/date");
 
 var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
 
-var _theme = require("@twreporter/core/lib/constants/theme");
-
 var _forEach = _interopRequireDefault(require("lodash/forEach"));
 
 var _get = _interopRequireDefault(require("lodash/get"));
@@ -60,12 +54,12 @@ var Card = /*#__PURE__*/(0, _styledComponents["default"])(_card.ArticleCard).wit
 var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "card-list__Container",
   componentId: "yvf001-1"
-})(["display:flex;flex-direction:column;a{color:inherit;text-decoration:none;}"]);
+})(["display:flex;flex-direction:column;"]);
 
 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%;"]);
+})(["margin-bottom:24px;&:last-child{margin-bottom:0;}width:100%;"]);
 
 var StyledDivider = /*#__PURE__*/(0, _styledComponents["default"])(_divider["default"]).withConfig({
   displayName: "card-list__StyledDivider",
@@ -75,7 +69,13 @@ 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(_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  "]))));
+})(["width:", "px;margin:0 auto;display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;", " ", " ", ""], function (props) {
+  return props.width !== 0 ? "".concat(props.width, "%") : _mockupSpec["default"].hd.maxWidth;
+}, _mediaQuery["default"].desktopOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), function (props) {
+  return props.width !== 0 ? "".concat(props.width, "%") : _mockupSpec["default"].desktop.maxWidth;
+}), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), function (props) {
+  return props.width !== 0 ? "".concat(props.width, "%") : _mockupSpec["default"].tablet.maxWidth;
+}), _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: 100%;\n    justify-content: center;\n  "]))));
 
 var Content = (0, _isFetchingWrapper["default"])(FlexItem);
 
@@ -87,7 +87,11 @@ var CardList = function CardList(_ref) {
       _ref$showSpinner = _ref.showSpinner,
       showSpinner = _ref$showSpinner === void 0 ? false : _ref$showSpinner,
       _ref$releaseBranch = _ref.releaseBranch,
-      releaseBranch = _ref$releaseBranch === void 0 ? _releaseBranch.BRANCH.master : _ref$releaseBranch;
+      releaseBranch = _ref$releaseBranch === void 0 ? _releaseBranch.BRANCH.master : _ref$releaseBranch,
+      _ref$showIsBookmarked = _ref.showIsBookmarked,
+      showIsBookmarked = _ref$showIsBookmarked === void 0 ? false : _ref$showIsBookmarked,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 0 : _ref$width;
 
   if (!data || data.length === 0) {
     return null;
@@ -114,11 +118,6 @@ var CardList = function CardList(_ref) {
         title = item.title,
         slug = item.slug,
         style = item.style;
-    var isInteractiveArticle = style === _theme.ARTICLE_THEME.interactive;
-    var link = {
-      to: "".concat(isInteractiveArticle ? _entityPath["default"].interactiveArticle : _entityPath["default"].article).concat(slug),
-      target: isInteractiveArticle ? '_blank' : ''
-    };
     var articleCardProps = {
       title: title,
       description: _.get(item, 'og_description', ''),
@@ -128,20 +127,27 @@ var CardList = function CardList(_ref) {
       },
       category: getFirstCategory(_.get(item, 'category_set', [])),
       date: (0, _date.date2yyyymmdd)(_.get(item, 'published_date'), '/'),
-      releaseBranch: releaseBranch
+      releaseBranch: releaseBranch,
+      style: style,
+      slug: slug,
+      isBookmarked: _.get(item, 'is_bookmarked', false),
+      toggleBookmark: _.get(item, 'toggle_bookmark')
     };
     return /*#__PURE__*/_react["default"].createElement(Item, {
       key: id
-    }, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], link, /*#__PURE__*/_react["default"].createElement(_rwd.DesktopAndAbove, null, /*#__PURE__*/_react["default"].createElement(Card, _extends({}, articleCardProps, {
+    }, /*#__PURE__*/_react["default"].createElement(_rwd.DesktopAndAbove, null, /*#__PURE__*/_react["default"].createElement(Card, _extends({}, articleCardProps, {
+      showIsBookmarked: showIsBookmarked,
       size: _card.ArticleCard.Size.L
     }))), /*#__PURE__*/_react["default"].createElement(_rwd.TabletAndBelow, null, /*#__PURE__*/_react["default"].createElement(Card, _extends({}, articleCardProps, {
+      showIsBookmarked: showIsBookmarked,
       size: _card.ArticleCard.Size.S
-    }))), /*#__PURE__*/_react["default"].createElement(StyledDivider, null)));
+    }))), /*#__PURE__*/_react["default"].createElement(StyledDivider, null));
   });
 
   return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Content, {
     isFetching: isFetching,
-    showSpinner: showSpinner
+    showSpinner: showSpinner,
+    width: width
   }, listJSX));
 };
 
@@ -155,11 +161,15 @@ CardList.propTypes = {
     category_set: _propTypes["default"].array,
     published_date: _propTypes["default"].string.isRequired,
     slug: _propTypes["default"].string.isRequired,
-    style: _propTypes["default"].string
+    style: _propTypes["default"].string,
+    is_bookmarked: _propTypes["default"].bool,
+    toggle_bookmark: _propTypes["default"].func
   })),
   isFetching: _propTypes["default"].bool,
   showSpinner: _propTypes["default"].bool,
-  releaseBranch: _releaseBranch.BRANCH_PROP_TYPES
+  releaseBranch: _releaseBranch.BRANCH_PROP_TYPES,
+  showIsBookmarked: _propTypes["default"].bool,
+  width: _propTypes["default"].number
 };
 var _default = CardList;
 exports["default"] = _default;

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

@@ -147,7 +147,7 @@ var List = /*#__PURE__*/function (_PureComponent) {
       });
 
       var headerTitle = catName || (tagName ? "#".concat(tagName) : '');
-      var headerJSX = headerTitle ? /*#__PURE__*/_react["default"].createElement(_titleBar.TitleBar, {
+      var headerJSX = headerTitle ? /*#__PURE__*/_react["default"].createElement(_titleBar.Title1, {
         title: headerTitle !== null && headerTitle !== void 0 ? headerTitle : ''
       }) : null;
       return /*#__PURE__*/_react["default"].createElement(_pageContent["default"], null, headerJSX, /*#__PURE__*/_react["default"].createElement(Items, {

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

@@ -166,7 +166,7 @@ var Topics = /*#__PURE__*/function (_Component) {
 
         topTopicName = _.get(topics, [0, 'topic_name'], '');
         topicUrl = _.get(topics, [0, 'linkTo'], '');
-        topSectionJSX = [/*#__PURE__*/_react["default"].createElement(_titleBar.TitleBar, {
+        topSectionJSX = [/*#__PURE__*/_react["default"].createElement(_titleBar.Title1, {
           key: "top-title",
           title: "\u6DF1\u5EA6\u5C08\u984C",
           subtitle: _topics.TEXT.SECTION_TITLE_FEATURED
@@ -180,7 +180,7 @@ 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.TitleBar, {
+      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, {
         isFetching: isFetching,
@@ -194,7 +194,7 @@ var Topics = /*#__PURE__*/function (_Component) {
 
 Topics.propTypes = {
   topics: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    id: _propTypes["default"].string.isRequired,
+    id: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]).isRequired,
     linkTo: _propTypes["default"].string.isRequired,
     title: _propTypes["default"].string.isRequired,
     topic_name: _propTypes["default"].string.isRequired,

package/lib/listing-page/stories/cardList.stories.js

@@ -39,7 +39,8 @@ var card = {
       hero_image: {
         description: 'test'
       },
-      slug: 'this-is-a-test-article'
+      slug: 'this-is-a-test-article',
+      is_bookmarked: true
     }, {
       id: '12347',
       title: '文章標題',
@@ -72,7 +73,9 @@ var card = {
       },
       slug: 'this-is-a-test-article-2'
     }],
-    releaseBranch: _releaseBranch.BRANCH.master
+    releaseBranch: _releaseBranch.BRANCH.master,
+    showIsBookmarked: false,
+    width: 100
   }
 };
 exports.card = card;

package/lib/text/headline.js

@@ -61,13 +61,13 @@ var H4Container = /*#__PURE__*/(0, _styledComponents["default"])(DefaultContaine
   componentId: "axdp97-4"
 })(["line-height:150%;font-size:22px;font-family:", ";", ""], function (props) {
   return props.fontFamily;
-}, _mediaQuery["default"].tabletAndBelow(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    font-size: 20px;\n  "]))));
+}, _mediaQuery["default"].tabletAndBelow(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    font-size: 18px;\n  "]))));
 var H5Container = /*#__PURE__*/(0, _styledComponents["default"])(DefaultContainer).withConfig({
   displayName: "headline__H5Container",
   componentId: "axdp97-5"
 })(["line-height:150%;font-size:18px;font-family:", ";", ""], function (props) {
   return props.fontFamily;
-}, _mediaQuery["default"].tabletAndBelow(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    font-size: 18px;\n  "]))));
+}, _mediaQuery["default"].tabletAndBelow(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    font-size: 17px;\n  "]))));
 var H6Container = /*#__PURE__*/(0, _styledComponents["default"])(DefaultContainer).withConfig({
   displayName: "headline__H6Container",
   componentId: "axdp97-6"

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

@@ -0,0 +1,59 @@
+"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"));
+
+var _headline = require("../../text/headline");
+
+var _paragraph = require("../../text/paragraph");
+
+var _divider = _interopRequireDefault(require("../../divider"));
+
+var _color = require("@twreporter/core/lib/constants/color");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+// component
+// @twreporter
+var BarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "title1__BarContainer",
+  componentId: "l5ydji-0"
+})(["width:100%;display:flex;align-items:baseline;gap:16px;align-self:stretch;margin-bottom:16px;"]);
+
+var H2Gray800 = /*#__PURE__*/(0, _styledComponents["default"])(_headline.H2).withConfig({
+  displayName: "title1__H2Gray800",
+  componentId: "l5ydji-1"
+})(["color:", ";"], _color.colorGrayscale.gray800);
+var P1Gray600 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P1).withConfig({
+  displayName: "title1__P1Gray600",
+  componentId: "l5ydji-2"
+})(["color:", ";"], _color.colorGrayscale.gray600);
+
+var Title1 = function Title1(_ref) {
+  var _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
+      _ref$subtitle = _ref.subtitle,
+      subtitle = _ref$subtitle === void 0 ? '' : _ref$subtitle;
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(BarContainer, null, /*#__PURE__*/_react["default"].createElement(H2Gray800, {
+    text: title
+  }), subtitle ? /*#__PURE__*/_react["default"].createElement(P1Gray600, {
+    text: subtitle
+  }) : null), /*#__PURE__*/_react["default"].createElement(_divider["default"], {
+    direction: _divider["default"].Direction.HORIZONTAL
+  }));
+};
+
+Title1.propTypes = {
+  title: _propTypes["default"].string.isRequired,
+  subtitle: _propTypes["default"].string
+};
+var _default = Title1;
+exports["default"] = _default;

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

@@ -0,0 +1,84 @@
+"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"));
+
+var _headline = require("../../text/headline");
+
+var _paragraph = require("../../text/paragraph");
+
+var _divider = _interopRequireDefault(require("../../divider"));
+
+var _rwd = require("../../rwd");
+
+var _sharedEnum = require("../../shared-enum");
+
+var _color = require("@twreporter/core/lib/constants/color");
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var BarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "title2__BarContainer",
+  componentId: "t8u2lz-0"
+})(["width:100%;display:flex;align-self:stretch;margin-bottom:16px;justify-content:space-between;", ""], _mediaQuery["default"].tabletAndBelow(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    margin-bottom: 8px;\n  "]))));
+
+var Text = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "title2__Text",
+  componentId: "t8u2lz-1"
+})(["display:flex;align-items:baseline;gap:16px;"]);
+
+var H5Gray800 = /*#__PURE__*/(0, _styledComponents["default"])(_headline.H5).withConfig({
+  displayName: "title2__H5Gray800",
+  componentId: "t8u2lz-2"
+})(["color:", ";"], _color.colorGrayscale.gray800);
+var P2Gray600 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P2).withConfig({
+  displayName: "title2__P2Gray600",
+  componentId: "t8u2lz-3"
+})(["color:", ";"], _color.colorGrayscale.gray600);
+var DividerGray800 = /*#__PURE__*/(0, _styledComponents["default"])(_divider["default"]).withConfig({
+  displayName: "title2__DividerGray800",
+  componentId: "t8u2lz-4"
+})(["border-color:", ";"], _color.colorGrayscale.gray800);
+
+var Title2 = function Title2(_ref) {
+  var _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
+      _ref$subtitle = _ref.subtitle,
+      subtitle = _ref$subtitle === void 0 ? '' : _ref$subtitle,
+      renderButton = _ref.renderButton;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_rwd.DesktopAndAbove, null, /*#__PURE__*/_react["default"].createElement(BarContainer, null, /*#__PURE__*/_react["default"].createElement(Text, null, /*#__PURE__*/_react["default"].createElement(H5Gray800, {
+    text: title
+  }), subtitle ? /*#__PURE__*/_react["default"].createElement(P2Gray600, {
+    text: subtitle
+  }) : null), renderButton ? renderButton(_sharedEnum.Size.L) : null), /*#__PURE__*/_react["default"].createElement(DividerGray800, {
+    direction: _divider["default"].Direction.HORIZONTAL
+  })), /*#__PURE__*/_react["default"].createElement(_rwd.TabletAndBelow, null, /*#__PURE__*/_react["default"].createElement(BarContainer, null, /*#__PURE__*/_react["default"].createElement(Text, null, /*#__PURE__*/_react["default"].createElement(H5Gray800, {
+    text: title
+  }), subtitle ? /*#__PURE__*/_react["default"].createElement(P2Gray600, {
+    text: subtitle
+  }) : null), renderButton ? renderButton(_sharedEnum.Size.S) : null), /*#__PURE__*/_react["default"].createElement(DividerGray800, {
+    direction: _divider["default"].Direction.HORIZONTAL
+  })));
+};
+
+Title2.propTypes = {
+  title: _propTypes["default"].string.isRequired,
+  subtitle: _propTypes["default"].string,
+  renderButton: _propTypes["default"].func
+};
+var _default = Title2;
+exports["default"] = _default;

package/lib/title-bar/index.js

@@ -3,10 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "TitleBar", {
+Object.defineProperty(exports, "Title1", {
   enumerable: true,
   get: function get() {
-    return _bar["default"];
+    return _title["default"];
+  }
+});
+Object.defineProperty(exports, "Title2", {
+  enumerable: true,
+  get: function get() {
+    return _title2["default"];
   }
 });
 Object.defineProperty(exports, "TitleTab", {
@@ -17,14 +23,17 @@ Object.defineProperty(exports, "TitleTab", {
 });
 exports["default"] = void 0;
 
-var _bar = _interopRequireDefault(require("./components/bar"));
+var _title = _interopRequireDefault(require("./components/title1"));
+
+var _title2 = _interopRequireDefault(require("./components/title2"));
 
 var _tab = _interopRequireDefault(require("./components/tab"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
-  TitleBar: _bar["default"],
+  Title1: _title["default"],
+  Title2: _title2["default"],
   TitleTab: _tab["default"]
 };
 exports["default"] = _default;

package/lib/title-bar/stories/{bar.stories.js → title1.stories.js}

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.tagBar = exports["default"] = exports.bookmarkBar = exports.bar = void 0;
 
-var _bar = _interopRequireDefault(require("../components/bar"));
+var _title = _interopRequireDefault(require("../components/title1"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
-  title: 'Title Bar/Bar',
-  component: _bar["default"]
+  title: 'Title Bar/Title 1',
+  component: _title["default"]
 };
 exports["default"] = _default;
 var bar = {

package/lib/title-bar/stories/title2.stories.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.title2 = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _title = _interopRequireDefault(require("../components/title2"));
+
+var _textButton = _interopRequireDefault(require("../../button/components/textButton"));
+
+var _icon = require("../../icon");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/* eslint react/display-name:0 */
+var _default = {
+  title: 'Title Bar/Title 2',
+  component: _title["default"],
+  argTypes: {
+    // showButton is only for storybook check
+    showButton: {
+      defaultValue: true,
+      control: {
+        type: 'boolean'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+var title2 = {
+  render: function render(args) {
+    args.renderButton = args.showButton ? function (size) {
+      return /*#__PURE__*/_react["default"].createElement(_textButton["default"], {
+        text: "RWD \u6309\u9215",
+        rightIconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
+          direction: "right"
+        }),
+        size: size
+      });
+    } : null;
+    return /*#__PURE__*/_react["default"].createElement(_title["default"], args);
+  },
+  args: {
+    title: 'RWD 標題',
+    subtitle: '副標',
+    showButton: true
+  },
+  parameters: {
+    controls: {
+      exclude: ['renderButton']
+    }
+  }
+};
+exports.title2 = title2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.24.0-rc.1",
+  "version": "8.24.0-rc.3",
   "main": "lib/index.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
   "author": "twreporter <developer@twreporter.org>",
@@ -15,8 +15,8 @@
     "chromatic": "npx chromatic --exit-zero-on-changes"
   },
   "dependencies": {
-    "@twreporter/core": "^1.16.0",
-    "@twreporter/redux": "^7.10.0-rc.0",
+    "@twreporter/core": "^1.17.0-rc.0",
+    "@twreporter/redux": "^7.10.0-rc.2",
     "fontfaceobserver-es": "^3.3.3",
     "hoist-non-react-statics": "^2.3.1",
     "lodash": "^4.0.0",
@@ -51,5 +51,5 @@
     "react-dom": "^16.0.0",
     "storybook": "^7.5.2"
   },
-  "gitHead": "101e7eefd114f9d586d1882490c1742426b1e40d"
+  "gitHead": "fae9f717d3c7766dc48a538d5cf1f5c8d2d93f6d"
 }

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

@@ -1,51 +0,0 @@
-"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"));
-
-var _headline = require("../../text/headline");
-
-var _paragraph = require("../../text/paragraph");
-
-var _divider = _interopRequireDefault(require("../../divider"));
-
-var _color = require("@twreporter/core/lib/constants/color");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-// component
-// @twreporter
-var BarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "bar__BarContainer",
-  componentId: "sc-18ncllq-0"
-})(["display:flex;width:100%;flex-direction:column;color:", ";& > div{margin-bottom:16px;&:last-child{margin-bottom:0;}}"], _color.colorGrayscale.gray800);
-
-var TitleBar = function TitleBar(_ref) {
-  var _ref$title = _ref.title,
-      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, title ? /*#__PURE__*/_react["default"].createElement(_headline.H1, {
-    text: title
-  }) : null, subtitle ? /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
-    text: subtitle,
-    weight: _paragraph.P1.Weight.BOLD
-  }) : null, /*#__PURE__*/_react["default"].createElement(_divider["default"], {
-    direction: _divider["default"].Direction.HORIZONTAL
-  }));
-};
-
-TitleBar.propTypes = {
-  title: _propTypes["default"].string,
-  subtitle: _propTypes["default"].string
-};
-var _default = TitleBar;
-exports["default"] = _default;