update gfi

gfi-ihk-2024/stories/_global/styles/_mixins.scss

@@ -104,15 +104,23 @@
   display: block;
   left: 100%;
   bottom: 0;
-  color: white;
+  color: var(--theme-color-white);
   font-size: 12px;
   line-height: 1.2;
-  text-shadow: 0 0 3px rgba(black, 0.6), 0 0 8px rgba(black, 0.6);
+  text-shadow: -2px 2px 0 #000;
   z-index: 2;
-  width: calc(66.6% + 7px);
-  padding: 8px 18px;
+  padding: 2px 6px 2px 4px;
   transform-origin: 0 100%;
   transform: rotate(-90deg);
+  background: #012d59;
+  white-space: nowrap;
+  max-width: calc(66.6% + 7px);
+  overflow: hidden;
+  transition: 0.3s ease;
+  @media(max-width: 767px) {
+    font-size: 10px;
+    max-width: 100%;
+  }
 }
 
 @mixin form-field {

gfi-ihk-2024/stories/components/document-list/document-list.scss

@@ -97,23 +97,7 @@
     }
 
     .copyright {
-      position: absolute;
-      left: 100%;
-      bottom: 0;
-      transform-origin: 0 100%;
-      color: var(--theme-color-white);
-      font-size: 12px;
-      line-height: 1.2;
-      text-shadow: 0 0 3px rgba(#000, 0.6), 0 0 8px rgba(#000, 0.6);
-      z-index: 2;
-      width: 66%;
-      padding: 8px 10px;
-      transform: rotate(-90deg);
-
-      @media(max-width: 767px) {
-        font-size: 10px;
-        padding: 6px 18px;
-      }
+      @include copyright;
     }
   }
 

gfi-ihk-2024/stories/components/election-result-list-item/election-result-list-item.scss

@@ -30,19 +30,7 @@
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
     .copyright {
-        bottom: 0;
-        color: var(--theme-color-white);
-        display: block;
-        font-size: 12px;
-        left: 100%;
-        line-height: 1.2;
-        padding: 8px;
-        position: absolute;
-        text-shadow: 0 0 3px rgba(0,0,0,.6),0 0 8px rgba(0,0,0,.6);
-        transform: rotate(-90deg);
-        transform-origin: 0 100%;
-        width: 66%;
-        z-index: 2;
+        @include copyright;
     }
   }
 

gfi-ihk-2024/stories/components/gallery/GalleryComponent.js

@@ -24,6 +24,9 @@ export const createGallery =
       imageDiv.dataset.full = item.src;
       imageDiv.dataset.width = item.width;
       imageDiv.dataset.height = item.height;
