develop components

gfi-ihk-2024/stories/components/accordion/AccordionComponent.js

@@ -18,7 +18,6 @@ export const createAccordion =
     }
 
     const ul = createElement('ul', type === 'regular' ? ['linklist'] : [], null, accordion);
-    ul.role = "tablist";
 
     if (type === 'regular') {
       items.map((item) => {

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

@@ -47,12 +47,15 @@
         background-color: var(--theme-color-secondary-dimmed);
       }
       */
+      /*
       &.open {
         .accordion-toggler {
           background-color: var(--theme-color-secondary-dimmed);
           color: var(--theme-color-secondary-intensed);
         }
       }
+
+       */
     }
   }
 

gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss

@@ -23,7 +23,7 @@
       left: 0 !important;
       transform: none !important;
     }
-  }
+}
 
   &.single-slide {
     .controls {
@@ -132,7 +132,7 @@
       background-color: transparent;
       padding: 0;
       cursor: pointer;
-
+      
     }
     .slider-tabs, .tabs {
       position: absolute;
@@ -189,7 +189,7 @@
         }
       }
     }
-
+    
     .prev, .next {
       position: absolute;
       top: -94px;
@@ -202,7 +202,7 @@
       right:auto;
       border-radius: 24px;
       background: var(--theme-color-primary-dimmed-04);
-      --button-hover-shadow-opacity: 0.4;
+      --button-hover-shadow-opacity: 0.4; 
       --button-hover-shadow-size: 6px ;
       @media(max-width: 1470px) {
         left:auto;
@@ -216,7 +216,7 @@
         top: -80px;
       }
       @media(max-width: 767px) {
-
+      
       }
       &:before {
         @include icon-small-arrow-right-simple;
@@ -241,7 +241,7 @@
         opacity: 0.4;
         box-shadow: 0 0 0 6px var(--theme-color-primary-dimmed-04);
       }
-
+      
     }
 
     .prev {

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

@@ -1,8 +1,8 @@
-import $ from 'jquery';
+import $ from "jquery";
 
 class IHKSocialBox {
   constructor(socialBox) {
-    this.box = socialBox.addClass('initiated')
+    this.box = socialBox.addClass("initiated");
 
     this.checkHtmlFragmentCookiesAreSet(socialBox);
     this.checkIframe();
@@ -10,22 +10,25 @@ class IHKSocialBox {
 
   checkIframe() {
     setTimeout(() => {
-      const iframe = this.box.find('iframe');
+      const iframe = this.box.find("iframe");
       if (iframe.length) {
-        iframe.attr('tabindex', '-1');
+        iframe.attr("tabindex", "-1");
       } else {
         this.checkIframe();
       }
-    }, 1000)
+    }, 1000);
   }
 
   checkHtmlFragmentCookiesAreSet(socialBox) {
+    if (socialBox.data("useconsent")) {
+      return;
+    }
     let socialMediaProtectionText = socialBox.data("socialmediaprotection");
     let socialMediaType = socialBox.data("socialmediatype");
     let cookieBot = socialBox.data("usecookiebot");
 
-    if(socialBox.find('iframe').length > 0) {
-      let iframeElement = socialBox.find('iframe')[0];
+    if (socialBox.find("iframe").length > 0) {
+      let iframeElement = socialBox.find("iframe")[0];
       this.checkIframeCookieIsSet(socialMediaProtectionText, socialMediaType, cookieBot, iframeElement, socialBox);
     } else {
       this.checkEmbedCookieIsSet(socialMediaProtectionText, socialMediaType, cookieBot, socialBox);
@@ -38,7 +41,12 @@ class IHKSocialBox {
     }
     if (document.cookie.indexOf("social-media-consent-" + socialMediaType) === -1) {
       this.hideIframeElement(iframeElement);
-      let textWithCheckbox = '<div class="social-media-protection-text-with-checkbox"> <input name="socialMediaType" type="checkbox" id=' + socialMediaType + '> <label id="textElement">' + socialMediaProtectionText + '</label> </div>';
+      let textWithCheckbox =
+        '<div class="social-media-protection-text-with-checkbox"> <input name="socialMediaType" type="checkbox" id=' +
+        socialMediaType +
+        '> <label for="' + socialMediaType + '">' +
+        socialMediaProtectionText +
+        "</label> </div>";
 
       $(socialBoxElement).append(textWithCheckbox);
 
@@ -48,14 +56,17 @@ class IHKSocialBox {
   }
 
   checkEmbedCookieIsSet(socialMediaProtectionText, socialMediaType, cookieBot, socialBoxElement) {
-    let scriptElements = socialBoxElement.find('script');
-    let imageElements = socialBoxElement.find('img');
+    let scriptElements = socialBoxElement.find("script");
+    let imageElements = socialBoxElement.find("img");
     if (cookieBot) {
       $(scriptElements).data("cookieconsent", "marketing");
       $(imageElements).data("cookieconsent", "marketing");
     }
     if (document.cookie.indexOf("social-media-consent-" + socialMediaType) === -1) {
-      let textWithCheckbox = '<div class="social-media-protection-text-with-checkbox"> <input name="socialMediaType" type="checkbox"> <label id="textElement">' + socialMediaProtectionText + '</label> </div>';
+      let textWithCheckbox =
+        '<div class="social-media-protection-text-with-checkbox"> <input name="socialMediaType" id="' + socialMediaType + '" type="checkbox"> <label for="' + socialMediaType + '">' +
+        socialMediaProtectionText +
+        "</label> </div>";
 
       $(textWithCheckbox).appendTo(socialBoxElement);
 
@@ -80,17 +91,17 @@ class IHKSocialBox {
     expirationDate.setDate(expirationDate.getDate() + expirationDays);
 
     // Checkbox wurde angeklickt, Cookie setzen
-    document.cookie = "social-media-consent-" + socialMediaType + "=true; expires=" + expirationDate.toUTCString() + ";";
+    document.cookie =
+      "social-media-consent-" + socialMediaType + "=true; expires=" + expirationDate.toUTCString() + ";";
 
-    console.log("Cookie wurde gesetzt!");
     // Finde alle Elemente mit dem selben socialMediaType
     let self = this;
     $(`[data-socialmediatype=${socialMediaType}]`).each(function () {
       let currentBox = $(this);
       currentBox.find(".social-media-protection-text-with-checkbox").hide();
-      let scriptElements = currentBox.find('script');
-      let imageElements = currentBox.find('img');
-      let iframeElements = currentBox.find('iframe');
+      let scriptElements = currentBox.find("script");
+      let imageElements = currentBox.find("img");
+      let iframeElements = currentBox.find("iframe");
 
       self.showElements(scriptElements);
       self.showElements(imageElements);
@@ -108,16 +119,16 @@ class IHKSocialBox {
 
   showElement(htmlFragment) {
     let $element = $(htmlFragment);
-    let elementType = $element.prop('tagName').toLowerCase();
-    let dataSrc = $element.attr('data-src');
-    if (typeof dataSrc === 'undefined') {
-      dataSrc = $element.attr('src');
+    let elementType = $element.prop("tagName").toLowerCase();
+    let dataSrc = $element.attr("data-src");
+    if (typeof dataSrc === "undefined") {
+      dataSrc = $element.attr("src");
     }
-    if (elementType === 'script') {
-      $element.attr('src', dataSrc);
+    if (elementType === "script") {
+      $element.attr("src", dataSrc);
       $element.show();
-    } else if (elementType === 'img' || elementType === 'iframe') {
-      $element.attr('src', dataSrc);
+    } else if (elementType === "img" || elementType === "iframe") {
+      $element.attr("src", dataSrc);
       $element.show();
     }
   }
@@ -125,8 +136,8 @@ class IHKSocialBox {
 
 export default IHKSocialBox;
 
-$('body').on('ihk-init dynamic-component-loaded gfi-dynamic-init', function () {
-  $('.social-box:not(.initiated)').each(function () {
+$("body").on("ihk-init dynamic-component-loaded gfi-dynamic-init", function () {
+  $(".social-box:not(.initiated)").each(function () {
     new IHKSocialBox($(this));
-  })
-})
+  });
+});

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

@@ -8,7 +8,7 @@ section.social {
     }
   }
 
-  h2 {
+  h2, .like-h2 {
     margin-bottom: 0.4em;
   }
 

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

@@ -51,7 +51,7 @@
   }
 
   &[data-type="hero"]{
-    .image-box ~ .text-box {
+    .image-box ~ .text-box, .image-box ~ .text-box .title {
       .magazine-indicator{
         top: -16px;
       }
@@ -59,7 +59,7 @@
   }
 
   .image-box ~ .text-box {
-    h4{
+    h4, .like-h4 {
       position: relative;
       .magazine-indicator{
         top: -40px;
@@ -158,7 +158,8 @@
       margin-top: 0 !important;
     }
 
-    &[data-type="hero"] .teaser:not(.video-teaser-wrapper) .image-box ~ .text-box h4 {
+    &[data-type="hero"] .teaser:not(.video-teaser-wrapper) .image-box ~ .text-box h4,
+      &[data-type="hero"] .teaser:not(.video-teaser-wrapper) .image-box ~ .text-box .like-h4 {
       background-color: var(--theme-grey-light);
     }
   }
@@ -224,12 +225,12 @@
         margin-left: 10px;
       }
 
-      h4 {
+      h4, .like-h4 {
         margin-top: 0;
       }
 
       &[data-type="hero"] .image-box + .text-box {
-        h3, h4 {
+        h3, h4, .like-h4 {
           position: relative;
           font-size: 20px;
           margin-top: 0;
@@ -369,14 +370,14 @@
   }
 
   a.teaser {
-    h3, h4 {
+    h3, h4, .like-h4 {
       text-decoration: underline;
       text-underline-offset: 0.09em;
       text-decoration-thickness: 0.08em;
     }
   }
 
-  h3, h4 {
+  h3, h4, .like-h4 {
     margin: 16px 0 14px;
     color: var(--theme-color-link);
     transition: 0.3s ease;
@@ -562,7 +563,7 @@
     .image-box ~ .text-box {
       padding-top: 16px;
 
-      h4 {
+      h4, .like-h4 {
         position: absolute;
         bottom: 100%;
         z-index: 1;
@@ -616,7 +617,7 @@
     height: 14px;
   }
 
-  h3, h4 {
+  h3, h4, .like-h4 {
     color: var(--theme-color-link-hover);
   }
 }

gfi-ihk-2024/stories/sections/video-stage/video-stage.scss

@@ -28,6 +28,7 @@
       object-fit: cover;
       background: green;
     }
+
     .video--controls {
       position: absolute;
       left: 20px;
@@ -36,6 +37,7 @@
       gap: 20px;
       z-index: 10;
     }
+
     .video--play-pause,
     .video--mute-unmute {
       display: block;