footer picto

gfi-ihk-2024/stories/components/footer/Footer.stories.js

@@ -1,4 +1,5 @@
 import {createFooter} from "./FooterComponent";
+import footerPicto from '../../assets/img/footer-picto.svg';
 
 export default {
   title: 'Components/Footer',
@@ -15,4 +16,9 @@ const Template = ({...args}) => {
 };
 
 export const Footer = Template.bind({});
-Footer.args = {};
+Footer.args = {};
+
+export const FooterPicto = Template.bind({});
+FooterPicto.args = {
+  picto: footerPicto,
+};

gfi-ihk-2024/stories/components/footer/FooterComponent.js

@@ -29,8 +29,13 @@ export const createFooter = ({
   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'],
+  picto = null
 }) => {
   const footer = createElement('footer', ['page-footer']);
+  if (picto !== null) {
+    footer.classList.add('footer-picto');
+    footer.style.backgroundImage = `url(${picto})`;
+  }
   const container = createElement('div', ['container'], null, footer);
   const rowContact = createElement('div', ['row', 'contact'], null, container);
   const rowSocial = createElement('div', ['row', 'social'], null, container);

gfi-ihk-2024/stories/components/footer/footer.scss

@@ -6,6 +6,17 @@
   background-color: var(--theme-color-primary-dimmed-04);
   border-bottom: var(--border-width) solid var(--theme-color-primary);
   z-index: 10;
+  &.footer-picto {
+    padding-top: calc(var(--section-padding) + 300px);
+    background-repeat: repeat-x;
+    background-size: auto 300px;
+    background-position: 50% 0;
+    background-image: url('../../assets/img/footer-picto.svg');
+    @media(max-width: 767px) {
+      padding-top: calc(var(--section-padding) + 200px);
+      background-size: auto 200px;
+    }
+  }
 
   .container {
     @media(max-width: 767px) {