mp-design-system 1.2.44 → 1.2.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mp-design-system",
-  "version": "1.2.44",
+  "version": "1.2.46",
   "description": "",
   "scripts": {
     "dev": "npm-run-all --parallel bundle:*",

package/src/assets/js/imports/off-canvas.js

@@ -29,14 +29,9 @@ function OffCanvas() {
 
 // Function to check if an element is currently visible on the page
 function isVisible(element) {
-  // Check element's position and styles for visibility
-  const rect = element.getBoundingClientRect();
+  // Check element's styles for visibility
   const style = window.getComputedStyle(element);
   return (
-    rect.top >= 0 &&
-    rect.left >= 0 &&
-    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-    rect.right <= (window.innerWidth || document.documentElement.clientWidth) &&
     style.display !== 'none' &&
     style.visibility !== 'hidden'
   );
@@ -45,6 +40,8 @@ function isVisible(element) {
 // Function to handle off-canvas behavior based on visibility
 function handleOffCanvas(toggle, isVisible) {
   const target = document.getElementById(toggle.getAttribute('data-target'));
+  console.log(target);
+  console.log(isVisible);
   if (isVisible === true) {
     createOffCanvas(target);
   } else {

package/src/assets/scss/components/form.scss

@@ -11,9 +11,13 @@
             letter-spacing: -.02em;
         }
 
-        &__form.o-grid {
+        &__row.o-grid {
             flex-wrap: wrap;
-            row-gap: var(--space-s);
+            gap: var(--space-s);
+
+            .c-form__input {
+                flex: 1 0 298px;
+            }
     
             .c-input {
                 flex-shrink: 1;
@@ -22,19 +26,28 @@
   
         &__input-wrap {
             display: flex;
-            align-items: flex-start;
             gap: var(--space-s);
-            flex-wrap: nowrap;
+            flex-wrap: wrap;
+            align-items: flex-start;
             
             .c-label {
                 min-width: 115px;
                 flex-basis: 115px;
-                margin-bottom: 0;
+                @include margin-bottom(0);
+                word-wrap: break-word;
+            
+                @media only screen and (max-width: 31.25em) {
+                    flex-basis: 100%;
+                }
                 
                 &+ * {
                     flex: 1 0 115px;
                 }
             }
+
+            .c-input--textarea {
+                flex-basis: 100%;
+            }
         }
 
         &__messages-wrap {
@@ -49,7 +62,8 @@
         }
     }
 
-    & > .c-fieldset {
+    & > .c-fieldset,
+    & > .c-tab > .c-fieldset {
         & > * + *:not(:has(> .u-hidden)) {
             @include padding-top('s');
         }
@@ -114,7 +128,8 @@
 
   & > .o-grid,
   & > .o-grid > * {
-    @include margin-bottom(0);
+    @include margin(0);
+    @include padding(0);
   }
 }