Infobanner jetzt Stories ohne Icon und mit BgImage

gfi-ihk-2024/stories/components/mini-teaser/MiniTeaser.stories.js

@@ -42,3 +42,9 @@ StandardMiniTeaser.args = {};
 
 export const infobanner = MiniTeaser.bind({});
 infobanner.args = {type:'infoteaser'};
+
+export const infobannerWithoutIcon = MiniTeaser.bind({});
+infobannerWithoutIcon.args = {type:'infoteaser', icon: null};
+
+export const infobannerBackground = MiniTeaser.bind({});
+infobannerBackground.args = {type:'infoteaser', backgroundImage: 'https://source.unsplash.com/2vCqH34PqWs/1080x648'};

gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js

@@ -8,6 +8,7 @@ export const createMiniTeaser = ({
   link = '#',
   icon = 'Roboter',
   buttonlabel = 'IHK-Newsletter sichern',
+  backgroundImage = null,
 }) => {
   
   if (type === 'standard') {
@@ -19,13 +20,20 @@ export const createMiniTeaser = ({
     return tile;
   }else{
     const tile = createElement('div', ['tile',  'mini-teaser', type], null);
+    if (backgroundImage && backgroundImage.length > 0) {
+      tile.style = 'background-image: url(' + backgroundImage + ');';
+      tile.classList.add('background-image');
+    }
     const textBox = createElement('div', ['text-box'], null, tile);
-    createElement('div', ['icon-box', 'pictogram-' + icon.toLowerCase().split(' ').join('-')], null, textBox);
-    createElement('h4', ['title'], title, textBox);
-    textBox.appendChild(createButton({color: 'white', label: buttonlabel,link: link, iconPosition: 'icon-right', icon: null}))
+    if (icon && icon.length > 0) {
+      createElement('div', ['icon-box', 'pictogram-' + icon.toLowerCase().split(' ').join('-')], null, textBox);
+      createElement('h4', ['title'], title, textBox);
+      textBox.appendChild(createButton({color: 'white', label: buttonlabel,link: link, iconPosition: 'icon-right', icon: null}))
+    }else{
+      createElement('h4', ['title', 'noicon'], title, textBox);
+      textBox.appendChild(createButton({color: 'white', label: buttonlabel,link: link, iconPosition: 'icon-right', icon: null}))
+    }
+    
     return tile;
   }
-  
-
-  
 }

gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss

@@ -35,8 +35,12 @@
   h4{
     font-size: 22px;
   }
+  .text-box{
+    position: relative;
+  }
   &.infoteaser{
     background: linear-gradient(161deg, rgba(var(--theme-color-primary-rgb), 1) 0%, rgba(var(--theme-color-primary-rgb), 0.2) 100%);
+    position: relative;
     &:after{
       content:"";
       position:absolute;
@@ -47,6 +51,26 @@
       z-index:-1;
       background: linear-gradient(161deg, var(--theme-color-gradient-01) 40%, var(--theme-color-gradient-02) 80%, var(--theme-color-gradient-03) 120%);
     }
+    &.background-image{
+      background-size:cover;
+      &:after{
+        position:absolute;
+        top:0;
+        left:0;
+        bottom:0;
+        right:0;
+        z-index: 0;
+        content:"";
+        opacity: 0.6;
+        background: linear-gradient(87deg, #036 12.55%, rgba(1, 40, 81, 0.86) 56.52%, rgba(0, 51, 102, 0.00) 94.05%);
+        background-blend-mode: overlay;
+        
+      }
+      .text-box{
+        position: relative;
+        z-index: 1;
+      }
+    }
     .title, .category, .btn{
       color:white;
     }
@@ -57,6 +81,14 @@
       text-align: left;
       line-height: 24px;
       margin-bottom: 19px;
+      width: 100%;
+      &.noicon{
+        padding-left: 0;
+        min-height: 0;
+        + .btn{
+          margin-left: 0;
+        }
+      }
     }
     .btn{
       background-color: transparent;
@@ -69,14 +101,18 @@
       --button-padding: 8px 10px;
       min-height: 0;
       font-size: 22px;
+      &:after{
+        border-radius:16px;
+      }
     }
     .icon-box{
       margin-bottom: 19px;
       margin-top: 0;
       padding-top: 0;
       position: absolute;
-      top: 16px;
-      left: 12px;
+      top: 0;
+      left: 0;
+      
     }
     .text-box{
       padding: 0;