ihk24/storybook/stories/components/magazine-article/MagazineArticleComponent.js

import './magazine-article.scss';
import {createElement, createImage} from "../../_global/scripts/helpers";
import {lorem1, lorem2} from "../../_global/scripts/lorem";
import {createGallery} from "../gallery/GalleryComponent";
import {createAnchorLinks} from "../anchor-links/AnchorLinksComponent";
import {createBlockquote} from "../../atoms/blockquote/BlockquoteComponent";
import {createContact} from "../contact/ContactComponent";
import {createPrintShare} from "../print-share/PrintShareComponent";
import {createInfobox} from "../infobox/InfoboxComponent";

export const createMagazineArticle = ({
  addArticleComponents = true,
  kicker = 'Titelthema',
  headline = '5 Beispiele, wie sich Unternehmen für ihr Umfeld engagieren',
}) => {
  const article = createElement('article', ['col', 'magazine-article']);

  if (addArticleComponents) {
    createElement('p', ['kicker'], kicker, article);
    createElement('h1', [], headline, article);
    article.appendChild(createAnchorLinks({titles: ['Lorem ipsum dolor sit', 'Consectetur adipisicing elit']}))
    const richText = createElement('div', ['richtext'], null, article);
    createElement('p', ['initial'], lorem1, richText);
    createElement('p', [], lorem2, richText);
    createElement('h2', [], 'Lorem ipsum dolor sit', richText);
    createElement('p', [], lorem1, richText);
    article.appendChild(createGallery({galleryType: 'masonry'}));
    article.appendChild(createInfobox({content: lorem2}));
    const imageBox = createElement('figure', ['image-box', 'off-grid'], null, article);
    createImage('https://source.unsplash.com/TamMbr4okv4/420x280', 420, 280, 'Image off grid', [], imageBox);
    createElement('figcaption', [], 'Bildunterschrift lorem ipsum dolor sit amet ipsum', imageBox);
    createElement('p', [], lorem2 + ' ' + lorem1 + ' ' + lorem2, article);
    createElement('p', [], lorem2, article);
    createElement('h2', [], 'Consectetur adipisicing elit', article);
    createElement('p', [], lorem2, article);
    article.appendChild(createBlockquote({}));
    article.appendChild(createContact({}));
    article.appendChild(createPrintShare({}));
  }

  return article;
}