DuskMoon workflow duskmoon implemented 6 demos

DmPageHeader

DmPageHeader documents the DmPageHeader export from duskmoon.

Import @duskmoon-dev/components/dm-page-header

2 API sections

12 documented props

4 behavior scenarios

Key API

backClickonBacktitleextrabreadcrumbstyle

Usage

When to use

Use it in DuskMoon application screens that need a packaged, opinionated workflow component.
Reach for the lower-level standard component when the screen needs custom composition.

Implementation notes

Stylesheet Import @duskmoon-dev/components/styles.css once in the app or docs shell.

State Start with default props for static examples, then switch to controlled props when state must be shared.

Theme The preview inherits the active DuskMoon data-theme value from the docs layout.

Features

DuskMoon workflow wrapper

Wraps lower-level primitives into a higher-level DuskMoon-prefixed workflow API.

Application defaults

Examples show the defaults and composition points expected by internal DuskMoon app screens.

Primary API surface

DmPageHeader is most often configured through `backClick`, `onBack`, `title`, `extra`.

Covered behavior

Renders title, body, and Dm page header classes

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Basic usage

authored

Import the component stylesheet and DmPageHeader from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { DmPageHeader } from "@duskmoon-dev/components/dm-page-header";

export function Example() {
  return (<DmPageHeader
  title="DuskMoon"
>
  DuskMoon Dm Page Header
</DmPageHeader>);
}

Preview

Renders title, body, and Dm page header classes

test-backed

DmPageHeader scenario from the component test coverage: renders title, body, and dm page header classes.

Source

import "@duskmoon-dev/components/styles.css";
import { DmPageHeader } from "@duskmoon-dev/components/dm-page-header";

export function DmPageHeaderRendersTitleBodyAndDemo() {
  return (<DmPageHeader
  // Renders title, body, and Dm page header classes
  title="DuskMoon"
>
  DuskMoon Dm Page Header
</DmPageHeader>);
}

Preview

Renders title form items with custom separator

test-backed

DmPageHeader scenario from the component test coverage: renders title form items with custom separator.

Source

import "@duskmoon-dev/components/styles.css";
import { DmPageHeader } from "@duskmoon-dev/components/dm-page-header";

export function DmPageHeaderRendersTitleFormItemsDemo() {
  return (<DmPageHeader
  // Renders title form items with custom separator
  title="DuskMoon"
>
  DuskMoon Dm Page Header
</DmPageHeader>);
}

Preview

Renders back affordance and invokes callback

test-backed

DmPageHeader scenario from the component test coverage: renders back affordance and invokes callback.

Source

import "@duskmoon-dev/components/styles.css";
import { DmPageHeader } from "@duskmoon-dev/components/dm-page-header";

export function DmPageHeaderRendersBackAffordanceAndDemo() {
  return (<DmPageHeader
  // Renders back affordance and invokes callback
  title="DuskMoon"
>
  DuskMoon Dm Page Header
</DmPageHeader>);
}

Preview

Renders breadcrumb and toolbar extra props

test-backed

DmPageHeader scenario from the component test coverage: renders breadcrumb and toolbar extra props.

Source

import "@duskmoon-dev/components/styles.css";
import { DmPageHeader } from "@duskmoon-dev/components/dm-page-header";

export function DmPageHeaderRendersBreadcrumbAndToolbarDemo() {
  return (<DmPageHeader
  // Renders breadcrumb and toolbar extra props
  title="DuskMoon"
>
  DuskMoon Dm Page Header
</DmPageHeader>);
}

Preview

Sunshine Theme

Moonlight Theme

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <DmPageHeader
  title="DuskMoon"
>
  DuskMoon Dm Page Header
</DmPageHeader>
</div>

<div data-theme="moonlight">
  <DmPageHeader
  title="DuskMoon"
>
  DuskMoon Dm Page Header
</DmPageHeader>
</div>

API

The API reference below lists every parsed exported type or interface for DmPageHeader. Start with `backClick`, `onBack`, `title`, `extra` for common usage.

Types: packages/components/src/components/dm-page-header/DmPageHeader.types.ts Scenarios: packages/components/src/components/dm-page-header/DmPageHeader.test.tsx

DmPageHeaderProps interface

Prop	Type	Required	Description
`backClick`	`(event: MouseEvent<HTMLButtonElement>) => void`	No	backClick configures DmPageHeader.
`onBack`	`(event: MouseEvent<HTMLButtonElement>) => void`	No	onBack configures DmPageHeader.
`title`	`ReactNode \| DmPageHeaderTitleItem[]`	No	title configures DmPageHeader.
`extra`	`ReactNode \| DmToolbarProps`	No	extra configures DmPageHeader.
`breadcrumb`	`BreadcrumbProps`	No	breadcrumb configures DmPageHeader.
`className`	`string`	No	className configures DmPageHeader.
`style`	`CSSProperties`	No	style configures DmPageHeader.
`children`	`ReactNode`	No	children configures DmPageHeader.
`titleSeparator`	`ReactNode`	No	titleSeparator configures DmPageHeader.
`backIcon`	`ReactNode`	No	backIcon configures DmPageHeader.

DmPageHeaderTitleItem interface

Prop	Type	Required	Description
`title`	`ReactNode`	Yes	title configures DmPageHeader.
`value`	`ReactNode`	Yes	value configures DmPageHeader.