feat(pdc-frontend): create pageTitle component

frameless · Sep 11, 2023 · d92d958 · d92d958
1 parent 4a835c7
commit d92d958
Show file tree

Hide file tree

Showing 11 changed files with 42 additions and 21 deletions.
diff --git a/apps/pdc-frontend/src/app/[locale]/[...not-found]/page.tsx b/apps/pdc-frontend/src/app/[locale]/[...not-found]/page.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from '@/app/i18n';
-import { Heading1 } from '@/components';
 import { Breadcrumbs } from '@/components/Breadcrumb';
 import { Markdown } from '@/components/Markdown';
+import { PageTitle } from '@/components/PageTitle';
 import { GET_NOT_FOUND_PAGE } from '@/query';
 import { createStrapiURL } from '@/util/createStrapiURL';
 import { fetchData } from '@/util/fetchData';
@@ -25,7 +25,7 @@ const NotFoundPage = async ({ params: { locale } }: { params: { locale: string }
           },
         ]}
       />
-      <Heading1>{data?.notFoundPage?.data?.attributes?.title}</Heading1>
+      <PageTitle>{data?.notFoundPage?.data?.attributes?.title}</PageTitle>
       <Markdown strapiBackendURL={process.env.STRAPI_PUBLIC_URL}>{data?.notFoundPage?.data?.attributes?.body}</Markdown>
     </div>
   );

diff --git a/apps/pdc-frontend/src/app/[locale]/error.tsx b/apps/pdc-frontend/src/app/[locale]/error.tsx
@@ -2,8 +2,9 @@
 
 import { useParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
-import { Button, Heading1, Paragraph } from '@/components';
+import { Button, Paragraph } from '@/components';
 import { Breadcrumbs } from '@/components/Breadcrumb';
+import { PageTitle } from '@/components/PageTitle';
 import { useTranslation } from '../i18n/client';
 import { fallbackLng } from '../i18n/settings';
 interface ErrorPageProps {
@@ -30,7 +31,7 @@ export default function Error({ error, reset }: ErrorPageProps) {
           },
         ]}
       />
-      <Heading1>{t('common.title')}</Heading1>
+      <PageTitle>{t('common.title')}</PageTitle>
       {process.env.NODE_ENV === 'production' && <Paragraph>{t('common.body')}</Paragraph>}
       <Paragraph>{process.env.NODE_ENV === 'development' && errorMessage?.message}</Paragraph>
       <Paragraph />

diff --git a/apps/pdc-frontend/src/app/[locale]/not-found.tsx b/apps/pdc-frontend/src/app/[locale]/not-found.tsx
@@ -1,7 +1,7 @@
 import { cookies } from 'next/headers';
-import { Heading1 } from '@/components';
 import { Breadcrumbs } from '@/components/Breadcrumb';
 import { Markdown } from '@/components/Markdown';
+import { PageTitle } from '@/components/PageTitle';
 import { GET_NOT_FOUND_PAGE } from '@/query';
 import { createStrapiURL } from '@/util/createStrapiURL';
 import { fetchData } from '@/util/fetchData';
@@ -28,7 +28,7 @@ const NotFoundPage = async () => {
           },
         ]}
       />
-      <Heading1>{data?.notFoundPage?.data?.attributes?.title}</Heading1>
+      <PageTitle>{data?.notFoundPage?.data?.attributes?.title}</PageTitle>
       <Markdown strapiBackendURL={process.env.STRAPI_PUBLIC_URL}>{data?.notFoundPage?.data?.attributes?.body}</Markdown>
     </div>
   );

diff --git a/apps/pdc-frontend/src/app/[locale]/page.tsx b/apps/pdc-frontend/src/app/[locale]/page.tsx
@@ -1,7 +1,8 @@
 import { Metadata } from 'next';
-import { Heading1, Heading2 } from '@/components';
+import { Heading2 } from '@/components';
 import { BottomBar, BottomBarItem } from '@/components/BottomBar';
 import { Breadcrumbs } from '@/components/Breadcrumb';
