@twreporter/react-components 8.21.0-rc.0 → 8.21.0-rc.10

package/lib/input/stories/text-field.stories.js

@@ -15,6 +15,7 @@ var _textField = _interopRequireDefault(require("../components/text-field"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+/* eslint react/display-name:0 */
 var _default = {
   title: 'Input/Text Field',
   component: _textField["default"],
@@ -29,12 +30,6 @@ var Form = /*#__PURE__*/(0, _styledComponents["default"])(_textField["default"])
   componentId: "sc-1rwuni4-0"
 })(["width:200px;"]);
 
-var textField = function textField(args) {
-  return /*#__PURE__*/_react["default"].createElement(Form, args);
-};
-
-exports.textField = textField;
-
 var onSubmit = function onSubmit(value) {
   console.log('submit', value);
 };
@@ -43,11 +38,17 @@ var onChange = function onChange(value) {
   console.log('change', value);
 };
 
-textField.args = {
-  onSubmit: onSubmit,
-  onChange: onChange,
-  placeholder: 'test',
-  align: _textField["default"].Align.LEFT,
-  state: _textField["default"].State.DEFAULT,
-  message: '系統文字'
-};
+var textField = {
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(Form, args);
+  },
+  args: {
+    onSubmit: onSubmit,
+    onChange: onChange,
+    placeholder: 'test',
+    align: _textField["default"].Align.LEFT,
+    state: _textField["default"].State.DEFAULT,
+    message: '系統文字'
+  }
+};
+exports.textField = textField;

package/lib/input/utils/theme.js

@@ -16,7 +16,7 @@ var selectThemeStyle = function selectThemeStyle(theme) {
         bgColor: _color.colorOpacity['white_0.8'],
         focusBgColor: _color.colorGrayscale.gray100,
         desktopBgColor: _color.colorGrayscale.gray100,
-        borderColor: _color.colorSupportive.main,
+        borderColor: _color.colorSupportive.pastel,
         color: _color.colorGrayscale.gray800,
         focusColor: _color.colorGrayscale.gray500,
         placeholderColor: _color.colorGrayscale.gray800

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

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.card = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _cardList = _interopRequireDefault(require("../components/card-list"));
 
 var _constants = require("../../storybook/constants");
@@ -23,61 +21,58 @@ var _default = {
   }
 };
 exports["default"] = _default;
