@twreporter/react-components 8.8.0-rc.1 → 8.9.0-rc.1

package/CHANGELOG.md

@@ -3,6 +3,42 @@
 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.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.9.0-rc.0...@twreporter/react-components@8.9.0-rc.1) (2022-05-25)
+
+
+### Bug Fixes
+
+* fix defect & pill button style ([7148d42](https://github.com/twreporter/twreporter-npm-packages/commit/7148d4295aaf4b76098c5130a80d29d742b46906))
+* fix problems ([0ab61ad](https://github.com/twreporter/twreporter-npm-packages/commit/0ab61ad04f5a147c2628b8d2735b56841ecf53d4))
+
+
+
+
+
+# [8.9.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.8.0...@twreporter/react-components@8.9.0-rc.0) (2022-05-12)
+
+
+### Bug Fixes
+
+* expand guideJSX ([a417972](https://github.com/twreporter/twreporter-npm-packages/commit/a4179721bbe1e9bd4f0829b144fe3f449bb12968))
+
+
+### Features
+
+* add bookmark list empty guide ([0f32a4a](https://github.com/twreporter/twreporter-npm-packages/commit/0f32a4afa0848793622b9d0878121111d875d634))
+
+
+
+
+
+# [8.8.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.8.0-rc.1...@twreporter/react-components@8.8.0) (2022-05-09)
+
+**Note:** Version bump only for package @twreporter/react-components
+
+
+
+
+
 # [8.8.0-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.8.0-rc.0...@twreporter/react-components@8.8.0-rc.1) (2022-05-09)
 
 

package/lib/bookmark-list/bookmark.js

@@ -140,7 +140,7 @@ var ImageFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var TextBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "bookmark__TextBox",
   componentId: "sc-1y8p1w5-5"
-})(["padding:", ";min-height:", "px;", " ", " position:relative;flex-basis:auto;flex-grow:1;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;"], styles.desktop.textBoxPadding.map(function (value) {
+})(["padding:", ";min-height:", "px;", " ", " position:relative;flex-basis:auto;flex-grow:1;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;a{width:100%;}"], styles.desktop.textBoxPadding.map(function (value) {
   return "".concat(value, "px");
 }).join(' '), styles.desktop.imageHeight + styles.desktop.imageBoxPadding[0] + styles.desktop.imageBoxPadding[2], _mediaQuery["default"].tabletOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    padding: ", ";\n    min-height: ", "px;\n  "])), styles.tablet.textBoxPadding.map(function (value) {
   return "".concat(value, "px");

package/lib/bookmark-list/bookmarks.js

@@ -5,25 +5,35 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _font = require("@twreporter/core/lib/constants/font");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _bookmark = _interopRequireDefault(require("./bookmark"));
 
-var _propTypes = _interopRequireDefault(require("@twreporter/core/lib/constants/prop-types"));
+var _emptyGuide = _interopRequireDefault(require("./empty-guide"));
+
+var _headline = require("../text/headline");
+
+var _paragraph = require("../text/paragraph");
+
+var _divider = _interopRequireDefault(require("../divider"));
 
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
-var _propTypes2 = _interopRequireDefault(require("prop-types"));
+var _propTypes2 = _interopRequireDefault(require("@twreporter/core/lib/constants/prop-types"));
 
-var _react = _interopRequireDefault(require("react"));
+var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _color = require("@twreporter/core/lib/constants/color");
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
 var _map = _interopRequireDefault(require("lodash/map"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -37,37 +47,43 @@ var _ = {
 var PageContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "bookmarks__PageContainer",
   componentId: "sc-1m95x6z-0"
-})(["padding:50px 0;margin:0;", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: 25px 0;\n  "]))));
+})(["padding:64px 0 120px 0;margin:0;", " ", ""], _mediaQuery["default"].tabletOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: 32px 0 120px 0;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding: 24px 0 120px 0;\n  "]))));
 
 var Column = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "bookmarks__Column",
   componentId: "sc-1m95x6z-1"
-})(["margin:0 auto;width:97%;max-width:834px;", " ", ""], _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: 100%;\n    max-width: 707px;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: 100%;\n  "]))));
+})(["margin:0 auto;width:97%;max-width:834px;", " ", ""], _mediaQuery["default"].tabletOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: 100%;\n    max-width: 707px;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: 100%;\n  "]))));
 
 var StatusBar = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "bookmarks__StatusBar",
   componentId: "sc-1m95x6z-2"
-})(["", " padding-bottom:25px;width:100%;"], _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    padding-left: 1em;\n  "]))));
+})(["", " padding-bottom:64px;width:stretch;"], _mediaQuery["default"].mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding-left: 1em;\n    padding-right: 1em;\n  "]))));
 
-var CountTitle = /*#__PURE__*/_styledComponents["default"].span.withConfig({
-  displayName: "bookmarks__CountTitle",
+var TitleContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "bookmarks__TitleContainer",
   componentId: "sc-1m95x6z-3"
-})(["font-size:20px;", " margin-right:1em;"], _mediaQuery["default"].mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    font-size: 18px;\n  "]))));
+})(["margin-bottom:16px;color:", ";"], _color.colorGrayscale.gray800);
 
-var CountNumber = /*#__PURE__*/_styledComponents["default"].span.withConfig({
-  displayName: "bookmarks__CountNumber",
+var CountContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "bookmarks__CountContainer",
   componentId: "sc-1m95x6z-4"
-})(["font-size:20px;", " font-weight:", ";"], _mediaQuery["default"].mobileOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    font-size: 18px;\n  "]))), _font.fontWeight.bold);
+})(["display:flex;margin-bottom:16px;"]);
+
+var CountTitle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "bookmarks__CountTitle",
+  componentId: "sc-1m95x6z-5"
+})(["margin-right:8px;"]);
 
 var BookmarksContainer = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
   displayName: "bookmarks__BookmarksContainer",
-  componentId: "sc-1m95x6z-5"
+  componentId: "sc-1m95x6z-6"
 })(["margin:0;width:100%;padding:0;"]);
 
 function Bookmarks(_ref) {
   var total = _ref.total,
       bookmarks = _ref.bookmarks,
-      handleDelete = _ref.handleDelete;
+      handleDelete = _ref.handleDelete,
+      releaseBranch = _ref.releaseBranch;
 
   var buildBookmark = function buildBookmark(bookmark) {
     return /*#__PURE__*/_react["default"].createElement(_bookmark["default"], {
@@ -77,17 +93,31 @@ function Bookmarks(_ref) {
     });
   };
 
-  return /*#__PURE__*/_react["default"].createElement(PageContainer, null, /*#__PURE__*/_react["default"].createElement(Column, null, /*#__PURE__*/_react["default"].createElement(StatusBar, null, /*#__PURE__*/_react["default"].createElement(CountTitle, null, "\u5168\u90E8"), /*#__PURE__*/_react["default"].createElement(CountNumber, null, total)), /*#__PURE__*/_react["default"].createElement(BookmarksContainer, null, _.map(bookmarks, buildBookmark))));
+  var counterJSX = total === 0 ? '' : /*#__PURE__*/_react["default"].createElement(CountContainer, null, /*#__PURE__*/_react["default"].createElement(CountTitle, null, /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
+    text: "\u5168\u90E8",
+    weight: "bold"
+  })), /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
+    text: total,
+    weight: "bold"
+  }));
+  var contentJSX = total === 0 ? /*#__PURE__*/_react["default"].createElement(_emptyGuide["default"], {
+    releaseBranch: releaseBranch
+  }) : /*#__PURE__*/_react["default"].createElement(BookmarksContainer, null, _.map(bookmarks, buildBookmark));
+  return /*#__PURE__*/_react["default"].createElement(PageContainer, null, /*#__PURE__*/_react["default"].createElement(Column, null, /*#__PURE__*/_react["default"].createElement(StatusBar, null, /*#__PURE__*/_react["default"].createElement(TitleContainer, null, /*#__PURE__*/_react["default"].createElement(_headline.H1, {
+    text: "\u6211\u7684\u66F8\u7C64"
+  })), counterJSX, /*#__PURE__*/_react["default"].createElement(_divider["default"], null)), contentJSX));
 }
 
 Bookmarks.defaultProps = {
   bookmarks: [],
-  total: 0
+  total: 0,
+  releaseBranch: _releaseBranch["default"].master
 };
 Bookmarks.propTypes = {
-  bookmarks: _propTypes2["default"].arrayOf(_propTypes["default"]).isRequired,
-  handleDelete: _propTypes2["default"].func.isRequired,
-  total: _propTypes2["default"].number
+  bookmarks: _propTypes["default"].arrayOf(_propTypes2["default"].bookmark).isRequired,
+  handleDelete: _propTypes["default"].func.isRequired,
+  total: _propTypes["default"].number,
+  releaseBranch: _propTypes2["default"].releaseBranch
 };
 var _default = Bookmarks;
 exports["default"] = _default;

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

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _color = require("@twreporter/core/lib/constants/color");
+
+var _propTypes = _interopRequireDefault(require("@twreporter/core/lib/constants/prop-types"));
+
+var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
+
+var _requestOrigins = _interopRequireDefault(require("@twreporter/core/lib/constants/request-origins"));
+
+var _paragraph = require("../text/paragraph");
+
+var _button = require("../button");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+// @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"
+})(["width:100%;display:flex;flex-direction:column;align-items:center;margin-top:8px;"]);
+
+var TextContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "empty-guide__TextContainer",
+  componentId: "sc-1y7u9aq-1"
+})(["margin:48px 0 24px 0;display:flex;flex-direction:column;align-items:center;color:", ";"], _color.colorGrayscale.gray800);
+
+var ButtonContainer = /*#__PURE__*/_styledComponents["default"].a.withConfig({
+  displayName: "empty-guide__ButtonContainer",
+  componentId: "sc-1y7u9aq-2"
+})(["text-decoration:none;"]);
+
+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);
+
+var EmptyGuide = function EmptyGuide(_ref) {
+  var _ref$releaseBranch = _ref.releaseBranch,
+      releaseBranch = _ref$releaseBranch === void 0 ? _releaseBranch["default"].master : _ref$releaseBranch;
+  var homepageUrl = _requestOrigins["default"].forClientSideRendering[releaseBranch].main;
+  var seekImageUrl = "https://www.twreporter.org/assets/bookmark/".concat(releaseBranch, "/seek.png");
+  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement("img", {
+    alt: "Seek Bookmark",
+    src: seekImageUrl,
+    width: "170"
+  }), /*#__PURE__*/_react["default"].createElement(TextContainer, null, /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
+    text: "\u4F60\u9084\u6C92\u6709\u5132\u5B58\u4EFB\u4F55\u6587\u7AE0\uFF01",
+    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(_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
+  })));
+};
+
+EmptyGuide.propTypes = {
+  releaseBranch: _propTypes["default"].releaseBranch
+};
+var _default = EmptyGuide;
+exports["default"] = _default;

