static and logo wall

gfi-ihk-2024/stories/components/logo-wall/LogoWall.stories.js

@@ -0,0 +1,31 @@
+import {createLogoWall} from "./LogoWallComponent";
+
+export default {
+  title: 'Components/Logo Wall',
+  args: {},
+}
+
+const Template = ({...args}) => {
+  return createLogoWall({...args});
+};
+
+export const LogoWall = Template.bind({});
+LogoWall.args = {
+  kicker: 'WIRTSCHAFT VERBINDEN. ZUKUNFT GESTALTEN.',
+  headline: 'Starke Partner für eine starke Region',
+  copy: 'Von Global Playern bis zu Hidden Champions - unsere Region steht für wirtschaftliche Vielfalt und Innovation. Als Ihre IHK vernetzen wir Unternehmen, fördern Kompetenzen und setzen uns für optimale Rahmenbedingungen ein.',
+  logos: [
+    { src: './dummy/placeholder-1-1.svg', alt: 'BASF Logo' },
+    { src: './dummy/placeholder-3-2.svg', alt: 'Heidelberg Logo' },
+    { src: './dummy/placeholder-2-3.svg', alt: 'SAP Logo' },
+    { src: './dummy/placeholder-3-2.svg', alt: 'Würth Elektronik Logo' },
+    { src: './dummy/placeholder-3-2.svg', alt: 'MVV Logo' },
+    { src: './dummy/placeholder-3-4.svg', alt: 'John Deere Logo' },
+    { src: './dummy/placeholder-1-1.svg', alt: 'Roche Logo' },
+    { src: './dummy/placeholder-4-3.svg', alt: 'Südzucker Logo' },
+    { src: './dummy/placeholder-2-3.svg', alt: 'Mannheimer Versicherung Logo' },
+    { src: './dummy/placeholder-3-2.svg', alt: 'Hornbach Logo' },
+    { src: './dummy/placeholder-1-1.svg', alt: 'Telekom Logo' },
+    { src: './dummy/placeholder-3-4.svg', alt: 'Wild Logo' },
+  ]
+};

gfi-ihk-2024/stories/components/logo-wall/LogoWallComponent.js

@@ -0,0 +1,49 @@
+import './logo-wall.scss';
+import {createElement} from "../../_global/scripts/helpers";
+
+export const createLogoWall = ({
+   kicker = 'Dachzeile der Logo Wall',
+   headline = 'Die Headline der Logo Wall',
+   copy = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
+   logos = [
+     { src: './dummy/placeholder-3-2.svg', alt: 'Logo 1' },
+     { src: './dummy/placeholder-3-2.svg', alt: 'Logo 2' },
+     { src: './dummy/placeholder-3-2.svg', alt: 'Logo 3' },
+     { src: './dummy/placeholder-3-2.svg', alt: 'Logo 4' },
+     { src: './dummy/placeholder-3-2.svg', alt: 'Logo 5' },
+     { src: './dummy/placeholder-3-2.svg', alt: 'Logo 6' },
+     { src: './dummy/placeholder-3-2.svg', alt: 'Logo 7' },
+     { src: './dummy/placeholder-3-2.svg', alt: 'Logo 8' },
+   ]
+ }) => {
+  const wrapper = createElement('div', ['logo-wall']);
+
+  if (kicker.length > 0 || headline.length > 0 || copy.length > 0) {
+    const textWrapper = createElement('div', ['text-wrapper'], null, wrapper);
+    const textBox = createElement('div', ['text-box'], null, textWrapper);
+    if (kicker && kicker.length > 0) {
+      createElement('span', ['kicker'], kicker, textBox);
+    }
+    if (headline && headline.length > 0) {
+      createElement('h2', ['like-h2'], headline, textBox);
+    }
+    if (copy && copy.length > 0) {
+      createElement('p', [], copy, textBox);
+    }
+  }
+
+  // Logo-Grid erstellen
+  const logoGrid = createElement('div', ['logo-grid'], null, wrapper);
+
+  // Logos hinzufügen
+  if (logos && logos.length > 0) {
+    logos.forEach(logo => {
+      const logoWrapper = createElement('div', ['logo-item'], null, logoGrid);
+      const logoImg = createElement('img', [], null, logoWrapper);
+      logoImg.src = logo.src;
+      logoImg.alt = logo.alt;
+    });
+  }
+
+  return wrapper;
+}

gfi-ihk-2024/stories/components/logo-wall/logo-wall.scss

@@ -0,0 +1,47 @@
+@import '../../_global/styles/mixins';
+@import '../../_global/styles/vars';
+
+.logo-wall {
+  margin: 0 0 1em 0;
+  .text-wrapper {
+    margin-bottom: 2rem;
+  }
+
+  .text-box {
+    max-width: 900px;
+
+    .like-h2 {
+      margin-bottom: 0.25rem;
+      margin-top: 0;
+    }
+  }
+
+  .logo-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 2rem;
+    align-items: center;
+    justify-content: start;
+
+    @media (max-width: 600px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    .logo-item {
+      height: 5rem;
+      max-width: 15rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      @media (max-width: 600px) {
+        height: 2.5rem;
+      }
+
+      img {
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+      }
+    }
+  }
+}

gfi-ihk-2024/storybook-static/iframe.html

@@ -354,7 +354,7 @@
             window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":true};</script><script type="module">import './sb-preview/runtime.js';
 
       
-      import './runtime~main.814aca15.iframe.bundle.js';
+      import './runtime~main.260345bf.iframe.bundle.js';
       
       import './16.08016f04.iframe.bundle.js';
       

gfi-ihk-2024/storybook-static/project.json

@@ -1 +1 @@
-{"generatedAt":1746698330799,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"10.5.1"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/html-webpack5","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/html","storybookVersion":"7.0.21","storybookVersionSpecifier":"^7.0.21","language":"javascript","storybookPackages":{"@storybook/addon-actions":{"version":"7.6.17"},"@storybook/html":{"version":"7.0.21"},"@storybook/html-webpack5":{"version":"7.0.21"},"storybook":{"version":"7.6.17"}},"addons":{"@storybook/preset-scss":{"version":"1.0.3"},"@storybook/addon-links":{"version":"7.0.21"},"@storybook/addon-essentials":{"version":"7.6.17"},"@storybook/addon-controls":{"version":"7.6.17"}}}
+{"generatedAt":1746701959736,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"10.5.1"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/html-webpack5","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/html","storybookVersion":"7.0.21","storybookVersionSpecifier":"^7.0.21","language":"javascript","storybookPackages":{"@storybook/addon-actions":{"version":"7.6.17"},"@storybook/html":{"version":"7.0.21"},"@storybook/html-webpack5":{"version":"7.0.21"},"storybook":{"version":"7.6.17"}},"addons":{"@storybook/preset-scss":{"version":"1.0.3"},"@storybook/addon-links":{"version":"7.0.21"},"@storybook/addon-essentials":{"version":"7.6.17"},"@storybook/addon-controls":{"version":"7.6.17"}}}