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

import './miniteaser.scss';
import {createElement} from "../../_global/scripts/helpers";
import { createButton } from '../../atoms/button/ButtonComponent';
export const createMiniTeaser = ({
  type = 'standard',
  category = 'IHK Mitgliedschaft',
  title = 'Werden Sie Teil unseres Netzwerks!',
  link = '#',
  icon = 'Roboter',
  buttonlabel = 'IHK-Newsletter sichern',
  backgroundImage = null,
}) => {

  const variantMap = {
    'standard': 'variant-subtle-primary',
    'infoteaser': 'variant-solid',
  };
  const variant = variantMap[type] ?? '';
  if (type === 'standard') {
    const tile = createElement('div', ['tile',  'mini-teaser', type, variant], null);
    // tile.href = link;
    const textBox = createElement('div', ['text-box'], null, tile);
    createElement('div', ['category','like-h5'], category, textBox);
    createElement('div', ['title','like-h4'], title, textBox);
    const teaserLink = createElement('a', ['teaser--link'], '', tile);
    teaserLink.href = link;
    teaserLink.setAttribute('aria-label', 'Beschreibender Link-Text');
    return tile;
  } else {
    const tile = createElement('div', ['tile',  'mini-teaser', type, variant], null);
    // tile.href = link;
    if (backgroundImage && backgroundImage.length > 0) {
      tile.style = 'background-image: url(' + backgroundImage + ');';
      tile.classList.add('background-image');
    }
    const textBox = createElement('div', ['text-box'], null, tile);
    if (icon && icon.length > 0) {
      createElement('div', ['icon-box', 'pictogram-' + icon.toLowerCase().split(' ').join('-')], null, textBox);
      createElement('div', ['title','like-h4'], title, textBox);
      textBox.appendChild(createButton({elementType: 'span',color: 'white', label: buttonlabel,iconPosition: 'icon-right', icon: null, preventClick: false}))
    } else {
      createElement('div', ['title', 'noicon', 'like-h4'], title, textBox);
      textBox.appendChild(createButton({elementType: 'span',color: 'white', label: buttonlabel, iconPosition: 'icon-right', icon: null, preventClick: false}))
    }
    const teaserLink = createElement('a', ['teaser--link'], '', tile);
    teaserLink.href = link;
    teaserLink.setAttribute('aria-label', 'Beschreibender Link-Text');

    return tile;
  }
}