EventOverviewStage Funktion: Background-Image

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

@@ -11,6 +11,8 @@ import {createEventsSection} from "../../sections/events/EventsComponent";
 import {createFeature} from "../../sections/feature/FeatureComponent";
 import {createImageText} from "../../components/image-text/ImageTextComponent";
 
+import {createEventOverviewStage} from "../../sections/eventoverview-stage/EventOverviewStageComponent";
+
 export const createEventOverviewPage = ({
 
 }) => {
@@ -18,7 +20,8 @@ export const createEventOverviewPage = ({
   page.appendChild(createHeader({}));
 
   const wrapper = createElement('div', ['page-wrapper'], null, page);
-  wrapper.appendChild(createPageDetails({}));
+ //wrapper.appendChild(createPageDetails({}));
+  wrapper.appendChild(createEventOverviewStage({}));
   wrapper.appendChild(createIntro({
     headline: 'Beratung und Service',
     kicker: null,

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

@@ -6,26 +6,17 @@ export default {
     layout: 'fullscreen',
   },
   args: {
-    imageSrc: 'https://source.unsplash.com/2vCqH34PqWs/1080x648',
+    backgroundImage: null,
     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.',
-    //showProgress: true,
-    //progress: 60,
   },
   argTypes: {
-    imageSrc: {
-      name: 'Bild-Url',
-    },
     kicker: {
       name: 'Dachzeile',
     },
     headline: {
       name: 'Überschrift',
     },
-    /*copy: {
-      name: 'Kurztext',
-    },*/
     moreCta: {
       name: 'Mehr-Link',
     },
@@ -52,32 +43,16 @@ const Template = ({...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',
+EventOverviewStageWithImage.args = {
+  backgroundImage: 'https://source.unsplash.com/2vCqH34PqWs/1080x648',
 }
-
-export const EventOverviewStageFirstElement = Template.bind({});
-EventOverviewStageFirstElement.args = {
-  isFirstElement: true,
-}

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

@@ -10,20 +10,15 @@ import IHKEventOverviewTiles from "./eventoverview";
 
 
 export const createEventOverviewStage = ({
-  imageSrc = 'https://source.unsplash.com/2vCqH34PqWs/1080x648',
+  backgroundImage = null,
   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.',
   maxItems = 6,
-  //showProgress = true,
-  //progress = 60,
-  backgroundImage = null,
-  isFirstElement = false,
   placeholder = 'Veranstaltungssuche, z.B. „Existenzgründung”',
   api = 'services/search/{SEARCHTERM}.json',
   tiles = eventOverviewStageData,
 }) => {
-  const hasImage = imageSrc && imageSrc.length > 0;
+  //const hasImage = imageSrc && imageSrc.length > 0;
   const section = createElement('section', ['eventoverview-section']);
   const sectiondiv = createElement('div', ['eventoverview', 'eventoverview-stage'], null, section);
   const container = createElement('div', ['container'], null, sectiondiv);
@@ -37,13 +32,13 @@ export const createEventOverviewStage = ({
   const tilescol = createElement('div', ['col'], null, tilesrow);
   if (backgroundImage && backgroundImage.length > 0) {
     //section.content('style=background: red;');
-    section.style = 'background-image: url(' + backgroundImage + ');';
-    section.classList.add('background-image');
+    sectiondiv.style = 'background-image: url(' + backgroundImage + ');';
+    sectiondiv.classList.add('background-image');
   }
 
-  if (isFirstElement) {
+  /*if (isFirstElement) {
     section.classList.add('first-element');
-  }
+  }*/
 
   if (kicker && kicker.length > 0) {
     createElement('p', ['kicker'], kicker, tb);
@@ -54,11 +49,11 @@ export const createEventOverviewStage = ({
   createElement('h1', ['like-h2'], headline, tb);
   //createElement('p', [], copy, tb);
  
-  if (hasImage) {
+  /*if (hasImage) {
     section.classList.add('image-stage');
     const ib = createElement('div', ['image-box'], null, col);
     createImage(imageSrc, 1080, 648, 'Beteiligung', [], ib);
-  }
+  }*/
 
   const form = createElement('form', [], null, tb);