From a5254af2eccd9a9bf4077ee623d29ac580a8a1b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Garn=C3=A6s?= <kasperg@users.noreply.github.com>
Date: Tue, 23 Apr 2024 08:58:16 +0200
Subject: [PATCH 1/4] Start Hermod sprint 13


From d6158c69985493d3718fbbd110013b8fba37d0a1 Mon Sep 17 00:00:00 2001
From: Kasper Birch <kasperbirch1@gmail.com>
Date: Tue, 23 Apr 2024 19:32:14 +0200
Subject: [PATCH 2/4] Add styles for recurring opening hours (editor)

This is relevant to the pull request: https://github.com/danskernesdigitalebibliotek/dpl-react/pull/1147 and will not be reflected in the design system.
---
 public/icons/logo/reload_logo_black.svg       |  1 +
 public/icons/logo/reload_logo_white.svg       |  1 +
 .../opening-hours-editor.scss                 | 45 +++++++++++++++++--
 3 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 public/icons/logo/reload_logo_black.svg
 create mode 100644 public/icons/logo/reload_logo_white.svg

diff --git a/public/icons/logo/reload_logo_black.svg b/public/icons/logo/reload_logo_black.svg
new file mode 100644
index 000000000..84d3a78c2
--- /dev/null
+++ b/public/icons/logo/reload_logo_black.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"><title>Reload_mark_RGB_black</title><path d="M257.3,166.8A67.1,67.1,0,1,1,200,134.6h0l-20.7,20.7L200,176l38.5-38.5h0l20.7-20.7L200,57.6,179.3,78.3,200,99h0a102.5,102.5,0,1,0,87.7,49.3Z"/></svg>
diff --git a/public/icons/logo/reload_logo_white.svg b/public/icons/logo/reload_logo_white.svg
new file mode 100644
index 000000000..027ca4ebc
--- /dev/null
+++ b/public/icons/logo/reload_logo_white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"><title>Reload_mark_RGB_white</title><path d="M257.3,166.8A67.1,67.1,0,1,1,200,134.6h0l-20.7,20.7L200,176l38.5-38.5h0l20.7-20.7L200,57.6,179.3,78.3,200,99h0a102.5,102.5,0,1,0,87.7,49.3Z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/src/stories/Library/opening-hours-editor/opening-hours-editor.scss b/src/stories/Library/opening-hours-editor/opening-hours-editor.scss
index 09c61ab63..a7730898f 100644
--- a/src/stories/Library/opening-hours-editor/opening-hours-editor.scss
+++ b/src/stories/Library/opening-hours-editor/opening-hours-editor.scss
@@ -6,7 +6,7 @@
   display: grid;
   background: #f8f8f8;
   padding: 2.5rem;
-  min-width: 300px;
+  width: 350px;
   line-height: 1;
 }
 
@@ -26,9 +26,30 @@
   background-color: #fff;
 }
 
+.opening-hours-editor-form__checkbox {
+  margin-top: 0.75rem;
+  margin-bottom: 0.5rem;
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+
+  label {
+    margin: 0;
+  }
+}
+
+.opening-hours-editor-form__table {
+  tr > td:last-child {
+    white-space: nowrap;
+    text-align: right;
+  }
+}
+
 .opening-hours-editor-form__submit,
-.opening-hours-editor-form__remove {
+.opening-hours-editor-form__remove,
+.opening-hours-editor-form__cancel {
   cursor: pointer;
+  border: 0;
   margin-top: 1rem;
   color: #fff;
   padding: 0.75rem 1.5rem;
@@ -37,7 +58,6 @@
 }
 
 .opening-hours-editor-form__submit {
-  border: 0;
   background-color: #22c55e;
 
   &:hover {
@@ -46,7 +66,6 @@
 }
 
 .opening-hours-editor-form__remove {
-  border: 0;
   background-color: #ef4444;
 
   &:hover {
@@ -54,9 +73,27 @@
   }
 }
 
+.opening-hours-editor-form__cancel {
+  background-color: #d1d5db;
+
+  &:hover {
+    background-color: #a1a1aa;
+  }
+}
+
 .opening-hours-editor-event-content {
   padding: 5px 10px;
   cursor: pointer;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  background-color: rgba(255, 255, 255, 0.8);
+  color: black;
+}
+
+.opening-hours-editor-event-content__series-icon {
+  width: 30px;
+  height: 30px;
 }
 
 // Override Drupal's default margin for tables inside .fc to eliminate top and bottom spacing

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 3/4] 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({});

From 800111c581d8f583656fafe0829d0871aa14609b Mon Sep 17 00:00:00 2001
From: Kasper Birch <kasperbirch1@gmail.com>
Date: Thu, 25 Apr 2024 14:20:46 +0200
Subject: [PATCH 4/4] Enhance styling for repeated opening hours

- Implemented styles for disabled input fields
- Expanded spacing around checkbox, increased checkbox size, and updated label font style
- Remove Drupal table border to ensure the lines for when an hour starts in full calendar are not disrupted.
---
 .../opening-hours-editor.scss                 | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/stories/Library/opening-hours-editor/opening-hours-editor.scss b/src/stories/Library/opening-hours-editor/opening-hours-editor.scss
index a7730898f..e3fe5a5de 100644
--- a/src/stories/Library/opening-hours-editor/opening-hours-editor.scss
+++ b/src/stories/Library/opening-hours-editor/opening-hours-editor.scss
@@ -24,17 +24,28 @@
   padding: 0.5rem;
   color: #555;
   background-color: #fff;
+
+  &:disabled {
+    background-color: transparent;
+  }
 }
 
 .opening-hours-editor-form__checkbox {
-  margin-top: 0.75rem;
+  margin-top: 1.5rem;
   margin-bottom: 0.5rem;
   display: flex;
   gap: 0.5rem;
   align-items: center;
 
+  input[type="checkbox"] {
+    width: 2rem;
+    height: 2rem;
+  }
+
   label {
     margin: 0;
+    font-size: 0.8rem;
+    line-height: 1.25;
   }
 }
 
@@ -92,8 +103,8 @@
 }
 
 .opening-hours-editor-event-content__series-icon {
-  width: 30px;
-  height: 30px;
+  width: 2rem;
+  height: 2rem;
 }
 
 // Override Drupal's default margin for tables inside .fc to eliminate top and bottom spacing
@@ -101,3 +112,8 @@
 .fc table {
   margin: 0;
 }
+
+// Override Drupal's default border for table rows inside .fc to keep the correct styling for when an hour starts
+.fc tr {
+  border-bottom: unset;
+}