diff --git a/gfi-ihk-2024/stories/atoms/event-teaser-large/EventTeaserLarge.stories.js b/gfi-ihk-2024/stories/atoms/event-teaser-large/EventTeaserLarge.stories.js new file mode 100644 index 0000000..5078b3c --- /dev/null +++ b/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, +}; \ No newline at end of file diff --git a/gfi-ihk-2024/stories/atoms/event-teaser-large/EventTeaserLargeComponent.js b/gfi-ihk-2024/stories/atoms/event-teaser-large/EventTeaserLargeComponent.js new file mode 100644 index 0000000..136387d --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/gfi-ihk-2024/stories/atoms/event-teaser-large/EventTeaserLargeData.js b/gfi-ihk-2024/stories/atoms/event-teaser-large/EventTeaserLargeData.js new file mode 100644 index 0000000..94015b5 --- /dev/null +++ b/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)], + } +} \ No newline at end of file diff --git a/gfi-ihk-2024/stories/atoms/event-teaser-large/event-teaser-large.scss b/gfi-ihk-2024/stories/atoms/event-teaser-large/event-teaser-large.scss new file mode 100644 index 0000000..df3eac0 --- /dev/null +++ b/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; + } + } + } + } +} \ No newline at end of file diff --git a/gfi-ihk-2024/stories/pages/event-overview/EventOverviewPage.js b/gfi-ihk-2024/stories/pages/event-overview/EventOverviewPage.js index 3c9960b..9cb2ea4 100644 --- a/gfi-ihk-2024/stories/pages/event-overview/EventOverviewPage.js +++ b/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!', diff --git a/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss b/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss index 5a0f5b6..82bff14 100644 --- a/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss +++ b/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); } }