diff --git a/gfi-ihk-2024/stories/components/logo-wall/LogoWall.stories.js b/gfi-ihk-2024/stories/components/logo-wall/LogoWall.stories.js new file mode 100644 index 0000000..05cd5d1 --- /dev/null +++ b/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' }, + ] +}; \ No newline at end of file diff --git a/gfi-ihk-2024/stories/components/logo-wall/LogoWallComponent.js b/gfi-ihk-2024/stories/components/logo-wall/LogoWallComponent.js new file mode 100644 index 0000000..476ff3e --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/gfi-ihk-2024/stories/components/logo-wall/logo-wall.scss b/gfi-ihk-2024/stories/components/logo-wall/logo-wall.scss new file mode 100644 index 0000000..fd3226f --- /dev/null +++ b/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; + } + } + } +} \ No newline at end of file diff --git a/gfi-ihk-2024/storybook-static/iframe.html b/gfi-ihk-2024/storybook-static/iframe.html index b101a72..0f92bd5 100644 --- a/gfi-ihk-2024/storybook-static/iframe.html +++ b/gfi-ihk-2024/storybook-static/iframe.html @@ -354,7 +354,7 @@ window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":true};