diff --git a/base.scss b/base.scss index 69f31cc6f..050459a62 100644 --- a/base.scss +++ b/base.scss @@ -103,6 +103,7 @@ @import "./src/stories/Library/article-header/article-header"; @import "./src/stories/Library/event-header/event-header"; @import "./src/stories/Library/image-credited/image-credited"; +@import "./src/stories/Library/event-description/event-description"; // Autosuggest block styling needs to be loaded before the rest of the scss for autosuggest @import "./src/stories/Blocks/autosuggest/autosuggest"; diff --git a/src/stories/Blocks/event-page/EventPage.stories.tsx b/src/stories/Blocks/event-page/EventPage.stories.tsx index 0e2fb416b..8ddce6775 100644 --- a/src/stories/Blocks/event-page/EventPage.stories.tsx +++ b/src/stories/Blocks/event-page/EventPage.stories.tsx @@ -20,6 +20,80 @@ export default { "https://plus.unsplash.com/premium_photo-1696886122527-e4303b76aa8f?q=80&w=5156&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", type: "string", }, + descriptionTitle: { + defaultValue: "Beskrivelse", + type: "string", + }, + descriptionDescription: { + defaultValue: `Foreningen for Integreret Moderne Dans arbejder med at udvide + normalitetsbegrebet i scenekunsten. For hvad er normalt? Rosenreglen og + Mødrenes hus. I 2022 udgav hun også den stærkt politiske digtsamling Jeg + vil have en statsminister.`, + type: "string", + }, + horizontalTermLineData: { + defaultValue: [ + { + title: "I samme serie ", + linkList: [ + { + text: "Litteratur & Aktivisme", + url: "/", + }, + ], + }, + { + title: "Emneord", + linkList: [ + { + text: "dans", + url: "/", + }, + { + text: "contemporary", + url: "/", + }, + { + text: "modern", + url: "/", + }, + { + text: "scenekunst", + url: "/", + }, + { + text: "digt", + url: "/", + }, + { + text: "3-8 årige", + url: "/", + }, + ], + }, + ], + }, + listDescriptionData: { + defaultValue: { + Tid: { value: ["19:30 — 21:00"], type: "standard" }, + Standard: { value: ["65 kr."], type: "standard" }, + Børn: { value: ["Gratis"], type: "standard" }, + Sted: { + value: [ + "Hovedbibliotek", + "Greve bibliotek", + "Hovedbibliotek", + "Greve bibliotek", + ], + type: "link", + }, + Adresse: { + value: ["Kampmanns Plads 2, 8000, Aarhus"], + type: "standard", + }, + Målgruppe: { value: ["Alle"], type: "standard" }, + }, + }, }, parameters: { design: { diff --git a/src/stories/Blocks/event-page/EventPage.tsx b/src/stories/Blocks/event-page/EventPage.tsx index 5d4ed34b6..8ca87a781 100644 --- a/src/stories/Blocks/event-page/EventPage.tsx +++ b/src/stories/Blocks/event-page/EventPage.tsx @@ -1,16 +1,33 @@ import { FC } from "react"; import EventHeader from "../../Library/event-header/EventHeader"; +import EventDescription, { + EventDescriptionProps, +} from "../../Library/event-description/EventDescription"; type EventPageProps = { title: string; date: string; image: string; -}; +} & EventDescriptionProps; -const EventPage: FC = ({ title, date, image }) => { +const EventPage: FC = ({ + title, + date, + image, + descriptionTitle, + descriptionDescription, + horizontalTermLineData, + listDescriptionData, +}) => { return (
+
); }; diff --git a/src/stories/Library/event-description/EventDescription.tsx b/src/stories/Library/event-description/EventDescription.tsx new file mode 100644 index 000000000..db906520f --- /dev/null +++ b/src/stories/Library/event-description/EventDescription.tsx @@ -0,0 +1,40 @@ +import { FC } from "react"; +import HorizontalTermLine, { + HorizontalTermLineProps, + generateId, +} from "../horizontal-term-line/HorizontalTermLine"; +import ListDescription, { + ListData, +} from "../Lists/list-description/ListDescription"; + +export type EventDescriptionProps = { + descriptionTitle: string; + listDescriptionData: ListData; + horizontalTermLineData: HorizontalTermLineProps[]; + descriptionDescription: string; +}; + +const EventDescription: FC = ({ + descriptionTitle, + descriptionDescription, + horizontalTermLineData, + listDescriptionData, +}) => { + return ( +
+

{descriptionTitle}

+

{descriptionDescription}

+
+ {horizontalTermLineData.map((item, index) => ( + + ))} +
+ +
+ ); +}; + +export default EventDescription; diff --git a/src/stories/Library/event-description/event-description.scss b/src/stories/Library/event-description/event-description.scss new file mode 100644 index 000000000..aa389f6a7 --- /dev/null +++ b/src/stories/Library/event-description/event-description.scss @@ -0,0 +1,50 @@ +.event-description { + @include container(medium); + padding: $s-md; + @include breakpoint-s { + padding: $s-xl $s-4xl; + display: grid; + column-gap: $s-xl; + grid-template-columns: 2fr 1fr; + grid-template-areas: + "title title" + "description info" + "links links"; + } +} + +.event-description__title { + grid-area: title; + @extend %text-header-h4; + margin-bottom: $s-md; + + @include breakpoint-s { + margin-bottom: $s-lg; + } +} + +.event-description__description { + grid-area: description; + @extend %text-body-large; + line-height: 24px; + margin-bottom: $s-md; + + @include breakpoint-s { + margin-bottom: 0; + line-height: 32px; + } +} + +.event-description__links { + grid-area: links; + margin-bottom: $s-2xl; + + @include breakpoint-s { + margin-bottom: 0; + margin-top: $s-md; + } +} + +.event-description__info { + grid-area: info; +}