ihk24/storybook/stories/atoms/event-teaser/EventTeaserComponent.js

import './event-teaser.scss';
import {createElement} from "../../_global/scripts/helpers";
import {EventTeaserData, EventTeaserStatus, EventTeaserTitles, SearchResultEventTeaserData} from "./EventTeaserData";

export const createEventTeaser = ({
  event = EventTeaserData,
  isExtended = false,
}) => {
  const a = createElement('a', ['event-teaser']);
  const dateBox = createElement('div', ['date-box'], null, a);
  const textBox = createElement('div', ['text-box', 'date-wrapper'], null, a);

  if (isExtended) {
    event = SearchResultEventTeaserData;
    event.title = EventTeaserTitles[Math.floor(Math.random() * EventTeaserTitles.length)];
    event.details.status = EventTeaserStatus[Math.floor(Math.random() * EventTeaserStatus.length)];
  }

  if (event.date) {
    createElement('span', ['weekday'], event.date.weekday, dateBox);
    createElement('span', ['day'], event.date.day, dateBox);
    createElement('span', ['month'], event.date.month, dateBox);
  } else {
    dateBox.classList.add('no-date');
  }

  createElement('p', ['ev-title'], event.title, textBox);

  if (event.details) {
    for (const [key, value] of Object.entries(event.details)) {
      if (typeof value === 'string') {
        createElement('div', [key], value, textBox);
      } else if (typeof value === 'object') {
        createElement('div', [key, value.type], value.label, textBox);
      }
    }
  }

  a.href = event.link;

  return a;
}