From 689a585fcb4d000c2b6d16efadac13f7b49dd0ea Mon Sep 17 00:00:00 2001 From: FlorianEisenmenger Date: Tue, 18 Nov 2025 10:57:06 +0100 Subject: [PATCH] superlist --- .../superlist-entry/SuperlistEntry.stories.js | 24 +++ .../SuperlistEntryComponent.js | 39 ++++ .../superlist-entry/superlist-entry.scss | 197 ++++++++++++++++++ .../sections/superlist/Superlist.stories.js | 21 ++ .../sections/superlist/SuperlistComponent.js | 34 +++ .../stories/sections/superlist/superlist.scss | 44 ++++ 6 files changed, 359 insertions(+) create mode 100644 gfi-ihk-2024/stories/components/superlist-entry/SuperlistEntry.stories.js create mode 100644 gfi-ihk-2024/stories/components/superlist-entry/SuperlistEntryComponent.js create mode 100644 gfi-ihk-2024/stories/components/superlist-entry/superlist-entry.scss create mode 100644 gfi-ihk-2024/stories/sections/superlist/Superlist.stories.js create mode 100644 gfi-ihk-2024/stories/sections/superlist/SuperlistComponent.js create mode 100644 gfi-ihk-2024/stories/sections/superlist/superlist.scss diff --git a/gfi-ihk-2024/stories/components/superlist-entry/SuperlistEntry.stories.js b/gfi-ihk-2024/stories/components/superlist-entry/SuperlistEntry.stories.js new file mode 100644 index 0000000..83ce77f --- /dev/null +++ b/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, +}; \ No newline at end of file diff --git a/gfi-ihk-2024/stories/components/superlist-entry/SuperlistEntryComponent.js b/gfi-ihk-2024/stories/components/superlist-entry/SuperlistEntryComponent.js new file mode 100644 index 0000000..0b21b93 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/gfi-ihk-2024/stories/components/superlist-entry/superlist-entry.scss b/gfi-ihk-2024/stories/components/superlist-entry/superlist-entry.scss new file mode 100644 index 0000000..a8e966b --- /dev/null +++ b/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; + } + } + } + } +} \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/superlist/Superlist.stories.js b/gfi-ihk-2024/stories/sections/superlist/Superlist.stories.js new file mode 100644 index 0000000..70ad4ba --- /dev/null +++ b/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 +}; \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/superlist/SuperlistComponent.js b/gfi-ihk-2024/stories/sections/superlist/SuperlistComponent.js new file mode 100644 index 0000000..7767876 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/superlist/superlist.scss b/gfi-ihk-2024/stories/sections/superlist/superlist.scss new file mode 100644 index 0000000..8e108d1 --- /dev/null +++ b/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; + } + } +} \ No newline at end of file