flockler

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

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

gfi-ihk-2024/stories/pages/flockler/article/Article.stories.js

@@ -0,0 +1,47 @@
+import {createArticlePage} from "./ArticlePage";
+
+export default {
+  title: 'Pages/Flockler/Article Page',
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+
+  },
+}
+
+const Template = ({...args}) => {
+  return createArticlePage({...args});
+};
+
+export const ArticlePage = Template.bind({});
+ArticlePage.args = {};
+
+export const ArticlePageMicrosite = Template.bind({});
+ArticlePageMicrosite.args = {
+  styleBlock: `
+    :root {
+      --theme-color-primary: #E6007E !important;
+      --theme-color-primary-microsite: #000000 !important;
+      --theme-color-primary-rgb: 230,0,126 !important;
+      --theme-color-primary-dimmed-01: #EB3398 !important;
+      --theme-color-primary-dimmed-02: #F063B0 !important;
+      --theme-color-primary-dimmed-03: #F9BFDF !important;
+      --theme-color-primary-dimmed-04: #FCE6F2 !important;
+      --theme-color-secondary: #563F54 !important;
+      --theme-color-secondary-microsite: #E6007E !important;
+      --theme-color-secondary-intensed: #563F54 !important;
+      --theme-color-secondary-dimmed: #EEECEE !important;
+      --theme-color-neutral: #E6007E !important;
+      --theme-color-neutral-background: #EFF3F6 !important;
+      --theme-color-background: #FFFFFF !important;
+      --theme-color-text-intensed: #000000 !important;
+      --theme-color-text: #000000 !important;
+      --theme-color-link: #E6007E !important;
+      --theme-color-link-hover: #E6007E !important;
+      --theme-color-gradient-01: #E6007E !important;
+      --theme-color-gradient-02: #9f1f69 !important;
+      --theme-color-gradient-03: #563f54 !important;
+      }
+  `
+};

gfi-ihk-2024/stories/pages/flockler/article/ArticlePage.js

@@ -0,0 +1,68 @@
+import {createElement, createSidebarPage} from "../../../_global/scripts/helpers";
+import {createGallery} from "../../../components/gallery/GalleryComponent";
+import {createAccordion} from "../../../components/accordion/AccordionComponent";
+import {createContact} from "../../../components/contact/ContactComponent";
+import {SingleContactData} from "../../../components/contact/ContactData";
+import {createInfobox} from "../../../components/infobox/InfoboxComponent";
+import {createLinkCollection} from "../../../components/link-collection/LinkCollectionComponent";
+import {createSteps} from "../../../components/steps/StepsComponent";
+import {createPrintShare} from "../../../components/print-share/PrintShareComponent";
+import {createSurvey} from "../../../sections/survey/SurveyComponent";
+import {createAnchorLinks} from "../../../components/anchor-links/AnchorLinksComponent";
+import {lorem1, lorem2} from "../../../_global/scripts/lorem";
+import {createVideo} from "../../../components/video/VideoComponent";
+import {createFlockler} from "../../../components/flockler/FlocklerComponent";
+
+export const createArticlePage =
+  ({
+    styleBlock = '',
+  }) => {
+    const page = createSidebarPage({
+      breadcrumb: ['Start', 'Inhalte Level 1', 'Digitalisierung'],
+    });
+    const main = page.main;
+    const aside = page.aside;
+
+    // START Microsite Styling
+    const styleContent = styleBlock;
+    const styleElement = document.createElement('style');
+    styleElement.textContent = styleContent;
+    document.head.appendChild(styleElement);
+    // END
+
+    createElement('p', ['kicker'], 'Förderung', main);
+    createElement('h1', [], 'Finanzierung und Förderung für digitale Projekte', main);
+    createElement('p', ['initial', 'strong'], 'Mehrere Programme unterstützen bei der Digitalisierung und Umsetzung Ihrer innovativen Ideen. Es gibt sowohl Förderungen für eine begleitenden Beratung als auch für Investitionen und Betriebsmittel.', main);
+
+    main.appendChild(createAnchorLinks({}));
+
+    createElement('h2', [], 'Beratungsförderung zur Digitalisierung', main);
+    createElement('p', [], 'Beim Förderprogramm go-digital handelt es sich um eine. Das <a href="#">go-digital Förderprogramm</a> richtet sich an Unternehmen mit weniger als 100 Beschäftigten. Gefördert werden die Bereiche IT-Sicherheit, digitale Markterschließung und digitalisierte Geschäftsprozesse.', main);
+    createElement('p', [], lorem1, main);
+
+    main.appendChild(createGallery({}));
+    //main.appendChild(createSteps({}));
+
+    main.appendChild(createFlockler({backgroundColor: false}));
+
+    main.appendChild(createFlockler({isCarousel: false}));
+
+    main.appendChild(createAccordion({}));
+
+    createElement('h2', [], 'Eine weitere Headline zwischendurch', main);
+    createElement('p', [], lorem1, main);
+    main.appendChild(createVideo({}));
+    createElement('p', [], lorem2, main);
+
+    main.appendChild(createInfobox({type: 'success'}));
+    main.appendChild(createInfobox({type: 'warning'}));
+    main.appendChild(createInfobox({type: 'error'}));
+    main.appendChild(createSurvey({}));
+    main.appendChild(createLinkCollection({}));
+    main.appendChild(createContact({}));
+    main.appendChild(createPrintShare({}));
+
+    aside.appendChild(createContact({headline: 'Kontakt', contacts: SingleContactData}));
+
+    return page.page;
+  }