@twreporter/react-components 8.19.1-rc.1 → 8.20.0-rc.1

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.20.0-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.20.0-rc.0...@twreporter/react-components@8.20.0-rc.1) (2023-10-06)
+
+
+### Bug Fixes
+
+* pillbutton layout with icons ([48dbf3e](https://github.com/twreporter/twreporter-npm-packages/commit/48dbf3e7726817f880e76047a94d6cd9fa41d868))
+
+
+
+
+
+# [8.20.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.19.1-rc.1...@twreporter/react-components@8.20.0-rc.0) (2023-10-05)
+
+
+### Features
+
+* add `loading` props for PillButton ([6ded8f1](https://github.com/twreporter/twreporter-npm-packages/commit/6ded8f193777b384933f27fbd925b7daf372b0c9))
+
+
+
+
+
 ## [8.19.1-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.19.1-rc.0...@twreporter/react-components@8.19.1-rc.1) (2023-10-01)
 
 

package/lib/button/components/pillButton.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _paragraph = require("../../text/paragraph");
 
@@ -23,7 +25,13 @@ var _sharedEnum = require("../../shared-enum");
 
 var _theme2 = require("@twreporter/core/lib/constants/theme");
 
-var _excluded = ["text", "leftIconComponent", "rightIconComponent", "size", "theme", "type", "style", "disabled"];
+var _color = require("@twreporter/core/lib/constants/color");
+
+var _excluded = ["text", "leftIconComponent", "rightIconComponent", "size", "theme", "type", "style", "disabled", "loading"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -65,6 +73,31 @@ var IconContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "xa7tsy-1"
 })(["display:flex;align-items:center;&:first-child{margin-right:4px;}&:last-child{margin-left:4px;}"]);
 
+var HideOnLoading = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "pillButton__HideOnLoading",
+  componentId: "xa7tsy-2"
+})(["opacity:", ";display:flex;align-items:center;justify-content:center;"], function (props) {
+  return props.show ? 1 : 0;
+});
+
+var RelativeParent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "pillButton__RelativeParent",
+  componentId: "xa7tsy-3"
+})(["position:relative;display:flex;align-items:center;justify-content:center;"]);
+
+var spin = /*#__PURE__*/(0, _styledComponents.keyframes)(["0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}"]);
+
+var Loader = /*#__PURE__*/_styledComponents["default"].span.withConfig({
+  displayName: "pillButton__Loader",
+  componentId: "xa7tsy-4"
+})(["position:absolute;opacity:", ";width:", "px;height:", "px;border:2px solid ", ";border-top-color:", ";border-radius:50%;display:inline-block;box-sizing:border-box;animation:", " 1s linear infinite;"], function (props) {
+  return props.show ? 1 : 0;
+}, function (props) {
+  return props.size;
+}, function (props) {
+  return props.size;
+}, _color.colorGrayscale.gray400, _color.colorGrayscale.gray600, spin);
+
 var PillButton = function PillButton(_ref) {
   var _ref$text = _ref.text,
       text = _ref$text === void 0 ? '' : _ref$text,
@@ -82,6 +115,8 @@ var PillButton = function PillButton(_ref) {
       style = _ref$style === void 0 ? _enums.Style.BRAND : _ref$style,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$loading = _ref.loading,
+      loading = _ref$loading === void 0 ? false : _ref$loading,
       props = _objectWithoutProperties(_ref, _excluded);
 
   var themeFunc = type === _enums.Type.PRIMARY ? _theme.getFilledPillButtonTheme : _theme.getOutlinePillButtonTheme;
@@ -113,7 +148,12 @@ var PillButton = function PillButton(_ref) {
     iconSize: iconSize,
     hoverColor: hoverColor,
     hoverBgColor: hoverBgColor
-  }, props), leftIconJSX, textJSX, rightIconJSX);
+  }, props), /*#__PURE__*/_react["default"].createElement(RelativeParent, null, /*#__PURE__*/_react["default"].createElement(HideOnLoading, {
+    show: !loading
+  }, leftIconJSX, textJSX, rightIconJSX), /*#__PURE__*/_react["default"].createElement(Loader, {
+    show: loading,
+    size: size === _sharedEnum.Size.S ? 18 : 24
+  })));
 };
 
 PillButton.propTypes = {
@@ -124,7 +164,8 @@ PillButton.propTypes = {
   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
+  disabled: _propTypes["default"].bool,
+  loading: _propTypes["default"].bool
 };
 PillButton.THEME = _theme2.THEME;
 PillButton.Type = _enums.Type;

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

@@ -56,7 +56,8 @@ pillButton.args = {
   theme: _pillButton["default"].THEME.normal,
   style: _pillButton["default"].Style.BRAND,
   type: _pillButton["default"].Type.PRIMARY,
-  disabled: false
+  disabled: false,
+  loading: false
 };
 pillButton.parameters = {
   controls: {
@@ -79,7 +80,8 @@ toggleIconDisplay.args = {
   theme: _pillButton["default"].THEME.normal,
   style: _pillButton["default"].Style.BRAND,
   type: _pillButton["default"].Type.PRIMARY,
-  disabled: false
+  disabled: false,
+  loading: false
 };
 toggleIconDisplay.parameters = {
   controls: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.19.1-rc.1",
+  "version": "8.20.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": "771c566b810d110c895a00237beb79e2e4a50271"
+  "gitHead": "71e92a21912a332f68e24df2e161e43c15c93944"
 }