@erst-vg/vg-design-wrapper 1.0.3 → 1.0.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@erst-vg/vg-design-wrapper",
   "private": false,
-  "version": "1.0.3",
+  "version": "1.0.4",
   "type": "module",
   "repository": {
     "type": "git",
@@ -33,7 +33,9 @@
     "preview": "vite preview",
     "test:unit": "vitest run --coverage.enabled --coverage.reporter='text-summary'",
     "clean": "rm -rf ./src/styles/vg ./src/assets && mkdir -p src/assets/icons/ src/styles/vg",
+    "clean-windows": "rmdir src\\styles\\vg src\\assets /s && mkdir src\\assets\\icons src\\styles\\vg",
     "prepack": "npm run clean && cp -rvp ../content-web/src/main/vue/src/styles/external/** src/styles/vg; cp -rv ../content-web/src/main/vue/src/assets/icons/*.svg src/assets/icons",
+    "prepack-windows": "npm run clean-windows && xcopy ..\\content-web\\src\\main\\vue\\src\\styles\\external\\** .\\src\\styles\\vg && xcopy  ..\\content-web\\src\\main\\vue\\src\\assets\\icons\\*.svg .\\src\\assets\\icons /e",
     "lint": "cross-env ESLINT_USE_FLAT_CONFIG=false eslint \"**/*.{ts,js,vue}\" --fix --format=pretty",
     "prettierfix": "prettier --write \"**/*.{vue,ts}\" ",
     "prettiercheck": "prettier --check \"**/*.{vue,ts}\" "

package/src/assets/icons/antal-gange.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path fill="currentColor"
+    d="M3 5H1v16c0 1.1.9 2 2 2h16v-2H3V5zm18-4H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 16H7V3h14v14z"
+  />
+</svg>

package/src/styles/custom/_vgAccordion.scss

@@ -12,3 +12,16 @@
     }
   }
 }
+
+.accordion-bulk-button {
+  display: block;
+  line-height: 1.5em;
+  padding-left: 0;
+  margin-left: auto;
+  background-image: none !important;
+  color: var(--site-primary);
+
+  &:focus {
+    color: var(--site-primary);
+  }
+}

package/src/styles/vg/_vg-colors.scss

@@ -149,8 +149,6 @@ $default-site-color-7: $color-redaktion-themecolor-green;
 // Other
 $color-border-light-grey: #bfbfbf;
 $color-darkbg-disabled: #758a9f;
-$color-abonnement-ulaest: #d0021b;
-$color-abonnement-laest: $color-redaktion-border;
 $color-mint-green: #eeffe2;
 $color-grey-1: #4f4f4f;
 

package/src/styles/vg/accordion/_vg-accordion.scss

@@ -49,6 +49,15 @@
       &[aria-expanded='true'] {
         border-bottom: none;
       }
+
+      @include media-breakpoint-down-em(sm) {
+        flex-wrap: wrap;
+        padding: 0.5em;
+
+        .icon-svg {
+          margin-left: 0;
+        }
+      }
     }
 
     .accordion-content {
@@ -62,6 +71,10 @@
         padding: 24px 16px 8px 24px;
       }
 
+      @include media-breakpoint-down-em(sm) {
+        padding: 0.5em;
+      }
+
       .accordion-body {
         li {
           border: none;

package/src/styles/vg/buttons/_vg-buttons.scss

@@ -8,10 +8,6 @@
   display: inline-block;
   min-height: 40px;
 
-  @include media-breakpoint-down(sm) {
-    width: max-content;
-  }
-
   span + .icon-svg {
     margin: 0 0 2px 5px;
   }
@@ -30,6 +26,12 @@
   &:focus {
     outline-width: 2px;
   }
+
+  span {
+    @include media-breakpoint-down-em(sm) {
+      word-break: break-word;
+    }
+  }
 }
 
 .button-primary {

package/src/styles/vg/card/_vg-cardText.scss

@@ -44,24 +44,6 @@ pre {
   justify-content: space-between;
   align-items: center;
   line-height: normal;
-
-  .ulaest-icon-container {
-    display: flex;
-    align-items: center;
-
-    .ulaest-icon {
-      width: 8px;
-      height: 8px;
-      background-color: $color-abonnement-ulaest;
-      border-radius: 4px;
-    }
-
-    .ulaest-text {
-      color: $font-color;
-      font-size: 0.8125em;
-      font-weight: 500;
-    }
-  }
 }
 
 .white-text {

package/src/styles/vg/mixins/_vg-mediaquery-helpers.scss

@@ -11,6 +11,7 @@ $grid-breakpoints: (
   lg: $grid-lg,
   xl: $grid-xl
 );
+
 // Breakpoint viewport sizes and media queries.
 //
 // Breakpoints are defined as a map of (name: minimum width), order from small to large:
@@ -59,7 +60,7 @@ $grid-breakpoints: (
 //    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    "-sm"
 @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
-  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+  @return if(breakpoint-min($name, $breakpoints) == null, '', '-#{$name}');
 }
 
 // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
@@ -133,3 +134,19 @@ $grid-breakpoints: (
 @mixin testmixin() {
   background-color: yellow !important;
 }
+
+// Breakpoints specificeret til zoom og kigger derfor på em
+// Bruges særlig til mindre skærme, så koden kan opfylde tilgængelighedskrav
+$zoom-sm: 25em;
+$zoom-xs: 15em;
+$zoom-breakpoints: (
+  xs: $zoom-xs,
+  sm: $zoom-sm
+);
+
+@mixin media-breakpoint-down-em($name, $breakpoints: $zoom-breakpoints) {
+  $max: map-get($breakpoints, $name);
+  @media all and (max-width: $max) {
+    @content;
+  }
+}