@schukai/monster 4.148.9 → 4.149.0

package/test/cases/components/style/legacy-theme-compatibility.mjs

@@ -0,0 +1,137 @@
+import { readFileSync } from "node:fs";
+import { expect } from "chai";
+
+const tabsSource = readFileSync(
+	new URL(
+		"../../../../source/components/layout/style/tabs.pcss",
+		import.meta.url,
+	),
+	"utf8",
+);
+
+const columnBarSource = readFileSync(
+	new URL(
+		"../../../../source/components/datatable/style/column-bar.pcss",
+		import.meta.url,
+	),
+	"utf8",
+);
+
+const datatableSource = readFileSync(
+	new URL(
+		"../../../../source/components/datatable/style/datatable.pcss",
+		import.meta.url,
+	),
+	"utf8",
+);
+
+const treeMenuSource = readFileSync(
+	new URL(
+		"../../../../source/components/tree-menu/style/tree-menu.pcss",
+		import.meta.url,
+	),
+	"utf8",
+);
+
+const modernThemeSource = readFileSync(
+	new URL(
+		"../../../../source/components/style/theme-modern.pcss",
+		import.meta.url,
+	),
+	"utf8",
+);
+
+describe("Legacy theme compatibility", () => {
+	it("keeps the established tab layout as the fallback", () => {
+		for (const declaration of [
+			"var(--monster-tabs-nav-align-items, flex-end)",
+			"var(--monster-tabs-nav-gap, 0)",
+			"var(--monster-tabs-nav-margin-block-end, .75rem)",
+			"var(--monster-tabs-nav-padding, 0)",
+			"var(--monster-tabs-button-padding, .375rem 0)",
+			"var(--monster-tabs-button-margin-inline-end, .75rem)",
+			"var(--monster-tabs-button-min-block-size, auto)",
+			"var(--monster-tabs-button-transition, color 0.8s)",
+		]) {
+			expect(tabsSource, declaration).to.include(declaration);
+		}
+	});
+
+	it("activates the new tab geometry only through modern theme tokens", () => {
+		for (const token of [
+			"--monster-tabs-nav-align-items: flex-end",
+			"--monster-tabs-nav-border-width: 0 0 1px",
+			"--monster-tabs-nav-gap: 0.25rem",
+			"--monster-tabs-button-border-width: 0 0 3px",
+			"--monster-tabs-button-margin-inline-end: 0.75rem",
+			"--monster-tabs-button-min-block-size: var(--monster-control-min-block-size)",
+			"--monster-tabs-slot-padding: 0.5rem 0.75rem",
+		]) {
+			expect(modernThemeSource, token).to.include(token);
+		}
+	});
+
+	it("keeps column toggles compact with touch-sized coarse pointer targets", () => {
+		expect(columnBarSource).to.include(
+			"--monster-column-toggle-target-block-size",
+		);
+		expect(columnBarSource).to.include(
+			"var(--monster-column-toggle-target-size, 24px)",
+		);
+		expect(columnBarSource).to.include(
+			"--monster-column-toggle-target-inline-size",
+		);
+		expect(columnBarSource).to.include(
+			"var(--monster-column-toggle-target-size, 16px)",
+		);
+		expect(columnBarSource).to.include("@media (pointer: coarse)");
+		expect(columnBarSource).to.include("min-height: 24px");
+		expect(columnBarSource).to.include("min-width: 24px");
+		expect(columnBarSource).to.not.include("height: 44px");
+		expect(columnBarSource).to.not.include("width: 44px");
+	});
+
+	it("keeps legacy datatable spacing while modern uses solid subtle rows", () => {
+		for (const fallback of [
+			"var(--monster-datatable-cell-padding, 0.4rem 0.2rem)",
+			"var(--monster-datatable-header-cell-padding, 0.3rem 0.2rem)",
+			"var(--monster-datatable-row-border-style, dashed)",
+		]) {
+			expect(datatableSource, fallback).to.include(fallback);
+		}
+		for (const modernToken of [
+			"--monster-datatable-cell-padding: 0.45rem 0.5rem",
+			"--monster-datatable-row-border-style: solid",
+			"--monster-datatable-row-border-color: var(--monster-theme-surface-strong)",
+		]) {
+			expect(modernThemeSource, modernToken).to.include(modernToken);
+		}
+	});
+
+	it("uses the selected third typography proposal only in the modern theme", () => {
+		expect(modernThemeSource).to.include('"IBM Plex Sans"');
+	});
+
+	it("keeps legacy tree-menu sizing while modern raises nested navigation text", () => {
+		for (const fallback of [
+			"var(--monster-tree-menu-font-size-level-1, 1rem)",
+			"var(--monster-tree-menu-font-size-level-2, 1rem)",
+			"var(--monster-tree-menu-font-size-level-3, 0.75rem)",
+			"var(--monster-tree-menu-font-size-deep, 0.70rem)",
+			"var(--monster-tree-menu-font-size-deep, 0.65rem)",
+			"var(--monster-tree-menu-button-min-block-size, auto)",
+		]) {
+			expect(treeMenuSource, fallback).to.include(fallback);
+		}
+
+		for (const modernToken of [
+			"--monster-tree-menu-font-size-level-1: 1rem",
+			"--monster-tree-menu-font-size-level-2: 0.9375rem",
+			"--monster-tree-menu-font-size-level-3: 0.875rem",
+			"--monster-tree-menu-font-size-deep: 0.875rem",
+			"--monster-tree-menu-button-min-block-size: 2rem",
+		]) {
+			expect(modernThemeSource, modernToken).to.include(modernToken);
+		}
+	});
+});

