ihk24/storybook/stories/sections/events/EventsComponent.js

import './events.scss';
import $ from 'jquery';
import {createElement} from "../../_global/scripts/helpers";
import {createButton} from "../../atoms/button/ButtonComponent";
import {EventsData} from "./EventsData";
import IHKEventsList from "./events";
import {createEventTeaser} from "../../atoms/event-teaser/EventTeaserComponent";
import {EventTeaserTitles} from "../../atoms/event-teaser/EventTeaserData";

export const createEventsSection = ({
  headline = 'Aktuelle Veranstaltungen',
  updateText = 'Updates zu dieser Liste per Mail abonnieren',
  allButtonLabel = 'Alle anzeigen',
  showItems = 5,
  scrollItems = 5,
  events = EventsData,
}) => {
  const section = createElement('section', ['events']);
  const container = createElement('div', ['container'], null, section);
  if (headline && headline.length > 0) {
    createElement('h2', [], headline, container);
  }

  const wrapper = createElement('div', ['events-wrapper'], null, container);
  const list = createElement('ul', ['events-list'], null, wrapper);
  list.dataset.pagination = 'true';
  list.dataset.items = showItems.toString();
  list.dataset.scroll = scrollItems.toString();

  events.map((event) => {
    event.title = EventTeaserTitles[Math.floor(Math.random() * EventTeaserTitles.length)];
    const li = createElement('li', [], null, list);
    li.appendChild(createEventTeaser({
      event: event,
    }))
  })

  const actions = createElement('div', ['events-actions'], null, container);
  const updateLink = createElement('a', ['mailupdate'], updateText, actions);
  const prevBtn = actions.appendChild(createButton({elementType: 'button', color: 'white', label: null, icon: 'pfeil-rechts', iconPosition: 'icon-inline'}));
  const nextBtn = actions.appendChild(createButton({elementType: 'button', color: 'white', label: null, icon: 'pfeil-rechts', iconPosition: 'icon-inline'}));
  actions.appendChild(createButton({elementType: 'a', color: 'white', label: allButtonLabel, icon: 'kalender', iconPosition: 'icon-right'}));

  updateLink.href = '#';

  prevBtn.classList.add('prev');
  nextBtn.classList.add('next');

  new IHKEventsList($(list));

  return section;
}