Feature/COR-1610 about page improvements

packages/app/src/components/cms/content-image.tsx

@@ -6,14 +6,15 @@ import { Box } from '~/components/base';
 import { ContentBlock } from '~/components/cms/content-block';
 import { SanityImage } from '~/components/cms/sanity-image';
 import { getImageProps } from '~/lib/sanity';
-import { space } from '~/style/theme';
+import { space, shadows } from '~/style/theme';
 import { ImageBlock, RichContentImageBlock } from '~/types/cms';
 import { Text } from '../typography';
 
 interface ContentImageProps {
   node: ImageBlock | RichContentImageBlock;
   contentWrapper?: FunctionComponent;
   sizes?: string[][];
+  enableShadow?: boolean;
 }
 
 const SanityImageTile = styled(SanityImage)(
@@ -25,7 +26,7 @@ const SanityImageTile = styled(SanityImage)(
 
 const IMAGE_MAX_WIDTH = '980px';
 
-export function ContentImage({ node, contentWrapper, sizes }: ContentImageProps) {
+export function ContentImage({ node, contentWrapper, sizes, enableShadow = false }: ContentImageProps) {
   const caption = 'caption' in node && node.caption && (
     <Text as="figcaption" variant="body2" textAlign="left">
       {node.caption}
@@ -53,7 +54,9 @@ export function ContentImage({ node, contentWrapper, sizes }: ContentImageProps)
   ) : (
     <ContentWrapper>
       <Box as="figure" role="group" spacing={3} marginY={space[2]} textAlign="center">
-        <Box marginBottom={space[3]}>{node.asset && <SanityImage {...getImageProps(node, { sizes })} />}</Box>
+        <Box marginBottom={space[3]} boxShadow={enableShadow ? shadows.tile : null}>
+          {node.asset && <SanityImage {...getImageProps(node, { sizes })} />}
+        </Box>
         {caption}
       </Box>
     </ContentWrapper>

packages/app/src/components/fullscreen-chart-tile.tsx

@@ -18,9 +18,10 @@ interface FullscreenChartTileProps {
   children: React.ReactNode;
   metadata?: MetadataProps;
   disabled?: boolean;
+  disableBorder?: boolean;
 }
 
-export function FullscreenChartTile({ children, metadata, disabled }: FullscreenChartTileProps) {
+export function FullscreenChartTile({ children, metadata, disabled, disableBorder }: FullscreenChartTileProps) {
   const [isFullscreen, setIsFullscreen] = useState(false);
   const wasFullscreen = usePrevious(isFullscreen);
   const breakpoints = useBreakpoints();
@@ -36,7 +37,7 @@ export function FullscreenChartTile({ children, metadata, disabled }: Fullscreen
   const label = replaceVariablesInText(isFullscreen ? commonTexts.common.modal_close : commonTexts.common.modal_open, { subject: commonTexts.common.grafiek_singular });
 
   const tile = (
-    <Tile hasNoBorder={isFullscreen} height="100%">
+    <Tile hasNoBorder={isFullscreen || disableBorder} height="100%">
       <Box
         paddingX={isFullscreen ? { _: space[3], sm: space[4] } : undefined}
         paddingY={isFullscreen ? { _: space[2], sm: space[3] } : undefined}

packages/app/src/pages/over.tsx

@@ -1,44 +1,55 @@
-import css from '@styled-system/css';
 import Head from 'next/head';
 import styled from 'styled-components';
 import { Box } from '~/components/base';
+import { ContentImage } from '~/components/cms/content-image';
 import { RichContent } from '~/components/cms/rich-content';
+import { FullscreenChartTile } from '~/components/fullscreen-chart-tile';
 import { Heading } from '~/components/typography';
-import { Content } from '~/domain/layout/content';
 import { Layout } from '~/domain/layout/layout';
 import { useIntl } from '~/intl';
-import {
-  createGetStaticProps,
-  StaticProps,
-} from '~/static-props/create-get-static-props';
-import {
-  createGetContent,
-  getLastGeneratedDate,
-} from '~/static-props/get-data';
-import { RichContentBlock } from '~/types/cms';
+import { createGetStaticProps, StaticProps } from '~/static-props/create-get-static-props';
+import { createGetContent, getLastGeneratedDate } from '~/static-props/get-data';
+import { mediaQueries, sizes, space } from '~/style/theme';
+import { ImageBlock, RichContentBlock } from '~/types/cms';
 interface OverData {
   title: string | null;
-  description: RichContentBlock[] | null;
+  intro: RichContentBlock[];
+  description: RichContentBlock[];
+  timelineImage: ImageBlock;
 }
 
 export const getStaticProps = createGetStaticProps(
   getLastGeneratedDate,
   createGetContent<OverData>((context) => {
     const { locale = 'nl' } = context;
-    return `
-    *[_type == 'overDitDashboard']{
-      ...,
-      "description": {
-        "_type": description._type,
-        "${locale}": [
-          ...description.${locale}[]
-          {
-            ...,
-            "asset": asset->
-           },
-        ]
+    return `// groq
+      *[_type == 'overDitDashboard' && !(_id in path('drafts.**'))][0]{
+        ...,
+        "description": {
+          "_type": description._type,
+          "${locale}": [
+            ...description.${locale}[]{
+              ...,
+              "asset": asset->
+            },
+          ]
+        },
+        "intro": {
+          "_type": intro._type,
+          "${locale}": [
+            ...intro.${locale}[]{
+              ...,
+              "asset": asset->
+            },
+          ]
+        },
+        "timelineImage": {
+          "_type": timelineImage._type,
+          "${locale}": {
+            ...timelineImage.${locale},
+          },
+        }
       }
-    }[0]
     `;
   })
 );
@@ -49,39 +60,49 @@ const Over = (props: StaticProps<typeof getStaticProps>) => {
 
   return (
     <Layout {...commonTexts.over_metadata} lastGenerated={lastGenerated}>
-      <Head>
-        <link
-          key="dc-type"
-          rel="dcterms:type"
-          href="https://standaarden.overheid.nl/owms/terms/webpagina"
-        />
-        <link
-          key="dc-type-title"
-          rel="dcterms:type"
-          href="https://standaarden.overheid.nl/owms/terms/webpagina"
-          title="webpagina"
-        />
-      </Head>
+      <Box margin={`${space[5]} auto`} maxWidth={`${sizes.maxWidth}px`} padding={` 0 ${space[4]}`}>
+        <Head>
+          <link key="dc-type" rel="dcterms:type" href="https://standaarden.overheid.nl/owms/terms/webpagina" />
+          <link key="dc-type-title" rel="dcterms:type" href="https://standaarden.overheid.nl/owms/terms/webpagina" title="webpagina" />
+        </Head>
 
-      <Content>
-        <Box spacing={4}>
-          {content.title && <Heading level={1}>{content.title}</Heading>}
-          {content.description && (
-            <RichContent
-              blocks={content.description}
-              contentWrapper={RichContentWrapper}
-            />
-          )}
+        <Box textVariant="body1" bg="white">
+          <Box paddingBottom={space[5]}>
+            <Box marginBottom={space[4]} maxWidth={sizes.maxWidthText}>
+              <Heading level={1}>{content.title}</Heading>
+            </Box>
+            <TwoColumnLayout>
+              <div>
+                <RichContent blocks={content.intro} contentWrapper={RichContentWrapper} />
+                <FullscreenChartTile disableBorder>
+                  <Box marginTop={space[2]}>
+                    <ContentImage node={content.timelineImage} contentWrapper={RichContentWrapper} enableShadow />
+                  </Box>
+                </FullscreenChartTile>
+              </div>
+              <div>
+                <RichContent blocks={content.description} contentWrapper={RichContentWrapper} />
+              </div>
+            </TwoColumnLayout>
+          </Box>
         </Box>
-      </Content>
+      </Box>
     </Layout>
   );
 };
 
-const RichContentWrapper = styled.div(
-  css({
-    width: '100%',
-  })
-);
-
 export default Over;
+
+const RichContentWrapper = styled('div')`
+  width: 100%;
+`;
+
+const TwoColumnLayout = styled(Box)`
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: ${space[4]} ${space[5]};
+
+  @media ${mediaQueries.sm} {
+    grid-template-columns: 1fr 1fr;
+  }
+`;

packages/cms/src/schemas/documents/pages/about.ts

@@ -12,10 +12,22 @@ export const about = defineType({
       title: 'Titel',
       validation: localeStringValidation((rule) => rule.required()),
     }),
+    defineField({
+      name: 'intro',
+      type: 'localeBlock',
+      title: 'Introductie (linkerkolom)',
+      validation: localeValidation((rule) => rule.required()),
+    }),
+    defineField({
+      name: 'timelineImage',
+      type: 'localeImage',
+      title: 'Afbeelding tijdslijn',
+      validation: localeValidation((rule) => rule.required()),
+    }),
     defineField({
       name: 'description',
       type: 'localeBlock',
-      title: 'Beschrijving',
+      title: 'Beschrijving (rechterkolom)',
       validation: localeValidation((rule) => rule.required()),
     }),
   ],

packages/cms/src/schemas/index.ts

@@ -38,11 +38,12 @@ import { block } from './locale/block';
 import { richContentBlock } from './locale/rich-content-block';
 import { string } from './locale/string';
 import { text } from './locale/text';
+import { image } from './locale/image';
 import { inlineBlock } from './objects/inline-block';
 import { inlineCollapsible } from './objects/inline-collapsible';
 import { link } from './objects/link';
 
-const localeSpecificSchemas = [block, richContentBlock, string, text];
+const localeSpecificSchemas = [block, richContentBlock, string, text, image];
 const richContentSchemas = [inlineBlock, inlineCollapsible];
 const documentSchemas = [
   advice,

packages/cms/src/schemas/locale/image.ts

@@ -0,0 +1,38 @@
+import { StringRule, defineField, defineType } from 'sanity';
+import { supportedLanguages } from '../../studio/i18n';
+import { BsCardImage } from 'react-icons/bs';
+
+export const image = defineType({
+  name: 'localeImage',
+  type: 'object',
+  title: 'Locale Image Content',
+  fields: supportedLanguages.map(({ title, id }) =>
+    defineField({
+      title,
+      name: id,
+      type: 'image',
+      icon: BsCardImage,
+      initialValue: {
+        isFullWidth: true,
+      },
+      fields: [
+        defineField({
+          name: 'alt',
+          title: 'Alternatieve tekst (toegankelijkheid)',
+          type: 'string',
+          validation: (rule: StringRule) => rule.required().error('Alt text is verplicht'),
+        }),
+        defineField({
+          name: 'isFullWidth',
+          title: 'Afbeelding breed weergeven?',
+          type: 'boolean',
+        }),
+        defineField({
+          name: 'caption',
+          title: 'Onderschrift',
+          type: 'text',
+        }),
+      ],
+    })
+  ),
+});