-
-var card = function card(args) {
-  return /*#__PURE__*/_react["default"].createElement(_cardList["default"], args);
-};
-
-exports.card = card;
-card.args = {
-  data: [{
-    id: '12345',
-    title: '文章標題文章標題文章標題文章標題文章標題文章標題文章標題文章標題',
-    og_description: '文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述',
-    category_set: [{
-      category: {
-        name: '主分類'
+var card = {
+  args: {
+    data: [{
+      id: '12345',
+      title: '文章標題文章標題文章標題文章標題文章標題文章標題文章標題文章標題',
+      og_description: '文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述',
+      category_set: [{
+        category: {
+          name: '主分類'
+        },
+        subcategory: {
+          name: '子分類'
+        }
+      }],
+      published_date: '2023-02-12T16:00:00Z',
+      hero_image: {
+        description: 'test'
       },
-      subcategory: {
-        name: '子分類'
-      }
-    }],
-    published_date: '2023-02-12T16:00:00Z',
-    hero_image: {
-      description: 'test'
-    },
-    slug: 'this-is-a-test-article'
-  }, {
-    id: '12347',
-    title: '文章標題',
-    og_description: '文章描述',
-    published_date: '2023-02-12T16:00:00Z',
-    hero_image: {
-      description: 'test'
-    },
-    slug: 'this-is-a-test-article-3'
-  }, {
-    id: '12346',
-    title: '文章標題文章標題文章標題文章標題文章標題文章標題文章標題文章標題',
-    og_description: '文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述',
-    category_set: [{
-      category: {
-        name: '主分類'
+      slug: 'this-is-a-test-article'
+    }, {
+      id: '12347',
+      title: '文章標題',
+      og_description: '文章描述',
+      published_date: '2023-02-12T16:00:00Z',
+      hero_image: {
+        description: 'test'
       },
-      subcategory: {
-        name: '子分類'
-      }
-    }],
-    published_date: '2023-02-12T16:00:00Z',
-    hero_image: {
-      description: 'test',
-      resized_targets: {
-        mobile: {
-          url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/220px-Google_Images_2015_logo.svg.png'
+      slug: 'this-is-a-test-article-3'
+    }, {
+      id: '12346',
+      title: '文章標題文章標題文章標題文章標題文章標題文章標題文章標題文章標題',
+      og_description: '文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述',
+      category_set: [{
+        category: {
+          name: '主分類'
+        },
+        subcategory: {
+          name: '子分類'
+        }
+      }],
+      published_date: '2023-02-12T16:00:00Z',
+      hero_image: {
+        description: 'test',
+        resized_targets: {
+          mobile: {
+            url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/220px-Google_Images_2015_logo.svg.png'
+          }
         }
-      }
-    },
-    slug: 'this-is-a-test-article-2'
-  }],
-  releaseBranch: _releaseBranch.BRANCH.master
-};
+      },
+      slug: 'this-is-a-test-article-2'
+    }],
+    releaseBranch: _releaseBranch.BRANCH.master
+  }
+};
+exports.card = card;

package/lib/logo/stories/logoFooter.stories.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.footer = exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _logoFooter = _interopRequireDefault(require("../components/logo-footer"));
 
 var _constants = require("../../storybook/constants");
@@ -21,9 +19,5 @@ var _default = {
   }
 };
 exports["default"] = _default;
-
-var footer = function footer(args) {
-  return /*#__PURE__*/_react["default"].createElement(_logoFooter["default"], args);
-};
-
+var footer = {};
 exports.footer = footer;

package/lib/logo/stories/logoHeader.stories.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.header = exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _logoHeader = _interopRequireDefault(require("../components/logo-header"));
 
 var _constants = require("../../storybook/constants");
@@ -21,12 +19,9 @@ var _default = {
   }
 };
 exports["default"] = _default;
-
-var header = function header(args) {
-  return /*#__PURE__*/_react["default"].createElement(_logoHeader["default"], args);
+var header = {
+  args: {
+    type: _logoHeader["default"].Type.DEFAULT
+  }
 };
-
-exports.header = header;
-header.args = {
-  type: _logoHeader["default"].Type.DEFAULT
-};
+exports.header = header;

package/lib/logo/stories/logoLoadingFallback.stories.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.fallback = exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _logoLoadingFallback = _interopRequireDefault(require("../components/logo-loading-fallback"));
 
 var _constants = require("../../storybook/constants");
@@ -21,9 +19,5 @@ var _default = {
   }
 };
 exports["default"] = _default;
-
-var fallback = function fallback(args) {
-  return /*#__PURE__*/_react["default"].createElement(_logoLoadingFallback["default"], args);
-};
-
+var fallback = {};
 exports.fallback = fallback;

package/lib/logo/stories/logoSymbol.stories.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.symbol = exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _logoSymbol = _interopRequireDefault(require("../components/logo-symbol"));
 
 var _constants = require("../../storybook/constants");
@@ -21,12 +19,9 @@ var _default = {
   }
 };
 exports["default"] = _default;
-
-var symbol = function symbol(args) {
-  return /*#__PURE__*/_react["default"].createElement(_logoSymbol["default"], args);
+var symbol = {
+  args: {
+    type: _logoSymbol["default"].Type.DEFAULT
+  }
 };
-
-exports.symbol = symbol;
-symbol.args = {
-  type: _logoSymbol["default"].Type.DEFAULT
-};
+exports.symbol = symbol;

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) {
+})(["width:100%;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:8px;"]);
 
 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"
