@asd20/ui 3.2.585 → 3.2.586

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.585",
+  "version": "3.2.586",
   "private": false,
   "license": "MIT",
   "repository": {

package/src/components/organisms/Asd20ImageHeader/index.vue

@@ -17,7 +17,7 @@
     <div class="asd20-page-header__main">
       <div
         class="asd20-page-header__content"
-        :class="imageUrl ? 'add-fade' : ''"
+        :class="imageUrl || headerImageUrl ? 'new-header add-fade' : ''"
         :style="styles"
       >
         <div class="asd20-page-header__tools">
@@ -164,6 +164,7 @@ export default {
     lead: { type: String, default: '' },
     callsToAction: { type: Array, default: () => [] },
     imageUrl: { type: String, default: '' },
+    headerImageUrl: { type: String, default: '' },
     imageCaption: { type: String, default: '' },
     fullscreen: { type: Boolean, default: false },
     detailLink: { type: String, default: '' },
@@ -202,8 +203,14 @@ export default {
       )
     },
     styles() {
-      return {
-        '--imageBackground': `url('${this.imageUrl}')`,
+      if (this.headerImageUrl) {
+        return {
+          '--imageBackground': `url('${this.headerImageUrl}')`,
+        }
+      } else {
+        return {
+          '--imageBackground': `url('${this.imageUrl}')`,
+        }
       }
     },
   },
@@ -342,8 +349,10 @@ export default {
     position: relative;
     color: var(--website-header__foreground-color);
     padding: space(1.5) space(1) space(3) space(1);
-    background: var(--website-header__background-color) var(--imageBackground)
-      50% 50% / cover no-repeat;
+    background: var(--website-header__background-color)
+      var(--website-header__background-style);
+    // background: var(--website-header__background-color) var(--imageBackground)
+    //   50% 50% / cover no-repeat;
     &::v-deep .asd20-breadcrumb {
       margin: space(1) 0 0 0;
     }
@@ -351,6 +360,10 @@ export default {
       max-width: 100%;
     }
   }
+  .new-header {
+    background: var(--website-header__background-color) var(--imageBackground)
+      50% 50% / cover no-repeat;
+  }
   .add-fade {
     &::before {
       content: '';

package/src/mixins/pageTemplateMixin.js

@@ -206,7 +206,7 @@ export default {
         const coverImageFiles = coverImage.files || []
         const coverImageFull = coverImageFiles.find(f => f.name === 'full')
         if (coverImageFull && coverImageFull.filename.includes('headerimage')) {
-          imageUrl = ''
+          imageUrl = null
           headerImageUrl = coverImageFull ? coverImageFull.url : coverImage.url || ''
         } else {
           imageUrl = coverImageFull ? coverImageFull.url : coverImage.url || ''