Revert "feature/COR-1597-contact-page-improved-design (#4873)"

This reverts commit dae12d5.

packages/app/src/components/typography.tsx

@@ -3,14 +3,7 @@ import css, { CSSProperties } from '@styled-system/css';
 import styled, { DefaultTheme } from 'styled-components';
 import { Preset, preset } from '~/style/preset';
 
-interface AllMarginProps {
-  margin?: CSSProperties['margin'];
-  marginRight?: CSSProperties['marginRight'];
-  marginBottom?: CSSProperties['marginBottom'];
-  marginLeft?: CSSProperties['marginLeft'];
-}
-
-export interface TextProps extends AllMarginProps {
+export interface TextProps {
   variant?: keyof Preset['typography'];
   fontWeight?: keyof DefaultTheme['fontWeights'];
   textTransform?: CSSProperties['textTransform'];
@@ -39,10 +32,6 @@ export const textStyle = (props: TextProps & { as?: string }) => {
     ...(props.textTransform ? { textTransform: props.textTransform } : undefined),
     ...(props.textAlign ? { textAlign: props.textAlign } : undefined),
     ...(props.hyphens ? { hyphens: props.hyphens } : undefined),
-    ...(props.margin ? { margin: props.margin } : undefined),
-    ...(props.marginRight ? { marginRight: props.marginRight } : undefined),
-    ...(props.marginBottom ? { marginBottom: props.marginBottom } : undefined),
-    ...(props.marginLeft ? { marginLeft: props.marginLeft } : undefined),
   });
 };
 

packages/app/src/pages/contact.tsx

@@ -1,82 +1,86 @@
+import css from '@styled-system/css';
 import Head from 'next/head';
 import styled from 'styled-components';
-import { VisuallyHidden } from '~/components';
-import { ContactPageGroup } from '~/components/contact/contact-page-group';
-import { ContactPage } from '~/components/contact/types';
+import { RichContent } from '~/components/cms/rich-content';
 import { Heading } from '~/components/typography';
-import { ContentLayout } from '~/domain/layout/content-layout';
+import { Content } from '~/domain/layout/content';
 import { Layout } from '~/domain/layout/layout';
 import { useIntl } from '~/intl';
-import { StaticProps, createGetStaticProps } from '~/static-props/create-get-static-props';
-import { createGetContent, getLastGeneratedDate } from '~/static-props/get-data';
-import { mediaQueries, space } from '~/style/theme';
+import {
+  createGetStaticProps,
+  StaticProps,
+} from '~/static-props/create-get-static-props';
+import {
+  createGetContent,
+  getLastGeneratedDate,
+} from '~/static-props/get-data';
+import { RichContentBlock } from '~/types/cms';
+
+interface ContactData {
+  title: string | null;
+  description: RichContentBlock[] | null;
+}
 
 export const getStaticProps = createGetStaticProps(
   getLastGeneratedDate,
-  createGetContent<ContactPage>((context) => {
+  createGetContent<ContactData>((context) => {
     const { locale } = context;
 
-    return `// groq
-    *[_type == 'contact'] {
-      'groups': contactPageGroups[]->{
-        'id': _id,
-        'title': title.${locale},
-        'items': contactPageGroupItems[]->{
-          'id': _id,
-          'title': title.${locale},
-          'titleUrl': itemTitleUrl,
-          'linkType': linkType.linkType,
-          'description': description.${locale},
-          'links': contactPageItemLinks[] {
-            'id': _id,
-            'titleAboveLink': title.${locale},
-            'linkType': linkType.linkType,
-            'label': link.title.${locale},
-            'href': link.href      
-          }
-        }
+    return `*[_type == 'contact']{
+      title,
+      "description": {
+        "_type": description._type,
+        "${locale}": [
+          ...description.${locale}[]
+          {
+            ...,
+            "asset": asset->
+           },
+        ]
       }
-    }[0]`;
+    }[0]
+    `;
   })
 );
 
 const Contact = (props: StaticProps<typeof getStaticProps>) => {
   const { commonTexts } = useIntl();
-  const {
-    content: { groups },
-    lastGenerated,
-  } = props;
-
-  const middleIndexOfGroups = Math.ceil(groups.length / 2);
-  const firstHalf = groups.slice(0, middleIndexOfGroups);
-  const secondHalf = groups.slice(middleIndexOfGroups);
+  const { content, lastGenerated } = props;
 
   return (
     <Layout {...commonTexts.contact_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" />
+        <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>
 
-      <VisuallyHidden>
-        <Heading level={1}>Contact</Heading>
-      </VisuallyHidden>
-
-      <ContentLayout>
-        <ContactLayout>
-          <ContactPageGroup groups={firstHalf} />
-          <ContactPageGroup groups={secondHalf} />
-        </ContactLayout>
-      </ContentLayout>
+      <Content>
+        {content.title && <Heading level={1}>{content.title}</Heading>}
+        {content.description && (
+          <RichContent
+            blocks={content.description}
+            contentWrapper={RichContentWrapper}
+          />
+        )}
+      </Content>
     </Layout>
   );
 };
 
-const ContactLayout = styled.div`
-  @media ${mediaQueries.sm} {
-    display: flex;
-    gap: ${space[4]} ${space[5]};
-  }
-`;
+const RichContentWrapper = styled.div(
+  css({
+    maxWidth: 'maxWidthText',
+    width: '100%',
+  })
+);
 
 export default Contact;