package/test/cases/components/style/metric-layout.mjs

@@ -0,0 +1,94 @@
+import { readFileSync } from "node:fs";
+import { expect } from "chai";
+
+const componentSources = new Map(
+	["kpi-tile", "metric", "metric-graph"].map((name) => [
+		name,
+		readFileSync(
+			new URL(
+				`../../../../source/components/data/${name}.mjs`,
+				import.meta.url,
+			),
+			"utf8",
+		),
+	]),
+);
+
+const styleSources = new Map(
+	["kpi-tile", "metric", "metric-graph"].map((name) => [
+		name,
+		readFileSync(
+			new URL(
+				`../../../../source/components/data/style/${name}.pcss`,
+				import.meta.url,
+			),
+			"utf8",
+		),
+	]),
+);
+
+const generatedStyleSheets = new Map(
+	["kpi-tile", "metric", "metric-graph"].map((name) => [
+		name,
+		readFileSync(
+			new URL(
+				`../../../../source/components/data/stylesheet/${name}.mjs`,
+				import.meta.url,
+			),
+			"utf8",
+		),
+	]),
+);
+
+describe("Metric card layout", () => {
+	it("uses the same three rows for every default KPI card", () => {
+		for (const [name, source] of styleSources) {
+			expect(source, name).to.include("display: grid");
+			expect(source, name).to.include("height: 12rem");
+			expect(source, name).to.include("box-sizing: border-box");
+			expect(source, name).to.include(
+				"grid-template-rows: 2.75rem 2.5rem minmax(0, 1fr)",
+			);
+
+			const generated = generatedStyleSheets.get(name);
+			expect(generated, name).to.include("display:grid");
+			expect(generated, name).to.include("height:12rem");
+			expect(generated, name).to.include("box-sizing:border-box");
+			expect(generated, name).to.include(
+				"grid-template-rows:2.75rem 2.5rem minmax(0,1fr)",
+			);
+		}
+	});
+
+	it("keeps supporting metric content together in the footer row", () => {
+		expect(componentSources.get("kpi-tile")).to.match(
+			/class="kpi-value" part="value"[\s\S]*data-monster-role="main"[\s\S]*data-monster-role="small"/u,
+		);
+
+		for (const name of ["metric", "metric-graph"]) {
+			expect(componentSources.get(name), name).to.match(
+				/class="metric-footer" part="footer"[\s\S]*class="metric-subtext"/u,
+			);
+		}
+
+		expect(componentSources.get("metric")).to.match(
+			/class="metric-footer" part="footer"[\s\S]*part="metric-change"[\s\S]*prefix:metric-change/u,
+		);
+		expect(componentSources.get("metric-graph")).to.match(
+			/class="metric-footer" part="footer"[\s\S]*class="metric-graph/u,
+		);
+	});
+
+	it("reserves bottom spacing for every footer", () => {
+		expect(styleSources.get("kpi-tile")).to.include(
+			"padding: 0.5rem 0 0.25rem",
+		);
+
+		for (const name of ["metric", "metric-graph"]) {
+			const source = styleSources.get(name);
+			const generated = generatedStyleSheets.get(name);
+			expect(source, name).to.include("padding-block-end: 0.25rem");
+			expect(generated, name).to.include("padding-block-end:.25rem");
+		}
+	});
+});

