@pareto-engineering/design-system 4.7.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/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/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.7.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": "a0b1f11ada4ec43eab0107932d1fbafe8108bbb6"
+  "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/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>
 `;
 
@@ -24037,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>