From 677516da3f2bf49feee236e150b26bb9491b2754 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Wed, 1 May 2024 14:07:25 +0200
Subject: [PATCH 01/12] Update Dropdown component to be able to render a
 footnote under dropdown

---
 src/stories/Library/dropdown/Dropdown.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/stories/Library/dropdown/Dropdown.tsx b/src/stories/Library/dropdown/Dropdown.tsx
index 19d5931e8..d9c77b3fd 100644
--- a/src/stories/Library/dropdown/Dropdown.tsx
+++ b/src/stories/Library/dropdown/Dropdown.tsx
@@ -16,6 +16,7 @@ export type DropdownElementProps = {
   arrowIcon: "triangles" | "chevron";
   classNames?: string;
   innerClassNames?: { select?: string; option?: string; arrowWrapper?: string };
+  footnote?: string;
 };
 
 const DropdownElement: React.FC<DropdownElementProps> = ({
@@ -25,6 +26,7 @@ const DropdownElement: React.FC<DropdownElementProps> = ({
   list,
   classNames,
   innerClassNames,
+  footnote,
 }) => {
   const Icon = () => {
     if (arrowIcon === "triangles") {
@@ -70,6 +72,7 @@ const DropdownElement: React.FC<DropdownElementProps> = ({
           <Icon />
         </div>
       </div>
+      {footnote && <div className="dropdown__footnote">{footnote}</div>}
     </>
   );
 };
@@ -82,6 +85,7 @@ export type DropdownProps = {
   classNames?: string;
   innerClassNames?: { select?: string; option?: string; arrowWrapper?: string };
   hideInputWrapper?: boolean;
+  footnote?: string;
 };
 
 export const Dropdown: React.FC<DropdownProps> = ({
@@ -92,6 +96,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
   classNames,
   innerClassNames,
   hideInputWrapper = false,
+  footnote,
 }) => {
   if (hideInputWrapper) {
     return (
@@ -102,6 +107,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
         list={list}
         classNames={classNames}
         innerClassNames={innerClassNames}
+        footnote={footnote}
       />
     );
   }
@@ -115,6 +121,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
         list={list}
         classNames={classNames}
         innerClassNames={innerClassNames}
+        footnote={footnote}
       />
     </div>
   );

From e9298ecc5bb251e055c149e36d0421fc4c2e9b7b Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Wed, 1 May 2024 14:08:00 +0200
Subject: [PATCH 02/12] Create DoubleInputRow component to render a row of 2
 inline inputs

---
 .../Library/Forms/input/DoubleInputRow.tsx    | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 src/stories/Library/Forms/input/DoubleInputRow.tsx

diff --git a/src/stories/Library/Forms/input/DoubleInputRow.tsx b/src/stories/Library/Forms/input/DoubleInputRow.tsx
new file mode 100644
index 000000000..8f38aedd9
--- /dev/null
+++ b/src/stories/Library/Forms/input/DoubleInputRow.tsx
@@ -0,0 +1,30 @@
+import Input from "./Input";
+
+export type DoubleInputRowProps = {
+  leftLabel: string;
+  rightLabel: string;
+};
+
+const DoubleInputRow: React.FC<DoubleInputRowProps> = ({
+  leftLabel,
+  rightLabel,
+}) => {
+  return (
+    <div className="contact-info-flex">
+      <Input
+        id={leftLabel}
+        label={leftLabel}
+        type="text"
+        classNames="patron__input patron__input--desktop mr-16"
+      />
+      <Input
+        id={rightLabel}
+        label={rightLabel}
+        type="text"
+        classNames="patron__input patron__input--desktop"
+      />
+    </div>
+  );
+};
+
+export default DoubleInputRow;

From 253820886da6596bbaaa91bc5a8efa45a78f2e26 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Wed, 1 May 2024 14:08:31 +0200
Subject: [PATCH 03/12] Update Input component to accept classNames from its
 parent

---
 src/stories/Library/Forms/input/Input.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/stories/Library/Forms/input/Input.tsx b/src/stories/Library/Forms/input/Input.tsx
index 197933397..ba4594853 100644
--- a/src/stories/Library/Forms/input/Input.tsx
+++ b/src/stories/Library/Forms/input/Input.tsx
@@ -6,13 +6,14 @@ export type InputProps = {
   id: string;
   description?: string;
   validation?: string;
+  classNames?: string;
 };
 
 const Input = (props: InputProps) => {
-  const { label, type, id, description, validation } = props;
+  const { label, type, id, description, validation, classNames } = props;
   const invalid = validation ? "true" : "false";
   return (
-    <div className="dpl-input">
+    <div className={`dpl-input ${classNames || ""}`}>
       <Label id={id}>{label}</Label>
       <input
         aria-invalid={invalid}

From 89591ef907e7d5776ef5ad11b0df13675a478a26 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Wed, 1 May 2024 14:08:57 +0200
Subject: [PATCH 04/12] Update Dropdown styling for footnote

---
 src/stories/Library/dropdown/dropdown.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/stories/Library/dropdown/dropdown.scss b/src/stories/Library/dropdown/dropdown.scss
index 5c6d87c68..9c1a519d7 100644
--- a/src/stories/Library/dropdown/dropdown.scss
+++ b/src/stories/Library/dropdown/dropdown.scss
@@ -96,3 +96,8 @@ $_dropdown-icon-size: 50px;
 .dropdown__arrows--inline {
   height: 100%;
 }
+
+.dropdown__footnote {
+  @include typography($typo__small-caption);
+  margin: $s-sm 0 $s-3xl 0;
+}

From c2d1d65103cd36cf91454099b285001fe9d57a5d Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Wed, 1 May 2024 14:09:54 +0200
Subject: [PATCH 05/12] Update .patron__input class to have a bottom margin

---
 src/stories/Library/patron-info/patron-info.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/stories/Library/patron-info/patron-info.scss b/src/stories/Library/patron-info/patron-info.scss
index dbad5b637..d415f6f83 100644
--- a/src/stories/Library/patron-info/patron-info.scss
+++ b/src/stories/Library/patron-info/patron-info.scss
@@ -40,6 +40,7 @@
   display: flex;
   flex-direction: column;
   @include typography($typo__body-medium);
+  margin-bottom: $s-xl;
 
   label {
     @include typography($typo__body-medium);
@@ -76,6 +77,7 @@
   }
 
   input[type="number"] {
+    appearance: textfield;
     -moz-appearance: textfield;
   }
 }

From e0e3057a49a528779ee62cf8e1b7cdee2eab9542 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Wed, 1 May 2024 14:10:35 +0200
Subject: [PATCH 06/12] Introduce CreatePatron story, component & styling

---
 base.scss                                     |  1 +
 .../create-patron/CreatePatron.stories.tsx    | 28 ++++++++++
 .../Blocks/create-patron/CreatePatron.tsx     | 52 +++++++++++++++++++
 .../Blocks/create-patron/create-patron.scss   | 29 +++++++++++
 4 files changed, 110 insertions(+)
 create mode 100644 src/stories/Blocks/create-patron/CreatePatron.stories.tsx
 create mode 100644 src/stories/Blocks/create-patron/CreatePatron.tsx
 create mode 100644 src/stories/Blocks/create-patron/create-patron.scss

diff --git a/base.scss b/base.scss
index 08ac5e7d3..69c6389c8 100644
--- a/base.scss
+++ b/base.scss
@@ -161,6 +161,7 @@
 @import "./src/stories/Blocks/loan-page/loan-page-skeleton";
 @import "./src/stories/Blocks/registration-page/registration-page";
 @import "./src/stories/Blocks/form/form";
+@import "./src/stories/Blocks/create-patron/create-patron";
 
 @import "./src/styles/scss/shared";
 @import "./src/styles/scss/internal";
diff --git a/src/stories/Blocks/create-patron/CreatePatron.stories.tsx b/src/stories/Blocks/create-patron/CreatePatron.stories.tsx
new file mode 100644
index 000000000..a9b5cf341
--- /dev/null
+++ b/src/stories/Blocks/create-patron/CreatePatron.stories.tsx
@@ -0,0 +1,28 @@
+import { ComponentStory } from "@storybook/react";
+import { withDesign } from "storybook-addon-designs";
+import CreatePatron, { CreatePatronProps } from "./CreatePatron";
+
+export default {
+  title: "Blocks / Create Patron",
+  component: CreatePatron,
+  decorators: [withDesign],
+  argTypes: {
+    headline: {
+      name: "Title",
+      defaultValue: "Register as patron",
+      control: { type: "text" },
+    },
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=14631%3A36424&mode=design&t=kNDJGSba8OVIdnRx-1",
+    },
+  },
+};
+
+const Template: ComponentStory<typeof CreatePatron> = (
+  args: CreatePatronProps
+) => <CreatePatron {...args} />;
+
+export const Default = Template.bind({});
diff --git a/src/stories/Blocks/create-patron/CreatePatron.tsx b/src/stories/Blocks/create-patron/CreatePatron.tsx
new file mode 100644
index 000000000..07a34f58c
--- /dev/null
+++ b/src/stories/Blocks/create-patron/CreatePatron.tsx
@@ -0,0 +1,52 @@
+import { Button } from "../../Library/Buttons/button/Button";
+import DoubleInputRow from "../../Library/Forms/input/DoubleInputRow";
+import { Dropdown } from "../../Library/dropdown/Dropdown";
+import { Links } from "../../Library/links/Links";
+
+export interface CreatePatronProps {
+  headline: string;
+}
+
+const CreatePatron: React.FC<CreatePatronProps> = ({ headline }) => {
+  return (
+    <div className="create-patron-page">
+      <h1 className="create-patron-page__title">{headline}</h1>
+      <form>
+        <section className="create-patron-page__row">
+          <DoubleInputRow leftLabel="Phone number*" rightLabel="Email*" />
+        </section>
+        <section className="create-patron-page__row">
+          <DoubleInputRow leftLabel="New pin*" rightLabel="Confirm new pin*" />
+        </section>
+        <Dropdown
+          ariaLabel="Choose pickup branch"
+          arrowIcon="chevron"
+          list={[
+            { title: "Nothing selected" },
+            { title: "Option 1" },
+            { title: "Option 2" },
+          ]}
+          classNames="dropdown--grey-borders"
+          labelComponent={
+            <label className="text-body-medium-medium mb-8">
+              Choose pickup branch*
+            </label>
+          }
+          footnote="Choose preferred library for pickup of your future reservations."
+        />
+        <div className="create-patron-page__buttons">
+          <Button
+            buttonType="none"
+            label="Create profile"
+            size="small"
+            variant="filled"
+            classNames="mr-16"
+          />
+          <Links href="#" linkText="Cancel" classNames="mt-8" />
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default CreatePatron;
diff --git a/src/stories/Blocks/create-patron/create-patron.scss b/src/stories/Blocks/create-patron/create-patron.scss
new file mode 100644
index 000000000..00f3b140c
--- /dev/null
+++ b/src/stories/Blocks/create-patron/create-patron.scss
@@ -0,0 +1,29 @@
+.create-patron-page {
+  background: $color__global-primary;
+  padding: $s-2xl $s-sm $s-6xl $s-sm;
+
+  @include media-query__small {
+    margin: auto;
+    max-width: 550px;
+    padding: $s-5xl 0 $s-2xl 0;
+  }
+
+  &__title {
+    @include typography($typo__h1);
+    margin-bottom: $s-2xl;
+
+    @include media-query__small {
+      margin-bottom: $s-5xl;
+    }
+  }
+
+  &__row {
+    @include media-query__small {
+      margin-bottom: $s-3xl;
+    }
+  }
+
+  &__buttons {
+    display: flex;
+  }
+}

From 38677c65bf5c1884e40e25343927ec843b9318b2 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Thu, 2 May 2024 09:38:13 +0200
Subject: [PATCH 07/12] Use clsx in Input.tsx for conditional classes

---
 src/stories/Library/Forms/input/Input.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/stories/Library/Forms/input/Input.tsx b/src/stories/Library/Forms/input/Input.tsx
index ba4594853..f45ad98cb 100644
--- a/src/stories/Library/Forms/input/Input.tsx
+++ b/src/stories/Library/Forms/input/Input.tsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import Label from "../label/Label";
 
 export type InputProps = {
@@ -13,7 +14,7 @@ const Input = (props: InputProps) => {
   const { label, type, id, description, validation, classNames } = props;
   const invalid = validation ? "true" : "false";
   return (
-    <div className={`dpl-input ${classNames || ""}`}>
+    <div className={clsx("dpl-input", [{ classNames }])}>
       <Label id={id}>{label}</Label>
       <input
         aria-invalid={invalid}

From a1e7a33b158c7fc6ba8cd258ed25e789c74cd229 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Thu, 2 May 2024 10:21:45 +0200
Subject: [PATCH 08/12] Fix use of variables with clsx() in Input.tsx

---
 src/stories/Library/Forms/input/Input.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stories/Library/Forms/input/Input.tsx b/src/stories/Library/Forms/input/Input.tsx
index f45ad98cb..0370e645f 100644
--- a/src/stories/Library/Forms/input/Input.tsx
+++ b/src/stories/Library/Forms/input/Input.tsx
@@ -14,7 +14,7 @@ const Input = (props: InputProps) => {
   const { label, type, id, description, validation, classNames } = props;
   const invalid = validation ? "true" : "false";
   return (
-    <div className={clsx("dpl-input", [{ classNames }])}>
+    <div className={clsx("dpl-input", !!classNames && classNames)}>
       <Label id={id}>{label}</Label>
       <input
         aria-invalid={invalid}

From da96fe78d6ee632b1c996a601953c824ab509ec6 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Tue, 7 May 2024 10:44:05 +0200
Subject: [PATCH 09/12] Update /Forms/input/Input.tsx - clsx understands falsey
 values

Co-authored-by: Claus Bruun <claus@b-ruu.dk>
---
 src/stories/Library/Forms/input/Input.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stories/Library/Forms/input/Input.tsx b/src/stories/Library/Forms/input/Input.tsx
index 0370e645f..7f6699053 100644
--- a/src/stories/Library/Forms/input/Input.tsx
+++ b/src/stories/Library/Forms/input/Input.tsx
@@ -14,7 +14,7 @@ const Input = (props: InputProps) => {
   const { label, type, id, description, validation, classNames } = props;
   const invalid = validation ? "true" : "false";
   return (
-    <div className={clsx("dpl-input", !!classNames && classNames)}>
+    <div className={clsx("dpl-input", classNames)}>
       <Label id={id}>{label}</Label>
       <input
         aria-invalid={invalid}

From ac2cd9c7ce498cf2634cc5d9d348770ddd6186e7 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Tue, 14 May 2024 11:28:28 +0200
Subject: [PATCH 10/12] Make sure input writing text is styled & matches rest
 of the application

---
 src/stories/Library/Forms/input/input.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/stories/Library/Forms/input/input.scss b/src/stories/Library/Forms/input/input.scss
index 1db76ada2..f8c51c12e 100644
--- a/src/stories/Library/Forms/input/input.scss
+++ b/src/stories/Library/Forms/input/input.scss
@@ -1,6 +1,7 @@
 .dpl-input {
   display: flex;
   flex-direction: column;
+  @include typography($typo__body-medium);
 
   label {
     @include typography($typo__body-medium);

From bb1f95508ac33e15f04cb97269739979d893f6c4 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Tue, 14 May 2024 11:29:06 +0200
Subject: [PATCH 11/12] Create generic classes for the generic DoubleInputRow
 component

---
 .../Library/Forms/input/DoubleInputRow.tsx    |  6 +++---
 src/stories/Library/Forms/input/input.scss    | 19 +++++++++++++++++++
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/stories/Library/Forms/input/DoubleInputRow.tsx b/src/stories/Library/Forms/input/DoubleInputRow.tsx
index 8f38aedd9..aa6648cfd 100644
--- a/src/stories/Library/Forms/input/DoubleInputRow.tsx
+++ b/src/stories/Library/Forms/input/DoubleInputRow.tsx
@@ -10,18 +10,18 @@ const DoubleInputRow: React.FC<DoubleInputRowProps> = ({
   rightLabel,
 }) => {
   return (
-    <div className="contact-info-flex">
+    <div className="dpl-input__flex">
       <Input
         id={leftLabel}
         label={leftLabel}
         type="text"
-        classNames="patron__input patron__input--desktop mr-16"
+        classNames="dpl-input dpl-input--double mr-16"
       />
       <Input
         id={rightLabel}
         label={rightLabel}
         type="text"
-        classNames="patron__input patron__input--desktop"
+        classNames="dpl-input dpl-input--double"
       />
     </div>
   );
diff --git a/src/stories/Library/Forms/input/input.scss b/src/stories/Library/Forms/input/input.scss
index f8c51c12e..fb36f5945 100644
--- a/src/stories/Library/Forms/input/input.scss
+++ b/src/stories/Library/Forms/input/input.scss
@@ -20,6 +20,24 @@
     }
   }
 
+  &__flex {
+    display: flex;
+    flex-direction: column;
+
+    @include media-query__small {
+      flex-direction: row;
+    }
+  }
+
+  &.dpl-input--double {
+    width: 100%;
+    margin-bottom: $s-xl;
+
+    @include media-query__small {
+      margin-bottom: 0px;
+    }
+  }
+
   &__description {
     color: $color__text-secondary-gray;
     @include typography($typo__body-small);
@@ -41,6 +59,7 @@
 
   /* Firefox */
   input[type="number"] {
+    appearance: textfield;
     -moz-appearance: textfield;
   }
 }

From 1b9b19ba70792fc019a34fb3e1b1cb16d52b3ae2 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Tue, 14 May 2024 11:57:29 +0200
Subject: [PATCH 12/12] Make it possible for dpl-inputs to have invalid style &
 descriptions

---
 src/stories/Blocks/create-patron/CreatePatron.tsx  |  8 +++++++-
 src/stories/Library/Forms/input/DoubleInputRow.tsx | 12 ++++++++++++
 src/stories/Library/Forms/input/Input.tsx          |  6 +++++-
 src/stories/Library/Forms/input/input.scss         |  6 ++++++
 4 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/stories/Blocks/create-patron/CreatePatron.tsx b/src/stories/Blocks/create-patron/CreatePatron.tsx
index 07a34f58c..b7dfd3138 100644
--- a/src/stories/Blocks/create-patron/CreatePatron.tsx
+++ b/src/stories/Blocks/create-patron/CreatePatron.tsx
@@ -16,7 +16,13 @@ const CreatePatron: React.FC<CreatePatronProps> = ({ headline }) => {
           <DoubleInputRow leftLabel="Phone number*" rightLabel="Email*" />
         </section>
         <section className="create-patron-page__row">
-          <DoubleInputRow leftLabel="New pin*" rightLabel="Confirm new pin*" />
+          <DoubleInputRow
+            leftLabel="New pin*"
+            rightLabel="Confirm new pin*"
+            descriptionLeft="Exactly 4 digits"
+            descriptionRight="Exactly 4 digits"
+            validationRight="Pin doesn't match"
+          />
         </section>
         <Dropdown
           ariaLabel="Choose pickup branch"
diff --git a/src/stories/Library/Forms/input/DoubleInputRow.tsx b/src/stories/Library/Forms/input/DoubleInputRow.tsx
index aa6648cfd..81b37fd82 100644
--- a/src/stories/Library/Forms/input/DoubleInputRow.tsx
+++ b/src/stories/Library/Forms/input/DoubleInputRow.tsx
@@ -3,23 +3,35 @@ import Input from "./Input";
 export type DoubleInputRowProps = {
   leftLabel: string;
   rightLabel: string;
+  descriptionLeft?: string;
+  descriptionRight?: string;
+  validationLeft?: string;
+  validationRight?: string;
 };
 
 const DoubleInputRow: React.FC<DoubleInputRowProps> = ({
   leftLabel,
   rightLabel,
+  descriptionLeft,
+  descriptionRight,
+  validationLeft,
+  validationRight,
 }) => {
   return (
     <div className="dpl-input__flex">
       <Input
         id={leftLabel}
         label={leftLabel}
+        description={descriptionLeft}
+        validation={validationLeft}
         type="text"
         classNames="dpl-input dpl-input--double mr-16"
       />
       <Input
         id={rightLabel}
         label={rightLabel}
+        description={descriptionRight}
+        validation={validationRight}
         type="text"
         classNames="dpl-input dpl-input--double"
       />
diff --git a/src/stories/Library/Forms/input/Input.tsx b/src/stories/Library/Forms/input/Input.tsx
index 7f6699053..d5d6efbc5 100644
--- a/src/stories/Library/Forms/input/Input.tsx
+++ b/src/stories/Library/Forms/input/Input.tsx
@@ -14,7 +14,11 @@ const Input = (props: InputProps) => {
   const { label, type, id, description, validation, classNames } = props;
   const invalid = validation ? "true" : "false";
   return (
-    <div className={clsx("dpl-input", classNames)}>
+    <div
+      className={clsx("dpl-input", classNames, [
+        { "dpl-input--invalid": !!validation },
+      ])}
+    >
       <Label id={id}>{label}</Label>
       <input
         aria-invalid={invalid}
diff --git a/src/stories/Library/Forms/input/input.scss b/src/stories/Library/Forms/input/input.scss
index fb36f5945..89eeef8de 100644
--- a/src/stories/Library/Forms/input/input.scss
+++ b/src/stories/Library/Forms/input/input.scss
@@ -29,6 +29,12 @@
     }
   }
 
+  &.dpl-input--invalid {
+    input {
+      background-color: $color__global-secondary;
+    }
+  }
+
   &.dpl-input--double {
     width: 100%;
     margin-bottom: $s-xl;