package/test/cases/components/style/skeleton.mjs

@@ -0,0 +1,69 @@
+import { readFileSync } from "node:fs";
+import { expect } from "chai";
+
+const skeletonSource = readFileSync(
+	new URL("../../../../source/components/style/skeleton.pcss", import.meta.url),
+	"utf8",
+);
+const skeletonMixinSource = readFileSync(
+	new URL(
+		"../../../../source/components/style/mixin/skeleton.pcss",
+		import.meta.url,
+	),
+	"utf8",
+);
+const skeletonStyleSheet = readFileSync(
+	new URL(
+		"../../../../source/components/stylesheet/skeleton.mjs",
+		import.meta.url,
+	),
+	"utf8",
+);
+const fetchBoxStyleSheet = readFileSync(
+	new URL(
+		"../../../../source/components/content/stylesheet/fetch-box.mjs",
+		import.meta.url,
+	),
+	"utf8",
+);
+const themeLabStyle = readFileSync(
+	new URL(
+		"../../../../development/playground/theme/style/main.pcss",
+		import.meta.url,
+	),
+	"utf8",
+);
+
+describe("Skeleton styles", () => {
+	it("fades semantic skeleton fills into the surrounding background", () => {
+		expect(skeletonSource).to.include("var(--monster-bg-color-primary-3)");
+		expect(skeletonMixinSource).to.include(
+			"--monster-skeleton-color: var(--monster-skeleton-fill, $color)",
+		);
+		expect(skeletonMixinSource).to.include("transparent 0%");
+		expect(skeletonMixinSource).to.include("transparent 100%");
+		expect(themeLabStyle).to.match(
+			/\.catalog-skeleton > span\s*\{[\s\S]*?background-color:\s*transparent;/u,
+		);
+
+		for (const generatedStyle of [skeletonStyleSheet, fetchBoxStyleSheet]) {
+			expect(generatedStyle).to.include(
+				"--monster-skeleton-color:var(--monster-skeleton-fill,var(--monster-bg-color-primary-3))",
+			);
+			expect(generatedStyle).to.include("transparent 0%");
+			expect(generatedStyle).to.include("transparent 100%");
+		}
+	});
+
+	it("disables skeleton animation when reduced motion is requested", () => {
+		expect(skeletonSource).to.match(
+			/@media \(prefers-reduced-motion:\s*reduce\)[\s\S]*?animation:\s*none;/u,
+		);
+		for (const generatedStyle of [skeletonStyleSheet, fetchBoxStyleSheet]) {
+			expect(generatedStyle).to.include(
+				"@media (prefers-reduced-motion:reduce)",
+			);
+			expect(generatedStyle).to.include("animation:none");
+		}
+	});
+});