From 73fc80bea5d51d55a2beb7e12e1e5ac483d3ffbd Mon Sep 17 00:00:00 2001
From: clausbruun <claus@b-ruu.dk>
Date: Fri, 26 Apr 2024 14:42:52 +0200
Subject: [PATCH 01/19] Added list type for ListDescription values

---
 .../list-description/ListDescription.tsx      | 29 ++++++++++++++-----
 .../ListDescriptionFakeData.tsx               | 14 +++++++++
 .../list-description/list-description.scss    |  5 ++++
 3 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/src/stories/Library/Lists/list-description/ListDescription.tsx b/src/stories/Library/Lists/list-description/ListDescription.tsx
index afef063f8..72413bf41 100644
--- a/src/stories/Library/Lists/list-description/ListDescription.tsx
+++ b/src/stories/Library/Lists/list-description/ListDescription.tsx
@@ -5,7 +5,7 @@ import { generateId } from "../../horizontal-term-line/HorizontalTermLine";
 export type ListData = {
   [k: string]: {
     value: string[];
-    type: "standard" | "link";
+    type: "standard" | "link" | "list";
     layout?: "default" | "column";
   };
 };
@@ -27,12 +27,27 @@ const ListDescription: React.FC<{ data: ListData; className?: string }> = ({
                 layout === "column" && "list-description__value--column"
               )}
             >
-              {value.map((val) => (
-                <Fragment key={val}>
-                  {type === "standard" && <span>{val}</span>}
-                  {type === "link" && <span className="link-tag">{val}</span>}
-                </Fragment>
-              ))}
+              {type === "standard" &&
+                value.map((val) => (
+                  <Fragment key={val}>
+                    <span>{val}</span>
+                  </Fragment>
+                ))}
+
+              {type === "link" &&
+                value.map((val) => (
+                  <Fragment key={val}>
+                    <span className="link-tag">{val}</span>
+                  </Fragment>
+                ))}
+
+              {type === "list" && (
+                <ul className="list-description__value--list">
+                  {value.map((val) => (
+                    <li key={val}>{val}</li>
+                  ))}
+                </ul>
+              )}
             </dd>
           </div>
         );
diff --git a/src/stories/Library/Lists/list-description/ListDescriptionFakeData.tsx b/src/stories/Library/Lists/list-description/ListDescriptionFakeData.tsx
index 57ecaad77..6d34cc1d8 100644
--- a/src/stories/Library/Lists/list-description/ListDescriptionFakeData.tsx
+++ b/src/stories/Library/Lists/list-description/ListDescriptionFakeData.tsx
@@ -15,6 +15,20 @@ const fakeData: ListData = {
     type: "standard",
     layout: "column",
   },
+  Indhold: {
+    value: [
+      "Something to Do",
+      "Lie to Me",
+      "People Are People",
+      "It Doesn't Matter",
+      "Stories of Old",
+      "Somebody",
+      "Master and Servant",
+      "If You Want",
+      "Blasphemous Rumours",
+    ],
+    type: "list",
+  },
 };
 
 export default fakeData;
diff --git a/src/stories/Library/Lists/list-description/list-description.scss b/src/stories/Library/Lists/list-description/list-description.scss
index ccf9c3ca7..1ad658e9f 100644
--- a/src/stories/Library/Lists/list-description/list-description.scss
+++ b/src/stories/Library/Lists/list-description/list-description.scss
@@ -26,6 +26,11 @@ dl.list-description {
   .list-description__value--column {
     flex-direction: column;
   }
+  
+  .list-description__value--list {
+    list-style: initial;
+    padding-left: 1em;
+  }
 
   .link-tag {
     @include typography($typo__small-caption);

From 40c75d92e6a10f87d6194dddf79f34e2414efbf3 Mon Sep 17 00:00:00 2001
From: clausbruun <claus@b-ruu.dk>
Date: Fri, 26 Apr 2024 15:39:28 +0200
Subject: [PATCH 02/19] Code style fix

---
 .../Library/Lists/list-description/list-description.scss        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stories/Library/Lists/list-description/list-description.scss b/src/stories/Library/Lists/list-description/list-description.scss
index 1ad658e9f..6b7d388db 100644
--- a/src/stories/Library/Lists/list-description/list-description.scss
+++ b/src/stories/Library/Lists/list-description/list-description.scss
@@ -26,7 +26,7 @@ dl.list-description {
   .list-description__value--column {
     flex-direction: column;
   }
-  
+
   .list-description__value--list {
     list-style: initial;
     padding-left: 1em;

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 03/19] 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 04/19] 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 05/19] 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 06/19] 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 07/19] 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 08/19] 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 09/19] 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 10/19] 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 11/19] 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 af72ac7220469aa8fd418b56a594ddd5b2c6a3d7 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Wed, 8 May 2024 15:53:41 +0200
Subject: [PATCH 12/19] Remove disclosure dropdown arrow in Safari(not present
 in othr browsers)

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