package/lib/bookmark-list/index.js

@@ -9,27 +9,29 @@ exports["default"] = void 0;
 
 var _reactRedux = require("react-redux");
 
-var _signInHref = require("@twreporter/core/lib/utils/sign-in-href");
+var _CSSTransition = _interopRequireDefault(require("react-transition-group/CSSTransition"));
 
-var _bookmarks = _interopRequireDefault(require("./bookmarks"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _confirmation = _interopRequireDefault(require("../confirmation"));
+var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("@twreporter/core/lib/constants/prop-types"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _CSSTransition = _interopRequireDefault(require("react-transition-group/CSSTransition"));
+var _bookmarks = _interopRequireDefault(require("./bookmarks"));
+
+var _confirmation = _interopRequireDefault(require("../confirmation"));
 
 var _more = _interopRequireDefault(require("../more"));
 
-var _propTypes2 = _interopRequireDefault(require("prop-types"));
+var _redirectToSignIn = _interopRequireDefault(require("./redirect-to-sign-in"));
 
-var _react = _interopRequireDefault(require("react"));
+var _redux = _interopRequireDefault(require("@twreporter/redux"));
 
-var _redirectToSignIn = _interopRequireDefault(require("./redirect-to-sign-in"));
+var _signInHref = require("@twreporter/core/lib/utils/sign-in-href");
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _propTypes2 = _interopRequireDefault(require("@twreporter/core/lib/constants/prop-types"));
 
-var _redux = _interopRequireDefault(require("@twreporter/redux"));
+var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
 
 var _findIndex = _interopRequireDefault(require("lodash/findIndex"));
 
@@ -236,11 +238,13 @@ var BookmarkList = /*#__PURE__*/function (_React$Component) {
       if (!isAuthed || !jwt) return /*#__PURE__*/_react["default"].createElement(_redirectToSignIn["default"], null, "\u60A8\u5C1A\u672A\u767B\u5165\uFF0C\u5C07\u8DF3\u8F49\u81F3\u767B\u5165\u9801");
       var _this$props6 = this.props,
           bookmarks = _this$props6.bookmarks,
-          total = _this$props6.total;
+          total = _this$props6.total,
+          releaseBranch = _this$props6.releaseBranch;
       return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_bookmarks["default"], {
         bookmarks: bookmarks,
         handleDelete: this.handleDeleteButtonClicked,
-        total: total
+        total: total,
+        releaseBranch: releaseBranch
       }), /*#__PURE__*/_react["default"].createElement(MoreContainer, {
         hasMore: bookmarks.length < total
       }, /*#__PURE__*/_react["default"].createElement(_more["default"], {
@@ -268,14 +272,18 @@ var BookmarkList = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 BookmarkList.propTypes = {
+  releaseBranch: _propTypes2["default"].releaseBranch,
   // Props below are provided by redux
-  bookmarks: _propTypes2["default"].arrayOf(_propTypes["default"].bookmark).isRequired,
-  total: _propTypes2["default"].number.isRequired,
-  getMultipleBookmarks: _propTypes2["default"].func.isRequired,
-  deleteSingleBookmark: _propTypes2["default"].func.isRequired,
-  isAuthed: _propTypes2["default"].bool.isRequired,
-  jwt: _propTypes2["default"].string.isRequired,
-  userID: _propTypes2["default"].number.isRequired
+  bookmarks: _propTypes["default"].arrayOf(_propTypes2["default"].bookmark).isRequired,
+  total: _propTypes["default"].number.isRequired,
+  getMultipleBookmarks: _propTypes["default"].func.isRequired,
+  deleteSingleBookmark: _propTypes["default"].func.isRequired,
+  isAuthed: _propTypes["default"].bool.isRequired,
+  jwt: _propTypes["default"].string.isRequired,
+  userID: _propTypes["default"].number.isRequired
+};
+BookmarkList.defaultProps = {
+  releaseBranch: _releaseBranch["default"].master
 };
 
 var mapStateToProps = function mapStateToProps(state) {

package/lib/bookmark-list/stories/bookmark.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.emptyList = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _bookmarks = _interopRequireDefault(require("../bookmarks"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  title: 'Bookmark/Empty List',
+  component: _bookmarks["default"]
+};
+exports["default"] = _default;
+
+var emptyList = function emptyList() {
+  return /*#__PURE__*/_react["default"].createElement(_bookmarks["default"], null);
+};
+
+exports.emptyList = emptyList;
+emptyList.args = {
+  bookmarks: [],
+  total: 0
+};

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.emptyGuide = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _emptyGuide = _interopRequireDefault(require("../empty-guide"));
+
+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: 'Bookmark/Empty Guide',
+  component: _emptyGuide["default"],
+  argTypes: {
+    releaseBranch: {
+      defaultValue: master,
+      options: [master, staging, preview, release],
+      control: {
+        type: 'radio'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var emptyGuide = function emptyGuide(args) {
+  return /*#__PURE__*/_react["default"].createElement(_emptyGuide["default"], args);
+};
+
+exports.emptyGuide = emptyGuide;

package/lib/button/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "PillButton", {
+  enumerable: true,
+  get: function get() {
+    return _pillButton["default"];
+  }
+});
+exports["default"] = void 0;
+
+var _pillButton = _interopRequireDefault(require("./components/pillButton"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  PillButton: _pillButton["default"]
+};
+exports["default"] = _default;

package/lib/button/utils/theme.js

@@ -10,12 +10,23 @@ var _color = require("@twreporter/core/lib/constants/color");
 // @twreporter
 var getFilledPillButtonTheme = function getFilledPillButtonTheme(theme, disabled) {
   if (disabled) {
-    return {
-      color: _color.colorGrayscale.white,
-      bgColor: _color.colorGrayscale.gray400,
-      hoverColor: _color.colorGrayscale.white,
-      hoverBgColor: _color.colorGrayscale.gray400
-    };
+    switch (theme) {
+      case 'transparent':
+        return {
+          color: _color.colorGrayscale.white,
+          bgColor: _color.colorGrayscale.gray200,
+          hoverColor: _color.colorGrayscale.white,
+          hoverBgColor: _color.colorGrayscale.gray200
+        };
+
+      default:
+        return {
+          color: _color.colorGrayscale.white,
+          bgColor: _color.colorGrayscale.gray400,
+          hoverColor: _color.colorGrayscale.white,
+          hoverBgColor: _color.colorGrayscale.gray400
+        };
+    }
   }
 
   switch (theme) {
@@ -32,7 +43,7 @@ var getFilledPillButtonTheme = function getFilledPillButtonTheme(theme, disabled
         color: _color.colorGrayscale.gray600,
         bgColor: _color.colorGrayscale.white,
         hoverColor: _color.colorGrayscale.white,
-        hoverBgColor: _color.colorGrayscale.gray200
+        hoverBgColor: _color.colorGrayscale.gray400
       };
 
     case 'normal':
@@ -51,12 +62,23 @@ exports.getFilledPillButtonTheme = getFilledPillButtonTheme;
 
 var getOutlinePillButtonTheme = function getOutlinePillButtonTheme(theme, disabled) {
   if (disabled) {
-    return {
-      color: _color.colorGrayscale.gray400,
-      bgColor: _color.colorGrayscale.gray400,
-      hoverColor: _color.colorGrayscale.gray400,
-      hoverBgColor: _color.colorGrayscale.gray400
-    };
+    switch (theme) {
+      case 'transparent':
+        return {
+          color: _color.colorGrayscale.white,
+          bgColor: _color.colorGrayscale.gray200,
+          hoverColor: _color.colorGrayscale.white,
+          hoverBgColor: _color.colorGrayscale.gray200
+        };
+
+      default:
+        return {
+          color: _color.colorGrayscale.white,
+          bgColor: _color.colorGrayscale.gray400,
+          hoverColor: _color.colorGrayscale.white,
+          hoverBgColor: _color.colorGrayscale.gray400
+        };
+    }
   }
 
   switch (theme) {
@@ -72,8 +94,8 @@ var getOutlinePillButtonTheme = function getOutlinePillButtonTheme(theme, disabl
       return {
         color: _color.colorGrayscale.white,
         bgColor: _color.colorGrayscale.white,
-        hoverColor: _color.colorGrayscale.white,
-        hoverBgColor: _color.colorGrayscale.white
+        hoverColor: _color.colorGrayscale.gray600,
+        hoverBgColor: _color.colorGrayscale.gray600
       };
 
     case 'normal':

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.8.0-rc.1",
+  "version": "8.9.0-rc.1",
   "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": "3018cda4a82ee75dd2aab1ed839d1b29f7fc8aa4"
+  "gitHead": "8f260b65c485286179de40f1b6629602157b2040"
 }