Merge branch 'bugfix/marketinghero'

gfi-ihk-2024/stories/components/common-content-article/CommonContentArticle.stories.js

@@ -0,0 +1,13 @@
+import {createCommonContentArticle} from "./CommonContentArticleComponent";
+
+export default {
+  title: 'Components/Common Content Article',
+  args: {},
+}
+
+const Template = ({...args}) => {
+  return createCommonContentArticle({...args});
+};
+
+export const CommonContentArticle = Template.bind({});
+CommonContentArticle.args = {};

gfi-ihk-2024/stories/components/common-content-article/CommonContentArticleComponent.js

@@ -0,0 +1,35 @@
+import './commonContent-article.scss';
+import {createElement} from "../../_global/scripts/helpers";
+import {lorem2} from "../../_global/scripts/lorem";
+import {createBlockquote} from "../../atoms/blockquote/BlockquoteComponent";
+import {createContact} from "../contact/ContactComponent";
+import {createPrintShare} from "../print-share/PrintShareComponent";
+import {createInfobox} from "../infobox/InfoboxComponent";
+import {createTopicTeasersSection} from "../../sections/topic-teasers/TopicTeasersComponent";
+import {createCommonContent} from "../common-content/CommonContentComponent";
+
+export const createCommonContentArticle = ({
+  addArticleComponents = true,
+  kicker = 'Titelthema',
+  headline = '5 Beispiele, wie sich Unternehmen für ihr Umfeld engagieren',
+}) => {
+  const div = createElement('div');
+  const article = createElement('article', ['col', 'magazine-article'], null, div);
+
+  if (addArticleComponents) {
+    createElement('p', ['kicker'], kicker, article);
+    createElement('h1', [], headline, article);
+  }
+  article.appendChild(createCommonContent({}));
+
+  const wrapper = createElement('div', ['content'], null, div);
+  wrapper.appendChild(createTopicTeasersSection({maxItems: 6}));
+
+  const article2 = createElement('article', ['col', 'magazine-article'], null, div);
+  article2.appendChild(createInfobox({content: lorem2}));
+  article2.appendChild(createBlockquote({}));
+  article2.appendChild(createContact({}));
+  article2.appendChild(createPrintShare({}));
+
+  return div;
+}

gfi-ihk-2024/stories/components/common-content-article/commonContent-article.scss

@@ -0,0 +1,73 @@
+@import '../../_global/styles/mixins';
+@import '../../_global/styles/vars';
+
+.magazine-article article.col, .magazine-article.col {
+  position: relative;
+  z-index: 1;
+  width: 880px;
+  max-width: 66.6667%;
+  background-color: #fff;
+  margin: 0 auto;
+  padding-bottom: 0;
+
+  @media(max-width: 1199px) {
+    max-width: 83.3333%;
+  }
+  @media(max-width: 999px) {
+    box-shadow: 0 0 0 10px white;
+  }
+  @media(max-width: 767px) {
+    max-width: 100%;
+    box-shadow: 0 -4px 0 2px white;
+  }
+
+  .print-share {
+    margin-bottom: 0;
+  }
+
+  .print-share .bookmarks.show-bookmarks {
+    margin-bottom: 1em;
+  }
+
+  .image-box {
+    img {
+      max-width: 100%;
+    }
+
+    &.off-grid{
+      @media(min-width: 568px) {
+        float: left;
+        margin: 0.3em 20px 1em 0;
+        width: calc(50% - 10px);
+      }
+
+      @media(min-width: 768px) {
+        margin: 0.3em 40px 1em calc(-12.5% - 5px);
+        width: calc(50% - 20px);
+
+        @media(max-width: 1199px) {
+          margin: 0.3em 30px 1em calc(-10% - 3px);
+          width: calc(50% - 15px);
+        }
+
+        @media(max-width: 999px) {
+          margin: 0.3em 20px 1em calc(-10% - 2px);
+          width: calc(50% - 10px);
+        }
+      }
+
+      ~ *:not(p) {
+        clear: left;
+      }
+    }
+
+    &.portrait{
+      display: flex;
+      justify-content: center;
+      flex-flow: column;
+      img, figcaption{
+        align-self: center;
+      }
+    }
+  }
+}

gfi-ihk-2024/stories/components/common-content/CommonContent.stories.js

@@ -0,0 +1,13 @@
+import {createCommonContent} from "./CommonContentComponent";
+
+export default {
+    title: 'Components/Common Content',
+    args: {},
+}
+
+const Template = ({...args}) => {
+    return createCommonContent({...args});
+};
+
+export const CommonContent = Template.bind({});
+CommonContent.args = {};

gfi-ihk-2024/stories/components/common-content/CommonContentComponent.js

