ihk24/gfi-ihk-2024/stories/components/participation-teaser/ParticipationTeaserComponent.js

import './participation-teaser.scss';
import {createElement} from "../../_global/scripts/helpers";
import {createProgressBar} from "../../atoms/progress-bar/ProgressBarComponent";
import {createButton} from "../../atoms/button/ButtonComponent";

export const createParticipationTeaser = ({
  isListItem = false,
  variant = 'variant-base',
  kicker = 'Noch 6 Tage offen',
  progress = 65,
  headline = 'Ideen zur Stärkung der Innenstädte und Ortskerne',
  copy = 'Die Auswirkungen der Corona-Pandemie treffen die Innenstädte und Ortskerne. Wir sammeln Ideen, um den neuen Herausforderungen zu begegnen.',
  moreCta = {
    label: 'Mehr Infos',
    link: '#',
    target: '_self',
  },
  participateCta = {
    label: 'Jetzt beteiligen',
    link: '#',
    target: '_self',
  }
}) => {
  const classes = ['participation-teaser', 'tile'];
  if (variant) classes.push(variant);
  const teaser = createElement('div', classes);

  const tb = createElement('div', ['text-box'], null, teaser);
  const kickerSpan = createElement('p', ['kicker'], kicker, tb);
  const progressBar = createProgressBar({progress});
  tb.appendChild(progressBar);
  createElement('h3', ['like-h4'], headline, tb);
  createElement('p', [], copy, tb);

  if (isListItem) {
    tb.insertBefore(progressBar, kickerSpan);
  }

  const buttons = createElement('div', ['buttons'], null, teaser);
  if (moreCta) {
    buttons.appendChild(createButton({
      label: moreCta.label,
      link: moreCta.link,
      color: 'primary-light',
      size: 'small',
    }))
  }
  if (participateCta) {
    buttons.appendChild(createButton({
      label: participateCta.label,
      link: participateCta.link,
      size: 'small',
    }))
  }

  return teaser;
}