From 0e9996b8f3b92271142345a98fb64853380e4433 Mon Sep 17 00:00:00 2001 From: Florian Eisenmenger Date: Fri, 26 Jul 2024 09:58:50 +0200 Subject: [PATCH] flockler --- .../stories/components/flockler/flockler.scss | 11 +++ .../pages/flockler/article/Article.stories.js | 47 +++++++++++++ .../pages/flockler/article/ArticlePage.js | 68 +++++++++++++++++++ 3 files changed, 126 insertions(+) create mode 100644 gfi-ihk-2024/stories/pages/flockler/article/Article.stories.js create mode 100644 gfi-ihk-2024/stories/pages/flockler/article/ArticlePage.js diff --git a/gfi-ihk-2024/stories/components/flockler/flockler.scss b/gfi-ihk-2024/stories/components/flockler/flockler.scss index 8b02cf4..0647349 100644 --- a/gfi-ihk-2024/stories/components/flockler/flockler.scss +++ b/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); + } + } } \ No newline at end of file diff --git a/gfi-ihk-2024/stories/pages/flockler/article/Article.stories.js b/gfi-ihk-2024/stories/pages/flockler/article/Article.stories.js new file mode 100644 index 0000000..d035827 --- /dev/null +++ b/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; + } + ` +}; \ No newline at end of file diff --git a/gfi-ihk-2024/stories/pages/flockler/article/ArticlePage.js b/gfi-ihk-2024/stories/pages/flockler/article/ArticlePage.js new file mode 100644 index 0000000..972d741 --- /dev/null +++ b/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 go-digital Förderprogramm 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; + } \ No newline at end of file