From 1339ed1ba81a3db8e02ecfdc7d688b77790d30f5 Mon Sep 17 00:00:00 2001
From: Mikkel Jakobsen <jakobsen.mikkel@gmail.com>
Date: Thu, 2 May 2024 12:06:30 +0200
Subject: [PATCH 1/3] Add design for the registration redirect login message

---
 base.scss                                     |  1 +
 .../RedirectToLoginMessage.tsx                | 33 +++++++++++++++++++
 .../RegistrationFormularPage.stories.tsx      | 31 +++++++++++++++++
 .../registration-formular-page.scss           | 14 ++++++++
 4 files changed, 79 insertions(+)
 create mode 100644 src/stories/Blocks/registration-formular-page/RedirectToLoginMessage.tsx
 create mode 100644 src/stories/Blocks/registration-formular-page/RegistrationFormularPage.stories.tsx
 create mode 100644 src/stories/Blocks/registration-formular-page/registration-formular-page.scss

diff --git a/base.scss b/base.scss
index c7f155a4a..50a20a9f8 100644
--- a/base.scss
+++ b/base.scss
@@ -163,6 +163,7 @@
 @import "./src/stories/Blocks/reservation-page/reservation-page-skeleton";
 @import "./src/stories/Blocks/loan-page/loan-page-skeleton";
 @import "./src/stories/Blocks/registration-page/registration-page";
+@import "./src/stories/Blocks/registration-formular-page/registration-formular-page";
 @import "./src/stories/Blocks/form/form";
 
 @import "./src/styles/scss/shared";
diff --git a/src/stories/Blocks/registration-formular-page/RedirectToLoginMessage.tsx b/src/stories/Blocks/registration-formular-page/RedirectToLoginMessage.tsx
new file mode 100644
index 000000000..010413a2e
--- /dev/null
+++ b/src/stories/Blocks/registration-formular-page/RedirectToLoginMessage.tsx
@@ -0,0 +1,33 @@
+import { FC } from "react";
+import { Button } from "../../Library/Buttons/button/Button";
+
+export interface RedirectToLoginMessageProps {
+  infoTopText: string;
+  infoBottomText: string;
+  buttonText: string;
+}
+
+const RedirectToLoginMessage: FC<RedirectToLoginMessageProps> = ({
+  infoTopText,
+  infoBottomText,
+  buttonText,
+}) => {
+  return (
+    <section className="redirect-to-login-message">
+      <p className="redirect-to-login-message__top">{infoTopText}</p>
+      <p className="redirect-to-login-message__bottom">{infoBottomText}</p>
+      <Button
+        buttonType="default"
+        size="small"
+        collapsible={false}
+        disabled={false}
+        variant="outline"
+        onClick={() => {}}
+        classNames="mt-32"
+        label={buttonText}
+      />
+    </section>
+  );
+};
+
+export default RedirectToLoginMessage;
diff --git a/src/stories/Blocks/registration-formular-page/RegistrationFormularPage.stories.tsx b/src/stories/Blocks/registration-formular-page/RegistrationFormularPage.stories.tsx
new file mode 100644
index 000000000..f087fdb8f
--- /dev/null
+++ b/src/stories/Blocks/registration-formular-page/RegistrationFormularPage.stories.tsx
@@ -0,0 +1,31 @@
+import { ComponentStory } from "@storybook/react";
+import RedirectToLoginMessage, {
+  RedirectToLoginMessageProps,
+} from "./RedirectToLoginMessage";
+
+export default {
+  title: "Blocks / Registration Formular Page",
+  argTypes: {
+    infoTopText: {
+      name: "Headline",
+      defaultValue:
+        "You are now registered as a user and need to log in again to be able to use the application.",
+      control: { type: "text" },
+    },
+    infoBottomText: {
+      name: "Text",
+      defaultValue:
+        "You will be sent to the Adgangsplatformen to log in again in 10 seconds",
+      control: { type: "text" },
+    },
+    buttonText: {
+      name: "Button text",
+      defaultValue: "Log in",
+      control: { type: "text" },
+    },
+  },
+};
+
+export const RedirectToLoginMessageExample: ComponentStory<
+  typeof RedirectToLoginMessage
+> = (args: RedirectToLoginMessageProps) => <RedirectToLoginMessage {...args} />;
diff --git a/src/stories/Blocks/registration-formular-page/registration-formular-page.scss b/src/stories/Blocks/registration-formular-page/registration-formular-page.scss
new file mode 100644
index 000000000..d3bb7203d
--- /dev/null
+++ b/src/stories/Blocks/registration-formular-page/registration-formular-page.scss
@@ -0,0 +1,14 @@
+.redirect-to-login-message {
+  padding: 300px;
+  margin-left: auto;
+
+  &__top {
+    @include typography($typo__body-large);
+    margin-top: $s-md;
+  }
+
+  &__bottom {
+    @include typography($typo__body-placeholder);
+    margin-top: $s-md;
+  }
+}

