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 <[email protected]>
minvws · Sep 28, 2023 · ce5c2a3 · ce5c2a3
1 parent 68912fd
commit ce5c2a3
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 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
@@ -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 (
     <TopicalTileWrapper cta={cta}>
-      <Box display="flex" flexDirection="column" justifyContent="start">
+      <Box display="flex" flexDirection="column" justifyContent="start" flexGrow={1}>
         <Box display="flex" justifyContent="space-between">
           <Box fontSize={{ _: fontSizes[6], xs: fontSizes[7] }} paddingLeft={{ _: space[3], xs: space[4] }} paddingTop={{ _: space[3], xs: space[4] }}>
             <StyledHeading level={3} color={colors.blue8}>
@@ -80,6 +81,12 @@ export const TopicalTile = ({ title, tileIcon, trendIcon, description, kpiValue,
         </Box>
       </Box>
 
+      {dateLabel && (
+        <Box padding={{ _: `0 ${space[3]} ${space[1]}`, xs: `0 ${space[4]} ${space[1]}` }}>
+          <InlineText color={colors.gray7}>{dateLabel}</InlineText>
+        </Box>
+      )}
+
       {sourceLabel && (
         <Box padding={{ _: `0 ${space[3]} ${space[3]}`, xs: `0 ${space[4]} ${space[4]}` }}>
           <InlineText color={colors.gray7}>{sourceLabel}</InlineText>

diff --git a/packages/app/src/pages/index.tsx b/packages/app/src/pages/index.tsx
@@ -114,7 +114,7 @@ const Home = (props: StaticProps<typeof getStaticProps>) => {
                       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 (
                           <TopicalTile
                             hideTrendIcon={themeTile.hideTrendIcon}
@@ -125,7 +125,8 @@ const Home = (props: StaticProps<typeof getStaticProps>) => {
                             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
@@ -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
@@ -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
@@ -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',
     }),