feat(vth): add page layout components

frameless · Oct 4, 2023 · f3ce621 · f3ce621
1 parent 9abb9e4
commit f3ce621
Show file tree

Hide file tree

Showing 4 changed files with 161 additions and 43 deletions.
diff --git a/apps/vth-frontend/src/app/[locale]/layout.tsx b/apps/vth-frontend/src/app/[locale]/layout.tsx
@@ -1,20 +1,60 @@
 import classnames from 'classnames';
-import { dir } from 'i18next';
-import type { Metadata } from 'next';
+import {dir} from 'i18next';
+import type {Metadata} from 'next';
 import React from 'react';
-import { QueryClientProvider } from '@/client';
-import { Article, Navigation, Page, PageContent, PageHeader } from '@/components';
-import { ClientLanguageSwitcher } from '@/components/ClientLanguageSwitcher';
+import {QueryClientProvider} from '@/client';
+import {Article, Page, PageContent, PageHeader} from '@/components';
 import '@utrecht/component-library-css';
 import '../../styles/globals.css';
 import '@utrecht/design-tokens/dist/index.css';
-import { Footer } from '@/components/Footer';
-import { Logo } from '@/components/Logo';
+import {Footer} from '@/components/Footer';
+import {Grid} from '@/components/Grid';
+import {Logo} from '@/components/Logo';
 import 'react-loading-skeleton/dist/skeleton.css';
-import { useTranslation } from '../i18n/index';
-import { languages } from '../i18n/settings';
+import {useTranslation} from '../i18n/index';
 import '@frameless/ui/dist/bundle.css';
-const Main: React.FC<{ children: React.ReactNode }> = ({ children }) => <main>{children}</main>;
+
+<
+<
+<
+<
+<
+<< HEAD
+  import {Article, Navigation, Page, PageContent, PageHeader} from '@/components';
+
+======
+=
+
+>>>>>>>
+f63dd0e(feat(vth)
+:
+add
+page
+layout
+components
+)
+
+<
+<
+<
+<
+<
+<
+<
+HEAD
+
+======
+=
+
+>>>>>>>
+f63dd0e(feat(vth)
+:
+add
+page
+layout
+components
+)
+const Main: React.FC<{ children: React.ReactNode }> = ({children}) => <main>{children}</main>;
 
 interface LayoutProps {
   children: React.ReactNode;
@@ -64,9 +104,8 @@ const getNavListData = (t: (text: string) => string) => [
   },
 ];
 
