Page

1import { type HTMLAttributes } from "react";
2import { getClassName } from "@behivetech/get-class-name";
3import styles from "./page.module.scss";
4
5export interface PageProps extends HTMLAttributes<HTMLDivElement> {
6  /** Document title rendered into a `<title>` tag */
7  title?: string;
8  /** Meta description rendered into a `<meta name="description">` tag */
9  description?: string;
10  /** Additional class names to merge with the component root element */
11  className?: string;
12  /** Page content */
13  children?: React.ReactNode;
14}
15
16export const Page = ({
17  title,
18  description,
19  className,
20  children,
21  ...rest
22}: PageProps) => {
23  const [rootClass] = getClassName({
24    className,
25    rootClass: "BHT__Page",
26    styles,
27  });
28
29  return (
30    <>
31      {title && <title>{title}</title>}
32      {description && <meta name="description" content={description} />}
33      <div {...rest} className={rootClass}>
34        {children}
35      </div>
36    </>
37  );
38};

1.BHT__Page {
2  min-height: 100vh;
3  width: 100%;
4}

1export { Page } from "./page.js";
2export type { PageProps } from "./page.js";

1import { Page } from "./page.js";
2
3export const BasicPage = () => (
4  <Page
5    title="Example Page"
6    description="An example page using the Page template"
7  >
8    <h1>Welcome</h1>
9    <p>This page has no extra margin, padding, or border around it.</p>
10  </Page>
11);

1import { render, screen } from "@testing-library/react";
2import { Page } from "./page.js";
3
4describe("Page", () => {
5  it("renders children", () => {
6    render(<Page>Hello</Page>);
7    expect(screen.getByText("Hello")).toBeTruthy();
8  });
9
10  it("applies additional className", () => {
11    render(<Page className="custom">Content</Page>);
12    expect(screen.getByText("Content").className).toContain("custom");
13  });
14
15  it("renders title when provided", () => {
16    render(<Page title="Test Page">Content</Page>);
17    expect(document.title).toBe("Test Page");
18  });
19
20  it("renders meta description when provided", () => {
21    render(<Page description="A test description">Content</Page>);
22    const meta = document.querySelector('meta[name="description"]');
23    expect(meta?.getAttribute("content")).toBe("A test description");
24  });
25});