Tile Grid Copy

gfi-ihk-2024/stories/components/infobox/Infobox.stories.js

@@ -35,17 +35,17 @@ Secondary.args = {
   full: true,
 };
 
-export const Warning = Template.bind({});
-Warning.args = {
-  type: 'warning',
-};
-
-export const Error = Template.bind({});
-Error.args = {
-  type: 'error',
-};
-
-export const Success = Template.bind({});
-Success.args = {
-  type: 'success',
-};
+// export const Warning = Template.bind({});
+// Warning.args = {
+//   type: 'warning',
+// };
+//
+// export const Error = Template.bind({});
+// Error.args = {
+//   type: 'error',
+// };
+//
+// export const Success = Template.bind({});
+// Success.args = {
+//   type: 'success',
+// };

gfi-ihk-2024/stories/components/infobox/InfoboxComponent.js

@@ -28,7 +28,9 @@ export const createInfobox =
             const olEl = createElement('ol', [], null, content);
             createElement('li', [], ol, olEl);
 
-            content.appendChild(createBlockquote({}));
+            content.appendChild(createBlockquote({
+                author: ''
+            }));
 
             let button;
             if (type === 'secondary') {

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

@@ -1,20 +1,25 @@
 @import '../../_global/styles/mixins';
 @import '../../_global/styles/vars';
 
-.infobox,
-.richtext div.strong,
-article.col div.strong {
-  position: relative;
+
+.infobox {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 60px;
+}
+
+.infobox,
+.richtext div.strong,
+article.col div.strong {
+  position: relative;
   margin: calc(3% + 26px) 0;
   background-color: var(--theme-color-secondary-dimmed);
   padding: var(--content-box-padding);
-  border-top-left-radius: calc(4 * (var(--border-radius-xs)));
-  border-top-right-radius: calc(4 * (var(--border-radius-xs)));
+  border-radius: calc(4 * (var(--border-radius-xs)));
+  overflow: hidden;
   @media (max-width: 767px) {
+    border-radius: calc(2 * (var(--border-radius-xs)));
     padding-top: calc(2 * var(--content-box-padding));
     padding-bottom: calc(2 * var(--content-box-padding));
   }
@@ -27,9 +32,7 @@ article.col div.strong {
     background: var(--theme-color-secondary);
     position: absolute;
     left: 0;
-    bottom: calc(-1 * var(--border-width));
-    border-bottom-left-radius: calc(4 * (var(--border-radius-xs)));
-    border-bottom-right-radius: calc(4 * (var(--border-radius-xs)));
+    bottom: 0;
   }
 
   &.success {
@@ -61,6 +64,9 @@ article.col div.strong {
     blockquote {
       border-left-color: var(--theme-color-primary);
     }
+    .icon-box {
+      color: var(--theme-color-primary);
+    }
   }
 
   > *:first-child {

gfi-ihk-2024/stories/components/testimonial/TestimonialComponent.js

@@ -15,7 +15,7 @@ export const createTestimonial =
     let output;
     let div;
     if (article === true) {
-        output = createElement('div', ['has-sidebar'], null);
+        output = createElement('div', ['small-quote'], null);
         div = createElement('div', ['image-text', 'is-blockquote'], null, output);
     } else {
         div = createElement('div', ['image-text', 'is-blockquote'], null);
@@ -25,11 +25,11 @@ export const createTestimonial =
     createImage(image, 1280, 1280, '', [], div2);
 
     const blockquote = createElement('blockquote', [], null, div3);
-    createElement('p', [], text, blockquote);
+    createElement('div', ['text'], text, blockquote);
     const div4 = createElement('div', ['author-text'], null, blockquote);
     const div5 = createElement('div', ['author-text--inner'], null, div4);
-    createElement('p', ['author'], author, div5);
-    createElement('p', ['author-subline'], subline, div5);
+    createElement('div', ['text', 'author'], author, div5);
+    createElement('div', ['text', 'author-subline'], subline, div5);
 
     if (article === true) {
         console.log(article);

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

@@ -1,10 +1,10 @@
 import $ from 'jquery';
 
 function moveTestimonialImage() {
-    $('.has-sidebar .image-text').each(function () {
+    $('.small-quote .image-text').each(function () {
         var $container = $(this);
         var $image = $container.children('.image-text--image');
-        var $firstParagraph = $container.find('.image-text--text blockquote > p:first-child');
+        var $firstParagraph = $container.find('.image-text--text blockquote > div:first-child');
 
         if ($image.length === 0) return;
 
@@ -28,4 +28,4 @@ $(document).ready(function () {
     moveTestimonialImage();
 });
 
-$(window).on('resize', moveTestimonialImage);
+$(window).on('resize', moveTestimonialImage);

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

@@ -22,7 +22,7 @@
     @media(min-width: 1110px) {
       font-size: 42px;
    }
-   + p {
+    + .text {
       font-size: 18px;
       @media(min-width: 768px) {
        font-size: 22px;
@@ -73,15 +73,16 @@
     border-left: 0;
     font-style: normal;
     font-weight: 300;
-    margin: calc(var(--section-margin)*.6) 0;
+    margin: 116px 0 0 0;
     padding: 0 20px 0 40px;
     @media(max-width: 767px) {
+      margin-top: calc(var(--section-margin)*.6);
       padding: 0;
     }
-    p {
+    .text {
       font-size: var(--font-size-h2);
       line-height: 1.2;
-      &:not(.author, .author-subline) {
+      &:not(.author):not(.author-subline) {
         font-family: "Korb", sans-serif;
         position: relative;
         &:before {
@@ -174,7 +175,7 @@
   }
 }
 
-.has-sidebar {
+.small-quote {
   .image-text {
     &.is-blockquote {
       .image-text--image {
@@ -199,7 +200,7 @@
         width: auto;
       }
       blockquote {
-        p:not(.author, .author-subline) {
+        .test:not(.author):not(.author-subline) {
           margin-left: -40px;
           padding-bottom: 65px;
           padding-left: 30px;

gfi-ihk-2024/stories/pages/tile-grid/TileGridPage.js

@@ -2,7 +2,7 @@ import {createElement} from "../../_global/scripts/helpers";
 import {createHeader} from "../../components/header/HeaderComponent";
 import {createMagazineCover} from "../../components/magazine-cover/MagazineCoverComponent";
 import {createMagazineArticle} from "../../components/magazine-article/MagazineArticleComponent";
-import {createTileGrid} from "../../sections/tile-grid/TileGridComponent";
+import {createTileGrid} from "../../sections/tile-grid-wood/TileGridWoodComponent";
 import {createFooter} from "../../components/footer/FooterComponent";
 import {lorem1, lorem2} from "../../_global/scripts/lorem";
 

gfi-ihk-2024/stories/sections/superlist/SuperlistComponent.js

@@ -11,7 +11,7 @@ export const createSuperlistSection = ({
     centered = false,
 }) => {
     const section = createElement('section', centered ? ['superlist', 'centered'] : ['superlist']);
-    const container = createElement('div', ['container'], null, section);
+    const container = createElement('div', ['list-container'], null, section);
     createElement('p', ['kicker'], kicker, container);
     createElement('h2', [], headline, container);
     createElement('p', [], paragraph, container);

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

@@ -18,7 +18,8 @@
     padding-top: 60px;
     padding-bottom: 60px;
   }
-  .container {
+  .list-container {
+      padding: 0 var(--content-box-padding);
 
     .button-container {
       display: flex;
@@ -41,4 +42,4 @@
       padding-bottom: 40px;
     }
   }
-}
+}

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

@@ -0,0 +1,20 @@
+import {createTileGrid} from "./TileGridWoodComponent";
+import {TileGridWoodData} from "./TileGridWoodData";
+
+export default {
+  title: 'Sections/Tile Grid Wood',
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    headline: 'Daten und Fakten auf einen Blick',
+    tiles: TileGridWoodData,
+  }
+}
+
+const Template = ({...args}) => {
+  return createTileGrid({...args});
+};
+
+export const TileGrid = Template.bind({});
+TileGrid.args = {};

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

@@ -0,0 +1,51 @@
+import './tile-grid-wood.scss';
+import {createElement, createImage} from "../../_global/scripts/helpers";
+import {TileGridWoodData} from "./TileGridWoodData";
+import IHKTileGridWood from "./tile-grid-wood";
+import IHKEventOverviewTiles from "../eventoverview-stage/eventoverview";
+
+export const createTileGrid = ({
+  headline = 'Daten und Fakten auf einen Blick',
+  tiles = TileGridWoodData,
+}) => {
+  const section = createElement('section', ['tile-grid']);
+  const container = createElement('div', ['container'], null, section);
+  createElement('h2', [], headline, container);
+  const row = createElement('div', ['row'], null, container);
+
+  tiles.map((group) => {
+    const col = createElement('div', ['col'], null, row);
+    const head = createElement('div', ['tile-head'], null, col);
+    const tileLink = createElement('a', ['tile-head-outer'], null, head);
+    tileLink.href = group.titleUrl;
+    createElement('h3', ['like-h4'], group.title, tileLink);
+
+    group.tiles.map((item) => {
+      const tile = createElement('div', ['tile'], null, col);
+      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) {
+        createElement('small', [], item.unit, num);
+      }
+      createElement('span', ['label'], item.label, p);
+    })
+    new IHKTileGridWood($(section));
+  })
+
+  return section;
+}

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

@@ -0,0 +1,128 @@
+export const TileGridWoodData = [
+  {
+    title: 'Demokratie und ehrenamtliches Engagement',
+    titleUrl: '#',
+    tiles: [
+      {
+        icon: './dummy/tile-grid/tile-01.svg',
+        number: '5.235',
+        unit: null,
+        label: 'Vollversammlungs­mitglieder',
+      }, {
+        dynamicIcon: 'pictogram-bueroklammer',
+        number: '78',
+        unit: '%',
+        label: 'KMU-Vertreter in IHK-Vollversammlungen',
+        url: '#',
+      }, {
+        dynamicIcon: 'pictogram-gruppe-idee',
+        number: '22',
+        unit: '%',
+        label: 'weibliche Mitglieder in IHK-Vollversammlungen',
+        url: '#',
+      }, {
+        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: '#',
+      },
+    ],
+  },
+  {
+    title: 'Bildung und Beruf',
+    titleUrl: '#',
+    tiles: [
+      {
+        number: '286.000',
+        unit: null,
+        label: 'abgenommene Abschlussprüfungen in der Ausbildung',
+        url: '#',
+      }, {
+        icon: './dummy/tile-grid/tile-06.svg',
+        number: '117.000',
+        unit: null,
+        label: 'Weiterbildungsprüfungen abgenommen',
+        url: '#',
+      }, {
+        icon: './dummy/tile-grid/tile-07.svg',
+        number: '126.000',
+        unit: null,
+        label: 'Sach- und Fachkundeprüfungen abgenommen',
+        url: '#',
+      },
+    ],
+  },
+  {
+    title: 'Services für Unternehmen',
+    titleUrl: '#',
+    tiles: [
+      {
+        number: '1.9',
+        unit: 'Mio.',
+        label: 'Außenwirtschafts­bescheinigungen ausgestellt',
+      }, {
+        icon: './dummy/tile-grid/tile-09.svg',
+        number: '177.000',
+        unit: null,
+        label: 'Einstiegsgespräche für Existenzgründer',
+        url: '#',
+      }, {
+        icon: './dummy/tile-grid/tile-10.svg',
+        number: '550.000',
+        unit: null,
+        label: 'Rechtsauskünfte',
+        url: '#',
+      }, {
+        icon: './dummy/tile-grid/tile-11.svg',
+        number: '80.500',
+        unit: null,
+        label: 'Unternehmensbesuche',
+        url: '#',
+      },
+    ],
+  },
+  {
+    title: 'Finanzierung und Mitgliedsbeitrag',
+    titleUrl: '#',
+    tiles: [
+      {
+        icon: './dummy/tile-grid/tile-12.svg',
+        number: '441',
+        unit: '€',
+        label: 'jährlicher Durchschnitts­beitrag für Unternehmen',
+        url: '#',
+      }, {
+        icon: './dummy/tile-grid/tile-13.svg',
+        number: '589',
+        unit: '€',
+        label: 'jährlicher Durchschnitts&shy;beitrag für <br> HR-Unternehmen',
+        url: '#',
+      }, {
+        icon: './dummy/tile-grid/tile-14.svg',
+        number: '1,65',
+        unit: 'Mrd. €',
+        label: 'Gesamterträge <br> der IHKs',
+        url: '#',
+      }, {
+        icon: './dummy/tile-grid/tile-15.svg',
+        number: '1,5',
+        unit: 'Mrd. €',
+        label: 'Gesamtaufwendungen <br> der IHKs',
+        url: '#',
+      }, {
+        icon: './dummy/tile-grid/tile-16.svg',
+        number: '8.851',
+        unit: null,
+        label: 'IHK-Mitarbeiterinnen und Mitarbeiter',
+        url: '#',
+      },
+    ],
+  },
+]

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

@@ -0,0 +1,57 @@
+import $ from 'jquery';
+
+class IHKTileGridWood {
+  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 IHKTileGridWood;
+
+// Nur einmal initialisieren, aber mit besserer Timing-Sicherheit
+function initIcons() {
+  $('.tile-grid .dynamic-icon').each((i, el) => {
+    new IHKTileGridWood(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-wood/tile-grid-wood.scss

@@ -0,0 +1,234 @@
+@import '../../_global/styles/mixins';
+@import '../../_global/styles/vars';
+
+.tile-grid {
+  margin: var(--section-margin) auto;
+
+  h2 {
+    margin-bottom: 0.2em;
+  }
+
+  @media(max-width: 567px) {
+    max-width: 340px;
+  }
+
+  @media(min-width: 768px) and (max-width: 999px) {
+    max-width: 88%;
+    padding: 0 15px;
+  }
+  .row {
+    margin: 0 -5px;
+  }
+
+  .col {
+    flex: 1 1 100%;
+    max-width: 25%;
+    padding: 5px;
+    margin-bottom: 200px;
+
+    @media(max-width: 1000px) {
+      max-width: 50%;
+    }
+
+    @media(max-width: 567px) {
+      max-width: 100%;
+      margin-bottom: 100px;
+    }
+
+    &:nth-child(odd) {
+      .tile .tile-outer {
+        background-color: var(--theme-color-secondary-dimmed);
+        color: var(--theme-color-secondary-intensed);
+      }
+
+      .tile-head-outer {
+        background-color: var(--theme-color-secondary-intensed);
+      }
+    }
+  }
+
+  .tile-head {
+    position: sticky;
+    display: block;
+    top: 100px;
+    padding: 20px 0 10px;
+    z-index: 1;
+    background-color: #fff;
+
+    @media(max-width: 767px) {
+      top: 75px;
+    }
+
+    .like-h4 {
+      min-height: 3.6em;
+      margin: 5px 0;
+      max-width: 10em;
+    }
+  }
+
+  .tile-head-outer {
+    position: relative;
+    display: block;
+    color: white;
+    background-color: var(--theme-color-primary);
+    transition: 0.2s ease;
+    border-top-right-radius: 30px;
+    border-top-left-radius: 30px;
+    padding: 5% 16% 5% 7%;
+    text-decoration-color: rgba(white, 0);
+    @include focus-visible;
+  }
+
+  .tile {
+    padding: 0 0 10px;
+
+    &:last-child {
+      margin-bottom: -200px;
+
+      @media(max-width: 567px) {
+        margin-bottom: -100px;
+      }
+    }
+
+    .tile-outer {
+      position: relative;
+      display: block;
+      background-color: var(--theme-color-primary-dimmed-04);
+      transition: 0.2s ease;
+      @include focus-visible;
+
+
+      &.focus-visible, &:focus {
+        z-index: 1;
+      }
+
+      &::before {
+        content: '';
+        display: block;
+        padding-top: 60%;
+        background-color: #fff;
+        opacity: 0;
+        transition: 0.2s ease;
+
+        @media(max-width: 767px) {
+          padding-top: 55%;
+        }
+      }
+
+      &:hover::before {
+        opacity: 0.6;
+      }
+    }
+
+    span {
+      display: block;
+    }
+
+    .number {
+      font-size: var(--font-size-h1);
+      line-height: 1;
+      font-weight: 700;
+      font-family: 'Korb', sans-serif;
+      margin-left: -0.04em;
+
+      @media(max-width: 1200px) {
+        font-size: 56px;
+      }
+      @media(max-width: 999px) {
+        font-size: 62px;
+      }
+
+      small {
+        font-size: 0.6em;
+        margin-left: 0.2em;
+      }
+    }
+
+    .icon {
+      @include full-size;
+      text-align: right;
+
+      img {
+        width: auto;
+        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 {
+      @include full-size;
+      margin: 0;
+      padding: 6% 16% 6.5% 7%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      line-height: 1.2;
+
+      @media(max-width: 1200px) and (min-width: 1000px) {
+        font-size: 17px;
+        margin-bottom: 1%;
+      }
+    }
+  }
+
+  .tile-head-outer, .tile a {
+    &::after {
+      @include icon-small-arrow-right-simple;
+      font-family: 'Icons', sans-serif;
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      margin: 7% 5%;
+      font-size: var(--icon-size);
+      line-height: 1;
+      transition: 0.2s ease;
+
+      @media(max-width: 1200px) and (min-width: 1000px) {
+        font-size: 24px;
+      }
+    }
+
+    &:hover::after {
+      transform: translateX(20%);
+    }
+  }
+
+  // So dass die bilder ins target kopiert werden
+  /*
+  .fake-class-for-images{
+    background-image: url('../../../img/kacheln/tile-01.svg');
+    background-image: url('../../../img/kacheln/tile-02.svg');
+    background-image: url('../../../img/kacheln/tile-03.svg');
+    background-image: url('../../../img/kacheln/tile-04.svg');
+    background-image: url('../../../img/kacheln/tile-05.svg');
+    background-image: url('../../../img/kacheln/tile-06.svg');
+    background-image: url('../../../img/kacheln/tile-07.svg');
+    background-image: url('../../../img/kacheln/tile-08.svg');
+    background-image: url('../../../img/kacheln/tile-09.svg');
+    background-image: url('../../../img/kacheln/tile-10.svg');
+    background-image: url('../../../img/kacheln/tile-11.svg');
+    background-image: url('../../../img/kacheln/tile-12.svg');
+    background-image: url('../../../img/kacheln/tile-13.svg');
+    background-image: url('../../../img/kacheln/tile-14.svg');
+    background-image: url('../../../img/kacheln/tile-15.svg');
+    background-image: url('../../../img/kacheln/tile-16.svg');
+  }
+  */
+}