diff --git a/src/stories/Library/Lists/list-description/ListDescription.tsx b/src/stories/Library/Lists/list-description/ListDescription.tsx index afef063f8..72413bf41 100644 --- 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) => ( - - {type === "standard" && {val}} - {type === "link" && {val}} - - ))} + {type === "standard" && + value.map((val) => ( + + {val} + + ))} + + {type === "link" && + value.map((val) => ( + + {val} + + ))} + + {type === "list" && ( + + )} ); diff --git a/src/stories/Library/Lists/list-description/ListDescriptionFakeData.tsx b/src/stories/Library/Lists/list-description/ListDescriptionFakeData.tsx index 57ecaad77..6d34cc1d8 100644 --- 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 index ccf9c3ca7..b25b8a41f 100644 --- 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);