@olenbetong/appframe-ds 1.0.3 → 1.2.0

package/src/page/PageBlock.tsx

@@ -1,92 +1,92 @@
-import "./PageBlock.css";
-
-import clsx from "clsx";
-import type React from "react";
-
-export const pageBlockWidths = ["text", "md", "lg", "xl", "2xl"] as const;
-
-export type PageBlockWidth = (typeof pageBlockWidths)[number];
-
-export type PageBlockProps = React.HTMLAttributes<HTMLElement> & {
-	/**
-	 * Where a width-constrained block sits in the space available to it.
-	 *
-	 * `center` is the MUI `Container` behaviour. `start` keeps the content against the leading
-	 * edge, which is what the old `PageContainer` did (it forced `margin-left: 0`) and what an app
-	 * with a docked navigation drawer usually wants — centering leaves the content floating away
-	 * from the menu it belongs to.
-	 *
-	 * Has no effect without a `width`, since the block already fills its parent.
-	 * @default "center"
-	 */
-	align?: "center" | "start";
-	/**
-	 * Overrides the rendered element (e.g. `"main"`, `"header"`, `"footer"`)
-	 * @default "div"
-	 */
-	as?: React.ElementType;
-	children?: React.ReactNode;
-	/**
-	 * Fills the remaining space of the parent `Page`. Combine with
-	 * `overflow="auto"` inside `<Page layout="app">` to make the block the
-	 * scroll container.
-	 * @default false
-	 */
-	grow?: boolean;
-	/**
-	 * Adds a standardised responsive inline padding
-	 * @default false
-	 */
-	gutters?: boolean;
-	/**
-	 * Overflow behaviour of the block. Only relevant inside
-	 * `<Page layout="app">`, where scrolling is delegated down the tree.
-	 */
-	overflow?: "auto" | "hidden";
-	/**
-	 * Predefined max-width. Content is horizontally centered.
-	 *
-	 * - `text`: 36rem (576px) — recommended line-length for running text
-	 * - `md`: 48rem (768px)
-	 * - `lg`: 64rem (1024px)
-	 * - `xl`: 80rem (1280px)
-	 * - `2xl`: 90rem (1440px)
-	 *
-	 * @default max-width: 100%
-	 */
-	width?: PageBlockWidth;
-};
-
-/**
- * Layout block for defining max-width, gutters and horizontal centering.
- * Replaces the deprecated `PageContainer` (`maxWidth` mapping: `xs`/`sm` →
- * `text`, `md` → `md`, `lg` → `lg`, `xl` → `xl`, `false` → no `width`).
- */
-export function PageBlock({
-	align,
-	as: Component = "div",
-	children,
-	className,
-	grow,
-	gutters,
-	overflow,
-	width,
-	...props
-}: PageBlockProps) {
-	return (
-		<Component
-			className={clsx(
-				"ObPageBlock-root",
-				width && `ObPageBlock-${width}`,
-				align === "start" && "ObPageBlock-alignStart",
-				gutters && "ObPageBlock-gutters",
-				grow && "ObPageBlock-grow",
-				overflow && `ObPageBlock-overflow${overflow === "auto" ? "Auto" : "Hidden"}`,
-				className,
-			)}
-			{...props}
-		>
-			{children}
-		</Component>
-	);
-}
+import "./PageBlock.css";
+
+import clsx from "clsx";
+import type React from "react";
+
+export const pageBlockWidths = ["text", "md", "lg", "xl", "2xl"] as const;
+
+export type PageBlockWidth = (typeof pageBlockWidths)[number];
+
+export type PageBlockProps = React.HTMLAttributes<HTMLElement> & {
+	/**
+	 * Where a width-constrained block sits in the space available to it.
+	 *
+	 * `center` is the MUI `Container` behaviour. `start` keeps the content against the leading
+	 * edge, which is what the old `PageContainer` did (it forced `margin-left: 0`) and what an app
+	 * with a docked navigation drawer usually wants — centering leaves the content floating away
+	 * from the menu it belongs to.
+	 *
+	 * Has no effect without a `width`, since the block already fills its parent.
+	 * @default "center"
+	 */
+	align?: "center" | "start";
+	/**
+	 * Overrides the rendered element (e.g. `"main"`, `"header"`, `"footer"`)
+	 * @default "div"
+	 */
+	as?: React.ElementType;
+	children?: React.ReactNode;
+	/**
+	 * Fills the remaining space of the parent `Page`. Combine with
+	 * `overflow="auto"` inside `<Page layout="app">` to make the block the
+	 * scroll container.
+	 * @default false
+	 */
+	grow?: boolean;
+	/**
+	 * Adds a standardised responsive inline padding
+	 * @default false
+	 */
+	gutters?: boolean;
+	/**
+	 * Overflow behaviour of the block. Only relevant inside
+	 * `<Page layout="app">`, where scrolling is delegated down the tree.
+	 */
+	overflow?: "auto" | "hidden";
+	/**
+	 * Predefined max-width. Content is horizontally centered.
+	 *
+	 * - `text`: 36rem (576px) — recommended line-length for running text
+	 * - `md`: 48rem (768px)
+	 * - `lg`: 64rem (1024px)
+	 * - `xl`: 80rem (1280px)
+	 * - `2xl`: 90rem (1440px)
+	 *
+	 * @default max-width: 100%
+	 */
+	width?: PageBlockWidth;
+};
+
+/**
+ * Layout block for defining max-width, gutters and horizontal centering.
+ * Replaces the deprecated `PageContainer` (`maxWidth` mapping: `xs`/`sm` →
+ * `text`, `md` → `md`, `lg` → `lg`, `xl` → `xl`, `false` → no `width`).
+ */
+export function PageBlock({
+	align,
+	as: Component = "div",
+	children,
+	className,
+	grow,
+	gutters,
+	overflow,
+	width,
+	...props
+}: PageBlockProps) {
+	return (
+		<Component
+			className={clsx(
+				"ObPageBlock-root",
+				width && `ObPageBlock-${width}`,
+				align === "start" && "ObPageBlock-alignStart",
+				gutters && "ObPageBlock-gutters",
+				grow && "ObPageBlock-grow",
+				overflow && `ObPageBlock-overflow${overflow === "auto" ? "Auto" : "Hidden"}`,
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</Component>
+	);
+}

package/src/page/PageHeader.css

@@ -1,88 +1,88 @@
-.ObPageHeader-root {
-	flex: 0 0 auto;
-}
-
-/* --- appbar variant --- */
-
-.ObPageHeader-appbar {
-	background-color: var(--ds-color-brand-base-default, #0062ba);
-	color: var(--ds-color-brand-base-contrast-default, #fff);
-}
-
-.ObPageHeader-appbar .ObPageHeader-bar {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-	min-height: var(--ob-page-appbar-height, 3.5rem);
-	padding-inline: 0.5rem 1rem;
-}
-
-.ObPageHeader-title {
-	flex: 1 1 auto;
-	margin: 0;
-	font-size: var(--ds-font-size-lg, 1.25rem);
-	font-weight: 500;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.ObPageHeader-actions {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-	margin-left: auto;
-}
-
-.ObPageHeader-title + .ObPageHeader-actions {
-	margin-left: 0;
-}
-
-.ObPageHeader-toggle {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	background: transparent;
-	border: none;
-	color: inherit;
-	cursor: pointer;
-	border-radius: 50%;
-	height: 2.75rem;
-	width: 2.75rem;
-	font-size: 1.5rem;
-	flex-shrink: 0;
-}
-
-.ObPageHeader-toggle:hover {
-	background-color: rgb(255 255 255 / 0.12);
-}
-
-/* --- plain variant --- */
-
-.ObPageHeader-plainInner {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-}
-
-.ObPageHeader-plainTitle {
-	margin: 0;
-	font-size: var(--ds-font-size-xl, 1.5rem);
-	font-weight: 500;
-}
-
-/*
- * Reserved slot for the app-launcher and user profile menu in the future
- * sidebar-free site layout. Hidden under the current sidebar layout; the
- * activation mechanism is decided together with the new website template.
- */
-.ObPageHeader-end {
-	display: none;
-}
-
-@media print {
-	.ObPageHeader-appbar .ObPageHeader-bar,
-	.ObPageHeader-toggle {
-		display: none !important;
-	}
-}
+.ObPageHeader-root {
+	flex: 0 0 auto;
+}
+
+/* --- appbar variant --- */
+
+.ObPageHeader-appbar {
+	background-color: var(--ds-color-brand-base-default, #0062ba);
+	color: var(--ds-color-brand-base-contrast-default, #fff);
+}
+
+.ObPageHeader-appbar .ObPageHeader-bar {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	min-height: var(--ob-page-appbar-height, 3.5rem);
+	padding-inline: 0.5rem 1rem;
+}
+
+.ObPageHeader-title {
+	flex: 1 1 auto;
+	margin: 0;
+	font-size: var(--ds-font-size-lg, 1.25rem);
+	font-weight: 500;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.ObPageHeader-actions {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	margin-left: auto;
+}
+
+.ObPageHeader-title + .ObPageHeader-actions {
+	margin-left: 0;
+}
+
+.ObPageHeader-toggle {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: transparent;
+	border: none;
+	color: inherit;
+	cursor: pointer;
+	border-radius: 50%;
+	height: 2.75rem;
+	width: 2.75rem;
+	font-size: 1.5rem;
+	flex-shrink: 0;
+}
+
+.ObPageHeader-toggle:hover {
+	background-color: rgb(255 255 255 / 0.12);
+}
+
+/* --- plain variant --- */
+
+.ObPageHeader-plainInner {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.ObPageHeader-plainTitle {
+	margin: 0;
+	font-size: var(--ds-font-size-xl, 1.5rem);
+	font-weight: 500;
+}
+
+/*
+ * Reserved slot for the app-launcher and user profile menu in the future
+ * sidebar-free site layout. Hidden under the current sidebar layout; the
+ * activation mechanism is decided together with the new website template.
+ */
+.ObPageHeader-end {
+	display: none;
+}
+
+@media print {
+	.ObPageHeader-appbar .ObPageHeader-bar,
+	.ObPageHeader-toggle {
+		display: none !important;
+	}
+}

package/src/page/PageHeader.tsx

@@ -1,116 +1,115 @@
-import "./PageHeader.css";
-
-import { getLocalizedString } from "@olenbetong/appframe-core";
-
-import clsx from "clsx";
-import type React from "react";
-
-import { type AppMenuProps } from "../layout/AppMenu.js";
-import { AppMenuDrawer, useAppMenuDrawer } from "../layout/AppMenuDrawer.js";
-import { PageBlock, type PageBlockWidth } from "./PageBlock.js";
-
-export type PageHeaderVariant = "appbar" | "plain";
-
-export type PageHeaderProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
-	/**
-	 * Actions displayed at the end of the header (buttons, search, etc.)
-	 */
-	actions?: React.ReactNode;
-	/**
-	 * Props passed to the `AppMenu` wrapping the `menu` content
-	 */
-	AppMenuProps?: AppMenuProps;
-	children?: React.ReactNode;
-	/**
-	 * App menu (navigation) content. When provided, the `appbar` variant
-	 * renders a menu toggle button and a drawer hosting the menu — docked on
-	 * desktop (≥1200px), overlay on smaller screens.
-	 */
-	menu?: React.ReactNode;
-	/**
-	 * Application title
-	 */
-	title?: React.ReactNode;
-	/**
-	 * Adds a standardised responsive inline padding to the header content.
-	 * See `Page.Block`.
-	 * @default false
-	 */
-	gutters?: boolean;
-	/**
-	 * Constrains and centers the header content to a predefined max-width,
-	 * so it can align with a `Page.Block` of the same width. See `Page.Block`.
-	 */
-	width?: PageBlockWidth;
-	/**
-	 * - `"appbar"` (default): a top app bar with menu toggle, title and
-	 *   actions. For apps that have an app menu.
-	 * - `"plain"`: no app bar chrome — for simple apps without an app menu
-	 *   (e.g. report-issue). Renders the title as a regular heading block.
-	 *
-	 * Both variants reserve an end-slot (`.ObPageHeader-end`) that will host
-	 * the app-launcher and user profile menu in the future sidebar-free site
-	 * layout. It is hidden under the current sidebar layout.
-	 * @default "appbar"
-	 */
-	variant?: PageHeaderVariant;
-};
-
-/**
- * Page header for use inside `Page`. See the `variant` prop for the two
- * supported header styles.
- */
-export function PageHeader({
-	actions,
-	AppMenuProps,
-	children,
-	className,
-	gutters,
-	menu,
-	title,
-	variant = "appbar",
-	width,
-	...props
-}: PageHeaderProps) {
-	let { open, isMobile, toggle, close } = useAppMenuDrawer();
-
-	if (variant === "plain") {
-		return (
-			<header className={clsx("ObPageHeader-root", "ObPageHeader-plain", className)} {...props}>
-				<PageBlock className="ObPageHeader-plainInner" width={width} gutters={gutters}>
-					{title && <h1 className="ObPageHeader-plainTitle">{title}</h1>}
-					{actions && <div className="ObPageHeader-actions">{actions}</div>}
-					{children}
-					<div className="ObPageHeader-end" />
-				</PageBlock>
-			</header>
-		);
-	}
-
-	return (
-		<header className={clsx("ObPageHeader-root", "ObPageHeader-appbar", className)} {...props}>
-			<PageBlock className="ObPageHeader-bar" width={width} gutters={gutters}>
-				{menu && (
-					<button
-						type="button"
-						className="ObPageHeader-toggle"
-						onClick={toggle}
-						aria-label={getLocalizedString("Toggle menu")}
-						aria-expanded={open}
-					>
-						☰
-					</button>
-				)}
-				{title && <h1 className="ObPageHeader-title">{title}</h1>}
-				{actions && <div className="ObPageHeader-actions">{actions}</div>}
-				<div className="ObPageHeader-end" />
-			</PageBlock>
-			{children}
-			{menu && (
-				<AppMenuDrawer AppMenuProps={AppMenuProps} isMobile={isMobile} onClose={close} open={open}>
-					{menu}
-				</AppMenuDrawer>
-			)}
-		</header>
-	);
-}
+import "./PageHeader.css";
+
+import clsx from "clsx";
+import type React from "react";
+
+import { type AppMenuProps } from "../layout/AppMenu.js";
+import { AppMenuDrawer, useAppMenuDrawer } from "../layout/AppMenuDrawer.js";
+import { PageBlock, type PageBlockWidth } from "./PageBlock.js";
+import { getLocalizedString } from "../i18n.js";
+
+export type PageHeaderVariant = "appbar" | "plain";
+
+export type PageHeaderProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+	/**
+	 * Actions displayed at the end of the header (buttons, search, etc.)
+	 */
+	actions?: React.ReactNode;
+	/**
+	 * Props passed to the `AppMenu` wrapping the `menu` content
+	 */
+	AppMenuProps?: AppMenuProps;
+	children?: React.ReactNode;
+	/**
+	 * App menu (navigation) content. When provided, the `appbar` variant
+	 * renders a menu toggle button and a drawer hosting the menu — docked on
+	 * desktop (≥1200px), overlay on smaller screens.
+	 */
+	menu?: React.ReactNode;
+	/**
+	 * Application title
+	 */
+	title?: React.ReactNode;
+	/**
+	 * Adds a standardised responsive inline padding to the header content.
+	 * See `Page.Block`.
+	 * @default false
+	 */
+	gutters?: boolean;
+	/**
+	 * Constrains and centers the header content to a predefined max-width,
+	 * so it can align with a `Page.Block` of the same width. See `Page.Block`.
+	 */
+	width?: PageBlockWidth;
+	/**
+	 * - `"appbar"` (default): a top app bar with menu toggle, title and
+	 *   actions. For apps that have an app menu.
+	 * - `"plain"`: no app bar chrome — for simple apps without an app menu
+	 *   (e.g. report-issue). Renders the title as a regular heading block.
+	 *
+	 * Both variants reserve an end-slot (`.ObPageHeader-end`) that will host
+	 * the app-launcher and user profile menu in the future sidebar-free site
+	 * layout. It is hidden under the current sidebar layout.
+	 * @default "appbar"
+	 */
+	variant?: PageHeaderVariant;
+};
+
+/**
+ * Page header for use inside `Page`. See the `variant` prop for the two
+ * supported header styles.
+ */
+export function PageHeader({
+	actions,
+	AppMenuProps,
+	children,
+	className,
+	gutters,
+	menu,
+	title,
+	variant = "appbar",
+	width,
+	...props
+}: PageHeaderProps) {
+	let { open, isMobile, toggle, close } = useAppMenuDrawer();
+
+	if (variant === "plain") {
+		return (
+			<header className={clsx("ObPageHeader-root", "ObPageHeader-plain", className)} {...props}>
+				<PageBlock className="ObPageHeader-plainInner" width={width} gutters={gutters}>
+					{title && <h1 className="ObPageHeader-plainTitle">{title}</h1>}
+					{actions && <div className="ObPageHeader-actions">{actions}</div>}
+					{children}
+					<div className="ObPageHeader-end" />
+				</PageBlock>
+			</header>
+		);
+	}
+
+	return (
+		<header className={clsx("ObPageHeader-root", "ObPageHeader-appbar", className)} {...props}>
+			<PageBlock className="ObPageHeader-bar" width={width} gutters={gutters}>
+				{menu && (
+					<button
+						type="button"
+						className="ObPageHeader-toggle"
+						onClick={toggle}
+						aria-label={getLocalizedString("Toggle menu")}
+						aria-expanded={open}
+					>
+						☰
+					</button>
+				)}
+				{title && <h1 className="ObPageHeader-title">{title}</h1>}
+				{actions && <div className="ObPageHeader-actions">{actions}</div>}
+				<div className="ObPageHeader-end" />
+			</PageBlock>
+			{children}
+			{menu && (
+				<AppMenuDrawer AppMenuProps={AppMenuProps} isMobile={isMobile} onClose={close} open={open}>
+					{menu}
+				</AppMenuDrawer>
+			)}
+		</header>
+	);
+}

package/src/page/PageTitle.css

@@ -0,0 +1,5 @@
+@layer ds {
+	.ObPageTitle-root {
+		margin-block: 0 var(--ds-size-4);
+	}
+}

package/src/page/PageTitle.tsx

@@ -0,0 +1,21 @@
+import "./PageTitle.css";
+
+import { Heading, type HeadingProps } from "@digdir/designsystemet-react";
+import clsx from "clsx";
+
+export type PageTitleProps = Omit<HeadingProps, "level"> & {
+	/** Heading level; the page's title is an `h1` unless the page already has one. */
+	level?: HeadingProps["level"];
+};
+
+/**
+ * The title at the top of a page's content: a Designsystemet `Heading`, `h1`, medium size.
+ *
+ * Equivalent of `PageTitle` in `@olenbetong/appframe-mui`, which portalled the title into
+ * the app bar on small screens. On the 2026 templates the site draws the toolbar and the app
+ * title lives there as breadcrumbs, so the page title is simply the first heading of the
+ * content.
+ */
+export function PageTitle({ className, level = 1, "data-size": size = "md", ...props }: PageTitleProps) {
+	return <Heading level={level} data-size={size} className={clsx("ObPageTitle-root", className)} {...props} />;
+}

package/src/page/index.ts

@@ -1,3 +1,4 @@
-export * from "./Page.js";
-export * from "./PageBlock.js";
-export * from "./PageHeader.js";
+export * from "./Page.js";
+export * from "./PageBlock.js";
+export * from "./PageHeader.js";
+export * from "./PageTitle.js";