superlist

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/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;
+    }
+  }
+}