@pareto-engineering/design-system 4.6.0 → 4.7.0

package/dist/cjs/b/Button/Button.js

@@ -37,12 +37,17 @@ const Button = _ref => {
   const buttonText = isSimple ? /*#__PURE__*/React.createElement("span", {
     className: _exports.default.modifierUnderlined
   }, children) : children;
+  const {
+    disabled,
+    ...rest
+  } = otherProps;
   return /*#__PURE__*/React.createElement("button", _extends({
     id: id,
     className: [baseClassName, componentClassName, userClassName, `x-${color}`, textColor && `y-${textColor}`, isGhost && _exports.default.modifierGhost, isCompact && _exports.default.modifierCompact, isSimple && _exports.default.modifierSimple, isGradient && _exports.default.modifierGradient, isSpaced && _exports.default.modifierSpaced, !isLoading && arrowDirection && `arrow-${arrowDirection}`].filter(e => e).join(' '),
     style: style,
-    type: "button"
-  }, otherProps), isLoading ? /*#__PURE__*/React.createElement(_.LoadingCircle, {
+    type: "button",
+    disabled: disabled || isLoading
+  }, rest), isLoading ? /*#__PURE__*/React.createElement(_.LoadingCircle, {
     style: {
       '--x': 'var(--stroke-color, var(--on-x))'
     },

package/dist/es/b/Button/Button.js

@@ -31,12 +31,17 @@ const Button = ({
   const buttonText = isSimple ? /*#__PURE__*/React.createElement("span", {
     className: styleNames.modifierUnderlined
   }, children) : children;
+  const {
+    disabled,
+    ...rest
+  } = otherProps;
   return /*#__PURE__*/React.createElement("button", _extends({
     id: id,
     className: [baseClassName, componentClassName, userClassName, `x-${color}`, textColor && `y-${textColor}`, isGhost && styleNames.modifierGhost, isCompact && styleNames.modifierCompact, isSimple && styleNames.modifierSimple, isGradient && styleNames.modifierGradient, isSpaced && styleNames.modifierSpaced, !isLoading && arrowDirection && `arrow-${arrowDirection}`].filter(e => e).join(' '),
     style: style,
-    type: "button"
-  }, otherProps), isLoading ? /*#__PURE__*/React.createElement(LoadingCircle, {
+    type: "button",
+    disabled: disabled || isLoading
+  }, rest), isLoading ? /*#__PURE__*/React.createElement(LoadingCircle, {
     style: {
       '--x': 'var(--stroke-color, var(--on-x))'
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.6.0",
+  "version": "4.7.0",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -82,5 +82,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "55eab180bec6adf2c4acb1908e2e1381495cf4ca"
+  "gitHead": "a0b1f11ada4ec43eab0107932d1fbafe8108bbb6"
 }

package/src/ui/b/Button/Button.jsx

@@ -31,6 +31,8 @@ const Button = ({
   const buttonText = isSimple ? <span className={styleNames.modifierUnderlined}>{children}</span>
     : children
 
+  const { disabled, ...rest } = otherProps
+
   return (
     <button
       id={id}
@@ -51,7 +53,8 @@ const Button = ({
         .join(' ')}
       style={style}
       type="button"
-      {...otherProps}
+      disabled={disabled || isLoading}
+      {...rest}
     >
       {isLoading ? (
         <LoadingCircle

package/tests/__snapshots__/Storyshots.test.js.snap

@@ -17562,6 +17562,7 @@ exports[`Storyshots b/Button Loading 1`] = `
 [
   <button
     className="base button x-main"
+    disabled={true}
     type="button"
   >
     <div
@@ -17603,6 +17604,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-main2"
+    disabled={true}
     type="button"
   >
     <div
@@ -17644,6 +17646,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-red"
+    disabled={true}
     type="button"
   >
     <div
@@ -17685,6 +17688,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-green"
+    disabled={true}
     type="button"
   >
     <div
@@ -17726,6 +17730,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-orange"
+    disabled={true}
     type="button"
   >
     <div
@@ -17767,6 +17772,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-gray"
+    disabled={true}
     type="button"
   >
     <div
@@ -17808,6 +17814,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-blue"
+    disabled={true}
     type="button"
   >
     <div
@@ -17849,6 +17856,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-purple"
+    disabled={true}
     type="button"
   >
     <div
@@ -17890,6 +17898,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-yellow"
+    disabled={true}
     type="button"
   >
     <div
@@ -17931,6 +17940,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-seagreen"
+    disabled={true}
     type="button"
   >
     <div
@@ -17972,6 +17982,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-deepblue"
+    disabled={true}
     type="button"
   >
     <div
@@ -18013,6 +18024,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-light-blue"
+    disabled={true}
     type="button"
   >
     <div
@@ -18054,6 +18066,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-light-purple"
+    disabled={true}
     type="button"
   >
     <div
@@ -18095,6 +18108,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-light-seagreen"
+    disabled={true}
     type="button"
   >
     <div
@@ -18136,6 +18150,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-ui-main"
+    disabled={true}
     type="button"
   >
     <div
@@ -18177,6 +18192,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-ui-main-2"
+    disabled={true}
     type="button"
   >
     <div
@@ -18218,6 +18234,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-ui-lines"
+    disabled={true}
     type="button"
   >
     <div
@@ -18259,6 +18276,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-ui-icons"
+    disabled={true}
     type="button"
   >
     <div
@@ -18300,6 +18318,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-heading"
+    disabled={true}
     type="button"
   >
     <div
@@ -18341,6 +18360,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-paragraph"
+    disabled={true}
     type="button"
   >
     <div
@@ -18382,6 +18402,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-subtitle"
+    disabled={true}
     type="button"
   >
     <div
@@ -18423,6 +18444,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-metadata"
+    disabled={true}
     type="button"
   >
     <div
@@ -18464,6 +18486,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-link"
+    disabled={true}
     type="button"
   >
     <div
@@ -18505,6 +18528,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-disabled"
+    disabled={true}
     type="button"
   >
     <div
@@ -18546,6 +18570,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-shadow"
+    disabled={true}
     type="button"
   >
     <div
@@ -18587,6 +18612,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-transparent"
+    disabled={true}
     type="button"
   >
     <div
@@ -18628,6 +18654,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-highlighted"
+    disabled={true}
     type="button"
   >
     <div
@@ -18669,6 +18696,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-interactive"
+    disabled={true}
     type="button"
   >
     <div
@@ -18710,6 +18738,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-background-far"
+    disabled={true}
     type="button"
   >
     <div
@@ -18751,6 +18780,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-background-near"
+    disabled={true}
     type="button"
   >
     <div
@@ -18792,6 +18822,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-background-inputs"
+    disabled={true}
     type="button"
   >
     <div
@@ -18833,6 +18864,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-background-cards"
+    disabled={true}
     type="button"
   >
     <div
@@ -18874,6 +18906,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-background-mesh"
+    disabled={true}
     type="button"
   >
     <div
@@ -18915,6 +18948,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-outline-inputs"
+    disabled={true}
     type="button"
   >
     <div
@@ -18956,6 +18990,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-twitter"
+    disabled={true}
     type="button"
   >
     <div
@@ -18997,6 +19032,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-facebook"
+    disabled={true}
     type="button"
   >
     <div
@@ -19038,6 +19074,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-instagram"
+    disabled={true}
     type="button"
   >
     <div
@@ -19079,6 +19116,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-google"
+    disabled={true}
     type="button"
   >
     <div
@@ -19120,6 +19158,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-black"
+    disabled={true}
     type="button"
   >
     <div
@@ -19161,6 +19200,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-anchor"
+    disabled={true}
     type="button"
   >
     <div
@@ -19202,6 +19242,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-grey"
+    disabled={true}
     type="button"
   >
     <div
@@ -19243,6 +19284,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-pearl"
+    disabled={true}
     type="button"
   >
     <div
@@ -19284,6 +19326,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-white"
+    disabled={true}
     type="button"
   >
     <div