Merge pull request #610 from danskernesdigitalebibliotek/feature/DDFL…

…SBP-543-se-vaerkvisningssiden-tilfojelse-af-metadata-under-se-detaljer-og-under-udgaver-detaljer Added list type to ListDescription values [DDFLSBP-543]
danskernesdigitalebibliotek · May 22, 2024 · a77db2d · a77db2d
2 parents 12dcfdf + d7e364f
commit a77db2d
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 7 deletions.
diff --git 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
@@ -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
@@ -27,6 +27,11 @@ dl.list-description {
     flex-direction: column;
   }
 
+  .list-description__value--list {
+    list-style: initial;
+    padding-left: $s-md;
+  }
+
   .link-tag {
     @include typography($typo__small-caption);