+})(["width:42px;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 StyledP3 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P3).withConfig({
+  displayName: "mobile-member-role-card__StyledP3",
+  componentId: "sc-1n1fg2v-11"
+})(["color:", ";letter-spacing:0px;"], _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:1.6px;"], 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 ? true : _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(StyledP3, {
+    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(StyledP3, {
+    text: "\u95B1\u8B80".concat(_readingTimeUnit.READING_TIME_UNIT_CARD_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(StyledP3, {
     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

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.moblieMemberRoleCard = exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _index = _interopRequireDefault(require("../index"));
 
 var _getEnumArg = require("../../storybook/utils/get-enum-arg");
@@ -15,6 +13,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,18 +22,19 @@ 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;
-
-var moblieMemberRoleCard = function moblieMemberRoleCard(args) {
-  return /*#__PURE__*/_react["default"].createElement(_index["default"], args);
+var moblieMemberRoleCard = {
+  args: {
+    email: 'abc@mail.com',
+    joinDate: '2022/1/8',
+    name: '報導者',
+    articleReadCount: 12,
+    articleReadingTime: 380,
+    hideInfo: false
+  }
 };
-
-exports.moblieMemberRoleCard = moblieMemberRoleCard;
-moblieMemberRoleCard.args = {
-  email: 'abc@mail.com',
-  joinDate: '2022/01/08',
-  name: '報導者'
-};
+exports.moblieMemberRoleCard = moblieMemberRoleCard;

package/lib/simple-header/simpleHeader.stories.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.simpleHeader = exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _ = _interopRequireDefault(require("."));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -16,11 +14,7 @@ var _default = {
   component: _["default"]
 };
 exports["default"] = _default;
-
-var Template = function Template(args) {
-  return /*#__PURE__*/_react["default"].createElement(_["default"], args);
+var simpleHeader = {
+  args: {}
 };
-
-var simpleHeader = Template.bind({});
-exports.simpleHeader = simpleHeader;
-simpleHeader.args = {};
+exports.simpleHeader = simpleHeader;

package/lib/snack-bar/stories/snackBar.stories.js

@@ -23,6 +23,7 @@ var _random = _interopRequireDefault(require("lodash/random"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+/* eslint react/display-name:0 */
 // hooks
 // components
 // storybook
@@ -38,16 +39,13 @@ var _default = {
   }
 };
 exports["default"] = _default;
-
-var snackBar = function snackBar(props) {
-  return /*#__PURE__*/_react["default"].createElement(_snackBar["default"], props);
+var snackBar = {
+  args: {
+    text: '系統作業文字',
+    theme: _snackBar["default"].THEME.normal
+  }
 };
-
 exports.snackBar = snackBar;
-snackBar.args = {
-  text: '系統作業文字',
-  theme: _snackBar["default"].THEME.normal
-};
 
 var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "snackBarstories__Container",
@@ -93,17 +91,17 @@ var ClickToShowSnackBar = function ClickToShowSnackBar(_ref) {
 ClickToShowSnackBar.propTypes = {
   timeout: _propTypes["default"].number
 };
-
-var clickToShow = function clickToShow(props) {
-  return /*#__PURE__*/_react["default"].createElement(ClickToShowSnackBar, props);
-};
-
-exports.clickToShow = clickToShow;
-clickToShow.parameters = {
-  controls: {
-    exclude: ['text', 'theme']
+var clickToShow = {
+  render: function render(props) {
+    return /*#__PURE__*/_react["default"].createElement(ClickToShowSnackBar, props);
+  },
+  parameters: {
+    controls: {
+      exclude: ['text', 'theme']
+    }
+  },
+  args: {
+    timeout: 800
   }
 };
-clickToShow.args = {
-  timeout: 800
-};
+exports.clickToShow = clickToShow;