Verbesserung Miniteasers

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

@@ -11,8 +11,8 @@ export default {
     type: {
       name: 'Typ',
       control: {type: 'select'},
-      options: ['single-topic'],
-      defaultValue: 'single-topic',
+      options: ['standard', 'infobanner'],
+      defaultValue: 'standard',
     },
     title: {
       name: 'Titel',
@@ -37,5 +37,8 @@ const MiniTeaser = ({...args}) => {
   return createMiniTeaser({...args});
 }
 
-export const SingleMiniTeaser = MiniTeaser.bind({});
-SingleMiniTeaser.args = {};
+export const StandardMiniTeaser = MiniTeaser.bind({});
+StandardMiniTeaser.args = {};
+
+export const infobanner = MiniTeaser.bind({});
+infobanner.args = {type:'infobanner'};

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

@@ -1,18 +1,21 @@
 import './miniteaser.scss';
 import {createElement} from "../../_global/scripts/helpers";
-
+import { createButton } from '../../atoms/button/ButtonComponent';
 export const createMiniTeaser = ({
-  type = 'single-topic',
+  type = 'standard',
   title = 'Hallo Welt',
   link = '#',
   icon = 'Eule Doktorhut',
+  buttonlabel = 'mehr erfahren',
 }) => {
-  const tile = createElement(type === 'single-topic' ? 'a' : 'div', ['tile', 'topic-teaser', 'mini-teaser', type], null);
+  const tile = createElement('div', ['tile', 'topic-teaser', 'mini-teaser', type === 'infobanner' ? 'infob' :'standard', type], null);
   tile.href = link;
   createElement('div', ['icon-box', 'pictogram-' + icon.toLowerCase().split(' ').join('-')], null, tile);
   const textBox = createElement('div', ['text-box'], null, tile);
   createElement('h4', ['title'], title, textBox);
-
+  if (type === 'infobanner') {
+    textBox.appendChild(createButton({color: 'white', label: buttonlabel, iconPosition: 'icon-right', icon: null}))
+  }
 
   return tile;
 }