ihk24/storybook/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?',
     text = 'Sie können mitbestimmen, wer Sie und Ihre die Interessen Ihres Unternehmens vertritt.',
     image = './dummy/why-elect.jpg',
     link = '',
     linkname = 'Mehr erfahren',
  }) => {
    const div = createElement('div', ['image-text', colored, switched], null);
    const div2 = createElement('div', ['image-text--image'], null, div);
    const div3 = createElement('div', ['image-text--text'], null, div);
    createImage(image, 400, 400, '', [], div2);
    createElement('h2', [], headline, div3);
    createElement('p', [], text, div3);
    const ul = createElement('ul', [], null, div3);
    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);
      }
    });
    const a = createElement('a', ['btn', 'secondary', 'has-icon', 'icon-small-arrow-right-simple'], linkname, div3);
    a.href = link;
    return div;
  }