@twreporter/react-components 8.17.0-rc.1 → 8.17.0-rc.10

package/lib/button/components/iconButton.js

@@ -13,7 +13,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _theme = require("../utils/theme");
 
-var _type = require("../constants/type");
+var _enums = require("../enums");
 
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
@@ -47,14 +47,14 @@ var IconButton = function IconButton(_ref) {
       _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,
+      type = _ref$type === void 0 ? _enums.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,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var themeFunc = type === _type.TYPE.primary ? _theme.getPrimaryIconButtonTheme : _theme.getSecondaryIconButtonTheme;
+  var themeFunc = type === _enums.Type.PRIMARY ? _theme.getPrimaryIconButtonTheme : _theme.getSecondaryIconButtonTheme;
 
   var _themeFunc = themeFunc(theme, active, disabled),
       color = _themeFunc.color,
@@ -68,10 +68,12 @@ var IconButton = function IconButton(_ref) {
 
 IconButton.propTypes = {
   iconComponent: _propTypes["default"].element.isRequired,
-  theme: _theme2.THEME_PROP_TYPES,
-  type: _type.TYPE_PROP_TYPES,
+  theme: _propTypes["default"].oneOf(Object.values(_theme2.THEME)),
+  type: _propTypes["default"].oneOf(Object.values(_enums.Type)),
   disabled: _propTypes["default"].bool,
   active: _propTypes["default"].bool
 };
+IconButton.THEME = _theme2.THEME;
+IconButton.Type = _enums.Type;
 var _default = IconButton;
 exports["default"] = _default;

package/lib/button/components/iconWithTextButton.js

@@ -38,10 +38,10 @@ var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   return props.hoverColor;
 }));
 
