@dataforsyningen/designsystem - npm Package Compare versions

Comparing version 4.6.1 to 5.0.0

assets/designsystem.js

@@ -98,3 +98,2 @@ // src/js/toast.js
 };
-customElements.define("code-view", CodeView);
 
@@ -201,3 +200,2 @@ // src/js/themeToggle.js
 };
-customElements.define("ds-theme-toggle", ThemeToggle);
 
@@ -250,3 +248,2 @@ // src/js/togglePanel.js
 };
-customElements.define("ds-toggle-panel", DSTogglePanel);
 
@@ -275,2 +272,5 @@ // src/js/toggle.js
     super();
+    if (!customElements.get("ds-toggle-panel")) {
+      customElements.define("ds-toggle-panel", DSTogglePanel);
+    }
   }
@@ -289,3 +289,2 @@ connectedCallback() {
 };
-customElements.define("ds-slide", DSSlide);
 
@@ -365,3 +364,2 @@ // src/js/logo.js
 };
-customElements.define("ds-logo", DSLogo);
 
@@ -374,9 +372,36 @@ // src/js/spinner.js
       0% {
-        transform: rotate(0deg);
+        transform: scaleX(0%);
+        filter: brightness(1);
       }
+      25% {
+        transform: scaleX(105%);
+        filter: brightness(1);
+      }
+      50% {
+        transform: scaleX(0%);
+        filter: brightness(1);
+      }
+      51% {
+        transform: scaleX(0%);
+        filter: brightness(0.6);
+      }
+      75% {
+        transform: scaleX(105%);
+        filter: brightness(0.6);
+      }
       100% {
-        transform: rotate(360deg);
+        transform: scaleX(0%);
+        filter: brightness(0.6);
       }
     }
 
+    @keyframes logosled {
+      from {
+        rotate: 0deg;
+      }
+      to {
+        rotate: 359deg;
+      }
+    }
+
     ds-spinner {
@@ -395,4 +420,19 @@ width: 10rem;
       justify-content: center;
-      animation: logoanimation 2s ease-in-out infinite; 
+      position: relative;
+      /* animation: logoanimation 3s ease-in-out infinite; */
     }
+
+    ds-spinner ds-logo::before {
+      content: '';
+      display: block;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      border-top: solid medium var(--color);
+      transform-origin: 50% 50%;
+      animation: logosled 2s ease-out infinite;
+      border-radius: 50%;
+    }
   `;
@@ -412,2 +452,5 @@ template = `
     super();
+    if (!customElements.get("ds-logo")) {
+      customElements.define("ds-logo", DSLogo);
+    }
   }
@@ -503,3 +546,2 @@ // Methods
 };
-customElements.define("ds-tabs", Tabs);
 
@@ -513,2 +555,5 @@ // src/js/responsiveNav.js
     super();
+    if (!customElements.get("ds-toggle-panel")) {
+      customElements.define("ds-toggle-panel", DSTogglePanel);
+    }
   }
@@ -565,3 +610,2 @@ connectedCallback() {
 };
-customElements.define("ds-nav", DSNav);
 
@@ -578,3 +622,2 @@ // src/js/icon.js
 };
-customElements.define("ds-icon", DSIcon);
 
@@ -1120,4 +1163,2 @@ // src/js/popover.js
     apply();
-  } else {
-    console.log("not polyfilling popover");
   }
@@ -1124,0 +1165,0 @@ }

package.json

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

README.md

@@ -7,3 +7,7 @@ # SDFI Designsystem
 
-1. Clone this repo or import as noted above.
+Documentation is available at [sdfidk.github.io/designsystem/](https://sdfidk.github.io/designsystem/)
+
+You can also build and read the docs locally.
+
+1. Clone this repo.
 2. Navigate to folder `designsystem` or `node_modules/@dataforsyningen/designsystem`
@@ -10,0 +14,0 @@ 3. Open file `index.html` in a browser.

src/js/codeview.js

@@ -90,3 +90,1 @@ import { showToast } from "./toast.js"
 }
