@twreporter/react-components 8.8.0 → 8.9.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.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

package/lib/bookmark-list/bookmarks.js

@@ -5,25 +5,33 @@ 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 _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+var _headline = require("../text/headline");
 
-var _propTypes2 = _interopRequireDefault(require("prop-types"));
+var _paragraph = require("../text/paragraph");
 
-var _react = _interopRequireDefault(require("react"));
+var _divider = _interopRequireDefault(require("../divider"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _propTypes2 = _interopRequireDefault(require("@twreporter/core/lib/constants/prop-types"));
+
+var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
 var _map = _interopRequireDefault(require("lodash/map"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -47,27 +55,33 @@ var Column = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 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(_templateObject4 || (_templateObject4 = _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;"]);
 
-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 +91,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,82 @@
+"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 _icon = require("../icon");
+
+var _paragraph = require("../text/paragraph");
+
+var _button = require("../button");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+// @twreporter
+// components
+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;"]);
+
+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;color:", ";svg{background-color:", ";width:18px;height:18px;margin:0 4px;}"], _color.colorGrayscale.gray600, _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(_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
+  })));
+};
+
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.8.0",
+  "version": "8.9.0-rc.0",
   "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": "3e4a5e314e1d62c8fd7e8495f10a35388892b285"
+  "gitHead": "6577f65eaba0ba87cf9a4efe2de201931543b409"
 }