Event-Teaser Large angelegt

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

@@ -0,0 +1,36 @@
+import {createEventTeaserLarge} from "./EventTeaserLargeComponent";
+import {EventTeaserLargeData, NoDateEventTeaserLargeData, SearchResultEventTeaserLargeData} from "./EventTeaserLargeData";
+
+export default {
+  title: 'Atoms/Event Teaser Large',
+  parameters: {
+    backgrounds: {
+      default: 'lightblue',
+    },
+  },
+  args: {
+    event: EventTeaserLargeData,
+  },
+  argTypes: {
+    event: {
+      name: 'Veranstaltung',
+    }
+  }
+}
+
+const Template = ({...args}) => {
+  return createEventTeaserLarge({...args});
+};
+
+export const EventTeaserLarge = Template.bind({});
+EventTeaserLarge.args = {};
+
+export const EventWithoutDate = Template.bind({});
+EventWithoutDate.args = {
+  event: NoDateEventTeaserLargeData,
+};
+
+export const EventSearchResult = Template.bind({});
+EventSearchResult.args = {
+  event: SearchResultEventTeaserLargeData,
+};

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

@@ -0,0 +1,42 @@
+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/EventTeaserLargeData.js

@@ -0,0 +1,48 @@
+export const EventTeaserLargeTitles = [
+  'Basisseminar – Besser informiert in die Selbstständigkeit',
+  'NBank-Beratungssprechtag in Göttingen',
+  'Aktuelle Änderungen im Zoll- und Aussenwirtschaftsrecht zum Jahreswechsel 2022/2023',
+  'Social Media Manager/-in (IHK) - Webinar',
+]
+
+export const EventTeaserLargeStatus = [
+  {
+    type: 'reserved',
+    label: 'Anmeldefrist abgelaufen',
+  },
+  {
+    type: 'waiting-list',
+    label: 'Warteliste',
+  },
+  {
+    type: 'open',
+    label: 'Freie Plätze vorhanden',
+  }
+]
+
+export const EventTeaserLargeData = {
+  date: { weekday: 'Mo.', day: '20', month: 'Sep. 2022' },
+  title: EventTeaserLargeTitles[Math.floor(Math.random() * EventTeaserLargeTitles.length)],
+  link: '#',
+  details: null,
+}
+
+export const NoDateEventTeaserLargeData = {
+  date: null,
+  title: EventTeaserLargeTitles[Math.floor(Math.random() * EventTeaserLargeTitles.length)],
+  link: '#',
+  details: null,
+}
+
+export const SearchResultEventTeaserLargeData = {
+  date: { weekday: 'Mo.', day: '20', month: 'Sep. 2022' },
+  title: EventTeaserLargeTitles[Math.floor(Math.random() * EventTeaserLargeTitles.length)],
+  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)],
+  }
+}

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

@@ -0,0 +1,154 @@
+@import '../../_global/styles/mixins';
+@import '../../_global/styles/vars';
+
+.event-teaser, .events-list a:not(.btn) {
+  background-color: white;
+  border-radius: 8px;
+  overflow: hidden;
+  display: flex;
+  transition: 0.3s ease;
+  text-decoration: none;
+  @include focus-visible;
+
+  &:hover {
+    color: var(--theme-color-secondary-intensed);
+
+    .date-box {
+      background-color: var(--theme-color-secondary-intensed);
+    }
+  }
+
+  .date-box {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    background-color: var(--theme-color-primary);
+    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;
+    min-width: 80px;
+    transition: 0.2s ease;
+
+    @media(max-width: 767px) {
+      margin-right: 12px;
+      justify-content: flex-start;
+      padding-top: 10px;
+    }
+
+    span {
+      white-space: nowrap;
+    }
+
+    span:nth-child(2) {
+      font-size: 36px;
+      margin-left: -2px;
+    }
+
+    &.no-date {
+      align-items: flex-start;
+
+      &:before {
+        @include icon-sanduhr;
+        font-family: 'Icons', sans-serif;
+        font-size: var(--icon-size);
+        line-height: 1;
+        margin-bottom: 4px;
+        margin-top: 5px;
+      }
+
+      * {
+        display: none;
+      }
+    }
+  }
+
+  .text-box {
+    align-self: center;
+    padding: 10px 18px 10px 0;
+    line-height: 1.2;
+
+    @media(max-width: 767px) {
+      font-size: var(--font-size-small);
+    }
+  }
+
+  p {
+    margin: 0;
+
+    &:not(:last-child) {
+      margin: 2px 0 0.3em;
+    }
+  }
+
+  .ev-title {
+    ~ div {
+      display: inline-block;
+      font-size: var(--font-size-small);
+      line-height: 1.2em;
+      margin-right: 15px;
+      margin-bottom: 2px;
+      color: var(--theme-color-primary);
+
+      &::before {
+        position: relative;
+        display: inline-block;
+        font-family: 'Icons', sans-serif;
+        font-size: 18px;
+        line-height: 20px;
+        margin-right: 5px;
+        vertical-align: top;
+        color: var(--theme-color-primary);
+      }
+
+      @media(max-width: 567px) {
+        display: block;
+        padding-left: 24px;
+        position: relative;
+
+        &:before {
+          position: absolute;
+          left: 0;
+        }
+      }
+
+      &.date::before {
+        @include icon-xsmall-kalender;
+      }
+      &.time::before {
+        @include icon-xsmall-uhr;
+      }
+      &.location::before {
+        @include icon-xsmall-pin;
+      }
+      &.interested-parties::before {
+        @include icon-xsmall-liste;
+      }
+      &.price::before {
+        @include icon-xsmall-euro;
+      }
+      &.status {
+        &::before {
+          @include icon-xsmall-offen;
+          color: #2E8533;
+        }
+
+        &.interested-parties, &.waiting-list {
+          &::before {
+            @include icon-xsmall-liste;
+            color: var(--theme-color-primary);
+          }
+        }
+
+        &.reserved::before {
+          @include icon-xsmall-geschlossen;
+          color: #EA515A;
+        }
+      }
+    }
+  }
+}

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

@@ -22,12 +22,7 @@ export const createEventOverviewPage = ({
   const wrapper = createElement('div', ['page-wrapper'], null, page);
  //wrapper.appendChild(createPageDetails({}));
   wrapper.appendChild(createEventOverviewStage({}));
-  wrapper.appendChild(createIntro({
-    headline: 'Beratung und Service',
-    kicker: null,
-    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!',

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

@@ -219,7 +219,8 @@ background: linear-gradient(0deg, 0%, 100%), linear-gradient(88deg, #003366 0%,
     
     .topic-teaser{
       --topic-tile-padding: 10px;
-      box-shadow: 0 4px 20px -5px rgba(0,0,0,.25);
+      border-radius: 0.75rem;
+      box-shadow: 0px 0px 15px 0px rgba(0, 51, 102, 0.20), 0px 0px 46px 0px rgba(0, 51, 102, 0.12), 0px 0px 38px 0px rgba(0, 51, 102, 0.14);
     }
   }