From 4c4faf14eb9184fafbad8e1843ae3c88c6d1d2c5 Mon Sep 17 00:00:00 2001
From: FlorianEisenmenger <f.eisenmenger@spawntree.de>
Date: Thu, 19 Jun 2025 18:01:27 +0200
Subject: [PATCH] text with headline

---
 .../stories/_global/styles/_mixins.scss       |  7 ++++--
 .../TextWithHeadline.stories.js               | 13 ++++++++++
 .../TextWithHeadlineComponent.js              | 18 ++++++++++++++
 .../text-with-headline.scss                   | 24 +++++++++++++++++++
 gfi-ihk-2024/stories/pages/home/HomePage.js   |  2 ++
 5 files changed, 62 insertions(+), 2 deletions(-)
 create mode 100644 gfi-ihk-2024/stories/components/text-with-headline/TextWithHeadline.stories.js
 create mode 100644 gfi-ihk-2024/stories/components/text-with-headline/TextWithHeadlineComponent.js
 create mode 100644 gfi-ihk-2024/stories/components/text-with-headline/text-with-headline.scss

diff --git a/gfi-ihk-2024/stories/_global/styles/_mixins.scss b/gfi-ihk-2024/stories/_global/styles/_mixins.scss
index 9de4c10..847ccb1 100644
--- a/gfi-ihk-2024/stories/_global/styles/_mixins.scss
+++ b/gfi-ihk-2024/stories/_global/styles/_mixins.scss
@@ -68,11 +68,14 @@
     font-size: 14px;
   }
 
-  + h1 {
+  + h1,
+  + .like-h1 {
     margin-top: 0.1em;
   }
 
-  + h2, + .like-h2, + h3, + h4 {
+  + h2, + .like-h2,
+  + h3, + .like-h3,
+  + h4 + .like-h4, {
     margin-top: 0.2em;
   }
 }
diff --git a/gfi-ihk-2024/stories/components/text-with-headline/TextWithHeadline.stories.js b/gfi-ihk-2024/stories/components/text-with-headline/TextWithHeadline.stories.js
new file mode 100644
index 0000000..5c8876f
--- /dev/null
+++ b/gfi-ihk-2024/stories/components/text-with-headline/TextWithHeadline.stories.js
@@ -0,0 +1,13 @@
+import {createTextWithHeadline} from "./TextWithHeadlineComponent";
+
+export default {
+  title: 'Components/Text With Headline',
+  args: {},
+}
+
+const Template = ({...args}) => {
+  return createTextWithHeadline({...args});
+};
+
+export const TextWithHeadline = Template.bind({});
+TextWithHeadline.args = {};
\ No newline at end of file
diff --git a/gfi-ihk-2024/stories/components/text-with-headline/TextWithHeadlineComponent.js b/gfi-ihk-2024/stories/components/text-with-headline/TextWithHeadlineComponent.js
new file mode 100644
index 0000000..523ff84
--- /dev/null
+++ b/gfi-ihk-2024/stories/components/text-with-headline/TextWithHeadlineComponent.js
@@ -0,0 +1,18 @@
+import './text-with-headline.scss';
+import {createElement} from "../../_global/scripts/helpers";
+import {lorem2} from "../../_global/scripts/lorem";
+
+export const createTextWithHeadline = ({
+  kicker = 'Dachzeile',
+  headline = 'Dies ist eine Zwischenheadline mit der Maximalbefüllung von 80 Zeichen.',
+}) => {
+  const section = createElement('section', ['text-with-headline']);
+  const container = createElement('div', ['container'], null, section);
+  const text = createElement('div', ['text'], null, container);
+  createElement('p', ['kicker'], kicker, text);
+  createElement('div', ['like-h1'], headline, text);
+  const richText = createElement('div', ['richtext'], null, text);
+  createElement('p', [], lorem2, richText);
+
+  return section;
+}
\ No newline at end of file
diff --git a/gfi-ihk-2024/stories/components/text-with-headline/text-with-headline.scss b/gfi-ihk-2024/stories/components/text-with-headline/text-with-headline.scss
new file mode 100644
index 0000000..1b7f1a7
--- /dev/null
+++ b/gfi-ihk-2024/stories/components/text-with-headline/text-with-headline.scss
@@ -0,0 +1,24 @@
+@import '../../_global/styles/vars';
+
+.text-with-headline {
+  margin-top: 0;
+  .text {
+    margin: 0;
+    max-width: 900px;
+  }
+  .richtext p {
+    margin-bottom: 30px;
+  }
+}
+
+* + .text-with-headline {
+  margin-top: var(--section-margin);
+}
+
+.container {
+  .text-with-headline {
+    .container {
+      padding: 0;
+    }
+  }
+}
\ No newline at end of file
diff --git a/gfi-ihk-2024/stories/pages/home/HomePage.js b/gfi-ihk-2024/stories/pages/home/HomePage.js
index 62f5512..3eb137b 100644
--- a/gfi-ihk-2024/stories/pages/home/HomePage.js
+++ b/gfi-ihk-2024/stories/pages/home/HomePage.js
@@ -12,6 +12,7 @@ import {createEventsSection} from "../../sections/events/EventsComponent";
 import {createSocialSection} from "../../sections/social/SocialComponent";
 import {createTeasersSection} from "../../sections/teasers/TeasersComponent";
 import {createSurvey} from "../../sections/survey/SurveyComponent";
+import {createTextWithHeadline} from "../../components/text-with-headline/TextWithHeadlineComponent";
 
 export const createHomePage = ({
   globalMessageType = 'light',
@@ -32,6 +33,7 @@ export const createHomePage = ({
   main.appendChild(createInfoBanner({imageSrc: null, isCommercial: false}));
   main.appendChild(createTopicTeasersSection({}));
   main.appendChild(createTeasersSection({headline: 'Aktuelles', type: 'hero', maxItems: 2}));
+  main.appendChild(createTextWithHeadline({}));
   main.appendChild(createSurvey({}));
   main.appendChild(createSlider({slides: sliderData}));
   main.appendChild(createEventsSection({}));