-var StyledP4 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P4).withConfig({
-  displayName: "iconWithTextButton__StyledP4",
+var StyledP3 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P3).withConfig({
+  displayName: "iconWithTextButton__StyledP3",
   componentId: "sc-1f9d1q4-1"
-})(["max-height:", ";opacity:", ";transition:opacity 100ms;"], function (props) {
+})(["margin-top:2px;max-height:", ";opacity:", ";transition:opacity 100ms;"], function (props) {
   return props.hideText ? '0px' : 'none';
 }, function (props) {
   return props.hideText ? '0' : '1';
@@ -67,9 +67,9 @@ var IconWithTextButton = function IconWithTextButton(_ref) {
   return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
     color: color,
     hoverColor: hoverColor
-  }, iconComponent, /*#__PURE__*/_react["default"].createElement(StyledP4, {
+  }, iconComponent, /*#__PURE__*/_react["default"].createElement(StyledP3, {
     text: text,
-    weight: "bold",
+    weight: _paragraph.P3.Weight.NORMAL,
     hideText: hideText
   }));
 };
@@ -77,10 +77,11 @@ var IconWithTextButton = function IconWithTextButton(_ref) {
 IconWithTextButton.propTypes = {
   text: _propTypes["default"].string,
   iconComponent: _propTypes["default"].element.isRequired,
-  theme: _theme2.THEME_PROP_TYPES,
+  theme: _propTypes["default"].oneOf(Object.values(_theme2.THEME)),
   disabled: _propTypes["default"].bool,
   active: _propTypes["default"].bool,
   hideText: _propTypes["default"].bool
 };
+IconWithTextButton.THEME = _theme2.THEME;
 var _default = IconWithTextButton;
 exports["default"] = _default;

package/lib/button/components/link.js

@@ -0,0 +1,84 @@
+"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 _customizedLink = _interopRequireDefault(require("../../customized-link"));
+
+var _paragraph = require("../../text/paragraph");
+
+var _enums = require("../enums");
+
+var _color2 = require("@twreporter/core/lib/constants/color");
+
+var _excluded = ["type", "link", "text", "weight", "TextComponent"];
+
+var _decoration, _color;
+
+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 _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 style = {
+  decoration: (_decoration = {}, _defineProperty(_decoration, _enums.LinkType.DEFAULT, 'none'), _defineProperty(_decoration, _enums.LinkType.UNDERLINE, 'underline'), _decoration),
+  color: (_color = {}, _defineProperty(_color, _enums.LinkType.DEFAULT, _color2.COLOR_SEMANTIC.info), _defineProperty(_color, _enums.LinkType.UNDERLINE, _color2.colorGrayscale.gray600), _color)
+};
+var LinkContainer = /*#__PURE__*/(0, _styledComponents["default"])(_customizedLink["default"]).withConfig({
+  displayName: "link__LinkContainer",
+  componentId: "g5z7t5-0"
+})(["display:flex;align-items:center;text-underline-offset:4px;text-decoration-line:", ";color:", ";&:hover{text-decoration-line:underline;}"], function (props) {
+  return style.decoration[props.type];
+}, function (props) {
+  return style.color[props.type];
+});
+
+var LinkButton = function LinkButton(_ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? _enums.LinkType.DEFAULT : _ref$type,
+      _ref$link = _ref.link,
+      link = _ref$link === void 0 ? {} : _ref$link,
+      _ref$text = _ref.text,
+      text = _ref$text === void 0 ? '' : _ref$text,
+      _ref$weight = _ref.weight,
+      weight = _ref$weight === void 0 ? _paragraph.P1.Weight.NORMAL : _ref$weight,
+      _ref$TextComponent = _ref.TextComponent,
+      TextComponent = _ref$TextComponent === void 0 ? null : _ref$TextComponent,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var textJSX = TextComponent ? /*#__PURE__*/_react["default"].createElement(TextComponent, {
+    text: text,
+    weight: weight
+  }) : /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
+    text: text,
+    weight: weight
+  });
+  return /*#__PURE__*/_react["default"].createElement(LinkContainer, _extends({
+    type: type
+  }, link, props), textJSX);
+};
+
+LinkButton.propTypes = {
+  type: _propTypes["default"].oneOf(Object.values(_enums.LinkType)),
+  link: _propTypes["default"].object,
+  text: _propTypes["default"].string.isRequired,
+  weight: _paragraph.P1.propTypes.weight,
+  TextComponent: _propTypes["default"].elementType
+};
+LinkButton.Type = _enums.LinkType;
+LinkButton.Weight = _paragraph.P1.Weight;
+var _default = LinkButton;
+exports["default"] = _default;

package/lib/button/components/pillButton.js

@@ -17,13 +17,13 @@ var _theme = require("../utils/theme");
 
 var _size = require("../utils/size");
 
-var _size2 = require("../constants/size");
+var _enums = require("../enums");
 
-var _type = require("../constants/type");
+var _sharedEnum = require("../../shared-enum");
 
 var _theme2 = require("@twreporter/core/lib/constants/theme");
 
-var _excluded = ["text", "iconComponent", "size", "theme", "type", "disabled"];
+var _excluded = ["text", "leftIconComponent", "rightIconComponent", "size", "theme", "type", "style", "disabled"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -36,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: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';
+})(["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{height:", ";width:", ";background-color:", ";}&:hover{color:", ";background-color:", ";border-color:", ";svg{background-color:", ";}}"], function (props) {
+  return props.type === _enums.Type.PRIMARY ? props.bgColor : 'transparent';
 }, function (props) {
   return props.bgColor;
 }, function (props) {
@@ -53,30 +53,40 @@ var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 }, function (props) {
   return props.hoverColor;
 }, function (props) {
-  return props.type === _type.TYPE.primary ? props.hoverBgColor : 'transparent';
+  return props.type === _enums.Type.PRIMARY ? props.hoverBgColor : 'transparent';
 }, function (props) {
   return props.hoverBgColor;
 }, function (props) {
   return props.hoverColor;
 });
 
+var IconContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "pillButton__IconContainer",
+  componentId: "xa7tsy-1"
+})(["display:flex;align-items:center;&:first-child{margin-right:4px;}&:last-child{margin-left:4px;}"]);
+
 var PillButton = function PillButton(_ref) {
   var _ref$text = _ref.text,
       text = _ref$text === void 0 ? '' : _ref$text,
-      iconComponent = _ref.iconComponent,
+      _ref$leftIconComponen = _ref.leftIconComponent,
+      leftIconComponent = _ref$leftIconComponen === void 0 ? null : _ref$leftIconComponen,
+      _ref$rightIconCompone = _ref.rightIconComponent,
+      rightIconComponent = _ref$rightIconCompone === void 0 ? null : _ref$rightIconCompone,
       _ref$size = _ref.size,
-      size = _ref$size === void 0 ? _size2.SIZE.S : _ref$size,
+      size = _ref$size === void 0 ? _sharedEnum.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,
+      type = _ref$type === void 0 ? _enums.Type.PRIMARY : _ref$type,
+      _ref$style = _ref.style,
+      style = _ref$style === void 0 ? _enums.Style.BRAND : _ref$style,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var themeFunc = type === _type.TYPE.primary ? _theme.getFilledPillButtonTheme : _theme.getOutlinePillButtonTheme;
+  var themeFunc = type === _enums.Type.PRIMARY ? _theme.getFilledPillButtonTheme : _theme.getOutlinePillButtonTheme;
 
-  var _themeFunc = themeFunc(theme, disabled),
+  var _themeFunc = themeFunc(theme, disabled, style),
       color = _themeFunc.color,
       bgColor = _themeFunc.bgColor,
       hoverColor = _themeFunc.hoverColor,
@@ -86,13 +96,15 @@ var PillButton = function PillButton(_ref) {
       padding = _getSizeStyle.padding,
       iconSize = _getSizeStyle.iconSize;
 
-  var textJSX = size === _size2.SIZE.S ? /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
+  var textJSX = size === _sharedEnum.Size.S ? /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
     text: text,
     weight: "bold"
   }) : /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
     text: text,
     weight: "bold"
   });
