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 { } } } +