ihk24/gfi-ihk-2024/stories/components/image-text/ImageTextComponent.js

import './image-text.scss';
import {createElement, createImage} from "../../_global/scripts/helpers";
import {imageTextData} from "./ImageTextData";

export const createImageText =
  ({
     colored = 'no-color',
     switched = 'normal',
     listItems: listItems = imageTextData,
     headline = 'Warum wählen?',
     smallheadline = false,
     text = 'Sie können mitbestimmen, wer Sie und Ihre die Interessen Ihres Unternehmens vertritt.',
     image = './dummy/why-elect.jpg',
     link = '#',
     linkname = 'Mehr erfahren',
     copyright = 'Copyright'
  }) => {
    const variantMap = {
        'colored': 'variant-subtle-primary',
    };
    const variant = variantMap[colored] ?? 'variant-base';
    const div = createElement('div', ['image-text', colored, switched, variant], null);
    const div2 = createElement('div', ['image-text--image'], null, div);
    const div3 = createElement('div', ['image-text--text'], null, div);
    createImage(image, 1280, 1280, '', [], div2);
    const copy = createElement('span', ['copyright'], copyright, div2);
    copy.setAttribute("aria-hidden", "true");
    createElement('span', ['sr-only'], copyright, div2);
    if (smallheadline){
    createElement('h3', [], headline, div3);
    }
    else{
      createElement('h2', [], headline, div3);
    }
    createElement('p', [], text, div3);
    const ul = createElement('ul', [], null, div3);
    if (listItems){
      listItems.map((item) => {
        const li = createElement('li', [], null, ul);
        if (item.headline && item.headline.length > 0) {
          createElement('h3', [], item.headline, li);
        }
        if (item.text && item.text.length > 0) {
          createElement('p', [], item.text, li);
        }
      });
    }
    if (link) {
      const a = createElement('a', ['btn', 'secondary', 'has-icon', 'icon-small-arrow-right-simple'], linkname, div3);
      a.href = link;
    }
    return div;
  }