ihk24/storybook/stories/sections/feature/FeatureComponent.js

import './feature.scss';
import {createElement} from "../../_global/scripts/helpers";
import {createLinkList} from "../../components/linklist/LinkListComponent";

export const createFeature = ({
  kicker = 'IHK Musterstadt',
  headline = 'Ihre IHK – Ihre Vorteile',
  copy = 'Wir beraten und helfen Ihnen als gewerbetreibendes Unternehmen zum Beispiel bei folgenden Themen:',
  links = [
    {
      title: 'Wahrnehmung Ihrer Interessen',
      link: '#',
    },
    {
      title: 'Fördermöglichkeiten',
      link: '#',
    },
    {
      title: 'Durchführung von Prüfungen',
      link: '#',
    },
    {
      title: 'Beratung zu Themen der Außenwirtschaft',
      link: '#',
    },
    {
      title: 'Beratungen bei Existenzgründung',
      link: '#',
    },
  ],
  icon = 'Eule Doktorhut',
}) => {
  const section = createElement('section', ['feature'], null);
  const container = createElement('div', ['container'], null, section);
  const row = createElement('div', ['row'], null, container);
  const textCol = createElement('div', ['col'], null, row);
  const iconCol = createElement('div', ['col'], null, row);
  const textBox = createElement('div', ['text-box'], null, textCol);

  createElement('span', ['kicker'], kicker, textBox);
  createElement('h2', [], headline, textBox);
  createElement('p', [], copy, textBox);
  const linkList = createLinkList({links: links});
  textBox.appendChild(linkList);

  if (icon && icon.length > 0) {
    createElement('div', ['icon-box', 'pictogram-' + icon.toLowerCase().split(' ').join('-')], null, iconCol);
  }

  return section;
}