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;
+    }
+  }
 }

gfi-ihk-2024/storybook-static/iframe.html

@@ -354,7 +354,7 @@
             window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":true};</script><script type="module">import './sb-preview/runtime.js';
 
       
-      import './runtime~main.c6612877.iframe.bundle.js';
+      import './runtime~main.554d1155.iframe.bundle.js';
       
       import './16.08016f04.iframe.bundle.js';
       

gfi-ihk-2024/storybook-static/project.json

@@ -1 +1 @@
-{"generatedAt":1769598518607,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"10.5.1"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/html-webpack5","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/html","storybookVersion":"7.0.21","storybookVersionSpecifier":"^7.0.21","language":"javascript","storybookPackages":{"@storybook/addon-actions":{"version":"7.6.17"},"@storybook/html":{"version":"7.0.21"},"@storybook/html-webpack5":{"version":"7.0.21"},"storybook":{"version":"7.6.17"}},"addons":{"@storybook/preset-scss":{"version":"1.0.3"},"@storybook/addon-links":{"version":"7.0.21"},"@storybook/addon-essentials":{"version":"7.6.17"},"@storybook/addon-controls":{"version":"7.6.17"}}}
+{"generatedAt":1770627058334,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"10.5.1"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/html-webpack5","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/html","storybookVersion":"7.0.21","storybookVersionSpecifier":"^7.0.21","language":"javascript","storybookPackages":{"@storybook/addon-actions":{"version":"7.6.17"},"@storybook/html":{"version":"7.0.21"},"@storybook/html-webpack5":{"version":"7.0.21"},"storybook":{"version":"7.6.17"}},"addons":{"@storybook/preset-scss":{"version":"1.0.3"},"@storybook/addon-links":{"version":"7.0.21"},"@storybook/addon-essentials":{"version":"7.6.17"},"@storybook/addon-controls":{"version":"7.6.17"}}}

gfi-ihk-2024/storybook-static/sections-card-slider-CardSlider-stories.75b8aec8.iframe.bundle.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunk_ihk24_storybook=self.webpackChunk_ihk24_storybook||[]).push([[3894],{"./stories/sections/card-slider/CardSlider.stories.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{CardSlider:()=>CardSlider,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("./node_modules/core-js/modules/es.error.cause.js"),__webpack_require__("./node_modules/core-js/modules/es.error.to-string.js");var _CardSliderComponent__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./stories/sections/card-slider/CardSliderComponent.js");function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}const __WEBPACK_DEFAULT_EXPORT__={title:"Sections/Card Slider",argTypes:{slides:{name:"Slides",control:{type:"object"},defaultValue:__webpack_require__("./stories/sections/card-slider/CardSliderData.js").Z}}};var CardSlider=function Template(_ref){var args=_extends({},(function _objectDestructuringEmpty(obj){if(null==obj)throw new TypeError("Cannot destructure "+obj)}(_ref),_ref));return(0,_CardSliderComponent__WEBPACK_IMPORTED_MODULE_4__.Q)(Object.assign({},args))}.bind({});CardSlider.args={};var __namedExportsOrder=["CardSlider"];CardSlider.parameters={...CardSlider.parameters,docs:{...CardSlider.parameters?.docs,source:{originalSource:"({\n  ...args\n}) => {\n  return createCardSlider({\n    ...args\n  });\n}",...CardSlider.parameters?.docs?.source}}}}}]);

gfi-ihk-2024/storybook-static/sections-card-slider-CardSlider-stories.defc7d89.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_ihk24_storybook=self.webpackChunk_ihk24_storybook||[]).push([[3894],{"./stories/sections/card-slider/CardSlider.stories.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{CardSlider:()=>CardSlider,CardSliderFullwidth:()=>CardSliderFullwidth,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("./node_modules/core-js/modules/es.error.cause.js"),__webpack_require__("./node_modules/core-js/modules/es.error.to-string.js");var _CardSliderComponent__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./stories/sections/card-slider/CardSliderComponent.js");function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}const __WEBPACK_DEFAULT_EXPORT__={title:"Sections/Card Slider",argTypes:{slides:{name:"Slides",control:{type:"object"},defaultValue:__webpack_require__("./stories/sections/card-slider/CardSliderData.js").Z}}};var Template=function Template(_ref){var args=_extends({},(function _objectDestructuringEmpty(obj){if(null==obj)throw new TypeError("Cannot destructure "+obj)}(_ref),_ref));return(0,_CardSliderComponent__WEBPACK_IMPORTED_MODULE_4__.Q)(Object.assign({},args))},CardSlider=Template.bind({});CardSlider.args={};var CardSliderFullwidth=Template.bind({});CardSliderFullwidth.args={fullWidth:!0};var __namedExportsOrder=["CardSlider","CardSliderFullwidth"];CardSlider.parameters={...CardSlider.parameters,docs:{...CardSlider.parameters?.docs,source:{originalSource:"({\n  ...args\n}) => {\n  return createCardSlider({\n    ...args\n  });\n}",...CardSlider.parameters?.docs?.source}}},CardSliderFullwidth.parameters={...CardSliderFullwidth.parameters,docs:{...CardSliderFullwidth.parameters?.docs,source:{originalSource:"({\n  ...args\n}) => {\n  return createCardSlider({\n    ...args\n  });\n}",...CardSliderFullwidth.parameters?.docs?.source}}}}}]);