ihk24/gfi-ihk-2024/stories/sections/superlist/SuperlistComponent.js

import './superlist.scss';
import $ from 'jquery';
import {createElement} from "../../_global/scripts/helpers";
import {createButton} from "../../atoms/button/ButtonComponent";
import {createSuperlistEntrySection} from "../../components/superlist-entry/SuperlistEntryComponent";

export const createSuperlistSection = ({
    kicker = 'Im Jahr 2025',
    headline = 'Fünf Schritte für eine zukunftsfähige Energiepolitik',
    paragraph = 'Fünf Schritte für eine zukunftsfähige Energiepolitik',
    centered = false,
}) => {
    const section = createElement('section', centered ? ['superlist', 'centered'] : ['superlist']);
    const container = createElement('div', ['list-container'], null, section);
    createElement('p', ['kicker'], kicker, container);
    createElement('h2', [], headline, container);
    createElement('p', [], paragraph, container);
    const superlistlist = createElement('div', ['superlist--list'], null, container);
    superlistlist.appendChild(createSuperlistEntrySection({icon: 'pictogram-videocall-b'}));
    superlistlist.appendChild(createSuperlistEntrySection({icon: 'pictogram-weltkugel'}));
    superlistlist.appendChild(createSuperlistEntrySection({
        inverted: true,
        icon: 'pictogram-solaranlage-a'
    }));
    const btnContainer = createElement('div', ['button-container'], null, container);
    btnContainer.appendChild(createButton({
        color: 'secondary',
        label: 'Mehr zum Thema',
        iconPosition: 'icon-right',
        icon: 'pfeil-simple-rechts',
    }))

    return section;
}