infobox

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

@@ -65,6 +65,8 @@
       right:0;
       bottom:0;
       background-color:rgba(#003366,0.54);
+      background-size: cover;
+      background-position: 50% 50%;
       z-index:0;
     }
     &.background-image{

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

@@ -9,7 +9,7 @@ export const createInfobox =
          full = false,
          kicker = 'Dachzeile',
          headline = 'Dies ist eine Zwischenheadline mit der Maximalbefüllung von 80 Zeichen.',
-         image = './dummy/placeholder-1-1.svg',
+         icon = 'pictogram-tl_dr',
          text = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
          ul = 'List Styles werden über externe Klasse Richtext geladen',
          ol = 'Lorem ipsum dolor sit',
@@ -42,7 +42,7 @@ export const createInfobox =
             }
             content.appendChild(button);
 
-            createImage(image, 70, 70, '', [], infobox);
+            createElement('div', ['icon-box', icon], null, infobox);
         }
 
 

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

@@ -81,14 +81,20 @@ article.col div.strong {
   .infobox--content {
     flex: 1;
   }
-  img {
+  .icon-box {
     flex-shrink: 0;
-    width: 70px;
-    height: 70px;
+    margin-top: -15px;
+    width: 76px;
+    height: 76px;
+    font-size: 76px;
+    line-height: 76px;
+    font-family: "Pictograms", sans-serif;
+    color: var(--theme-color-secondary);
     @media (max-width: 767px) {
       position: absolute;
       right: 15px;
       top: 15px;
+      margin-top: 0;
     }
   }
   h2, .like-h2 {

gfi-ihk-2024/stories/components/superlist-entry/SuperlistEntry.stories.js

@@ -0,0 +1,24 @@
+import {createSuperlistEntrySection} from "./SuperlistEntryComponent";
+
+export default {
+    title: 'Components/Superlist Entry',
+    parameters: {
+    },
+    args: {
+    }
+}
+
+const Template = ({...args}) => {
+    return createSuperlistEntrySection({...args});
+};
+
+export const SuperlistEntry = Template.bind({});
+SuperlistEntry.args = {
+    showInStorybook: true,
+};
+
+export const SuperlistEntryCentered = Template.bind({});
+SuperlistEntryCentered.args = {
+    showInStorybook: true,
+    centered: true,
+};

gfi-ihk-2024/stories/components/superlist-entry/SuperlistEntryComponent.js

@@ -0,0 +1,39 @@
+import './superlist-entry.scss';
+import $ from 'jquery';
+import {createElement, createImage} from "../../_global/scripts/helpers";
+import {createButton} from "../../atoms/button/ButtonComponent";
+
+export const createSuperlistEntrySection = ({
+    icon = 'pictogram-fernglas',
+    headline = 'Klimaneutral bis 2050',
+    paragraph = 'Klimaschutz als klares Ziel verankern und verlässliche Rahmenbedingungen für Wirtschaft und Gesellschaft schaffen.',
+    inverted = false,
+    centered = false,
+    showInStorybook = false,
+}) => {
+    // Container does not belong to module
+    let onlyForStorybook,
+        section;
+    if (showInStorybook) {
+        onlyForStorybook = createElement('div', centered ? ['superlist', 'centered'] : ['superlist']);
+        section = createElement('div', inverted ? ['superlist-entry', 'inverted'] : ['superlist-entry'], null, onlyForStorybook);
+    } else {
+        section = createElement('div', inverted ? ['superlist-entry', 'inverted'] : ['superlist-entry']);
+    }
+    const graphic = createElement('div', ['graphic'], null, section);
+    createElement('div', ['icon-box', icon], null, graphic);
+    const container = createElement('div', ['textbox'], null, section);
+    createElement('h3', [], headline, container);
+    createElement('p', [], paragraph, container);
+    container.appendChild(createButton({
+        size: 'small',
+        color: 'primary-light',
+        label: 'Mehr dazu',
+    }));
+
+    if (showInStorybook) {
+        return onlyForStorybook;
+    } else {
+        return section;
+    }
+}

gfi-ihk-2024/stories/components/superlist-entry/superlist-entry.scss

@@ -0,0 +1,197 @@
+@import '../../_global/styles/mixins';
+@import '../../_global/styles/vars';
+
+.superlist-entry {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 15px;
+  padding: 0 0 20px 0;
+  &:before {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 29px;
+    top: 0;
+    width: 2px;
+    height: 100%;
+    background: var(--theme-color-primary);
+    @media (min-width: 768px) {
+      left: 59px;
+    }
+  }
+  &:first-child {
+    &:before {
+      top: 50%;
+      height: 50%;
+    }
+  }
+  &:last-child {
+    &:before {
+      height: 50%;
+    }
+  }
+  &:only-child {
+    &:before {
+      display: none;
+    }
+  }
+  @media (max-width: 399px) {
+    &:before {
+      display: none;
+    }
+  }
+  .graphic {
+    width: 60px;
+    height: 60px;
+    flex-shrink: 0;
+    background: var(--theme-color-primary);
+    border-radius: 50%;
+    @media (min-width: 768px) {
+      width: 120px;
+      height: 120px;
+    }
+    .icon-box {
+      position: relative;
+      width: 100%;
+      height: auto;
+      font-family: "Pictograms", sans-serif;
+      font-size: 35px;
+      line-height: 60px;
+      text-align: center;
+      color: var(--theme-color-white);
+      @media (min-width: 768px) {
+        line-height: 120px;
+        font-size: 70px;
+      }
+    }
+    @media (max-width: 399px) {
+      display: none;
+    }
+  }
+  .textbox {
+    flex: 1;
+    padding: 15px;
+    background: var(--theme-color-white);
+    border-radius: var(--border-radius-sm);
+    @media (min-width: 768px) {
+      padding: 30px;
+      border-radius: var(--border-radius-md);
+    }
+    h3, .like-h3 {
+      margin-top: 0;
+      margin-bottom: 5px;
+      font-size: 20px;
+      @media (min-width: 768px) {
+        font-size: 28px;
+      }
+    }
+    p {
+      font-size: 16px;
+      @media (min-width: 768px) {
+        font-size: 18px;
+      }
+    }
+  }
+  &.inverted {
+    .textbox {
+      background: var(--theme-color-primary);
+      color: var(--theme-color-white);
+      .btn {
+        --button-bg-color: var(--theme-color-white);
+        --button-text-color: var(--theme-color-primary);
+        --button-hover-shadow-opacity: 0.35;
+      }
+    }
+  }
+}
+
+.superlist.centered {
+  .superlist-entry {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0;
+    min-height: 120px;
+    padding: 0 0 40px 0;
+
+    &:before {
+      left: 29px;
+      background: var(--theme-color-secondary);
+      @media (min-width: 768px) {
+        left: calc(50% - 1px);
+      }
+    }
+    &:first-child {
+      &:before {
+        top: 30px;
+        height: calc(100% - 30px);
+        @media (min-width: 768px) {
+          top: 60px;
+          height: calc(100% - 60px);
+        }
+      }
+    }
+    &:last-child {
+      &:before {
+        display: none;
+      }
+    }
+
+    .graphic {
+      position: absolute;
+      left: 0;
+      top: 0;
+      background: var(--theme-color-secondary);
+      @media (min-width: 768px) {
+        left: 50%;
+        transform: translate(-50%, 0);
+      }
+      .icon-box {
+        color: var(--theme-color-primary);
+      }
+    }
+    .textbox {
+      padding: 18px 0 0 0;
+      background: none;
+      border-radius: 0;
+      margin-left: 76px;
+      @media (min-width: 768px) {
+        padding: 15px 0 0 0;
+        flex: 0 0 calc(50% - 90px);
+        margin-left: 0;
+      }
+      @media (max-width: 399px) {
+        margin-left: 0;
+      }
+      h3, .like-h3 {
+        padding-bottom: 9px;
+        margin-bottom: 11px;
+        border-bottom: 1px solid var(--theme-color-primary-dimmed-02);
+        @media (min-width: 768px) {
+          margin-top: 3px;
+          margin-bottom: 9px;
+        }
+      }
+      .btn {
+        --button-bg-color: var(--theme-color-white);
+        --button-text-color: var(--theme-color-primary);
+        --button-hover-shadow-opacity: 0.35;
+      }
+    }
+    &:nth-child(2n) {
+      justify-content: flex-start;
+    }
+    &.inverted {
+      .textbox {
+        background: none;
+        color: var(--theme-color-primary);
+        .btn {
+          --button-bg-color: var(--theme-color-white);
+          --button-text-color: var(--theme-color-primary);
+          --button-hover-shadow-opacity: 0.35;
+        }
+      }
+    }
+  }
+}

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

@@ -1048,24 +1048,17 @@ section.marketingheader {
         .controls {
           position: absolute;
           right: 20px;
-          bottom: 42px;
+          bottom: 27px;
           width: auto;
           padding: 0;
         }
 
         .slider-tabs {
-          //right: calc(var(--container-padding) + 10px);
-          //top: 15px;
           position: relative;
           right: auto;
           top: auto;
           padding: 0;
           margin: 0;
-          //li {
-          //  button.btn {
-          //    border-radius: calc(var(--border-radius-lg) / 2);
-          //  }
-          //}
 
           .btn {
             margin-top: 0 !important;
@@ -1078,16 +1071,6 @@ section.marketingheader {
         .slide:not(.text-only) .text-box {
           padding: 16px var(--container-padding);
         }
-
-        //.slider-tabs {
-        //  .btn {
-        //    --button-icon-padding: 30px;
-        //    --button-icon-offset: 5px;
-        //    --button-padding: 5px 10px;
-        //    --button-min-size: 30px;
-        //    margin: 2.5px;
-        //  }
-        //}
       }
     }
     @media screen and (max-width: 567px) {

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

@@ -0,0 +1,21 @@
+import {createSuperlistSection} from "./SuperlistComponent";
+
+export default {
+    title: 'Sections/Superlist',
+    parameters: {
+    },
+    args: {
+    }
+}
+
+const Template = ({...args}) => {
+    return createSuperlistSection({...args});
+};
+
+export const Superlist = Template.bind({});
+Superlist.args = {};
+
+export const SuperlistCentered = Template.bind({});
+SuperlistCentered.args = {
+    centered: true
+};

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

@@ -0,0 +1,34 @@
+import './superlist.scss';
+import $ from 'jquery';
+import {createElement} from "../../_global/scripts/helpers";
+import {createButton} from "../../atoms/button/ButtonComponent";
+import {createSuperlistEntrySection} from "../../components/superlist-entry/SuperlistEntryComponent";
+
+export const createSuperlistSection = ({
+    kicker = 'Im Jahr 2025',
+    headline = 'Fünf Schritte für eine zukunftsfähige Energiepolitik',
+    paragraph = 'Fünf Schritte für eine zukunftsfähige Energiepolitik',
+    centered = false,
+}) => {
+    const section = createElement('section', centered ? ['superlist', 'centered'] : ['superlist']);
+    const container = createElement('div', ['container'], null, section);
+    createElement('p', ['kicker'], kicker, container);
+    createElement('h2', [], headline, container);
+    createElement('p', [], paragraph, container);
+    const superlistlist = createElement('div', ['superlist--list'], null, container);
+    superlistlist.appendChild(createSuperlistEntrySection({icon: 'pictogram-videocall-b'}));
+    superlistlist.appendChild(createSuperlistEntrySection({icon: 'pictogram-weltkugel'}));
+    superlistlist.appendChild(createSuperlistEntrySection({
+        inverted: true,
+        icon: 'pictogram-solaranlage-a'
+    }));
+    const btnContainer = createElement('div', ['button-container'], null, container);
+    btnContainer.appendChild(createButton({
+        color: 'secondary',
+        label: 'Mehr zum Thema',
+        iconPosition: 'icon-right',
+        icon: 'pfeil-simple-rechts',
+    }))
+
+    return section;
+}

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

@@ -0,0 +1,44 @@
+@import '../../_global/styles/mixins';
+@import '../../_global/styles/vars';
+
+.superlist {
+  padding-top: 20px;
+  padding-bottom: 20px;
+  background: var(--theme-color-primary-dimmed-04);
+  border-radius: var(--border-radius-lg);
+  @media (min-width: 768px) {
+    padding-top: 30px;
+    padding-bottom: 30px;
+  }
+  @media (min-width: 1200px) {
+    padding-top: 40px;
+    padding-bottom: 40px;
+  }
+  @media (min-width: 1200px) {
+    padding-top: 60px;
+    padding-bottom: 60px;
+  }
+  .container {
+
+    .button-container {
+      display: flex;
+      flex-direction: column;
+      padding-top: 40px;
+      border-top: 1px solid var(--theme-color-primary-dimmed-02);
+
+      .btn {
+        margin: 0 auto;
+      }
+    }
+  }
+
+  &--list {
+    padding: 40px 0 30px 0;
+  }
+
+  &.centered {
+    .superlist--list {
+      padding-bottom: 40px;
+    }
+  }
+}

gfi-ihk-2024/storybook-static/iframe.html

@@ -354,8 +354,8 @@
             window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":true};</script><script type="module">import './sb-preview/runtime.js';
 
       
-      import './runtime~main.480cf725.iframe.bundle.js';
+      import './runtime~main.df2059e6.iframe.bundle.js';
       
       import './16.08016f04.iframe.bundle.js';
       
-      import './main.340a59e0.iframe.bundle.js';</script></body></html>
+      import './main.ed1129bd.iframe.bundle.js';</script></body></html>

gfi-ihk-2024/storybook-static/project.json

@@ -1 +1 @@
-{"generatedAt":1762789007904,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"10.5.1"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/html-webpack5","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/html","storybookVersion":"7.0.21","storybookVersionSpecifier":"^7.0.21","language":"javascript","storybookPackages":{"@storybook/addon-actions":{"version":"7.6.17"},"@storybook/html":{"version":"7.0.21"},"@storybook/html-webpack5":{"version":"7.0.21"},"storybook":{"version":"7.6.17"}},"addons":{"@storybook/preset-scss":{"version":"1.0.3"},"@storybook/addon-links":{"version":"7.0.21"},"@storybook/addon-essentials":{"version":"7.6.17"},"@storybook/addon-controls":{"version":"7.6.17"}}}
+{"generatedAt":1763131278731,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"10.5.1"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/html-webpack5","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/html","storybookVersion":"7.0.21","storybookVersionSpecifier":"^7.0.21","language":"javascript","storybookPackages":{"@storybook/addon-actions":{"version":"7.6.17"},"@storybook/html":{"version":"7.0.21"},"@storybook/html-webpack5":{"version":"7.0.21"},"storybook":{"version":"7.6.17"}},"addons":{"@storybook/preset-scss":{"version":"1.0.3"},"@storybook/addon-links":{"version":"7.0.21"},"@storybook/addon-essentials":{"version":"7.6.17"},"@storybook/addon-controls":{"version":"7.6.17"}}}