@twreporter/react-components 8.13.1-rc.2 → 8.14.0-rc.0

package/lib/logo/components/logo-header.js

@@ -13,9 +13,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _path = _interopRequireDefault(require("../utils/path"));
 
-var _propTypes2 = _interopRequireDefault(require("@twreporter/core/lib/constants/prop-types"));
-
-var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
+var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -60,11 +58,11 @@ var LogoHeader = function LogoHeader(_ref) {
 
 LogoHeader.propTypes = {
   type: _propTypes["default"].oneOf(['default', 'white']),
-  releaseBranch: _propTypes2["default"].releaseBranch
+  releaseBranch: _releaseBranch.BRANCH_PROP_TYPES
 };
 LogoHeader.defaultProps = {
   type: 'default',
-  releaseBranch: _releaseBranch["default"].master
+  releaseBranch: _releaseBranch.BRANCH.master
 };
 var _default = LogoHeader;
 exports["default"] = _default;

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

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _logoFooter = _interopRequireDefault(require("../components/logo-footer"));
 
-var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
+var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -17,13 +17,7 @@ var _default = {
   title: 'Logo/Footer',
   component: _logoFooter["default"],
   argTypes: {
-    releaseBranch: {
-      defaultValue: _releaseBranch["default"].master,
-      options: [_releaseBranch["default"].master, _releaseBranch["default"].staging, _releaseBranch["default"].preview, _releaseBranch["default"].release],
-      control: {
-        type: 'radio'
-      }
-    }
+    releaseBranch: _releaseBranch.BRANCH_STORYBOOK_ARG_TYPE
   }
 };
 exports["default"] = _default;

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

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _logoHeader = _interopRequireDefault(require("../components/logo-header"));
 
-var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
+var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -17,13 +17,7 @@ var _default = {
   title: 'Logo/Header',
   component: _logoHeader["default"],
   argTypes: {
-    releaseBranch: {
-      defaultValue: _releaseBranch["default"].master,
-      options: [_releaseBranch["default"].master, _releaseBranch["default"].staging, _releaseBranch["default"].preview, _releaseBranch["default"].release],
-      control: {
-        type: 'radio'
-      }
-    }
+    releaseBranch: _releaseBranch.BRANCH_STORYBOOK_ARG_TYPE
   }
 };
 exports["default"] = _default;

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

@@ -15,10 +15,13 @@ var _theme = require("../utils/theme");
 
 var _paragraph = require("../../text/paragraph");
 
+var _theme2 = require("@twreporter/core/lib/constants/theme");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 // util
 // component
+// @twreporter
 var SnackBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "snack-bar__SnackBarContainer",
   componentId: "roennm-0"
@@ -32,7 +35,7 @@ var SnackBar = function SnackBar(_ref) {
   var _ref$text = _ref.text,
       text = _ref$text === void 0 ? '' : _ref$text,
       _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? 'normal' : _ref$theme;
+      theme = _ref$theme === void 0 ? _theme2.THEME.normal : _ref$theme;
 
   var _getSnackBarTheme = (0, _theme.getSnackBarTheme)(theme),
       color = _getSnackBarTheme.color,
@@ -48,7 +51,7 @@ var SnackBar = function SnackBar(_ref) {
 
 SnackBar.propTypes = {
   text: _propTypes["default"].string,
-  theme: _propTypes["default"].oneOf(['normal', 'photography', 'transparent', 'index'])
+  theme: _theme2.THEME_PROP_TYPES
 };
 var _default = SnackBar;
 exports["default"] = _default;

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

@@ -17,19 +17,25 @@ var _snackBar = _interopRequireDefault(require("../components/snack-bar"));
 
 var _button = require("../../button");
 
+var _theme = require("@twreporter/core/lib/constants/theme");
+
 var _random = _interopRequireDefault(require("lodash/random"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 // hooks
 // components
+// @twreporter
 // lodash
 var _ = {
   random: _random["default"]
 };
 var _default = {
   title: 'Snack Bar',
-  component: _snackBar["default"]
+  component: _snackBar["default"],
+  argTypes: {
+    theme: _theme.THEME_STORYBOOK_ARG_TYPE
+  }
 };
 exports["default"] = _default;
 
@@ -40,7 +46,7 @@ var snackBar = function snackBar(props) {
 exports.snackBar = snackBar;
 snackBar.args = {
   text: '系統作業文字',
-  theme: 'normal'
+  theme: _theme.THEME.normal
 };
 
 var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({

package/lib/text/constants/font-weight.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WEIGHT_STORYBOOK_ARG_TYPE = exports.WEIGHT_PROP_TYPES = exports.WEIGHT = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var WEIGHT = {
+  extraLight: 'extraLight',
+  normal: 'normal',
+  bold: 'bold'
+};
+exports.WEIGHT = WEIGHT;
+
+var WEIGHT_PROP_TYPES = _propTypes["default"].oneOf([WEIGHT.extraLight, WEIGHT.normal, WEIGHT.bold]);
+
+exports.WEIGHT_PROP_TYPES = WEIGHT_PROP_TYPES;
+var WEIGHT_STORYBOOK_ARG_TYPE = {
+  defaultValue: WEIGHT.normal,
+  options: [WEIGHT.extraLight, WEIGHT.normal, WEIGHT.bold],
+  control: {
+    type: 'radio'
+  }
+};
+exports.WEIGHT_STORYBOOK_ARG_TYPE = WEIGHT_STORYBOOK_ARG_TYPE;

package/lib/text/constants/headline-type.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TYPE_STORYBOOK_ARG_TYPE = exports.TYPE_FONT_FAMILY = exports.TYPE_PROP_TYPES = exports.TYPE = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _font = require("@twreporter/core/lib/constants/font");
+
+var _TYPE_FONT_FAMILY;
+
+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 TYPE = {
+  "default": 'default',
+  article: 'article'
+};
+exports.TYPE = TYPE;
+
+var TYPE_PROP_TYPES = _propTypes["default"].oneOf([TYPE["default"], TYPE.article]);
+
+exports.TYPE_PROP_TYPES = TYPE_PROP_TYPES;
+var TYPE_FONT_FAMILY = (_TYPE_FONT_FAMILY = {}, _defineProperty(_TYPE_FONT_FAMILY, TYPE["default"], _font.fontFamily["default"]), _defineProperty(_TYPE_FONT_FAMILY, TYPE.article, _font.fontFamily.title), _TYPE_FONT_FAMILY);
+exports.TYPE_FONT_FAMILY = TYPE_FONT_FAMILY;
+var TYPE_STORYBOOK_ARG_TYPE = {
+  defaultValue: TYPE["default"],
+  options: [TYPE["default"], TYPE.article],
+  control: {
+    type: 'radio'
+  }
+};
+exports.TYPE_STORYBOOK_ARG_TYPE = TYPE_STORYBOOK_ARG_TYPE;

package/lib/text/headline.js

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _headlineType = require("./constants/headline-type");
+
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
 var _font = require("@twreporter/core/lib/constants/font");
@@ -30,48 +32,49 @@ var H1Container = /*#__PURE__*/(0, _styledComponents["default"])(DefaultContaine
   displayName: "headline__H1Container",
   componentId: "axdp97-1"
 })(["line-height:125%;font-size:36px;font-family:", ";", ""], function (props) {
-  return props.type === 'default' ? _font.fontFamily["default"] : _font.fontFamily.title;
+  return props.fontFamily;
 }, _mediaQuery["default"].tabletAndBelow(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    font-size: 32px;\n  "]))));
 var H2Container = /*#__PURE__*/(0, _styledComponents["default"])(DefaultContainer).withConfig({
   displayName: "headline__H2Container",
   componentId: "axdp97-2"
 })(["line-height:125%;font-size:32px;font-family:", ";", ""], function (props) {
-  return props.type === 'default' ? _font.fontFamily["default"] : _font.fontFamily.title;
+  return props.fontFamily;
 }, _mediaQuery["default"].tabletAndBelow(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    font-size: 24px;\n  "]))));
 var H3Container = /*#__PURE__*/(0, _styledComponents["default"])(DefaultContainer).withConfig({
   displayName: "headline__H3Container",
   componentId: "axdp97-3"
 })(["line-height:150%;font-size:28px;font-family:", ";", ""], function (props) {
-  return props.type === 'default' ? _font.fontFamily["default"] : _font.fontFamily.title;
+  return props.fontFamily;
 }, _mediaQuery["default"].tabletAndBelow(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    font-size: 20px;\n  "]))));
 var H4Container = /*#__PURE__*/(0, _styledComponents["default"])(DefaultContainer).withConfig({
   displayName: "headline__H4Container",
   componentId: "axdp97-4"
 })(["line-height:150%;font-size:22px;font-family:", ";", ""], function (props) {
-  return props.type === 'default' ? _font.fontFamily["default"] : _font.fontFamily.title;
+  return props.fontFamily;
 }, _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.type === 'default' ? _font.fontFamily["default"] : _font.fontFamily.title;
+  return props.fontFamily;
 }, _mediaQuery["default"].tabletAndBelow(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    font-size: 16px;\n  "]))));
 var H6Container = /*#__PURE__*/(0, _styledComponents["default"])(DefaultContainer).withConfig({
   displayName: "headline__H6Container",
   componentId: "axdp97-6"
 })(["line-height:150%;font-size:16px;font-family:", ";", ""], function (props) {
-  return props.type === 'default' ? _font.fontFamily["default"] : _font.fontFamily.title;
+  return props.fontFamily;
 }, _mediaQuery["default"].tabletAndBelow(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    font-size: 14px;\n  "]))));
 
 var H1 = function H1(_ref) {
   var _ref$text = _ref.text,
       text = _ref$text === void 0 ? '' : _ref$text,
       _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'default' : _ref$type,
+      type = _ref$type === void 0 ? _headlineType.TYPE["default"] : _ref$type,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className;
+  var fontFamily = _headlineType.TYPE_FONT_FAMILY[type];
   return /*#__PURE__*/_react["default"].createElement(H1Container, {
-    type: type,
+    fontFamily: fontFamily,
     className: className
   }, text);
 };
@@ -79,7 +82,7 @@ var H1 = function H1(_ref) {
 exports.H1 = H1;
 H1.propTypes = {
   text: _propTypes["default"].string,
-  type: _propTypes["default"].oneOf(['default', 'article']),
+  type: _headlineType.TYPE_PROP_TYPES,
   className: _propTypes["default"].string
 };
 
@@ -87,11 +90,12 @@ var H2 = function H2(_ref2) {
   var _ref2$text = _ref2.text,
       text = _ref2$text === void 0 ? '' : _ref2$text,
       _ref2$type = _ref2.type,
-      type = _ref2$type === void 0 ? 'default' : _ref2$type,
+      type = _ref2$type === void 0 ? _headlineType.TYPE["default"] : _ref2$type,
       _ref2$className = _ref2.className,
       className = _ref2$className === void 0 ? '' : _ref2$className;
+  var fontFamily = _headlineType.TYPE_FONT_FAMILY[type];
   return /*#__PURE__*/_react["default"].createElement(H2Container, {
-    type: type,
+    fontFamily: fontFamily,
     className: className
   }, text);
 };
@@ -99,7 +103,7 @@ var H2 = function H2(_ref2) {
 exports.H2 = H2;
 H2.propTypes = {
   text: _propTypes["default"].string,
-  type: _propTypes["default"].oneOf(['default', 'article']),
+  type: _headlineType.TYPE_PROP_TYPES,
   className: _propTypes["default"].string
 };
 
@@ -107,11 +111,12 @@ var H3 = function H3(_ref3) {
   var _ref3$text = _ref3.text,
       text = _ref3$text === void 0 ? '' : _ref3$text,
       _ref3$type = _ref3.type,
-      type = _ref3$type === void 0 ? 'default' : _ref3$type,
+      type = _ref3$type === void 0 ? _headlineType.TYPE["default"] : _ref3$type,
       _ref3$className = _ref3.className,
       className = _ref3$className === void 0 ? '' : _ref3$className;
+  var fontFamily = _headlineType.TYPE_FONT_FAMILY[type];
   return /*#__PURE__*/_react["default"].createElement(H3Container, {
-    type: type,
+    fontFamily: fontFamily,
     className: className
   }, text);
 };
@@ -119,7 +124,7 @@ var H3 = function H3(_ref3) {
 exports.H3 = H3;
 H3.propTypes = {
   text: _propTypes["default"].string,
-  type: _propTypes["default"].oneOf(['default', 'article']),
+  type: _headlineType.TYPE_PROP_TYPES,
   className: _propTypes["default"].string
 };
 
@@ -127,11 +132,12 @@ var H4 = function H4(_ref4) {
   var _ref4$text = _ref4.text,
       text = _ref4$text === void 0 ? '' : _ref4$text,
       _ref4$type = _ref4.type,
-      type = _ref4$type === void 0 ? 'default' : _ref4$type,
+      type = _ref4$type === void 0 ? _headlineType.TYPE["default"] : _ref4$type,
       _ref4$className = _ref4.className,
       className = _ref4$className === void 0 ? '' : _ref4$className;
+  var fontFamily = _headlineType.TYPE_FONT_FAMILY[type];
   return /*#__PURE__*/_react["default"].createElement(H4Container, {
-    type: type,
+    fontFamily: fontFamily,
     className: className
   }, text);
 };
@@ -139,7 +145,7 @@ var H4 = function H4(_ref4) {
 exports.H4 = H4;
 H4.propTypes = {
   text: _propTypes["default"].string,
-  type: _propTypes["default"].oneOf(['default', 'article']),
+  type: _headlineType.TYPE_PROP_TYPES,
   className: _propTypes["default"].string
 };
 
@@ -147,11 +153,12 @@ var H5 = function H5(_ref5) {
   var _ref5$text = _ref5.text,
       text = _ref5$text === void 0 ? '' : _ref5$text,
       _ref5$type = _ref5.type,
-      type = _ref5$type === void 0 ? 'default' : _ref5$type,
+      type = _ref5$type === void 0 ? _headlineType.TYPE["default"] : _ref5$type,
       _ref5$className = _ref5.className,
       className = _ref5$className === void 0 ? '' : _ref5$className;
+  var fontFamily = _headlineType.TYPE_FONT_FAMILY[type];
   return /*#__PURE__*/_react["default"].createElement(H5Container, {
-    type: type,
+    fontFamily: fontFamily,
     className: className
   }, text);
 };
@@ -159,7 +166,7 @@ var H5 = function H5(_ref5) {
 exports.H5 = H5;
 H5.propTypes = {
   text: _propTypes["default"].string,
-  type: _propTypes["default"].oneOf(['default', 'article']),
+  type: _headlineType.TYPE_PROP_TYPES,
   className: _propTypes["default"].string
 };
 
@@ -167,11 +174,12 @@ var H6 = function H6(_ref6) {
   var _ref6$text = _ref6.text,
       text = _ref6$text === void 0 ? '' : _ref6$text,
       _ref6$type = _ref6.type,
-      type = _ref6$type === void 0 ? 'default' : _ref6$type,
+      type = _ref6$type === void 0 ? _headlineType.TYPE["default"] : _ref6$type,
       _ref6$className = _ref6.className,
       className = _ref6$className === void 0 ? '' : _ref6$className;
+  var fontFamily = _headlineType.TYPE_FONT_FAMILY[type];
   return /*#__PURE__*/_react["default"].createElement(H6Container, {
-    type: type,
+    fontFamily: fontFamily,
     className: className
   }, text);
 };
@@ -179,7 +187,7 @@ var H6 = function H6(_ref6) {
 exports.H6 = H6;
 H6.propTypes = {
   text: _propTypes["default"].string,
-  type: _propTypes["default"].oneOf(['default', 'article']),
+  type: _headlineType.TYPE_PROP_TYPES,
   className: _propTypes["default"].string
 };
 var _default = {

package/lib/text/paragraph.js

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _fontWeight = require("./constants/font-weight");
+
 var _font = require("@twreporter/core/lib/constants/font");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -43,7 +45,7 @@ var P1 = function P1(_ref) {
   var _ref$text = _ref.text,
       text = _ref$text === void 0 ? '' : _ref$text,
       _ref$weight = _ref.weight,
-      weight = _ref$weight === void 0 ? 'normal' : _ref$weight,
+      weight = _ref$weight === void 0 ? _fontWeight.WEIGHT.normal : _ref$weight,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className;
   return /*#__PURE__*/_react["default"].createElement(P1Container, {
@@ -55,7 +57,7 @@ var P1 = function P1(_ref) {
 exports.P1 = P1;
 P1.propTypes = {
   text: _propTypes["default"].string,
-  weight: _propTypes["default"].oneOf(['extraLight', 'normal', 'bold']),
+  weight: _fontWeight.WEIGHT_PROP_TYPES,
   className: _propTypes["default"].string
 };
 
@@ -63,7 +65,7 @@ var P2 = function P2(_ref2) {
   var _ref2$text = _ref2.text,
       text = _ref2$text === void 0 ? '' : _ref2$text,
       _ref2$weight = _ref2.weight,
-      weight = _ref2$weight === void 0 ? 'normal' : _ref2$weight,
+      weight = _ref2$weight === void 0 ? _fontWeight.WEIGHT.normal : _ref2$weight,
       _ref2$className = _ref2.className,
       className = _ref2$className === void 0 ? '' : _ref2$className;
   return /*#__PURE__*/_react["default"].createElement(P2Container, {
@@ -75,7 +77,7 @@ var P2 = function P2(_ref2) {
 exports.P2 = P2;
 P2.propTypes = {
   text: _propTypes["default"].string,
-  weight: _propTypes["default"].oneOf(['extraLight', 'normal', 'bold']),
+  weight: _fontWeight.WEIGHT_PROP_TYPES,
   className: _propTypes["default"].string
 };
 
@@ -83,7 +85,7 @@ var P3 = function P3(_ref3) {
   var _ref3$text = _ref3.text,
       text = _ref3$text === void 0 ? '' : _ref3$text,
       _ref3$weight = _ref3.weight,
-      weight = _ref3$weight === void 0 ? 'normal' : _ref3$weight,
+      weight = _ref3$weight === void 0 ? _fontWeight.WEIGHT.normal : _ref3$weight,
       _ref3$className = _ref3.className,
       className = _ref3$className === void 0 ? '' : _ref3$className;
   return /*#__PURE__*/_react["default"].createElement(P3Container, {
@@ -95,7 +97,7 @@ var P3 = function P3(_ref3) {
 exports.P3 = P3;
 P3.propTypes = {
   text: _propTypes["default"].string,
-  weight: _propTypes["default"].oneOf(['extraLight', 'normal', 'bold']),
+  weight: _fontWeight.WEIGHT_PROP_TYPES,
   className: _propTypes["default"].string
 };
 
@@ -103,7 +105,7 @@ var P4 = function P4(_ref4) {
   var _ref4$text = _ref4.text,
       text = _ref4$text === void 0 ? '' : _ref4$text,
       _ref4$weight = _ref4.weight,
-      weight = _ref4$weight === void 0 ? 'normal' : _ref4$weight,
+      weight = _ref4$weight === void 0 ? _fontWeight.WEIGHT.normal : _ref4$weight,
       _ref4$className = _ref4.className,
       className = _ref4$className === void 0 ? '' : _ref4$className;
   return /*#__PURE__*/_react["default"].createElement(P4Container, {
@@ -115,7 +117,7 @@ var P4 = function P4(_ref4) {
 exports.P4 = P4;
 P4.propTypes = {
   text: _propTypes["default"].string,
-  weight: _propTypes["default"].oneOf(['extraLight', 'normal', 'bold']),
+  weight: _fontWeight.WEIGHT_PROP_TYPES,
   className: _propTypes["default"].string
 };
 var _default = {

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

@@ -9,14 +9,20 @@ var _react = _interopRequireDefault(require("react"));
 
 var _headline = require("../headline");
 
+var _headlineType = require("../constants/headline-type");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
   title: 'Text/Headline',
-  component: _headline.H1
+  component: _headline.H1,
+  argTypes: {
+    type: _headlineType.TYPE_STORYBOOK_ARG_TYPE
+  }
 };
 exports["default"] = _default;
 var defaultText = '標題「標題」：標題，《標題》標題English標題123標題？';
+var defaultType = _headlineType.TYPE["default"];
 
 var h1 = function h1(args) {
   return /*#__PURE__*/_react["default"].createElement(_headline.H1, args);
@@ -25,7 +31,12 @@ var h1 = function h1(args) {
 exports.h1 = h1;
 h1.args = {
   text: defaultText,
-  type: 'default'
+  type: defaultType
+};
+h1.parameters = {
+  controls: {
+    exclude: ['className']
+  }
 };
 
 var h2 = function h2(args) {
@@ -35,7 +46,12 @@ var h2 = function h2(args) {
 exports.h2 = h2;
 h2.args = {
   text: defaultText,
-  type: 'default'
+  type: defaultType
+};
+h2.parameters = {
+  controls: {
+    exclude: ['className']
+  }
 };
 
 var h3 = function h3(args) {
@@ -45,7 +61,12 @@ var h3 = function h3(args) {
 exports.h3 = h3;
 h3.args = {
   text: defaultText,
-  type: 'default'
+  type: defaultType
+};
+h3.parameters = {
+  controls: {
+    exclude: ['className']
+  }
 };
 
 var h4 = function h4(args) {
@@ -55,7 +76,12 @@ var h4 = function h4(args) {
 exports.h4 = h4;
 h4.args = {
   text: defaultText,
-  type: 'default'
+  type: defaultType
+};
+h4.parameters = {
+  controls: {
+    exclude: ['className']
+  }
 };
 
 var h5 = function h5(args) {
@@ -65,7 +91,12 @@ var h5 = function h5(args) {
 exports.h5 = h5;
 h5.args = {
   text: defaultText,
-  type: 'default'
+  type: defaultType
+};
+h5.parameters = {
+  controls: {
+    exclude: ['className']
+  }
 };
 
 var h6 = function h6(args) {
@@ -75,5 +106,10 @@ var h6 = function h6(args) {
 exports.h6 = h6;
 h6.args = {
   text: defaultText,
-  type: 'default'
+  type: defaultType
+};
+h6.parameters = {
+  controls: {
+    exclude: ['className']
+  }
 };

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

@@ -9,15 +9,20 @@ var _react = _interopRequireDefault(require("react"));
 
 var _paragraph = require("../paragraph");
 
+var _fontWeight = require("../constants/font-weight");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
   title: 'Text/Paragraph',
-  component: _paragraph.P1
+  component: _paragraph.P1,
+  argTypes: {
+    weight: _fontWeight.WEIGHT_STORYBOOK_ARG_TYPE
+  }
 };
 exports["default"] = _default;
 var defaultText = '內文「內文」：內文，《內文》內文English內文123內文？';
-var defaultWeight = 'normal';
+var defaultWeight = _fontWeight.WEIGHT.normal;
 
 var p1 = function p1(args) {
   return /*#__PURE__*/_react["default"].createElement(_paragraph.P1, args);
@@ -28,6 +33,11 @@ p1.args = {
   text: defaultText,
   weight: defaultWeight
 };
+p1.parameters = {
+  controls: {
+    exclude: ['className']
+  }
+};
 
 var p2 = function p2(args) {
   return /*#__PURE__*/_react["default"].createElement(_paragraph.P2, args);
@@ -38,6 +48,11 @@ p2.args = {
   text: defaultText,
   weight: defaultWeight
 };
+p2.parameters = {
+  controls: {
+    exclude: ['className']
+  }
+};
 
 var p3 = function p3(args) {
   return /*#__PURE__*/_react["default"].createElement(_paragraph.P3, args);
@@ -48,6 +63,11 @@ p3.args = {
   text: defaultText,
   weight: defaultWeight
 };
+p3.parameters = {
+  controls: {
+    exclude: ['className']
+  }
+};
 
 var p4 = function p4(args) {
   return /*#__PURE__*/_react["default"].createElement(_paragraph.P4, args);
@@ -57,4 +77,9 @@ exports.p4 = p4;
 p4.args = {
   text: defaultText,
   weight: defaultWeight
+};
+p4.parameters = {
+  controls: {
+    exclude: ['className']
+  }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.13.1-rc.2",
+  "version": "8.14.0-rc.0",
   "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.7.0-rc.2",
-    "@twreporter/redux": "^7.4.0-rc.2",
+    "@twreporter/core": "^1.7.0-rc.3",
+    "@twreporter/redux": "^7.4.0-rc.3",
     "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": "978cab7f95e2f8e6af2dc4a61b350aaa505b3272"
+  "gitHead": "cec95c45a29a3fbfa91b3bf3a6f33a1cc983504d"
 }