@twreporter/react-components 8.9.0-rc.2 → 8.9.0-rc.5

package/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.9.0-rc.5](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.9.0-rc.4...@twreporter/react-components@8.9.0-rc.5) (2022-05-27)
+
+
+### Bug Fixes
+
+* add pillButton iconComponent prop & fix empty bookmark style ([54f0e52](https://github.com/twreporter/twreporter-npm-packages/commit/54f0e52b97eb97616bbb83864810acc80101647e))
+
+
+
+
+
+# [8.9.0-rc.4](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.9.0-rc.3...@twreporter/react-components@8.9.0-rc.4) (2022-05-27)
+
+
+### Bug Fixes
+
+* address code review ([a0d5515](https://github.com/twreporter/twreporter-npm-packages/commit/a0d5515c4f1e8c11cbd1bd23880d4302af37b816))
+
+
+### Features
+
+* add IconButton, IconWithTextButton, Printer components ([819f246](https://github.com/twreporter/twreporter-npm-packages/commit/819f2461e0235826333544cae0d6e3a6115a1f8d))
+
+
+
+
+
+# [8.9.0-rc.3](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.9.0-rc.2...@twreporter/react-components@8.9.0-rc.3) (2022-05-25)
+
+
+### Bug Fixes
+
+* vercel build fail problem & missing bookmark-add icon ([e1f0668](https://github.com/twreporter/twreporter-npm-packages/commit/e1f0668c7d96a61444100fe0cccc0108e0334ea2))
+
+
+
+
+
 # [8.9.0-rc.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.9.0-rc.1...@twreporter/react-components@8.9.0-rc.2) (2022-05-25)
 
 

package/lib/bookmark-list/empty-guide.js

@@ -17,6 +17,8 @@ var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/consta
 
 var _requestOrigins = _interopRequireDefault(require("@twreporter/core/lib/constants/request-origins"));
 
+var _icon = require("../icon");
+
 var _paragraph = require("../text/paragraph");
 
 var _button = require("../button");
@@ -25,23 +27,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 // @twreporter
 // components
-var BookmarkIcon = function BookmarkIcon(props) {
-  return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M14.173.225H2.047C1.317.225.725.817.725 1.547v18.016a.981.981 0 0 0 1.476.847l5.909-3.461 5.909 3.46a.981.981 0 0 0 1.476-.847V1.548c0-.73-.592-1.322-1.322-1.322m-.178 1.5v16.933l-5.127-3.003-.758-.445-.758.445-5.127 3.003V1.725h11.77",
-    fill: "gray"
-  }));
-};
-
-BookmarkIcon.defaultProps = {
-  width: "16",
-  height: "21",
-  viewBox: "0 0 16 21",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-};
-
 var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "empty-guide__Container",
   componentId: "sc-1y7u9aq-0"
@@ -60,7 +45,7 @@ var ButtonContainer = /*#__PURE__*/_styledComponents["default"].a.withConfig({
 var GuideContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "empty-guide__GuideContainer",
   componentId: "sc-1y7u9aq-3"
-})(["display:flex;align-items:flex-end;color:", ";img{width:18px;height:16px;margin:0 4px;padding-bottom:4px;}"], _color.colorGrayscale.gray600);
+})(["display:flex;align-items:baseline;color:", ";svg{background-color:", ";width:18px;height:18px;margin:0 4px;transform:translateY(3px);}"], _color.colorGrayscale.gray600, _color.colorGrayscale.gray600);
 
 var EmptyGuide = function EmptyGuide(_ref) {
   var _ref$releaseBranch = _ref.releaseBranch,
@@ -76,17 +61,16 @@ var EmptyGuide = function EmptyGuide(_ref) {
     weight: "bold"
   }), /*#__PURE__*/_react["default"].createElement(GuideContainer, null, /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
     text: "\u9EDE\u64CA"
-  }), /*#__PURE__*/_react["default"].createElement("img", {
-    src: BookmarkIcon,
-    alt: "Add Bookmark"
+  }), /*#__PURE__*/_react["default"].createElement(_icon.Bookmark, {
+    type: "add",
+    releaseBranch: releaseBranch
   }), /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
     text: "\u5C07\u559C\u611B\u7684\u6587\u7AE0\u52A0\u5165\u6211\u7684\u66F8\u7C64"
   }))), /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
     href: homepageUrl
   }, /*#__PURE__*/_react["default"].createElement(_button.PillButton, {
     text: "\u958B\u59CB\u63A2\u7D22",
-    size: "L",
-    releaseBranch: releaseBranch
+    size: "L"
   })));
 };
 

