refactor(components): integrate sectioned page template into Page

* replace Section component by a generic one (other components should
be able to use it)
* add a PageSection component
* add `hasSections` prop to Page component
* remove sectioned-page template

1 files changed, 31 insertions, 0 deletions

diff --git a/src/components/templates/page/page.test.tsx b/src/components/templates/page/page.test.tsx
index 21c5a86..fb06cb1 100644
--- a/src/components/templates/page/page.test.tsx
+++ b/src/components/templates/page/page.test.tsx
@@ -3,6 +3,8 @@ import { render, screen as rtlScreen } from '../../../../tests/utils';
 import type { BreadcrumbsItem } from '../../organisms';
 import { Page } from './page';
 import { PageBody } from './page-body';
+import { PageSection } from './page-section';
+import { Heading } from 'src/components/atoms';
 
 describe('Page', () => {
   it('renders its children', () => {
@@ -46,4 +48,33 @@ describe('Page', () => {
 
     expect(rtlScreen.getByText(body)).toHaveClass('page--body-last');
   });
+
+  it('can render a sectioned page', () => {
+    const sections = [
+      {
+        heading: 'excepturi ex dolorum',
+        contents:
+          'Id eius voluptas rerum nemo ullam omnis provident deserunt. Expedita sit ut consequatur deleniti. Maiores nam. Necessitatibus pariatur et qui dolor quia labore.',
+      },
+      {
+        heading: 'rerum corporis et',
+        contents:
+          'Vel maxime doloremque quo laborum debitis. Ab perferendis animi dolores et ut voluptatem. Tempore aut doloremque sunt enim aut sint. Quae iure saepe consectetur. Ex animi ut. Nobis aliquid iste accusantium nesciunt ab voluptas illum.',
+      },
+    ];
+
+    render(
+      <Page hasSections>
+        {sections.map((section) => (
+          <PageSection aria-label={section.heading} key={section.heading}>
+            <Heading level={2}>{section.heading}</Heading>
+            <p>{section.contents}</p>
+          </PageSection>
+        ))}
+      </Page>
+    );
+
+    expect(rtlScreen.getAllByRole('region')).toHaveLength(sections.length);
+    expect(rtlScreen.getByRole('article')).toHaveClass('page--full');
+  });
 });