+      if (item.copyright) {
+        imageDiv.dataset.copyright = item.copyright;
+      }
     })
 
     $(document).ready(() => {

gfi-ihk-2024/stories/components/gallery/GalleryData.js

@@ -3,6 +3,7 @@ export const galleryData = [
     src: './dummy/placeholder-3-2.svg',
     width: 1470,
     height: 980,
+    copyright: '© Shutterstock'
   },
   {
     src: './dummy/placeholder-2-3.svg',

gfi-ihk-2024/stories/components/gallery/gallery.js

@@ -70,6 +70,9 @@ class IHKGallery {
     const first = this.items.first().addClass('loading');
     const a = $('<a href="' + first.data('full') + '" />').attr('data-index', 0).appendTo(first);
     const img = $('<img alt="' + first.attr("alt") + '" />').appendTo(a);
+    if (first.data('copyright')) {
+      $('<span class="copyright">' + first.data('copyright') + '</span>').appendTo(a);
+    }
 
     first.find('.image-description').appendTo(this.wrapper);
 

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

@@ -89,6 +89,7 @@
 
     .copyright {
       @include copyright;
+      opacity: 1 !important;
     }
   }
 

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

@@ -90,6 +90,7 @@
 
   .copyright {
     @include copyright;
+    bottom: 8px;
   }
 
   .chart-title {
@@ -146,6 +147,12 @@
     .image-box::after {
       height: var(--border-width-hover);
     }
+    .copyright {
+      bottom: 14px;
+      @media(max-width: 767px) {
+        bottom: 10px;
+      }
+    }
   }
 }
 
@@ -224,9 +231,6 @@
     }
 
     &[data-image-size='s'] {
-      .copyright {
-        width: 100%;
-      }
 
       .image-box::before {
         padding-top: 100%;
@@ -234,9 +238,6 @@
     }
 
     &[data-image-size='l'] {
-      .copyright {
-        width: 55%;
-      }
 
       .image-box::before {
         padding-top: 55%;

gfi-ihk-2024/stories/sections/election-detail/election-detail.scss

@@ -29,19 +29,7 @@
         margin: 0;
       }
       .copyright {
-        bottom: 0;
-        color: var(--theme-color-white);
-        display: block;
-        font-size: 12px;
-        left: 100%;
-        line-height: 1.2;
-        padding: 8px;
-        position: absolute;
-        text-shadow: 0 0 3px rgba(0,0,0,.6),0 0 8px rgba(0,0,0,.6);
-        transform: rotate(-90deg);
-        transform-origin: 0 100%;
-        width: 66%;
-        z-index: 2;
+        @include copyright;
       }
     }
 

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

@@ -24,11 +24,6 @@ section.marketingheader{
           height:auto;
         }
       }
-      .copyright {
-        @media screen and (max-width: 900px) {
-          left: calc(100% - 14px);
-        }
-      }
     }
   }
   .text-box{
@@ -643,10 +638,7 @@ section.marketingheader{
         }
       }
       .copyright {
-        bottom: 0;
-        @media screen and (min-width:901px) {
-          padding-bottom: 26px;
-        }
+        left: 100%;
       }
       .slider{
         background-color: transparent;

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

@@ -174,23 +174,10 @@
   }
 
   .copyright {
-    position: absolute;
-    display: block;
-    left: 100%;
-    bottom: 0;
-    transform-origin: 0 100%;
-    color: var(--theme-color-white);
-    font-size: 12px;
-    line-height: 1.2;
-    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.6), 0px 0px 8px rgba(0, 0, 0, 0.6);
-    z-index: 2;
-    width: 66%;
-    padding: 26px 8px;
-    transform: rotate(-90deg);
-
-    @media(max-width: 999px) {
-      font-size: 10px;
-      padding: 4px 6px;
+    @include copyright;
+    left: calc(100% - 20px);
+    @media screen and (min-width: 901px) and (max-width: 999px) {
+      left: 100%;
     }
   }
 

gfi-ihk-2024/stories/sections/survey/Survey.stories.js

@@ -1,4 +1,6 @@
 import {createSurvey} from "./SurveyComponent";
+import {SurveySimpleData} from "./SurveyData";
+import {SurveyComplexData} from "./SurveyData";
 
 export default {
   title: 'Sections/Survey',
@@ -16,5 +18,12 @@ const Template = ({...args}) => {
   return createSurvey({...args});
 };
 
-export const Survey = Template.bind({});
-Survey.args = {};
+export const SurveySimple = Template.bind({});
+SurveySimple.args = {
+  data: SurveySimpleData
+};
+
+export const SurveyComplex = Template.bind({});
+SurveyComplex.args = {
+  data: SurveyComplexData
+};

gfi-ihk-2024/stories/sections/survey/SurveyData.js

@@ -1,4 +1,4 @@
-export const SurveySimple = [
+export const SurveySimpleData = [
   {
     legend: null,
     name: 'vote',
@@ -10,7 +10,7 @@ export const SurveySimple = [
   }
 ]
 
-export const SurveyComplex = [
+export const SurveyComplexData = [
   {
     legend: 'Sie sind?',
     name: 'group',

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

@@ -536,23 +536,8 @@
   }
 
   .copyright {
-    position: absolute;
-    left: 100%;
-    bottom: 0;
-    transform-origin: 0 100%;
-    color: var(--theme-color-background);
-    font-size: 12px;
-    line-height: 1.2;
-    text-shadow: 0 0 3px rgba(var(--theme-color-text-intensed), 0.6), 0 0 8px rgba(var(--theme-color-text-intensed), 0.6);
-    z-index: 2;
-    width: 66%;
-    padding: 8px 20px;
-    transform: rotate(-90deg);
-
-    @media(max-width: 767px) {
-      font-size: 10px;
-      padding: 6px 18px;
-    }
+    @include copyright;
+    bottom: 8px;
   }
 
   img {