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] 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);