@internetstiftelsen/styleguide 5.1.14-beta.0.5 → 5.1.14-beta.0.6

package/src/molecules/table-advanced/table-advanced.js

@@ -1,44 +1,300 @@
-import * as agGrid from "ag-grid-community";
-import {
-	ModuleRegistry,
-	AllCommunityModule
-} from 'ag-grid-community';
-
-ModuleRegistry.registerModules([
-	AllCommunityModule,
-]);
-
-let gridApi;
-
-const gridOptions = {
-	columnDefs: [
-		{ field: "athlete", width: 150 },
-		{ field: "age", width: 90 },
-		{ field: "country", width: 150 },
-		{ field: "year", width: 90 },
-		{ field: "date", width: 150 },
-		{ field: "sport", width: 150 },
-		{ field: "gold", width: 100 },
-		{ field: "silver", width: 100 },
-		{ field: "bronze", width: 100 },
-		{ field: "total", width: 100 },
-	],
+import * as agGrid from 'ag-grid-community';
+import { themeQuartz, iconSetMaterial } from 'ag-grid-community';
+import { ModuleRegistry, AllCommunityModule } from 'ag-grid-community';
+
+ModuleRegistry.registerModules([AllCommunityModule]);
+
+// ---- THEME -----------------------------------------------------------
+const iisTheme = themeQuartz
+	.withPart(iconSetMaterial)
+	.withParams({
+		accentColor: '#0477CE',
+		backgroundColor: '#FFFFFF',
+		borderRadius: 3,
+		browserColorScheme: 'light',
+		cellTextColor: '#1F2A36',
+		chromeBackgroundColor: { ref: 'foregroundColor', mix: 0.07, onto: 'backgroundColor' },
+		fontFamily: 'inherit',
+		fontSize: 16,
+		foregroundColor: '#1F2A36',
+		headerBackgroundColor: '#D8D8D8',
+		headerFontFamily: 'inherit',
+		headerFontSize: 16,
+		headerFontWeight: 400,
+		headerTextColor: '#1F2A36',
+		oddRowBackgroundColor: '#EDEDED',
+		wrapperBorderRadius: 3,
+	});
+
+// ---- RENDERERS -------------------------------------------------------
+const renderStatusIcon = (params) => {
+	const status = params.value;
+	if (!status) return '';
+	const map = {
+		passed:        { icon: '#icon-security-variant', color: '#25c279', label: 'Passed' },
+		failed:        { icon: '#icon-unsecure-variant', color: '#d9002f', label: 'Failed' },
+		warning:       { icon: '#icon-warning-variant',  color: '#f99963', label: 'Warning' },
+		error:         { icon: '#icon-unsecure-variant', color: '#8E9297', label: 'Error' },
+		not_tested:    { icon: '#icon-unsecure-variant', color: '#d8d8d8', label: 'Not tested' },
+		informational: { icon: '#icon-info-variant',     color: '#50b2fc', label: 'Informational' },
+	};
+	const { icon, color, label } = map[status] || {};
+	return icon
+		? `<span class="cell-center">
+         <svg class="status-icon" fill="${color}" width="20" height="20" aria-label="${label}">
+           <use xlink:href="${icon}"></use>
+         </svg>
+         <span class="status-text">${label}</span>
+       </span>`
+		: status;
 };
 
-(function fillLarge() {
-	setWidthAndHeight("100%");
-})();
+// ---- HELPERS ---------------------------------------------------------
+const titleCase = (s) => s.replace(/[_\-\.]+/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+
+function buildColumnDefsFromData(data) {
+	if (!Array.isArray(data) || data.length === 0) return [{ headerName: 'No Data', field: 'noData' }];
+	const sample = data[0];
+
+	// Internet.nl-like shape
+	if (sample && sample.results && typeof sample.results === 'object') {
+		const base = [
+			{ headerName: 'Domain', field: 'domain', minWidth: 200 },
+			{ headerName: 'Score (%)', field: 'score_percent', filter: 'agNumberColumnFilter', minWidth: 140 },
+			{
+				headerName: 'Report',
+				field: 'report_url',
+				cellRenderer: (p) => (p.value ? `<a href="${p.value}" target="_blank" rel="noopener">View</a>` : ''),
+				maxWidth: 220,
+				flex: 0,
+			},
+		];
+
+		const resultKeys = Object.keys(sample.results);
+		const childColIds = [];
+		const children = resultKeys.map((k, idx) => {
+			const colId = `results.${k}.status`;
+			childColIds.push(colId);
+			return {
+				colId,
+				headerName: titleCase(k),
+				field: colId,
+				cellRenderer: renderStatusIcon,
+				tooltipValueGetter: (p) => {
+					const since = p?.data?.results?.[k]?.since;
+					return since ? `Since: ${since}` : '';
+				},
+				cellClass: (p) => `status-${p.value}`,
+				minWidth: 150,
+				sortable: true,
+				filter: true,
+				hide: idx > 0,                 // start collapsed (only first child visible)
+			};
+		});
+
+		base.push({
+			headerName: 'Results',
+			headerGroupComponent: 'ExpandHeader',          // 👈 correct prop for groups
+			headerGroupComponentParams: {
+				childColIds,          // toggle these children together
+				startExpanded: false, // set true to start expanded
+			},
+			children,
+		});
+
+		return base;
+	}
+
+	// Generic fallback
+	const cols = [];
+	for (const [key, val] of Object.entries(sample)) {
+		if (val && typeof val === 'object' && !Array.isArray(val)) {
+			for (const subKey of Object.keys(val)) {
+				if (val[subKey] !== null && typeof val[subKey] !== 'object') {
+					cols.push({
+						headerName: `${titleCase(key)} • ${titleCase(subKey)}`,
+						field: `${key}.${subKey}`,
+						sortable: true,
+						filter: true,
+						minWidth: 140,
+					});
+				}
+			}
+		} else {
+			cols.push({
+				headerName: titleCase(key),
+				field: key,
+				sortable: true,
+				filter: true,
+				minWidth: 120,
+			});
+		}
+	}
+	return cols;
+}
+
+
+
+// Version-safe column state helper
+function setColumnsState(params, { state = [], defaultState = { hide: false, pinned: null } }) {
+	const columnApi =
+		params.columnApi ||
+		(params.api && typeof params.api.getColumnApi === 'function' ? params.api.getColumnApi() : null);
+
+	if (columnApi && typeof columnApi.applyColumnState === 'function') {
+		columnApi.applyColumnState({ state, defaultState });
+		return;
+	}
+	if (params.api && typeof params.api.applyColumnState === 'function') {
+		params.api.applyColumnState({ state, defaultState });
+		return;
+	}
+	if (columnApi && typeof columnApi.setColumnState === 'function') {
+		if (typeof columnApi.resetColumnState === 'function') columnApi.resetColumnState();
+		columnApi.setColumnState(state);
+		return;
+	}
+	console.warn('No applicable column state API found in this AG Grid version.');
+}
+
+// Per-grid responsive visibility
+function applyResponsiveVisibility(params, el) {
+	const w = el?.getBoundingClientRect().width || el?.clientWidth || 0;
+	if (w < 520) {
+		setColumnsState(params, {
+			state: [
+				{ colId: 'domain', pinned: 'left' },
+				{ colId: 'results.rpki.status', hide: true },
+				{ colId: 'results.security_options.status', hide: true },
+				{ colId: 'results.ipv6.status', hide: true },
+			],
+		});
+	} else if (w < 760) {
+		setColumnsState(params, {
+			state: [
+				{ colId: 'domain', pinned: null },
+				{ colId: 'results.rpki.status', hide: true },
+			],
+		});
+	} else {
+		setColumnsState(params, { state: [] });
+	}
+}
+
+
+// ---- EXPAND/COLLAPSE GROUP HEADER -----------------------------------
+class ExpandHeader {
+	init(params) {
+		this.params = params;
+		this.childColIds = params.childColIds || [];
+		this.expanded = !!params.startExpanded;
 
+		// Debug: prove we mounted
+		console.log('[ExpandHeader] init for group:', params.displayName, 'children:', this.childColIds);
 
-function setWidthAndHeight(size) {
-	const eGridDiv = document.querySelector("#myGrid");
-	eGridDiv.style.setProperty("width", size);
-	eGridDiv.style.setProperty("height", size);
+		// Create a full-width, clickable label (no AG classes needed)
+		const e = document.createElement('div');
+		e.className = 'expand-header';
+		e.style.cssText = 'display:flex;align-items:center;gap:6px;cursor:pointer;width:100%;';
+		e.innerHTML = `
+      <span class="expander" style="display:inline-block;transition:transform .15s">▶</span>
+      <span class="title">${params.displayName ?? 'Group'}</span>
+    `;
+
+		e.addEventListener('click', () => {
+			this.expanded = !this.expanded;
+			this.updateIcon();
+			toggleChildColumnsVisibility(params, this.childColIds, this.expanded);
+		});
+
+		this.eGui = e;
+		this.updateIcon();
+
+		// Apply initial expanded state
+		if (this.expanded) {
+			toggleChildColumnsVisibility(params, this.childColIds, true);
+		}
+	}
+	updateIcon() {
+		const icon = this.eGui.querySelector('.expander');
+		if (icon) icon.style.transform = this.expanded ? 'rotate(90deg)' : 'rotate(0deg)';
+	}
+	getGui() { return this.eGui; }
+	refresh() { return true; }
 }
 
-const gridDiv = document.querySelector("#myGrid");
-gridApi = agGrid.createGrid(gridDiv, gridOptions);
+function toggleChildColumnsVisibility(params, colIds, makeVisible) {
+	const columnApi =
+		params.columnApi ||
+		(params.api && typeof params.api.getColumnApi === 'function'
+			? params.api.getColumnApi()
+			: null);
+	if (!columnApi) return;
+	columnApi.setColumnsVisible(colIds, !!makeVisible);
+	params.api?.sizeColumnsToFit?.();
+}
+
+// Factory to create per-grid options with the correct closures
+function makeGridOptionsFor(el) {
+	return {
+		theme: iisTheme,
+		components: { ExpandHeader },
+		defaultColDef: {
+			resizable: true,
+			sortable: true,
+			filter: true,
+			flex: 1,
+			minWidth: 150,
+			unSortIcon: true,
+		},
+		columnDefs: [],
+		rowData: [],
+		async onGridReady(params) {
+			try {
+				// dynamic JSON import based on *this* element's data attribute
+				const attr = el.dataset.json || './table.json';
+				const jsonUrl = new URL(attr, import.meta.url).toString();
+				const mod = await import(/* @vite-ignore */ jsonUrl);
+				const data = mod?.default ?? mod;
+
+				const cols = buildColumnDefsFromData(data);
+				params.api.setGridOption('columnDefs', cols);
+				params.api.setGridOption('rowData', data);
+
+				applyResponsiveVisibility(params, el);
+				params.api.sizeColumnsToFit();
+			} catch (e) {
+				console.error('Dynamic JSON import failed for grid:', el, e);
+			}
+		},
+		onGridSizeChanged(params) {
+			applyResponsiveVisibility(params, el);
+			params.api.sizeColumnsToFit();
+		},
+		animateRows: true,
+	};
+}
+
+// ---- INIT ALL GRIDS --------------------------------------------------
+document.addEventListener('DOMContentLoaded', () => {
+	// Use a class selector so you can have multiple grids;
+	// make sure your HTML uses: <div class="ag-theme-quartz js-ag-grid" data-json="./table1.json"></div>
+	const containers = document.querySelectorAll('.js-ag-grid');
+
+	containers.forEach((el) => {
+		// Ensure theme class + measurable size BEFORE createGrid (each grid separately)
+		if (!el.classList.contains('ag-theme-quartz')) el.classList.add('ag-theme-quartz');
+		//if (!el.style.height) el.style.height = '600px';
+		if (!el.style.width)  el.style.width  = '100%';
+
+		const gridOptions = makeGridOptionsFor(el);
+		const api = agGrid.createGrid(el, gridOptions);
 
-fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
-	.then((response) => response.json())
-	.then((data) => gridApi.setGridOption("rowData", data));
+		// Per-grid ResizeObserver (don’t reuse one global API)
+		const ro = new ResizeObserver(() => {
+			gridOptions.api?.onGridSizeChanged();
+			gridOptions.api?.sizeColumnsToFit();
+		});
+		ro.observe(el);
+	});
+});

package/src/molecules/table-advanced/table-small.json

@@ -0,0 +1,72 @@
+[
+    {
+        "Category": "Modern address (IPv6)",
+        "passed": "43.11%",
+        "info": "0%",
+        "warning": "0%",
+        "failed": "56.89%",
+        "not testable": "0%",
+        "not applicable": "0%",
+        "test error": "0%"
+    },
+    {
+        "Category": "Signed domain name (DNSSEC)",
+        "passed": "52.96%",
+        "info": "0%",
+        "warning": "0%",
+        "failed": "47.04%",
+        "not testable": "0%",
+        "not applicable": "0%",
+        "test error": "0%"
+    },
+    {
+        "Category": "Secure connection following NCSC requirements (HTTPS)",
+        "passed": "19.22%",
+        "info": "0%",
+        "warning": "0%",
+        "failed": "76.6%",
+        "not testable": "0%",
+        "not applicable": "0%",
+        "test error": "4.17%"
+    },
+    {
+        "Category": "Security options",
+        "passed": "1.09%",
+        "info": "0%",
+        "warning": "98.91%",
+        "failed": "0%",
+        "not testable": "0%",
+        "not applicable": "0%",
+        "test error": "0%"
+    },
+    {
+        "Category": "Route authorisation (RPKI)",
+        "passed": "92%",
+        "info": "0%",
+        "warning": "0%",
+        "failed": "8%",
+        "not testable": "0%",
+        "not applicable": "0%",
+        "test error": "0%"
+    },
+    {
+        "Category": "Extra Fields",
+        "passed": "2.43%",
+        "info": "5.61%",
+        "warning": "0.99%",
+        "failed": "90.81%",
+        "not testable": "0%",
+        "not applicable": "0%",
+        "test error": "0.16%"
+    },
+    {
+        "Category": "A",
+        "passed": "42.16%",
+        "info": "1.12%",
+        "warning": "19.98%",
+        "failed": "55.87%",
+        "not testable": "0%",
+        "not applicable": "0%",
+        "test error": "0.87%"
+    }
+]