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

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 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)
 
 

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

@@ -27,11 +27,13 @@ var _propTypes2 = _interopRequireDefault(require("@twreporter/core/lib/constants
 
 var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
 
+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;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -45,22 +47,22 @@ 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:64px;width:stretch;"], _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    padding-left: 1em;\n    padding-right: 1em;\n  "]))));
+})(["", " padding-bottom:64px;width:stretch;"], _mediaQuery["default"].mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding-left: 1em;\n    padding-right: 1em;\n  "]))));
 
 var TitleContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "bookmarks__TitleContainer",
   componentId: "sc-1m95x6z-3"
-})(["margin-bottom:16px;"]);
+})(["margin-bottom:16px;color:", ";"], _color.colorGrayscale.gray800);
 
 var CountContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "bookmarks__CountContainer",

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

@@ -17,8 +17,6 @@ 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");
@@ -27,6 +25,23 @@ 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"
@@ -35,7 +50,7 @@ var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 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;"]);
+})(["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",
@@ -45,7 +60,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;color:", ";svg{background-color:", ";width:18px;height:18px;margin:0 4px;}"], _color.colorGrayscale.gray600, _color.colorGrayscale.gray600);
+})(["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,
@@ -61,9 +76,9 @@ 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(_icon.Bookmark, {
-    type: "add",
-    releaseBranch: releaseBranch
+  }), /*#__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, {

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.9.0-rc.0",
+  "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": "6577f65eaba0ba87cf9a4efe2de201931543b409"
+  "gitHead": "8f260b65c485286179de40f1b6629602157b2040"
 }