diff --git a/src/stories/Library/disclosure/disclosure.scss b/src/stories/Library/disclosure/disclosure.scss
index bed11f975..fcac17855 100644
--- a/src/stories/Library/disclosure/disclosure.scss
+++ b/src/stories/Library/disclosure/disclosure.scss
@@ -32,6 +32,10 @@
       padding-left: $s-xl;
     }
 
+    &::-webkit-details-marker {
+      display: none;
+    }
+
     &.disclosure__headline--no-padding {
       padding-left: $s-xl;
       @include media-query__small {

From 9cf88c4dac42e2b649d5d8bde2f72355a7977e84 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Wed, 8 May 2024 15:54:50 +0200
Subject: [PATCH 13/19] Remove interactivity effect from editions card items on
 material page

These aren't ever clickable so it doesn't make sense to mislead the user
---
 .../material-manifestation-item.scss                         | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/stories/Blocks/material-manifestation-item/material-manifestation-item.scss b/src/stories/Blocks/material-manifestation-item/material-manifestation-item.scss
index 10b2e040d..20e2a2dea 100644
--- a/src/stories/Blocks/material-manifestation-item/material-manifestation-item.scss
+++ b/src/stories/Blocks/material-manifestation-item/material-manifestation-item.scss
@@ -4,7 +4,6 @@
   margin: 0 $s-lg $s-md $s-lg;
   padding-top: 30px;
   display: grid;
-  cursor: pointer;
 
   @include media-query__small {
     min-height: 184px;
@@ -13,10 +12,6 @@
     column-gap: $s-lg;
   }
 
-  &:hover {
-    filter: drop-shadow(0 $s-xs 20px rgba(72, 72, 72, 0.1));
-  }
-
   &__cover {
     display: none;
 

From 0d78eb54c114c3395ae96ab193c8349128734644 Mon Sep 17 00:00:00 2001
From: Andreas Nielsen <andreas@reload.dk>
Date: Mon, 13 May 2024 14:04:31 +0200
Subject: [PATCH 14/19] Init release/brahma-16


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 15/19] 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 16/19] 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 17/19] 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;

From 2b0be11aaf00494bd1ea789824a0fcda205f6f10 Mon Sep 17 00:00:00 2001
From: clausbruun <claus@b-ruu.dk>
Date: Tue, 21 May 2024 08:39:47 +0200
Subject: [PATCH 18/19] Refactor padding-left to use SCSS variable

---
 .../Library/Lists/list-description/list-description.scss        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stories/Library/Lists/list-description/list-description.scss b/src/stories/Library/Lists/list-description/list-description.scss
index 6b7d388db..b25b8a41f 100644
--- a/src/stories/Library/Lists/list-description/list-description.scss
+++ b/src/stories/Library/Lists/list-description/list-description.scss
@@ -29,7 +29,7 @@ dl.list-description {
 
   .list-description__value--list {
     list-style: initial;
-    padding-left: 1em;
+    padding-left: $s-md;
   }
 
   .link-tag {

From d7e364fa95b34d9ce6fc505c7dc6e9116306dcc4 Mon Sep 17 00:00:00 2001
From: clausbruun <claus@b-ruu.dk>
Date: Wed, 22 May 2024 15:37:48 +0200
Subject: [PATCH 19/19] Rerun checks