fixes april

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

@@ -17,7 +17,9 @@ class IHKAccordion {
         item.attr('aria-label', 'Klappmenü geschlossen');
       }
       if (this.section.data('single-open') !== false) {
-        item.siblings('.open').removeClass('open').find('.accordion-content').slideUp(300, 'easeOutQuad');
+        const siblingsToClose = item.siblings('.open');
+        siblingsToClose.attr('aria-label', 'Klappmenü geschlossen');
+        siblingsToClose.removeClass('open').find('.accordion-content').slideUp(300, 'easeOutQuad');
       }
     });
 

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

@@ -18,6 +18,11 @@
     list-style: none;
     border-bottom: 1px solid var(--theme-color-primary-dimmed-02);
 
+    .richtext & {
+      padding: 0;
+      margin: 0;
+    }
+
     @media(max-width: 567px) {
       margin: 0 calc(var(--container-padding) * -1);
       --accordion-icon-width: var(--container-padding);

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

@@ -4,21 +4,26 @@ const $ = global.$;
 class IHKSearchAccordion {
   constructor(section) {
     this.section = section.addClass('initiated');
-    this.section.find('#search-term').attr('aria-label', 'Klappmenü geschlossen');
+    // this.section.find('#search-term').attr('aria-label', 'Klappmenü geschlossen');
 
-    this.section.find('#search-term').off('click').on('click', (e) => {
+    const openSearchHandler = (e) => {
       e.preventDefault();
       section.addClass('open');
       if(section.hasClass('open')){
-        section.attr('aria-label', 'Klappmenü geöffnet');
+        // section.attr('aria-label', 'Klappmenü geöffnet');
       }
       else{
-        section.attr('aria-label', 'Klappmenü geschlossen');
+        // section.attr('aria-label', 'Klappmenü geschlossen');
       }
       if (this.section.data('single-open') !== false) {
         section.siblings('.open').removeClass('open').find('.tiles').slideUp(300, 'easeOutQuad');
       }
-    });
+    }
+
+    this.section.find('#search-term')
+        .off('click focus')
+        .on('click focus', openSearchHandler);
+
     /* CLOSE */
     this.section.find('.close-search').off('click').on('click', (e) => {
       e.preventDefault();
@@ -35,10 +40,10 @@ class IHKSearchAccordion {
       setTimeout(() => {
         section.removeClass('open');
         if(section.hasClass('open')){
-          section.attr('aria-label', 'Klappmenü geschlossen');
+          // section.attr('aria-label', 'Klappmenü geschlossen');
         }
         else{
-          section.attr('aria-label', 'Klappmenü geöffnet');
+          // section.attr('aria-label', 'Klappmenü geöffnet');
         }
       }, 100);
     });

gfi-ihk-2024/stories/sections/tile-grid/TileGrid.stories.js

@@ -17,4 +17,4 @@ const Template = ({...args}) => {
 };
 
 export const TileGrid = Template.bind({});
-TileGrid.args = {};
+TileGrid.args = {};

gfi-ihk-2024/stories/sections/tile-grid/TileGridComponent.js

@@ -1,6 +1,8 @@
 import './tile-grid.scss';
 import {createElement, createImage} from "../../_global/scripts/helpers";
 import {TileGridData} from "./TileGridData";
+import IHKTileGrid from "./tile-grid";
+import IHKEventOverviewTiles from "../eventoverview-stage/eventoverview";
 
 export const createTileGrid = ({
   headline = 'Daten und Fakten auf einen Blick',
@@ -20,10 +22,21 @@ export const createTileGrid = ({
 
     group.tiles.map((item) => {
       const tile = createElement('div', ['tile'], null, col);
-      const tileLink = createElement('a', ['tile-outer'], null, tile);
-      tileLink.href = item.url;
-      const iconBox = createElement('div', ['icon'], null, tileLink);
-      createImage(item.icon, 220, 220, ['icon'], [], iconBox);
+      let tileLink;
+      if (item.url) {
+        tileLink = createElement('a', ['tile-outer'], null, tile);
+        tileLink.href = item.url;
+      } else {
+        tileLink = createElement('span', ['tile-outer'], null, tile);
+      }
+      if (item.icon) {
+        const iconBox = createElement('div', ['icon'], null, tileLink);
+        createImage(item.icon, 220, 220, ['icon'], [], iconBox);
+      }
+      if (item.dynamicIcon) {
+        const iconBox = createElement('div', ['icon','dynamic-icon'], null, tileLink);
+        iconBox.classList.add(item.dynamicIcon);
+      }
       const p = createElement('p', [], null, tileLink);
       const num = createElement('span', ['number'], item.number, p);
       if (item.unit) {
@@ -31,6 +44,7 @@ export const createTileGrid = ({
       }
       createElement('span', ['label'], item.label, p);
     })
+    new IHKTileGrid($(section));
   })
 
   return section;

gfi-ihk-2024/stories/sections/tile-grid/TileGridData.js

@@ -8,25 +8,30 @@ export const TileGridData = [
         number: '5.235',
         unit: null,
         label: 'Vollversammlungs­mitglieder',
-        url: '#',
       }, {
-        icon: './dummy/tile-grid/tile-02.svg',
+        dynamicIcon: 'pictogram-bueroklammer',
         number: '78',
         unit: '%',
         label: 'KMU-Vertreter in IHK-Vollversammlungen',
         url: '#',
       }, {
-        icon: './dummy/tile-grid/tile-03.svg',
+        dynamicIcon: 'pictogram-gruppe-idee',
         number: '22',
         unit: '%',
         label: 'weibliche Mitglieder in IHK-Vollversammlungen',
         url: '#',
       }, {
-        icon: './dummy/tile-grid/tile-04.svg',
+        dynamicIcon: 'pictogram-rakete-a',
         number: '163.000',
         unit: null,
         label: 'ehrenamtliche Prüfer in Aus- und Weiterbildung',
         url: '#',
+      }, {
+        dynamicIcon: 'pictogram-reisepass',
+        number: '127.400',
+        unit: null,
+        label: 'männliche Mitglieder in IHK-Vollversammlungen',
+        url: '#',
       },
     ],
   },
@@ -35,7 +40,6 @@ export const TileGridData = [
     titleUrl: '#',
     tiles: [
       {
-        icon: './dummy/tile-grid/tile-05.svg',
         number: '286.000',
         unit: null,
         label: 'abgenommene Abschlussprüfungen in der Ausbildung',
@@ -60,11 +64,9 @@ export const TileGridData = [
     titleUrl: '#',
     tiles: [
       {
-        icon: './dummy/tile-grid/tile-08.svg',
         number: '1.9',
         unit: 'Mio.',
         label: 'Außenwirtschafts­bescheinigungen ausgestellt',
-        url: '#',
       }, {
         icon: './dummy/tile-grid/tile-09.svg',
         number: '177.000',

gfi-ihk-2024/stories/sections/tile-grid/tile-grid.js

@@ -0,0 +1,57 @@
+import $ from 'jquery';
+
+class IHKTileGrid {
+  constructor(section) {
+    this.$dynamicIcon = $(section);
+    this.iconSize();
+
+    // Event-Listener für Resize
+    $(window).on('resize', () => {
+      this.iconSize();
+    });
+  }
+
+  iconSize() {
+    // Die Höhe des Parent-Elements (tile-outer) holen
+    const $tileOuter = this.$dynamicIcon.closest('.tile-outer');
+
+    // Prüfen ob das Element existiert und sichtbar ist
+    if ($tileOuter.length && $tileOuter.is(':visible')) {
+      const containerHeight = $tileOuter.outerHeight();
+
+      // Nur setzen wenn containerHeight gültig ist
+      if (containerHeight && containerHeight > 0) {
+        this.$dynamicIcon.css('--icon-height', `${containerHeight}px`);
+        console.log('Icon höhe gesetzt:', containerHeight, 'px für', this.$dynamicIcon);
+      } else {
+        console.warn('Ungültige Höhe:', containerHeight);
+        // Fallback setzen
+        this.$dynamicIcon.css('--icon-height', '100%');
+      }
+    } else {
+      console.warn('Tile-outer nicht gefunden oder nicht sichtbar');
+      // Fallback setzen
+      this.$dynamicIcon.css('--icon-height', '100%');
+    }
+  }
+}
+
+export default IHKTileGrid;
+
+// Nur einmal initialisieren, aber mit besserer Timing-Sicherheit
+function initIcons() {
+  $('.tile-grid .dynamic-icon').each((i, el) => {
+    new IHKTileGrid(el);
+  });
+}
+
+// Bei allen relevanten Events ausführen
+$('body').on('ihk-init dynamic-component-loaded gfi-dynamic-init', initIcons);
+
+// Beim Laden der Seite und kurz danach nochmal (für Storybook)
+$(document).ready(() => {
+  initIcons();
+
+  // Nach kurzer Verzögerung nochmal ausführen, falls DOM noch ändert
+  setTimeout(initIcons, 500);
+});

gfi-ihk-2024/stories/sections/tile-grid/tile-grid.scss

@@ -36,7 +36,7 @@
     }
 
     &:nth-child(odd) {
-      .tile a {
+      .tile .tile-outer {
         background-color: var(--theme-color-secondary-dimmed);
         color: var(--theme-color-secondary-intensed);
       }
@@ -90,7 +90,7 @@
       }
     }
 
-    a {
+    .tile-outer {
       position: relative;
       display: block;
       background-color: var(--theme-color-primary-dimmed-04);
@@ -153,6 +153,23 @@
         height: 100%;
         float: right;
       }
+      &.dynamic-icon {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        &:before {
+          display: block;
+          height: 100%;
+          width: 100%;
+          position: absolute;
+          right: -8px;
+          top: 0;
+          font-family: "Pictograms", sans-serif;
+          color: var(--theme-color-white);
+          font-size: calc(var(--icon-height, 1em) + 14px);
+          line-height: 1;
+        }
+      }
     }
 
     p {