marketing header picto

gfi-ihk-2024/stories/sections/marketingheader/MarketingHeader.stories.js

@@ -52,6 +52,12 @@ MarketingHeader.args = {};
 export const MarketingHeaderSearchBackground = Template.bind({});
 MarketingHeaderSearchBackground.args = {backgroundImage: './dummy/placeholder-4-3.svg'};
 
+export const MarketingHeaderPictoBackground = Template.bind({});
+MarketingHeaderPictoBackground.args = {
+  pictoImage: './dummy/marketing-header-picto.svg',
+  pictoImageMobile: './dummy/marketing-header-picto-mobile.svg'
+};
+
 export const MarketingHeaderInfoBanner = Template.bind({});
 MarketingHeaderInfoBanner.args = {teasers : infoTeaserData};
 

gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js

@@ -36,6 +36,8 @@ export const createMarketingHeader =
     showProgress = true,
     progress = 60,
     backgroundImage = null,
+    pictoImage = null,
+    pictoImageMobile = null,
     isFirstElement = false,
     searchAllButton = false,
     slides = sliderData,
@@ -52,6 +54,17 @@ export const createMarketingHeader =
       search.style = 'background-image: url(' + backgroundImage + ');';
       search.classList.add('background-image');
     }
+    if (pictoImage && pictoImage.length > 0 && pictoImageMobile && pictoImageMobile.length > 0) {
+      search.classList.add('picto-image');
+      const styleElement = document.createElement('style');
+      styleElement.textContent = `
+        .picto-image {background-image: url("${pictoImage}");}
+        @media (max-width: 767px) {
+          .picto-image {background-image: url("${pictoImageMobile}");}
+        }
+      `;
+      search.parentNode.insertBefore(styleElement, search.nextSibling);
+    }
     const artwork = createArtwork({type: artworkStyle});
     search.appendChild(artwork);
     search.dataset.type = artworkStyle;

gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss

@@ -161,6 +161,10 @@ section.marketingheader{
       @media(max-width: 767px) {
         font-size: 18px;
         margin: 15px auto !important;
+        border-radius: 18px;
+      }
+      @media(max-width: 399px) {
+        max-width: 250px;
       }
     }
     + section, + #toclist > section:first-child {
@@ -177,6 +181,8 @@ section.marketingheader{
       @media(max-width: 767px) {
         font-size: 18px;
         height: 48px;
+        border-top-left-radius: 18px;
+        border-bottom-left-radius: 18px;
       }
       &::placeholder{
         color:var(--theme-color-primary) !important;
@@ -501,6 +507,17 @@ section.marketingheader{
         display:none;
       }
     }
+    &.picto-image {
+      background-position: 50% 0;
+      background-size: auto 100%;
+      background-repeat: repeat-x;
+      @media (max-width: 767px) {
+        background-size: auto 78px;
+      }
+      .artwork-wrapper{
+        display:none;
+      }
+    }
     .all-button-wrapper {
       display: block;
       padding-top: 10px;