diff --git a/src/stories/Library/Lists/list-description/ListDescription.tsx b/src/stories/Library/Lists/list-description/ListDescription.tsx
index 21c9c11a5..afef063f8 100644
--- 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 (
{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 (
- {key}:
- -
+
-
{value.map((val) => (
{type === "standard" && {val}}
diff --git a/src/stories/Library/Lists/list-description/ListDescriptionFakeData.tsx b/src/stories/Library/Lists/list-description/ListDescriptionFakeData.tsx
index 6fc873d21..57ecaad77 100644
--- 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
index bb6e3db9d..0e8bfb6ba 100644
--- 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 {
}
}
}
+