Init EventOverviewStage Section

gfi-ihk-2024/stories/pages/event-overview/EventOverviewPage.js

@@ -9,6 +9,7 @@ import {createLinkCollection} from "../../components/link-collection/LinkCollect
 import {createContact} from "../../components/contact/ContactComponent";
 import {createEventsSection} from "../../sections/events/EventsComponent";
 import {createFeature} from "../../sections/feature/FeatureComponent";
+import {createImageText} from "../../components/image-text/ImageTextComponent";
 
 export const createEventOverviewPage = ({
 
@@ -24,6 +25,10 @@ export const createEventOverviewPage = ({
     copy: 'Wir beraten Unternehmen – ganz gleich, ob Sie Fragen zur Grün­dung haben, Fördermittel beantragen oder expandieren möchten. Wir stehen Ihnen in allen Phasen der Unter­nehmens­entwick­lung mit Rat und Tat zur Seite und sind Ihre erste Anlaufstelle. Verschaffen Sie sich einen Überblick über unsere Service- und Beratungs­angebote!',
     capitalInitial: true,
   }));
+  wrapper.appendChild(createImageText({
+    headline: 'Beratung und Service',
+    text: 'Wir beraten Unternehmen!',
+  }));
   wrapper.appendChild(createTopicTeasersSection({maxItems: 3}));
   wrapper.appendChild(createTeasersSection({type: 'hero', maxItems: 2}));
   wrapper.appendChild(createLinkCollection({headline: 'Meistgeklickt', addContainer: true, buttonText: null}));

gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStage.stories.js

@@ -0,0 +1,93 @@
+import {createEventOverviewStage} from "./EventOverviewStageComponent";
+
+export default {
+  title: 'Sections/EventOverview Stage',
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    imageSrc: 'https://source.unsplash.com/2vCqH34PqWs/1080x648',
+    kicker: 'Noch 7 Tage offen',
+    headline: 'Jetzt und digital mitreden',
+    copy: 'Mit der digitalen Beteiligung erhalten Mitgliedsunternehmen die Möglichkeit, sich einfach und schnell über laufende Verfahren und Abstimmungen zu informieren und sich aktiv daran zu beteiligen.',
+    moreCta: {
+      label: 'Mehr Infos',
+      link: '#',
+      target: '_self',
+    },
+    buttonCta: {
+      label: 'Jetzt beteiligen',
+      link: '#',
+      target: '_self',
+    },
+    showProgress: true,
+    progress: 60,
+  },
+  argTypes: {
+    imageSrc: {
+      name: 'Bild-Url',
+    },
+    kicker: {
+      name: 'Dachzeile',
+    },
+    headline: {
+      name: 'Überschrift',
+    },
+    copy: {
+      name: 'Kurztext',
+    },
+    moreCta: {
+      name: 'Mehr-Link',
+    },
+    buttonCta: {
+      name: 'Button',
+    },
+    showProgress: {
+      name: 'Fortschritt anzeigen',
+    },
+    progress: {
+      name: 'Fortschritt',
+      control: {
+        type: 'number',
+        min: 0,
+        max: 100,
+      },
+    }
+  },
+}
+
+const Template = ({...args}) => {
+  return createEventOverviewStage({...args});
+};
+
+export const GenericIntro = Template.bind({});
+GenericIntro.args = {
+  imageSrc: null,
+  kicker: 'IHK Musterstadt Beteiligungsportal',
+  showProgress: false,
+  buttonCta: {
+    label: 'Mehr erfahren',
+    link: '#',
+    target: '_self',
+  },
+  moreCta: null,
+};
+
+export const GenericEventOverviewStage = Template.bind({});
+GenericEventOverviewStage.args = {
+  imageSrc: null,
+}
+
+export const EventOverviewStageWithImage = Template.bind({});
+EventOverviewStageWithImage.args = {}
+
+export const EventOverviewStageWithBackgroundImage = Template.bind({});
+EventOverviewStageWithBackgroundImage.args = {
+  imageSrc: null,
+  backgroundImage: './logos/election-header.jpg',
+}
+
+export const EventOverviewStageFirstElement = Template.bind({});
+EventOverviewStageFirstElement.args = {
+  isFirstElement: true,
+}

gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageComponent.js