+  var leftIconJSX = leftIconComponent ? /*#__PURE__*/_react["default"].createElement(IconContainer, null, leftIconComponent) : null;
+  var rightIconJSX = rightIconComponent ? /*#__PURE__*/_react["default"].createElement(IconContainer, null, rightIconComponent) : null;
   return /*#__PURE__*/_react["default"].createElement(ButtonContainer, _extends({
     type: type,
     padding: padding,
@@ -101,16 +113,22 @@ var PillButton = function PillButton(_ref) {
     iconSize: iconSize,
     hoverColor: hoverColor,
     hoverBgColor: hoverBgColor
-  }, props), textJSX, iconComponent);
+  }, props), leftIconJSX, textJSX, rightIconJSX);
 };
 
 PillButton.propTypes = {
-  iconComponent: _propTypes["default"].element,
+  leftIconComponent: _propTypes["default"].element,
+  rightIconComponent: _propTypes["default"].element,
   text: _propTypes["default"].string,
-  size: _size2.SIZE_PROP_TYPES,
-  theme: _theme2.THEME_PROP_TYPES,
-  type: _type.TYPE_PROP_TYPES,
+  size: _propTypes["default"].oneOf(Object.values(_sharedEnum.Size)),
+  theme: _propTypes["default"].oneOf(Object.values(_theme2.THEME)),
+  type: _propTypes["default"].oneOf(Object.values(_enums.Type)),
+  style: _propTypes["default"].oneOf(Object.values(_enums.Style)),
   disabled: _propTypes["default"].bool
 };
+PillButton.THEME = _theme2.THEME;
+PillButton.Type = _enums.Type;
+PillButton.Size = _sharedEnum.Size;
+PillButton.Style = _enums.Style;
 var _default = PillButton;
 exports["default"] = _default;

package/lib/button/components/textButton.js

@@ -17,14 +17,14 @@ var _size = require("../utils/size");
 
 var _paragraph = require("../../text/paragraph");
 
-var _constants = require("../constants/");
+var _enums = require("../enums");
 
-var _size2 = require("../constants/size");
-
-var _type = require("../constants/type");
+var _sharedEnum = require("../../shared-enum");
 
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
+var _theme2 = require("@twreporter/core/lib/constants/theme");
+
 var _excluded = ["text", "leftIconComponent", "rightIconComponent", "size", "theme", "type", "active", "disabled"];
 
 var _templateObject;
@@ -71,11 +71,11 @@ var TextButton = function TextButton(_ref) {
       _ref$rightIconCompone = _ref.rightIconComponent,
       rightIconComponent = _ref$rightIconCompone === void 0 ? null : _ref$rightIconCompone,
       _ref$size = _ref.size,
-      size = _ref$size === void 0 ? _size2.SIZE.S : _ref$size,
+      size = _ref$size === void 0 ? _sharedEnum.Size.S : _ref$size,
       _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? _constants.TEXT_BUTTON_THEME.normal : _ref$theme,
+      theme = _ref$theme === void 0 ? _theme2.TEXT_BUTTON_THEME.normal : _ref$theme,
       _ref$type = _ref.type,
-      type = _ref$type === void 0 ? _type.TYPE.primary : _ref$type,
+      type = _ref$type === void 0 ? _enums.Type.PRIMARY : _ref$type,
       _ref$active = _ref.active,
       active = _ref$active === void 0 ? false : _ref$active,
       _ref$disabled = _ref.disabled,
@@ -89,7 +89,7 @@ var TextButton = function TextButton(_ref) {
   } else if (active) {
     themeFunc = _theme.getActiveTextButtonTheme;
   } else {
-    themeFunc = type === _type.TYPE.primary ? _theme.getPrimaryTextButtonTheme : _theme.getSecondaryTextButtonTheme;
+    themeFunc = type === _enums.Type.PRIMARY ? _theme.getPrimaryTextButtonTheme : _theme.getSecondaryTextButtonTheme;
   }
 
   var _themeFunc = themeFunc(theme, active),
@@ -99,7 +99,7 @@ var TextButton = function TextButton(_ref) {
   var _getSizeStyle = (0, _size.getSizeStyle)(size),
       iconSize = _getSizeStyle.iconSize;
 
-  var textJSX = size === _size2.SIZE.S ? /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
+  var textJSX = size === _sharedEnum.Size.S ? /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
     text: text,
     weight: "bold"
   }) : /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
