@pareto-engineering/design-system 4.5.0 → 4.7.0

package/dist/cjs/a/Notification/styles.scss

@@ -4,12 +4,11 @@
 @use "@pareto-engineering/styles/src/mixins";
 @use "@pareto-engineering/styles/src/globals" as *;
 
-$default-padding: 1em;
-$default-margin: 1em;
-$default-border-radius: 1.5em;
-$default-width: clamp(var(--min-width, 30em), var(--width, 50%), var(--max-width, 100%));
-$default-height: clamp(var(--min-height, 3em), var(--height, 5em), var(--max-height, 10em));
-$default-right-offset: 7rem;
+$default-padding: 1rem;
+$default-margin: 1rem;
+$default-border-radius: 1.5rem;
+$default-width: var(--notification-width, 30rem);
+$default-height: var(--notification-height, 5rem);
 
 .#{bem.$base}.notification {
   align-items: center;
@@ -18,31 +17,29 @@ $default-right-offset: 7rem;
   bottom: 0;
   color: var(--on-x);
   display: flex;
-  height: $default-height;
   justify-content: space-between;
+  margin-bottom: $default-margin;
+  margin-right: $default-margin;
+  min-height: $default-height;
   overflow: hidden;
   padding: $default-padding calc($default-padding * 2);
-  position: absolute;
-  right: $default-right-offset;
+  position: fixed;
+  right: 0;
   width: $default-width;
   z-index: 9999;
 
-  &.stacked {
-    position: relative;
-  }
-
   > .message-container {
     align-items: center;
     display: flex;
     overflow: auto;
 
     > .message {
-      font-size: calc(var(--s0) * 1em);
+      font-size: calc(var(--s0) * 1rem);
       margin-left: calc($default-margin / 2);
     }
 
     > span {
-      font-size: calc(var(--s2) * 1em);
+      font-size: calc(var(--s2) * 1rem);
     }
   }
 

package/dist/cjs/a/NotificationStack/NotificationStack.js

@@ -30,7 +30,6 @@ const NotificationStack = _ref => {
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: style
   }, otherProps), notificationsToDisplay.map(notification => /*#__PURE__*/React.createElement(_Notification.Notification, _extends({
-    className: "stacked",
     key: notification?.id || notification.message
   }, notification))));
 };

package/dist/cjs/a/NotificationStack/styles.scss

@@ -4,15 +4,20 @@
 
 $default-padding: 1rem;
 $default-margin: 1rem;
+$default-width: var(--notification-stack-width, 30rem);
 
 .#{bem.$base}.notification-stack {
   align-items: center;
   bottom: 0;
   display: flex;
   flex-direction: column;
-  margin-bottom: $default-margin;
   position: fixed;
   right: 0;
-  row-gap: $default-padding;
+  width: $default-width;
   z-index: 9999;
+
+  > .#{bem.$base}.notification {
+    position: relative;
+    width: 100%;
+  }
 }

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/a/Notification/styles.scss

@@ -4,12 +4,11 @@
 @use "@pareto-engineering/styles/src/mixins";
 @use "@pareto-engineering/styles/src/globals" as *;
 
-$default-padding: 1em;
-$default-margin: 1em;
-$default-border-radius: 1.5em;
-$default-width: clamp(var(--min-width, 30em), var(--width, 50%), var(--max-width, 100%));
-$default-height: clamp(var(--min-height, 3em), var(--height, 5em), var(--max-height, 10em));
-$default-right-offset: 7rem;
+$default-padding: 1rem;
+$default-margin: 1rem;
+$default-border-radius: 1.5rem;
+$default-width: var(--notification-width, 30rem);
+$default-height: var(--notification-height, 5rem);
 
 .#{bem.$base}.notification {
   align-items: center;
@@ -18,31 +17,29 @@ $default-right-offset: 7rem;
   bottom: 0;
   color: var(--on-x);
   display: flex;
-  height: $default-height;
   justify-content: space-between;
+  margin-bottom: $default-margin;
+  margin-right: $default-margin;
+  min-height: $default-height;
   overflow: hidden;
   padding: $default-padding calc($default-padding * 2);
-  position: absolute;
-  right: $default-right-offset;
+  position: fixed;
+  right: 0;
   width: $default-width;
   z-index: 9999;
 
-  &.stacked {
-    position: relative;
-  }
-
   > .message-container {
     align-items: center;
     display: flex;
     overflow: auto;
 
     > .message {
-      font-size: calc(var(--s0) * 1em);
+      font-size: calc(var(--s0) * 1rem);
       margin-left: calc($default-margin / 2);
     }
 
     > span {
-      font-size: calc(var(--s2) * 1em);
+      font-size: calc(var(--s2) * 1rem);
     }
   }
 

package/dist/es/a/NotificationStack/NotificationStack.js

