@erst-vg/vg-design-wrapper 1.0.12 → 2.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@erst-vg/vg-design-wrapper",
   "private": false,
-  "version": "1.0.12",
+  "version": "2.0.0",
   "type": "module",
   "repository": {
     "type": "git",
@@ -27,7 +27,8 @@
       "types": "./dist/src/index.d.ts",
       "import": "./dist/vg-design-wrapper.js",
       "require": "./dist/vg-design-wrapper.umd.cjs"
-    }
+    },
+    "./styles/utility": "./src/styles/utility.scss"
   },
   "scripts": {
     "dev": "vite",
@@ -45,43 +46,38 @@
     "@types/node": "^22.5.3",
     "dkfds": "npm:@erst-vg/dkfds-vite@8.0.1",
     "lodash": "4.17.21",
-    "sass": "1.78.0",
-    "vue": "^3.3.0",
-    "vue-inline-svg": "3.1.2"
+    "sass": "1.93.2",
+    "vue": "3.5.22",
+    "vue-inline-svg": "4.0.1"
   },
   "peerDependencies": {
-    "vue": "^3.3.0"
+    "vue": "3.5.22"
   },
   "devDependencies": {
     "@stylistic/eslint-plugin": "2.6.2",
-    "@types/lodash": "^4.17.7",
-    "@typescript-eslint/eslint-plugin": "8.1.0",
-    "@vitejs/plugin-vue": "5.1.2",
-    "@vitest/coverage-v8": "2.0.5",
+    "@types/lodash": "4.17.7",
+    "@typescript-eslint/eslint-plugin": "8.45.0",
+    "@vitejs/plugin-vue": "5.2.3",
+    "@vitest/coverage-v8": "3.2.4",
     "cross-env": "7.0.3",
-    "eslint": "8.57.0",
-    "eslint-config-prettier": "8.0.0",
-    "eslint-formatter-pretty": "^5.0.0",
-    "eslint-import-resolver-typescript": "3.6.1",
-    "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-vue": "9.27.0",
-    "husky": "4.3.8",
-    "jsdom": "^25.0.0",
-    "lint-staged": "10.5.4",
-    "path": "^0.12.7",
-    "prettier": "2.7.1",
-    "typescript": "5.5.4",
-    "vite": "5.4.0",
+    "eslint": "9.37.0",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-formatter-pretty": "7.0.0",
+    "eslint-import-resolver-typescript": "4.4.4",
+    "eslint-plugin-import": "2.32.0",
+    "eslint-plugin-vue": "10.5.0",
+    "husky": "9.1.7",
+    "jsdom": "25.0.1",
+    "lint-staged": "16.2.3",
+    "path": "0.12.7",
+    "prettier": "3.6.2",
+    "typescript": "5.9.3",
+    "vite": "5.4.20",
     "vite-plugin-css-injected-by-js": "3.5.1",
     "vite-plugin-dts": "4.1.0",
-    "vitest": "2.0.5",
+    "vitest": "3.2.4",
     "vue-tsc": "2.0.29",
-    "@vue/test-utils": "2.4.0"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged --allow-empty"
-    }
+    "@vue/test-utils": "2.4.6"
   },
   "lint-staged": {
     "*.{ts,vue}": [

package/src/assets/icons/agenda.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="m19.675 20.375.7-.7L18.5 17.8V15h-1v3.2l2.175 2.175zM5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 5 3h14c.55 0 1.02.196 1.413.587C20.803 3.98 21 4.45 21 5v6.7a8.184 8.184 0 0 0-.975-.387A6.104 6.104 0 0 0 19 11.075V5H5v14h6.05c.05.367.13.717.237 1.05.109.333.238.65.388.95H5zm0-3v1V5v6.075V11v7zm2-1h4.075c.05-.35.13-.692.238-1.025.108-.333.229-.658.362-.975H7v2zm0-4h6.1c.533-.5 1.13-.917 1.787-1.25A7.043 7.043 0 0 1 17 11.075V11H7v2zm0-4h10V7H7v2zm11 14c-1.383 0-2.563-.488-3.537-1.462C13.488 20.562 13 19.383 13 18s.488-2.563 1.463-3.537C15.438 13.488 16.617 13 18 13s2.563.488 3.538 1.463C22.512 15.438 23 16.617 23 18s-.488 2.563-1.462 3.538C20.562 22.512 19.383 23 18 23z" fill="currentColor"/>
+</svg>

package/src/assets/icons/breadcrumbArrow.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M8.59 16.59 10 18l6-6-6-6-1.41 1.41L13.17 12l-4.58 4.59z" fill="#currentColor"/>
+    <path d="M8.59 16.59 10 18l6-6-6-6-1.41 1.41L13.17 12l-4.58 4.59z" fill="currentColor"/>
 </svg>

package/src/components/VgAccordion.vue

@@ -93,5 +93,5 @@ const toggle = (event: Event, index: number) => {
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/custom/_vgAccordion.scss';
+@use '@/styles/custom/_vgAccordion.scss';
 </style>

package/src/components/VgCard.vue

@@ -92,5 +92,5 @@ defineProps({
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/custom/_vgCard.scss';
+@use '@/styles/custom/_vgCard.scss';
 </style>

package/src/components/VgDesignWrapper.vue

@@ -35,14 +35,10 @@ onMounted(() => {
 </script>
 
 <style lang="scss">
-@import '@/styles/vg/_vg-colors.scss';
-.applikation-container {
-  // Importer de forskellige komponenter, så leverandør af 3parts applikation ikke selv skal gøre det.
-  @import '@/styles/vg/mixins/_vg-mediaquery-helpers.scss';
-  @import '@/styles/vg/pagination/_vg-pagination.scss';
-  @import '@/styles/vg/accordion/_vg-accordion.scss';
-  @import '@/styles/vg/buttons/_vg-buttons.scss';
-  @import '@/styles/vg/card/_vg-cardText.scss';
-  @import '@/styles/vg/card/_vg-udvidedecardgrupper.scss';
-}
+// Importer de forskellige komponenter, så leverandør af 3parts applikation ikke selv skal gøre det.
+@use '@/styles/vg/pagination/_vg-pagination.scss';
+@use '@/styles/vg/accordion/_vg-accordion.scss';
+@use '@/styles/vg/buttons/_vg-buttons.scss';
+@use '@/styles/vg/card/_vg-cardText.scss';
+@use '@/styles/vg/card/_vg-udvidedecardgrupper.scss';
 </style>

package/src/components/VgIcon.vue

@@ -50,5 +50,5 @@ const iconSrc = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/custom/_vgIcon.scss';
+@use '@/styles/custom/_vgIcon.scss';
 </style>

package/src/components/VgListe.vue

@@ -69,5 +69,5 @@ watch(
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/custom/_vgListe.scss';
+@use '@/styles/custom/_vgListe.scss';
 </style>

package/src/components/VgListeCard.vue

@@ -37,5 +37,5 @@ defineProps({
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/custom/_vgCard.scss';
+@use '@/styles/custom/_vgCard.scss';
 </style>

package/src/styles/utility.scss

@@ -0,0 +1,2 @@
+@forward './vg/vg-colors';
+@forward './vg/mixins/vg-mediaquery-helpers';

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

@@ -155,6 +155,9 @@ $color-darkbg-disabled: #758a9f;
 $color-mint-green: #eeffe2;
 $color-grey-1: #4f4f4f;
 
+// Masterbrand colors
+  $virksomhedsudvikling-danmark-color: #D2D0BB;
+
 /*  CSS variables used for site design which can be overridden on site level
     Remember to override in siteDesign.service.ts. Only variables added to
     /api/content/sites/, for component specific colors, should be added here. */

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

@@ -1,3 +1,6 @@
+@use './../vg-colors' as *;
+@use './../mixins/vg-mediaquery-helpers' as *;
+
 .accordion-wrapper.ydelse {
   & > :last-child {
     margin-bottom: 32px;
@@ -109,3 +112,31 @@
     }
   }
 }
+
+.wide-accordion {
+  .accordion {
+    li {
+      margin-bottom: 0;
+      border-top: 1px solid $color-light-gray;
+
+      &:last-child {
+        border-bottom: 1px solid $color-light-gray;
+      }
+
+      .accordion-button {
+        padding: 16px 16px 16px 0;
+        background-color: transparent;
+      }
+
+      .accordion-content {
+        padding: 8px 16px 8px 0;
+      }
+    }
+  }
+
+  &.white-text {
+    button.accordion-bulk-button {
+      color: $color-white;
+    }
+  }
+}

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

@@ -1,3 +1,6 @@
+@use './../vg-colors' as *;
+@use './../mixins/vg-mediaquery-helpers' as *;
+
 .button {
   font-size: 16px;
   font-weight: 400 !important;
@@ -20,7 +23,7 @@
 
   &:disabled,
   &.disabled {
-    opacity: 0.3;
+    opacity: 0.6 !important;
     cursor: not-allowed;
   }
 
@@ -234,7 +237,7 @@
 
   &:disabled {
     text-decoration: none;
-    opacity: 0.3;
+    opacity: 0.6;
     cursor: not-allowed;
   }
 }

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

@@ -1,3 +1,6 @@
+@use './../vg-colors' as *;
+@use './../mixins/vg-mediaquery-helpers' as *;
+
 .padding-between-children > div:not(:last-child) {
   margin-bottom: 8px;
 }

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

@@ -1,3 +1,6 @@
+@use './../vg-colors' as *;
+@use './../mixins/vg-mediaquery-helpers' as *;
+
 .udvidet-cardgruppe {
   &.white-text {
     .udvidet-cardgruppe__titel {
@@ -31,7 +34,8 @@
         background-position: center;
         background-repeat: no-repeat;
         background-size: cover;
-        padding-top: 66.66%;
+        aspect-ratio: 3 / 2;
+        object-fit: cover;
         width: 100%;
 
         &.logo-picture {
@@ -102,20 +106,21 @@
 
         .card-picture {
           background-size: contain;
-          padding-top: 50%;
+          aspect-ratio: 2/1;
+          object-fit: contain;
         }
       }
 
       .udbyder-card {
         border: 1px solid $color-light-gray;
         border-bottom: none;
-        padding: 32px;
-        aspect-ratio: 3/2;
 
         .card-picture {
           background-size: contain;
-          padding-top: unset;
+          padding: 32px;
           height: 100%;
+          aspect-ratio: 3/2;
+          object-fit: contain;
         }
       }
 
@@ -182,6 +187,7 @@
         span {
           line-height: 1.5;
           vertical-align: middle;
+          word-break: break-word;
         }
 
         &.line-limit {
@@ -346,6 +352,40 @@
         }
       }
     }
+
+    .medarbejder-card {
+      margin-bottom: 0 !important;
+      padding-bottom: 24px;
+
+      @include media-breakpoint-up(sm) {
+        padding-bottom: 56px;
+
+        .udvidet-cardgruppe-card {
+          display: flex;
+          flex-direction: row;
+
+          .picture-container {
+            width: calc(50% - 16px);
+            height: 100%;
+
+            .card-picture {
+              width: 100%;
+              height: 100%;
+            }
+          }
+
+          .text-wrapper {
+            width: calc(50% - 16px);
+            height: auto;
+            margin-left: 32px;
+            border-top: none;
+            padding-top: 0;
+            padding-bottom: 0;
+            justify-content: normal;
+          }
+        }
+      }
+    }
   }
 }
 
@@ -457,3 +497,9 @@
     }
   }
 }
+
+.picture-container {
+  .card-picture {
+    display: block;
+  }
+}

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

@@ -1,3 +1,6 @@
+@use 'sass:map';
+@use 'sass:list';
+
 // Grid breakpoints.. copied directly from FDS
 $grid-xs: 0;
 $grid-sm: 576px;
@@ -28,9 +31,9 @@ $grid-breakpoints: (
 //    md
 //    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
 //    md
-@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
-  $n: index($breakpoint-names, $name);
-  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
+  $n: list.index($breakpoint-names, $name);
+  @return if($n < list.length($breakpoint-names), list.nth($breakpoint-names, $n + 1), null);
 }
 
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
@@ -38,7 +41,7 @@ $grid-breakpoints: (
 //    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    576px
 @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
-  $min: map-get($breakpoints, $name);
+  $min: map.get($breakpoints, $name);
   @return if($min != 0, $min, null);
 }
 
@@ -49,7 +52,14 @@ $grid-breakpoints: (
 //    767px
 @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
   $next: breakpoint-next($name, $breakpoints);
-  @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
+  @if $next {
+    @return breakpoint-min($next, $breakpoints) - 1px;
+  } @else {
+    // For det største breakpoint (xl), returner breakpoint værdien minus 1px
+    // Dette gør at media-breakpoint-down(xl) matcher skærme under 1200px
+    $current: map.get($breakpoints, $name);
+    @return if($current and $current > 0, $current - 1px, null);
+  }
 }
 
 // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
@@ -131,9 +141,6 @@ $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
@@ -145,7 +152,7 @@ $zoom-breakpoints: (
 );
 
 @mixin media-breakpoint-down-em($name, $breakpoints: $zoom-breakpoints) {
-  $max: map-get($breakpoints, $name);
+  $max: map.get($breakpoints, $name);
   @media all and (max-width: $max) {
     @content;
   }

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

@@ -1,3 +1,5 @@
+@use './../vg-colors' as *;
+
 .pagination {
   padding-top: 16px;
   padding-bottom: 16px;