From 0020787d2d0b74aa7dabd342b00d86cabb099a50 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Tue, 5 Dec 2023 15:11:50 +0100 Subject: [PATCH] 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` --- .../MaterialMainfestationItem.stories.tsx | 18 +++---- .../list-description/ListDescription.tsx | 13 +++-- .../ListDescriptionFakeData.tsx | 18 +++---- .../list-description/list-description.scss | 54 +++++++++++++------ 4 files changed, 66 insertions(+), 37 deletions(-) diff --git a/src/stories/Blocks/material-manifestation-item/MaterialMainfestationItem.stories.tsx b/src/stories/Blocks/material-manifestation-item/MaterialMainfestationItem.stories.tsx index 1d9cc273a..aa4f704aa 100644 --- 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 = (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 index 72ffa6f56..448722ca8 100644 --- 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 ( -
+
{key}:
- {type === "standard" && value} - {type === "link" && {value}} + {value.map((val) => ( + + {type === "standard" && {val}} + {type === "link" && {val}} + + ))}
); diff --git a/src/stories/Library/Lists/list-description/ListDescriptionFakeData.tsx b/src/stories/Library/Lists/list-description/ListDescriptionFakeData.tsx index 1f6c3ceb0..6fc873d21 100644 --- 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 index f3be5ea41..50a152d3c 100644 --- 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; } } }