ihk24/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js

import './marketingheader.scss';
import '../../components/artwork/artwork.scss';
import $ from 'jquery';
import {createElement, createImage} from "../../_global/scripts/helpers";
import {marketingHeaderData} from "./MarketingHeaderData";
import {createArtwork} from "../../components/artwork/ArtworkComponent";
import {createSearchInput} from "../../atoms/search-input/SearchInputComponent";
import {createSearchButton} from "../../atoms/search-button/SearchButtonComponent";
import IHKSearchTypeahead from "./marketingheader-typeahead";
import {createProgressBar} from "../../atoms/progress-bar/ProgressBarComponent";
import {createButton} from "../../atoms/button/ButtonComponent";

export const createMarketingHeader =
  ({
    artworkStyle = 'artwork',
    headline1 = 'Willkommen bei Ihrer IHK.',
    headline2 = 'Wie können wir Ihnen helfen?',
    placeholder = 'Tippe "Taxischein" für Autocomplete',
    api = 'services/search/{SEARCHTERM}.json',
    tiles = marketingHeaderData,
    imageSrc = 'https://source.unsplash.com/2vCqH34PqWs/1080x648',
    kicker = 'Noch 7 Tage offen',
    headline = 'Jetzt und digital mitreden',
    copy = 'Mit der digitalen Beteiligung erhalten Mitgliedsunternehmen die Möglichkeit, sich einfach und schnell über laufende Verfahren und Abstimmungen zu informieren und sich aktiv daran zu beteiligen.',
    moreCta = {
      label: 'Mehr Infos',
      link: '#',
      target: '_self',
    },
    buttonCta = {
      label: 'Jetzt beteiligen',
      link: '#',
      target: '_self',
    },
    showProgress = true,
    progress = 60,
    backgroundImage = null,
    isFirstElement = false,
  }) => {
    const section = createElement('section', ['marketingheader'], null);
    const search = createElement('div', ['search'], null, section);
    const artwork = createArtwork({type: artworkStyle});
    search.appendChild(artwork);
    search.dataset.type = artworkStyle;

    const container = createElement('div', ['container', 'small'], null, search);
    const row = createElement('div', ['row'], null, container);
    const col = createElement('div', ['col'], null, row);

    createElement('h1', ['like-h2'], headline1 + '<br>' + headline2, col);

    const form = createElement('form', [], null, col);

    const label = createElement('label', ['visually-hidden'], 'IHK durchsuchen', form);
    label.for = 'search-term';

    form.appendChild(createSearchInput({api: api, placeholder: placeholder}));
    form.appendChild(createSearchButton({}));

    form.action = '#';

    const tilesContainer = createElement('div', ['tiles'], null, col);
    tiles.map((tile) => {
      const div = createElement('div', ['tile'], null, tilesContainer);
      const a = createElement('a', [], tile.title, div);
      a.href = tile.link;
    })

    if (api) {
      new IHKSearchTypeahead($(form).find('input.typeahead'));
    }

    const hasImage = imageSrc && imageSrc.length > 0;
    const stage = createElement('div', ['participation', 'participation-stage'], null, section);
    const container2 = createElement('div', ['container'], null, stage);
    const row2 = createElement('div', ['row'], null, container2);
    const col2 = createElement('div', ['col'], null, row2);
    const tb2 = createElement('div', ['text-box'], null, col2);
  
    if (backgroundImage && backgroundImage.length > 0) {
      //section.content('style=background: red;');
      stage.style = 'background-image: url(' + backgroundImage + ');';
      stage.classList.add('background-image');
    }
  
    if (isFirstElement) {
      stage.classList.add('first-element');
    }
  
    if (kicker && kicker.length > 0) {
      createElement('p', ['kicker'], kicker, tb2);
    }
    if (showProgress) {
      tb2.appendChild(createProgressBar({progress}));
    }
    createElement('h1', ['like-h2'], headline, tb2);
    createElement('p', [], copy, tb2);
    if (moreCta) {
      const more = createElement('a', [], moreCta.label, tb2);
      more.href = moreCta.link;
      more.target = moreCta.target;
    }
    if (buttonCta) {
      const button2 = createButton({
        elementType: 'a',
        link: buttonCta.link,
        color: 'white',
        label: buttonCta.label,
        iconPosition: 'icon-right',
        icon: 'small-arrow-right-simple',
      });
      tb2.appendChild(button2);
    }
  
    if (hasImage) {
      stage.classList.add('image-stage');
      const ib2 = createElement('div', ['image-box'], null, col2);
      createImage(imageSrc, 1080, 648, 'Beteiligung', [], ib2);
    }
    return section;   
  
  }