@olenbetong/appframe-ds 1.1.0 → 1.3.0

package/src/layout/PageContainer.tsx

@@ -3,9 +3,25 @@ import "./PageContainer.css";
 import clsx from "clsx";
 import type React from "react";
 
+export type PageContainerMaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false;
+
 export type PageContainerProps = React.HTMLAttributes<HTMLDivElement> & {
 	fullHeight?: boolean;
-	maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | false;
+	/**
+	 * Predefined max-width of the content, on the MUI `Container` scale (`xs`/`sm` 36rem,
+	 * `md` 48rem, `lg` 64rem, `xl` 80rem, plus the gutters). The content stays against the
+	 * leading edge, as the MUI-era `PageContainer` did; `Page.Block`/`Container` centre it.
+	 * @default max-width: 100%
+	 */
+	maxWidth?: PageContainerMaxWidth;
+};
+
+const maxWidthClassName: Record<Exclude<PageContainerMaxWidth, false>, string> = {
+	xs: "ObPageContainer-text",
+	sm: "ObPageContainer-text",
+	md: "ObPageContainer-md",
+	lg: "ObPageContainer-lg",
+	xl: "ObPageContainer-xl",
 };
 
 /**
@@ -17,7 +33,7 @@ export type PageContainerProps = React.HTMLAttributes<HTMLDivElement> & {
 export function PageContainer({ children, className, fullHeight, maxWidth, ...props }: PageContainerProps) {
 	return (
 		<div className={clsx("ObPageContainer-root", fullHeight && "ObPageContainer-fullHeight")}>
-			<div className={clsx("ObPageContainer-inner", className)} {...props}>
+			<div className={clsx("ObPageContainer-inner", maxWidth && maxWidthClassName[maxWidth], className)} {...props}>
 				{children}
 			</div>
 		</div>

package/src/layout/ResponsiveDialog.css

@@ -0,0 +1,86 @@
+/*
+ * Width-limited on large screens, full-screen below the next MUI breakpoint up:
+ * xs (444px) fills below 600px, sm (600px) below 900px, md (900px) below 1200px,
+ * lg (1200px) below 1536px, xl (1536px) below 1920px, none always.
+ */
+@layer ds {
+	.ObResponsiveDialog-root {
+		width: 100%;
+	}
+
+	.ObResponsiveDialog-root[data-max-width="xs"] {
+		max-width: 444px;
+	}
+	.ObResponsiveDialog-root[data-max-width="sm"] {
+		max-width: 600px;
+	}
+	.ObResponsiveDialog-root[data-max-width="md"] {
+		max-width: 900px;
+	}
+	.ObResponsiveDialog-root[data-max-width="lg"] {
+		max-width: 1200px;
+	}
+	.ObResponsiveDialog-root[data-max-width="xl"] {
+		max-width: 1536px;
+	}
+
+	.ObResponsiveDialog-root[data-max-width="none"] {
+		max-width: none;
+		width: 100vw;
+		height: 100dvh;
+		max-height: none;
+		margin: 0;
+		border-radius: 0;
+	}
+
+	@media (max-width: 599.98px) {
+		.ObResponsiveDialog-root[data-max-width="xs"] {
+			max-width: none;
+			width: 100vw;
+			height: 100dvh;
+			max-height: none;
+			margin: 0;
+			border-radius: 0;
+		}
+	}
+	@media (max-width: 899.98px) {
+		.ObResponsiveDialog-root[data-max-width="sm"] {
+			max-width: none;
+			width: 100vw;
+			height: 100dvh;
+			max-height: none;
+			margin: 0;
+			border-radius: 0;
+		}
+	}
+	@media (max-width: 1199.98px) {
+		.ObResponsiveDialog-root[data-max-width="md"] {
+			max-width: none;
+			width: 100vw;
+			height: 100dvh;
+			max-height: none;
+			margin: 0;
+			border-radius: 0;
+		}
+	}
+	@media (max-width: 1535.98px) {
+		.ObResponsiveDialog-root[data-max-width="lg"] {
+			max-width: none;
+			width: 100vw;
+			height: 100dvh;
+			max-height: none;
+			margin: 0;
+			border-radius: 0;
+		}
+	}
+	@media (max-width: 1919.98px) {
+		.ObResponsiveDialog-root[data-max-width="xl"] {
+			max-width: none;
+			width: 100vw;
+			height: 100dvh;
+			max-height: none;
+			margin: 0;
+			border-radius: 0;
+		}
+	}
+}

