@asd20/ui 3.2.585 → 3.2.587

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.585",
+  "version": "3.2.587",
   "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 ? 'add-fade' : headerImageUrl ? 'new-header' : ''"
         :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)
+      left center / cover no-repeat;
+  }
   .add-fade {
     &::before {
       content: '';

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

@@ -409,28 +409,28 @@ export default {
   }
   .new-header {
     background: var(--website-header__background-color) var(--imageBackground)
-      50% 50% / cover no-repeat;
-  }
-  .add-fade {
-    &::before {
-      content: '';
-      // height: auto;
-      display: block;
-      position: absolute;
-      z-index: -1;
-      top: 0;
-      bottom: auto;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: linear-gradient(
-        30deg,
-        rgba(6, 11, 31, 0.7) 10%,
-        rgba(6, 11, 31, 0.5) 55%,
-        transparent 70%
-      );
-    }
+      left center / cover no-repeat;
   }
+  // .add-fade {
+  //   &::before {
+  //     content: '';
+  //     // height: auto;
+  //     display: block;
+  //     position: absolute;
+  //     z-index: -1;
+  //     top: 0;
+  //     bottom: auto;
+  //     left: 0;
+  //     width: 100%;
+  //     height: 100%;
+  //     background: linear-gradient(
+  //       30deg,
+  //       rgba(6, 11, 31, 0.7) 10%,
+  //       rgba(6, 11, 31, 0.5) 55%,
+  //       transparent 70%
+  //     );
+  //   }
+  // }
 
   h1 {
     position: relative;

package/src/data/page-queries/landing-page-query-result.json

@@ -186,7 +186,7 @@
                   },
                   {
                     "name": "full",
-                    "filename": "PES Accredidation Hero_1280x711_2023-08-29T21_16_58.jpg",
+                    "filename": "headerimagePES Accredidation Hero_1280x711_2023-08-29T21_16_58.jpg",
                     "url": "https://asd20websitestorage.blob.core.windows.net/website-files/message-images/accredited-with-distinction/full/PES Accredidation Hero_1280x711_2023-08-29T21_16_58.jpg"
                   }
                 ],

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 || ''