ihk24/storybook/stories/sections/survey/SurveyComponent.js

import './survey.scss';
import $ from 'jquery';
import {createElement} from "../../_global/scripts/helpers";
import {SurveyComplex, SurveySimple} from "./SurveyData";
import {createButton} from "../../atoms/button/ButtonComponent";
import IHKSurvey from "./survey";

export const createSurvey = ({
  kicker = 'Schnellumfrage',
  headline = 'Einführung von 2G im Einzelhandel: Was halten Sie davon?',
  copy = 'Hier können Sie abstimmen:',
  method = 'get',
  data = SurveySimple,
}) => {
  const section = createElement('section', ['participation']);
  const container = createElement('div', ['container'], null, section);
  const survey = createElement('div', ['vot-teaser', 'survey'], null, container);

  const textBox = createElement('div', ['text-box'], null, survey);
  createElement('p', ['kicker'], kicker, textBox);
  createElement('h3', [], headline, textBox);
  createElement('p', [], copy, textBox);

  const formBox = createElement('div', ['form-box'], null, survey);
  const form = createElement('form', ['vot-form'], null, formBox);
  form.id = 'voting-form';
  form.action = './html/survey-simple.html';
  form.dataset.showResultUrl = './html/survey-simple.html';
  form.dataset.showResult = 'false';
  form.method = method;

  data.map((group) => {
    const fieldset = createElement('fieldset', [], null, form);
    if (group.legend) {
      createElement('legend', [], group.legend, fieldset);
    }
    const choicesWrapper = createElement('div', ['choices-wrapper'], null, fieldset);
    const choicesList = createElement('ul', ['choices'], null, choicesWrapper);
    group.options.map((option, index) => {
      const id = group.name + '-' + index;
      const li = createElement('li', ['choice'], null, choicesList);
      const input = createElement('input', [], null, li);
      const label = createButton({
        elementType: 'label',
        color: 'secondary-light',
        label: option,
        size: 'medium',
      })
      li.appendChild(label);
      input.name = group.name;
      input.id = id;
      input.type = 'radio';
      input.value = option;
      label.setAttribute('for', id);
    })
  })

  new IHKSurvey($(survey));

  return section;
}