aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/templates/layout
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/templates/layout')
-rw-r--r--src/components/templates/layout/layout.module.scss13
-rw-r--r--src/components/templates/layout/layout.test.tsx14
-rw-r--r--src/components/templates/layout/layout.tsx25
3 files changed, 10 insertions, 42 deletions
diff --git a/src/components/templates/layout/layout.module.scss b/src/components/templates/layout/layout.module.scss
index 03276bf..69c4ef0 100644
--- a/src/components/templates/layout/layout.module.scss
+++ b/src/components/templates/layout/layout.module.scss
@@ -90,19 +90,6 @@
flex: 1;
}
-.article {
- &--grid {
- @extend %grid;
-
- grid-auto-flow: column dense;
- align-items: baseline;
- }
-
- &--padding {
- padding-bottom: var(--spacing-lg);
- }
-}
-
.footer {
display: flex;
flex-flow: column wrap;
diff --git a/src/components/templates/layout/layout.test.tsx b/src/components/templates/layout/layout.test.tsx
index 6a257f0..d3abe1d 100644
--- a/src/components/templates/layout/layout.test.tsx
+++ b/src/components/templates/layout/layout.test.tsx
@@ -1,5 +1,5 @@
import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
+import { render, screen as rtlScreen } from '../../../../tests/utils';
import { Layout } from './layout';
const body =
@@ -8,28 +8,28 @@ const body =
describe('Layout', () => {
it('renders the website header', () => {
render(<Layout>{body}</Layout>);
- expect(screen.getByRole('banner')).toBeInTheDocument();
+ expect(rtlScreen.getByRole('banner')).toBeInTheDocument();
});
it('renders the website main content', () => {
render(<Layout>{body}</Layout>);
- expect(screen.getByRole('main')).toBeInTheDocument();
+ expect(rtlScreen.getByRole('main')).toBeInTheDocument();
});
it('renders the website footer', () => {
render(<Layout>{body}</Layout>);
- expect(screen.getByRole('contentinfo')).toBeInTheDocument();
+ expect(rtlScreen.getByRole('contentinfo')).toBeInTheDocument();
});
it('renders a skip to content link', () => {
render(<Layout>{body}</Layout>);
expect(
- screen.getByRole('link', { name: 'Skip to content' })
+ rtlScreen.getByRole('link', { name: 'Skip to content' })
).toBeInTheDocument();
});
- it('renders an article', () => {
+ it('renders its body', () => {
render(<Layout>{body}</Layout>);
- expect(screen.getByRole('article')).toHaveTextContent(body);
+ expect(rtlScreen.getByText(body)).toBeInTheDocument();
});
});
diff --git a/src/components/templates/layout/layout.tsx b/src/components/templates/layout/layout.tsx
index 055b1a1..953b0db 100644
--- a/src/components/templates/layout/layout.tsx
+++ b/src/components/templates/layout/layout.tsx
@@ -65,14 +65,6 @@ export type LayoutProps = {
* @default false
*/
isHome?: boolean;
- /**
- * Determine if article has a comments section.
- */
- withExtraPadding?: boolean;
- /**
- * Determine if article should use grid. Default: false.
- */
- useGrid?: boolean;
};
/**
@@ -80,17 +72,10 @@ export type LayoutProps = {
*
* Render the base layout used by all pages.
*/
-export const Layout: FC<LayoutProps> = ({
- children,
- withExtraPadding = false,
- isHome,
- useGrid = false,
-}) => {
+export const Layout: FC<LayoutProps> = ({ children, isHome }) => {
const router = useRouter();
const intl = useIntl();
const { baseline, copyright, locales, name, url } = CONFIG;
- const articleGridClass = useGrid ? 'article--grid' : '';
- const articleCommentsClass = withExtraPadding ? 'article--padding' : '';
const skipToContent = intl.formatMessage({
defaultMessage: 'Skip to content',
@@ -455,11 +440,7 @@ export const Layout: FC<LayoutProps> = ({
</div>
</Header>
<Main id="main" className={styles.main}>
- <article
- className={`${styles[articleGridClass]} ${styles[articleCommentsClass]}`}
- >
- {children}
- </article>
+ {children}
</Main>
<Footer className={styles.footer}>
<Colophon
@@ -495,5 +476,5 @@ export const Layout: FC<LayoutProps> = ({
*/
export const getLayout = (
page: ReactElement,
- props: NextPageWithLayoutOptions
+ props?: NextPageWithLayoutOptions
) => <Layout {...props}>{page}</Layout>;