package/src/layout/ResponsiveDialog.tsx

@@ -0,0 +1,55 @@
+import "./ResponsiveDialog.css";
+
+import { Dialog, type DialogProps, Heading } from "@digdir/designsystemet-react";
+import clsx from "clsx";
+
+export type ResponsiveDialogMaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false;
+
+export type ResponsiveDialogProps = Omit<DialogProps, "title" | "open" | "onClose"> & {
+	open: boolean;
+	onClose?: () => void;
+	title?: React.ReactNode;
+	/**
+	 * Width of the dialog on screens wide enough for it, in MUI's breakpoint names (`sm` is
+	 * 600px, `md` 900px, `lg` 1200px, `xl` 1536px). Below the next breakpoint up the dialog
+	 * fills the screen. `false` fills the screen always.
+	 */
+	maxWidth?: ResponsiveDialogMaxWidth;
+};
+
+/**
+ * A Designsystemet `Dialog` that is a centred, width-limited dialog on large screens and
+ * full-screen on small ones - the MUI `Dialog fullScreen` behaviour, decided by CSS media
+ * queries rather than a hook. The title goes in the first `Dialog.Block` with the dialog's own
+ * close button; put the content and actions in further `Dialog.Block`s.
+ *
+ * Equivalent of `ResponsiveDialog` in `@olenbetong/appframe-mui`. `onClose` takes no
+ * arguments: the dialog closes on the close button, the backdrop and Escape alike.
+ */
+export function ResponsiveDialog({
+	children,
+	className,
+	maxWidth = "sm",
+	onClose,
+	open,
+	title,
+	...props
+}: ResponsiveDialogProps) {
+	return (
+		<Dialog
+			closedby="any"
+			{...props}
+			open={open}
+			onClose={onClose}
+			className={clsx("ObResponsiveDialog-root", className)}
+			data-max-width={maxWidth === false ? "none" : maxWidth}
+		>
+			{title && (
+				<Dialog.Block>
+					<Heading data-size="xs">{title}</Heading>
+				</Dialog.Block>
+			)}
+			{children}
+		</Dialog>
+	);
+}

package/src/layout/index.tsx

@@ -53,6 +53,7 @@ export * from "./AppMenuSubheader.js";
 export * from "./constants.js";
 export * from "./ErrorBoundary.js";
 export * from "./PageContainer.js";
+export * from "./ResponsiveDialog.js";
 export * from "./PartnerToggle.js";
 
 /**

package/src/link/Link.tsx

@@ -0,0 +1,23 @@
+import { Link as DsLink, type LinkProps as DsLinkProps } from "@digdir/designsystemet-react";
+import { forwardRef } from "react";
+import { Link as RouterLink, type LinkProps as RouterLinkProps } from "react-router";
+
+export type LinkProps = Omit<DsLinkProps, "href" | "asChild"> &
+	Omit<RouterLinkProps, "to" | "children"> & {
+		/** The in-app path, resolved by react-router. */
+		href: string;
+	};
+
+/**
+ * A Designsystemet `Link` that navigates with react-router: `href` is the route, the
+ * navigation is a view transition. Equivalent of `Link` in `@olenbetong/appframe-mui`.
+ */
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link({ href, children, ...props }, ref) {
+	return (
+		<DsLink asChild>
+			<RouterLink viewTransition to={href} {...props} ref={ref}>
+				{children}
+			</RouterLink>
+		</DsLink>
+	);
+});

package/src/link/index.ts

@@ -0,0 +1 @@
+export * from "./Link.js";

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 "./PageTitle.js";