package/lib/button/components/iconButton.js

@@ -0,0 +1,63 @@
+"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 _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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: "iconButton__ButtonContainer",
+  componentId: "sc-1v7s35n-0"
+})(["cursor:pointer;display:flex;svg{width:24px;height:24px;background-color:", ";}", ""], function (props) {
+  return props.color;
+}, _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &:hover svg {\n      background-color: ", ";\n    }\n  "])), function (props) {
+  return props.hoverColor;
+}));
+
+var IconButton = function IconButton(_ref) {
+  var iconComponent = _ref.iconComponent,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'normal' : _ref$theme,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? '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;
+
+  var _themeFunc = themeFunc(theme, active, disabled),
+      color = _themeFunc.color,
+      hoverColor = _themeFunc.hoverColor;
+
+  return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
+    color: color,
+    hoverColor: hoverColor
+  }, iconComponent);
+};
+
+IconButton.propTypes = {
+  iconComponent: _propTypes["default"].element.isRequired,
+  theme: _propTypes["default"].oneOf(['normal', 'photography', 'transparent', 'index']),
+  type: _propTypes["default"].oneOf(['primary', 'secondary']),
+  disabled: _propTypes["default"].bool,
+  active: _propTypes["default"].bool
+};
+var _default = IconButton;
+exports["default"] = _default;

package/lib/button/components/iconWithTextButton.js

@@ -0,0 +1,71 @@
+"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 _paragraph = require("../../text/paragraph");
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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: "iconWithTextButton__ButtonContainer",
+  componentId: "sc-1f9d1q4-0"
+})(["cursor:pointer;display:flex;flex-direction:column;align-items:center;color:", ";svg{width:24px;height:24px;background-color:", ";}", ""], function (props) {
+  return props.color;
+}, 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 IconWithTextButton = function IconWithTextButton(_ref) {
+  var _ref$text = _ref.text,
+      text = _ref$text === void 0 ? '' : _ref$text,
+      iconComponent = _ref.iconComponent,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'normal' : _ref$theme,
+      _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 _getIconWithTextButto = (0, _theme.getIconWithTextButtonTheme)(theme, active, disabled),
+      color = _getIconWithTextButto.color,
+      hoverColor = _getIconWithTextButto.hoverColor;
+
+  return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
+    color: color,
+    hoverColor: hoverColor
+  }, iconComponent, /*#__PURE__*/_react["default"].createElement(_paragraph.P4, {
+    text: text,
+    weight: "bold"
+  }));
+};
+
+IconWithTextButton.propTypes = {
+  text: _propTypes["default"].string,
+  iconComponent: _propTypes["default"].element.isRequired,
+  theme: _propTypes["default"].oneOf(['normal', 'photography', 'transparent', 'index']),
+  disabled: _propTypes["default"].bool,
+  active: _propTypes["default"].bool
+};
+var _default = IconWithTextButton;
+exports["default"] = _default;

package/lib/button/components/pillButton.js

@@ -11,8 +11,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _icon = require("../../icon");
-
 var _paragraph = require("../../text/paragraph");
 
 var _theme = require("../utils/theme");
@@ -52,14 +50,13 @@ var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var PillButton = function PillButton(_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 ? 'S' : _ref$size,
       _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? 'normal' : _ref$theme,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'primary' : _ref$type,
-      _ref$withIcon = _ref.withIcon,
-      withIcon = _ref$withIcon === void 0 ? false : _ref$withIcon,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   var themeFunc = type === 'primary' ? _theme.getFilledPillButtonTheme : _theme.getOutlinePillButtonTheme;
@@ -74,9 +71,6 @@ var PillButton = function PillButton(_ref) {
       padding = _getSizeStyle.padding,
       iconSize = _getSizeStyle.iconSize;
 
-  var iconJSX = withIcon ? /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
-    direction: "right"
-  }) : '';
   var textJSX = size === 'S' ? /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
     text: text,
     weight: "bold"
