@pareto-engineering/design-system 4.6.0 → 4.7.1-alpha.0

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

@@ -36,6 +36,7 @@ $default-height: var(--notification-height, 5rem);
     > .message {
       font-size: calc(var(--s0) * 1rem);
       margin-left: calc($default-margin / 2);
+      text-transform: capitalize;
     }
 
     > span {

package/dist/cjs/a/ToggleSwitch/ToggleSwitch.js

@@ -78,9 +78,9 @@ ToggleSwitch.propTypes = {
   /**
    * The ID of the elelment to be toggled
    */
-  inputId: _propTypes.default.string
+  inputId: _propTypes.default.string.isRequired
 };
 ToggleSwitch.defaultProps = {
-  inputId: 'switch'
+  // someProp: 'someValue',
 };
 var _default = exports.default = ToggleSwitch;

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/cjs/b/ThemeSelector/ThemeSelector.js

@@ -46,7 +46,8 @@ const ThemeSelector = _ref => {
     className: "c-x x-paragraph"
   }, userTheme && userTheme[0].toUpperCase() + userTheme.slice(1), ' ', "Theme"), /*#__PURE__*/React.createElement(_a.ToggleSwitch, {
     checked: userTheme === 'dark',
-    handleOnChange: loopThemes
+    handleOnChange: loopThemes,
+    inputId: "theme-toggle"
   }));
 };
 ThemeSelector.propTypes = {

package/dist/cjs/g/DragAndDrop/DragAndDrop.js

@@ -31,6 +31,7 @@ const DragAndDrop = _ref => {
     // ...otherProps
   } = _ref;
   const [draggableItems, setDraggableItems] = (0, _react.useState)(items);
+  const [dragOverIndex, setDragOverIndex] = (0, _react.useState)(null);
   const handleDrop = (e, dragOverItemIndex) => {
     e.preventDefault();
     const dragItemIndex = e.dataTransfer.getData('text');
@@ -39,6 +40,7 @@ const DragAndDrop = _ref => {
     orderedItems.splice(dragOverItemIndex, 0, reorderedItem);
     setDraggableItems(orderedItems);
     onOrderChange?.(orderedItems);
+    setDragOverIndex(null);
   };
   return /*#__PURE__*/React.createElement(Wrapper, {
     id: id,
@@ -53,8 +55,13 @@ const DragAndDrop = _ref => {
       ...rest
     } = _ref2;
     return /*#__PURE__*/React.createElement(_common.DraggableItem, _extends({
+      className: dragOverIndex === index && 'drag-over',
       draggable: true,
       onDrop: e => handleDrop(e, index),
+      onDragOver: e => {
+        e.preventDefault();
+        setDragOverIndex(index);
+      },
       index: index,
       key: identifier
     }, rest), Content);

package/dist/cjs/g/DragAndDrop/common/DraggableItem/DraggableItem.js

@@ -40,15 +40,11 @@ const DraggableItem = _ref => {
   const handleDragEnd = () => {
     setIsDragging(false);
   };
-  const handleDragOver = e => {
-    e.preventDefault();
-  };
   return /*#__PURE__*/React.createElement(Wrapper, _extends({
     id: id,
     className: [baseClassName, componentClassName, userClassName, isDragging && 'dragging'].filter(e => e).join(' '),
     style: style,
     onDragStart: e => handleDragStart(e),
-    onDragOver: e => handleDragOver(e),
     onDragEnd: e => handleDragEnd(e)
   }, otherProps), children);
 };

package/dist/cjs/g/FormBuilder/common/Builder/common/Section/styles.scss

@@ -19,7 +19,17 @@ $default-margin: 1rem;
   }
 
   > form {
+
     /* stylelint-disable selector-max-compound-selectors -- required */
+
+    > .#{bem.$base}.drag-and-drop {
+      >.drag-over {
+        > .#{bem.$base}.input-builder {
+          border: 1px dashed var(--ui-lines);
+        }
+      }
+    }
+
     > .add-question-cta {
       align-items: center;
       background-color: transparent;

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

@@ -36,6 +36,7 @@ $default-height: var(--notification-height, 5rem);
     > .message {
       font-size: calc(var(--s0) * 1rem);
       margin-left: calc($default-margin / 2);
+      text-transform: capitalize;
     }
 
     > span {

package/dist/es/a/ToggleSwitch/ToggleSwitch.js

@@ -66,9 +66,9 @@ ToggleSwitch.propTypes = {
   /**
    * The ID of the elelment to be toggled
    */
-  inputId: PropTypes.string
+  inputId: PropTypes.string.isRequired
 };
 ToggleSwitch.defaultProps = {
-  inputId: 'switch'
+  // someProp: 'someValue',
 };
 export default ToggleSwitch;

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/dist/es/b/ThemeSelector/ThemeSelector.js

@@ -36,7 +36,8 @@ const ThemeSelector = ({
     className: "c-x x-paragraph"
   }, userTheme && userTheme[0].toUpperCase() + userTheme.slice(1), ' ', "Theme"), /*#__PURE__*/React.createElement(ToggleSwitch, {
     checked: userTheme === 'dark',
-    handleOnChange: loopThemes
+    handleOnChange: loopThemes,
+    inputId: "theme-toggle"
   }));
 };
 ThemeSelector.propTypes = {

package/dist/es/g/DragAndDrop/DragAndDrop.js

@@ -25,6 +25,7 @@ const DragAndDrop = ({
   // ...otherProps
 }) => {
   const [draggableItems, setDraggableItems] = useState(items);
+  const [dragOverIndex, setDragOverIndex] = useState(null);
   const handleDrop = (e, dragOverItemIndex) => {
     e.preventDefault();
     const dragItemIndex = e.dataTransfer.getData('text');
@@ -33,6 +34,7 @@ const DragAndDrop = ({
     orderedItems.splice(dragOverItemIndex, 0, reorderedItem);
     setDraggableItems(orderedItems);
     onOrderChange?.(orderedItems);
+    setDragOverIndex(null);
   };
   return /*#__PURE__*/React.createElement(Wrapper, {
     id: id,
@@ -45,8 +47,13 @@ const DragAndDrop = ({
     Content,
     ...rest
   }, index) => /*#__PURE__*/React.createElement(DraggableItem, _extends({
+    className: dragOverIndex === index && 'drag-over',
     draggable: true,
     onDrop: e => handleDrop(e, index),
+    onDragOver: e => {
+      e.preventDefault();
+      setDragOverIndex(index);
+    },
     index: index,
     key: identifier
   }, rest), Content)));

package/dist/es/g/DragAndDrop/common/DraggableItem/DraggableItem.js

@@ -32,15 +32,11 @@ const DraggableItem = ({
   const handleDragEnd = () => {
     setIsDragging(false);
   };
-  const handleDragOver = e => {
-    e.preventDefault();
-  };
   return /*#__PURE__*/React.createElement(Wrapper, _extends({
     id: id,
     className: [baseClassName, componentClassName, userClassName, isDragging && 'dragging'].filter(e => e).join(' '),
     style: style,
     onDragStart: e => handleDragStart(e),
-    onDragOver: e => handleDragOver(e),
     onDragEnd: e => handleDragEnd(e)
   }, otherProps), children);
 };

package/dist/es/g/FormBuilder/common/Builder/common/Section/styles.scss

@@ -19,7 +19,17 @@ $default-margin: 1rem;
   }
 
   > form {
+
     /* stylelint-disable selector-max-compound-selectors -- required */
+
+    > .#{bem.$base}.drag-and-drop {
+      >.drag-over {
+        > .#{bem.$base}.input-builder {
+          border: 1px dashed var(--ui-lines);
+        }
+      }
+    }
+
     > .add-question-cta {
       align-items: center;
       background-color: transparent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.6.0",
+  "version": "4.7.1-alpha.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": "583a2500521c8da9aa2dfc7778c9df8b00b79516"
 }

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

@@ -36,6 +36,7 @@ $default-height: var(--notification-height, 5rem);
     > .message {
       font-size: calc(var(--s0) * 1rem);
       margin-left: calc($default-margin / 2);
+      text-transform: capitalize;
     }
 
     > span {

package/src/ui/a/ToggleSwitch/ToggleSwitch.jsx

@@ -89,11 +89,11 @@ ToggleSwitch.propTypes = {
   /**
    * The ID of the elelment to be toggled
    */
-  inputId:PropTypes.string,
+  inputId:PropTypes.string.isRequired,
 }
 
 ToggleSwitch.defaultProps = {
-  inputId:'switch',
+  // someProp: 'someValue',
 }
 
 export default ToggleSwitch

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/src/ui/b/ThemeSelector/ThemeSelector.jsx

@@ -51,7 +51,7 @@ const ThemeSelector = ({
         {' '}
         Theme
       </span>
-      <ToggleSwitch checked={userTheme === 'dark'} handleOnChange={loopThemes} />
+      <ToggleSwitch checked={userTheme === 'dark'} handleOnChange={loopThemes} inputId="theme-toggle" />
     </div>
   )
 }

package/src/ui/g/DragAndDrop/DragAndDrop.jsx

@@ -30,6 +30,7 @@ const DragAndDrop = ({
   // ...otherProps
 }) => {
   const [draggableItems, setDraggableItems] = useState(items)
+  const [dragOverIndex, setDragOverIndex] = useState(null)
 
   const handleDrop = (e, dragOverItemIndex) => {
     e.preventDefault()
@@ -39,6 +40,7 @@ const DragAndDrop = ({
     orderedItems.splice(dragOverItemIndex, 0, reorderedItem)
     setDraggableItems(orderedItems)
     onOrderChange?.(orderedItems)
+    setDragOverIndex(null)
   }
 
   return (
@@ -60,8 +62,13 @@ const DragAndDrop = ({
         identifier, disabled, Content, ...rest
       }, index) => (
         <DraggableItem
+          className={dragOverIndex === index && 'drag-over'}
           draggable
           onDrop={(e) => handleDrop(e, index)}
+          onDragOver={(e) => {
+            e.preventDefault()
+            setDragOverIndex(index)
+          }}
           index={index}
           key={identifier}
           {...rest}

package/src/ui/g/DragAndDrop/common/DraggableItem/DraggableItem.jsx

@@ -39,10 +39,6 @@ const DraggableItem = ({
     setIsDragging(false)
   }
 
-  const handleDragOver = (e) => {
-    e.preventDefault()
-  }
-
   return (
     <Wrapper
       id={id}
@@ -56,7 +52,6 @@ const DraggableItem = ({
         .join(' ')}
       style={style}
       onDragStart={(e) => handleDragStart(e)}
-      onDragOver={(e) => handleDragOver(e)}
       onDragEnd={(e) => handleDragEnd(e)}
       {...otherProps}
     >

package/src/ui/g/FormBuilder/common/Builder/common/Section/styles.scss

@@ -19,7 +19,17 @@ $default-margin: 1rem;
   }
 
   > form {
+
     /* stylelint-disable selector-max-compound-selectors -- required */
+
+    > .#{bem.$base}.drag-and-drop {
+      >.drag-over {
+        > .#{bem.$base}.input-builder {
+          border: 1px dashed var(--ui-lines);
+        }
+      }
+    }
+
     > .add-question-cta {
       align-items: center;
       background-color: transparent;

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

@@ -11916,7 +11916,7 @@ exports[`Storyshots a/Timestamp Distance Format 1`] = `
   className="base timestamp"
   onClick={[Function]}
 >
-  almost 2 years ago
+  about 2 years ago
 </p>
 `;
 
@@ -12022,12 +12022,9 @@ exports[`Storyshots a/ToggleSwitch Single 1`] = `
   type="button"
 >
   <input
-    id="switch"
     type="checkbox"
   />
-  <label
-    htmlFor="switch"
-  />
+  <label />
 </button>
 `;
 
@@ -17562,6 +17559,7 @@ exports[`Storyshots b/Button Loading 1`] = `
 [
   <button
     className="base button x-main"
+    disabled={true}
     type="button"
   >
     <div
@@ -17603,6 +17601,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-main2"
+    disabled={true}
     type="button"
   >
     <div
@@ -17644,6 +17643,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-red"
+    disabled={true}
     type="button"
   >
     <div
@@ -17685,6 +17685,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-green"
+    disabled={true}
     type="button"
   >
     <div
@@ -17726,6 +17727,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-orange"
+    disabled={true}
     type="button"
   >
     <div
@@ -17767,6 +17769,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-gray"
+    disabled={true}
     type="button"
   >
     <div
@@ -17808,6 +17811,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-blue"
+    disabled={true}
     type="button"
   >
     <div
@@ -17849,6 +17853,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-purple"
+    disabled={true}
     type="button"
   >
     <div
@@ -17890,6 +17895,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-yellow"
+    disabled={true}
     type="button"
   >
     <div
@@ -17931,6 +17937,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-seagreen"
+    disabled={true}
     type="button"
   >
     <div
@@ -17972,6 +17979,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-deepblue"
+    disabled={true}
     type="button"
   >
     <div
@@ -18013,6 +18021,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-light-blue"
+    disabled={true}
     type="button"
   >
     <div
@@ -18054,6 +18063,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-light-purple"
+    disabled={true}
     type="button"
   >
     <div
@@ -18095,6 +18105,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-light-seagreen"
+    disabled={true}
     type="button"
   >
     <div
@@ -18136,6 +18147,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-ui-main"
+    disabled={true}
     type="button"
   >
     <div
@@ -18177,6 +18189,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-ui-main-2"
+    disabled={true}
     type="button"
   >
     <div
@@ -18218,6 +18231,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-ui-lines"
+    disabled={true}
     type="button"
   >
     <div
@@ -18259,6 +18273,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-ui-icons"
+    disabled={true}
     type="button"
   >
     <div
@@ -18300,6 +18315,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-heading"
+    disabled={true}
     type="button"
   >
     <div
@@ -18341,6 +18357,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-paragraph"
+    disabled={true}
     type="button"
   >
     <div
@@ -18382,6 +18399,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-subtitle"
+    disabled={true}
     type="button"
   >
     <div
@@ -18423,6 +18441,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-metadata"
+    disabled={true}
     type="button"
   >
     <div
@@ -18464,6 +18483,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-link"
+    disabled={true}
     type="button"
   >
     <div
@@ -18505,6 +18525,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-disabled"
+    disabled={true}
     type="button"
   >
     <div
@@ -18546,6 +18567,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-shadow"
+    disabled={true}
     type="button"
   >
     <div
@@ -18587,6 +18609,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-transparent"
+    disabled={true}
     type="button"
   >
     <div
@@ -18628,6 +18651,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-highlighted"
+    disabled={true}
     type="button"
   >
     <div
@@ -18669,6 +18693,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-interactive"
+    disabled={true}
     type="button"
   >
     <div
@@ -18710,6 +18735,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-background-far"
+    disabled={true}
     type="button"
   >
     <div
@@ -18751,6 +18777,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-background-near"
+    disabled={true}
     type="button"
   >
     <div
@@ -18792,6 +18819,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-background-inputs"
+    disabled={true}
     type="button"
   >
     <div
@@ -18833,6 +18861,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-background-cards"
+    disabled={true}
     type="button"
   >
     <div
@@ -18874,6 +18903,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-background-mesh"
+    disabled={true}
     type="button"
   >
     <div
@@ -18915,6 +18945,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-outline-inputs"
+    disabled={true}
     type="button"
   >
     <div
@@ -18956,6 +18987,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-twitter"
+    disabled={true}
     type="button"
   >
     <div
@@ -18997,6 +19029,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-facebook"
+    disabled={true}
     type="button"
   >
     <div
@@ -19038,6 +19071,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-instagram"
+    disabled={true}
     type="button"
   >
     <div
@@ -19079,6 +19113,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-google"
+    disabled={true}
     type="button"
   >
     <div
@@ -19120,6 +19155,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-black"
+    disabled={true}
     type="button"
   >
     <div
@@ -19161,6 +19197,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-anchor"
+    disabled={true}
     type="button"
   >
     <div
@@ -19202,6 +19239,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-grey"
+    disabled={true}
     type="button"
   >
     <div
@@ -19243,6 +19281,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-pearl"
+    disabled={true}
     type="button"
   >
     <div
@@ -19284,6 +19323,7 @@ exports[`Storyshots b/Button Loading 1`] = `
   </button>,
   <button
     className="base button x-white"
+    disabled={true}
     type="button"
   >
     <div
@@ -23994,12 +24034,12 @@ exports[`Storyshots b/ThemeSelector Base 1`] = `
     >
       <input
         checked={false}
-        id="switch"
+        id="theme-toggle"
         onChange={[Function]}
         type="checkbox"
       />
       <label
-        htmlFor="switch"
+        htmlFor="theme-toggle"
       />
     </button>
   </div>