From 283bdcffd64cc7115fe19641a368e3c3b33324b3 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Wed, 6 Dec 2023 10:13:06 +0100 Subject: [PATCH 1/6] 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 | 56 +++++++++++++------ 4 files changed, 67 insertions(+), 38 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..149f766b1 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; - + max-width: 420px; 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; } } } From 33ed4868da0aff6d9ece261e72c43157838e775c Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Tue, 5 Dec 2023 13:41:02 +0100 Subject: [PATCH 2/6] Add `EventDescription` Component The `EventDescription` component is now part of the `EventPage`. It includes all the necessary markup and CSS for the description section. The properties for `EventDescription` have been added to `EventPage.stories`, as it is used exclusively within the `EventPage`. --- base.scss | 1 + .../Blocks/event-page/EventPage.stories.tsx | 74 +++++++++++++++++++ src/stories/Blocks/event-page/EventPage.tsx | 21 +++++- .../event-description/EventDescription.tsx | 40 ++++++++++ .../event-description/event-description.scss | 50 +++++++++++++ 5 files changed, 184 insertions(+), 2 deletions(-) create mode 100644 src/stories/Library/event-description/EventDescription.tsx create mode 100644 src/stories/Library/event-description/event-description.scss diff --git a/base.scss b/base.scss index 69f31cc6f..050459a62 100644 --- a/base.scss +++ b/base.scss @@ -103,6 +103,7 @@ @import "./src/stories/Library/article-header/article-header"; @import "./src/stories/Library/event-header/event-header"; @import "./src/stories/Library/image-credited/image-credited"; +@import "./src/stories/Library/event-description/event-description"; // Autosuggest block styling needs to be loaded before the rest of the scss for autosuggest @import "./src/stories/Blocks/autosuggest/autosuggest"; diff --git a/src/stories/Blocks/event-page/EventPage.stories.tsx b/src/stories/Blocks/event-page/EventPage.stories.tsx index 0e2fb416b..8ddce6775 100644 --- a/src/stories/Blocks/event-page/EventPage.stories.tsx +++ b/src/stories/Blocks/event-page/EventPage.stories.tsx @@ -20,6 +20,80 @@ export default { "https://plus.unsplash.com/premium_photo-1696886122527-e4303b76aa8f?q=80&w=5156&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", type: "string", }, + descriptionTitle: { + defaultValue: "Beskrivelse", + type: "string", + }, + descriptionDescription: { + defaultValue: `Foreningen for Integreret Moderne Dans arbejder med at udvide + normalitetsbegrebet i scenekunsten. For hvad er normalt? Rosenreglen og + Mødrenes hus. I 2022 udgav hun også den stærkt politiske digtsamling Jeg + vil have en statsminister.`, + type: "string", + }, + horizontalTermLineData: { + defaultValue: [ + { + title: "I samme serie ", + linkList: [ + { + text: "Litteratur & Aktivisme", + url: "/", + }, + ], + }, + { + title: "Emneord", + linkList: [ + { + text: "dans", + url: "/", + }, + { + text: "contemporary", + url: "/", + }, + { + text: "modern", + url: "/", + }, + { + text: "scenekunst", + url: "/", + }, + { + text: "digt", + url: "/", + }, + { + text: "3-8 årige", + url: "/", + }, + ], + }, + ], + }, + listDescriptionData: { + defaultValue: { + Tid: { value: ["19:30 — 21:00"], type: "standard" }, + Standard: { value: ["65 kr."], type: "standard" }, + Børn: { value: ["Gratis"], type: "standard" }, + Sted: { + value: [ + "Hovedbibliotek", + "Greve bibliotek", + "Hovedbibliotek", + "Greve bibliotek", + ], + type: "link", + }, + Adresse: { + value: ["Kampmanns Plads 2, 8000, Aarhus"], + type: "standard", + }, + Målgruppe: { value: ["Alle"], type: "standard" }, + }, + }, }, parameters: { design: { diff --git a/src/stories/Blocks/event-page/EventPage.tsx b/src/stories/Blocks/event-page/EventPage.tsx index 5d4ed34b6..8ca87a781 100644 --- a/src/stories/Blocks/event-page/EventPage.tsx +++ b/src/stories/Blocks/event-page/EventPage.tsx @@ -1,16 +1,33 @@ import { FC } from "react"; import EventHeader from "../../Library/event-header/EventHeader"; +import EventDescription, { + EventDescriptionProps, +} from "../../Library/event-description/EventDescription"; type EventPageProps = { title: string; date: string; image: string; -}; +} & EventDescriptionProps; -const EventPage: FC = ({ title, date, image }) => { +const EventPage: FC = ({ + title, + date, + image, + descriptionTitle, + descriptionDescription, + horizontalTermLineData, + listDescriptionData, +}) => { return (
+
); }; diff --git a/src/stories/Library/event-description/EventDescription.tsx b/src/stories/Library/event-description/EventDescription.tsx new file mode 100644 index 000000000..db906520f --- /dev/null +++ b/src/stories/Library/event-description/EventDescription.tsx @@ -0,0 +1,40 @@ +import { FC } from "react"; +import HorizontalTermLine, { + HorizontalTermLineProps, + generateId, +} from "../horizontal-term-line/HorizontalTermLine"; +import ListDescription, { + ListData, +} from "../Lists/list-description/ListDescription"; + +export type EventDescriptionProps = { + descriptionTitle: string; + listDescriptionData: ListData; + horizontalTermLineData: HorizontalTermLineProps[]; + descriptionDescription: string; +}; + +const EventDescription: FC = ({ + descriptionTitle, + descriptionDescription, + horizontalTermLineData, + listDescriptionData, +}) => { + return ( +
+

{descriptionTitle}

+

{descriptionDescription}

+
+ {horizontalTermLineData.map((item, index) => ( + + ))} +
+ +
+ ); +}; + +export default EventDescription; diff --git a/src/stories/Library/event-description/event-description.scss b/src/stories/Library/event-description/event-description.scss new file mode 100644 index 000000000..aa389f6a7 --- /dev/null +++ b/src/stories/Library/event-description/event-description.scss @@ -0,0 +1,50 @@ +.event-description { + @include container(medium); + padding: $s-md; + @include breakpoint-s { + padding: $s-xl $s-4xl; + display: grid; + column-gap: $s-xl; + grid-template-columns: 2fr 1fr; + grid-template-areas: + "title title" + "description info" + "links links"; + } +} + +.event-description__title { + grid-area: title; + @extend %text-header-h4; + margin-bottom: $s-md; + + @include breakpoint-s { + margin-bottom: $s-lg; + } +} + +.event-description__description { + grid-area: description; + @extend %text-body-large; + line-height: 24px; + margin-bottom: $s-md; + + @include breakpoint-s { + margin-bottom: 0; + line-height: 32px; + } +} + +.event-description__links { + grid-area: links; + margin-bottom: $s-2xl; + + @include breakpoint-s { + margin-bottom: 0; + margin-top: $s-md; + } +} + +.event-description__info { + grid-area: info; +} From 56cf600018e12c9da5607abb737e9ba6a0e426ba Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Thu, 7 Dec 2023 12:44:35 +0100 Subject: [PATCH 3/6] Add BEM classes for `dt` and `dd` To adhere to the BEM methodology for our CSS, I have added BEM classes for the `dt` and `dd` elements. The "old" html selectors should be removed once the new classes are integrated and merged into dpl-react. --- .../list-description/ListDescription.tsx | 4 ++-- .../list-description/list-description.scss | 19 +++++++++++++------ 2 files changed, 15 insertions(+), 8 deletions(-) diff --git a/src/stories/Library/Lists/list-description/ListDescription.tsx b/src/stories/Library/Lists/list-description/ListDescription.tsx index 448722ca8..21c9c11a5 100644 --- a/src/stories/Library/Lists/list-description/ListDescription.tsx +++ b/src/stories/Library/Lists/list-description/ListDescription.tsx @@ -15,8 +15,8 @@ const ListDescription: React.FC<{ data: ListData; className?: string }> = ({ const { value, type } = data[key as keyof ListData]; return (
-
{key}:
-
+
{key}:
+
{value.map((val) => ( {type === "standard" && {val}} diff --git a/src/stories/Library/Lists/list-description/list-description.scss b/src/stories/Library/Lists/list-description/list-description.scss index 149f766b1..8f1d678ca 100644 --- a/src/stories/Library/Lists/list-description/list-description.scss +++ b/src/stories/Library/Lists/list-description/list-description.scss @@ -2,19 +2,24 @@ dl.list-description { @extend %text-small-caption; max-width: 420px; color: $c-text-secondary-gray; - // Todo: This "> div" selector should be removed and instead use the class .list-description__item in the markup in dpl-react project - & > div, + // Todo: all the html selectors below should be deleted when the markup is updated in dpl-react project + & > div, // see Todo above .list-description__item { display: grid; grid-template-columns: 1fr 2fr; } - dt, - dd { + .list-description__key, + .list-description__value, + dt, // see Todo above + dd // see Todo above + { padding: 2px 4px; } - dd { + .list-description__value, + dd // see Todo above + { display: grid; @include breakpoint-s { display: flex; @@ -39,7 +44,9 @@ dl.list-description.list-description--event { grid-template-columns: 1fr; } - dd { + .list-description__value, + dd // see Todo above + { font-weight: bold; } From 436892966e823d3a7f693728e8d4c8cdf2dd2199 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Thu, 7 Dec 2023 13:46:59 +0100 Subject: [PATCH 4/6] Refactor markup for `EventDescription` to prevent future issues. Replaced grid-template-areas with a div wrapper to enhance layout stability. --- .../Library/event-description/EventDescription.tsx | 14 +++++++++----- .../event-description/event-description.scss | 14 +------------- 2 files changed, 10 insertions(+), 18 deletions(-) diff --git a/src/stories/Library/event-description/EventDescription.tsx b/src/stories/Library/event-description/EventDescription.tsx index db906520f..8b71f6b06 100644 --- a/src/stories/Library/event-description/EventDescription.tsx +++ b/src/stories/Library/event-description/EventDescription.tsx @@ -23,11 +23,15 @@ const EventDescription: FC = ({ return (

{descriptionTitle}

-

{descriptionDescription}

-
- {horizontalTermLineData.map((item, index) => ( - - ))} +
+

+ {descriptionDescription} +

+
+ {horizontalTermLineData.map((item, index) => ( + + ))} +
Date: Thu, 7 Dec 2023 14:33:19 +0100 Subject: [PATCH 5/6] Refactor `EventHeader` CSS Replaced margin-top in `.event-header__tag` with additional padding in `.event-header__content`. --- src/stories/Library/event-header/event-header.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/stories/Library/event-header/event-header.scss b/src/stories/Library/event-header/event-header.scss index a194d8c81..5a1e4a563 100644 --- a/src/stories/Library/event-header/event-header.scss +++ b/src/stories/Library/event-header/event-header.scss @@ -20,6 +20,7 @@ } .event-header__content { + padding-top: $s-md; display: grid; grid-template-columns: $s-3xl 1fr $s-3xl; grid-template-areas: @@ -29,6 +30,7 @@ "btn btn btn"; @include breakpoint-s { + padding-top: $s-3xl; grid-template-columns: 1fr; } } @@ -36,9 +38,9 @@ .event-header__tag { grid-area: tag; width: max-content; - margin: $s-md 0; + margin-bottom: $s-md; @include breakpoint-s { - margin: $s-lg 0; + margin-bottom: $s-lg; } } From 58ed8799b9b5ab732b1acd21c4bd48b5963dd129 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Thu, 7 Dec 2023 15:25:23 +0100 Subject: [PATCH 6/6] Remove unused HTML selectors in `.list-description` --- .../Lists/list-description/list-description.scss | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/src/stories/Library/Lists/list-description/list-description.scss b/src/stories/Library/Lists/list-description/list-description.scss index 8f1d678ca..bb6e3db9d 100644 --- a/src/stories/Library/Lists/list-description/list-description.scss +++ b/src/stories/Library/Lists/list-description/list-description.scss @@ -2,24 +2,18 @@ dl.list-description { @extend %text-small-caption; max-width: 420px; color: $c-text-secondary-gray; - // Todo: all the html selectors below should be deleted when the markup is updated in dpl-react project - & > div, // see Todo above + .list-description__item { display: grid; grid-template-columns: 1fr 2fr; } .list-description__key, - .list-description__value, - dt, // see Todo above - dd // see Todo above - { + .list-description__value { padding: 2px 4px; } - .list-description__value, - dd // see Todo above - { + .list-description__value { display: grid; @include breakpoint-s { display: flex; @@ -44,9 +38,7 @@ dl.list-description.list-description--event { grid-template-columns: 1fr; } - .list-description__value, - dd // see Todo above - { + .list-description__value { font-weight: bold; }