ihk24/gfi-ihk-2024/stories/sections/infobanner/InfoBannerComponent.js

import './infobanner.scss';
import {createElement, createImage} from "../../_global/scripts/helpers";
import {createButton} from "../../atoms/button/ButtonComponent";

export const createInfoBanner =
  ({
    kicker = 'Dachzeile des Infobanners',
    headline = 'Die Headline des Infobanners',
    copy = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
    buttonText = 'Call to action',
    link = '#',
    imageSrc = './dummy/placeholder-4-3.svg',
    imageSrcMobile = './dummy/placeholder-1-1.svg',
    isCommercial = true,
  }) => {
    const section = createElement('section', ['infobanner'], null);

    const container = createElement('div', ['container'], null, section);
    const banner = createElement('a', ['banner'], null, container);
    banner.setAttribute('aria-label', headline + ' - ' + kicker);

    if (imageSrc && imageSrcMobile && imageSrc.length > 0 && imageSrcMobile.length > 0) {
      const imageBox = createElement('div', ['image-box'], null, banner);
      const picture = createElement('picture', [], null, imageBox);
      const mobileSource = createElement('source', [], null, picture);
      createImage(imageSrc, 1340, 240, 'Infobanner Hintergrundbild', [], picture);
      mobileSource.srcset = imageSrcMobile;
      mobileSource.media = '(max-width: 567px)';
    }

    if (kicker.length > 0 || headline.length > 0 || copy.length > 0 || buttonText.length > 0) {
      const textWrapper = createElement('div', ['text-wrapper'], null, banner);
      const textBox = createElement('div', ['text-box'], null, textWrapper);
      if (kicker && kicker.length > 0) {
        createElement('span', ['kicker'], kicker, textBox);
      }
      if (headline && headline.length > 0) {
        createElement('h2', ['like-h2'], headline, textBox);
      }
      if (copy && copy.length > 0) {
        createElement('p', [], copy, textBox);
      }
      if (buttonText && buttonText.length > 0) {
        const buttonBox = createElement('div', ['button-box'], null, textWrapper);
        const btn = createButton({
          elementType: 'span',
          icon: 'pfeil-simple-rechts',
          color: 'white',
          label: buttonText,
          iconPosition: 'icon-right',

        })
        buttonBox.appendChild(btn);
      }
    }

    if (isCommercial) {
      createElement('span', ['is-commercial'], 'Werbung', banner);
    }

    banner.href = link;

    return section;
  }