@@ -0,0 +1,40 @@
+import './commonContent.scss';
+import {createElement} from "../../_global/scripts/helpers";
+import {createButton} from "../../atoms/button/ButtonComponent";
+
+export const createCommonContent = ({
+    text = "Möchten Sie, dass zusätzliche regionale Inhalte Ihrer IHK zum Thema auf dieser Seite eingeblendet werden?",
+    noCta = {
+        label: 'Nein danke',
+        link: '#',
+        target: '_self',
+    },
+    yesCta = {
+        label: 'Ja gerne',
+        link: '#',
+        target: '_self',
+    }
+}) => {
+    const common = createElement('div', ['common-content']);
+
+    const p = createElement('p', [], text, common);
+    const buttons = createElement('div', ['buttons'], null, common);
+    buttons.appendChild(createButton({
+        label: noCta.label,
+        link: noCta.link,
+        color: 'primary-light',
+        size: 'small',
+        icon: 'schliessen',
+        iconPosition: 'icon-right'
+    }));
+    buttons.appendChild(createButton({
+        label: yesCta.label,
+        link: yesCta.link,
+        color: 'secondary',
+        size: 'small',
+        icon: 'check',
+        iconPosition: 'icon-right'
+    }));
+
+    return common;
+}

gfi-ihk-2024/stories/components/common-content/commonContent.scss

@@ -0,0 +1,20 @@
+@import '../../_global/styles/mixins';
+@import '../../_global/styles/vars';
+
+.common-content {
+  margin-top: var(--section-margin);
+  padding: calc(var(--container-padding) / 2) var(--container-padding);
+  background: var(--theme-color-primary-dimmed-04);
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23B0C4D6' stroke-width='4' stroke-dasharray='0%2c 7' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
+  p {
+
+  }
+  .buttons {
+    .btn {
+      margin-right: 1rem;
+      @media (max-width: 567px) {
+        margin-bottom: 1rem;
+      }
+    }
+  }
+}

gfi-ihk-2024/stories/components/header/HeaderComponent.js

