@twreporter/react-components 8.21.0-rc.2 → 8.21.0-rc.4

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

@@ -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;

package/lib/text/stories/headline.stories.js

@@ -15,6 +15,7 @@ var _enums = require("../enums");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+/* eslint react/display-name:0 */
 var _default = {
   title: 'Text/Headline',
   component: _headline.H1,
@@ -25,93 +26,90 @@ var _default = {
 exports["default"] = _default;
 var defaultText = '標題「標題」：標題，《標題》標題English標題123標題？';
 var defaultType = _headline.H1.Type.DEFAULT;
-
-var h1 = function h1(args) {
-  return /*#__PURE__*/_react["default"].createElement(_headline.H1, args);
+var h1 = {
+  args: {
+    text: defaultText,
+    type: defaultType
+  },
+  parameters: {
+    controls: {
+      exclude: ['className']
+    }
+  }
 };
-
 exports.h1 = h1;
-h1.args = {
-  text: defaultText,
-  type: defaultType
-};
-h1.parameters = {
-  controls: {
-    exclude: ['className']
+var h2 = {
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_headline.H2, args);
+  },
+  args: {
+    text: defaultText,
+    type: defaultType
+  },
+  parameters: {
+    controls: {
+      exclude: ['className']
+    }
   }
 };
-
-var h2 = function h2(args) {
-  return /*#__PURE__*/_react["default"].createElement(_headline.H2, args);
-};
-
 exports.h2 = h2;
-h2.args = {
-  text: defaultText,
-  type: defaultType
-};
-h2.parameters = {
-  controls: {
-    exclude: ['className']
+var h3 = {
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_headline.H3, args);
+  },
+  args: {
+    text: defaultText,
+    type: defaultType
+  },
+  parameters: {
+    controls: {
+      exclude: ['className']
+    }
   }
 };
-
-var h3 = function h3(args) {
-  return /*#__PURE__*/_react["default"].createElement(_headline.H3, args);
-};
-
 exports.h3 = h3;
-h3.args = {
-  text: defaultText,
-  type: defaultType
-};
-h3.parameters = {
-  controls: {
-    exclude: ['className']
+var h4 = {
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_headline.H4, args);
+  },
+  args: {
+    text: defaultText,
+    type: defaultType
+  },
+  parameters: {
+    controls: {
+      exclude: ['className']
+    }
   }
 };
-
-var h4 = function h4(args) {
-  return /*#__PURE__*/_react["default"].createElement(_headline.H4, args);
-};
-
 exports.h4 = h4;
-h4.args = {
-  text: defaultText,
-  type: defaultType
-};
-h4.parameters = {
-  controls: {
-    exclude: ['className']
+var h5 = {
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_headline.H5, args);
+  },
+  args: {
+    text: defaultText,
+    type: defaultType
+  },
+  parameters: {
+    controls: {
+      exclude: ['className']
+    }
   }
 };
-
-var h5 = function h5(args) {
-  return /*#__PURE__*/_react["default"].createElement(_headline.H5, args);
-};
-
 exports.h5 = h5;
-h5.args = {
-  text: defaultText,
-  type: defaultType
-};
-h5.parameters = {
-  controls: {
-    exclude: ['className']
+var h6 = {
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_headline.H6, args);
+  },
+  args: {
+    text: defaultText,
+    type: defaultType
+  },
+  parameters: {
+    controls: {
+      exclude: ['className']
+    }
   }
 };
-
-var h6 = function h6(args) {
-  return /*#__PURE__*/_react["default"].createElement(_headline.H6, args);
-};
-
-exports.h6 = h6;
-h6.args = {
-  text: defaultText,
-  type: defaultType
-};
-h6.parameters = {
-  controls: {
-    exclude: ['className']
-  }
-};
+exports.h6 = h6;

package/lib/text/stories/paragraph.stories.js

@@ -15,6 +15,7 @@ var _enums = require("../enums");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+/* eslint react/display-name:0 */
 var _default = {
   title: 'Text/Paragraph',
   component: _paragraph.P1,
@@ -25,63 +26,60 @@ var _default = {
 exports["default"] = _default;
 var defaultText = '內文「內文」：內文，《內文》內文English內文123內文？';
 var defaultWeight = _paragraph.P1.Weight.NORMAL;
-
-var p1 = function p1(args) {
-  return /*#__PURE__*/_react["default"].createElement(_paragraph.P1, args);
+var p1 = {
+  args: {
+    text: defaultText,
+    weight: defaultWeight
+  },
+  parameters: {
+    controls: {
+      exclude: ['className']
+    }
+  }
 };
-
 exports.p1 = p1;
-p1.args = {
-  text: defaultText,
-  weight: defaultWeight
-};
-p1.parameters = {
-  controls: {
-    exclude: ['className']
+var p2 = {
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_paragraph.P2, args);
+  },
+  args: {
+    text: defaultText,
+    weight: defaultWeight
+  },
+  parameters: {
+    controls: {
+      exclude: ['className']
+    }
   }
 };
-
-var p2 = function p2(args) {
-  return /*#__PURE__*/_react["default"].createElement(_paragraph.P2, args);
-};
-
 exports.p2 = p2;
-p2.args = {
-  text: defaultText,
-  weight: defaultWeight
-};
-p2.parameters = {
-  controls: {
-    exclude: ['className']
+var p3 = {
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_paragraph.P3, args);
+  },
+  args: {
+    text: defaultText,
+    weight: defaultWeight
+  },
+  parameters: {
+    controls: {
+      exclude: ['className']
+    }
   }
 };
-
-var p3 = function p3(args) {
-  return /*#__PURE__*/_react["default"].createElement(_paragraph.P3, args);
-};
-
 exports.p3 = p3;
-p3.args = {
-  text: defaultText,
-  weight: defaultWeight
-};
-p3.parameters = {
-  controls: {
-    exclude: ['className']
+var p4 = {
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_paragraph.P4, args);
+  },
+  args: {
+    text: defaultText,
+    weight: defaultWeight
+  },
+  parameters: {
+    controls: {
+      exclude: ['className']
+    }
   }
 };
-
-var p4 = function p4(args) {
-  return /*#__PURE__*/_react["default"].createElement(_paragraph.P4, args);
-};
-
-exports.p4 = p4;
-p4.args = {
-  text: defaultText,
-  weight: defaultWeight
-};
-p4.parameters = {
-  controls: {
-    exclude: ['className']
-  }
-};
+exports.p4 = p4;