From a09c66e4db955053c0e998ac71684ad80fff5f6e Mon Sep 17 00:00:00 2001 From: FlorianEisenmenger Date: Wed, 10 Jun 2026 16:46:18 +0200 Subject: [PATCH] marketingheader wip --- .../MarketingHeaderComponent.js | 33 +++++++++++--- .../marketingheader/MarketingHeaderData.js | 12 +++++ .../marketingheader-typeahead.js | 4 +- .../marketingheader/marketingheader.scss | 44 ++++++++----------- .../sections/slider/SliderComponent.js | 8 ++-- 5 files changed, 64 insertions(+), 37 deletions(-) diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js index ecc936f..88573cb 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js +++ b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js @@ -46,7 +46,7 @@ export const createMarketingHeader = type = 'infoteaser', }) => { const section = createElement('section', ['marketingheader', type], null); - const search = createElement('div', ['search'], null, section); + const search = createElement('div', ['search','variant-subtle-primary'], null, section); if (searchAllButton) { search.classList.add('has-button-wrapper'); } @@ -86,9 +86,27 @@ export const createMarketingHeader = const tilesContainer = createElement('div', ['tiles'], null, col); tiles.map((tile) => { - const div = createElement('div', ['tile'], null, tilesContainer); - const a = createElement('a', [], tile.title, div); - a.href = tile.link; + if (tile.type) { + const div = createElement('div', ['tile', tile.type, 'variant-base'], null, tilesContainer); + const outer = createElement('div', ['outer'], null, div); + const inner = createElement('div', ['inner'], null, outer); + const p = createElement('p', [], null, inner); + const a = createElement('a', [], tile.title + (tile.count ? ' (' + tile.count + ')' : ''), p); + a.href = tile.link; + if (tile.items && tile.items.length > 0) { + const ul = createElement('ul', [], null, inner); + tile.items.slice(0, 2).map((item) => { + const li = createElement('li', [], null, ul); + const itemA = createElement('a', [], item.title, li); + itemA.href = item.link; + itemA.title = item.title; + }); + } + } else { + const div = createElement('div', ['tile','variant-base'], null, tilesContainer); + const a = createElement('a', [], tile.title, div); + a.href = tile.link; + } }); if (searchAllButton) { const allButtonWrapper = createElement('span', ['all-button-wrapper'], null, col); @@ -108,6 +126,9 @@ export const createMarketingHeader = /* SLIDER */ const container2 = createElement('div', ['container', 'mainstage'], null, section); + if (type === 'hero-fullwidth') { + container2.classList.add('variant-solid'); + } const row2 = createElement('div', ['row'], null, container2); const colslider = createElement('div', ['col', 'slidercontainer', 'rotation'], null, row2); const sliderComponent = createElement('div', ['slider', 'btnanimation'], null, colslider); @@ -142,10 +163,10 @@ export const createMarketingHeader = // Context-Box immer in image-box (egal ob Bild oder nicht) if (contextBoxContentImg) { - const contentBoxImg = createElement('div', ['context-box', 'context-box--image'], null, imageBox); + const contentBoxImg = createElement('div', ['context-box', 'variant-solid', 'context-box--image'], null, imageBox); createImage(contextBoxContentImg, 200, 50, '', [], contentBoxImg); } else if (contextBoxContent) { - createElement('div', ['context-box'], contextBoxContent, imageBox); + createElement('div', ['context-box', 'variant-solid'], contextBoxContent, imageBox); } const textBox = createElement('div', ['text-box'], null, outer); diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js index 8c06cff..55b28d0 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js +++ b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js @@ -14,6 +14,18 @@ export const searchData = [ { title: 'Unsere Region', link: '#', + type: 'downloads', + count: 12, + items: [ + { + title: 'Standort Hamburg', + link: '#', + }, + { + title: 'Standort Bremen', + link: '#', + }, + ], }, { title: 'Handelskammer vor Ort', diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader-typeahead.js b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader-typeahead.js index 248203c..fe9a77e 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader-typeahead.js +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader-typeahead.js @@ -68,7 +68,7 @@ class IHKSearchTypeahead { } buildResult(json) { - const tile = $('
').addClass('tile').appendTo(this.tileWrapper); + const tile = $('
').addClass('tile').addClass('variant-base').appendTo(this.tileWrapper); const a = $('').attr('href', json.url).appendTo(tile); const inner = $('').addClass('inner').appendTo(a); const title = $('').addClass('item-title').appendTo(inner); @@ -91,7 +91,7 @@ class IHKSearchTypeahead { } buildGroup(json, tileClass, title) { - const tile = $('
').addClass('tile').addClass(tileClass).appendTo(this.tileWrapper); + const tile = $('
').addClass('tile').addClass('variant-base').addClass(tileClass).appendTo(this.tileWrapper); const outer = $('
').addClass('outer').appendTo(tile); const inner = $('
').addClass('inner').appendTo(outer); const p = $('

').appendTo(inner); diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss index 543fdcb..61166bf 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss @@ -11,7 +11,7 @@ section.marketingheader { .mini-teaser { .category { - color: var(--swatches-secondary-500); + color: var(--color-decoration); } } @@ -71,7 +71,7 @@ section.marketingheader { position: relative; overflow: hidden; margin: 0; - background-color: var(--swatches-primary-100); + background-color: var(--color-background); height: 100px; transition: all .6s ease-in-out; background-size: cover; @@ -118,7 +118,7 @@ section.marketingheader { border-radius: 10px; height: 34px; width: 34px; - background-color: var(--swatches-primary-500); + background-color: var(--color-button-primary-background); @include focus-visible; z-index: 2; @@ -130,7 +130,7 @@ section.marketingheader { width: 17px; height: 1.5px; border-radius: 2px; - background-color: var(--swatches-neutrals-white); + background-color: var(--color-button-primary-text); transform: translate(-50%, -50%) rotate(45deg); transition: 0.3s ease; } @@ -223,18 +223,14 @@ section.marketingheader { } &::placeholder { - color: var(--swatches-primary-500) !important; + color: var(--color-text) !important; } } button.search-submit { - background-color: var(--swatches-primary-500) !important; - color: var(--swatches-neutrals-white); - border-top-left-radius: 0 !important; - border-bottom-left-radius: 0 !important; - border-top-right-radius: 0 !important; - border-bottom-right-radius: 0 !important; - border-color: var(--swatches-neutrals-white) !important; + background-color: var(--color-button-primary-background) !important; + color: var(--color-button-primary-text); + border-radius: 0 !important; height: 60px; width: 60px; font-size: 22px; @@ -368,7 +364,7 @@ section.marketingheader { top: 0; margin: 11px 10px; z-index: 1; - background-color: var(--swatches-neutrals-white); + background-color: var(--color-background); padding: 7px 6px 5px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; @@ -380,7 +376,7 @@ section.marketingheader { } .outer { - background-color: var(--swatches-primary-100); + background-color: var(--color-surface-inset); } p { @@ -431,12 +427,12 @@ section.marketingheader { left: 0; right: 0; height: var(--border-width); - background-color: var(--swatches-secondary-500); + background-color: var(--color-decoration); transition: 0.25s $easeOutQuad; } &:hover { - color: var(--swatches-secondary-700); + color: var(--color-text-accent); &:before { height: var(--border-width-hover); @@ -451,9 +447,9 @@ section.marketingheader { } .outer { - background-color: var(--swatches-primary-100); + background-color: var(--color-surface-inset); padding: 14px 20px 18px; - border: 4px solid var(--swatches-neutrals-white); + border: 4px solid var(--color-background); &::after, &::before { display: none; @@ -494,7 +490,7 @@ section.marketingheader { font-weight: 500; &:hover { - color: var(--swatches-secondary-700); + color: var(--color-text-accent); } } } @@ -915,27 +911,25 @@ section.marketingheader { .text-box { height: 100%; - color: var(--swatches-neutrals-white); width: var(--container-width); - padding: 0 var(--container-padding); max-width: 100%; margin: 0 auto; @media (min-width: 1000px) { position: absolute; * { - color: var(--swatches-neutrals-white); + color: var(--color-text); } } .btn { @media (min-width: 1000px) { - background-color: var(--swatches-neutrals-white) !important; - color: var(--swatches-primary-500) !important; + background-color: var(--color-button-primary-background) !important; + color: var(--color-button-primary-text) !important; } &:hover:after { - box-shadow: 0 0 0 var(--button-hover-shadow-size) var(--swatches-neutrals-white) !important; + box-shadow: 0 0 0 var(--button-hover-shadow-size) var(--color-button-primary-background) !important; } } diff --git a/gfi-ihk-2024/stories/sections/slider/SliderComponent.js b/gfi-ihk-2024/stories/sections/slider/SliderComponent.js index 5826bcb..2479331 100644 --- a/gfi-ihk-2024/stories/sections/slider/SliderComponent.js +++ b/gfi-ihk-2024/stories/sections/slider/SliderComponent.js @@ -28,10 +28,10 @@ export const createSlider = createElement('span', ['sr-only'], slideData.copyright, imageBox); } if (contextBoxContentImg) { - const contentBoxImg = createElement('div', ['context-box', 'context-box--image'], null, imageBox); + const contentBoxImg = createElement('div', ['context-box', 'variant-solid', 'context-box--image'], null, imageBox); createImage(contextBoxContentImg, 200, 50, '', [], contentBoxImg); } else if (contextBoxContent) { - createElement('div', ['context-box'], contextBoxContent, imageBox); + createElement('div', ['context-box', 'variant-solid'], contextBoxContent, imageBox); } } @@ -58,10 +58,10 @@ export const createSlider = if (contextBoxContent) { textBox.classList.add('context'); if (contextBoxContentImg) { - const contentBox = createElement('div', ['context-box', 'context-box--image'], null, textBox); + const contentBox = createElement('div', ['context-box', 'variant-solid', 'context-box--image'], null, textBox); createImage(contextBoxContentImg, 200, 50, '', [], contentBox); } else if (contextBoxContent) { - createElement('div', ['context-box'], contextBoxContent, textBox); + createElement('div', ['context-box', 'variant-solid'], contextBoxContent, textBox); } } }