Event Teaser Large Component

gfi-ihk-2024/stories/atoms/event-teaser-large/EventTeaserLargeComponent.js

@@ -1,42 +0,0 @@
-import './event-teaser-large.scss';
-import {createElement} from "../../_global/scripts/helpers";
-import {EventTeaserLargeData, EventTeaserLargeStatus, EventTeaserLargeTitles, SearchResultEventTeaserLargeData} from "./EventTeaserLargeData";
-
-export const createEventTeaserLarge = ({
-  event = EventTeaserLargeData,
-  isExtended = false,
-}) => {
-  const a = createElement('a', ['event-teaser']);
-  const dateBox = createElement('div', ['date-box'], null, a);
-  const textBox = createElement('div', ['text-box', 'date-wrapper'], null, a);
-
-  if (isExtended) {
-    event = SearchResultEventTeaserLargeData;
-    event.title = EventTeaserLargeTitles[Math.floor(Math.random() * EventTeaserLargeTitles.length)];
-    event.details.status = EventTeaserLargeStatus[Math.floor(Math.random() * EventTeaserLargeStatus.length)];
-  }
-
-  if (event.date) {
-    createElement('span', ['weekday'], event.date.weekday, dateBox);
-    createElement('span', ['day'], event.date.day, dateBox);
-    createElement('span', ['month'], event.date.month, dateBox);
-  } else {
-    dateBox.classList.add('no-date');
-  }
-
-  createElement('p', ['ev-title'], event.title, textBox);
-
-  if (event.details) {
-    for (const [key, value] of Object.entries(event.details)) {
-      if (typeof value === 'string') {
-        createElement('div', [key], value, textBox);
-      } else if (typeof value === 'object') {
-        createElement('div', [key, value.type], value.label, textBox);
-      }
-    }
-  }
-
-  a.href = event.link;
-
-  return a;
-}

gfi-ihk-2024/stories/atoms/event-teaser-large/EventTeaserLarge.stories.js → gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLarge.stories.js

@@ -1,8 +1,8 @@
 import {createEventTeaserLarge} from "./EventTeaserLargeComponent";
