@erst-vg/vg-design-wrapper 1.0.7 → 1.0.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@erst-vg/vg-design-wrapper",
   "private": false,
-  "version": "1.0.7",
+  "version": "1.0.9",
   "type": "module",
   "repository": {
     "type": "git",
@@ -17,7 +17,8 @@
     "dist",
     "src/assets",
     "src/styles",
-    "src/components"
+    "src/components",
+    "CHANGELOG.md"
   ],
   "main": "./dist/vg-design-wrapper.umd.cjs",
   "module": "./dist/vg-design-wrapper.js",
@@ -45,7 +46,7 @@
     "@types/node": "^22.5.3",
     "dkfds": "npm:@erst-vg/dkfds-vite@8.0.1",
     "lodash": "4.17.21",
-    "sass": "^1.62.1",
+    "sass": "1.78.0",
     "vue": "^3.3.0",
     "vue-inline-svg": "3.1.2"
   },

package/src/components/VgCard.vue

@@ -1,14 +1,13 @@
 <template>
   <div class="udvidet-card-container">
     <a
-      role="button"
-      tabindex="0"
+      :href="link.href"
+      :target="link.external ? '_blank' : undefined"
+      :title="link.title"
       class="udvidet-cardgruppe-card udvidet-card"
-      :class="{ 'udvidet-card without-image': !billede?.url }"
-      :title="titel"
-      :aria-label="titel"
+      :class="{ 'without-image': !billede?.url }"
     >
-      <div class="picture-container">
+      <div v-if="showBilleder" class="picture-container">
         <div class="picture-wrapper">
           <div
             v-if="billede?.url"
@@ -30,7 +29,7 @@
               <p class="h6 m-0 show-spaces break-word" data-testid="label">{{ label }}</p>
             </div>
             <div class="card-titel">
-              <h3 class="h4 mt-0 mb-3 break-word" data-testid="header">{{ header }}</h3>
+              <h3 class="h4 mt-0 mb-3 break-word" data-testid="overskrift">{{ overskrift }}</h3>
             </div>
             <pre class="mt-0 mb-3 break-word">
               <slot name="text"/>
@@ -41,15 +40,16 @@
           <div class="fremhaevet-link" :class="{ 'line-limit': true }" data-testid="link">
             <span class="mr-3" data-testid="link-text">{{ linkText }}</span>
             <VgIcon
-              :icon="external ? 'openInNew' : 'highlightArrow'"
+              :icon="link.external ? 'openInNew' : 'highlightArrow'"
               :class="{
-                'external-link-icon': external,
+                'external-link-icon': link.external,
                 'link-icon': true
               }"
             />
           </div>
-        </div></div
-    ></a>
+        </div>
+      </div>
+    </a>
   </div>
 </template>
 
@@ -57,14 +57,6 @@
 import VgIcon from '@/components/VgIcon.vue';
 import { PropType } from 'vue';
 defineProps({
-  titel: {
-    type: String,
-    required: true
-  },
-  header: {
-    type: String,
-    required: true
-  },
   billede: {
     type: Object as PropType<{
       url: string;
@@ -72,17 +64,29 @@ defineProps({
     }>,
     default: undefined
   },
+  showBilleder: {
+    type: Boolean,
+    default: true
+  },
   label: {
     type: String,
     default: undefined
   },
+  overskrift: {
+    type: String,
+    required: true
+  },
   linkText: {
     type: String,
     default: undefined
   },
-  external: {
-    type: Boolean,
-    defalut: false
+  link: {
+    type: Object as PropType<{
+      href: string;
+      title: string;
+      external: boolean;
+    }>,
+    required: true
   }
 });
 </script>

package/src/styles/custom/_vgAccordion.scss

@@ -11,6 +11,17 @@
       }
     }
   }
+
+  .top-wrapper {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      max-width: 100%;
+    }
+  }
 }
 
 .accordion-bulk-button {

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

@@ -178,11 +178,12 @@ $color-grey-1: #4f4f4f;
   // Call to action colors
   --button-color: #{$color-white};
   --button-bg-color: #{$primary-color};
-  --button-hover-bg-color: #{$primary-dark};
-  --button-active-bg-color: #{$primary-darker};
+  --button-hover-bg-color: hsl(from var(--button-bg-color) h s calc(l - 10));
+  --button-active-bg-color: hsl(from var(--button-bg-color) h s calc(l - 20));
 
   // Link colors
   --link-color: #{$color-link};
+  --link-color-hover: #{$color-link};
   --link-color-visited: #{$color-darkPurple};
 
   // Faktaboks colors

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

@@ -48,10 +48,12 @@
 
   &:hover {
     background-color: var(--button-hover-bg-color) !important;
+    border-color: var(--button-hover-bg-color) !important;
   }
 
   &:active {
     background-color: var(--button-active-bg-color) !important;
+    border-color: var(--button-active-bg-color) !important;
   }
 
   &.warning {
@@ -213,6 +215,10 @@
     opacity: 0.3;
     cursor: not-allowed;
   }
+
+  &:focus {
+    color: $font-color;
+  }
 }
 
 .button-link {