-export async function generateMetadata({ params: { locale } }: Params): Promise<Metadata> {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const { t } = await useTranslation(locale, 'common');
+export async function generateMetadata({params: {locale}}: Params): Promise<Metadata> {
+  const {t} = await useTranslation(locale, 'common');
   return {
     title: {
       template: `%s | ${t('website-setting.website-name')}`,
@@ -75,8 +114,8 @@ export async function generateMetadata({ params: { locale } }: Params): Promise<
   };
 }
 
-const RootLayout = async ({ children, params: { locale } }: LayoutProps) => {
-  const { t } = await useTranslation(locale, ['layout']);
+const RootLayout = async ({children, params: {locale}}: LayoutProps) => {
+  const {t} = await useTranslation(locale, ['layout']);
 
   const footerData = {
     title: t('footer.title'),
@@ -164,34 +203,36 @@ const RootLayout = async ({ children, params: { locale } }: LayoutProps) => {
   };
   return (
     <html lang={locale} dir={dir(locale)}>
-      <body className={classnames('utrecht-theme', 'utrecht-document')} suppressHydrationWarning={true}>
-        <QueryClientProvider>
-          <Page className="utrecht-main-wrapper">
-            <PageHeader>
-              <div className="utrecht-header">
-                <Logo locale={locale} />
-                <div className="utrecht-nav__content" hidden>
-                  <ClientLanguageSwitcher locales={languages} currentLocale={locale} />
-                </div>
-              </div>
-            </PageHeader>
-            <Navigation
-              list={getNavListData(t)}
-              mobileBreakpoint={998}
-              toggleButton={{
-                openText: 'Menu',
-                closeText: 'Sluiten',
-              }}
-            />
-            <PageContent className="utrecht-page-content--modifier" style={{ position: 'relative' }}>
-              <Main>
-                <Article>{children}</Article>
-              </Main>
-            </PageContent>
-            <Footer data={footerData} />
-          </Page>
-        </QueryClientProvider>
-      </body>
+    <body
+      className={classnames('utrecht-theme', 'utrecht-document', 'utrecht-surface')}
+      suppressHydrationWarning={true}
+    >
+    <QueryClientProvider>
+      <Page className="utrecht-page--full-width">
+        <PageHeader>
+          <Grid>
+            <Logo locale={locale}/>
+          </Grid>
+        </PageHeader>
+        <Navigation
+          list={getNavListData(t)}
+          mobileBreakpoint={998}
+          toggleButton={{
+            openText: 'Menu',
+            closeText: 'Sluiten',
+          }}
+        />
+        <PageContent>
+          <Grid>
+            <Main>
+              <Article>{children}</Article>
+            </Main>
+          </Grid>
+        </PageContent>
+        <Footer data={footerData}/>
+      </Page>
+    </QueryClientProvider>
+    </body>
     </html>
   );
 };

diff --git a/apps/vth-frontend/src/components/Grid/index.style.css b/apps/vth-frontend/src/components/Grid/index.style.css
@@ -0,0 +1,34 @@
+.utrecht-grid {
+  display: grid;
+  max-width: 70rem;
+  grid-template-columns: repeat(4, 1fr);
+  grid-column-gap: 0.5rem;
+  padding-block-start: 1rem;
+  padding-inline-start: 1rem;
+  padding-inline-end: 1rem;
+  padding-block-end: 0;
+}
+
+@container (min-width: 22.5rem) {
+}
+
+@container (min-width: 40rem) {
+  .utrecht-grid {
+    grid-column-gap: 1rem;
+    padding-block-start: 2rem;
+    padding-inline-start: 2rem;
+    padding-inline-end: 2rem;
+  }
+}
+
+@container (min-width: 60rem) {
+  .utrecht-grid {
+    grid-template-columns: repeat(12, 1fr);
+  }
+}
+
+@container (min-width: 70rem) {
+  .utrecht-grid {
+    grid-column-gap: 2rem;
+  }
+}
diff --git a/apps/vth-frontend/src/components/Grid/index.tsx b/apps/vth-frontend/src/components/Grid/index.tsx
@@ -0,0 +1,7 @@
+import clsx from 'clsx';
+import React, { FC, HTMLAttributes } from 'react';
+import './index.style.css';
+
+type GridProps = HTMLAttributes<HTMLDivElement>;
+
+export const Grid: FC<GridProps> = (props) => <div {...props} className={clsx('utrecht-grid', props.className)}></div>;
diff --git a/apps/vth-frontend/src/styles/globals.css b/apps/vth-frontend/src/styles/globals.css
@@ -2,6 +2,12 @@ html,
 body {
   --utrecht-space-around: 1;
   --utrecht-list-social-margin-block-start: 24px;
+  --utrecht-page-header-background-color: var(--utrecht-color-white);
+  --utrecht-page-header-max-width: 70rem;
+  --utrecht-page-content-background-color: var(--utrecht-color-white);
+  --utrecht-page-content-max-width: 70rem;
+  --utrecht-page-marin-inline-end: 0;
+  --utrecht-page-margin-inline-start: 0;
 
   /* --- navigation tokens start --- */
 
@@ -91,3 +97,33 @@ a {
 * {
   box-sizing: border-box;
 }
+
+/* Overrides for Utrecht components */
+
+.utrecht-page--full-width {
+  --utrecht-page-margin-inline-start: 0;
+  --utrecht-page-margin-inline-end: 0;
+}
+
+.utrecht-page-header {
+  --utrecht-page-header-padding-block-start: 0;
+  --utrecht-page-header-padding-block-end: 0;
+  --utrecht-page-padding-inline-start: 0;
+  --utrecht-page-padding-inline-end: 0;
+
+  container-type: inline-size;
+  max-width: var(--utrecht-page-header-max-width);
+  margin-inline: auto;
+}
+
+.utrecht-page-content {
+  --utrecht-page-content-padding-block-start: 0;
+  --utrecht-page-content-padding-block-end: 0;
+  --utrecht-page-padding-inline-start: 0;
+  --utrecht-page-padding-inline-end: 0;
+
+  background-color: var(--utrecht-page-content-background-color);
+  container-type: inline-size;
+  max-width: var(--utrecht-page-content-max-width);
+  margin-inline: auto;
+}