diff --git a/Documentation/Common/page.md b/Documentation/Common/page.md index c9d5d10..5a88d98 100644 --- a/Documentation/Common/page.md +++ b/Documentation/Common/page.md @@ -28,20 +28,31 @@ function MyPage() { } ``` +## Showing the Title + +By default the title is not rendered. Pass `showTitle` to opt in: + +```typescript + +
Page content goes here
+
+``` + ## With Panel Styling ```typescript - +
Content with panel background
``` ## Props -- `title`: Page title displayed at the top -- `panel`: Apply panel styling to content area (default: false) +- `title`: Page title string (always required, used e.g. for accessibility or document title even when not visible) +- `showTitle`: Render the title as a visible heading (default: `false`) +- `panel`: Apply panel styling to content area (default: `false`) - `children`: Page content -- All standard HTML div attributes (className, style, etc.) +- All standard HTML div attributes (`className`, `style`, etc.) ## Layout diff --git a/Source/Common/Page.stories.tsx b/Source/Common/Page.stories.tsx index 8534327..747a3fd 100644 --- a/Source/Common/Page.stories.tsx +++ b/Source/Common/Page.stories.tsx @@ -41,3 +41,31 @@ export const WithPanel: Story = {
) }; + +export const WithTitle: Story = { + args: { + title: 'Visible Page Title', + showTitle: true, + }, + render: (args) => ( + +
+

The title is shown above because showTitle is true.

+
+
+ ) +}; + +export const WithoutTitle: Story = { + args: { + title: 'Hidden Page Title', + showTitle: false, + }, + render: (args) => ( + +
+

The title is hidden because showTitle is false (the default).

+
+
+ ) +}; diff --git a/Source/Common/Page.tsx b/Source/Common/Page.tsx index 1ea5ded..6b1f50f 100644 --- a/Source/Common/Page.tsx +++ b/Source/Common/Page.tsx @@ -5,14 +5,15 @@ import { HTMLAttributes, ReactNode } from 'react'; export interface PageProps extends HTMLAttributes { title: string; + showTitle?: boolean; children?: ReactNode; panel?: boolean } -export const Page = ({ title, children, panel, ...rest }: PageProps) => { +export const Page = ({ title, showTitle = false, children, panel, ...rest }: PageProps) => { return (
-

{title}

+ {showTitle &&

{title}

}
{children}