feat(articles-redesign): Finalize 1598 related changes, refactor a fe…

…w things, add a new component, some styling changes.
minvws · Jul 3, 2023 · 62524d3 · 62524d3
1 parent bea1ba8
commit 62524d3
Show file tree

Hide file tree

Showing 23 changed files with 111 additions and 77 deletions.
diff --git a/packages/app/src/components/articles/article-teaser.tsx b/packages/app/src/components/articles/article-teaser.tsx
@@ -2,18 +2,29 @@ import { colors } from '@corona-dashboard/common';
 import { ChevronRight } from '@corona-dashboard/icons';
 import styled from 'styled-components';
 import { useIntl } from '~/intl';
-import { radii, space } from '~/style/theme';
+import { mediaQueries, radii, space } from '~/style/theme';
 import { Article, ArticleMainCategory, ArticlePublishedDate, ArticleUpdatedDate, Block, ImageBlock } from '~/types/cms';
-import { replaceComponentsInText } from '~/utils';
 import { Link } from '~/utils/link';
 import { BackgroundImage } from '../background-image';
 import { Box } from '../base';
-import { PublicationDate } from '../publication-date';
-import { Heading, Text } from '../typography';
-import { getDateToUse } from './logic/get-date-to-use';
+import { Anchor, Heading, Text } from '../typography';
+import { ArticleUpdateOrPublishingDate } from './article-update-or-publishing-date';
 
 export type ArticleSummary = Pick<Article, 'title' | 'slug' | 'summary' | 'cover' | 'category' | 'categories' | 'publicationDate' | 'mainCategory' | 'updatedDate'>;
 