-import {EventTeaserLargeData, NoDateEventTeaserLargeData, SearchResultEventTeaserLargeData} from "./EventTeaserLargeData";
+import {EventTeaserLargeData, EventTeaserLargeImageData} from "./EventTeaserLargeData";
 
 export default {
-  title: 'Atoms/Event Teaser Large',
+  title: 'Components/Event Teaser Large',
   parameters: {
     backgrounds: {
       default: 'lightblue',
@@ -25,12 +25,8 @@ const Template = ({...args}) => {
 export const EventTeaserLarge = Template.bind({});
 EventTeaserLarge.args = {};
 
-export const EventWithoutDate = Template.bind({});
-EventWithoutDate.args = {
-  event: NoDateEventTeaserLargeData,
+export const EventTeaserLargeImage = Template.bind({});
+EventTeaserLargeImage.args = {
+  event: EventTeaserLargeImageData,
 };
 
-export const EventSearchResult = Template.bind({});
-EventSearchResult.args = {
-  event: SearchResultEventTeaserLargeData,
-};

gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeComponent.js

@@ -0,0 +1,46 @@
+import './event-teaser-large.scss';
+import {createElement} from "../../_global/scripts/helpers";
+import {EventTeaserLargeData} from "./EventTeaserLargeData";
+import {createButton} from "../../atoms/button/ButtonComponent";
+
+export const createEventTeaserLarge = ({
+  event = EventTeaserLargeData,
+  moreCta = {
+    label: 'Mehr erfahren',
+    target: '_self',
+  },
+}) => {
+  const a = createElement('a', ['event-teaser-large']);
+  const blueBox = createElement('div', ['blue-box'], null, a);
+  const textBox = createElement('div', ['text-box', 'date-wrapper'], null, a);
+  createElement('div', ['icon-box', 'pictogram-' + event.icon.toLowerCase().split(' ').join('-')], null, blueBox);
+  createElement('p', ['ev-title'], event.title, blueBox);
+  createElement('p', ['ev-cat'], event.category, blueBox);
+  createElement('p', ['ev-desc'], event.desc, textBox);
+  const detailBox = createElement('div', ['detail-box'], null, textBox);
+  if (event.details) {
+    for (const [key, value] of Object.entries(event.details)) {
+      if (typeof value === 'string') {
+        createElement('div', [key], value, detailBox);
+      } else if (typeof value === 'object') {
+        createElement('div', [key, value.type], value.label, detailBox);
+      }
+    }
+  }
+  if (moreCta) {
+    detailBox.appendChild(createButton({
+      label: moreCta.label,
+      link: event.link,
+      color: 'primary-light',
+      size: 'small',
+    }))
+  }
+  if (event.bgimage && event.bgimage .length > 0) {
+    blueBox.style = 'background-image: url(' + event.bgimage + ');';
+    blueBox.classList.add('background-image');
+  }
+
+  a.href = event.link;
+
+  return a;
+}

gfi-ihk-2024/stories/atoms/event-teaser-large/EventTeaserLargeData.js → gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeData.js

@@ -23,26 +23,27 @@ export const EventTeaserLargeStatus = [
 export const EventTeaserLargeData = {
   date: { weekday: 'Mo.', day: '20', month: 'Sep. 2022' },
   title: EventTeaserLargeTitles[Math.floor(Math.random() * EventTeaserLargeTitles.length)],
+  desc: 'Entfesseln Sie das volle Potenzial der generativen KI  und beherrschen Sie die Kunst des Prompt-Engineerings!',
   link: '#',
-  details: null,
-}
-
-export const NoDateEventTeaserLargeData = {
-  date: null,
-  title: EventTeaserLargeTitles[Math.floor(Math.random() * EventTeaserLargeTitles.length)],
-  link: '#',
-  details: null,
+  details: {
+    date: '20.09.2022',
+    status: EventTeaserLargeStatus[Math.floor(Math.random() * EventTeaserLargeStatus.length)],
+  },
+  icon: 'Roboter',
+  category: 'Gründung und Nachfolge',
+  bgimage: null,
 }
 
-export const SearchResultEventTeaserLargeData = {
+export const EventTeaserLargeImageData = {
   date: { weekday: 'Mo.', day: '20', month: 'Sep. 2022' },
   title: EventTeaserLargeTitles[Math.floor(Math.random() * EventTeaserLargeTitles.length)],
+  desc: 'Entfesseln Sie das volle Potenzial der generativen KI  und beherrschen Sie die Kunst des Prompt-Engineerings!',
   link: '#',
   details: {
     date: '20.09.2022',
-    time: '19:00 Uhr',
-    price: '299 €',
-    location: 'Musterstraße 12, 12345 Muster',
     status: EventTeaserLargeStatus[Math.floor(Math.random() * EventTeaserLargeStatus.length)],
-  }
-}
+  },
+  icon: 'Roboter',
+  category: 'Gründung und Nachfolge',
+  bgimage: 'https://source.unsplash.com/2vCqH34PqWs/1080x648',
+}

gfi-ihk-2024/stories/atoms/event-teaser-large/event-teaser-large.scss → gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss

@@ -1,45 +1,76 @@
 @import '../../_global/styles/mixins';
 @import '../../_global/styles/vars';
 
-.event-teaser, .events-list a:not(.btn) {
+.event-teaser-large, .events-list-large a:not(.btn) {
   background-color: white;
   border-radius: 8px;
   overflow: hidden;
   display: flex;
   transition: 0.3s ease;
   text-decoration: none;
+  min-height:400px;
   @include focus-visible;
 
   &:hover {
     color: var(--theme-color-secondary-intensed);
 
-    .date-box {
+    .blue-box {
       background-color: var(--theme-color-secondary-intensed);
     }
   }
-
-  .date-box {
+  
+  .icon-box {
+    font-family: 'Pictograms', sans-serif;
+    font-size: 70px;
+    line-height: 1;
+    color: var(--theme-color-white);
+    position:absolute;
+    top:20px;
+    left:15px;
+    @media(max-width: 567px) {
+      font-size: 50px;
+      margin-top: 0;
+    }
+  }
+  .blue-box {
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
-    background-color: var(--theme-color-primary);
+    background: linear-gradient(158deg, #003366 4%, #4BA490 39%, #AFCC7A 98%);
     color: var(--theme-color-white);
     margin-right: 18px;
     font-family: "Korb", sans-serif;
     min-height: 80px;
     font-size: 14px;
     line-height: 1;
-    text-transform: uppercase;
-    padding: 7px 12px 8px;
+    padding: 20px 15px;
     min-width: 80px;
     transition: 0.2s ease;
-
-    @media(max-width: 767px) {
+    position:relative;
+     @media(max-width: 767px) {
       margin-right: 12px;
       justify-content: flex-start;
       padding-top: 10px;
     }
-
+    .ev-title{
+      font-size: 36px;
+      font-weight: 400;
+      text-decoration: underline;
+      line-height: 43.20px;
+    }
+    .ev-cat{
+      color: #003366;
+      font-size: 16px;
+      font-family: Source Sans Pro;
+      font-weight: 400;
+      text-transform: uppercase;
+      line-height: 16px;
+      letter-spacing: 0.32px;
+      background-color:white;
+      border-radius:7px;
+      display:inline-block;
+      padding:5px 7px;
+    }
     span {
       white-space: nowrap;
     }
@@ -85,8 +116,8 @@
     }
   }
 
-  .ev-title {
-    ~ div {
+  .detail-box {
+    > div {
       display: inline-block;
       font-size: var(--font-size-small);
       line-height: 1.2em;