Merge pull request #625 from danskernesdigitalebibliotek/DDFLSBP-615-…

…efter-registrering-skal-laner-force-logges-ud-og-blive-sendt-til-login-i-adgangsplatformen_separate-release

Add design for the registration redirect login message

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-form-page/registration-form-page";
 @import "./src/stories/Blocks/form/form";
 
 @import "./src/styles/scss/shared";

src/stories/Blocks/registration-form-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;

src/stories/Blocks/registration-form-page/RegistrationFormPage.stories.tsx

@@ -0,0 +1,31 @@
+import { ComponentStory } from "@storybook/react";
+import RedirectToLoginMessage, {
+  RedirectToLoginMessageProps,
+} from "./RedirectToLoginMessage";
+
+export default {
+  title: "Blocks / Registration Form 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} />;

src/stories/Blocks/registration-form-page/registration-form-page.scss

@@ -0,0 +1,18 @@
+.redirect-to-login-message {
+  padding: $s-lg;
+  margin-left: auto;
+
+  @include media-query__small {
+    padding: 300px;
+  }
+
+  &__top {
+    @include typography($typo__body-large);
+    margin-top: $s-md;
+  }
+
+  &__bottom {
+    @include typography($typo__body-placeholder);
+    margin-top: $s-md;
+  }
+}