flockler

gfi-ihk-2024/stories/components/flockler/Flockler.stories.js

@@ -0,0 +1,18 @@
+import {createFlockler} from "./FlocklerComponent";
+
+export default {
+    title: 'Components/Flockler',
+    args: {},
+}
+
+const Template = ({...args}) => {
+    return createFlockler({...args});
+};
+
+export const FlocklerCarousel = Template.bind({});
+FlocklerCarousel.args = {};
+
+export const Flockler = Template.bind({});
+Flockler.args = {
+    isCarousel: false,
+};

gfi-ihk-2024/stories/components/flockler/FlocklerComponent.js

@@ -0,0 +1,35 @@
+import './flockler.scss';
+import {createElement} from "../../_global/scripts/helpers";
+
+export const createFlockler = ({
+    isCarousel = true,
+    backgroundColor = true,
+    headline = 'Social Media',
+}) => {
+    const flockler = createElement('div', ['flocker']);
+    if (backgroundColor) {
+        flockler.classList.add('colored')
+    }
+    const container = createElement('div', ['container'], null, flockler);
+
+    if (headline && headline.length > 0) {
+        createElement('h2', [], headline, container);
+    }
+
+    const flocklerDiv = createElement('div', [], null, container);
+    if (isCarousel) {
+        flocklerDiv.id = 'flockler-embed-1909cf78b700ca8f2ab8c99cf853e256';
+    } else {
+        flocklerDiv.id = 'flockler-embed-1909cf6ac14089fbe68d7606d3222ca3';
+    }
+
+    const flocklerScript = createElement('script', [], null, container);
+    flocklerScript.async = true;
+    if (isCarousel) {
+        flocklerScript.src = 'https://plugins.flockler.com/embed/18c3530f420086988e50456ec8645095/1909cf78b700ca8f2ab8c99cf853e256';
+    } else {
+        flocklerScript.src = 'https://plugins.flockler.com/embed/18c3530f420086988e50456ec8645095/1909cf6ac14089fbe68d7606d3222ca3';
+    }
+
+    return flockler;
+}

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

@@ -0,0 +1,9 @@
+.flocker {
+  &.colored {
+    padding: var(--section-padding) 0;
+    background-color: var(--theme-color-primary-dimmed-04);
+    h2 {
+      margin-top: var(--section-headline-margin);
+    }
+  }
+}

gfi-ihk-2024/stories/components/form-element-form-centric/FormElementFormCentricComponent.js

@@ -196,7 +196,7 @@ export const createFormCentricElement = ({
     input.type = 'file';
     input.id = id;
     input.name = name;
-    input.classes = ['mwf-file__input'];
+    input.classList.add ('mwf-file__input');
   }
 
   return wrapper;

gfi-ihk-2024/stories/pages/flockler/home/Home.stories.js

@@ -0,0 +1,28 @@
+import {createHomePage} from "./HomePage";
+
+export default {
+  title: 'Pages/Flockler/Home Page',
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    globalMessageType: {
+      name: 'Globaler Störer Typ',
+      control: 'select',
+      options: ['light', 'bold', 'alarming'],
+      defaultValue: 'light',
+    },
+    globalMessage: {
+      name: 'Globaler Störer Nachricht',
+      control: {type: 'text'},
+      defaultValue: 'Leider kommt es durch <a href="#">technische Wartungsmaßnahmen</a> am 2. Mai in der Zeit von 17:30–23:00 zu einer eingeschränkten Verfügbarkeit unserer Internetseite',
+    },
+  }
+}
+
+const Template = ({...args}) => {
+  return createHomePage({...args});
+};
+
+export const HomePage = Template.bind({});
+HomePage.args = {};

gfi-ihk-2024/stories/pages/flockler/home/HomePage.js

@@ -0,0 +1,57 @@
+import {createSlider} from "../../../sections/slider/SliderComponent";
+import {createElement} from "../../../_global/scripts/helpers";
+import {createHeader} from "../../../components/header/HeaderComponent";
+import {sliderData} from "../../../sections/slider/SliderData";
+import {createSearch} from "../../../sections/search/SearchComponent";
+import {createGlobalMessage} from "../../../components/global-message/GlobalMessageComponent";
+import {createFeature} from "../../../sections/feature/FeatureComponent";
+import {createInfoBanner} from "../../../sections/infobanner/InfoBannerComponent";
+import {createFooter} from "../../../components/footer/FooterComponent";
+import {createTopicTeasersSection} from "../../../sections/topic-teasers/TopicTeasersComponent";
+import {createEventsSection} from "../../../sections/events/EventsComponent";
+import {createSocialSection} from "../../../sections/social/SocialComponent";
+import {createTeasersSection} from "../../../sections/teasers/TeasersComponent";
+import {createFlockler} from "../../../components/flockler/FlocklerComponent";
+
+export const createHomePage = ({
+  globalMessageType = 'light',
+  globalMessage = 'Leider kommt es durch <a href="#">technische Wartungsmaßnahmen</a> am 2. Mai in der Zeit von 17:30–23:00 zu einer eingeschränkten Verfügbarkeit unserer Internetseite',
+  globalMessageIcon = '',
+}) => {
+  const page = createElement('div', ['page']);
+  const header = createHeader({});
+  const wrapper = createElement('div', ['page-wrapper'], null, page);
+  const main = createElement('main', ['page-content'], null, wrapper);
+  const footer = createFooter({});
+
+  page.insertBefore(header, wrapper);
+  page.appendChild(footer);
+
+  main.appendChild(createGlobalMessage({type: globalMessageType, message: globalMessage}));
+  main.appendChild(createSearch({}));
+  main.appendChild(createInfoBanner({imageSrc: null, isCommercial: false}));
+  //main.appendChild(createTopicTeasersSection({}));
+
+  main.appendChild(createFlockler({}));
+
+  main.appendChild(createTeasersSection({headline: 'Aktuelles', type: 'hero', maxItems: 2}));
+  main.appendChild(createSlider({slides: sliderData}));
+
+  // main.appendChild(createEventsSection({}));
+
+  main.appendChild(createFlockler({isCarousel: false}));
+
+  main.appendChild(createTeasersSection({headline: 'Weitere Themen'}));
+  main.appendChild(createSocialSection({}));
+  main.appendChild(createTeasersSection({type: 'text'}));
+  main.appendChild(createFeature({}));
+
+  return page;
+}
+
+const Template = ({...args}) => {
+  return createHomePage({...args});
+};
+
+export const RegularSlider = Template.bind({});
+RegularSlider.args = {};