ihk24/storybook/stories/sections/election-result-list/ElectionResultListComponent.js

import './election-result-list.scss';
import {createElement} from "../../_global/scripts/helpers";
import {electionResultListData} from "./ElectionResultListData";
import {createElectionResultListItem} from "../../components/election-result-list-item/ElectionResultListItemComponent";
import {
    createElectionResultListBadge
} from "../../components/election-result-list-badge/ElectionResultListBadgeComponent";

export const createElectionResultList =
({
    listItems = electionResultListData,
}) => {

    const electionResultList = createElement('div', ['election-result-list']);
    const electionResultListHeader = createElement('div', ['election-result-list--header'], null, electionResultList);
    const electionResultListHeaderLeft = createElement('div', ['election-result-list--header-left'], null, electionResultListHeader);
    const electionResultListInner = createElement('div', ['election-result-list--inner'], null, electionResultList);

    electionResultListHeaderLeft.appendChild(createElectionResultListBadge({
        inverted: true,
        preLabel: 'Wahlgruppe 19',
        colon: true,
        label: 'Kreditinstitute / Versicherungen / Immobilienwirtschaft',
    }));
    electionResultListHeaderLeft.appendChild(createElectionResultListBadge({
        inverted: true,
        preLabel: 'Wahlbezirk 5',
        colon: true,
        label: 'Kreisfreie Musterstadt, Musterhausen',
    }));
    electionResultListHeader.appendChild(createElectionResultListBadge({}));

    listItems.map((items, index) => {
        const item = createElectionResultListItem({
            name: items.name
        });
        electionResultListInner.appendChild(item);
    });

    return electionResultList;
}