@twreporter/react-components 8.20.1 → 8.21.0-rc.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.21.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.20.1...@twreporter/react-components@8.21.0-rc.0) (2023-11-13)
+
+
+### Features
+
+* cursor default while disabled ([301b3a5](https://github.com/twreporter/twreporter-npm-packages/commit/301b3a577e15a4be479686e8db35239d2fa55490))
+
+
+
+
+
 ## [8.20.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.20.1-rc.0...@twreporter/react-components@8.20.1) (2023-10-30)
 
 **Note:** Version bump only for package @twreporter/react-components

package/lib/button/components/iconButton.js

@@ -36,7 +36,9 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 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) {
+})(["cursor:", ";display:flex;svg{width:24px;height:24px;background-color:", ";}", ""], function (props) {
+  return props.disabled ? 'default' : 'pointer';
+}, function (props) {
   return props.color;
 }, _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &:hover svg {\n      background-color: ", ";\n    }\n  "])), function (props) {
   return props.hoverColor;
@@ -62,7 +64,8 @@ var IconButton = function IconButton(_ref) {
 
   return /*#__PURE__*/_react["default"].createElement(ButtonContainer, _extends({
     color: color,
-    hoverColor: hoverColor
+    hoverColor: hoverColor,
+    disabled: disabled
   }, props), iconComponent);
 };
 

package/lib/button/components/iconWithTextButton.js

@@ -28,7 +28,9 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 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) {
+})(["cursor:", ";display:flex;flex-direction:column;align-items:center;color:", ";svg{width:24px;height:24px;background-color:", ";}", ""], function (props) {
+  return props.disabled ? 'default' : 'pointer';
+}, function (props) {
   return props.color;
 }, function (props) {
   return props.color;
@@ -66,7 +68,8 @@ var IconWithTextButton = function IconWithTextButton(_ref) {
 
   return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
     color: color,
-    hoverColor: hoverColor
+    hoverColor: hoverColor,
+    disabled: disabled
   }, iconComponent, /*#__PURE__*/_react["default"].createElement(StyledP3, {
     text: text,
     weight: _paragraph.P3.Weight.NORMAL,

package/lib/button/components/pillButton.js

@@ -44,7 +44,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "pillButton__ButtonContainer",
   componentId: "xa7tsy-0"
-})(["width:fit-content;display:flex;align-items:center;border-radius:40px;background-color:", ";border-color:", ";border-style:solid;border-width:1.5px;color:", ";padding:", ";cursor:pointer;svg{height:", ";width:", ";background-color:", ";}&:hover{color:", ";background-color:", ";border-color:", ";svg{background-color:", ";}}"], function (props) {
+})(["width:fit-content;display:flex;align-items:center;border-radius:40px;background-color:", ";border-color:", ";border-style:solid;border-width:1.5px;color:", ";padding:", ";cursor:", ";svg{height:", ";width:", ";background-color:", ";}&:hover{color:", ";background-color:", ";border-color:", ";svg{background-color:", ";}}"], function (props) {
   return props.type === _enums.Type.PRIMARY ? props.bgColor : 'transparent';
 }, function (props) {
   return props.bgColor;
@@ -52,6 +52,8 @@ var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   return props.color;
 }, function (props) {
   return props.padding;
+}, function (props) {
+  return props.disabled ? 'default' : 'pointer';
 }, function (props) {
   return props.iconSize;
 }, function (props) {
@@ -147,7 +149,8 @@ var PillButton = function PillButton(_ref) {
     bgColor: bgColor,
     iconSize: iconSize,
     hoverColor: hoverColor,
-    hoverBgColor: hoverBgColor
+    hoverBgColor: hoverBgColor,
+    disabled: disabled
   }, props), /*#__PURE__*/_react["default"].createElement(RelativeParent, null, /*#__PURE__*/_react["default"].createElement(HideOnLoading, {
     show: !loading
   }, leftIconJSX, textJSX, rightIconJSX), /*#__PURE__*/_react["default"].createElement(Loader, {

package/lib/button/components/textButton.js

@@ -42,7 +42,9 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "textButton__ButtonContainer",
   componentId: "sc-1lwyrq5-0"
-})(["cursor:pointer;display:flex;align-items:center;color:", ";svg{height:", ";width:", ";background-color:", ";}", ""], function (props) {
+})(["cursor:", ";display:flex;align-items:center;color:", ";svg{height:", ";width:", ";background-color:", ";}", ""], function (props) {
+  return props.disabled ? 'default' : 'pointer';
+}, function (props) {
   return props.color;
 }, function (props) {
   return props.iconSize;
@@ -111,7 +113,8 @@ var TextButton = function TextButton(_ref) {
   return /*#__PURE__*/_react["default"].createElement(ButtonContainer, _extends({
     color: color,
     hoverColor: hoverColor,
-    iconSize: iconSize
+    iconSize: iconSize,
+    disabled: disabled
   }, props), size === _sharedEnum.Size.L ? /*#__PURE__*/_react["default"].createElement(IconContainer, {
     isLeft: true
   }, leftIconComponent) : leftIconComponent, textJSX, size === _sharedEnum.Size.L ? /*#__PURE__*/_react["default"].createElement(IconContainer, null, rightIconComponent) : rightIconComponent);

package/lib/button/components/toggleButton.js

@@ -19,6 +19,8 @@ var _excluded = ["value", "labelOn", "labelOff", "disabled", "onChange"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -36,7 +38,9 @@ var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var Label = /*#__PURE__*/_styledComponents["default"].label.withConfig({
   displayName: "toggleButton__Label",
   componentId: "sc-183g3tk-2"
-})(["display:flex;align-items:center;gap:10px;cursor:pointer;"]);
+})(["display:flex;align-items:center;gap:10px;cursor:", ";"], function (props) {
+  return props.disabled ? 'default' : 'pointer';
+});
 
 var Switch = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "toggleButton__Switch",
@@ -71,7 +75,9 @@ var ToggleButton = function ToggleButton(_ref) {
 
   return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(ColorP2, {
     text: value ? labelOn : labelOff
-  }), /*#__PURE__*/_react["default"].createElement(Label, props, /*#__PURE__*/_react["default"].createElement(Input, {
+  }), /*#__PURE__*/_react["default"].createElement(Label, _extends({
+    disabled: disabled
+  }, props), /*#__PURE__*/_react["default"].createElement(Input, {
     type: "checkbox",
     disabled: disabled,
     checked: value,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.20.1",
+  "version": "8.21.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": "8a64673c5043887c270b1f56efb71a4c3ca41cdd"
+  "gitHead": "a7d72ecffd859bfa778c70cb8b5b4b3419838fd4"
 }