ihk24/storybook/stories/components/howto-list/HowToListComponent.js

import './howto-list.scss';
import {createElement, createImage} from "../../_global/scripts/helpers";
import {howToListData} from "./HowToListData";

export const createHowToList =
  ({
     listItems: listItems = howToListData,
     headline = 'Wie funktioniert’s?',
     text = 'Bestimmen Sie die wirtschaftliche Ausrichtung ihrer Region mit! Wählen Sie die nächste Vollversammlung ihrer IHK. Hier erfahren Sie ganz genau, wie sie mitmachen.',
  }) => {
    const div = createElement('div', ['howto-list'], null);
    const div2 = createElement('div', ['howto-list--left'], null, div);
    createElement('h2', [], headline, div2);
    createElement('p', [], text, div2);
    const ul = createElement('ul', [], null, div);
    listItems.map((item) => {
      const li = createElement('li', [], null, ul);
      const a = createElement('a', [], null, li);
      createImage(item.icon, 100, 100, '', [], a);
      createElement('h3', [], item.headline, a);
      createElement('p', [], item.text, a);
      createElement('span', [], item.more, a);
      a.href = item.link;
      if (item.copy && item.copy.length > 0) {
        createElement('p', [], item.copy, li);
      }
    })
    return div;
  }