ihk24/gfi-ihk-2024/stories/sections/quick-facts/QuickFactsComponent.js

import '../slider/slider.scss';
import './quick-facts.scss';
import $ from 'jquery';
import {QuickFactsData} from "./QuickFactsData";
import {createElement, formatNumber} from "../../_global/scripts/helpers";
import IHKQuickFacts from "./quick-facts";

export const createQuickFacts = ({
  headline = 'Quick Facts',
  facts = QuickFactsData,
}) => {
  const section = createElement('section', ['quick-facts']);
  const container = createElement('div', ['container'], null, section);
  if (headline && headline.length > 0) {
    createElement('h2', [], headline, container);
  }

  const slider = createElement('div', ['slider'], null, container);
  facts.map((fact) => {
    const slide = createElement('div', ['slide'], null, slider);
    if (fact.counter) {
      const p = createElement('p', [], null, slide);
      const targetValue = formatNumber(fact.counter.to, fact.counter.decimals);
      const counter = createElement('span', ['counter'], targetValue, p);
      counter.dataset.from = fact.counter.from;
      counter.dataset.to = fact.counter.to;
      counter.dataset.duration = fact.counter.duration;
      counter.dataset.decimals = fact.counter.decimals;
      createElement('span', ['fact-label'], fact.label, p);
    } else {
      createElement('p', ['like-h4'], fact.label, slide);
    }
  })

  new IHKQuickFacts($(section));

  return section;
}