diff --git a/gfi-ihk-2024/stories/atoms/event-teaser-large/EventTeaserLargeComponent.js b/gfi-ihk-2024/stories/atoms/event-teaser-large/EventTeaserLargeComponent.js deleted file mode 100644 index 136387d..0000000 --- a/gfi-ihk-2024/stories/atoms/event-teaser-large/EventTeaserLargeComponent.js +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/gfi-ihk-2024/stories/atoms/event-teaser-large/EventTeaserLarge.stories.js b/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLarge.stories.js similarity index 52% rename from gfi-ihk-2024/stories/atoms/event-teaser-large/EventTeaserLarge.stories.js rename to gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLarge.stories.js index 5078b3c..8d2ac3c 100644 --- a/gfi-ihk-2024/stories/atoms/event-teaser-large/EventTeaserLarge.stories.js +++ b/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, -}; \ No newline at end of file diff --git a/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeComponent.js b/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeComponent.js new file mode 100644 index 0000000..cfa5b92 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/gfi-ihk-2024/stories/atoms/event-teaser-large/EventTeaserLargeData.js b/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeData.js similarity index 62% rename from gfi-ihk-2024/stories/atoms/event-teaser-large/EventTeaserLargeData.js rename to gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeData.js index 94015b5..17b8ef9 100644 --- a/gfi-ihk-2024/stories/atoms/event-teaser-large/EventTeaserLargeData.js +++ b/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)], - } -} \ No newline at end of file + }, + icon: 'Roboter', + category: 'Gründung und Nachfolge', + bgimage: 'https://source.unsplash.com/2vCqH34PqWs/1080x648', +} diff --git a/gfi-ihk-2024/stories/atoms/event-teaser-large/event-teaser-large.scss b/gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss similarity index 74% rename from gfi-ihk-2024/stories/atoms/event-teaser-large/event-teaser-large.scss rename to gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss index df3eac0..71ff9bc 100644 --- a/gfi-ihk-2024/stories/atoms/event-teaser-large/event-teaser-large.scss +++ b/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;