This repository has been archived by the owner on Nov 4, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 45
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feature/COR-1598-general-page-redesigns (#4802)
* feat(page-redesigns): added FAQ and Data Explained schemas for page parts; added and updated components to facilitate new page parts; updated types; left some TODOs to be picked up; * feat(page-redesigns): cleaned up TODOs; implemented more configuration options through Sanity; * feat(page-redesigns): applied Sanity json edits; * feat(page-redesigns): implemented feature on all pages; small styling changes; applied more Sanity JSON edits; * feat(page-redesigns): fixed broken anchor for FAQ links; * feat(page-redesigns): PR feedback; added utils; updated FAQ component styles; updated Article component styles; added TODOs related to COR-1601; * feat(page-redesigns): minor barrel file fixes; * feat(page-redesign): fixed additional barrel files; --------- Co-authored-by: VWSCoronaDashboard26 <[email protected]>
- Loading branch information
1 parent
f02b680
commit 25a0666
Showing
42 changed files
with
1,043 additions
and
332 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| import { colors } from '@corona-dashboard/common'; | ||
| 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'; | ||
|
|
||
| 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(); | ||
|
|
||
| return ( | ||
| <ChartTile title={title ?? commonTexts.article_list.title} disableFullscreen> | ||
| <Grid> | ||
| {articles.map((article, index) => ( | ||
| <Link passHref href={`/artikelen/${article.slug.current}`} key={index}> | ||
| <ArticleCard> | ||
| <ArticleCardHeader> | ||
| <ArticleImage {...getImageProps(article.cover, {})} /> | ||
|
|
||
| <Box display="grid"> | ||
| <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> | ||
| </ArticleCardHeader> | ||
|
|
||
| <Box color={colors.black}>{article.summary}</Box> | ||
|
|
||
| <ArticleLink> | ||
| {commonTexts.article_teaser.read_more} | ||
| <ChevronRight /> | ||
| </ArticleLink> | ||
| </ArticleCard> | ||
| </Link> | ||
| ))} | ||
| </Grid> | ||
|
|
||
| <Link passHref href="/artikelen/"> | ||
| <ArticlesLink> | ||
| {commonTexts.article_list.articles_page_link} | ||
| <ChevronRight /> | ||
| </ArticlesLink> | ||
| </Link> | ||
| </ChartTile> | ||
| ); | ||
| }; | ||
|
|
||
| const Grid = styled(Box)` | ||
| display: grid; | ||
| gap: ${space[4]}; | ||
| margin-bottom: ${space[3]}; | ||
| @media ${mediaQueries.sm} { | ||
| grid-template-columns: repeat(2, 1fr); | ||
| } | ||
| `; | ||
|
|
||
| const ArticleCard = styled(Anchor)` | ||
| border-radius: ${radii[2]}px; | ||
| border: 1px solid ${colors.gray3}; | ||
| display: grid; | ||
| gap: ${space[2]}; | ||
| height: 100%; | ||
| padding: ${space[3]}; | ||
| `; | ||
|
|
||
| const ArticleCardHeader = styled(Box)` | ||
| align-items: center; | ||
| display: flex; | ||
| gap: ${space[3]}; | ||
| `; | ||
|
|
||
| const ArticleImage = styled(SanityImage)` | ||
| object-fit: cover; | ||
| flex-shrink: 0; | ||
| img { | ||
| border-radius: ${radii[2]}px; | ||
| height: 48px; | ||
| width: 48px; | ||
| } | ||
| `; | ||
|
|
||
| const linkStyles = css` | ||
| color: ${colors.blue8}; | ||
| cursor: pointer; | ||
| svg { | ||
| height: 10px; | ||
| margin-left: ${space[1]}; | ||
| width: 10px; | ||
| } | ||
| `; | ||
|
|
||
| const ArticleLink = styled(BoldText)` | ||
| ${linkStyles} | ||
| `; | ||
|
|
||
| const ArticlesLink = styled(Anchor)` | ||
| ${linkStyles} | ||
| font-weight: ${fontWeights.bold}; | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import { colors } from '@corona-dashboard/common'; | ||
| import { useIntl } from '~/intl'; | ||
| import { fontSizes, space } from '~/style/theme'; | ||
| import { FAQuestionAndAnswer } from '~/types/cms'; | ||
| import { Box } from './base/box'; | ||
| import { ChartTile } from './chart-tile'; | ||
| import { RichContent } from './cms/rich-content'; | ||
| import { CollapsibleSection } from './collapsible'; | ||
| import styled from 'styled-components'; | ||
|
|
||
| interface PageFaqTileProps { | ||
| questions: FAQuestionAndAnswer[]; | ||
| title: string; | ||
| } | ||
|
|
||
| export const PageFaqTile = ({ questions, title }: PageFaqTileProps) => { | ||
| const { commonTexts } = useIntl(); | ||
|
|
||
| return ( | ||
| <ChartTile title={title ?? commonTexts.faq.title} id="veelgestelde-vragen" disableFullscreen> | ||
| {questions.map((question, index) => ( | ||
| <StyledCollapsibleSection key={index} summary={question.title} textColor={colors.black} fontSize={fontSizes[3]} isLast={index + 1 === questions.length}> | ||
| {question.content && ( | ||
| <Box paddingBottom={space[3]}> | ||
| <RichContent blocks={question.content} /> | ||
| </Box> | ||
| )} | ||
| </StyledCollapsibleSection> | ||
| ))} | ||
| </ChartTile> | ||
| ); | ||
| }; | ||
|
|
||
| const StyledCollapsibleSection = styled(CollapsibleSection)<{ isLast: boolean }>` | ||
| border-bottom: ${({ isLast }) => (isLast ? `1px solid ${colors.gray2}` : undefined)}; | ||
| `; |
Oops, something went wrong.