Add EventDescription Component

The `EventDescription` component is now part of the `EventPage`. It includes all the necessary markup and CSS for the description section. The properties for `EventDescription` have been added to `EventPage.stories`, as it is used exclusively within the `EventPage`.

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";

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: {

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<EventPageProps> = ({ title, date, image }) => {
+const EventPage: FC<EventPageProps> = ({
+  title,
+  date,
+  image,
+  descriptionTitle,
+  descriptionDescription,
+  horizontalTermLineData,
+  listDescriptionData,
+}) => {
   return (
     <article className="event-page">
       <EventHeader title={title} date={date} image={image} />
+      <EventDescription
+        descriptionTitle={descriptionTitle}
+        descriptionDescription={descriptionDescription}
+        horizontalTermLineData={horizontalTermLineData}
+        listDescriptionData={listDescriptionData}
+      />
     </article>
   );
 };

src/stories/Library/Lists/list-description/list-description.scss

@@ -45,7 +45,7 @@ dl.list-description.list-description--event {
 
   @include breakpoint-s {
     grid-template-columns: 1fr;
-    gap: 0;
+    gap: $s-xs;
 
     .list-description__item {
       grid-template-columns: 1fr 2fr;

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<EventDescriptionProps> = ({
+  descriptionTitle,
+  descriptionDescription,
+  horizontalTermLineData,
+  listDescriptionData,
+}) => {
+  return (
+    <section className="event-description">
+      <h2 className="event-description__title">{descriptionTitle}</h2>
+      <p className="event-description__description">{descriptionDescription}</p>
+      <div className="event-description__links">
+        {horizontalTermLineData.map((item, index) => (
+          <HorizontalTermLine {...item} key={generateId(index)} />
+        ))}
+      </div>
+      <ListDescription
+        className="event-description__info list-description--event"
+        data={listDescriptionData}
+      />
+    </section>
+  );
+};
+
+export default EventDescription;

src/stories/Library/event-description/event-description.scss

@@ -0,0 +1,49 @@
+.event-description {
+  @include container(medium);
+  padding: $s-md;
+  @include breakpoint-s {
+    padding: $s-xl $s-4xl;
+    display: grid;
+    column-gap: $s-xl;
+    grid-template-areas:
+      "title title title"
+      "description description info"
+      "links 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;
+}