+import { PageTitle } from '@/components/PageTitle';
 import { ProductNavigation } from '@/components/ProductNavigation';
 import { alphabet } from '@/components/ProductNavigation/alphabet';
 import { ReactionLink } from '@/components/ReactionLink';
@@ -101,7 +102,7 @@ const Home = async ({ params: { locale } }: { params: any }) => {
           },
         ]}
       />
-      <Heading1>{t('h1')}</Heading1>
+      <PageTitle>{t('h1')}</PageTitle>
       {/* TODO: Create a responsive layout component*/}
       <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px', boxSizing: 'border-box' }}>
         <div style={{ width: '75%' }}>

diff --git a/apps/pdc-frontend/src/app/[locale]/products/[slug]/page.tsx b/apps/pdc-frontend/src/app/[locale]/products/[slug]/page.tsx
@@ -10,7 +10,6 @@ import {
   Article,
   ButtonLink,
   Heading,
-  Heading1,
   Paragraph,
   SpotlightSection,
   UtrechtDigidLogo,
@@ -23,6 +22,7 @@ import { BottomBar, BottomBarItem } from '@/components/BottomBar';
 import { Breadcrumbs } from '@/components/Breadcrumb';
 import { FAQSection } from '@/components/FAQSection';
 import { Markdown } from '@/components/Markdown';
+import { PageTitle } from '@/components/PageTitle';
 import { PreviewAlert } from '@/components/PreviewAlert';
 import { ReactionLink } from '@/components/ReactionLink';
 import { ScrollToTopButton } from '@/components/ScrollToTopButton';
@@ -291,7 +291,7 @@ const Product = async ({ params: { locale, slug }, searchParams }: ProductProps)
             message={t('preview-alert.message')}
           />
         )}
-        <Heading1>{product?.attributes.title}</Heading1>
+        <PageTitle>{product?.attributes.title}</PageTitle>
         <Sections />
       </Article>
       <BottomBar>

diff --git a/apps/pdc-frontend/src/app/[locale]/products/alphabet/[q]/page.tsx b/apps/pdc-frontend/src/app/[locale]/products/alphabet/[q]/page.tsx
@@ -1,8 +1,9 @@
 import type { Metadata } from 'next';
 import { useTranslation } from '@/app/i18n';
-import { Article, Heading1, HeadingGroup, Paragraph } from '@/components';
+import { Article, Paragraph } from '@/components';
 import { BottomBar, BottomBarItem } from '@/components/BottomBar';
 import { Breadcrumbs } from '@/components/Breadcrumb';
+import { PageTitle } from '@/components/PageTitle';
 import { ProductListContainer } from '@/components/ProductListContainer';
 import { ProductNavigation } from '@/components/ProductNavigation';
 import { alphabet } from '@/components/ProductNavigation/alphabet';
@@ -133,10 +134,8 @@ const ProductsAlphabetPage = async ({ params: { locale, q } }: Params) => {
         ]}
       />
       <Article>
