From ced759c62780049ed2b570a2cfb8714777a300aa Mon Sep 17 00:00:00 2001
From: Florian Eisenmenger <floeis@MBP-von-Florian.fritz.box>
Date: Wed, 4 Oct 2023 16:47:45 +0200
Subject: [PATCH] slider fix and change

---
 .../sections/slider/SliderComponent.js        | 20 ++++++++
 .../stories/sections/slider/SliderData.js     |  2 +
 storybook/stories/sections/slider/slider.scss | 47 +++++++++++++++++++
 3 files changed, 69 insertions(+)

diff --git a/storybook/stories/sections/slider/SliderComponent.js b/storybook/stories/sections/slider/SliderComponent.js
index 1fab013..bb7972a 100644
--- a/storybook/stories/sections/slider/SliderComponent.js
+++ b/storybook/stories/sections/slider/SliderComponent.js
@@ -16,10 +16,18 @@ export const createSlider =
     slides.map((slideData, index) => {
       const slide = createElement('div', ['slide'], null, sliderComponent);
       const outer = createElement('outer', ['outer'], null, slide);
+      const contextBoxContent = slideData.context ? slideData.context : '';
+      const contextBoxContentImg = slideData.contextImg ? slideData.contextImg : '';
 
       if (slideData.imageSrc && slideData.imageSrc.length > 0) {
         const imageBox = createElement('div', ['image-box'], null, outer);
         createImage(slideData.imageSrc, 900, 600, 'Slide ' + index, [], imageBox);
+        if (contextBoxContentImg) {
+          const contentBoxImg = createElement('div', ['context-box', 'context-box--image'], null, imageBox);
+          createImage(contextBoxContentImg, 200, 50, '', [], contentBoxImg);
+        } else if (contextBoxContent) {
+          createElement('div', ['context-box'], contextBoxContent, imageBox);
+        }
       }
 
       const textBox = createElement('div', ['text-box'], null, outer);
@@ -40,6 +48,18 @@ export const createSlider =
         });
         buttonP.appendChild(btn);
       }
+
+      if (!slideData.imageSrc || slideData.imageSrc.length <= 0) {
+        if (contextBoxContent) {
+          textBox.classList.add('context');
+          if (contextBoxContentImg) {
+            const contentBox = createElement('div', ['context-box', 'context-box--image'], null, textBox);
+            createImage(contextBoxContentImg, 200, 50, '', [], contentBox);
+          } else if (contextBoxContent) {
+            createElement('div', ['context-box'], contextBoxContent, textBox);
+          }
+        }
+      }
     })
 
     new IHKSlider($(sliderComponent));
diff --git a/storybook/stories/sections/slider/SliderData.js b/storybook/stories/sections/slider/SliderData.js
index e5f6096..5cd440c 100644
--- a/storybook/stories/sections/slider/SliderData.js
+++ b/storybook/stories/sections/slider/SliderData.js
@@ -6,6 +6,7 @@ export const sliderData = [
     imageSrc: 'https://source.unsplash.com/9_bDrvW7bA8/900x600',
     cta: 'Mehr erfahren',
     link: '#',
+    contextImg: './logos/wirtschaftsdialoge.svg',
   },
   {
     kicker: 'Lorem Ipsum dolor 2',
@@ -14,6 +15,7 @@ export const sliderData = [
     imageSrc: null,
     cta: 'Mehr erfahren',
     link: '#',
+    context: 'Wirtschaftsmagazin',
   },
   {
     kicker: 'Lorem Ipsum dolor 2',
diff --git a/storybook/stories/sections/slider/slider.scss b/storybook/stories/sections/slider/slider.scss
index 65b564e..948cd8f 100644
--- a/storybook/stories/sections/slider/slider.scss
+++ b/storybook/stories/sections/slider/slider.scss
@@ -261,6 +261,53 @@
     }
   }
 
+  .context-box {
+    position: absolute;
+    right: 0;
+    top: 40px;
+    z-index: 100;
+    min-width: 100px;
+    min-height: 47px;
+    padding: 8px 10px 10px 10px;
+    @include h4();
+    margin: 0;
+    text-align: right;
+    color: var(--theme-color-white);
+    background: linear-gradient(90deg, var(--theme-color-gradient-01) 25%,var(--theme-color-gradient-02) 57%,var(--theme-color-gradient-03) 112%);
+    @media(max-width: 999px) {
+      min-height: auto;
+    }
+    &--image {
+      padding: 4px 10px;
+      display: flex;
+      img {
+        height: 39px;
+      }
+    }
+  }
+  .image-box {
+    .context-box {
+      right: 20px;
+      @media(max-width: 999px) {
+        top: 110px;
+        right: 0;
+      }
+      @media(max-width: 567px) {
+        top: 60px;
+      }
+      @media(max-width: 319px) {
+        top: 40px;
+      }
+    }
+  }
+  .text-box {
+    &.context {
+      @media(max-width: 767px) {
+        padding-top: 100px;
+      }
+    }
+  }
+
   .slider-tabs {
     position: absolute;
     display: flex;