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

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.14.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.13.1-rc.2...@twreporter/react-components@8.14.0-rc.0) (2022-10-12)
+
+
+### Bug Fixes
+
+* address review comment ([2cf0499](https://github.com/twreporter/twreporter-npm-packages/commit/2cf04990d34e0f26c7aee5519fb120ce99c12776))
+
+
+### Features
+
+* add new components for design guideline ([d17e78e](https://github.com/twreporter/twreporter-npm-packages/commit/d17e78e5102f600030fefaffec707b1b3ed97a34))
+
+
+
+
+
 ## [8.13.1-rc.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.13.1-rc.1...@twreporter/react-components@8.13.1-rc.2) (2022-09-27)
 
 **Note:** Version bump only for package @twreporter/react-components

package/lib/button/components/iconButton.js

@@ -13,12 +13,24 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _theme = require("../utils/theme");
 
+var _type = require("../constants/type");
+
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
+var _theme2 = require("@twreporter/core/lib/constants/theme");
+
+var _excluded = ["iconComponent", "theme", "type", "disabled", "active"];
+
 var _templateObject;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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; }
+
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -33,29 +45,31 @@ var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var IconButton = function IconButton(_ref) {
   var iconComponent = _ref.iconComponent,
       _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? 'normal' : _ref$theme,
+      theme = _ref$theme === void 0 ? _theme2.THEME.normal : _ref$theme,
       _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'primary' : _ref$type,
+      type = _ref$type === void 0 ? _type.TYPE.primary : _ref$type,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$active = _ref.active,
-      active = _ref$active === void 0 ? false : _ref$active;
-  var themeFunc = type === 'primary' ? _theme.getPrimaryIconButtonTheme : _theme.getSecondaryIconButtonTheme;
+      active = _ref$active === void 0 ? false : _ref$active,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var themeFunc = type === _type.TYPE.primary ? _theme.getPrimaryIconButtonTheme : _theme.getSecondaryIconButtonTheme;
 
   var _themeFunc = themeFunc(theme, active, disabled),
       color = _themeFunc.color,
       hoverColor = _themeFunc.hoverColor;
 
-  return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
+  return /*#__PURE__*/_react["default"].createElement(ButtonContainer, _extends({
     color: color,
     hoverColor: hoverColor
-  }, iconComponent);
+  }, props), iconComponent);
 };
 
 IconButton.propTypes = {
   iconComponent: _propTypes["default"].element.isRequired,
-  theme: _propTypes["default"].oneOf(['normal', 'photography', 'transparent', 'index']),
-  type: _propTypes["default"].oneOf(['primary', 'secondary']),
+  theme: _theme2.THEME_PROP_TYPES,
+  type: _type.TYPE_PROP_TYPES,
   disabled: _propTypes["default"].bool,
   active: _propTypes["default"].bool
 };

package/lib/button/components/iconWithTextButton.js

@@ -17,6 +17,8 @@ var _paragraph = require("../../text/paragraph");
 
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
+var _theme2 = require("@twreporter/core/lib/constants/theme");
+
 var _templateObject;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -50,7 +52,7 @@ var IconWithTextButton = function IconWithTextButton(_ref) {
       text = _ref$text === void 0 ? '' : _ref$text,
       iconComponent = _ref.iconComponent,
       _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? 'normal' : _ref$theme,
+      theme = _ref$theme === void 0 ? _theme2.THEME.normal : _ref$theme,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$active = _ref.active,
@@ -75,7 +77,7 @@ var IconWithTextButton = function IconWithTextButton(_ref) {
 IconWithTextButton.propTypes = {
   text: _propTypes["default"].string,
   iconComponent: _propTypes["default"].element.isRequired,
-  theme: _propTypes["default"].oneOf(['normal', 'photography', 'transparent', 'index']),
+  theme: _theme2.THEME_PROP_TYPES,
   disabled: _propTypes["default"].bool,
   active: _propTypes["default"].bool,
   hideText: _propTypes["default"].bool

package/lib/button/components/pillButton.js

@@ -17,6 +17,12 @@ var _theme = require("../utils/theme");
 
 var _size = require("../utils/size");
 
+var _size2 = require("../constants/size");
+
+var _type = require("../constants/type");
+
+var _theme2 = require("@twreporter/core/lib/constants/theme");
+
 var _excluded = ["text", "iconComponent", "size", "theme", "type", "disabled"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -30,8 +36,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "pillButton__ButtonContainer",
   componentId: "xa7tsy-0"
-})(["width:fit-content;display:flex;align-items:center;border-radius:40px;background-color:", ";border-color:", ";border-style:solid;border-width:1px;color:", ";padding:", ";cursor:pointer;svg{margin-left:4px;height:", ";width:", ";background-color:", ";}&:hover{color:", ";background-color:", ";border-color:", ";svg{background-color:", ";}}"], function (props) {
-  return props.type === 'primary' ? props.bgColor : 'transparent';
+})(["width:fit-content;display:flex;align-items:center;border-radius:40px;background-color:", ";border-color:", ";border-style:solid;border-width:1.5px;color:", ";padding:", ";cursor:pointer;svg{margin-left:4px;height:", ";width:", ";background-color:", ";}&:hover{color:", ";background-color:", ";border-color:", ";svg{background-color:", ";}}"], function (props) {
+  return props.type === _type.TYPE.primary ? props.bgColor : 'transparent';
 }, function (props) {
   return props.bgColor;
 }, function (props) {
@@ -47,7 +53,7 @@ var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 }, function (props) {
   return props.hoverColor;
 }, function (props) {
-  return props.type === 'primary' ? props.hoverBgColor : 'transparent';
+  return props.type === _type.TYPE.primary ? props.hoverBgColor : 'transparent';
 }, function (props) {
   return props.hoverBgColor;
 }, function (props) {
@@ -59,16 +65,16 @@ var PillButton = function PillButton(_ref) {
       text = _ref$text === void 0 ? '' : _ref$text,
       iconComponent = _ref.iconComponent,
       _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'S' : _ref$size,
+      size = _ref$size === void 0 ? _size2.SIZE.S : _ref$size,
       _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? 'normal' : _ref$theme,
+      theme = _ref$theme === void 0 ? _theme2.THEME.normal : _ref$theme,
       _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'primary' : _ref$type,
+      type = _ref$type === void 0 ? _type.TYPE.primary : _ref$type,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var themeFunc = type === 'primary' ? _theme.getFilledPillButtonTheme : _theme.getOutlinePillButtonTheme;
+  var themeFunc = type === _type.TYPE.primary ? _theme.getFilledPillButtonTheme : _theme.getOutlinePillButtonTheme;
 
   var _themeFunc = themeFunc(theme, disabled),
       color = _themeFunc.color,
@@ -80,7 +86,7 @@ var PillButton = function PillButton(_ref) {
       padding = _getSizeStyle.padding,
       iconSize = _getSizeStyle.iconSize;
 
-  var textJSX = size === 'S' ? /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
+  var textJSX = size === _size2.SIZE.S ? /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
     text: text,
     weight: "bold"
   }) : /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
@@ -101,9 +107,9 @@ var PillButton = function PillButton(_ref) {
 PillButton.propTypes = {
   iconComponent: _propTypes["default"].element,
   text: _propTypes["default"].string,
-  size: _propTypes["default"].oneOf(['S', 'L']),
-  theme: _propTypes["default"].oneOf(['transparent', 'normal', 'photography', 'index']),
-  type: _propTypes["default"].oneOf(['primary', 'secondary']),
+  size: _size2.SIZE_PROP_TYPES,
+  theme: _theme2.THEME_PROP_TYPES,
+  type: _type.TYPE_PROP_TYPES,
   disabled: _propTypes["default"].bool
 };
 var _default = PillButton;

package/lib/button/components/textButton.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _theme = require("../utils/theme");
+
+var _size = require("../utils/size");
+
+var _paragraph = require("../../text/paragraph");
+
+var _size2 = require("../constants/size");
+
+var _type = require("../constants/type");
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _theme2 = require("@twreporter/core/lib/constants/theme");
+
+var _excluded = ["text", "iconComponent", "size", "theme", "type", "active", "disabled"];
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "textButton__ButtonContainer",
+  componentId: "sc-1lwyrq5-0"
+})(["cursor:pointer;display:flex;align-items:center;color:", ";svg{height:", ";width:", ";background-color:", ";}", ""], function (props) {
+  return props.color;
+}, function (props) {
+  return props.iconSize;
+}, function (props) {
+  return props.iconSize;
+}, function (props) {
+  return props.color;
+}, _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &:hover {\n      color: ", ";\n      svg {\n        background-color: ", ";\n      }\n    }\n  "])), function (props) {
+  return props.hoverColor;
+}, function (props) {
+  return props.hoverColor;
+}));
+
+var TextButton = function TextButton(_ref) {
+  var _ref$text = _ref.text,
+      text = _ref$text === void 0 ? '' : _ref$text,
+      iconComponent = _ref.iconComponent,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _size2.SIZE.S : _ref$size,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? _theme2.THEME.normal : _ref$theme,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? _type.TYPE.primary : _ref$type,
+      _ref$active = _ref.active,
+      active = _ref$active === void 0 ? false : _ref$active,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var themeFunc;
+
+  if (disabled) {
+    themeFunc = _theme.getDisabledTextButtonTheme;
+  } else if (active) {
+    themeFunc = _theme.getActiveTextButtonTheme;
+  } else {
+    themeFunc = type === _type.TYPE.primary ? _theme.getPrimaryTextButtonTheme : _theme.getSecondaryTextButtonTheme;
+  }
+
+  var _themeFunc = themeFunc(theme, active),
+      color = _themeFunc.color,
+      hoverColor = _themeFunc.hoverColor;
+
+  var _getSizeStyle = (0, _size.getSizeStyle)(size),
+      iconSize = _getSizeStyle.iconSize;
+
+  var textJSX = size === _size2.SIZE.S ? /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
+    text: text,
+    weight: "bold"
+  }) : /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
+    text: text,
+    weight: "bold"
+  });
+  return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
+    color: color,
+    hoverColor: hoverColor,
+    iconSize: iconSize
+  }, textJSX, iconComponent);
+};
+
+TextButton.propTypes = {
+  iconComponent: _propTypes["default"].element,
+  text: _propTypes["default"].string,
+  size: _size2.SIZE_PROP_TYPES,
+  theme: _theme2.THEME_PROP_TYPES,
+  type: _type.TYPE_PROP_TYPES,
+  active: _propTypes["default"].bool,
+  disabled: _propTypes["default"].bool
+};
+var _default = TextButton;
+exports["default"] = _default;