@@ -24,7 +24,6 @@ const NotificationStack = ({
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: style
   }, otherProps), notificationsToDisplay.map(notification => /*#__PURE__*/React.createElement(Notification, _extends({
-    className: "stacked",
     key: notification?.id || notification.message
   }, notification))));
 };

package/dist/es/a/NotificationStack/styles.scss

@@ -4,15 +4,20 @@
 
 $default-padding: 1rem;
 $default-margin: 1rem;
+$default-width: var(--notification-stack-width, 30rem);
 
 .#{bem.$base}.notification-stack {
   align-items: center;
   bottom: 0;
   display: flex;
   flex-direction: column;
-  margin-bottom: $default-margin;
   position: fixed;
   right: 0;
-  row-gap: $default-padding;
+  width: $default-width;
   z-index: 9999;
+
+  > .#{bem.$base}.notification {
+    position: relative;
+    width: 100%;
+  }
 }

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.5.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": "8d2154dce0d14e318415727ee001558db1a795c3"
+  "gitHead": "a0b1f11ada4ec43eab0107932d1fbafe8108bbb6"
 }

package/src/ui/a/Notification/styles.scss

@@ -4,12 +4,11 @@
 @use "@pareto-engineering/styles/src/mixins";
 @use "@pareto-engineering/styles/src/globals" as *;
 
-$default-padding: 1em;
-$default-margin: 1em;
-$default-border-radius: 1.5em;
-$default-width: clamp(var(--min-width, 30em), var(--width, 50%), var(--max-width, 100%));
-$default-height: clamp(var(--min-height, 3em), var(--height, 5em), var(--max-height, 10em));
-$default-right-offset: 7rem;
+$default-padding: 1rem;
+$default-margin: 1rem;
+$default-border-radius: 1.5rem;
+$default-width: var(--notification-width, 30rem);
+$default-height: var(--notification-height, 5rem);
 
 .#{bem.$base}.notification {
   align-items: center;
@@ -18,31 +17,29 @@ $default-right-offset: 7rem;
   bottom: 0;
   color: var(--on-x);
   display: flex;
-  height: $default-height;
   justify-content: space-between;
+  margin-bottom: $default-margin;
+  margin-right: $default-margin;
+  min-height: $default-height;
   overflow: hidden;
   padding: $default-padding calc($default-padding * 2);
-  position: absolute;
-  right: $default-right-offset;
+  position: fixed;
+  right: 0;
   width: $default-width;
   z-index: 9999;
 
-  &.stacked {
-    position: relative;
-  }
-
   > .message-container {
     align-items: center;
     display: flex;
     overflow: auto;
 
     > .message {
-      font-size: calc(var(--s0) * 1em);
+      font-size: calc(var(--s0) * 1rem);
       margin-left: calc($default-margin / 2);
     }
 
     > span {
-      font-size: calc(var(--s2) * 1em);
+      font-size: calc(var(--s2) * 1rem);
     }
   }
 

package/src/ui/a/NotificationStack/NotificationStack.jsx

@@ -40,7 +40,6 @@ const NotificationStack = ({
     >
       {notificationsToDisplay.map((notification) => (
         <Notification
-          className="stacked"
           key={notification?.id || notification.message}
           {...notification}
         />

package/src/ui/a/NotificationStack/styles.scss

@@ -4,15 +4,20 @@
 
 $default-padding: 1rem;
 $default-margin: 1rem;
+$default-width: var(--notification-stack-width, 30rem);
 
 .#{bem.$base}.notification-stack {
   align-items: center;
   bottom: 0;
   display: flex;
   flex-direction: column;
-  margin-bottom: $default-margin;
   position: fixed;
   right: 0;
-  row-gap: $default-padding;
+  width: $default-width;
   z-index: 9999;
+
+  > .#{bem.$base}.notification {
+    position: relative;
+    width: 100%;
+  }
 }

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

@@ -10696,7 +10696,7 @@ exports[`Storyshots a/NotificationStack Base 1`] = `
     className="base notification-stack"
   >
     <div
-      className="base notification stacked x-error"
+      className="base notification x-error"
     >
       <div
         className="message-container"
@@ -10725,7 +10725,7 @@ exports[`Storyshots a/NotificationStack Base 1`] = `
       </button>
     </div>
     <div
-      className="base notification stacked x-blocked"
+      className="base notification x-blocked"
     >
       <div
         className="message-container"
@@ -10754,7 +10754,7 @@ exports[`Storyshots a/NotificationStack Base 1`] = `
       </button>
     </div>
     <div
-      className="base notification stacked x-in-progress"
+      className="base notification x-in-progress"
     >
       <div
         className="message-container"
@@ -10783,7 +10783,7 @@ exports[`Storyshots a/NotificationStack Base 1`] = `
       </button>
     </div>
     <div
-      className="base notification stacked x-success"
+      className="base notification x-success"
     >
       <div
         className="message-container"
@@ -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