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

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.21.0-rc.3](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.21.0-rc.2...@twreporter/react-components@8.21.0-rc.3) (2023-11-13)
+
+
+### Bug Fixes
+
+* use Object.freeze and use en-US ([e4ff2a0](https://github.com/twreporter/twreporter-npm-packages/commit/e4ff2a0dda08003eb762d3009b6670b6c84cbcf1))
+
+
+### Features
+
+* new moblie member role card ([2e01669](https://github.com/twreporter/twreporter-npm-packages/commit/2e01669144c072d5bd89d88fe68b97d69e8b6e6f))
+
+
+
+
+
+# [8.21.0-rc.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.21.0-rc.1...@twreporter/react-components@8.21.0-rc.2) (2023-11-13)
+
+
+### Features
+
+* add `InheritLinkButton` component & story ([81788c5](https://github.com/twreporter/twreporter-npm-packages/commit/81788c5cbe4ac208656a83ae9dd565f1e06bb587))
+
+
+
+
+
 # [8.21.0-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.21.0-rc.0...@twreporter/react-components@8.21.0-rc.1) (2023-11-13)
 
 

package/lib/button/components/link.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.InheritLinkButton = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -19,7 +19,8 @@ var _enums = require("../enums");
 
 var _color2 = require("@twreporter/core/lib/constants/color");
 
-var _excluded = ["type", "link", "text", "weight", "TextComponent", "disabled"];
+var _excluded = ["type", "link", "text", "weight", "TextComponent", "disabled"],
+    _excluded2 = ["type", "link", "text"];
 
 var _decoration, _color;
 
@@ -37,16 +38,24 @@ var style = {
   decoration: (_decoration = {}, _defineProperty(_decoration, _enums.LinkType.DEFAULT, 'none'), _defineProperty(_decoration, _enums.LinkType.UNDERLINE, 'underline'), _decoration),
   color: (_color = {}, _defineProperty(_color, _enums.LinkType.DEFAULT, _color2.COLOR_SEMANTIC.info), _defineProperty(_color, _enums.LinkType.UNDERLINE, _color2.colorGrayscale.gray600), _color)
 };
-var LinkContainer = /*#__PURE__*/(0, _styledComponents["default"])(_customizedLink["default"]).withConfig({
-  displayName: "link__LinkContainer",
+var BaseContainer = /*#__PURE__*/(0, _styledComponents["default"])(_customizedLink["default"]).withConfig({
+  displayName: "link__BaseContainer",
   componentId: "g5z7t5-0"
-})(["display:flex;align-items:center;text-underline-offset:4px;text-decoration-line:", ";color:", ";", ""], function (props) {
+})(["text-underline-offset:4px;text-decoration-line:", ";color:", ";&:hover{text-decoration-line:underline;}"], function (props) {
   return style.decoration[props.type];
 }, function (props) {
   return style.color[props.type];
-}, function (props) {
-  return props.disabled ? "\n    opacity: 0.5;\n    cursor: auto;\n    -webkit-tap-highlight-color: transparent;\n  " : "\n    &:hover {\n      text-decoration-line: underline;\n    }\n  ";
 });
+var LinkContainer = /*#__PURE__*/(0, _styledComponents["default"])(BaseContainer).withConfig({
+  displayName: "link__LinkContainer",
+  componentId: "g5z7t5-1"
+})(["display:flex;align-items:center;", ""], function (props) {
+  return props.disabled ? "\n    opacity: 0.5;\n    cursor: auto;\n    -webkit-tap-highlight-color: transparent;\n  " : "\n  ";
+});
+var InheritLinkContainer = /*#__PURE__*/(0, _styledComponents["default"])(BaseContainer).withConfig({
+  displayName: "link__InheritLinkContainer",
+  componentId: "g5z7t5-2"
+})([""]);
 
 var LinkButton = function LinkButton(_ref) {
   var _ref$type = _ref.type,
@@ -86,5 +95,27 @@ LinkButton.propTypes = {
 };
 LinkButton.Type = _enums.LinkType;
 LinkButton.Weight = _paragraph.P1.Weight;
+
+var InheritLinkButton = function InheritLinkButton(_ref2) {
+  var _ref2$type = _ref2.type,
+      type = _ref2$type === void 0 ? _enums.LinkType.DEFAULT : _ref2$type,
+      _ref2$link = _ref2.link,
+      link = _ref2$link === void 0 ? {} : _ref2$link,
+      _ref2$text = _ref2.text,
+      text = _ref2$text === void 0 ? '' : _ref2$text,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  return /*#__PURE__*/_react["default"].createElement(InheritLinkContainer, _extends({
+    type: type
+  }, props), text);
+};
+
+exports.InheritLinkButton = InheritLinkButton;
+InheritLinkButton.propTypes = {
+  type: _propTypes["default"].oneOf(Object.values(_enums.LinkType)),
+  link: _propTypes["default"].object,
+  text: _propTypes["default"].string.isRequired
+};
+InheritLinkButton.Type = _enums.LinkType;
 var _default = LinkButton;
 exports["default"] = _default;

package/lib/button/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,6 +17,12 @@ Object.defineProperty(exports, "IconWithTextButton", {
     return _iconWithTextButton["default"];
   }
 });
+Object.defineProperty(exports, "InheritLinkButton", {
+  enumerable: true,
+  get: function get() {
+    return _link.InheritLinkButton;
+  }
+});
 Object.defineProperty(exports, "LinkButton", {
   enumerable: true,
   get: function get() {
@@ -57,10 +65,14 @@ var _textButton = _interopRequireDefault(require("./components/textButton"));
 
 var _toggleButton = _interopRequireDefault(require("./components/toggleButton"));
 
-var _link = _interopRequireDefault(require("./components/link"));
+var _link = _interopRequireWildcard(require("./components/link"));
 
 var _menuButton = _interopRequireDefault(require("./components/menuButton"));
 
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
@@ -70,6 +82,7 @@ var _default = {
   TextButton: _textButton["default"],
   ToggleButton: _toggleButton["default"],
   LinkButton: _link["default"],
+  InheritLinkButton: _link.InheritLinkButton,
   MenuButton: _menuButton["default"]
 };
 exports["default"] = _default;

package/lib/button/stories/link.stories.js

@@ -1,20 +1,28 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.link = exports.disabledLink = exports["default"] = exports.changeTextComponent = void 0;
+exports.linkInParagraph = exports.link = exports.disabledLink = exports["default"] = exports.changeTextComponent = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _getEnumArg = require("../../storybook/utils/get-enum-arg");
 
-var _link = _interopRequireDefault(require("../components/link"));
+var _link = _interopRequireWildcard(require("../components/link"));
 
 var _paragraph = require("../../text/paragraph");
 
 var _headline = require("../../text/headline");
 
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
@@ -22,6 +30,7 @@ var _default = {
   component: _link["default"],
   argTypes: {
     type: (0, _getEnumArg.getRadioArg)(_link["default"].Type, _link["default"].Type.DEFAULT),
+    weight: (0, _getEnumArg.getRadioArg)(_link["default"].Weight, _link["default"].Weight.NORMAL),
     // textComponent is only for storybook showcase, not real props
     textComponent: {
       defaultValue: 'P2',
@@ -29,6 +38,19 @@ var _default = {
       control: {
         type: 'radio'
       }
+    },
+    // leftWord & rightWord is only for storybook showcase, not real props
+    leftWord: {
+      defaultValue: '連結左邊的文字',
+      control: {
+        type: 'text'
+      }
+    },
+    rightWord: {
+      defaultValue: '連結左邊的文字',
+      control: {
+        type: 'text'
+      }
     }
   }
 };
@@ -49,7 +71,7 @@ link.args = {
 };
 link.parameters = {
   controls: {
-    exclude: ['textComponent']
+    exclude: ['textComponent', 'leftWord', 'rightWord']
   }
 };
 
@@ -76,7 +98,7 @@ changeTextComponent.args = {
 };
 changeTextComponent.parameters = {
   controls: {
-    exclude: ['TextComponent']
+    exclude: ['TextComponent', 'leftWord', 'rightWord']
   }
 };
 var disabledLink = Template.bind({});
@@ -91,6 +113,28 @@ disabledLink.args = {
 };
 disabledLink.parameters = {
   controls: {
-    exclude: ['textComponent', 'disabled']
+    exclude: ['textComponent', 'disabled', 'leftWord', 'rightWord']
+  }
+};
+var StyledP1 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P1).withConfig({
+  displayName: "linkstories__StyledP1",
+  componentId: "sc-1i9kyc3-0"
+})(["display:unset;"]);
+
+var linkInParagraph = function linkInParagraph(args) {
+  return /*#__PURE__*/_react["default"].createElement(StyledP1, null, args.leftWord, /*#__PURE__*/_react["default"].createElement(_link.InheritLinkButton, args), args.rightWord);
+};
+
+exports.linkInParagraph = linkInParagraph;
+linkInParagraph.args = {
+  text: '文字',
+  type: _link["default"].Type.DEFAULT,
+  link: {
+    to: 'https://www.twreporter.org'
+  }
+};
+linkInParagraph.parameters = {
+  controls: {
+    exclude: ['textComponent', 'disabled', 'weight', 'TextComponent']
   }
 };

package/lib/mobile-member-role-card/index.js

@@ -17,48 +17,51 @@ var _color = require("@twreporter/core/lib/constants/color");
 
 var _memberRole = require("@twreporter/core/lib/constants/member-role");
 
+var _readingTimeUnit = require("@twreporter/core/lib/constants/reading-time-unit");
+
 var _paragraph = require("../text/paragraph");
 
-var _CardBgColor, _CardTextColor, _CardMarkStyle;
+var _CardBgColor, _CardP2TextColor, _CardP1TextColor, _CardMarkStyle;
 
 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 CardBgColor = (_CardBgColor = {}, _defineProperty(_CardBgColor, _memberRole.MEMBER_ROLE.explorer, _color.colorGrayscale.white), _defineProperty(_CardBgColor, _memberRole.MEMBER_ROLE.action_taker, _color.colorGrayscale.gray200), _defineProperty(_CardBgColor, _memberRole.MEMBER_ROLE.trailblazer, _color.colorGrayscale.gray900), _CardBgColor);
-var CardTextColor = (_CardTextColor = {}, _defineProperty(_CardTextColor, _memberRole.MEMBER_ROLE.explorer, _color.colorGrayscale.gray800), _defineProperty(_CardTextColor, _memberRole.MEMBER_ROLE.action_taker, _color.colorGrayscale.gray800), _defineProperty(_CardTextColor, _memberRole.MEMBER_ROLE.trailblazer, _color.colorGrayscale.white), _CardTextColor);
+var CardP2TextColor = (_CardP2TextColor = {}, _defineProperty(_CardP2TextColor, _memberRole.MEMBER_ROLE.explorer, _color.colorGrayscale.gray700), _defineProperty(_CardP2TextColor, _memberRole.MEMBER_ROLE.action_taker, _color.colorGrayscale.gray700), _defineProperty(_CardP2TextColor, _memberRole.MEMBER_ROLE.trailblazer, _color.colorGrayscale.gray200), _CardP2TextColor);
+var CardP1TextColor = (_CardP1TextColor = {}, _defineProperty(_CardP1TextColor, _memberRole.MEMBER_ROLE.explorer, _color.colorGrayscale.gray800), _defineProperty(_CardP1TextColor, _memberRole.MEMBER_ROLE.action_taker, _color.colorGrayscale.gray800), _defineProperty(_CardP1TextColor, _memberRole.MEMBER_ROLE.trailblazer, _color.colorGrayscale.white), _CardP1TextColor);
 var CardMarkStyle = (_CardMarkStyle = {}, _defineProperty(_CardMarkStyle, _memberRole.MEMBER_ROLE.explorer, {
-  width: '193px',
-  height: '120px'
+  width: '214px',
+  height: '343px'
 }), _defineProperty(_CardMarkStyle, _memberRole.MEMBER_ROLE.action_taker, {
-  width: '193px',
-  height: '157px'
+  width: '208px',
+  height: '307px'
 }), _defineProperty(_CardMarkStyle, _memberRole.MEMBER_ROLE.trailblazer, {
-  width: '166px',
-  height: '196px'
+  width: '219px',
+  height: '328px'
 }), _CardMarkStyle);
 
 var CardContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "mobile-member-role-card__CardContainer",
   componentId: "sc-1n1fg2v-0"
-})(["max-width:320px;width:100%;min-width:296px;border-radius:16px;box-shadow:0px 4px 4px rgba(0,0,0,0.05),inset 2px 2px 4px rgba(255,255,255,0.5),inset -2px -2px 2px rgba(0,0,0,0.15);aspect-ratio:1/1.6;background-color:", ";padding:24px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;"], function (props) {
+})(["max-width:320px;min-width:296px;border-radius:16px;box-shadow:0px 4px 4px rgba(0,0,0,0.05),inset 2px 2px 4px rgba(255,255,255,0.5),inset -2px -2px 2px rgba(0,0,0,0.15);aspect-ratio:1/1.6;background-color:", ";padding:24px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:flex;flex-direction:row;position:relative;"], function (props) {
   return props.bgColor;
 });
 
-var RelativeDiv = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "mobile-member-role-card__RelativeDiv",
+var LeftColumn = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "mobile-member-role-card__LeftColumn",
   componentId: "sc-1n1fg2v-1"
-})(["position:relative;width:100%;height:100%;display:flex;justify-content:space-between;"]);
+})(["width:100%;height:100%;margin-right:16px;display:flex;flex-direction:column;justify-content:space-between;"]);
 
-var FlexContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "mobile-member-role-card__FlexContainer",
+var RightColumn = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "mobile-member-role-card__RightColumn",
   componentId: "sc-1n1fg2v-2"
-})(["display:flex;flex-direction:column;height:100%;"]);
+})(["width:42px;"]);
 
 var LogoContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "mobile-member-role-card__LogoContainer",
   componentId: "sc-1n1fg2v-3"
-})([""]);
+})(["width:100%;display:flex;justify-content:center;align-items:end;"]);
 
 var LogoImg = /*#__PURE__*/_styledComponents["default"].img.withConfig({
   displayName: "mobile-member-role-card__LogoImg",
@@ -68,7 +71,7 @@ var LogoImg = /*#__PURE__*/_styledComponents["default"].img.withConfig({
 var MarkContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "mobile-member-role-card__MarkContainer",
   componentId: "sc-1n1fg2v-5"
-})(["flex:1;display:flex;justify-content:start;align-items:center;"]);
+})(["position:absolute;left:0;top:0;"]);
 
 var MarkImgs = /*#__PURE__*/_styledComponents["default"].img.withConfig({
   displayName: "mobile-member-role-card__MarkImgs",
@@ -79,24 +82,49 @@ var MarkImgs = /*#__PURE__*/_styledComponents["default"].img.withConfig({
   return CardMarkStyle[props.role].height;
 });
 
-var DataContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "mobile-member-role-card__DataContainer",
+var InfoContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "mobile-member-role-card__InfoContainer",
   componentId: "sc-1n1fg2v-7"
-})([""]);
+})(["display:flex;flex-direction:column;gap:10px;"]);
 
 var TextContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "mobile-member-role-card__TextContainer",
   componentId: "sc-1n1fg2v-8"
