From f375c4caec8bfc1922a2d837f91f9b9cb787b17a Mon Sep 17 00:00:00 2001
From: LasseStaus <l.stausgaard@gmail.com>
Date: Mon, 29 Apr 2024 09:15:20 +0200
Subject: [PATCH] Add EventListStacked component.

Includes component, story and css.

This component will be used on the eventseries page, to display the events in a series.

This is likely a temporary solution, as the eventseries page will be restructured later.

For now, this will be used and therefore it is necesary to give it its own component / css.

DDFFORM-126
---
 base.scss                                     |  1 +
 .../event-list-stacked/EventListStacked.tsx   | 26 +++++++++++++++++++
 .../event-list-stacked.scss                   |  9 +++++++
 .../eventListStacked.stories.tsx              | 21 +++++++++++++++
 4 files changed, 57 insertions(+)
 create mode 100644 src/stories/Library/event-list-stacked/EventListStacked.tsx
 create mode 100644 src/stories/Library/event-list-stacked/event-list-stacked.scss
 create mode 100644 src/stories/Library/event-list-stacked/eventListStacked.stories.tsx

diff --git a/base.scss b/base.scss
index 8eb1ce1f1..ae4b00649 100644
--- a/base.scss
+++ b/base.scss
@@ -138,6 +138,7 @@
 @import "./src/stories/Library/opening-hours/opening-hours";
 @import "./src/stories/Library/opening-hours/opening-hours-skeleton";
 @import "./src/stories/Library/filtered-event-list/filtered-event-list";
+@import "./src/stories/Library/event-list-stacked/event-list-stacked";
 
 // 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/Library/event-list-stacked/EventListStacked.tsx b/src/stories/Library/event-list-stacked/EventListStacked.tsx
new file mode 100644
index 000000000..54bb5183c
--- /dev/null
+++ b/src/stories/Library/event-list-stacked/EventListStacked.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { ContentListItem } from "../content-list-item/ContentListItem";
+import ContentListItemStacked from "../content-list-item/ContentListItemStacked";
+import contentListData from "../content-list/ContentListData";
+
+interface PromoteEventsListProps {
+  title: string;
+}
+
+const EventListStacked: React.FC<PromoteEventsListProps> = ({ title }) => {
+  return (
+    <section className="event-list-stacked">
+      <h2 className="event-list-stacked__heading">{title}</h2>
+      <ContentListItem {...contentListData[0]} />
+      {contentListData.map((event) => (
+        <ContentListItemStacked
+          title={event.title}
+          href={event.href}
+          time={event.time}
+          date={event.date}
+        />
+      ))}
+    </section>
+  );
+};
+export default EventListStacked;
diff --git a/src/stories/Library/event-list-stacked/event-list-stacked.scss b/src/stories/Library/event-list-stacked/event-list-stacked.scss
new file mode 100644
index 000000000..a783727fa
--- /dev/null
+++ b/src/stories/Library/event-list-stacked/event-list-stacked.scss
@@ -0,0 +1,9 @@
+.event-list-stacked {
+  @include layout-container($layout__max-width--medium);
+  @include block-spacing();
+}
+
+.event-list-stacked__heading {
+  @include typography($typo__h2);
+  margin-bottom: $s-xl;
+}
diff --git a/src/stories/Library/event-list-stacked/eventListStacked.stories.tsx b/src/stories/Library/event-list-stacked/eventListStacked.stories.tsx
new file mode 100644
index 000000000..451af95b1
--- /dev/null
+++ b/src/stories/Library/event-list-stacked/eventListStacked.stories.tsx
@@ -0,0 +1,21 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import EventListStacked from "./EventListStacked";
+
+export default {
+  title: "Library/ Stacked Event List",
+
+  component: EventListStacked,
+  argTypes: {
+    title: {
+      defaultValue: "Kommende arrangementer",
+      control: "text",
+      description: "Title of the section",
+    },
+  },
+} as ComponentMeta<typeof EventListStacked>;
+
+const Template: ComponentStory<typeof EventListStacked> = (args) => (
+  <EventListStacked {...args} />
+);
+
+export const FilteredList = Template.bind({});