From b4cc11f602d27ed9fb252c2763c59d7fbd57d43b Mon Sep 17 00:00:00 2001
From: clausbruun <claus@b-ruu.dk>
Date: Thu, 30 May 2024 12:06:48 +0200
Subject: [PATCH 1/2] fix: Ensure Input component re-renders with updated props
 in Storybook and fix clsx class assignment

---
 src/stories/Library/Forms/input/Input.stories.tsx | 13 +++++++++++--
 src/stories/Library/Forms/input/Input.tsx         |  6 +++---
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/stories/Library/Forms/input/Input.stories.tsx b/src/stories/Library/Forms/input/Input.stories.tsx
index 6f68bdbdb..4907a0cd4 100644
--- a/src/stories/Library/Forms/input/Input.stories.tsx
+++ b/src/stories/Library/Forms/input/Input.stories.tsx
@@ -9,15 +9,24 @@ export default {
   argTypes: {
     label: {
       defaultValue: "Navn",
+      control: { type: "text" },
     },
     type: {
       defaultValue: "text",
+      control: { type: "select", options: ["text", "password"] },
     },
     id: {
       defaultValue: "id",
+      control: { type: "text" },
+    },
+    description: {
+      defaultValue: "Dit fulde navn",
+      control: { type: "text" },
+    },
+    validation: {
+      defaultValue: "Fejlbesked lorem ipsum dolor",
+      control: { type: "text" },
     },
-    description: { defaultValue: "Dit fulde navn" },
-    validation: { defaultValue: "Fejlbesked lorem ipsum dolor" },
   },
   parameters: {
     design: {
diff --git a/src/stories/Library/Forms/input/Input.tsx b/src/stories/Library/Forms/input/Input.tsx
index d5d6efbc5..becd53b9a 100644
--- a/src/stories/Library/Forms/input/Input.tsx
+++ b/src/stories/Library/Forms/input/Input.tsx
@@ -15,9 +15,9 @@ const Input = (props: InputProps) => {
   const invalid = validation ? "true" : "false";
   return (
     <div
-      className={clsx("dpl-input", classNames, [
-        { "dpl-input--invalid": !!validation },
-      ])}
+      className={clsx("dpl-input", classNames, {
+        "dpl-input--invalid": !!validation,
+      })}
     >
       <Label id={id}>{label}</Label>
       <input

From bdd8ad0b4b6a6180943545b08829810b7f45f769 Mon Sep 17 00:00:00 2001
From: clausbruun <claus@b-ruu.dk>
Date: Thu, 30 May 2024 14:55:31 +0200
Subject: [PATCH 2/2] Enhance accessibility by increasing the contrast of input
 and textarea fields

---
 src/stories/Library/Forms/input/input.scss       | 2 +-
 src/stories/Library/Forms/textarea/textarea.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/stories/Library/Forms/input/input.scss b/src/stories/Library/Forms/input/input.scss
index 89eeef8de..5f58bf5c4 100644
--- a/src/stories/Library/Forms/input/input.scss
+++ b/src/stories/Library/Forms/input/input.scss
@@ -11,7 +11,7 @@
   input {
     background-color: transparent;
     border: none;
-    border-bottom: 1px solid $color__global-tertiary-1;
+    border-bottom: 1px solid $color__global-tertiary-2;
     height: 40px;
 
     &:focus {
diff --git a/src/stories/Library/Forms/textarea/textarea.scss b/src/stories/Library/Forms/textarea/textarea.scss
index d366947dc..9f62472b7 100644
--- a/src/stories/Library/Forms/textarea/textarea.scss
+++ b/src/stories/Library/Forms/textarea/textarea.scss
@@ -6,7 +6,7 @@
 
     textarea {
       @include typography($typo__body-placeholder);
-      border: solid 1px $color__global-tertiary-1;
+      border: solid 1px $color__global-tertiary-2;
       width: 100%;
       padding: $s-md;
       resize: none;