From 75940ea166420a406cc7b218e3f47d745293feeb Mon Sep 17 00:00:00 2001
From: Andreas Nielsen <andreas@reload.dk>
Date: Wed, 10 Jul 2024 10:07:08 +0200
Subject: [PATCH 1/3] Added styling for required fields, that adds an asterix
 after the label.

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

diff --git a/src/stories/Library/input-label/input-label.scss b/src/stories/Library/input-label/input-label.scss
index 0f1f8d433..7e96b9305 100644
--- a/src/stories/Library/input-label/input-label.scss
+++ b/src/stories/Library/input-label/input-label.scss
@@ -5,3 +5,7 @@
   margin-bottom: $s-sm;
   padding-top: $s-xs;
 }
+
+.form-required::after {
+  content: "*";
+}

From feb31d2ab258224e2031f9343dc1899041ad8eef Mon Sep 17 00:00:00 2001
From: Andreas Nielsen <andreas@reload.dk>
Date: Fri, 12 Jul 2024 15:38:01 +0200
Subject: [PATCH 2/3] Updated the existing InputLabel story to include an
 required label.

---
 src/stories/Library/input-label/InputLabel.stories.tsx | 10 ++++++++++
 src/stories/Library/input-label/InputLabel.tsx         |  6 ++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/stories/Library/input-label/InputLabel.stories.tsx b/src/stories/Library/input-label/InputLabel.stories.tsx
index 6d4fbc30b..e6802fbd7 100644
--- a/src/stories/Library/input-label/InputLabel.stories.tsx
+++ b/src/stories/Library/input-label/InputLabel.stories.tsx
@@ -11,6 +11,9 @@ export default {
     text: {
       defaultValue: "Her er en label",
     },
+    required: {
+      defaultValue: false,
+    },
   },
   parameters: {
     layout: "padded",
@@ -22,3 +25,10 @@ const Template: ComponentStory<DropdownProps> = (args) => (
 );
 
 export const InputLabel = Template.bind({});
+
+export const RequiredInputLabel = Template.bind({});
+
+RequiredInputLabel.args = {
+  text: "Her er en required label",
+  required: true,
+};
diff --git a/src/stories/Library/input-label/InputLabel.tsx b/src/stories/Library/input-label/InputLabel.tsx
index 2b5b28e96..b63d6e006 100644
--- a/src/stories/Library/input-label/InputLabel.tsx
+++ b/src/stories/Library/input-label/InputLabel.tsx
@@ -1,7 +1,9 @@
 export type InputLabelProps = {
   text: string;
+  required?: boolean;
 };
 
-export const InputLabel: React.FC<InputLabelProps> = ({ text }) => {
-  return <label className="input-label">{text}</label>;
+export const InputLabel: React.FC<InputLabelProps> = ({ text, required }) => {
+  const labelClass = `input-label ${required ? "input-label--required" : ""}`;
+  return <label className={labelClass}>{text}</label>;
 };

From 2ca37f8e27c5be27e400b2319a666c25ea36c948 Mon Sep 17 00:00:00 2001
From: Andreas Nielsen <andreas@reload.dk>
Date: Fri, 12 Jul 2024 15:38:56 +0200
Subject: [PATCH 3/3] Updated the required input-label styling to fit into the
 current BEM structure.

Also added space before '*' to make it look better visually.
---
 src/stories/Library/input-label/input-label.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/stories/Library/input-label/input-label.scss b/src/stories/Library/input-label/input-label.scss
index 7e96b9305..61e515c30 100644
--- a/src/stories/Library/input-label/input-label.scss
+++ b/src/stories/Library/input-label/input-label.scss
@@ -6,6 +6,6 @@
   padding-top: $s-xs;
 }
 
-.form-required::after {
-  content: "*";
+.input-label--required::after {
+  content: " *";
 }