ihk24/storybook/stories/components/footer/FooterComponent.js

import './footer.scss';
import {createElement} from "../../_global/scripts/helpers";
import {createSocialIcons} from "../../atoms/social-icons/SocialIconsComponent";
import {socialIconsPlatforms} from "../../atoms/social-icons/SocialIconsData";
import {createButton} from "../../atoms/button/ButtonComponent";

export const createFooter = ({
  contactHeadline = 'Wir können wir Ihnen helfen?',
  address = 'IHK Musterstadt <br> Musterstraße 12-18 <br> 54321 Muster',
  mail = 'info@musterstadt.ihk.de',
  phone = '12345 / 6789 - 0',
  accessibility = [
    {
      name: 'Gebärdensprache',
      link: '#',
      icon: 'icon-gebaerdensprache',
    },
    {
      name: 'Leichte Sprache',
      link: '#',
      icon: 'icon-leichte-sprache',
    },
    {
      name: 'Erklärung zur Barrierefreiheit',
      link: '#',
      icon: 'icon-barrierefreiheit',
    }
  ],
  legalText = '<p>© Industrie- und Handelskammer Musterstast</p>\n' +
  '<p>Für die Richtigkeit der in dieser Website enthaltenen Angaben können wir trotz sorgfältiger Prüfung keine Gewähr übernehmen. Bei den verlinkten externen Seiten handelt es sich ausschließlich um fremde Inhalte, für die wir keine Haftung übernehmen und deren Inhalt wir uns nicht zu eigen machen.</p>',
  legalNav = ['Impressum', 'Datenschutzerklärung', 'Pflichtinformationen nach der DSGVO'],
}) => {
  const footer = createElement('footer', ['page-footer']);
  const container = createElement('div', ['container'], null, footer);
  const rowContact = createElement('div', ['row', 'contact'], null, container);
  const rowSocial = createElement('div', ['row', 'social'], null, container);
  const rowAccessibility = createElement('div', ['row', 'barrier-free'], null, container);
  const rowCopyright = createElement('div', ['row', 'copyright'], null, container);
  const rowLegal = createElement('div', ['row', 'legal-nav'], null, container);

  const contactCol1 = createElement('div', ['col'], null, rowContact);
  createElement('p', ['like-h2'], contactHeadline, contactCol1);

  const contactCol2 = createElement('div', ['col'], null, rowContact);
  createElement('h6', [], 'Unsere Anschrift', contactCol2);
  createElement('p', [], address, contactCol2);
  contactCol2.appendChild(createButton({color: 'white', label: 'IHK wechseln', iconPosition: 'icon-right', icon: 'ihk-wechseln'}))

  const contactCol3 = createElement('div', ['col'], null, rowContact);
  createElement('h6', [], 'So erreichen Sie uns', contactCol3);
  const contactUl = createElement('ul', ['contact-list'], null, contactCol3);
  const contacts = {mail: mail, phone: phone};
  for (let property in contacts) {
    const li = createElement('li', [property], null, contactUl);
    const a = createElement('a', property === 'mail' ? ['email'] : ['mobile', 'phone'], contacts[property], li);
    a.href = property === 'mail' ? 'mailto:' + mail : 'tel:' + phone;
  }

  const socialCol = createElement('div', ['col'], null, rowSocial);
  socialCol.appendChild(createSocialIcons({icons: socialIconsPlatforms, title: ''}));

  const accCol = createElement('div', ['col'], null, rowAccessibility);
  const accList = createElement('ul', [], null, accCol);
  accessibility.map((item) => {
    const li = createElement('li', [item.icon], null, accList);
    const a = createElement('a', [], item.name, li);
    a.href = item.link;
  })

  const copyrightCol = createElement('div', ['col'], legalText, rowCopyright);
  copyrightCol.id = 'page-footer-copyright';

  const partnerCol = createElement('div', ['col'], null, rowCopyright);

  const legalCol = createElement('div', ['col'], null, rowLegal);
  legalCol.id = 'page-footer-legal';
  const legalNavUl = createElement('ul', [], null, legalCol);
  legalNav.map((item) => {
    const li = createElement('li', [], null, legalNavUl);
    const a = createElement('a', [], item, li);
    a.href = '#';
  })

  return footer;
}