card slider and teaser with linklist

gfi-ihk-2024/stories/components/teaser/TeaserComponent.js

@@ -83,10 +83,14 @@ export const createTeaser = ({
   }
 
   const textBox = createElement('div', ['text-box'], '', teaser);
-  createElement('div', ['title','like-h4'], headline, textBox);
+
   if (linklistData) {
+    // Mit Linkliste: KEINE "title" Klasse, KEIN Link in Headline
+    createElement('div', ['like-h4'], headline, textBox);
     textBox.appendChild(createLinkList({links: linklistData}));
   } else {
+    // Ohne Linkliste: normale Variante MIT "title" Klasse
+    createElement('div', ['title','like-h4'], headline, textBox);
     createElement('p', [], copy, textBox);
   }
 
@@ -98,12 +102,15 @@ export const createTeaser = ({
     teaser.dataset.imageSize = imageSize;
   }
 
-  const teaserLink = createElement('a', ['teaser--link', type], '', teaser);
-  teaserLink.href = link;
-  teaserLink.setAttribute('aria-label', 'Beschreibender Link-Text');
+// teaserLink nur OHNE linklistData
+  if (!linklistData) {
+    const teaserLink = createElement('a', ['teaser--link', type], '', teaser);
+    teaserLink.href = link;
+    teaserLink.setAttribute('aria-label', 'Beschreibender Link-Text');
 
-  if (linkType) {
-    teaserLink.classList.add(linkType);
+    if (linkType) {
+      teaserLink.classList.add(linkType);
+    }
   }
 
   return teaser;

gfi-ihk-2024/stories/sections/card-slider/CardSlider.stories.js

@@ -20,3 +20,8 @@ const Template = ({...args}) => {
 
 export const CardSlider = Template.bind({});
 CardSlider.args = {};
+
+export const CardSliderFullwidth = Template.bind({});
+CardSliderFullwidth.args = {
+    fullWidth: true
+};

gfi-ihk-2024/stories/sections/card-slider/CardSliderComponent.js

@@ -10,8 +10,13 @@ export const createCardSlider =
     ({
          slides = sliderData,
          headline = 'Auch interessant',
+         fullWidth = false,
      }) => {
         const cardSlider = createElement('section', ['card-slider'], null);
+        if (fullWidth) {
+            cardSlider.classList.add('fullwidth');
+        }
+
         const cardSliderInner = createElement('div', ['card-slider-inner'], null, cardSlider);
 
         createElement('div', ['like-h2'], headline, cardSliderInner);

gfi-ihk-2024/stories/sections/card-slider/card-slider.scss

@@ -198,4 +198,16 @@
       }
     }
   }
+  &.fullwidth {
+    .card-slider-inner {
+      padding-left: 60px;
+      padding-right: 60px;
+    }
+    .card-slider-container {
+      max-width: none;
+    }
+    .like-h2 {
+      max-width: none;
+    }
+  }
 }