Add modifier for listing values in a column in list descriptions

This is needed to support display of prices. In storybook we control this using a new layout attribute. List data with column layout gets this new class. Update list description data with a priuce example which uses this new layout. DDFFORM-57
danskernesdigitalebibliotek · Dec 10, 2023 · 286dab6 · 286dab6
1 parent 89f3a1a
commit 286dab6
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 3 deletions.
diff --git a/src/stories/Library/Lists/list-description/ListDescription.tsx b/src/stories/Library/Lists/list-description/ListDescription.tsx
@@ -1,8 +1,13 @@
+import clsx from "clsx";
 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";
+    layout?: "default" | "column";
+  };
 };
 
 const ListDescription: React.FC<{ data: ListData; className?: string }> = ({
@@ -12,11 +17,16 @@ const ListDescription: React.FC<{ data: ListData; className?: string }> = ({
   return (
     <dl className={`list-description ${className ?? ""}`}>
       {Object.keys(data).map((key, index) => {
-        const { value, type } = data[key as keyof ListData];
+        const { value, type, layout = "default" } = data[key as keyof ListData];
         return (
           <div className="list-description__item" key={generateId(index)}>
             <dt className="list-description__key">{key}:</dt>
-            <dd className="list-description__value">
+            <dd
+              className={clsx(
+                "list-description__value",
+                layout === "column" && "list-description__value--column"
+              )}
+            >
               {value.map((val) => (
                 <Fragment key={val}>
                   {type === "standard" && <span>{val}</span>}

diff --git a/src/stories/Library/Lists/list-description/ListDescriptionFakeData.tsx b/src/stories/Library/Lists/list-description/ListDescriptionFakeData.tsx
@@ -10,6 +10,11 @@ const fakeData: ListData = {
   Omfang: { value: ["795 sider"], type: "standard" },
   Forlag: { value: ["Rosinante"], type: "standard" },
   Målgruppe: { value: ["Voksenmateriale"], type: "standard" },
+  Pris: {
+    value: ["Standard: 65 kr.", "Børn: Gratis"],
+    type: "standard",
+    layout: "column",
+  },
 };
 
 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
@@ -21,6 +21,11 @@ dl.list-description {
       gap: $s-sm;
     }
   }
+
+  .list-description__value--column {
+    flex-direction: column;
+  }
+
   .link-tag {
     @extend %text-small-caption;
     color: $c-text-primary-black;
@@ -51,3 +56,4 @@ dl.list-description.list-description--event {
     }
   }
 }
+