@dataforsyningen/designsystem - npm Package Compare versions

Comparing version 7.7.0 to 7.7.1

assets/designsystem.js

@@ -714,8 +714,10 @@ // src/js/toast.js
     :host {
-      max-width: 100%;
       display: block;
-      text-align: right; 
+      overflow: auto;
+      min-width: calc(var(--button-base-height) + 0.25rem);
+      min-height: var(--button-base-height);
     }
     .menu-container {
-      position: relative;
+      width: 100%;
+      height: 100%;
     }
@@ -725,26 +727,11 @@ .menu-toggle {
     }
-    .menu-items {
-      max-width: 100%;
-      overflow: scroll;
-      display: flex;
-      flex-flow: row nowrap;
-    }
-    .compact .menu-toggle {
+    .menu-container.compact .menu-toggle {
       display: inline-block;
     }
-    .compact .menu-items {
-      position: absolute;
-      display: flex;
-      flex-flow: row wrap;
-      top: var(--space);
-      left: 0;
-      z-index: 100;
-      gap: var(--space-sm);
-      background-color: var(--background-color);
-      padding: var(--gap-lg);
-      box-shadow: var(--space-xs) var(--space-xs) var(--space-sm) var(--shadow-2);
-    }
-    .compact .menu-items.collapsed {
+    .menu-container.compact .menu-items {
       display: none;
     }
+    .menu-container.compact .menu-items.expanded {
+      display: block;
+    }
   `;
@@ -772,5 +759,5 @@ constructor() {
         <slot name="toggle" class="menu-toggle"></slot>
-        <nav class="menu-items">
+        <div class="menu-items">
           <slot></slot>
-        </nav>
+        </div>
       </div>
@@ -783,3 +770,4 @@ `;
     const menu = this.shadowRoot.querySelector(".menu-items");
-    menu.classList.toggle("collapsed");
+    this.classList.toggle("expanded");
+    menu.classList.toggle("expanded");
   }
@@ -789,10 +777,14 @@ updateMenu() {
     const items = this.shadowRoot.querySelector(".menu-items");
-    const menuWidth = items.scrollWidth;
-    const containerWidth = this.clientWidth;
+    const menuWidth = container.scrollWidth;
+    const containerWidth = this.offsetWidth;
+    console.log("widths");
+    console.log(this.offsetWidth, this.scrollWidth);
+    console.log(container.offsetWidth, container.scrollWidth);
+    console.log(items.offsetWidth, items.scrollWidth);
     if (menuWidth > containerWidth) {
-      items.classList.add("collapsed");
+      this.classList.add("compact");
       container.classList.add("compact");
     } else {
+      this.classList.remove("compact");
       container.classList.remove("compact");
-      items.classList.remove("collapsed");
     }
@@ -799,0 +791,0 @@ }

package.json

 {
   "name": "@dataforsyningen/designsystem",
-  "version": "7.7.0",
+  "version": "7.7.1",
   "description": "Common design system for Klimadatastyrelsen with CSS, icons, UI components, and logo images.",
@@ -5,0 +5,0 @@ "type": "module",

src/js/responsiveNav.js

@@ -78,8 +78,10 @@ import { DSTogglePanel } from './togglePanel.js'
     :host {
-      max-width: 100%;
       display: block;
-      text-align: right; 
+      overflow: auto;
+      min-width: calc(var(--button-base-height) + 0.25rem);
+      min-height: var(--button-base-height);
     }
     .menu-container {
-      position: relative;
+      width: 100%;
+      height: 100%;
     }
@@ -89,26 +91,11 @@ .menu-toggle {
     }
-    .menu-items {
-      max-width: 100%;
-      overflow: scroll;
-      display: flex;
-      flex-flow: row nowrap;
-    }
-    .compact .menu-toggle {
+    .menu-container.compact .menu-toggle {
       display: inline-block;
     }
-    .compact .menu-items {
-      position: absolute;
-      display: flex;
-      flex-flow: row wrap;
-      top: var(--space);
-      left: 0;
-      z-index: 100;
-      gap: var(--space-sm);
-      background-color: var(--background-color);
-      padding: var(--gap-lg);
-      box-shadow: var(--space-xs) var(--space-xs) var(--space-sm) var(--shadow-2);
-    }
-    .compact .menu-items.collapsed {
+    .menu-container.compact .menu-items {
       display: none;
     }
+    .menu-container.compact .menu-items.expanded {
+      display: block;
+    }
   `
@@ -140,5 +127,5 @@
         <slot name="toggle" class="menu-toggle"></slot>
-        <nav class="menu-items">
+        <div class="menu-items">
           <slot></slot>
-        </nav>
+        </div>
       </div>
@@ -153,20 +140,28 @@ `
     const menu = this.shadowRoot.querySelector('.menu-items')
-    menu.classList.toggle('collapsed')
+    this.classList.toggle('expanded')
+    menu.classList.toggle('expanded')
   }
 
   updateMenu() {
+    
     const container = this.shadowRoot.querySelector('.menu-container')
     const items = this.shadowRoot.querySelector('.menu-items')
 
-    const menuWidth = items.scrollWidth
-    const containerWidth = this.clientWidth
+    const menuWidth = container.scrollWidth
+    const containerWidth = this.offsetWidth
+    // offsetWidth, clientWidth, scrollWidth
 
+    console.log('widths')
+    console.log(this.offsetWidth, this.scrollWidth)
+    console.log(container.offsetWidth, container.scrollWidth)
+    console.log(items.offsetWidth, items.scrollWidth)
+
     if (menuWidth > containerWidth) {
-      items.classList.add('collapsed')
+      this.classList.add('compact')
       container.classList.add('compact')
     } else {
+      this.classList.remove('compact')
       container.classList.remove('compact')
-      items.classList.remove('collapsed')
     }
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4631736

increased by0.07%

Number of package files

197

increased by0.51%

Worsened metrics

Lines of code

3562

decreased by-0.42%

No dependency changes