@@ -92,15 +86,15 @@ var PillButton = function PillButton(_ref) {
     iconSize: iconSize,
     hoverColor: hoverColor,
     hoverBgColor: hoverBgColor
-  }, textJSX, iconJSX);
+  }, textJSX, iconComponent);
 };
 
 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']),
-  withIcon: _propTypes["default"].bool,
   disabled: _propTypes["default"].bool
 };
 var _default = PillButton;

package/lib/button/index.js

@@ -9,13 +9,31 @@ Object.defineProperty(exports, "PillButton", {
     return _pillButton["default"];
   }
 });
+Object.defineProperty(exports, "IconButton", {
+  enumerable: true,
+  get: function get() {
+    return _iconButton["default"];
+  }
+});
+Object.defineProperty(exports, "IconWithTextButton", {
+  enumerable: true,
+  get: function get() {
+    return _iconWithTextButton["default"];
+  }
+});
 exports["default"] = void 0;
 
 var _pillButton = _interopRequireDefault(require("./components/pillButton"));
 
+var _iconButton = _interopRequireDefault(require("./components/iconButton"));
+
+var _iconWithTextButton = _interopRequireDefault(require("./components/iconWithTextButton"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
-  PillButton: _pillButton["default"]
+  PillButton: _pillButton["default"],
+  IconButton: _iconButton["default"],
+  IconWithTextButton: _iconWithTextButton["default"]
 };
 exports["default"] = _default;

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

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shareButton = exports.iconButton = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _iconButton = _interopRequireDefault(require("../components/iconButton"));
+
+var _icon = require("../../icon");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  title: 'Button/Icon Button',
+  component: _iconButton["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_iconButton["default"], args);
+};
+
+var iconButton = Template.bind({});
+exports.iconButton = iconButton;
+iconButton.args = {
+  iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
+    direction: "down"
+  }),
+  theme: 'normal',
+  type: 'primary',
+  disabled: false,
+  active: false
+};
+var shareButton = Template.bind({});
+exports.shareButton = shareButton;
+shareButton.args = {
+  iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Share, null),
+  theme: 'normal',
+  type: 'primary',
+  disabled: false,
+  active: false
+};

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

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shareButton = exports.iconWithTextButton = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _iconWithTextButton = _interopRequireDefault(require("../components/iconWithTextButton"));
+
+var _icon = require("../../icon");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  title: 'Button/Icon With Text Button',
+  component: _iconWithTextButton["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_iconWithTextButton["default"], args);
+};
+
+var iconWithTextButton = Template.bind({});
+exports.iconWithTextButton = iconWithTextButton;
+iconWithTextButton.args = {
+  text: '文字',
+  iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
+    direction: "down"
+  }),
+  theme: 'normal',
+  disabled: false,
+  active: false
+};
+var shareButton = Template.bind({});
+exports.shareButton = shareButton;
+shareButton.args = {
+  text: '分享',
+  iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Share, null),
+  theme: 'normal',
+  disabled: false,
+  active: false
+};

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

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.pillButton = exports["default"] = void 0;
+exports.withArrowIcon = exports.pillButton = exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _pillButton = _interopRequireDefault(require("../components/pillButton"));
 
+var _icon = require("../../icon");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
@@ -28,6 +30,17 @@ pillButton.args = {
   size: 'S',
   theme: 'normal',
   type: 'primary',
-  withIcon: true,
+  disabled: false
+};
+var withArrowIcon = Template.bind({});
+exports.withArrowIcon = withArrowIcon;
+withArrowIcon.args = {
+  iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
+    direction: "right"
+  }),
+  text: '文字',
+  size: 'S',
+  theme: 'normal',
+  type: 'primary',
   disabled: false
 };