@@ -110,20 +110,23 @@ var TextButton = function TextButton(_ref) {
     color: color,
     hoverColor: hoverColor,
     iconSize: iconSize
-  }, props), size === _size2.SIZE.L ? /*#__PURE__*/_react["default"].createElement(IconContainer, {
+  }, props), size === _sharedEnum.Size.L ? /*#__PURE__*/_react["default"].createElement(IconContainer, {
     isLeft: true
-  }, leftIconComponent) : leftIconComponent, textJSX, size === _size2.SIZE.L ? /*#__PURE__*/_react["default"].createElement(IconContainer, null, rightIconComponent) : rightIconComponent);
+  }, leftIconComponent) : leftIconComponent, textJSX, size === _sharedEnum.Size.L ? /*#__PURE__*/_react["default"].createElement(IconContainer, null, rightIconComponent) : rightIconComponent);
 };
 
 TextButton.propTypes = {
   leftIconComponent: _propTypes["default"].element,
   rightIconComponent: _propTypes["default"].element,
   text: _propTypes["default"].string,
-  size: _size2.SIZE_PROP_TYPES,
-  theme: _constants.TEXT_BUTTON_THEME_PROP_TYPES,
-  type: _type.TYPE_PROP_TYPES,
+  size: _propTypes["default"].oneOf(Object.values(_sharedEnum.Size)),
+  theme: _propTypes["default"].oneOf(Object.values(_theme2.TEXT_BUTTON_THEME)),
+  type: _propTypes["default"].oneOf(Object.values(_enums.Type)),
   active: _propTypes["default"].bool,
   disabled: _propTypes["default"].bool
 };
+TextButton.THEME = _theme2.TEXT_BUTTON_THEME;
+TextButton.Size = _sharedEnum.Size;
+TextButton.Type = _enums.Type;
 var _default = TextButton;
 exports["default"] = _default;

package/lib/button/constants/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TEXT_BUTTON_THEME_PROP_TYPES = exports.TEXT_BUTTON_THEME = void 0;
+exports.TEXT_BUTTON_THEME_PROP_TYPES = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -11,19 +11,6 @@ var _theme = require("@twreporter/core/lib/constants/theme");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-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 TEXT_BUTTON_THEME = Object.freeze(_objectSpread(_objectSpread({}, _theme.THEME), {}, {
-  brand: 'brand',
-  dark: 'dark',
-  light: 'light'
-}));
-exports.TEXT_BUTTON_THEME = TEXT_BUTTON_THEME;
-
-var TEXT_BUTTON_THEME_PROP_TYPES = _propTypes["default"].oneOf(Object.values(TEXT_BUTTON_THEME));
+var TEXT_BUTTON_THEME_PROP_TYPES = _propTypes["default"].oneOf(Object.values(_theme.TEXT_BUTTON_THEME));
 
 exports.TEXT_BUTTON_THEME_PROP_TYPES = TEXT_BUTTON_THEME_PROP_TYPES;

package/lib/button/enums/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinkType = exports.Type = exports.Style = void 0;
+var Style = Object.freeze({
+  BRAND: 'brand',
+  DARK: 'dark',
+  LIGHT: 'light'
+});
+exports.Style = Style;
+var Type = Object.freeze({
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary'
+});
+exports.Type = Type;
+var LinkType = Object.freeze({
+  DEFAULT: 'default',
+  UNDERLINE: 'underline'
+});
+exports.LinkType = LinkType;

