feat(template-pages): added page-body under page-header

nl-design-system · Jan 9, 2025 · 66bc89e · 66bc89e
1 parent db543ab
commit 66bc89e
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 17 deletions.
diff --git a/apps/rhc-templates/src/app/layout.tsx b/apps/rhc-templates/src/app/layout.tsx
@@ -5,7 +5,6 @@ import '@rijkshuisstijl-community/design-tokens/dist/index.css';
 import '@rijkshuisstijl-community/components-css/dist/index.css';
 import '@rijkshuisstijl-community/font/src/index.mjs';
 import '@rijkshuisstijl-community/storybook/src/templates/globals.css';
-import { PageBody } from '@utrecht/page-body-react';
 import { PageLayout } from '@utrecht/page-layout-react';
 import { Root } from '@utrecht/root-react';
 import Head from 'next/head';
@@ -16,9 +15,9 @@ export default function RootLayout({ children }: PropsWithChildren<{}>) {
       <Head>
         <title>Rijkshuisstijl demo - Index</title>
       </Head>
-      <PageBody className="rhc-theme">
+      <body className="rhc-theme">
         <PageLayout>{children}</PageLayout>
-      </PageBody>
+      </body>
     </Root>
   );
 }
diff --git a/packages/storybook/config/preview.tsx b/packages/storybook/config/preview.tsx
@@ -11,7 +11,6 @@ import { defineCustomElements } from '@rijkshuisstijl-community/web-components-s
 import { withThemeByClassName } from '@storybook/addon-themes';
 import { Controls, Description, Primary, Stories, useOf } from '@storybook/blocks';
 import { Preview } from '@storybook/react';
-import { PageBody } from '@utrecht/page-body-react';
 import { PageLayout } from '@utrecht/page-layout-react';
 import { Root } from '@utrecht/root-react';
 import { defineCustomElements as defineUtrechtCustomElements } from '@utrecht/web-component-library-stencil/loader/index';
@@ -36,9 +35,7 @@ const preview: Preview = {
     (Story, options) => {
       return options.parameters['isPage'] ? (
         <Root Component="div">
-          <PageBody>
-            <PageLayout>{Story()}</PageLayout>
-          </PageBody>
+          <PageLayout>{Story()}</PageLayout>
         </Root>
       ) : (
         Story()

diff --git a/packages/storybook/src/templates/collage/index.tsx b/packages/storybook/src/templates/collage/index.tsx
@@ -38,6 +38,7 @@ import {
   UnorderedListItem,
 } from '@rijkshuisstijl-community/components-react';
 import { IconArrowRight, IconCalendarEvent } from '@tabler/icons-react/dist/esm/tabler-icons-react';
+import { PageBody } from '@utrecht/page-body-react';
 
 export default function Collage() {
   return (
@@ -56,7 +57,7 @@ export default function Collage() {
           ]}
         ></NavBar>
       </PageHeader>
-      <main className="rhc-templates-page">
+      <PageBody className="rhc-templates-page">
         <div className="rhc-templates-background-color-white">
           <div className="rhc-templates-main-content">
             <div className="utrecht-page-content rhc-templates-page-content">
@@ -272,7 +273,7 @@ export default function Collage() {
             </div>
           </div>
         </div>
-      </main>
+      </PageBody>
     </>
   );
 }
diff --git a/packages/storybook/src/templates/details/index.tsx b/packages/storybook/src/templates/details/index.tsx
@@ -16,6 +16,7 @@ import {
   SubNavBar,
 } from '@rijkshuisstijl-community/components-react';
 import { ColumnLayout } from '@utrecht/component-library-react';
+import { PageBody } from '@utrecht/page-body-react';
 
 export default function Details() {
   return (
@@ -34,7 +35,7 @@ export default function Details() {
           ]}
         ></NavBar>
       </PageHeader>
-      <div className="rhc-templates-page">
+      <PageBody className="rhc-templates-page">
         <Hero
           className="rhc-hero-details-template"
           imageAlt="Tullip field"
@@ -196,7 +197,7 @@ export default function Details() {
             },
           ]}
         ></Footer>
-      </div>
+      </PageBody>
     </>
   );
 }
diff --git a/packages/storybook/src/templates/form/index.tsx b/packages/storybook/src/templates/form/index.tsx
@@ -23,6 +23,7 @@ import {
   PageHeader,
   Paragraph,
 } from '@rijkshuisstijl-community/components-react';
+import { PageBody } from '@utrecht/page-body-react';
 
 export default function Form() {
   return (
@@ -42,7 +43,7 @@ export default function Form() {
           ]}
         ></NavBar>
       </PageHeader>
-      <main className="rhc-templates-page">
+      <PageBody className="rhc-templates-page">
         <div className="rhc-templates-background-color-white rhc-templates-main-content">
           <PageContent className="rhc-templates-page-content rhc-templates-background-color-white">
             <Article>
@@ -226,7 +227,7 @@ export default function Form() {
             },
           ]}
         ></Footer>
-      </main>
+      </PageBody>
     </>
   );
 }
diff --git a/packages/storybook/src/templates/mijn-omgeving/index.tsx b/packages/storybook/src/templates/mijn-omgeving/index.tsx
@@ -21,6 +21,7 @@ import {
   SideNavLink,
   SideNavList,
 } from '@rijkshuisstijl-community/components-react';
+import { PageBody } from '@utrecht/page-body-react';
 
 export default function MijnOmgeving() {
   return (
@@ -39,7 +40,7 @@ export default function MijnOmgeving() {
           ]}
         ></NavBar>
       </PageHeader>
-      <main className="rhc-templates-page  rhc-templates-background-color-white">
+      <PageBody className="rhc-templates-page  rhc-templates-background-color-white">
         <PageContent className="rhc-templates-page-container">
           <SideNav className={'rhc-side-nav'}>
             <SideNavList>
@@ -265,7 +266,7 @@ export default function MijnOmgeving() {
             },
           ]}
         ></Footer>
-      </main>
+      </PageBody>
     </>
   );
 }
diff --git a/packages/storybook/src/templates/rich-text/index.tsx b/packages/storybook/src/templates/rich-text/index.tsx
@@ -32,6 +32,7 @@ import {
   UnorderedList,
   UnorderedListItem,
 } from '@rijkshuisstijl-community/components-react';
+import { PageBody } from '@utrecht/page-body-react';
 
 export default function Page() {
   return (
@@ -50,7 +51,7 @@ export default function Page() {
           ]}
         ></NavBar>
       </PageHeader>
-      <main className="rhc-templates-page">
+      <PageBody className="rhc-templates-page">
         <div className="rhc-templates-main-content">
           <PageContent className="rhc-templates-page-content rhc-templates-background-color-white">
             <Article>
@@ -292,7 +293,7 @@ export default function Page() {
             },
           ]}
         />
-      </main>
+      </PageBody>
     </>
   );
 }