package/lib/button/constants/size.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SIZE_STORYBOOK_ARG_TYPE = exports.SIZE_PROP_TYPES = exports.SIZE = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var SIZE = {
+  S: 'S',
+  L: 'L'
+};
+exports.SIZE = SIZE;
+
+var SIZE_PROP_TYPES = _propTypes["default"].oneOf([SIZE.S, SIZE.L]);
+
+exports.SIZE_PROP_TYPES = SIZE_PROP_TYPES;
+var SIZE_STORYBOOK_ARG_TYPE = {
+  defaultValue: SIZE.S,
+  options: [SIZE.S, SIZE.L],
+  control: {
+    type: 'radio'
+  }
+};
+exports.SIZE_STORYBOOK_ARG_TYPE = SIZE_STORYBOOK_ARG_TYPE;

package/lib/button/constants/type.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TYPE_STORYBOOK_ARG_TYPE = exports.TYPE_PROP_TYPES = exports.TYPE = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var TYPE = {
+  primary: 'primary',
+  secondary: 'secondary'
+};
+exports.TYPE = TYPE;
+
+var TYPE_PROP_TYPES = _propTypes["default"].oneOf([TYPE.primary, TYPE.secondary]);
+
+exports.TYPE_PROP_TYPES = TYPE_PROP_TYPES;
+var TYPE_STORYBOOK_ARG_TYPE = {
+  defaultValue: TYPE.primary,
+  options: [TYPE.primary, TYPE.secondary],
+  control: {
+    type: 'radio'
+  }
+};
+exports.TYPE_STORYBOOK_ARG_TYPE = TYPE_STORYBOOK_ARG_TYPE;