package/lib/button/index.js

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "ToggleButton", {
     return _toggleButton["default"];
   }
 });
+Object.defineProperty(exports, "LinkButton", {
+  enumerable: true,
+  get: function get() {
+    return _link["default"];
+  }
+});
 exports["default"] = void 0;
 
 var _pillButton = _interopRequireDefault(require("./components/pillButton"));
@@ -45,6 +51,8 @@ var _textButton = _interopRequireDefault(require("./components/textButton"));
 
 var _toggleButton = _interopRequireDefault(require("./components/toggleButton"));
 
+var _link = _interopRequireDefault(require("./components/link"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
@@ -52,6 +60,7 @@ var _default = {
   IconButton: _iconButton["default"],
   IconWithTextButton: _iconWithTextButton["default"],
   TextButton: _textButton["default"],
-  ToggleButton: _toggleButton["default"]
+  ToggleButton: _toggleButton["default"],
+  LinkButton: _link["default"]
 };
 exports["default"] = _default;

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

@@ -7,13 +7,15 @@ exports.shareButton = exports.iconButton = exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _getEnumArg = require("../../storybook/utils/get-enum-arg");
+
 var _iconButton = _interopRequireDefault(require("../components/iconButton"));
 
 var _icon = require("../../icon");
 
-var _type = require("../constants/type");
+var _enums = require("../enums");
 
-var _theme = require("@twreporter/core/lib/constants/theme");
+var _constants = require("../../storybook/constants");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -21,8 +23,8 @@ var _default = {
   title: 'Button/Icon Button',
   component: _iconButton["default"],
   argTypes: {
-    theme: _theme.THEME_STORYBOOK_ARG_TYPE,
-    type: _type.TYPE_STORYBOOK_ARG_TYPE
+    theme: _constants.THEME_STORYBOOK_ARG_TYPE,
+    type: (0, _getEnumArg.getRadioArg)(_enums.Type, _enums.Type.PRIMARY)
   }
 };
 exports["default"] = _default;
@@ -37,8 +39,8 @@ iconButton.args = {
   iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
     direction: "down"
   }),
-  theme: _theme.THEME.normal,
-  type: _type.TYPE.primary,
+  theme: _iconButton["default"].THEME.normal,
+  type: _iconButton["default"].Type.PRIMARY,
   disabled: false,
   active: false
 };
@@ -46,8 +48,8 @@ var shareButton = Template.bind({});
 exports.shareButton = shareButton;
 shareButton.args = {
   iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Share, null),
-  theme: _theme.THEME.normal,
-  type: _type.TYPE.primary,
+  theme: _iconButton["default"].THEME.normal,
+  type: _iconButton["default"].Type.PRIMARY,
   disabled: false,
   active: false
 };

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

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

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

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.changeTextComponent = exports.link = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _getEnumArg = require("../../storybook/utils/get-enum-arg");
+
+var _link = _interopRequireDefault(require("../components/link"));
+
+var _paragraph = require("../../text/paragraph");
+
+var _headline = require("../../text/headline");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  title: 'Button/Link',
+  component: _link["default"],
+  argTypes: {
+    type: (0, _getEnumArg.getRadioArg)(_link["default"].Type, _link["default"].Type.DEFAULT),
+    // textComponent is only for storybook showcase, not real props
+    textComponent: {
+      defaultValue: 'P2',
+      options: ['not assign', 'P2', 'H4'],
+      control: {
+        type: 'radio'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_link["default"], args);
+};
+
+var link = Template.bind({});
+exports.link = link;
+link.args = {
+  text: '文字',
+  type: _link["default"].Type.DEFAULT,
+  link: {
+    to: 'https://www.twreporter.org'
+  }
+};
+link.parameters = {
+  controls: {
+    exclude: ['textComponent']
+  }
+};
+
+var changeTextComponent = function changeTextComponent(args) {
+  if (args.textComponent === 'P2') {
+    args.TextComponent = _paragraph.P2;
+  }
+
+  if (args.textComponent === 'H4') {
+    args.TextComponent = _headline.H4;
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_link["default"], args);
+};
+
+exports.changeTextComponent = changeTextComponent;
+changeTextComponent.args = {
+  text: '文字',
+  type: _link["default"].Type.DEFAULT,
+  textComponent: 'P2',
+  link: {
+    to: 'https://www.twreporter.org'
+  }
+};
+changeTextComponent.parameters = {
+  controls: {
+    exclude: ['TextComponent']
+  }
+};