feature/COR-1455-remove-topical-page-measure-theme-components (#4682)

* feat(topical-page): removed measure themes section from topical page; removed all measure theme component schemas from Sanity; updated topical page groq query and query types; updated theme schema to mark tiles and other properties as not-required, allowing for 'simple' themes without tiles or links; reverted removal of sizes export from theme, as this resulted in breaking changes; --------- Co-authored-by: VWSCoronaDashboard26 <[email protected]>
minvws · Mar 8, 2023 · 7d781b4 · 7d781b4
1 parent 6bcff32
commit 7d781b4
Show file tree

Hide file tree

Showing 11 changed files with 28 additions and 181 deletions.
diff --git a/packages/app/src/domain/topical/components/topical-measure-tile.tsx b/packages/app/src/domain/topical/components/topical-measure-tile.tsx
diff --git a/packages/app/src/pages/index.tsx b/packages/app/src/pages/index.tsx
@@ -22,7 +22,6 @@ import { TopicalArticlesList } from '~/domain/topical/components/topical-article
 import { TopicalHeader } from '~/domain/topical/components/topical-header';
 import { TopicalTile } from '~/domain/topical/components/topical-kpi-tile/topical-tile';
 import { TopicalLinksList } from '~/domain/topical/components/topical-links-list';
-import { TopicalMeasureTile } from '~/domain/topical/components/topical-measure-tile';
 import { TopicalSectionHeader } from '~/domain/topical/components/topical-section-header';
 import { TopicalThemeHeader } from '~/domain/topical/components/topical-theme-header';
 import { TrendIcon } from '~/domain/topical/types';
@@ -72,7 +71,7 @@ const Home = (props: StaticProps<typeof getStaticProps>) => {
 
   const { topicalStructure } = content;
 
-  const { topicalConfig, measureTheme, thermometer, kpiThemes, weeklySummary } = topicalStructure;
+  const { topicalConfig, thermometer, kpiThemes, weeklySummary } = topicalStructure;
 
   const { textNl, textShared } = useDynamicLokalizeTexts<LokalizeTexts>(pageText, selectLokalizeTexts);
 
@@ -183,30 +182,32 @@ const Home = (props: StaticProps<typeof getStaticProps>) => {
                   <Box marginBottom={space[4]}>
                     <TopicalThemeHeader title={theme.title} subtitle={theme.subTitle} icon={getFilenameToIconName(theme.themeIcon) as TopicalIcon} />
                   </Box>
-                  <Box
-                    display="grid"
-                    gridTemplateColumns={tileGridTemplate}
-                    gridColumnGap={{ _: space[4], md: space[5] }}
-                    gridRowGap={{ _: space[4], md: space[5] }}
-                    marginBottom={{ _: space[4], sm: space[5] }}
-                  >
-                    {theme.tiles.map((themeTile) => {
-                      const sourceLabel = themeTile.sourceLabel ? replaceVariablesInText(themeTile.sourceLabel, { date: themeTile.tileDate }) : null;
-                      return (
-                        <TopicalTile
-                          hideTrendIcon={themeTile.hideTrendIcon}
-                          trendIcon={themeTile.trendIcon}
-                          title={themeTile.title}
-                          tileIcon={getFilenameToIconName(themeTile.tileIcon) as TopicalIcon}
-                          description={themeTile.description}
-                          cta={themeTile.cta}
-                          key={themeTile.title}
-                          kpiValue={themeTile.kpiValue}
-                          sourceLabel={sourceLabel}
-                        />
-                      );
-                    })}
-                  </Box>
+                  {theme.tiles && (
+                    <Box
+                      display="grid"
+                      gridTemplateColumns={tileGridTemplate}
+                      gridColumnGap={{ _: space[4], md: space[5] }}
+                      gridRowGap={{ _: space[4], md: space[5] }}
+                      marginBottom={{ _: space[4], sm: space[5] }}
+                    >
+                      {theme.tiles.map((themeTile) => {
+                        const sourceLabel = themeTile.sourceLabel ? replaceVariablesInText(themeTile.sourceLabel, { date: themeTile.tileDate }) : null;
+                        return (
+                          <TopicalTile
+                            hideTrendIcon={themeTile.hideTrendIcon}
+                            trendIcon={themeTile.trendIcon}
+                            title={themeTile.title}
+                            tileIcon={getFilenameToIconName(themeTile.tileIcon) as TopicalIcon}
+                            description={themeTile.description}
+                            cta={themeTile.cta}
+                            key={themeTile.title}
+                            kpiValue={themeTile.kpiValue}
+                            sourceLabel={sourceLabel}
+                          />
+                        );
+                      })}
+                    </Box>
+                  )}
                   {theme.links && (
                     <TopicalLinksList
                       labels={{
@@ -219,23 +220,6 @@ const Home = (props: StaticProps<typeof getStaticProps>) => {
                 </Box>
               );
             })}
-
-            <Box>
-              <Box marginBottom={space[4]}>
-                <TopicalThemeHeader title={measureTheme.title} subtitle={measureTheme.subTitle} icon={getFilenameToIconName(measureTheme.themeIcon) as TopicalIcon} />
-              </Box>
-              <Box
-                display="grid"
-                gridTemplateColumns={tileGridTemplate}
-                gridColumnGap={{ _: space[4], md: space[5] }}
-                gridRowGap={{ _: space[4], md: space[5] }}
-                marginBottom={space[5]}
-              >
-                {measureTheme.tiles.map((measureTile, index) => {
-                  return <TopicalMeasureTile icon={getFilenameToIconName(measureTile.tileIcon) as TopicalIcon} title={measureTile.description} key={index} />;
-                })}
-              </Box>
-            </Box>
           </Box>
         </MaxWidth>
 

diff --git a/packages/app/src/queries/get-topical-structure-query.ts b/packages/app/src/queries/get-topical-structure-query.ts
@@ -57,17 +57,6 @@ export function getTopicalStructureQuery(locale: string) {
           },
         },
       },
-      'measureTheme': *[
-        _type == 'measureTheme' && !(_id in path('drafts.**'))
-      ][0]{
-        'title': title.${locale},
-        themeIcon,
-        'subTitle': subTitle.${locale},
-        'tiles': tiles[]->{
-          tileIcon,
-          'description': description.${locale}
-        },
-      },
       'thermometer': *[
         _type == 'thermometer' && !(_id in path('drafts.**'))
       ][0]{

diff --git a/packages/app/src/queries/query-types.ts b/packages/app/src/queries/query-types.ts
@@ -7,7 +7,6 @@ export interface TopicalSanityData {
   topicalConfig: TopicalConfig;
   weeklySummary: WeeklySummary;
   kpiThemes: KpiThemes;
-  measureTheme: MeasureTheme;
   thermometer: ThermometerConfig;
 }
 
@@ -66,9 +65,6 @@ interface Theme {
 interface WeeklySummary extends Theme {
   items: BaseTile[];
 }
-interface MeasureTheme extends Theme {
-  tiles: BaseTile[];
-}
 
 interface TopicalTheme extends Theme {
   tiles: TopicalTile[];

diff --git a/packages/app/src/style/theme.ts b/packages/app/src/style/theme.ts
@@ -113,6 +113,7 @@ const theme = {
   colors,
   radii,
   shadows,
+  sizes,
 } as const;
 
 type Theme = typeof theme;

diff --git a/packages/cms/src/desk-structure.ts b/packages/cms/src/desk-structure.ts
@@ -142,7 +142,6 @@ export default () =>
               addListItem(BsGearFill, 'Weeksamenvatting', 'weeklySummary'),
               addListItem(BsThermometer, 'Thermometer', 'thermometer'),
               addListItem(BsGearFill, "KPI thema's", 'themeCollection'),
-              addListItem(BsGearFill, 'Advies thema', 'measureTheme'),
             ])
         ),
 

diff --git a/packages/cms/src/schemas/topical/index.ts b/packages/cms/src/schemas/topical/index.ts
@@ -6,9 +6,6 @@ export * from './theme-link-collection';
 export * from './theme-tile';
 export * from './theme-tile-date-config';
 export * from './theme-tile-collection';
-export * from './measure-theme';
-export * from './measure-tile';
-export * from './measure-tile-collection';
 export { thermometer } from './thermometer';
 export * from './thermometer-level';
 export * from './thermometer-timeline';

diff --git a/packages/cms/src/schemas/topical/measure-theme.ts b/packages/cms/src/schemas/topical/measure-theme.ts
diff --git a/packages/cms/src/schemas/topical/measure-tile-collection.ts b/packages/cms/src/schemas/topical/measure-tile-collection.ts
diff --git a/packages/cms/src/schemas/topical/measure-tile.ts b/packages/cms/src/schemas/topical/measure-tile.ts
diff --git a/packages/cms/src/schemas/topical/theme.ts b/packages/cms/src/schemas/topical/theme.ts
@@ -41,19 +41,16 @@ export const theme = {
       name: 'tiles',
       type: 'array',
       of: [{ type: 'reference', to: { type: 'themeTile' } }],
-      validation: REQUIRED,
     },
     {
       title: 'Label voor mobiel',
       name: 'labelMobile',
       type: 'localeString',
-      validation: REQUIRED,
     },
     {
       title: 'Label voor desktop',
       name: 'labelDesktop',
       type: 'localeString',
-      validation: REQUIRED,
     },
     {
       title: 'Links',
-Original file line number
+Diff line change
@@ Expand Up / @@ -113,6 +113,7 @@ const theme = { @@
       colors,
       radii,
       shadows,
+      sizes,
     } as const;
     type Theme = typeof theme;
@@ Expand Down @@