ihk24/gfi-ihk-2024/stories/components/infobox/InfoboxComponent.js

import './infobox.scss';
import {createElement, createImage} from "../../_global/scripts/helpers";
import {createButton} from "../../atoms/button/ButtonComponent";
import {createBlockquote} from "../../atoms/blockquote/BlockquoteComponent";

export const createInfobox =
    ({
         type = 'regular',
         full = false,
         kicker = 'Dachzeile',
         headline = 'Dies ist eine Zwischenheadline mit der Maximalbefüllung von 80 Zeichen.',
         icon = 'pictogram-tl_dr',
         text = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
         ul = 'List Styles werden über externe Klasse Richtext geladen',
         ol = 'Lorem ipsum dolor sit',
     }) => {
        const variantMap = {
            'secondary': 'variant-subtle-primary',
        };
        const variant = variantMap[type] ?? 'variant-subtle-secondary';
        const infobox = createElement('div', ['infobox', type, variant]);
        const content = createElement('div', ['infobox--content'], null, infobox);

        if (full === true) {
            createElement('p', ['kicker'], kicker, content);
            createElement('div', ['like-h2'], headline, content);
        }
        createElement('p', [], text, content);
        if (full === true) {
            const ulEl = createElement('ul', [], null, content);
            createElement('li', [], ul, ulEl);
            const olEl = createElement('ol', [], null, content);
            createElement('li', [], ol, olEl);

            content.appendChild(createBlockquote({
                author: ''
            }));

            let button;
            if (type === 'secondary') {
                 button = createButton({
                    color: 'primary', label: 'Label'
                });
            } else {
                 button = createButton({
                    color: 'secondary', label: 'Label'
                });
            }
            content.appendChild(button);

            createElement('div', ['icon-box', icon], null, infobox);
        }


        return infobox;
    }