-        <HeadingGroup>
-          <Heading1>{t('h1')}</Heading1>
-          <Paragraph lead>{t('lead-paragraph')}</Paragraph>
-        </HeadingGroup>
+        <PageTitle>{t('h1')}</PageTitle>
+        <Paragraph lead>{t('lead-paragraph')}</Paragraph>
         <ProductNavigation component="button" currentLetter={q.toLocaleUpperCase()} alphabet={alphabetAvailability} />
         {mappingProducts(res.data) && mappingProducts(res.data).length > 0 ? (
           <ProductListContainer

diff --git a/apps/pdc-frontend/src/app/[locale]/products/page.tsx b/apps/pdc-frontend/src/app/[locale]/products/page.tsx
@@ -1,7 +1,8 @@
 import { Metadata } from 'next';
-import { Article, Heading1 } from '@/components';
+import { Article } from '@/components';
 import { BottomBar, BottomBarItem } from '@/components/BottomBar';
 import { Breadcrumbs } from '@/components/Breadcrumb';
+import { PageTitle } from '@/components/PageTitle';
 import { ProductListContainer } from '@/components/ProductListContainer';
 import { ReactionLink } from '@/components/ReactionLink';
 import { ScrollToTopButton } from '@/components/ScrollToTopButton';
@@ -107,7 +108,7 @@ const Products = async ({ params: { locale } }: { params: any }) => {
         ]}
       />
       <Article>
-        <Heading1>{t('h1')}</Heading1>
+        <PageTitle>{t('h1')}</PageTitle>
         {mappingProducts(res.data) && mappingProducts(res.data).length > 0 && (
           <ProductListContainer
             locale={locale}

diff --git a/apps/pdc-frontend/src/app/[locale]/search/[query]/page.tsx b/apps/pdc-frontend/src/app/[locale]/search/[query]/page.tsx
@@ -1,8 +1,9 @@
 import { Metadata } from 'next';
 import { redirect } from 'next/navigation';
-import { Article, Heading1 } from '@/components';
+import { Article } from '@/components';
 import { BottomBar, BottomBarItem } from '@/components/BottomBar';
 import { Breadcrumbs } from '@/components/Breadcrumb';
+import { PageTitle } from '@/components/PageTitle';
 import { ProductListContainer } from '@/components/ProductListContainer';
 import { ReactionLink } from '@/components/ReactionLink';
 import { ScrollToTopButton } from '@/components/ScrollToTopButton';
@@ -82,7 +83,7 @@ const Search = async ({ params: { locale, query } }: SearchProps) => {
         ]}
       />
       <Article>
-        <Heading1>{t('h1', { query })}</Heading1>
+        <PageTitle>{t('h1', { query })}</PageTitle>
         <ProductListContainer
           locale={locale}
           total={searchResults.total}

diff --git a/apps/pdc-frontend/src/app/[locale]/search/tips/[query]/page.tsx b/apps/pdc-frontend/src/app/[locale]/search/tips/[query]/page.tsx
@@ -1,9 +1,9 @@
 import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { useTranslation } from '@/app/i18n';
-import { Heading1 } from '@/components';
 import { Breadcrumbs } from '@/components/Breadcrumb';
 import { Markdown } from '@/components/Markdown';
+import { PageTitle } from '@/components/PageTitle';
 import { GET_SEARCH_TIP_PAGE } from '@/query';
 import { createStrapiURL } from '@/util/createStrapiURL';
 import { fetchData } from '@/util/fetchData';
@@ -59,7 +59,7 @@ const SearchTips = async ({ params: { locale, query } }: any) => {
           },
         ]}
       />
-      <Heading1>{`${title} "${query}"`}</Heading1>
+      <PageTitle>{`${title} "${query}"`}</PageTitle>
       <Markdown strapiBackendURL={process.env.STRAPI_PUBLIC_URL}>{body}</Markdown>
     </>
   );

diff --git a/apps/pdc-frontend/src/components/pageTitle/index.module.scss b/apps/pdc-frontend/src/components/pageTitle/index.module.scss
@@ -0,0 +1,4 @@
+.utrecht-page-title {
+  --utrecht-heading-1-margin-block-start: var(--utrecht-space-block-2xl);
+  --utrecht-heading-1-margin-block-end: var(--utrecht-space-block-2xl);
+}
diff --git a/apps/pdc-frontend/src/components/pageTitle/index.tsx b/apps/pdc-frontend/src/components/pageTitle/index.tsx
@@ -0,0 +1,14 @@
+import classnames from 'classnames/bind';
+import React, { PropsWithChildren } from 'react';
+import { Heading1 } from '@/components';
+import styles from './index.module.scss';
+
+const css = classnames.bind(styles);
+
+interface PageTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}
+
+export const PageTitle = ({ children, ...restProps }: PropsWithChildren<PageTitleProps>) => (
+  <Heading1 className={css('utrecht-page-title')} {...restProps}>
+    {children}
+  </Heading1>
+);