@olenbetong/appframe-ds 1.0.3 → 1.2.0

package/src/paper/Paper.tsx

@@ -1,52 +1,52 @@
-import "./Paper.css";
-
-import clsx from "clsx";
-import type React from "react";
-
-export const paperShadows = ["none", "xs", "sm", "md", "lg", "xl"] as const;
-
-export type PaperShadow = (typeof paperShadows)[number];
-
-export type PaperProps = React.HTMLAttributes<HTMLElement> & {
-	/**
-	 * Overrides the rendered element (e.g. `"section"`, `"ul"`)
-	 * @default "div"
-	 */
-	as?: React.ElementType;
-	/**
-	 * Adds a subtle border. Combine with `shadow="none"` for an outlined
-	 * variant (MUI `variant="outlined"` equivalent).
-	 * @default false
-	 */
-	border?: boolean;
-	children?: React.ReactNode;
-	/** Forwarded to the rendered element. */
-	ref?: React.Ref<any>;
-	/**
-	 * Elevation shadow, using the designsystemet `--ds-shadow-*` tokens.
-	 * @default "sm"
-	 */
-	shadow?: PaperShadow;
-};
-
-/**
- * Surface component equivalent to MUI `Paper`: a neutral surface with
- * rounded corners and an elevation shadow. Use it instead of hand-rolled
- * `background` + `box-shadow` CSS so surfaces stay consistent with the
- * designsystemet tokens (and adapt to dark mode).
- */
-export function Paper({ as: Component = "div", border, children, className, shadow = "sm", ...props }: PaperProps) {
-	return (
-		<Component
-			className={clsx(
-				"ObPaper-root",
-				shadow !== "none" && `ObPaper-shadow-${shadow}`,
-				border && "ObPaper-border",
-				className,
-			)}
-			{...props}
-		>
-			{children}
-		</Component>
-	);
-}
+import "./Paper.css";
+
+import clsx from "clsx";
+import type React from "react";
+
+export const paperShadows = ["none", "xs", "sm", "md", "lg", "xl"] as const;
+
+export type PaperShadow = (typeof paperShadows)[number];
+
+export type PaperProps = React.HTMLAttributes<HTMLElement> & {
+	/**
+	 * Overrides the rendered element (e.g. `"section"`, `"ul"`)
+	 * @default "div"
+	 */
+	as?: React.ElementType;
+	/**
+	 * Adds a subtle border. Combine with `shadow="none"` for an outlined
+	 * variant (MUI `variant="outlined"` equivalent).
+	 * @default false
+	 */
+	border?: boolean;
+	children?: React.ReactNode;
+	/** Forwarded to the rendered element. */
+	ref?: React.Ref<any>;
+	/**
+	 * Elevation shadow, using the designsystemet `--ds-shadow-*` tokens.
+	 * @default "sm"
+	 */
+	shadow?: PaperShadow;
+};
+
+/**
+ * Surface component equivalent to MUI `Paper`: a neutral surface with
+ * rounded corners and an elevation shadow. Use it instead of hand-rolled
+ * `background` + `box-shadow` CSS so surfaces stay consistent with the
+ * designsystemet tokens (and adapt to dark mode).
+ */
+export function Paper({ as: Component = "div", border, children, className, shadow = "sm", ...props }: PaperProps) {
+	return (
+		<Component
+			className={clsx(
+				"ObPaper-root",
+				shadow !== "none" && `ObPaper-shadow-${shadow}`,
+				border && "ObPaper-border",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</Component>
+	);
+}

package/src/progress/LinearProgress.css

@@ -1,93 +1,93 @@
-.ObLinearProgress-root {
-	--obLinearProgress-thickness: 0.25rem;
-	--obLinearProgress-duration: 2.1s;
-
-	position: relative;
-	display: block;
-	box-sizing: border-box;
-	inline-size: 100%;
-	block-size: var(--obLinearProgress-thickness);
-	overflow: hidden;
-	background-color: var(--ds-color-brand-surface-active, #cddffb);
-	border-radius: var(--ds-border-radius-full, 624.9375rem);
-}
-
-.ObLinearProgress-root[data-size="xs"] {
-	--obLinearProgress-thickness: 0.125rem;
-}
-
-.ObLinearProgress-root[data-size="sm"] {
-	--obLinearProgress-thickness: 0.25rem;
-}
-
-.ObLinearProgress-root[data-size="md"] {
-	--obLinearProgress-thickness: 0.5rem;
-}
-
-.ObLinearProgress-root[data-size="lg"] {
-	--obLinearProgress-thickness: 0.75rem;
-}
-
-.ObLinearProgress-bar {
-	position: absolute;
-	inset-block: 0;
-	inset-inline-start: 0;
-	inline-size: 100%;
-	background-color: var(--ds-color-brand-base-default, #0062ba);
-	border-radius: inherit;
-}
-
-.ObLinearProgress-determinate .ObLinearProgress-bar {
-	transition: inline-size 0.2s linear;
-}
-
-/*
- * The indeterminate bar is full width and animated with `transform`, where the
- * start and end of the bar move at different speeds (the bar stretches and
- * shrinks as it travels).
- */
-.ObLinearProgress-indeterminate .ObLinearProgress-bar {
-	transform-origin: left center;
-	will-change: transform;
-	animation: ObLinearProgress-indeterminate var(--obLinearProgress-duration) cubic-bezier(0.65, 0.815, 0.735, 0.395)
-		infinite;
-}
-
-/* Zero-height wrapper so the overlay bar never affects the layout */
-.ObLinearProgress-overlay {
-	position: relative;
-	z-index: 1;
-	block-size: 0;
-}
-
-.ObLinearProgress-overlay > .ObLinearProgress-root {
-	position: absolute;
-	inset-block-start: 0;
-	inset-inline: 0;
-}
-
-@keyframes ObLinearProgress-indeterminate {
-	0% {
-		transform: translateX(-35%) scaleX(0.35);
-	}
-
-	60% {
-		transform: translateX(60%) scaleX(0.7);
-	}
-
-	100% {
-		transform: translateX(100%) scaleX(0.2);
-	}
-}
-
-@media (prefers-reduced-motion: reduce) {
-	.ObLinearProgress-indeterminate .ObLinearProgress-bar {
-		animation-duration: 4s;
-	}
-}
-
-@media print {
-	.ObLinearProgress-root {
-		display: none;
-	}
-}
+.ObLinearProgress-root {
+	--obLinearProgress-thickness: 0.25rem;
+	--obLinearProgress-duration: 2.1s;
+
+	position: relative;
+	display: block;
+	box-sizing: border-box;
+	inline-size: 100%;
+	block-size: var(--obLinearProgress-thickness);
+	overflow: hidden;
+	background-color: var(--ds-color-brand-surface-active, #cddffb);
+	border-radius: var(--ds-border-radius-full, 624.9375rem);
+}
+
+.ObLinearProgress-root[data-size="xs"] {
+	--obLinearProgress-thickness: 0.125rem;
+}
+
+.ObLinearProgress-root[data-size="sm"] {
+	--obLinearProgress-thickness: 0.25rem;
+}
+
+.ObLinearProgress-root[data-size="md"] {
+	--obLinearProgress-thickness: 0.5rem;
+}
+
+.ObLinearProgress-root[data-size="lg"] {
+	--obLinearProgress-thickness: 0.75rem;
+}
+
+.ObLinearProgress-bar {
+	position: absolute;
+	inset-block: 0;
+	inset-inline-start: 0;
+	inline-size: 100%;
+	background-color: var(--ds-color-brand-base-default, #0062ba);
+	border-radius: inherit;
+}
+
+.ObLinearProgress-determinate .ObLinearProgress-bar {
+	transition: inline-size 0.2s linear;
+}
+
+/*
+ * The indeterminate bar is full width and animated with `transform`, where the
+ * start and end of the bar move at different speeds (the bar stretches and
+ * shrinks as it travels).
+ */
+.ObLinearProgress-indeterminate .ObLinearProgress-bar {
+	transform-origin: left center;
+	will-change: transform;
+	animation: ObLinearProgress-indeterminate var(--obLinearProgress-duration) cubic-bezier(0.65, 0.815, 0.735, 0.395)
+		infinite;
+}
+
+/* Zero-height wrapper so the overlay bar never affects the layout */
+.ObLinearProgress-overlay {
+	position: relative;
+	z-index: 1;
+	block-size: 0;
+}
+
+.ObLinearProgress-overlay > .ObLinearProgress-root {
+	position: absolute;
+	inset-block-start: 0;
+	inset-inline: 0;
+}
+
+@keyframes ObLinearProgress-indeterminate {
+	0% {
+		transform: translateX(-35%) scaleX(0.35);
+	}
+
+	60% {
+		transform: translateX(60%) scaleX(0.7);
+	}
+
+	100% {
+		transform: translateX(100%) scaleX(0.2);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.ObLinearProgress-indeterminate .ObLinearProgress-bar {
+		animation-duration: 4s;
+	}
+}
+
+@media print {
+	.ObLinearProgress-root {
+		display: none;
+	}
+}

package/src/progress/LinearProgress.tsx

@@ -1,104 +1,104 @@
-import "./LinearProgress.css";
-
-import clsx from "clsx";
-import type React from "react";
-
-export const linearProgressSizes = ["xs", "sm", "md", "lg"] as const;
-
-export type LinearProgressSize = (typeof linearProgressSizes)[number];
-
-export type LinearProgressProps = Omit<React.HTMLAttributes<HTMLDivElement>, "color"> & {
-	/**
-	 * Designsystemet colour palette used for the bar
-	 * @default "accent"
-	 */
-	"data-color"?: string;
-	/**
-	 * Thickness of the bar
-	 * @default "sm"
-	 */
-	"data-size"?: LinearProgressSize;
-	/**
-	 * Renders the bar absolutely positioned in a zero-height wrapper, so it
-	 * overlays the top of the following content instead of taking up space.
-	 * Use it for loading indicators that should not shift the layout.
-	 * @default false
-	 */
-	overlay?: boolean;
-	/**
-	 * Progress value. When omitted the bar is indeterminate.
-	 */
-	value?: number;
-	/**
-	 * Highest possible value of `value`
-	 * @default 100
-	 */
-	valueMax?: number;
-	/**
-	 * Lowest possible value of `value`
-	 * @default 0
-	 */
-	valueMin?: number;
-};
-
-/**
- * Linear progress indicator, equivalent to MUI `LinearProgress`. Indeterminate
- * by default, determinate when `value` is given. Designsystemet has no linear
- * progress component, so this is built with the designsystemet colour and
- * radius tokens (use `data-color` to change palette).
- *
- * @example
- * ```jsx
- * // Indeterminate, in the normal document flow
- * <LinearProgress aria-label="Loading..." />
- *
- * // Determinate
- * <LinearProgress aria-label="Uploading" value={40} />
- *
- * // Absolutely positioned, does not affect the layout
- * <LinearProgress overlay aria-label="Loading..." />
- * ```
- */
-export function LinearProgress({
-	className,
-	overlay,
-	value,
-	valueMax = 100,
-	valueMin = 0,
-	"data-color": color = "accent",
-	"data-size": size = "sm",
-	...props
-}: LinearProgressProps) {
-	let isDeterminate = typeof value === "number" && Number.isFinite(value);
-	let clamped = isDeterminate ? Math.min(Math.max(value as number, valueMin), valueMax) : undefined;
-	let percentage =
-		clamped === undefined || valueMax === valueMin ? undefined : ((clamped - valueMin) / (valueMax - valueMin)) * 100;
-
-	let bar = (
-		<div
-			className={clsx(
-				"ObLinearProgress-root",
-				isDeterminate ? "ObLinearProgress-determinate" : "ObLinearProgress-indeterminate",
-				!overlay && className,
-			)}
-			data-color={color}
-			data-size={size}
-			role="progressbar"
-			aria-valuemin={valueMin}
-			aria-valuemax={valueMax}
-			aria-valuenow={clamped}
-			{...props}
-		>
-			<div
-				className="ObLinearProgress-bar"
-				style={percentage === undefined ? undefined : { inlineSize: `${percentage}%` }}
-			/>
-		</div>
-	);
-
-	if (!overlay) {
-		return bar;
-	}
-
-	return <div className={clsx("ObLinearProgress-overlay", className)}>{bar}</div>;
-}
+import "./LinearProgress.css";
+
+import clsx from "clsx";
+import type React from "react";
+
+export const linearProgressSizes = ["xs", "sm", "md", "lg"] as const;
+
+export type LinearProgressSize = (typeof linearProgressSizes)[number];
+
+export type LinearProgressProps = Omit<React.HTMLAttributes<HTMLDivElement>, "color"> & {
+	/**
+	 * Designsystemet colour palette used for the bar
+	 * @default "accent"
+	 */
+	"data-color"?: string;
+	/**
+	 * Thickness of the bar
+	 * @default "sm"
+	 */
+	"data-size"?: LinearProgressSize;
+	/**
+	 * Renders the bar absolutely positioned in a zero-height wrapper, so it
+	 * overlays the top of the following content instead of taking up space.
+	 * Use it for loading indicators that should not shift the layout.
+	 * @default false
+	 */
+	overlay?: boolean;
+	/**
+	 * Progress value. When omitted the bar is indeterminate.
+	 */
+	value?: number;
+	/**
+	 * Highest possible value of `value`
+	 * @default 100
+	 */
+	valueMax?: number;
+	/**
+	 * Lowest possible value of `value`
+	 * @default 0
+	 */
+	valueMin?: number;
+};
+
+/**
+ * Linear progress indicator, equivalent to MUI `LinearProgress`. Indeterminate
+ * by default, determinate when `value` is given. Designsystemet has no linear
+ * progress component, so this is built with the designsystemet colour and
+ * radius tokens (use `data-color` to change palette).
+ *
+ * @example
+ * ```jsx
+ * // Indeterminate, in the normal document flow
+ * <LinearProgress aria-label="Loading..." />
+ *
+ * // Determinate
+ * <LinearProgress aria-label="Uploading" value={40} />
+ *
+ * // Absolutely positioned, does not affect the layout
+ * <LinearProgress overlay aria-label="Loading..." />
+ * ```
+ */
+export function LinearProgress({
+	className,
+	overlay,
+	value,
+	valueMax = 100,
+	valueMin = 0,
+	"data-color": color = "accent",
+	"data-size": size = "sm",
+	...props
+}: LinearProgressProps) {
+	let isDeterminate = typeof value === "number" && Number.isFinite(value);
+	let clamped = isDeterminate ? Math.min(Math.max(value as number, valueMin), valueMax) : undefined;
+	let percentage =
+		clamped === undefined || valueMax === valueMin ? undefined : ((clamped - valueMin) / (valueMax - valueMin)) * 100;
+
+	let bar = (
+		<div
+			className={clsx(
+				"ObLinearProgress-root",
+				isDeterminate ? "ObLinearProgress-determinate" : "ObLinearProgress-indeterminate",
+				!overlay && className,
+			)}
+			data-color={color}
+			data-size={size}
+			role="progressbar"
+			aria-valuemin={valueMin}
+			aria-valuemax={valueMax}
+			aria-valuenow={clamped}
+			{...props}
+		>
+			<div
+				className="ObLinearProgress-bar"
+				style={percentage === undefined ? undefined : { inlineSize: `${percentage}%` }}
+			/>
+		</div>
+	);
+
+	if (!overlay) {
+		return bar;
+	}
+
+	return <div className={clsx("ObLinearProgress-overlay", className)}>{bar}</div>;
+}

package/src/progress/index.ts

@@ -1 +1 @@
-export * from "./LinearProgress.js";
+export * from "./LinearProgress.js";

package/src/report-downloader/ReportDownloader.css

@@ -1,67 +1,67 @@
-.ObReportDownloader-root {
-	position: fixed;
-	bottom: 0;
-	left: 0;
-	z-index: 1060;
-	display: flex;
-	justify-content: center;
-	width: 100%;
-	padding: var(--ds-size-2);
-	pointer-events: none;
-}
-
-.ObReportDownloader-list {
-	width: 100%;
-	max-width: 60rem;
-	padding: var(--ds-size-2);
-	background: var(--ds-color-neutral-background-default);
-	border: 1px solid var(--ds-color-neutral-border-subtle);
-	border-radius: var(--ds-border-radius-md);
-	box-shadow: var(--ds-shadow-md);
-	opacity: 1;
-	transform: translateY(0);
-	transition:
-		opacity 150ms ease,
-		transform 150ms ease;
-	pointer-events: auto;
-}
-
-.ObReportDownloader-list.closed {
-	padding: 0;
-	border: none;
-	box-shadow: none;
-	opacity: 0;
-	transform: translateY(100%);
-}
-
-.ObReportDownloader-item {
-	display: grid;
-	grid-template-columns: 3rem 1fr auto;
-	gap: var(--ds-size-3);
-	align-items: center;
-	justify-items: center;
-	padding: var(--ds-size-2);
-}
-
-.ObReportDownloader-itemText {
-	justify-self: start;
-}
-
-.ObReportDownloader-icon {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: 1.5rem;
-}
-
-.ObReportDownloader-icon.cancelled {
-	color: var(--ds-color-warning-base-default);
-}
-
-.ObReportDownloader-icon.error {
-	color: var(--ds-color-danger-base-default);
-}
-
-.ObReportDownloader-icon.completed {
-	color: var(--ds-color-success-base-default);
-}
+.ObReportDownloader-root {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	z-index: 1060;
+	display: flex;
+	justify-content: center;
+	width: 100%;
+	padding: var(--ds-size-2);
+	pointer-events: none;
+}
+
+.ObReportDownloader-list {
+	width: 100%;
+	max-width: 60rem;
+	padding: var(--ds-size-2);
+	background: var(--ds-color-neutral-background-default);
+	border: 1px solid var(--ds-color-neutral-border-subtle);
+	border-radius: var(--ds-border-radius-md);
+	box-shadow: var(--ds-shadow-md);
+	opacity: 1;
+	transform: translateY(0);
+	transition:
+		opacity 150ms ease,
+		transform 150ms ease;
+	pointer-events: auto;
+}
+
+.ObReportDownloader-list.closed {
+	padding: 0;
+	border: none;
+	box-shadow: none;
+	opacity: 0;
+	transform: translateY(100%);
+}
+
+.ObReportDownloader-item {
+	display: grid;
+	grid-template-columns: 3rem 1fr auto;
+	gap: var(--ds-size-3);
+	align-items: center;
+	justify-items: center;
+	padding: var(--ds-size-2);
+}
+
+.ObReportDownloader-itemText {
+	justify-self: start;
+}
+
+.ObReportDownloader-icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 1.5rem;
+}
+
+.ObReportDownloader-icon.cancelled {
+	color: var(--ds-color-warning-base-default);
+}
+
+.ObReportDownloader-icon.error {
+	color: var(--ds-color-danger-base-default);
+}
+
+.ObReportDownloader-icon.completed {
+	color: var(--ds-color-success-base-default);
+}