@@ -0,0 +1,75 @@
+import './eventoverview-stage.scss';
+import {createElement, createImage} from "../../_global/scripts/helpers";
+import {createProgressBar} from "../../atoms/progress-bar/ProgressBarComponent";
+import {createButton} from "../../atoms/button/ButtonComponent";
+
+export const createEventOverviewStage = ({
+  imageSrc = 'https://source.unsplash.com/2vCqH34PqWs/1080x648',
+  kicker = 'Noch 7 Tage offen',
+  headline = 'Jetzt und digital mitreden',
+  copy = 'Mit der digitalen Beteiligung erhalten Mitgliedsunternehmen die Möglichkeit, sich einfach und schnell über laufende Verfahren und Abstimmungen zu informieren und sich aktiv daran zu beteiligen.',
+  moreCta = {
+    label: 'Mehr Infos',
+    link: '#',
+    target: '_self',
+  },
+  buttonCta = {
+    label: 'Jetzt beteiligen',
+    link: '#',
+    target: '_self',
+  },
+  showProgress = true,
+  progress = 60,
+  backgroundImage = null,
+  isFirstElement = false,
+}) => {
+  const hasImage = imageSrc && imageSrc.length > 0;
+  const section = createElement('section', ['eventoverview', 'eventoverview-stage']);
+  const container = createElement('div', ['container'], null, section);
+  const row = createElement('div', ['row'], null, container);
+  const col = createElement('div', ['col'], null, row);
+  const tb = createElement('div', ['text-box'], null, col);
+
+  if (backgroundImage && backgroundImage.length > 0) {
+    //section.content('style=background: red;');
+    section.style = 'background-image: url(' + backgroundImage + ');';
+    section.classList.add('background-image');
+  }
+
+  if (isFirstElement) {
+    section.classList.add('first-element');
+  }
+
+  if (kicker && kicker.length > 0) {
+    createElement('p', ['kicker'], kicker, tb);
+  }
+  if (showProgress) {
+    tb.appendChild(createProgressBar({progress}));
+  }
+  createElement('h1', ['like-h2'], headline, tb);
+  createElement('p', [], copy, tb);
+  if (moreCta) {
+    const more = createElement('a', [], moreCta.label, tb);
+    more.href = moreCta.link;
+    more.target = moreCta.target;
+  }
+  if (buttonCta) {
+    const button = createButton({
+      elementType: 'a',
+      link: buttonCta.link,
+      color: 'white',
+      label: buttonCta.label,
+      iconPosition: 'icon-right',
+      icon: 'small-arrow-right-simple',
+    });
+    tb.appendChild(button);
+  }
+
+  if (hasImage) {
+    section.classList.add('image-stage');
+    const ib = createElement('div', ['image-box'], null, col);
+    createImage(imageSrc, 1080, 648, 'Beteiligung', [], ib);
+  }
+
+  return section;
+}

gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageData.js

@@ -0,0 +1,26 @@
+export const eventOverviewStageData = [
+  {
+    title: 'Beratung und Service',
+    link: '#',
+  },
+  {
+    title: 'Interessenvertretung',
+    link: '#',
+  },
+  {
+    title: 'Aus- und Weiterbildung',
+    link: '#',
+  },
+  {
+    title: 'Unsere Region',
+    link: '#',
+  },
+  {
+    title: 'Handelskammer vor Ort',
+    link: '#',
+  },
+  {
+    title: 'Veranstaltungen',
+    link: '#',
+  }
+]

gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss

@@ -0,0 +1,163 @@
+@import '../../_global/styles/mixins';
+@import '../../_global/styles/vars';
+
+.eventoverview-stage {
+  background-image: url('./beteiligung-cover.jpg');
+  background-size: cover;
+  color: white;
+  min-height: calc(18vw + 300px);
+  display: flex;
+  align-items: center;
+  margin: 0;
+
+  &.background-image {
+    background-size: cover;
+    background-position: 50% 50%;
+  }
+
+  &.first-element {
+    @media(min-width: 1400px) {
+      margin-top: -60px;
+    }
+  }
+
+  .kicker {
+    margin-bottom: 0.6em;
+  }
+
+  .btn {
+    margin-top: 0.8em;
+    margin-bottom: 0.4em;
+  }
+
+  .text-box {
+    max-width: 580px;
+    padding: calc(30px + 1vw) 0;
+  }
+
+  a:not(.btn) {
+    color: white;
+
+    + .btn {
+      margin-left: 30px;
+    }
+  }
+
+  .progress {
+    --color-bg: var(--theme-color-white);
+    --color-fg: var(--theme-color-white);
+    --bg-opacity: 0.4;
+
+    + h1, + .text-2 {
+      margin-top: 0.7em;
+    }
+  }
+
+  &.image-stage {
+    position: relative;
+    background-image: none;
+    background-color: var(--theme-color-primary);
+    overflow: hidden;
+    z-index: 1;
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 50%;
+      top: 0;
+      bottom: 0;
+      margin: -15% 0 -15% 0;
+      background-color: var(--theme-color-primary);
+    }
+
+    .text-box {
+      position: relative;
+    }
+
+    .image-box {
+      position: absolute;
+      left: 45%;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      z-index: -1;
+
+      img {
+        position: relative;
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        opacity: 1;
+        transition: 0.4s ease;
+
+        &.loading {
+          opacity: 0;
+        }
+      }
+    }
+
+    @media(max-width: 1200px) {
+      &::before {
+        min-width: 560px;
+      }
+
+      .text-box {
+        max-width: 480px;
+      }
+    }
+
+    @media(min-width: 1000px) {
+      &::before {
+        border-top-right-radius: 28% 50%;
+        border-bottom-right-radius: 28% 50%;
+        min-width: 650px;
+      }
+    }
+
+    @media(max-width: 999px) {
+      padding-bottom: 75%;
+
+      &::before {
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        margin: 0 -28% 67%;
+        border-bottom-left-radius: 50% 28%;
+        border-bottom-right-radius: 50% 28%;
+        min-width: 0;
+      }
+
+      .col {
+        padding: 0 var(--col-padding);
+      }
+
+      .image-box {
+        position: absolute;
+        top: auto;
+        left: 0;
+
+        &::before {
+          content: '';
+          position:  relative;
+          display: block;
+          padding-top: 75%;
+        }
+
+        img {
+          position: absolute;
+          top: 0;
+          left: 0;
+        }
+      }
+
+      .text-box {
+        max-width: none;
+        margin-bottom: 0;
+        padding-bottom: 24px;
+      }
+    }
+  }
+}