-
-customElements.define('code-view', CodeView)

src/js/icon.js

@@ -14,3 +14,1 @@ // import svgSrc from '../../assets/designsystem-icons.svg'
 }
-
-customElements.define('ds-icon', DSIcon)

src/js/logo.js

@@ -76,3 +76,1 @@ export class DSLogo extends HTMLElement {
 }
-
-customElements.define('ds-logo', DSLogo)

src/js/popover.js

@@ -542,5 +542,3 @@ var ToggleEvent = class extends Event {
     apply()
-  } else {
-    console.log('not polyfilling popover')
   }
 }

src/js/responsiveNav.js

@@ -11,2 +11,5 @@ import { DSTogglePanel } from './togglePanel.js'
     super()
+    if (!customElements.get('ds-toggle-panel')) {
+      customElements.define('ds-toggle-panel', DSTogglePanel)
+    }
   }
@@ -71,3 +74,1 @@
 }
-
-customElements.define('ds-nav', DSNav)

src/js/spinner.js

@@ -6,3 +6,2 @@ import { DSLogo } from './logo.js'
 
-
   // Properties
@@ -12,9 +11,36 @@ style = `
       0% {
-        transform: rotate(0deg);
+        transform: scaleX(0%);
+        filter: brightness(1);
       }
+      25% {
+        transform: scaleX(105%);
+        filter: brightness(1);
+      }
+      50% {
+        transform: scaleX(0%);
+        filter: brightness(1);
+      }
+      51% {
+        transform: scaleX(0%);
+        filter: brightness(0.6);
+      }
+      75% {
+        transform: scaleX(105%);
+        filter: brightness(0.6);
+      }
       100% {
-        transform: rotate(360deg);
+        transform: scaleX(0%);
+        filter: brightness(0.6);
       }
     }
 
+    @keyframes logosled {
+      from {
+        rotate: 0deg;
+      }
+      to {
+        rotate: 359deg;
+      }
+    }
+
     ds-spinner {
@@ -33,4 +59,19 @@ width: 10rem;
       justify-content: center;
-      animation: logoanimation 2s ease-in-out infinite; 
+      position: relative;
+      /* animation: logoanimation 3s ease-in-out infinite; */
     }
+
+    ds-spinner ds-logo::before {
+      content: '';
+      display: block;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      border-top: solid medium var(--color);
+      transform-origin: 50% 50%;
+      animation: logosled 2s ease-out infinite;
+      border-radius: 50%;
+    }
   `
@@ -52,2 +93,5 @@ template = `
     super()
+    if (!customElements.get('ds-logo')) {
+      customElements.define('ds-logo', DSLogo)
+    }
   }
@@ -54,0 +98,0 @@

src/js/tabs.js

@@ -111,3 +111,1 @@ /**
 }
-
-customElements.define("ds-tabs", Tabs)

src/js/themeToggle.js

@@ -110,3 +110,1 @@ export class ThemeToggle extends HTMLElement {
 }
-
-customElements.define('ds-theme-toggle', ThemeToggle)

src/js/toggle.js

@@ -27,2 +27,5 @@ import { DSTogglePanel } from "./togglePanel.js"
     super()
+    if (!customElements.get('ds-toggle-panel')) {
+      customElements.define('ds-toggle-panel', DSTogglePanel)
+    }
   }
@@ -44,3 +47,1 @@
 }
-
-customElements.define('ds-slide', DSSlide)

src/js/togglePanel.js

@@ -58,3 +58,1 @@ export class DSTogglePanel extends HTMLElement {
 }
-
-customElements.define('ds-toggle-panel', DSTogglePanel)

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

656093

increased by0.76%

Lines of code

2609

increased by3.12%

Number of lines in readme file

132

increased by3.13%

No dependency changes