ihk24/storybook/stories/components/teaser/TeaserComponent.js

import {createElement, createImage} from "../../_global/scripts/helpers";
import './teaser.scss';
import {createReadingTime} from "../../atoms/reading-time/ReadingTimeComponent";

export const createTeaser = ({
  type = 'regular',
  link = '#',
  imageSrc = 'https://api.unsplash.com/-uHVRvDr7pg/420x280',
  copyright = '@ shutterstock.com',
  kicker = 'Fachkräfte',
  headline = 'Anteil der Frauen im Bereich Engineering steigt',
  copy = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita, no sea takimata sanctus est.',
  showReadingTime = false,
  imageSize = 'large',
  chartTitle = 'Chart-Titel des Teasers',
  linkType = null,
}) => {
  const teaser = createElement('a', ['teaser', type]);
  teaser.href = link;

  if (linkType) {
    teaser.classList.add(linkType);
  }

  if (kicker && kicker.length > 0) {
    createElement('span', ['kicker'], kicker, teaser);
  }

  if (imageSrc && imageSrc.length > 0 && type !== 'text' && type !== 'chart') {
    let imageWidth, imageHeight;
    switch (type) {
      case 'hero':
        imageWidth = 630;
        imageHeight = 420;
        break;
      case 'fullwidth':
        if (imageSize === 'large') {
          imageWidth = 880;
          imageHeight = 484;
        } else if (imageSize === 'medium') {
          imageWidth = 650;
          imageHeight = 433;
        } else {
          imageWidth = 535;
          imageHeight = 535;
        }
        break;
      default:
        imageWidth = 420;
        imageHeight = 280;
    }

    const imageBox = createElement('div', ['image-box'], '', teaser);
    const src = imageSrc.replace('420', imageWidth).replace('280', imageHeight);
    createImage(src, imageWidth, imageHeight, 'Teaser-Bild', [], imageBox);

    if (copyright && copyright.length > 0) {
      createElement('span', ['copyright'], copyright, imageBox);
    }
  }
  else if ((type === 'chart' && chartTitle && chartTitle.length > 0) || ((!imageSrc || imageSrc.length === 0) && type !== 'text' && chartTitle && chartTitle.length > 0)) {
    const imageBox = createElement('div', ['image-box', 'chart'], null, teaser);
    createElement('span', ['chart-title'], chartTitle, imageBox);
  }

  const textBox = createElement('div', ['text-box'], '', teaser);
  createElement('h4', ['title'], headline, textBox);
  createElement('p', [], copy, textBox);

  if (showReadingTime) {
    const rt = createReadingTime({minutes: Math.floor(Math.random() * 10) + 2});
    teaser.appendChild(rt);
  }
  if (type === 'fullwidth') {
    teaser.dataset.imageSize = imageSize;
  }

  return teaser;
};