@@ -8,6 +8,7 @@ import {createHeaderSearch} from "../header-search/HeaderSearchComponent";
 
 export const createHeader =
   ({
+    isZip = false,
     contactPhone,
     contactMail,
     contactLink = '#',
@@ -51,7 +52,7 @@ export const createHeader =
 
     createElement('button', ['toggle-nav'], '<span>Menü</span>', header);
     header.appendChild(createNav({}));
-    header.appendChild(createIhkSwitch({}));
+    header.appendChild(createIhkSwitch({zip: isZip}));
 
     new IHKHeader($(header));
 

gfi-ihk-2024/stories/components/ihk-switch/IHKSwitch.stories.js

@@ -7,7 +7,7 @@ export default {
   },
   args: {
     currentIHK: 'Musterstadt',
-    myIHK: 'Hamburg',
+    myIHK: 'Hamburg'
   }
 }
 
@@ -16,4 +16,9 @@ const Template = ({...args}) => {
 };
 
 export const IHKSwitch = Template.bind({});
-IHKSwitch.args = {};
+IHKSwitch.args = {};
+
+export const IHKSwitchZip = Template.bind({});
+IHKSwitchZip.args = {
+  zip: true
+};

gfi-ihk-2024/stories/components/ihk-switch/IHKSwitchComponent.js

@@ -3,35 +3,63 @@ import $ from 'jquery';
 import {createElement} from "../../_global/scripts/helpers";
 import IHKSwitch from "./ihk-switch";
 import {createButton} from "../../atoms/button/ButtonComponent";
+import {createInputText} from "../../atoms/input-text/InputTextComponent";
+import {createSearchButton} from "../../atoms/search-button/SearchButtonComponent";
 const Cookies = require('js-cookie');
 
 export const createIhkSwitch = ({
   currentIHK = 'Musterstadt',
   myIHK = 'Hamburg',
+  zip = false,
+  zipPlaceholder = 'z.B. 20146 Hamburg'
 }) => {
   const wrap = createElement('div', ['ihk-switch']);
   const step1 = createElement('div', ['step'], null, wrap);
-  const step2 = createElement('div', ['step'], null, wrap);
-  const step3 = createElement('div', ['step'], null, wrap);
-  const p1 = 'Sie befinden sich auf der Seite der <strong class="current-ihk" data-ihknr="118">' + currentIHK + '</strong>. Möchten Sie diese Seite in einem Cookie als Ihre Heimat-IHK setzen?';
-  const p2 = 'Sie befinden sich auf der Seite der <strong class="current-ihk" data-ihknr="118">' + currentIHK + '</strong>. Bisher ist die <strong><span class="my-ihk">' + myIHK + '</span></strong> als Ihre Heimat-IHK hinterlegt. Wollen Sie die Seite der <strong class="current-ihk" data-ihknr="118">' + currentIHK + '</strong> in einem Cookie als Ihre neue Heimat-IHK setzen?';
-  const p3 = 'Sie werden zum Angebot der <strong class="large my-ihk">' + myIHK + '</strong> weitergeleitet.';
 
-  createElement('button', ['closer'], null, wrap);
+  if (!zip) {
+    const step2 = createElement('div', ['step'], null, wrap);
+    const step3 = createElement('div', ['step'], null, wrap);
+    const p1 = 'Sie befinden sich auf der Seite der <strong class="current-ihk" data-ihknr="118">' + currentIHK + '</strong>. Möchten Sie diese Seite in einem Cookie als Ihre Heimat-IHK setzen?';
+    const p2 = 'Sie befinden sich auf der Seite der <strong class="current-ihk" data-ihknr="118">' + currentIHK + '</strong>. Bisher ist die <strong><span class="my-ihk">' + myIHK + '</span></strong> als Ihre Heimat-IHK hinterlegt. Wollen Sie die Seite der <strong class="current-ihk" data-ihknr="118">' + currentIHK + '</strong> in einem Cookie als Ihre neue Heimat-IHK setzen?';
+    const p3 = 'Sie werden zum Angebot der <strong class="large my-ihk">' + myIHK + '</strong> weitergeleitet.';
 
-  step1.dataset.step = 'form';
-  createElement('p', [], p1, step1);
-  step1.appendChild(buildButtons());
+    createElement('button', ['closer'], null, wrap);
 
-  step2.dataset.step = 'switch';
-  createElement('p', [], p2, step2);
-  step2.appendChild(buildButtons());
+    step1.dataset.step = 'form';
+    createElement('p', [], p1, step1);
+    step1.appendChild(buildButtons());
 
-  step3.dataset.step = 'success';
-  createElement('p', [], p3, step3);
+    step2.dataset.step = 'switch';
+    createElement('p', [], p2, step2);
+    step2.appendChild(buildButtons());
 
-  window.sessionStorage.removeItem('my-ihk-ignore');
-  Cookies.remove('my-ihk', {expires: 365});
+    step3.dataset.step = 'success';
+    createElement('p', [], p3, step3);
+
+    window.sessionStorage.removeItem('my-ihk-ignore');
+    Cookies.remove('my-ihk', {expires: 365});
+  } else {
+    const p1 = 'Geben Sie Ihre Postleitzahl ein, um zu dem Angebot Ihrer IHK zu gelangen:';
+
+    createElement('button', ['closer'], null, wrap);
+
+    step1.dataset.step = 'zip';
+    createElement('p', [], p1, step1);
+    const inputWrapper = createElement('div', ['input-wrapper'], null, step1);
+    inputWrapper.appendChild(createInputText({
+      placeholder: zipPlaceholder,
+      isRequired: true,
+      id: 'switch-zip',
+      name: 'switch-zip',
+    }));
+    inputWrapper.appendChild(createButton({
+      label: '',
+      link: '#',
+      iconPosition: 'icon-inline',
+      icon: 'lokalisierung',
+    }));
+    step1.appendChild(buildOKButton());
+  }
 
   $(document).ready(() => {
     new IHKSwitch($(wrap));
@@ -62,3 +90,20 @@ const buildButtons = () => {
   return buttons;
 }
 
+const buildOKButton = () => {
+  const buttons = createElement('div', ['buttons', 'align-right']);
+  const ok = createButton({
+    elementType: 'button',
+    label: 'OK',
+    color: 'secondary',
+    icon: 'check',
+    iconPosition: 'icon-right'
+  })
+
+  ok.classList.add('stay-here');
+
+  buttons.appendChild(ok);
+
+  return buttons;
+}
+

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

@@ -68,7 +68,8 @@
   &[data-show-step="geolocation"] [data-step="geolocation"],
   &[data-show-step="form"] [data-step="form"],
   &[data-show-step="switch"] [data-step="switch"],
-  &[data-show-step="success"] [data-step="success"] {
+  &[data-show-step="success"] [data-step="success"],
+  [data-step="zip"] {
     display: block;
   }
 
@@ -112,10 +113,34 @@
     }
   }
 
+  .input-wrapper {
+    position: relative;
+    .btn {
+      position: absolute;
+      right: 0;
+      top: 0;
+      height: 100%;
+      padding: 0;
+      border-radius: 0;
+      background: #193f69;
+      * {
+        display: none;
+      }
+      &:hover:after {
+        display: none;
+      }
+    }
+  }
+
   .buttons {
     margin-top: 28px;
     margin-left: -2px;
     margin-right: -8px;
+    &.align-right {
+      display: flex;
+      justify-content: flex-end;
+      margin-right: 0;
+    }
 
     @media(max-width: 767px) {
       margin-top: 20px;

gfi-ihk-2024/stories/components/mini-teaser/MiniTeaser.stories.js

@@ -42,3 +42,9 @@ StandardMiniTeaser.args = {};
 
 export const infobanner = MiniTeaser.bind({});
 infobanner.args = {type:'infoteaser'};
+
+export const infobannerWithoutIcon = MiniTeaser.bind({});
+infobannerWithoutIcon.args = {type:'infoteaser', icon: null};
+
+export const infobannerBackground = MiniTeaser.bind({});
+infobannerBackground.args = {type:'infoteaser', backgroundImage: 'https://source.unsplash.com/2vCqH34PqWs/1080x648'};

gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js

@@ -8,6 +8,7 @@ export const createMiniTeaser = ({
   link = '#',
   icon = 'Roboter',
   buttonlabel = 'IHK-Newsletter sichern',
+  backgroundImage = null,
 }) => {
   
   if (type === 'standard') {
@@ -18,14 +19,22 @@ export const createMiniTeaser = ({
     createElement('h4', ['title'], title, textBox);
     return tile;
   }else{
-    const tile = createElement('div', ['tile',  'mini-teaser', type], null);
+    const tile = createElement('a', ['tile',  'mini-teaser', type], null);
+    tile.href = link;
+    if (backgroundImage && backgroundImage.length > 0) {
+      tile.style = 'background-image: url(' + backgroundImage + ');';
+      tile.classList.add('background-image');
+    }
     const textBox = createElement('div', ['text-box'], null, tile);
-    createElement('div', ['icon-box', 'pictogram-' + icon.toLowerCase().split(' ').join('-')], null, textBox);
-    createElement('h4', ['title'], title, textBox);
-    textBox.appendChild(createButton({color: 'white', label: buttonlabel,link: link, iconPosition: 'icon-right', icon: null}))
+    if (icon && icon.length > 0) {
+      createElement('div', ['icon-box', 'pictogram-' + icon.toLowerCase().split(' ').join('-')], null, textBox);
+      createElement('h4', ['title'], title, textBox);
+      textBox.appendChild(createButton({elementType: 'span',color: 'white', label: buttonlabel,iconPosition: 'icon-right', icon: null, preventClick: false}))
+    }else{
+      createElement('h4', ['title', 'noicon'], title, textBox);
+      textBox.appendChild(createButton({elementType: 'span',color: 'white', label: buttonlabel, iconPosition: 'icon-right', icon: null, preventClick: false}))
+    }
+    
     return tile;
   }
-  
-
-  
 }

gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss

@@ -35,8 +35,12 @@
   h4{
     font-size: 22px;
   }
+  .text-box{
+    position: relative;
+  }
   &.infoteaser{
     background: linear-gradient(161deg, rgba(var(--theme-color-primary-rgb), 1) 0%, rgba(var(--theme-color-primary-rgb), 0.2) 100%);
+    position: relative;
     &:after{
       content:"";
       position:absolute;
@@ -47,6 +51,26 @@
       z-index:-1;
       background: linear-gradient(161deg, var(--theme-color-gradient-01) 40%, var(--theme-color-gradient-02) 80%, var(--theme-color-gradient-03) 120%);
     }
+    &.background-image{
+      background-size:cover;
+      &:after{
+        position:absolute;
+        top:0;
+        left:0;
+        bottom:0;
+        right:0;
+        z-index: 0;
+        content:"";
+        opacity: 0.6;
+        background: linear-gradient(87deg, #036 12.55%, rgba(1, 40, 81, 0.86) 56.52%, rgba(0, 51, 102, 0.00) 94.05%);
+        background-blend-mode: overlay;
+        
+      }
+      .text-box{
+        position: relative;
+        z-index: 1;
+      }
+    }
     .title, .category, .btn{
       color:white;
     }
@@ -57,6 +81,14 @@
       text-align: left;
       line-height: 24px;
       margin-bottom: 19px;
+      width: 100%;
+      &.noicon{
+        padding-left: 0;
+        min-height: 0;
+        + .btn{
+          margin-left: 0;
+        }
+      }
     }
     .btn{
       background-color: transparent;
@@ -69,14 +101,18 @@
       --button-padding: 8px 10px;
       min-height: 0;
       font-size: 22px;
+      &:after{
+        border-radius:16px;
+      }
     }
     .icon-box{
       margin-bottom: 19px;
       margin-top: 0;
       padding-top: 0;
       position: absolute;
-      top: 16px;
-      left: 12px;
+      top: 0;
+      left: 0;
+      
     }
     .text-box{
       padding: 0;

gfi-ihk-2024/stories/pages/common-content/CommonContent.stories.js

@@ -0,0 +1,18 @@
+import {createCommonContentPage} from "./CommonContentPage";
+
+export default {
+  title: 'Pages/Common Content Page',
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+
+  },
+}
+
+const Template = ({...args}) => {
+  return createCommonContentPage({...args});
+};
+
+export const CommonContentPage = Template.bind({});
+CommonContentPage.args = {};

gfi-ihk-2024/stories/pages/common-content/CommonContentPage.js

@@ -0,0 +1,36 @@
+import {createElement} from "../../_global/scripts/helpers";
+import {createHeader} from "../../components/header/HeaderComponent";
+import {createMagazineHeader} from "../../components/magazine-header/MagazineHeaderComponent";
+import {createPageDetails} from "../../components/page-details/PageDetailsComponent";
+import {createMagazineCover} from "../../components/magazine-cover/MagazineCoverComponent";
+import {createTeasersSection} from "../../sections/teasers/TeasersComponent";
+import {createFooter} from "../../components/footer/FooterComponent";
+import {createCommonContentArticle} from "../../components/common-content-article/CommonContentArticleComponent";
+
+export const createCommonContentPage = ({
+  kicker = 'Titelthema',
+  headline = '5 Beispiele, wie sich Unternehmen für ihr Umfeld engagieren',
+}) => {
+  const page = createElement('div', ['page', 'magazine-article']);
+  const header = createHeader({isZip: true});
+  const magazineHeader = createMagazineHeader({ size: 'narrow' });
+  page.appendChild(header);
+  page.appendChild(magazineHeader);
+
+  const wrapper = createElement('div', ['page-wrapper'], null, page);
+  wrapper.appendChild(createPageDetails({}));
+
+  const pageContent = createElement('main', ['page-content'], null, wrapper);
+  pageContent.appendChild(createMagazineCover({}));
+
+  const container = createElement('div', ['container'], null, pageContent);
+  const row = createElement('div', ['row'], null, container);
+  const article = createCommonContentArticle({});
+  row.appendChild(article);
+
+  pageContent.appendChild(createTeasersSection({type: 'magazine', showReadingTime: true, headline: 'Mehr interessante Artikel'}))
+
+  page.appendChild(createFooter({}));
+
+  return page;
+}

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

@@ -89,10 +89,7 @@ export const createMarketingHeader =
     const container2 = createElement('div', ['container', 'mainstage'], null, section);
     const row2 = createElement('div', ['row'], null, container2);
     const colslider = createElement('div', ['col', 'slidercontainer', 'rotation'], null, row2);
-
-    
-    //const col2 = createElement('div', ['col'], null, row2);
-    const sliderComponent = createElement('div', ['slider'], null, colslider);
+    const sliderComponent = createElement('div', ['slider', 'btnanimation'], null, colslider);
     slides.map((slideData, index) => {
       const slide = createElement('div', ['slide'], null, sliderComponent);
       const outer = createElement('outer', ['outer'], null, slide);
@@ -124,7 +121,7 @@ export const createMarketingHeader =
       if (slideData.cta && slideData.link) {
         const buttonP = createElement('p', [], '', textBox);
         const btn = createButton({
-          color: 'white', icon: 'pfeil-simple-rechts', iconPosition: 'icon-right', label: slideData.cta
+          color: 'white', icon: 'pfeil-simple-rechts', iconPosition: 'icon-right', label: slideData.cta, size: 'small',
         });
         buttonP.appendChild(btn);
       }
@@ -147,13 +144,13 @@ export const createMarketingHeader =
     if (type === 'infoteaser') {
       const col3 = createElement('div', ['col'], null, row2);
 
-      //const teasers = createMiniTeaser({teasers.type: 'standard'});
-      //col3.appendChild(teasers);
-
       teasers.map((t, i) => {
         if (i < maxItems) {
           var typ = 'standard'; 
-          if (i == 0 && t.type == 'infoteaser') typ = 'infoteaser';
+          if (i == 0 && t.type == 'infoteaser'){
+           typ = 'infoteaser';
+           section.classList.add('miniinfoteaser');
+          }
           const col4 = createElement('div', ['mt'], null, col3);
           const tea = createMiniTeaser({
             type : typ,
@@ -162,55 +159,6 @@ export const createMarketingHeader =
         }
       })
     }
-    /*
-    const hasImage = imageSrc && imageSrc.length > 0;
-    const stage = createElement('div', ['participation', 'participation-stage'], null, section);
-    const container2 = createElement('div', ['container'], null, stage);
-    const row2 = createElement('div', ['row'], null, container2);
-    const col2 = createElement('div', ['col'], null, row2);
-    const tb2 = createElement('div', ['text-box'], null, col2);
-  
-    if (backgroundImage && backgroundImage.length > 0) {
-      //section.content('style=background: red;');
-      stage.style = 'background-image: url(' + backgroundImage + ');';
-      stage.classList.add('background-image');
-    }
-  
-    if (isFirstElement) {
-      stage.classList.add('first-element');
-    }
-  
-    if (kicker && kicker.length > 0) {
-      createElement('p', ['kicker'], kicker, tb2);
-    }
-    if (showProgress) {
-      tb2.appendChild(createProgressBar({progress}));
-    }
-    createElement('h1', ['like-h2'], headline, tb2);
-    createElement('p', [], copy, tb2);
-    if (moreCta) {
-      const more = createElement('a', [], moreCta.label, tb2);
-      more.href = moreCta.link;
-      more.target = moreCta.target;
-    }
-    if (buttonCta) {
-      const button2 = createButton({
-        elementType: 'a',
-        link: buttonCta.link,
-        color: 'white',
-        label: buttonCta.label,
-        iconPosition: 'icon-right',
-        icon: 'small-arrow-right-simple',
-      });
-      tb2.appendChild(button2);
-    }
- 
-    if (hasImage) {
-      stage.classList.add('image-stage');
-      const ib2 = createElement('div', ['image-box'], null, col2);
-      createImage(imageSrc, 1080, 648, 'Beteiligung', [], ib2);
-    }
-     */
     return section;   
   
   }

gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss

@@ -2,26 +2,18 @@
 @import '../../_global/styles/vars';
 section.marketingheader{
   margin-top:0;
-  .rotation .slider{
-    border-bottom:0;
-    .slider-tabs{
-      li:first-child:last-child{
-        display:none;
-      }
+  &.miniinfoteaser{
+    .kicker{
+      color:var(--theme-color-secondary);
     }
-    .text-box{
-        color:var(--theme-color-primary);
-        &:not(:first-child)::before {
-          background-color: var(--theme-color-primary-dimmed-04);
-        }
-        .btn{
-          background-color: var(--theme-color-primary);
-          color:white;
-          &:hover:after{
-            box-shadow: 0 0 0 var(--button-hover-shadow-size) var(--theme-color-primary);
-          }
-        }
+    .mini-teaser{
+      .category{
+        color:var(--theme-color-secondary);
       }
+    }
+    .text-only .kicker{
+      color:white;
+    }
   }
   .search {
     position: relative;
@@ -29,7 +21,7 @@ section.marketingheader{
     margin: 0;
     background-color: var(--theme-color-primary-dimmed-04);
     max-height: 100px;
-    transition: all .5s cubic-bezier(0,1,0,1);
+    transition: all 1s ease-in;
     background-size:cover;
     @media (max-width:767px){
       max-height: 78px;
@@ -37,6 +29,10 @@ section.marketingheader{
     .sc.container{
       position: absolute;
       top: 0;
+      left: 0;
+      right: 0;
+      width: 100%;
+      max-width: 100%;
       @media (max-width:767px){
         position: relative;
         .close-search{
@@ -55,7 +51,7 @@ section.marketingheader{
           left:auto;
           cursor: pointer;
           transition: 0.3s ease;
-          border: 2px solid var(--theme-color-primary-dimmed-04);
+          border: 1px solid var(--theme-color-primary-dimmed-04);
           border-radius: 10px;
           height:34px;
           width:34px;
@@ -92,7 +88,7 @@ section.marketingheader{
         display:block !important;
       }
       .tiles{
-        margin-top:0;
+        top: 0;
         padding-bottom:9px;
         @media screen and (max-width:767px){
           padding-bottom:0;
@@ -208,11 +204,13 @@ section.marketingheader{
     }
 
     .tiles {
-      margin: 100px -8px 0 -8px;
+      margin: 0 -8px 0 -8px;
+      position: relative;
+      top: 100px;
       display: flex;
       flex-wrap: wrap;
       font-family: "Korb", sans-serif;
-      transition: all 0.25s ease-in;
+      transition: all 0.3s ease-in;
       padding-bottom: 0;
       @media(max-width: 767px) {
         //margin-left: -6px;
@@ -455,7 +453,10 @@ section.marketingheader{
     }
   }
   &.infoteaser{
-    max-height:427px;
+    border-radius: 4px;
+    .slide-overflow{
+      border-radius: 4px;
+    }
     outer{
       max-height:427px;
       height:427px;
@@ -465,16 +466,41 @@ section.marketingheader{
       }
     }
     .rotation {
-      @media screen and (max-width:900px){
-         .slider .text-box:first-child::after {
-          display: none;
+      padding:0;
+      @media screen and (max-width: 1000px) {
+        .slide:not(.text-only) .text-box{
+          padding: 16px 0;
+        }
+        .slide .image-box img{
+          position: static;
+          height:300px;
+        }
+        .slider-tabs{
+          top:0;
+          height: auto;
+          bottom: auto;
+          margin-top:15px;
         }
-        padding:0;
       }
+      @media screen and (max-width: 900px) {
+        .slider .image-box {
+          padding-left: var(--container-padding);
+          padding-right: var(--container-padding);
+        }
+        .slider .text-box:first-child::after {
+          display: none;
+        }
+      }    
       .text-box{
         min-height: 0;
       }
     }
+    outer{
+      border-radius: 4px;
+      .image-box img{
+        border-radius: 4px;
+      }
+    }
     .image-box{
       max-height:427px;
       min-height: 0;
@@ -519,8 +545,19 @@ section.marketingheader{
             .mt{
               height: 100%;
               padding: 8px 0;
+              @media screen and (max-width:575px){
+                padding: 4px 0;
+              }
               .mini-teaser{
                 height: 100%;
+                .text-box{
+                  height: 100%;
+                  flex-flow: column;
+                  justify-content: space-between;
+                  .btn{
+                    height: fit-content;
+                  }
+                }
               } 
             }
           }
@@ -553,18 +590,18 @@ section.marketingheader{
       }
       .slider{
         background-color: transparent;
-        
         .image-box img {
           @media screen and (max-width:900px) {
             height: 300px;
+
           }
           @media screen and (max-width:767px) {
             height: 300px;
           }
           
         }
-        .slide.text-only.current {
-          background: linear-gradient(-10deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%);
+        .slide.text-only.current{
+            background: linear-gradient(-10deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%);
         }
       }
       
@@ -646,49 +683,178 @@ section.marketingheader{
       }
     }
   }
-  .rotation{
-    margin:0;
-    @media screen and (max-width:900px){
-      .slider{
-        background-color: transparent;
-        .slider-tabs{
-          top:0;
-          height: auto;
-          bottom: auto;
-          margin-top:15px;
-          @media screen and (max-width:767px){
-            .btn{
-              --button-icon-padding: 30px;
-              --button-icon-offset: 5px;
-              --button-padding: 5px 10px;
-              --button-min-size: 30px;
-              margin: 2.5px;
-            }
+  .rotation .slider{
+    border-bottom:0;
+    
+    background-color: white;
+    h3{
+      margin-top: 4px;
+      margin-bottom: 8px;
+    }
+    .kicker{
+      margin-bottom:0;
+    }
+    p{
+      margin-bottom:0.4em;
+    }
+    .btn{
+      margin-top:0.4em;
+    }
+    &.ishovered .slider-tabs li.active button.btn::before{
+      animation-play-state: paused;
+    }
+    &.btnanimation{
+      .slider-tabs{
+        li.active{
+          button.btn::before{
+            animation: fillgrey 7s linear forwards;
           }
         }
+      }
+    }
+    .slider-tabs{
+      li:first-child:last-child{
+        display:none;
+      }
+      li.active{
+        button.btn{
+          background-blend-mode: overlay;
+        }
+      }
+      li{
+        button.btn{
+          position: relative;
+          border-radius: var(--border-radius-lg);
+          overflow:hidden;
+          
+        }
+        button.btn::before{
+          width:0;
+          background-color:var(--theme-grey-light);
+          content: "";
+          z-index:0;
+          height:100%;
+          position:absolute;
+          top:0;
+          bottom:0;
+          right:0;
+          left:0;
+          right:0;
+          display:block;
+          background-blend-mode: multiply;
+        }
+      }
+    }
+    .slide.text-only.current{
+      background: none;
+      outer{
+        background: linear-gradient(-10deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%);
         .text-box{
-          padding: var(--container-padding);
+          justify-content: center;
+        }
+      }
+    }
+    .text-box{
+        color:var(--theme-color-primary);
+        padding: 30px 36px 24px 36px;
+        display: flex;
+        flex-flow: column;
+        justify-content: center;
+        min-width: 324px;
+        &:not(:first-child)::before {
+          background-color: var(--theme-color-primary-dimmed-04);
+        }
+        .btn{
+          background-color: var(--theme-color-primary);
+          color:white;
+          &:hover:after{
+            box-shadow: 0 0 0 var(--button-hover-shadow-size) var(--theme-color-primary);
+          }
+        }
+      }
+      .text-only{
+         .text-box{
+            color:white;         
         }
+      }
+  }
+  .rotation{
+    margin:0;
+    @media (max-width: 1339px) {
+      .rotation .slider .text-box {
+        min-width: 324px;
+      }
+    }
+    @media (min-width: 1001px) {
+      .slider .text-box:not(:first-child)::before {
+        border-top-right-radius: 16% 50% !important;
+        border-bottom-right-radius: 16% 50% !important;
+        margin: -15% -8% -15% 20px;
+      }
+    }
+    @media (max-width:1000px){
+      .slider{
+        background-color: white;
+        
+        
         .text-box:not(:first-child)::before{
           display: none;
         }
         .image-box{
           order: 0;
+          height:auto;
+          max-height:none !important;
+          img{
+            aspect-ratio: 16 / 9;
+            height: auto !important;
+            max-height:none !important;
+            min-height: 177px !important;
+          }
           &:before{
             display: none;
           }
           img{
             position: static;
-            height:300px;
+            //height:300px;
+          }
+        }
+      }
+    }
+    @media screen and (max-width:900px){
+      .slider{
+        margin-bottom:20px;
+        .slide:not(.text-only){          
+          .text-box{
+            padding: 16px var(--container-padding) 0;
+          }
+        }
+        .slide.text-only{
+          padding-left: var(--container-padding);
+          padding-right: var(--container-padding);
+        }
+        .slider-tabs{
+          right: calc(var(--container-padding) + 10px);
+          top: 15px;
+          padding: 0;
+          margin: 0;
+          .btn{
+            margin-top:0 !important; 
           }
         }
       }
     }
     @media screen and (max-width:767px){
       .slider{
-        .image-box{
-          img{
-            height:250px;
+        .slide:not(.text-only) .text-box{
+          padding: 16px var(--container-padding);
+        }
+        .slider-tabs{
+          .btn{
+            --button-icon-padding: 30px;
+            --button-icon-offset: 5px;
+            --button-padding: 5px 10px;
+            --button-min-size: 30px;
+            margin: 2.5px;
           }
         }
       }
@@ -696,11 +862,7 @@ section.marketingheader{
     @media screen and (max-width:567px) {
       .slider {
         margin: 0;
-        .image-box{
-          img{
-            height:177px;
-          }
-        }
+        margin-bottom: 8px;
       }
     }
     .context-box{
@@ -708,3 +870,7 @@ section.marketingheader{
     }
   }
 }
+@keyframes fillgrey {
+  0%{width:0;}
+  100%{width:100%}
+}

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

@@ -5,16 +5,15 @@ import Slider from "../slider/slider";
 class IHKMHSlider {
   constructor(section) {
     this.section = section.addClass('initiated');
-    this.slides = section.children();
     this.slider = new Slider(section);
-    this.stringLength = 0;
-
-    this.slider.section.on('in-viewport slide-change', () => {
-      const curr = this.slider.currentSlide;
-      if (this.slides[curr].hasCounter) {
-        this.startCounter(curr);
-      }
-    })
+    this.slider.settings = {
+      loop: true,
+      autoplay: true,
+      infinite: true,
+      autoplaySpeed: 7000,
+      animationSpeed: 600,
+      startSlide: 1,
+    };
   }
 }
 

gfi-ihk-2024/stories/sections/slider/slider.js

@@ -24,7 +24,7 @@ class IHKSlider {
       infinite: true,
       autoplaySpeed: this.section.data('autoplay-speed') ? this.section.data('autoplay-speed') : 5000,
       animationSpeed: 600,
-      startSlide: 0,
+      startSlide: 0
     };
 
     this.initSlides();
@@ -114,8 +114,11 @@ class IHKSlider {
     this.slides.each(function (i) {
       const s = $(this);
       const li = $('<li/>').appendTo(tabsWrapper);
-
-      $('<button />').addClass('btn').appendTo(li).text(s.data('title') ? s.data('title') : i + 1);
+      
+      var button = $('<button />').addClass('btn').appendTo(li);
+      const span = $('<span/>').appendTo(button);
+      
+      span.text(s.data('title') ? s.data('title') : i + 1);
     });
 
     this.tabs = tabsWrapper.children();
@@ -269,10 +272,12 @@ class IHKSlider {
     this.section.on('mouseenter', () => {
       this.isHovered = true;
       clearTimeout(this.autoplayTimeout);
+      this.section.removeClass("btnanimation");
     })
     this.section.on('mouseleave', () => {
       this.isHovered = false;
       this.handleAutoplay();
+      this.section.addClass("btnanimation");
     })
 
     this.initScrollCheck();

gfi-ihk-2024/stories/sections/slider/slider.scss

@@ -342,7 +342,10 @@
       --button-hover-shadow-opacity: 0.4;
       margin: 5px;
       font-size: var(--font-size-h4);
-
+      span{
+        position:relative;
+        z-index:2;
+      }
       @media(max-width: 767px) {
         margin: 4px;
       }

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.009b7c48.iframe.bundle.js';
+      import './runtime~main.f5ad8e1a.iframe.bundle.js';
       
       import './16.08016f04.iframe.bundle.js';
       

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

@@ -1 +1 @@
-{"generatedAt":1710164420656,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"10.2.4"},"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":1710515779749,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"10.2.4"},"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"}}}