package/lib/button/index.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "IconWithTextButton", {
     return _iconWithTextButton["default"];
   }
 });
+Object.defineProperty(exports, "TextButton", {
+  enumerable: true,
+  get: function get() {
+    return _textButton["default"];
+  }
+});
 exports["default"] = void 0;
 
 var _pillButton = _interopRequireDefault(require("./components/pillButton"));
@@ -29,11 +35,14 @@ var _iconButton = _interopRequireDefault(require("./components/iconButton"));
 
 var _iconWithTextButton = _interopRequireDefault(require("./components/iconWithTextButton"));
 
+var _textButton = _interopRequireDefault(require("./components/textButton"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
   PillButton: _pillButton["default"],
   IconButton: _iconButton["default"],
-  IconWithTextButton: _iconWithTextButton["default"]
+  IconWithTextButton: _iconWithTextButton["default"],
+  TextButton: _textButton["default"]
 };
 exports["default"] = _default;

package/lib/button/stories/iconButton.stories.js

@@ -11,11 +11,19 @@ var _iconButton = _interopRequireDefault(require("../components/iconButton"));
 
 var _icon = require("../../icon");
 
+var _type = require("../constants/type");
+
+var _theme = require("@twreporter/core/lib/constants/theme");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
   title: 'Button/Icon Button',
-  component: _iconButton["default"]
+  component: _iconButton["default"],
+  argTypes: {
+    theme: _theme.THEME_STORYBOOK_ARG_TYPE,
+    type: _type.TYPE_STORYBOOK_ARG_TYPE
+  }
 };
 exports["default"] = _default;
 
