From ce5c2a306462a9268b226829b811a49ce1001d64 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard27 <111750729+VWSCoronaDashboard27@users.noreply.github.com> Date: Thu, 28 Sep 2023 15:02:55 +0200 Subject: [PATCH] feature/COR-1470_separate_source_from_value_row_on_kpi_tiles (#4880) * feat: separate source from value row on kpi tiles * fix: resolved conversation * fix: changed Sanity discription for dateLabel and sourceLabel and made it as optional fields * fix: mobile padding --------- Co-authored-by: VWSCoronaDashboard27 --- .../components/topical-kpi-tile/topical-tile.tsx | 13 ++++++++++--- packages/app/src/pages/index.tsx | 5 +++-- .../app/src/queries/get-topical-structure-query.ts | 1 + packages/app/src/queries/query-types.ts | 3 ++- .../schemas/documents/pages/homepage/theme-tile.ts | 8 +++++++- 5 files changed, 23 insertions(+), 7 deletions(-) diff --git a/packages/app/src/domain/topical/components/topical-kpi-tile/topical-tile.tsx b/packages/app/src/domain/topical/components/topical-kpi-tile/topical-tile.tsx index 210fa8c7e9..59531e823a 100644 --- a/packages/app/src/domain/topical/components/topical-kpi-tile/topical-tile.tsx +++ b/packages/app/src/domain/topical/components/topical-kpi-tile/topical-tile.tsx @@ -23,13 +23,14 @@ interface TopicalTileProps { description: PortableTextEntry[]; hideTrendIcon: boolean; kpiValue: string | null; - sourceLabel: string | null; + sourceLabel?: string; + dateLabel?: string; tileIcon: TopicalIcon; title: string; trendIcon: TrendIconType; } -export const TopicalTile = ({ title, tileIcon, trendIcon, description, kpiValue, cta, sourceLabel, hideTrendIcon }: TopicalTileProps) => { +export const TopicalTile = ({ title, tileIcon, trendIcon, description, kpiValue, cta, sourceLabel, dateLabel, hideTrendIcon }: TopicalTileProps) => { const { formatNumber } = useIntl(); const formattedKpiValue = typeof kpiValue === 'number' ? formatNumber(kpiValue) : typeof kpiValue === 'string' ? kpiValue : false; @@ -45,7 +46,7 @@ export const TopicalTile = ({ title, tileIcon, trendIcon, description, kpiValue, return ( - + @@ -80,6 +81,12 @@ export const TopicalTile = ({ title, tileIcon, trendIcon, description, kpiValue, + {dateLabel && ( + + {dateLabel} + + )} + {sourceLabel && ( {sourceLabel} diff --git a/packages/app/src/pages/index.tsx b/packages/app/src/pages/index.tsx index c62ab6256c..228ffd1b93 100644 --- a/packages/app/src/pages/index.tsx +++ b/packages/app/src/pages/index.tsx @@ -114,7 +114,7 @@ const Home = (props: StaticProps) => { marginBottom={{ _: space[4], sm: space[5] }} > {theme.tiles.map((themeTile) => { - const sourceLabel = themeTile.sourceLabel ? replaceVariablesInText(themeTile.sourceLabel, { date: themeTile.tileDate }) : null; + const dateLabel = themeTile.dateLabel ? replaceVariablesInText(themeTile.dateLabel, { date: themeTile.tileDate }) : undefined; return ( ) => { cta={themeTile.cta} key={themeTile.title} kpiValue={themeTile.kpiValue} - sourceLabel={sourceLabel} + sourceLabel={themeTile.sourceLabel} + dateLabel={dateLabel} /> ); })} diff --git a/packages/app/src/queries/get-topical-structure-query.ts b/packages/app/src/queries/get-topical-structure-query.ts index 377afa1017..1f821563a4 100644 --- a/packages/app/src/queries/get-topical-structure-query.ts +++ b/packages/app/src/queries/get-topical-structure-query.ts @@ -40,6 +40,7 @@ export function getTopicalStructureQuery(locale: string) { 'description':description.${locale}, tileIcon, 'title':title.${locale}, + 'dateLabel':dateLabel.${locale}, 'sourceLabel':sourceLabel.${locale}, 'tileDate': tileDate.${locale}, 'kpiValue': kpiValue.${locale}, diff --git a/packages/app/src/queries/query-types.ts b/packages/app/src/queries/query-types.ts index d837e69648..5718b4dff5 100644 --- a/packages/app/src/queries/query-types.ts +++ b/packages/app/src/queries/query-types.ts @@ -80,7 +80,8 @@ export interface BaseTile { interface TopicalTile extends BaseTile { title: string; - sourceLabel: string | null; + dateLabel?: string; + sourceLabel?: string; tileDate: string; kpiValue: string | null; cta: Cta; diff --git a/packages/cms/src/schemas/documents/pages/homepage/theme-tile.ts b/packages/cms/src/schemas/documents/pages/homepage/theme-tile.ts index ae70b71548..dde629bece 100644 --- a/packages/cms/src/schemas/documents/pages/homepage/theme-tile.ts +++ b/packages/cms/src/schemas/documents/pages/homepage/theme-tile.ts @@ -72,7 +72,13 @@ export const themeTile = defineType({ }), defineField({ title: 'Metadata label', - description: 'Bij {{date}} wordt de tekst geplaatst van het tegeldatumveld. Deze kan handmatig overschreven worden.', + description: 'Bij {{date}} is de tekst van het tegeldatumveld optioneel', + name: 'dateLabel', + type: 'localeString', + }), + defineField({ + title: 'Source label', + description: 'Deze velden zijn optionele broninformatie.', name: 'sourceLabel', type: 'localeString', }),