-})(["color:", ";padding-bottom:", "px;overflow-wrap:anywhere;"], function (props) {
-  return props.color;
-}, function (props) {
-  return props.paddingBottom || 0;
-});
+})(["display:flex;flex-direction:row;justify-content:space-between;"]);
+
+var TitleContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "mobile-member-role-card__TitleContainer",
+  componentId: "sc-1n1fg2v-9"
+})(["height:100%;display:flex;flex-direction:column;justify-content:space-between;"]);
 
 var TitleImg = /*#__PURE__*/_styledComponents["default"].img.withConfig({
   displayName: "mobile-member-role-card__TitleImg",
-  componentId: "sc-1n1fg2v-9"
-})(["position:relative;top:0;right:0;height:100%;"]);
+  componentId: "sc-1n1fg2v-10"
+})(["width:100%;"]);
+
+var P3Gray500 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P3).withConfig({
+  displayName: "mobile-member-role-card__P3Gray500",
+  componentId: "sc-1n1fg2v-11"
+})(["color:", ";"], _color.colorGrayscale.gray500);
+
+var Gray500BottomLine = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "mobile-member-role-card__Gray500BottomLine",
+  componentId: "sc-1n1fg2v-12"
+})(["border-bottom:0.5px solid;border-color:", ";flex:1;margin-left:8px;margin-right:8px;margin-bottom:4.5px;"], _color.colorGrayscale.gray500);
+
+var P2TextContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "mobile-member-role-card__P2TextContainer",
+  componentId: "sc-1n1fg2v-13"
+})(["color:", ";overflow-wrap:anywhere;"], function (props) {
+  return props.color;
+});
+
+var StyledP1 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P1).withConfig({
+  displayName: "mobile-member-role-card__StyledP1",
+  componentId: "sc-1n1fg2v-14"
+})(["color:", ";line-height:125%;letter-spacing:10%;"], function (props) {
+  return props.color;
+});
 
 var MobileMemberRoleCard = function MobileMemberRoleCard(_ref) {
   var _ref$role = _ref.role,
@@ -108,46 +136,52 @@ var MobileMemberRoleCard = function MobileMemberRoleCard(_ref) {
       _ref$joinDate = _ref.joinDate,
       joinDate = _ref$joinDate === void 0 ? '' : _ref$joinDate,
       _ref$name = _ref.name,
-      name = _ref$name === void 0 ? '' : _ref$name;
+      name = _ref$name === void 0 ? '' : _ref$name,
+      _ref$articleReadCount = _ref.articleReadCount,
+      articleReadCount = _ref$articleReadCount === void 0 ? 0 : _ref$articleReadCount,
+      _ref$articleReadingTi = _ref.articleReadingTimeUnit,
+      articleReadingTimeUnit = _ref$articleReadingTi === void 0 ? _readingTimeUnit.READING_TIME_UNIT.minute : _ref$articleReadingTi,
+      _ref$articleReadingTi2 = _ref.articleReadingTime,
+      articleReadingTime = _ref$articleReadingTi2 === void 0 ? 0 : _ref$articleReadingTi2,
+      _ref$hideInfo = _ref.hideInfo,
+      hideInfo = _ref$hideInfo === void 0 ? false : _ref$hideInfo;
   var logoUrl = "https://www.twreporter.org/assets/user-role-card/".concat(releaseBranch, "/").concat(role, "_logo.png");
-  var titleUrl = "https://www.twreporter.org/assets/user-role-card/".concat(releaseBranch, "/").concat(role, "_title.png");
+  var titleUrl = "https://www.twreporter.org/assets/user-role-card/".concat(releaseBranch, "/").concat(role, "_title.svg");
   var markUrl = "https://www.twreporter.org/assets/user-role-card/".concat(releaseBranch, "/").concat(role, "_mark.png");
   return /*#__PURE__*/_react["default"].createElement(CardContainer, {
     bgColor: CardBgColor[role]
-  }, /*#__PURE__*/_react["default"].createElement(RelativeDiv, null, /*#__PURE__*/_react["default"].createElement(FlexContainer, null, /*#__PURE__*/_react["default"].createElement(LogoContainer, null, /*#__PURE__*/_react["default"].createElement(LogoImg, {
-    src: logoUrl
-  })), /*#__PURE__*/_react["default"].createElement(MarkContainer, null, /*#__PURE__*/_react["default"].createElement(MarkImgs, {
+  }, /*#__PURE__*/_react["default"].createElement(MarkContainer, null, /*#__PURE__*/_react["default"].createElement(MarkImgs, {
     role: role,
     src: markUrl
-  })), /*#__PURE__*/_react["default"].createElement(DataContainer, null, role !== _memberRole.MEMBER_ROLE.explorer && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(TextContainer, {
-    color: _color.colorGrayscale.gray500
-  }, /*#__PURE__*/_react["default"].createElement(_paragraph.P3, {
-    text: '姓名'
-  })), /*#__PURE__*/_react["default"].createElement(TextContainer, {
-    color: CardTextColor[role],
-    paddingBottom: 8
-  }, /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
+  })), /*#__PURE__*/_react["default"].createElement(LeftColumn, null, /*#__PURE__*/_react["default"].createElement(P2TextContainer, {
+    color: CardP2TextColor[role]
+  }, role !== _memberRole.MEMBER_ROLE.explorer && /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
     text: name
-  }))), /*#__PURE__*/_react["default"].createElement(TextContainer, {
-    color: _color.colorGrayscale.gray500
-  }, /*#__PURE__*/_react["default"].createElement(_paragraph.P3, {
-    text: '電子信箱'
-  })), /*#__PURE__*/_react["default"].createElement(TextContainer, {
-    color: CardTextColor[role],
-    paddingBottom: 8
-  }, /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
+  }), /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
     text: email
-  })), /*#__PURE__*/_react["default"].createElement(TextContainer, {
-    color: _color.colorGrayscale.gray500
-  }, /*#__PURE__*/_react["default"].createElement(_paragraph.P3, {
+  })), /*#__PURE__*/_react["default"].createElement(InfoContainer, null, !hideInfo && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(TextContainer, null, /*#__PURE__*/_react["default"].createElement(P3Gray500, {
+    text: '閱讀篇數'
+  }), /*#__PURE__*/_react["default"].createElement(Gray500BottomLine, null), /*#__PURE__*/_react["default"].createElement(StyledP1, {
+    color: CardP1TextColor[role],
+    weight: _paragraph.P1.Weight.BOLD,
+    text: articleReadCount.toLocaleString('en-US')
+  })), /*#__PURE__*/_react["default"].createElement(TextContainer, null, /*#__PURE__*/_react["default"].createElement(P3Gray500, {
+    text: "\u95B1\u8B80".concat(_readingTimeUnit.READING_TIME_UNIT_TEXT[articleReadingTimeUnit])
+  }), /*#__PURE__*/_react["default"].createElement(Gray500BottomLine, null), /*#__PURE__*/_react["default"].createElement(StyledP1, {
+    color: CardP1TextColor[role],
+    weight: _paragraph.P1.Weight.BOLD,
+    text: articleReadingTime > 99999 ? '99,999+' : articleReadingTime.toLocaleString('en-US')
+  }))), /*#__PURE__*/_react["default"].createElement(TextContainer, null, /*#__PURE__*/_react["default"].createElement(P3Gray500, {
     text: '加入日期'
-  })), /*#__PURE__*/_react["default"].createElement(TextContainer, {
-    color: CardTextColor[role]
-  }, /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
+  }), /*#__PURE__*/_react["default"].createElement(Gray500BottomLine, null), /*#__PURE__*/_react["default"].createElement(StyledP1, {
+    color: CardP1TextColor[role],
+    weight: _paragraph.P1.Weight.BOLD,
     text: joinDate
-  })))), /*#__PURE__*/_react["default"].createElement(TitleImg, {
+  })))), /*#__PURE__*/_react["default"].createElement(RightColumn, null, /*#__PURE__*/_react["default"].createElement(TitleContainer, null, /*#__PURE__*/_react["default"].createElement(TitleImg, {
     src: titleUrl
-  })));
+  }), /*#__PURE__*/_react["default"].createElement(LogoContainer, null, /*#__PURE__*/_react["default"].createElement(LogoImg, {
+    src: logoUrl
+  })))));
 };
 
 MobileMemberRoleCard.propTypes = {
@@ -155,7 +189,11 @@ MobileMemberRoleCard.propTypes = {
   releaseBranch: _releaseBranch.BRANCH_PROP_TYPES,
   email: _propTypes["default"].string,
   joinDate: _propTypes["default"].string,
-  name: _propTypes["default"].string
+  name: _propTypes["default"].string,
+  articleReadCount: _propTypes["default"].number,
+  articleReadingTimeUnit: _propTypes["default"].oneOf(Object.values(_readingTimeUnit.READING_TIME_UNIT)),
+  articleReadingTime: _propTypes["default"].number,
+  hideInfo: _propTypes["default"].bool
 };
 var _default = MobileMemberRoleCard;
 exports["default"] = _default;

package/lib/mobile-member-role-card/stories/member-role-card.stories.js

@@ -15,6 +15,8 @@ var _constants = require("../../storybook/constants");
 
 var _memberRole = require("@twreporter/core/lib/constants/member-role");
 
+var _readingTimeUnit = require("@twreporter/core/src/constants/reading-time-unit");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
@@ -22,7 +24,8 @@ var _default = {
   component: _index["default"],
   argTypes: {
     releaseBranch: _constants.BRANCH_STORYBOOK_ARG_TYPE,
-    role: (0, _getEnumArg.getRadioArg)(_memberRole.MEMBER_ROLE, _memberRole.MEMBER_ROLE.explorer)
+    role: (0, _getEnumArg.getRadioArg)(_memberRole.MEMBER_ROLE, _memberRole.MEMBER_ROLE.explorer),
+    articleReadingTimeUnit: (0, _getEnumArg.getRadioArg)(_readingTimeUnit.READING_TIME_UNIT, _readingTimeUnit.READING_TIME_UNIT.minute)
   }
 };
 exports["default"] = _default;
@@ -34,6 +37,9 @@ var moblieMemberRoleCard = function moblieMemberRoleCard(args) {
 exports.moblieMemberRoleCard = moblieMemberRoleCard;
 moblieMemberRoleCard.args = {
   email: 'abc@mail.com',
-  joinDate: '2022/01/08',
-  name: '報導者'
+  joinDate: '2022/1/8',
+  name: '報導者',
+  articleReadCount: 12,
+  articleReadingTime: 380,
+  hideInfo: false
 };

package/lib/text/paragraph.js

@@ -25,7 +25,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-var defaultContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+var defaultContainer = /*#__PURE__*/_styledComponents["default"].p.withConfig({
   displayName: "paragraph__defaultContainer",
   componentId: "sc-1aejhao-0"
 })(["font-weight:", ";font-family:", ";line-height:150%;display:flex;align-items:center;"], function (props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.21.0-rc.1",
+  "version": "8.21.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.13.1-rc.0",
-    "@twreporter/redux": "^7.8.1-rc.0",
+    "@twreporter/core": "^1.14.0-rc.0",
+    "@twreporter/redux": "^7.8.1-rc.1",
     "fontfaceobserver-es": "^3.3.3",
     "hoist-non-react-statics": "^2.3.1",
     "lodash": "^4.0.0",
@@ -44,5 +44,5 @@
     "babel-loader": "^8.2.4",
     "chromatic": "^6.5.4"
   },
-  "gitHead": "aa00452ea5c3557c71865aa121dfa630f84e6a04"
+  "gitHead": "79564b04f0e64befed05a08b9f934d38f9b8b6bc"
 }