marketingheader wip

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);

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',

gfi-ihk-2024/stories/sections/marketingheader/marketingheader-typeahead.js

@@ -68,7 +68,7 @@ class IHKSearchTypeahead {
   }
 
   buildResult(json) {
-    const tile = $('<div/>').addClass('tile').appendTo(this.tileWrapper);
+    const tile = $('<div/>').addClass('tile').addClass('variant-base').appendTo(this.tileWrapper);
     const a = $('<a/>').attr('href', json.url).appendTo(tile);
     const inner = $('<span/>').addClass('inner').appendTo(a);
     const title = $('<span/>').addClass('item-title').appendTo(inner);
@@ -91,7 +91,7 @@ class IHKSearchTypeahead {
   }
 
   buildGroup(json, tileClass, title) {
-    const tile = $('<div/>').addClass('tile').addClass(tileClass).appendTo(this.tileWrapper);
+    const tile = $('<div/>').addClass('tile').addClass('variant-base').addClass(tileClass).appendTo(this.tileWrapper);
     const outer = $('<div/>').addClass('outer').appendTo(tile);
     const inner = $('<div/>').addClass('inner').appendTo(outer);
     const p = $('<p/>').appendTo(inner);

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;
         }
       }
 

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);
           }
         }
       }