@@ -29,8 +37,8 @@ iconButton.args = {
   iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
     direction: "down"
   }),
-  theme: 'normal',
-  type: 'primary',
+  theme: _theme.THEME.normal,
+  type: _type.TYPE.primary,
   disabled: false,
   active: false
 };
@@ -38,8 +46,8 @@ var shareButton = Template.bind({});
 exports.shareButton = shareButton;
 shareButton.args = {
   iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Share, null),
-  theme: 'normal',
-  type: 'primary',
+  theme: _theme.THEME.normal,
+  type: _type.TYPE.primary,
   disabled: false,
   active: false
 };

package/lib/button/stories/iconWithTextButton.stories.js

@@ -11,11 +11,16 @@ var _iconWithTextButton = _interopRequireDefault(require("../components/iconWith
 
 var _icon = require("../../icon");
 
+var _theme = require("@twreporter/core/lib/constants/theme");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
   title: 'Button/Icon With Text Button',
-  component: _iconWithTextButton["default"]
+  component: _iconWithTextButton["default"],
+  argTypes: {
+    theme: _theme.THEME_STORYBOOK_ARG_TYPE
+  }
 };
 exports["default"] = _default;
 
@@ -30,7 +35,7 @@ iconWithTextButton.args = {
   iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
     direction: "down"
   }),
-  theme: 'normal',
+  theme: _theme.THEME.normal,
   disabled: false,
   active: false,
   hideText: false
@@ -40,7 +45,7 @@ exports.shareButton = shareButton;
 shareButton.args = {
   text: '分享',
   iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Share, null),
-  theme: 'normal',
+  theme: _theme.THEME.normal,
   disabled: false,
   active: false,
   hideText: false

package/lib/button/stories/pillButton.stories.js

@@ -11,11 +11,22 @@ var _pillButton = _interopRequireDefault(require("../components/pillButton"));
 
 var _icon = require("../../icon");
 
+var _size = require("../constants/size");
+
+var _type = require("../constants/type");
+
+var _theme = require("@twreporter/core/lib/constants/theme");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
   title: 'Button/Pill Button',
-  component: _pillButton["default"]
+  component: _pillButton["default"],
+  argTypes: {
+    theme: _theme.THEME_STORYBOOK_ARG_TYPE,
+    type: _type.TYPE_STORYBOOK_ARG_TYPE,
+    size: _size.SIZE_STORYBOOK_ARG_TYPE
+  }
 };
 exports["default"] = _default;
 
@@ -27,9 +38,9 @@ var pillButton = Template.bind({});
 exports.pillButton = pillButton;
 pillButton.args = {
   text: '文字',
-  size: 'S',
-  theme: 'normal',
-  type: 'primary',
+  size: _size.SIZE.S,
+  theme: _theme.THEME.normal,
+  type: _type.TYPE.primary,
   disabled: false
 };
 var withArrowIcon = Template.bind({});
@@ -39,8 +50,8 @@ withArrowIcon.args = {
     direction: "right"
   }),
   text: '文字',
-  size: 'S',
-  theme: 'normal',
-  type: 'primary',
+  size: _size.SIZE.S,
+  theme: _theme.THEME.normal,
+  type: _type.TYPE.primary,
   disabled: false
 };

package/lib/button/stories/textButton.stories.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withArrowIcon = exports.textButton = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _textButton = _interopRequireDefault(require("../components/textButton"));
+
+var _icon = require("../../icon");
+
+var _size = require("../constants/size");
+
+var _type = require("../constants/type");
+
+var _theme = require("@twreporter/core/lib/constants/theme");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  title: 'Button/Text Button',
+  component: _textButton["default"],
+  argTypes: {
+    theme: _theme.THEME_STORYBOOK_ARG_TYPE,
+    type: _type.TYPE_STORYBOOK_ARG_TYPE,
+    size: _size.SIZE_STORYBOOK_ARG_TYPE
+  }
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_textButton["default"], args);
+};
+
+var textButton = Template.bind({});
+exports.textButton = textButton;
+textButton.args = {
+  text: '文字',
+  size: _size.SIZE.S,
+  theme: _theme.THEME.normal,
+  type: _type.TYPE.primary,
+  active: false,
+  disabled: false
+};
+var withArrowIcon = Template.bind({});
+exports.withArrowIcon = withArrowIcon;
+withArrowIcon.args = {
+  iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
+    direction: "right"
+  }),
+  text: '文字',
+  size: _size.SIZE.S,
+  theme: _theme.THEME.normal,
+  type: _type.TYPE.primary,
+  active: false,
+  disabled: false
+};