From c9eee798c5ef952d58d59a6cd07ca82a2c11dbc7 Mon Sep 17 00:00:00 2001
From: Mikkel Jakobsen <jakobsen.mikkel@gmail.com>
Date: Thu, 2 May 2024 15:01:42 +0200
Subject: [PATCH 2/3] Remember that responsive design!

Make sure that we do not use that much padding on smaller devices -
looks ridicule.
---
 .../registration-formular-page.scss                         | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/stories/Blocks/registration-formular-page/registration-formular-page.scss b/src/stories/Blocks/registration-formular-page/registration-formular-page.scss
index d3bb7203d..b41ade379 100644
--- a/src/stories/Blocks/registration-formular-page/registration-formular-page.scss
+++ b/src/stories/Blocks/registration-formular-page/registration-formular-page.scss
@@ -1,7 +1,11 @@
 .redirect-to-login-message {
-  padding: 300px;
+  padding: $s-lg;
   margin-left: auto;
 
+  @include media-query__small {
+    padding: 300px;
+  }
+
   &__top {
     @include typography($typo__body-large);
     margin-top: $s-md;

From 470bb365eedf56b967a9e95fb17bc620e6038156 Mon Sep 17 00:00:00 2001
From: Mikkel Jakobsen <jakobsen.mikkel@gmail.com>
Date: Tue, 7 May 2024 09:35:38 +0200
Subject: [PATCH 3/3] Renaming formular to form

---
 base.scss                                                       | 2 +-
 .../RedirectToLoginMessage.tsx                                  | 0
 .../RegistrationFormPage.stories.tsx}                           | 2 +-
 .../registration-form-page.scss}                                | 0
 4 files changed, 2 insertions(+), 2 deletions(-)
 rename src/stories/Blocks/{registration-formular-page => registration-form-page}/RedirectToLoginMessage.tsx (100%)
 rename src/stories/Blocks/{registration-formular-page/RegistrationFormularPage.stories.tsx => registration-form-page/RegistrationFormPage.stories.tsx} (94%)
 rename src/stories/Blocks/{registration-formular-page/registration-formular-page.scss => registration-form-page/registration-form-page.scss} (100%)

diff --git a/base.scss b/base.scss
index 50a20a9f8..107130f0e 100644
--- a/base.scss
+++ b/base.scss
@@ -163,7 +163,7 @@
 @import "./src/stories/Blocks/reservation-page/reservation-page-skeleton";
 @import "./src/stories/Blocks/loan-page/loan-page-skeleton";
 @import "./src/stories/Blocks/registration-page/registration-page";
-@import "./src/stories/Blocks/registration-formular-page/registration-formular-page";
+@import "./src/stories/Blocks/registration-form-page/registration-form-page";
 @import "./src/stories/Blocks/form/form";
 
 @import "./src/styles/scss/shared";
diff --git a/src/stories/Blocks/registration-formular-page/RedirectToLoginMessage.tsx b/src/stories/Blocks/registration-form-page/RedirectToLoginMessage.tsx
similarity index 100%
rename from src/stories/Blocks/registration-formular-page/RedirectToLoginMessage.tsx
rename to src/stories/Blocks/registration-form-page/RedirectToLoginMessage.tsx
diff --git a/src/stories/Blocks/registration-formular-page/RegistrationFormularPage.stories.tsx b/src/stories/Blocks/registration-form-page/RegistrationFormPage.stories.tsx
similarity index 94%
rename from src/stories/Blocks/registration-formular-page/RegistrationFormularPage.stories.tsx
rename to src/stories/Blocks/registration-form-page/RegistrationFormPage.stories.tsx
index f087fdb8f..5e9f5194f 100644
--- a/src/stories/Blocks/registration-formular-page/RegistrationFormularPage.stories.tsx
+++ b/src/stories/Blocks/registration-form-page/RegistrationFormPage.stories.tsx
@@ -4,7 +4,7 @@ import RedirectToLoginMessage, {
 } from "./RedirectToLoginMessage";
 
 export default {
-  title: "Blocks / Registration Formular Page",
+  title: "Blocks / Registration Form Page",
   argTypes: {
     infoTopText: {
       name: "Headline",
diff --git a/src/stories/Blocks/registration-formular-page/registration-formular-page.scss b/src/stories/Blocks/registration-form-page/registration-form-page.scss
similarity index 100%
rename from src/stories/Blocks/registration-formular-page/registration-formular-page.scss
rename to src/stories/Blocks/registration-form-page/registration-form-page.scss