+interface ArticleTeaserImageProps {
+  image: ImageBlock;
+  sizes: string[][];
+}
+
+const ArticleTeaserImage = ({ image, sizes }: ArticleTeaserImageProps) => {
+  return (
+    <div className="article-teaser-image">
+      <BackgroundImage image={image} height="200px" sizes={sizes} />
+    </div>
+  );
+};
+
 interface ArticleTeaserProps {
   cover: ImageBlock;
   coverSizes: string[][];
@@ -25,21 +36,11 @@ interface ArticleTeaserProps {
   updatedDate: ArticleUpdatedDate;
 }
 
-const ArticleTeaserImage = ({ image, sizes }: { image: ImageBlock; sizes: string[][] }) => {
-  return (
-    <div className="article-teaser-image">
-      <BackgroundImage image={image} height="200px" sizes={sizes} />
-    </div>
-  );
-};
-
-export const ArticleTeaser = (props: ArticleTeaserProps) => {
-  const { title, slug, summary, cover, coverSizes, mainCategory, publicationDate, updatedDate } = props;
+export const ArticleTeaser = ({ title, slug, summary, cover, coverSizes, mainCategory, publicationDate, updatedDate }: ArticleTeaserProps) => {
   const { commonTexts } = useIntl();
-  const { publishedOrUpdatedDate, isUpdatedAfterPublishing } = getDateToUse(publicationDate, updatedDate, mainCategory);
 
   return (
-    <Box as="article" border={`1px solid ${colors.gray3}`} borderRadius={`${radii[2]}px`} overflow="hidden" marginBottom={{ _: space[4], xs: 0 }}>
+    <article>
       <Link passHref href={`/artikelen/${slug}`}>
         <ArticleTeaserCard>
           {cover.asset && <ArticleTeaserImage image={cover} sizes={coverSizes} />}
@@ -55,15 +56,7 @@ export const ArticleTeaser = (props: ArticleTeaserProps) => {
               <Text>{summary}</Text>
             </Box>
 
-            {isUpdatedAfterPublishing ? (
-              <Box color={colors.gray8} display="flex">
-                {replaceComponentsInText(commonTexts.article_teaser.articles_updated_date, {
-                  date: <ArticlePublicationDate marginLeft={space[1]} date={publishedOrUpdatedDate} />,
-                })}
-              </Box>
-            ) : (
-              <ArticlePublicationDate date={publishedOrUpdatedDate} />
-            )}
+            <ArticleUpdateOrPublishingDate publishedDate={publicationDate} updatedDate={updatedDate} mainCategory={mainCategory} />
 
             <ArticleCTA aria-hidden="true">
               <span>{commonTexts.common.read_more}</span>
@@ -72,7 +65,7 @@ export const ArticleTeaser = (props: ArticleTeaserProps) => {
           </ArticleTeaserContent>
         </ArticleTeaserCard>
       </Link>
-    </Box>
+    </article>
   );
 };
 
@@ -87,16 +80,23 @@ const ArticleTeaserContent = styled.div`
   }
 `;
 
-const ArticleTeaserCard = styled.div`
+const ArticleTeaserCard = styled(Anchor)`
+  border: 1px solid ${colors.gray3};
+  border-radius: ${radii[2]}px;
   color: ${colors.black};
   cursor: pointer;
   display: flex;
   flex-direction: column;
   height: 100%;
+  margin-bottom: ${space[4]};
   min-height: 26rem;
   overflow: hidden;
   text-decoration: none;
 
+  @media ${mediaQueries.xs} {
+    margin-bottom: 0;
+  }
+
   .article-teaser-image {
     flex-shrink: 0;
     height: 200px;
@@ -123,15 +123,6 @@ const ArticleTeaserCard = styled.div`
   }
 `;
 
-interface ArticlePublicationDate {
-  marginLeft?: string;
-}
-
-const ArticlePublicationDate = styled(PublicationDate)<ArticlePublicationDate>`
-  color: ${colors.gray8};
-  margin-left: ${({ marginLeft }) => (marginLeft ? marginLeft : undefined)};
-`;
-
 const ArticleCTA = styled.strong`
   align-items: center;
   color: ${colors.blue8};

diff --git a/packages/app/src/components/articles/article-update-or-publishing-date.tsx b/packages/app/src/components/articles/article-update-or-publishing-date.tsx
@@ -0,0 +1,37 @@
+import { colors } from '@corona-dashboard/common';
+import { useIntl } from '~/intl';
+import { ArticleMainCategory, ArticlePublishedDate, ArticleUpdatedDate } from '~/types/cms';
+import { replaceComponentsInText } from '~/utils/replace-components-in-text';
+import { Box } from '../base/box';
+import { PublicationDate } from '../publication-date';
+import { InlineText } from '../typography';
+import { getDateToUse } from './logic/get-date-to-use';
+
+interface ArticlePublishingDateProps {
+  mainCategory: ArticleMainCategory | null;
+  publishedDate: ArticlePublishedDate;
+  updatedDate: ArticleUpdatedDate;
+}
+
+export const ArticleUpdateOrPublishingDate = ({ publishedDate, updatedDate, mainCategory }: ArticlePublishingDateProps) => {
+  const { commonTexts } = useIntl();
+  const { publishedOrUpdatedDate, isUpdatedAfterPublishing } = getDateToUse(publishedDate, updatedDate, mainCategory);
+
+  if (isUpdatedAfterPublishing) {
+    return (
+      <Box color={colors.gray8} display="flex">
+        <span>
+          {replaceComponentsInText(commonTexts.article_teaser.articles_updated_date, {
+            date: <PublicationDate date={publishedOrUpdatedDate} />,
+          })}
+        </span>
+      </Box>
+    );
+  }
+
+  return (
+    <InlineText color={colors.gray8}>
+      <PublicationDate date={publishedOrUpdatedDate} />
+    </InlineText>
+  );
+};
diff --git a/...app/src/components/page-articles-tile.tsx → ...omponents/articles/page-articles-tile.tsx b/...app/src/components/page-articles-tile.tsx → ...omponents/articles/page-articles-tile.tsx
@@ -1,23 +1,22 @@
 import { colors } from '@corona-dashboard/common';
+import { ChevronRight } from '@corona-dashboard/icons';
+import styled, { css } from 'styled-components';
+import { useIntl } from '~/intl';
 import { getImageProps } from '~/lib/sanity';
 import { fontWeights, mediaQueries, radii, space } from '~/style/theme';
-import { Box } from './base';
-import { ChartTile } from './chart-tile';
-import { SanityImage } from './cms/sanity-image';
-import { Anchor, BoldText, Text } from './typography';
-import { Link } from '~/utils/link';
-import styled, { css } from 'styled-components';
-import { PublicationDate } from './publication-date';
-import { ChevronRight } from '@corona-dashboard/icons';
 import { Article } from '~/types/cms';
-import { useIntl } from '~/intl';
+import { Link } from '~/utils/link';
+import { Box } from '../base';
+import { ChartTile } from '../chart-tile';
+import { SanityImage } from '../cms/sanity-image';
+import { Anchor, BoldText, InlineText, Text } from '../typography';
+import { ArticleUpdateOrPublishingDate } from './article-update-or-publishing-date';
 
 interface PageArticlesTileProps {
   articles: Article[];
   title: string;
 }
 
-// TODO: this should be moved to the /articles/ directory, as picked up in COR-1601
 export const PageArticlesTile = ({ articles, title }: PageArticlesTileProps) => {
   const { commonTexts } = useIntl();
 
@@ -30,17 +29,18 @@ export const PageArticlesTile = ({ articles, title }: PageArticlesTileProps) =>
               <ArticleCardHeader>
                 <ArticleImage {...getImageProps(article.cover, {})} />
 
-                <Box display="grid">
+                <div>
                   <BoldText color={colors.black}>{article.title}</BoldText>
-                  <Text color={colors.gray8}>
-                    {/* TODO: this should be updated after COR-1601 implements publicationDate vs updateDate logic */}
-                    {article.mainCategory && `${commonTexts.article_teaser.categories[article.mainCategory]} · `}
-                    <PublicationDate date={article.publicationDate} />
-                  </Text>
-                </Box>
+
+                  <Box display="flex" color={colors.gray8} spacingHorizontal={1}>
+                    <InlineText>{article.mainCategory && `${commonTexts.article_teaser.categories[article.mainCategory]} · `}</InlineText>
+
+                    <ArticleUpdateOrPublishingDate publishedDate={article.publicationDate} updatedDate={article.updatedDate} mainCategory={article.mainCategory} />
+                  </Box>
+                </div>
               </ArticleCardHeader>
 
-              <Box color={colors.black}>{article.summary}</Box>
+              <Text color={colors.black}>{article.summary}</Text>
 
               <ArticleLink>
                 {commonTexts.article_teaser.read_more}
@@ -74,10 +74,17 @@ const Grid = styled(Box)`
 const ArticleCard = styled(Anchor)`
   border-radius: ${radii[2]}px;
   border: 1px solid ${colors.gray3};
-  display: grid;
+  display: flex;
+  flex-direction: column;
   gap: ${space[2]};
   height: 100%;
   padding: ${space[3]};
+
+  ${Text} {
+    align-items: end;
+    display: flex;
+    flex-grow: 1;
+  }
 `;
 
 const ArticleCardHeader = styled(Box)`

diff --git a/packages/app/src/pages/gemeente/[code]/positief-geteste-mensen.tsx b/packages/app/src/pages/gemeente/[code]/positief-geteste-mensen.tsx
@@ -12,7 +12,7 @@ import { InView } from '~/components/in-view';
 import { KpiTile } from '~/components/kpi-tile';
 import { KpiValue } from '~/components/kpi-value';
 import { Markdown } from '~/components/markdown';
-import { PageArticlesTile } from '~/components/page-articles-tile';
+import { PageArticlesTile } from '~/components/articles/page-articles-tile';
 import { PageFaqTile } from '~/components/page-faq-tile';
 import { PageInformationBlock } from '~/components/page-information-block';
 import { TileList } from '~/components/tile-list';

diff --git a/packages/app/src/pages/gemeente/[code]/rioolwater.tsx b/packages/app/src/pages/gemeente/[code]/rioolwater.tsx
@@ -6,7 +6,7 @@ import { InView } from '~/components/in-view';
 import { KpiTile } from '~/components/kpi-tile';
 import { KpiValue } from '~/components/kpi-value';
 import { Markdown } from '~/components/markdown';
-import { PageArticlesTile } from '~/components/page-articles-tile';
+import { PageArticlesTile } from '~/components/articles/page-articles-tile';
 import { PageFaqTile } from '~/components/page-faq-tile';
 import { PageInformationBlock } from '~/components/page-information-block';
 import { TileList } from '~/components/tile-list';

diff --git a/packages/app/src/pages/gemeente/[code]/sterfte.tsx b/packages/app/src/pages/gemeente/[code]/sterfte.tsx
@@ -7,7 +7,7 @@ import { InView } from '~/components/in-view';
 import { KpiTile } from '~/components/kpi-tile';
 import { KpiValue } from '~/components/kpi-value';
 import { Markdown } from '~/components/markdown';
-import { PageArticlesTile } from '~/components/page-articles-tile';
+import { PageArticlesTile } from '~/components/articles/page-articles-tile';
 import { PageFaqTile } from '~/components/page-faq-tile';
 import { PageInformationBlock } from '~/components/page-information-block/page-information-block';
 import { TileList } from '~/components/tile-list';

diff --git a/packages/app/src/pages/gemeente/[code]/vaccinaties.tsx b/packages/app/src/pages/gemeente/[code]/vaccinaties.tsx
@@ -6,7 +6,7 @@ import { isDefined, isPresent } from 'ts-is-present';
 import { Divider } from '~/components/divider';
 import { InView } from '~/components/in-view';
 import { BorderedKpiSection } from '~/components/kpi/bordered-kpi-section';
-import { PageArticlesTile } from '~/components/page-articles-tile';
+import { PageArticlesTile } from '~/components/articles/page-articles-tile';
 import { PageFaqTile } from '~/components/page-faq-tile';
 import { PageInformationBlock } from '~/components/page-information-block/page-information-block';
 import { TileList } from '~/components/tile-list';

diff --git a/packages/app/src/pages/gemeente/[code]/ziekenhuis-opnames.tsx b/packages/app/src/pages/gemeente/[code]/ziekenhuis-opnames.tsx
@@ -10,7 +10,7 @@ import { thresholds } from '~/components/choropleth/logic/thresholds';
 import { InView } from '~/components/in-view';
 import { KpiTile } from '~/components/kpi-tile';
 import { KpiValue } from '~/components/kpi-value';
-import { PageArticlesTile } from '~/components/page-articles-tile';
+import { PageArticlesTile } from '~/components/articles/page-articles-tile';
 import { PageFaqTile } from '~/components/page-faq-tile';
 import { PageInformationBlock } from '~/components/page-information-block/page-information-block';
 import { TileList } from '~/components/tile-list';

diff --git a/packages/app/src/pages/landelijk/besmettelijke-mensen.tsx b/packages/app/src/pages/landelijk/besmettelijke-mensen.tsx
@@ -3,7 +3,7 @@ import { Ziektegolf } from '@corona-dashboard/icons';
 import { GetStaticPropsContext } from 'next';
 import { ChartTile } from '~/components/chart-tile';
 import { InView } from '~/components/in-view';
-import { PageArticlesTile } from '~/components/page-articles-tile';
+import { PageArticlesTile } from '~/components/articles/page-articles-tile';
 import { PageFaqTile } from '~/components/page-faq-tile';
 import { PageInformationBlock } from '~/components/page-information-block';
 import { TileList } from '~/components/tile-list';

diff --git a/packages/app/src/pages/landelijk/gedrag.tsx b/packages/app/src/pages/landelijk/gedrag.tsx
@@ -24,7 +24,7 @@ import { ArticleParts, PagePartQueryResult } from '~/types/cms';
 import { replaceVariablesInText } from '~/utils/replace-variables-in-text';
 import { getLastInsertionDateOfPage } from '~/utils/get-last-insertion-date-of-page';
 import { useDynamicLokalizeTexts } from '~/utils/cms/use-dynamic-lokalize-texts';
-import { PageArticlesTile } from '~/components/page-articles-tile';
+import { PageArticlesTile } from '~/components/articles/page-articles-tile';
 import { PageFaqTile } from '~/components/page-faq-tile';
 import { getPageInformationHeaderContent } from '~/utils/get-page-information-header-content';
 import { WarningTile } from '~/components/warning-tile';

diff --git a/packages/app/src/pages/landelijk/gehandicaptenzorg.tsx b/packages/app/src/pages/landelijk/gehandicaptenzorg.tsx
@@ -8,7 +8,7 @@ import { ChoroplethTile } from '~/components/choropleth-tile';
 import { thresholds } from '~/components/choropleth/logic/thresholds';
 import { Divider } from '~/components/divider';
 import { InView } from '~/components/in-view';
-import { PageArticlesTile } from '~/components/page-articles-tile';
+import { PageArticlesTile } from '~/components/articles/page-articles-tile';
 import { PageFaqTile } from '~/components/page-faq-tile';
 import { PageInformationBlock } from '~/components/page-information-block';
 import { TileList } from '~/components/tile-list';

diff --git a/packages/app/src/pages/landelijk/kwetsbare-groepen-70-plussers.tsx b/packages/app/src/pages/landelijk/kwetsbare-groepen-70-plussers.tsx
@@ -13,7 +13,7 @@ import { KpiTile } from '~/components/kpi-tile';
 import { KpiValue } from '~/components/kpi-value';
 import { BorderedKpiSection } from '~/components/kpi/bordered-kpi-section';
 import { Markdown } from '~/components/markdown';
-import { PageArticlesTile } from '~/components/page-articles-tile';
+import { PageArticlesTile } from '~/components/articles/page-articles-tile';
 import { PageFaqTile } from '~/components/page-faq-tile';
 import { PageInformationBlock } from '~/components/page-information-block';
 import { TileList } from '~/components/tile-list';

diff --git a/packages/app/src/pages/landelijk/patienten-in-beeld.tsx b/packages/app/src/pages/landelijk/patienten-in-beeld.tsx
@@ -8,7 +8,7 @@ import { DynamicChoropleth } from '~/components/choropleth';
 import { ChoroplethTile } from '~/components/choropleth-tile';
 import { thresholds } from '~/components/choropleth/logic/thresholds';
 import { InView } from '~/components/in-view';
-import { PageArticlesTile } from '~/components/page-articles-tile';
+import { PageArticlesTile } from '~/components/articles/page-articles-tile';
 import { PageFaqTile } from '~/components/page-faq-tile';
 import { PageInformationBlock } from '~/components/page-information-block';
 import { SEOHead } from '~/components/seo-head';

diff --git a/packages/app/src/pages/landelijk/positief-geteste-mensen.tsx b/packages/app/src/pages/landelijk/positief-geteste-mensen.tsx
@@ -10,7 +10,7 @@ import { ChoroplethTile } from '~/components/choropleth-tile';
 import { thresholds } from '~/components/choropleth/logic/thresholds';
 import { InView } from '~/components/in-view';
 import { Markdown } from '~/components/markdown';
-import { PageArticlesTile } from '~/components/page-articles-tile';
+import { PageArticlesTile } from '~/components/articles/page-articles-tile';
 import { PageFaqTile } from '~/components/page-faq-tile';
 import { PageInformationBlock } from '~/components/page-information-block';
 import { TileList } from '~/components/tile-list';

diff --git a/packages/app/src/pages/landelijk/reproductiegetal.tsx b/packages/app/src/pages/landelijk/reproductiegetal.tsx
@@ -4,7 +4,7 @@ import { GetStaticPropsContext } from 'next';
 import { InView } from '~/components/in-view';
 import { KpiWithIllustrationTile } from '~/components/kpi-with-illustration-tile';
 import { Markdown } from '~/components/markdown';
-import { PageArticlesTile } from '~/components/page-articles-tile';
+import { PageArticlesTile } from '~/components/articles/page-articles-tile';
 import { PageFaqTile } from '~/components/page-faq-tile';
 import { PageInformationBlock } from '~/components/page-information-block';
 import { PageKpi } from '~/components/page-kpi';

diff --git a/packages/app/src/pages/landelijk/rioolwater.tsx b/packages/app/src/pages/landelijk/rioolwater.tsx
@@ -7,7 +7,7 @@ import { thresholds } from '~/components/choropleth/logic/thresholds';
 import { InView } from '~/components/in-view';
 import { KpiTile } from '~/components/kpi-tile';
 import { KpiValue } from '~/components/kpi-value';
-import { PageArticlesTile } from '~/components/page-articles-tile';
+import { PageArticlesTile } from '~/components/articles/page-articles-tile';
 import { PageFaqTile } from '~/components/page-faq-tile';
 import { PageInformationBlock } from '~/components/page-information-block';
 import { TileList } from '~/components/tile-list';

diff --git a/packages/app/src/pages/landelijk/sterfte.tsx b/packages/app/src/pages/landelijk/sterfte.tsx
@@ -10,7 +10,7 @@ import { InView } from '~/components/in-view';
 import { KpiTile } from '~/components/kpi-tile';
 import { KpiValue } from '~/components/kpi-value';
 import { Markdown } from '~/components/markdown';
-import { PageArticlesTile } from '~/components/page-articles-tile';
+import { PageArticlesTile } from '~/components/articles/page-articles-tile';
 import { PageFaqTile } from '~/components/page-faq-tile';
 import { PageInformationBlock } from '~/components/page-information-block';
 import { TileList } from '~/components/tile-list';

diff --git a/packages/app/src/pages/landelijk/testen.tsx b/packages/app/src/pages/landelijk/testen.tsx
@@ -4,7 +4,7 @@ import { GetStaticPropsContext } from 'next';
 import { useState } from 'react';
 import { ChartTile } from '~/components/chart-tile';
 import { InView } from '~/components/in-view';
-import { PageArticlesTile } from '~/components/page-articles-tile';
+import { PageArticlesTile } from '~/components/articles/page-articles-tile';
 import { PageFaqTile } from '~/components/page-faq-tile';
 import { PageInformationBlock } from '~/components/page-information-block';
 import { TileList } from '~/components/tile-list';

diff --git a/packages/app/src/pages/landelijk/thuiswonende-ouderen.tsx b/packages/app/src/pages/landelijk/thuiswonende-ouderen.tsx
@@ -8,7 +8,7 @@ import { ChoroplethTile } from '~/components/choropleth-tile';
 import { thresholds } from '~/components/choropleth/logic/thresholds';
 import { Divider } from '~/components/divider';
 import { InView } from '~/components/in-view';
-import { PageArticlesTile } from '~/components/page-articles-tile';
+import { PageArticlesTile } from '~/components/articles/page-articles-tile';
 import { PageFaqTile } from '~/components/page-faq-tile';
 import { PageInformationBlock } from '~/components/page-information-block';
 import { TileList } from '~/components/tile-list';

diff --git a/packages/app/src/pages/landelijk/vaccinaties.tsx b/packages/app/src/pages/landelijk/vaccinaties.tsx
@@ -7,7 +7,7 @@ import { ChartTile } from '~/components/chart-tile';
 import { Divider } from '~/components/divider';
 import { InView } from '~/components/in-view';
 import { BorderedKpiSection } from '~/components/kpi/bordered-kpi-section';
-import { PageArticlesTile } from '~/components/page-articles-tile';
+import { PageArticlesTile } from '~/components/articles/page-articles-tile';
 import { PageFaqTile } from '~/components/page-faq-tile';
 import { PageInformationBlock } from '~/components/page-information-block/page-information-block';
 import { TileList } from '~/components/tile-list';