package/lib/button/utils/theme.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.getOutlinePillButtonTheme = exports.getFilledPillButtonTheme = void 0;
+exports["default"] = exports.getIconWithTextButtonTheme = exports.getSecondaryIconButtonTheme = exports.getPrimaryIconButtonTheme = exports.getOutlinePillButtonTheme = exports.getFilledPillButtonTheme = void 0;
 
 var _color = require("@twreporter/core/lib/constants/color");
 
@@ -111,8 +111,167 @@ var getOutlinePillButtonTheme = function getOutlinePillButtonTheme(theme, disabl
 };
 
 exports.getOutlinePillButtonTheme = getOutlinePillButtonTheme;
+
+var getPrimaryIconButtonTheme = function getPrimaryIconButtonTheme(theme, isActive, isDisabled) {
+  if (isDisabled) {
+    return {
+      color: _color.colorGrayscale.gray400,
+      hoverColor: _color.colorGrayscale.gray400
+    };
+  }
+
+  var switchKey = isActive ? "".concat(theme, "-active") : theme;
+
+  switch (switchKey) {
+    case 'photography':
+      return {
+        color: _color.colorGrayscale.white,
+        hoverColor: _color.colorSupportive.main
+      };
+
+    case 'photography-active':
+      return {
+        color: _color.colorSupportive.main,
+        hoverColor: _color.colorSupportive.main
+      };
+
+    case 'transparent':
+      return {
+        color: _color.colorGrayscale.white,
+        hoverColor: _color.colorGrayscale.gray200
+      };
+
+    case 'transparent-active':
+      return {
+        color: _color.colorGrayscale.white,
+        hoverColor: _color.colorGrayscale.white
+      };
+
+    case 'normal-active':
+      return {
+        color: _color.colorBrand.heavy,
+        hoverColor: _color.colorBrand.heavy
+      };
+
+    case 'normal':
+    default:
+      return {
+        color: _color.colorGrayscale.gray600,
+        hoverColor: _color.colorGrayscale.gray800
+      };
+  }
+};
+
+exports.getPrimaryIconButtonTheme = getPrimaryIconButtonTheme;
+
+var getSecondaryIconButtonTheme = function getSecondaryIconButtonTheme(theme, isActive, isDisabled) {
+  if (isDisabled) {
+    return {
+      color: _color.colorGrayscale.gray400,
+      hoverColor: _color.colorGrayscale.gray400
+    };
+  }
+
+  var switchKey = isActive ? "".concat(theme, "-active") : theme;
+
+  switch (switchKey) {
+    case 'photography':
+      return {
+        color: _color.colorGrayscale.gray400,
+        hoverColor: _color.colorSupportive.main
+      };
+
+    case 'photography-active':
+      return {
+        color: _color.colorSupportive.main,
+        hoverColor: _color.colorSupportive.main
+      };
+
+    case 'transparent':
+      return {
+        color: _color.colorGrayscale.gray600,
+        hoverColor: _color.colorGrayscale.white
+      };
+
+    case 'transparent-active':
+      return {
+        color: _color.colorGrayscale.gray600,
+        hoverColor: _color.colorGrayscale.gray600
+      };
+
+    case 'normal-active':
+      return {
+        color: _color.colorBrand.heavy,
+        hoverColor: _color.colorBrand.heavy
+      };
+
+    case 'normal':
+    default:
+      return {
+        color: _color.colorGrayscale.gray400,
+        hoverColor: _color.colorGrayscale.gray600
+      };
+  }
+};
+
+exports.getSecondaryIconButtonTheme = getSecondaryIconButtonTheme;
+
+var getIconWithTextButtonTheme = function getIconWithTextButtonTheme(theme, isActive, isDisabled) {
+  if (isDisabled) {
+    return {
+      color: _color.colorGrayscale.gray400,
+      hoverColor: _color.colorGrayscale.gray400
+    };
+  }
+
+  var switchKey = isActive ? "".concat(theme, "-active") : theme;
+
+  switch (switchKey) {
+    case 'photography':
+      return {
+        color: _color.colorGrayscale.gray100,
+        hoverColor: _color.colorSupportive.main
+      };
+
+    case 'photography-active':
+      return {
+        color: _color.colorSupportive.main,
+        hoverColor: _color.colorSupportive.main
+      };
+
+    case 'transparent':
+      return {
+        color: _color.colorGrayscale.gray100,
+        hoverColor: _color.colorGrayscale.gray200
+      };
+
+    case 'transparent-active':
+      return {
+        color: _color.colorGrayscale.white,
+        hoverColor: _color.colorGrayscale.white
+      };
+
+    case 'normal-active':
+      return {
+        color: _color.colorBrand.heavy,
+        hoverColor: _color.colorBrand.heavy
+      };
+
+    case 'normal':
+    default:
+      return {
+        color: _color.colorGrayscale.gray600,
+        hoverColor: _color.colorBrand.heavy
+      };
+  }
+};
+
+exports.getIconWithTextButtonTheme = getIconWithTextButtonTheme;
 var _default = {
   getFilledPillButtonTheme: getFilledPillButtonTheme,
-  getOutlinePillButtonTheme: getOutlinePillButtonTheme
+  getOutlinePillButtonTheme: getOutlinePillButtonTheme,
+  getPrimaryIconButtonTheme: getPrimaryIconButtonTheme,
+  getSecondaryIconButtonTheme: getSecondaryIconButtonTheme,
+  getIconWithTextButtonTheme: getIconWithTextButtonTheme
 };
 exports["default"] = _default;

