Refactor list-description component to handle

multiple values + Refactor list-description css I need a slightly different visual presentation for the list description on the event page, so I have changed the original CSS class to be able to add a BEM modifier: `.list-description--event`
danskernesdigitalebibliotek · Dec 5, 2023 · 0020787 · 0020787
1 parent 00ec24b
commit 0020787
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 37 deletions.
diff --git a/src/stories/Blocks/material-manifestation-item/MaterialMainfestationItem.stories.tsx b/src/stories/Blocks/material-manifestation-item/MaterialMainfestationItem.stories.tsx
@@ -38,14 +38,14 @@ const Template: ComponentStory<typeof MaterialMainfestationItem> = (args) => {
 export const Item = Template.bind({});
 Item.args = {
   detailsData: {
-    Type: { value: "Bog", type: "standard" },
-    Sprog: { value: "Dansk", type: "standard" },
-    Bidragsydere: { value: "Karsten Sand Iversen", type: "link" },
-    Originaltitel: { value: "Ulysses (1922)", type: "standard" },
-    ISBN: { value: "9788763814584", type: "standard" },
-    Udgave: { value: "Udgave, 2. oplag (2015)", type: "standard" },
-    Omfang: { value: "795 sider", type: "standard" },
-    Forlag: { value: "Rosinante", type: "standard" },
-    Målgruppe: { value: "Voksenmateriale", type: "standard" },
+    Type: { value: ["Bog"], type: "standard" },
+    Sprog: { value: ["Dansk"], type: "standard" },
+    Bidragsydere: { value: ["Karsten Sand Iversen"], type: "link" },
+    Originaltitel: { value: ["Ulysses (1922)"], type: "standard" },
+    ISBN: { value: ["9788763814584"], type: "standard" },
+    Udgave: { value: ["Udgave, 2. oplag (2015)"], type: "standard" },
+    Omfang: { value: ["795 sider"], type: "standard" },
+    Forlag: { value: ["Rosinante"], type: "standard" },
+    Målgruppe: { value: ["Voksenmateriale"], type: "standard" },
   },
 };
diff --git a/src/stories/Library/Lists/list-description/ListDescription.tsx b/src/stories/Library/Lists/list-description/ListDescription.tsx
@@ -1,7 +1,8 @@
+import { Fragment } from "react";
 import { generateId } from "../../horizontal-term-line/HorizontalTermLine";
 
 export type ListData = {
-  [k: string]: { value: string; type: "standard" | "link" };
+  [k: string]: { value: string[]; type: "standard" | "link" };
 };
 
 const ListDescription: React.FC<{ data: ListData; className?: string }> = ({
@@ -13,11 +14,15 @@ const ListDescription: React.FC<{ data: ListData; className?: string }> = ({
       {Object.keys(data).map((key, index) => {
         const { value, type } = data[key as keyof ListData];
         return (
-          <div key={generateId(index)}>
+          <div className="list-description__item" key={generateId(index)}>
             <dt>{key}:</dt>
             <dd>
-              {type === "standard" && value}
-              {type === "link" && <span className="link-tag">{value}</span>}
+              {value.map((val) => (
+                <Fragment key={val}>
+                  {type === "standard" && <span>{val}</span>}
+                  {type === "link" && <span className="link-tag">{val}</span>}
+                </Fragment>
+              ))}
             </dd>
           </div>
         );

diff --git a/src/stories/Library/Lists/list-description/ListDescriptionFakeData.tsx b/src/stories/Library/Lists/list-description/ListDescriptionFakeData.tsx
@@ -1,15 +1,15 @@
 import { ListData } from "./ListDescription";
 
 const fakeData: ListData = {
-  Type: { value: "Bog", type: "standard" },
-  Sprog: { value: "Dansk", type: "standard" },
-  Bidragsydere: { value: "Karsten Sand Iversen", type: "link" },
-  Originaltitel: { value: "Ulysses (1922)", type: "standard" },
-  ISBN: { value: "9788763814584", type: "standard" },
-  Udgave: { value: "Udgave, 2. oplag (2015)", type: "standard" },
-  Omfang: { value: "795 sider", type: "standard" },
-  Forlag: { value: "Rosinante", type: "standard" },
-  Målgruppe: { value: "Voksenmateriale", type: "standard" },
+  Type: { value: ["Bog"], type: "standard" },
+  Sprog: { value: ["Dansk"], type: "standard" },
+  Bidragsydere: { value: ["Karsten Sand Iversen"], type: "link" },
+  Originaltitel: { value: ["Ulysses (1922)"], type: "standard" },
+  ISBN: { value: ["9788763814584"], type: "standard" },
+  Udgave: { value: ["Udgave, 2. oplag (2015)"], type: "standard" },
+  Omfang: { value: ["795 sider"], type: "standard" },
+  Forlag: { value: ["Rosinante"], type: "standard" },
+  Målgruppe: { value: ["Voksenmateriale"], type: "standard" },
 };
 
 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
@@ -1,30 +1,54 @@
 dl.list-description {
   @extend %text-small-caption;
-
   color: $c-text-secondary-gray;
-  display: flex;
-  flex-flow: column;
 
-  & > div {
-    display: flex;
-    flex-flow: row wrap;
+  // Todo: This "> div" selector should be removed and instead use the class .list-description__item in the markup in dpl-react project
+  & > div,
+  .list-description__item {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
   }
 
-  dt {
-    flex-basis: 18%;
+  dt,
+  dd {
     padding: 2px 4px;
   }
 
   dd {
-    flex-basis: 72%;
-    flex-grow: 1;
-    margin: 0;
-    padding: 2px 4px;
+    display: grid;
+    @include breakpoint-s {
+      display: flex;
+      flex-wrap: wrap;
+      gap: $s-sm;
+    }
+  }
+  .link-tag {
+    @extend %text-small-caption;
+    color: $c-text-primary-black;
+  }
+}
+
+dl.list-description.list-description--event {
+  height: max-content;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: $s-md;
+  align-items: start;
+
+  .list-description__item {
+    grid-template-columns: 1fr;
+  }
+
+  dd {
+    font-weight: bold;
+  }
 
-    .link-tag {
-      @extend %text-small-caption;
+  @include breakpoint-s {
+    grid-template-columns: 1fr;
+    gap: $s-xs;
 
-      color: $c-text-primary-black;
+    .list-description__item {
+      grid-template-columns: 1fr 2fr;
     }
   }
 }