ihk24/gfi-ihk-2024/stories/components/magazine-header/MagazineHeaderComponent.js

import './magazine-header.scss';
import $ from "jquery";
import {createElement, createImage} from "../../_global/scripts/helpers";
import IHKMagazineHeader from "./magazine-header";

export const createMagazineHeader =
  ({
    size = 'regular',
    logo = './logos/wirtschaftsdialoge.svg',
    title = 'Wirtschaftsdialoge',
    imgtext = 'regular',
    smalltext = '',
    backgroundColor = '',
    inlineStyles = 'background: ' + backgroundColor + ';',
  }) => {
    const header = createElement('section', ['magazine-header', size], null, null);
    header.setAttribute('aria-label', 'Kopfbereich');
    createElement('span', ['gradient'], null, header, inlineStyles);
    if (logo && logo.length > 0 && smalltext.length > 0) {
        imgtext = 'image-and-text';
    }
    const a = createElement('a', ['title', imgtext], null, header);
    a.href = '#';
    a.tabIndex = -1;
    if (logo && logo.length > 0 && smalltext.length === 0) {
      createImage(logo, 400, 100, 'Wirtschaftsdialoge Logo', [], a);
    } else if (logo && logo.length > 0 && smalltext.length > 0) {
      createImage(logo, 100, 100, '', [], a);
      const div = createElement('div', ['text'], null, a);
      createElement('span', ['title-text'], title, div);
      createElement('span', ['small-text'], smalltext, div);
    } else {
      a.innerText = title;
    }

    new IHKMagazineHeader($(header));

    return header;
  }