package/lib/icon/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Line = exports.Youtube = exports.Twitter = exports.Medium = exports.Instagram = exports.Facebook = exports.Loading = exports.Copy = exports.Topic = exports.Article = exports.Clock = exports.Text = exports.Share = exports.Home = exports.Member = exports.Search = exports.Cross = exports.Hamburger = exports.Bookmark = exports.Arrow = exports.Icon = void 0;
+exports["default"] = exports.Line = exports.Youtube = exports.Twitter = exports.Medium = exports.Instagram = exports.Facebook = exports.Printer = exports.Loading = exports.Copy = exports.Topic = exports.Article = exports.Clock = exports.Text = exports.Share = exports.Home = exports.Member = exports.Search = exports.Cross = exports.Hamburger = exports.Bookmark = exports.Arrow = exports.Icon = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -212,6 +212,17 @@ Loading.propTypes = {
   releaseBranch: _propTypes2["default"].releaseBranch
 };
 
+var Printer = function Printer(args) {
+  return /*#__PURE__*/_react["default"].createElement(Icon, _extends({
+    filename: "printer"
+  }, args));
+};
+
+exports.Printer = Printer;
+Printer.propTypes = {
+  releaseBranch: _propTypes2["default"].releaseBranch
+};
+
 var Facebook = function Facebook(args) {
   return /*#__PURE__*/_react["default"].createElement(Icon, _extends({
     filename: "facebook"
@@ -290,6 +301,7 @@ var _default = {
   Instagram: Instagram,
   Line: Line,
   Loading: Loading,
+  Printer: Printer,
   Medium: Medium,
   Member: Member,
   Search: Search,

package/lib/icon/stories/printer.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.printer = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = require("../index");
+
+var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var master = _releaseBranch["default"].master,
+    staging = _releaseBranch["default"].staging,
+    preview = _releaseBranch["default"].preview,
+    release = _releaseBranch["default"].release;
+var _default = {
+  title: 'Icon/Printer',
+  component: _index.Printer,
+  argTypes: {
+    releaseBranch: {
+      defaultValue: master,
+      options: [master, staging, preview, release],
+      control: {
+        type: 'radio'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var printer = function printer(args) {
+  return /*#__PURE__*/_react["default"].createElement(_index.Printer, args);
+};
+
+exports.printer = printer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.9.0-rc.2",
+  "version": "8.9.0-rc.5",
   "main": "lib/index.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
   "author": "twreporter <developer@twreporter.org>",
@@ -44,5 +44,5 @@
     "babel-loader": "^8.2.4",
     "chromatic": "^6.5.4"
   },
-  "gitHead": "c41e68140869fca377f368cc8c9f4377923e4cf4"
+  "gitHead": "8f2a6d0a3f503a52ac691f18e8e0ce78bb5b0026"
 }