Feature/COR-1637-adjustments-in-sanity (#4878)

* feat(sanity-ui-improvements): Made textual adjustments. * feat(sanity-ui-improvements): Removed the De beschrijving boven de thermometer fieldset, fields and associated code/content * feat(sanity-ui-improvements): Removed the Titel van standen informatie fieldset, fields and associated code/content. * feat(sanity-ui-improvements): Last few changes. * Merge branch 'develop' into feature/COR-1637-adjustments-in-sanity
minvws · Sep 27, 2023 · 68912fd · 68912fd
1 parent 7b98482
commit 68912fd
Show file tree

Hide file tree

Showing 12 changed files with 43 additions and 124 deletions.
diff --git a/packages/app/src/components/severity-indicator-tile/logic/set-trend-icon.tsx b/packages/app/src/components/severity-indicator-tile/logic/set-trend-icon.tsx
diff --git a/packages/app/src/components/severity-indicator-tile/severity-indicator-tile.tsx b/packages/app/src/components/severity-indicator-tile/severity-indicator-tile.tsx
@@ -1,18 +1,14 @@
 import { colors } from '@corona-dashboard/common';
 import css from '@styled-system/css';
-import styled from 'styled-components';
-import { space } from '~/style/theme';
 import { Box } from '~/components/base';
 import { Markdown } from '~/components/markdown';
 import { InlineText } from '~/components/typography';
-import { TrendIcon, TrendIconColor } from '~/domain/topical/types';
-import { SeverityIndicatorLabel } from './components/severity-indicator-label';
+import { space } from '~/style/theme';
 import { SeverityIndicator } from './components/severity-indicator';
+import { SeverityIndicatorLabel } from './components/severity-indicator-label';
 import { SEVERITY_INDICATOR_TILE_COLUMN_MIN_WIDTH } from './constants';
 import { getSeverityColor } from './logic/get-severity-color';
 import { SeverityLevel } from './types';
-import { mapStringToColors } from './logic/map-string-to-colors';
-import { setTrendIcon } from '~/components/severity-indicator-tile/logic/set-trend-icon';
 
 interface SeverityIndicatorTileProps {
   description: string;
@@ -22,13 +18,9 @@ interface SeverityIndicatorTileProps {
   sourceLabel: string;
   datesLabel: string;
   levelDescription: string;
-  trendIcon: TrendIcon;
 }
 
-export const SeverityIndicatorTile = ({ description, label, level, title, datesLabel, sourceLabel, levelDescription, trendIcon }: SeverityIndicatorTileProps) => {
-  const hasIconProps = trendIcon?.direction && trendIcon?.color;
-  const iconColor = trendIcon?.color?.toUpperCase() as TrendIconColor;
-
+export const SeverityIndicatorTile = ({ description, label, level, title, datesLabel, sourceLabel, levelDescription }: SeverityIndicatorTileProps) => {
   return (
     <Box
       alignItems="flex-start"
@@ -54,8 +46,7 @@ export const SeverityIndicatorTile = ({ description, label, level, title, datesL
 
       <Box flexGrow={1} width={`min(${SEVERITY_INDICATOR_TILE_COLUMN_MIN_WIDTH}px, 50%)`} as="figcaption">
         {description && <Markdown content={description} />}
-        <Box display={hasIconProps ? 'flex' : 'block'} alignItems="center" marginTop={space[3]} css={css({ gap: space[2] })}>
-          {trendIcon?.direction && iconColor && hasIconProps && <TrendIconWrapper color={mapStringToColors(iconColor)}>{setTrendIcon(trendIcon.direction)}</TrendIconWrapper>}
+        <Box display="block" alignItems="center" marginTop={space[3]} css={css({ gap: space[2] })}>
           {levelDescription && <Markdown content={levelDescription} />}
         </Box>
         <Box marginY={space[3]}>
@@ -65,9 +56,3 @@ export const SeverityIndicatorTile = ({ description, label, level, title, datesL
     </Box>
   );
 };
-
-const TrendIconWrapper = styled.span`
-  color: ${({ color }) => color};
-  flex-shrink: 0;
-  width: 20px;
-`;
diff --git a/packages/app/src/domain/topical/components/topical-theme-header.tsx b/packages/app/src/domain/topical/components/topical-theme-header.tsx
@@ -1,33 +1,23 @@
-import { Box } from '~/components/base';
-import styled from 'styled-components';
-import { Heading } from '~/components/typography';
-import { RichContent } from '~/components/cms/rich-content';
 import { IconName as TopicalIcon } from '@corona-dashboard/icons/src/icon-name2filename';
+import styled from 'styled-components';
+import { Box } from '~/components/base';
 import DynamicIcon from '~/components/get-icon-by-name';
+import { Heading } from '~/components/typography';
 import theme from '~/style/theme';
-import { PortableTextEntry } from '@sanity/block-content-to-react';
-import { fontSizes } from '~/style/theme';
 
 interface TopicalThemeHeaderProps {
   title: string;
-  subtitle?: PortableTextEntry[] | null;
   icon: TopicalIcon;
 }
 
-export const TopicalThemeHeader = ({ title, subtitle, icon }: TopicalThemeHeaderProps) => {
+export const TopicalThemeHeader = ({ title, icon }: TopicalThemeHeaderProps) => {
   return (
-    <Box spacing={3}>
-      <Box display="flex" justifyContent="start" alignItems="center">
-        <StyledTopicalThemeHeaderIcon>
-          <DynamicIcon name={icon} aria-hidden="true" />
-        </StyledTopicalThemeHeaderIcon>
-        <Heading level={2}>{title}</Heading>
-      </Box>
-      {subtitle && (
-        <Box fontSize={fontSizes[3]}>
-          <RichContent blocks={subtitle} />
-        </Box>
-      )}
+    <Box display="flex" alignItems="center">
+      <StyledTopicalThemeHeaderIcon>
+        <DynamicIcon name={icon} aria-hidden="true" />
+      </StyledTopicalThemeHeaderIcon>
+
+      <Heading level={2}>{title}</Heading>
     </Box>
   );
 };

diff --git a/packages/app/src/pages/index.tsx b/packages/app/src/pages/index.tsx
@@ -103,7 +103,7 @@ const Home = (props: StaticProps<typeof getStaticProps>) => {
               return (
                 <Box key={theme.title}>
                   <Box marginBottom={space[4]}>
-                    <TopicalThemeHeader title={theme.title} subtitle={theme.subTitle} icon={getFilenameToIconName(theme.themeIcon) as TopicalIcon} />
+                    <TopicalThemeHeader title={theme.title} icon={getFilenameToIconName(theme.themeIcon) as TopicalIcon} />
                   </Box>
                   {theme.tiles && (
                     <Box

diff --git a/packages/app/src/pages/landelijk/corona-thermometer.tsx b/packages/app/src/pages/landelijk/corona-thermometer.tsx
@@ -1,34 +1,33 @@
-import { Languages, SiteText } from '~/locale';
 import { colors } from '@corona-dashboard/common';
+import { Coronathermometer } from '@corona-dashboard/icons';
+import { GetStaticPropsContext } from 'next';
 import styled from 'styled-components';
+import { ChartTile, InView, PageInformationBlock, TileList, WarningTile } from '~/components';
+import { PageArticlesTile } from '~/components/articles/page-articles-tile';
 import { Box } from '~/components/base';
-import { GetStaticPropsContext } from 'next';
+import { PageFaqTile } from '~/components/page-faq-tile';
 import { getTimelineRangeDates } from '~/components/severity-indicator-tile/components/timeline/logic';
 import { Timeline } from '~/components/severity-indicator-tile/components/timeline/timeline';
 import { SEVERITY_LEVELS_LIST, TOPICAL_SEVERITY_INDICATOR_TILE_MAX_WIDTH } from '~/components/severity-indicator-tile/constants';
 import { SeverityIndicatorTile } from '~/components/severity-indicator-tile/severity-indicator-tile';
 import { SeverityLevel } from '~/components/severity-indicator-tile/types';
 import { TimelineMarker } from '~/components/time-series-chart/components/timeline';
+import { Layout } from '~/domain/layout/layout';
+import { NlLayout } from '~/domain/layout/nl-layout';
 import { IndicatorLevelDescription } from '~/domain/topical/components/indicator-level-description';
-import { TrendIcon } from '~/domain/topical/types';
+import { useIntl } from '~/intl';
+import { Languages, SiteText } from '~/locale';
+import { getArticleParts, getDataExplainedParts, getFaqParts, getPagePartsQuery } from '~/queries/get-page-parts-query';
 import { getThermometerEvents, getTopicalStructureQuery } from '~/queries/get-topical-structure-query';
+import { TopicalSanityData } from '~/queries/query-types';
 import { StaticProps, createGetStaticProps } from '~/static-props/create-get-static-props';
 import { createGetContent, getLastGeneratedDate, getLokalizeTexts } from '~/static-props/get-data';
+import { space } from '~/style/theme';
 import { ArticleParts, LinkParts, PagePartQueryResult, RichTextParts } from '~/types/cms';
-import { TopicalSanityData } from '~/queries/query-types';
-import { getArticleParts, getDataExplainedParts, getFaqParts, getPagePartsQuery } from '~/queries/get-page-parts-query';
-import { Layout } from '~/domain/layout/layout';
-import { NlLayout } from '~/domain/layout/nl-layout';
-import { ChartTile, InView, PageInformationBlock, TileList, WarningTile } from '~/components';
 import { useDynamicLokalizeTexts } from '~/utils/cms/use-dynamic-lokalize-texts';
-import { space } from '~/style/theme';
-import { Coronathermometer } from '@corona-dashboard/icons';
-import { useIntl } from '~/intl';
-import { replaceVariablesInText } from '~/utils/replace-variables-in-text';
 import { getPageInformationHeaderContent } from '~/utils/get-page-information-header-content';
-import { PageFaqTile } from '~/components/page-faq-tile';
-import { PageArticlesTile } from '~/components/articles/page-articles-tile';
 import { getThermometerSeverityLevels } from '~/utils/get-thermometer-severity-level';
+import { replaceVariablesInText } from '~/utils/replace-variables-in-text';
 
 const selectLokalizeTexts = (siteText: SiteText) => ({
   textNl: siteText.pages.corona_thermometer_page.nl,
@@ -131,7 +130,6 @@ const CoronaThermometer = (props: StaticProps<typeof getStaticProps>) => {
                   sourceLabel={thermometer.sourceLabel}
                   datesLabel={thermometer.datesLabel}
                   levelDescription={thermometer.levelDescription}
-                  trendIcon={thermometer.trendIcon as TrendIcon}
                 />
                 {thermometerEvents && thermometerEvents.length && (
                   <Timeline

diff --git a/packages/app/src/queries/get-topical-structure-query.ts b/packages/app/src/queries/get-topical-structure-query.ts
@@ -26,7 +26,6 @@ export function getTopicalStructureQuery(locale: string) {
       ][0]{
         'themes': themes[]->{
           'title':title.${locale},
-          'subTitle':subTitle.${locale},
           themeIcon,
           'linksLabelMobile': labelMobile.${locale},
           'linksLabelDesktop': labelDesktop.${locale},
@@ -62,7 +61,6 @@ export function getTopicalStructureQuery(locale: string) {
       ][0]{
         icon,
         'title': title.${locale},
-        'subTitle': subTitle.${locale},
         'tileTitle':tileTitle.${locale},
         currentLevel,
         'thermometerLevels': thermometerLevels[]->{
@@ -75,10 +73,6 @@ export function getTopicalStructureQuery(locale: string) {
         'sourceLabel': sourceLabel.${locale},
         'articleReference': articleReference.${locale},
         'collapsibleTitle': collapsibleTitle.${locale},
-        'trendIcon': {
-          'color': trendIcon.color,
-          'direction': trendIcon.direction,
-        },
         'timeline': {
           'title': timeline.title.${locale},
           'tooltipLabel': timeline.tooltipCurrentEstimationLabel.${locale},

diff --git a/packages/app/src/queries/query-types.ts b/packages/app/src/queries/query-types.ts
@@ -15,15 +15,13 @@ export interface TopicalSanityData {
 export interface ThermometerConfig {
   icon: TopicalIcon;
   title: string;
-  subTitle: PortableTextEntry[] | null;
   tileTitle: string | null;
   currentLevel: SeverityLevel;
   datesLabel: string;
   levelDescription: string;
   sourceLabel: string;
   articleReference: PortableTextEntry[];
   collapsibleTitle: string;
-  trendIcon: TrendIcon;
   thermometerLevels: ThermometerLevel[];
   timeline: ThermometerTimeLine;
 }
@@ -60,7 +58,6 @@ interface KpiThemes {
 }
 interface Theme {
   title: string;
-  subTitle: PortableTextEntry[] | null;
   themeIcon: TopicalIcon;
 }
 

diff --git a/packages/cms/src/schemas/documents/pages/homepage/theme-tile.ts b/packages/cms/src/schemas/documents/pages/homepage/theme-tile.ts
@@ -24,6 +24,15 @@ export const themeTile = defineType({
         collapsed: true,
       },
     },
+    {
+      title: 'Link configuratie',
+      name: 'link-configuration',
+      description: 'Klik op het label om de velden te tonen.',
+      options: {
+        collapsible: true,
+        collapsed: true,
+      },
+    },
   ],
   fields: [
     defineField({
@@ -54,7 +63,7 @@ export const themeTile = defineType({
       fieldset: 'kpiValue',
     }),
     defineField({
-      title: 'Verberg trend icoon',
+      title: 'Toon geen pijlen',
       name: 'hideTrendIcon',
       type: 'boolean',
       description: 'Wanneer aangevinkt, wordt het trend icoon niet getoond bij de KPI waarde.',
@@ -92,14 +101,16 @@ export const themeTile = defineType({
       fieldset: 'theme-tile-date-config',
     }),
     defineField({
-      title: 'Trend icon',
+      title: 'Trend pijlen',
       name: 'trendIcon',
       type: 'trendIcon',
     }),
     defineField({
       title: 'Link',
+      description: 'Vul hier de link in naar de juiste Landelijk pagina',
       name: 'cta',
       type: 'link',
+      fieldset: 'link-configuration',
     }),
   ],
   preview: {

diff --git a/packages/cms/src/schemas/documents/pages/homepage/theme.ts b/packages/cms/src/schemas/documents/pages/homepage/theme.ts
@@ -9,15 +9,6 @@ export const theme = defineType({
   name: 'theme',
   icon: BsFileEarmark,
   fieldsets: [
-    {
-      title: 'Ondertitel',
-      description: 'Klik op het label om de velden te tonen.',
-      name: 'ondertitel',
-      options: {
-        collapsible: true,
-        collapsed: true,
-      },
-    },
     {
       title: 'Links',
       description: 'Klik op het label om de velden te tonen.',
@@ -35,12 +26,6 @@ export const theme = defineType({
       type: 'localeString',
       validation: localeStringValidation((rule) => rule.required()),
     }),
-    defineField({
-      title: 'Ondertitel',
-      name: 'subTitle',
-      type: 'localeRichContentBlock',
-      fieldset: 'ondertitel',
-    }),
     defineField({
       title: 'Thema icoon',
       name: 'themeIcon',

diff --git a/packages/cms/src/schemas/documents/pages/homepage/thermometer-timeline.ts b/packages/cms/src/schemas/documents/pages/homepage/thermometer-timeline.ts
@@ -30,7 +30,7 @@ export const thermometerTimeline = defineType({
       title: 'Tooltip label',
       description: 'Extra beschrijving voor in de laatste gebeurtenis in de tijdlijn',
       name: 'tooltipCurrentEstimationLabel',
-      type: 'localeText',
+      type: 'localeString',
       validation: (rule) => rule.required(),
     }),
     defineField({

diff --git a/packages/cms/src/schemas/documents/pages/homepage/thermometer.ts b/packages/cms/src/schemas/documents/pages/homepage/thermometer.ts
@@ -8,15 +8,6 @@ export const thermometer = defineType({
   title: 'Thermometer',
   name: 'thermometer',
   fieldsets: [
-    {
-      title: 'De beschrijving boven de thermometer',
-      name: 'description',
-      description: 'Klik op het label om de velden te tonen.',
-      options: {
-        collapsible: true,
-        collapsed: true,
-      },
-    },
     {
       title: 'Artikel referentie',
       name: 'artikel-referentie',
@@ -26,15 +17,6 @@ export const thermometer = defineType({
         collapsed: true,
       },
     },
-    {
-      title: 'Titel van standen informatie',
-      name: 'level-information',
-      description: 'Klik op het label om de velden te tonen.',
-      options: {
-        collapsible: true,
-        collapsed: true,
-      },
-    },
   ],
   fields: [
     defineField({
@@ -52,12 +34,6 @@ export const thermometer = defineType({
       type: 'localeString',
       validation: localeStringValidation((rule) => rule.required()),
     }),
-    defineField({
-      title: 'De beschrijving boven de thermometer',
-      name: 'subTitle',
-      type: 'localeRichContentBlock',
-      fieldset: 'description',
-    }),
     defineField({
       title: 'De titel binnen de thermometer tegel',
       name: 'tileTitle',
@@ -110,12 +86,6 @@ export const thermometer = defineType({
       type: 'localeString',
       validation: localeStringValidation((rule) => rule.required()),
     }),
-    defineField({
-      title: 'Titel van standen informatie',
-      name: 'trendIcon',
-      type: 'thermometerTrendIcon',
-      fieldset: 'level-information',
-    }),
     defineField({
       title: 'Tijdlijn',
       name: 'timeline',

diff --git a/packages/cms/src/studio/desk-structure/homepage-structure-item.ts b/packages/cms/src/studio/desk-structure/homepage-structure-item.ts
@@ -14,7 +14,7 @@ export const homepageStructureItem = (S: StructureBuilder) => {
           addStructureItem(S, BsGear, 'Samenvattingspagina configuratie', 'topicalPageConfig'),
           addStructureItem(S, BsCardList, 'Weeksamenvatting', 'weeklySummary'),
           addStructureItem(S, BsThermometer, 'Thermometer', 'thermometer'),
-          addStructureItem(S, BsCardText, "Thema's", 'themeCollection'),
+          addStructureItem(S, BsCardText, "KPI thema's en tegels", 'themeCollection'),
           addStructureItem(S, BsCardText, 'Adviezen', 'advice'),
         ])
     );