@internetstiftelsen/styleguide 5.1.14 → 5.1.15

package/dist/assets/js/youtube.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    destroyPlayer: function() {
+    get destroyPlayer () {
         return destroyPlayer;
     },
-    setupPlayers: function() {
+    get setupPlayers () {
         return setupPlayers;
     }
 });

package/dist/atoms/progress/progress.js

@@ -1,10 +1,14 @@
 "use strict";
 const progressbars = document.querySelectorAll('[data-width-progress]');
-if (progressbars) {
+if (progressbars.length) {
     function progressBarWidths() {
-        progressbars.forEach((container, index)=>{
+        progressbars.forEach((container)=>{
             const width = container.offsetWidth;
-            document.documentElement.style.setProperty(`--progressbar-width`, width + 'px');
+            const value = +container.getAttribute('value') || 0;
+            const max = +container.getAttribute('max') || 100;
+            const percent = Math.round(value / max * 100 / 2) * 2;
+            document.documentElement.style.setProperty('--progressbar-width', width + 'px');
+            document.documentElement.style.setProperty('--progressbar-width-percent', percent + '%');
         });
     }
     window.addEventListener('DOMContentLoaded', progressBarWidths);

package/dist/atoms/textarea/rich-text.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    init: function() {
+    get init () {
         return init;
     },
-    setupTextArea: function() {
+    get setupTextArea () {
         return setupTextArea;
     }
 });

package/dist/components.js

@@ -42,3 +42,4 @@ require("./assets/js/iconToggle");
 require("./molecules/multi-select/multi-select");
 require("./organisms/haveibeenpwned/haveibeenpwned");
 require("./atoms/progress/progress");
+require("./molecules/table-advanced/table-advanced");

package/dist/molecules/modal/modal.js

@@ -5,23 +5,23 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    clearQueue: function() {
+    get clearQueue () {
         return clearQueue;
     },
-    close: function() {
+    get close () {
         return close;
     },
-    onClose: function() {
+    get onClose () {
         return onClose;
     },
-    onOpen: function() {
+    get onOpen () {
         return onOpen;
     },
-    open: function() {
+    get open () {
         return open;
     }
 });

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

@@ -0,0 +1,195 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _aggridcommunity = /*#__PURE__*/ _interop_require_wildcard(require("ag-grid-community"));
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+_aggridcommunity.ModuleRegistry.registerModules([
+    _aggridcommunity.AllCommunityModule
+]);
+// to use iisTheme in an application, pass it to the theme grid option
+const iisTheme = _aggridcommunity.themeQuartz.withPart(_aggridcommunity.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
+});
+let gridApi;
+const gridOptions = {
+    theme: iisTheme,
+    sortable: true,
+    suppressAutoHideAllSortIcons: true,
+    columnDefs: [
+        {
+            headerName: 'Domain',
+            field: 'domain',
+            sortable: true,
+            filter: true
+        },
+        {
+            headerName: 'Score (%)',
+            field: 'score_percent',
+            sortable: true,
+            filter: 'agNumberColumnFilter',
+            width: 120
+        },
+        {
+            headerName: 'Report',
+            field: 'report_url',
+            cellRenderer: (params)=>{
+                return params.value ? `<a href="${params.value}" target="_blank" rel="noopener">View</a>` : '';
+            }
+        },
+        {
+            headerName: 'Results',
+            children: [
+                {
+                    headerName: 'IPv6',
+                    field: 'results.ipv6.status',
+                    sortable: true,
+                    filter: true,
+                    cellClass: (params)=>`status-${params.value}`
+                },
+                {
+                    headerName: 'DNSSEC',
+                    field: 'results.dnssec.status',
+                    sortable: true,
+                    filter: true,
+                    cellClass: (params)=>`status-${params.value}`
+                },
+                {
+                    headerName: 'HTTPS',
+                    field: 'results.https.status',
+                    sortable: true,
+                    filter: true,
+                    cellClass: (params)=>`status-${params.value}`
+                },
+                {
+                    headerName: 'Security Options',
+                    field: 'results.security_options.status',
+                    sortable: true,
+                    filter: true,
+                    cellClass: (params)=>`status-${params.value}`
+                },
+                {
+                    headerName: 'RPKI',
+                    field: 'results.rpki.status',
+                    sortable: true,
+                    filter: true,
+                    cellClass: (params)=>`status-${params.value}`
+                }
+            ]
+        }
+    ]
+};
+(function fillLarge() {
+    setWidthAndHeight("100%");
+})();
+function setWidthAndHeight(size) {
+    const eGridDiv = document.querySelector("#myGrid");
+    eGridDiv.style.setProperty("width", size);
+    eGridDiv.style.setProperty("height", size);
+}
+const gridDiv = document.querySelector("#myGrid");
+gridApi = _aggridcommunity.createGrid(gridDiv, gridOptions);
+fetch('public/assets/json/table.json').then((res)=>_async_to_generator(function*() {
+        const ct = res.headers.get('content-type') || '';
+        if (!res.ok) {
+            const body = yield res.text();
+            throw new Error(`Fetch failed ${res.status} ${res.statusText}\n${body.slice(0, 200)}`);
+        }
+        if (!ct.includes('application/json')) {
+            const body = yield res.text();
+            throw new Error(`Expected JSON, got ${ct}. First 200 chars:\n${body.slice(0, 200)}`);
+        }
+        return res.json();
+    })()).then((data)=>{
+    console.log('Loaded JSON rows:', Array.isArray(data) ? data.length : data);
+}).catch((e)=>{
+    console.error(e);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@internetstiftelsen/styleguide",
-    "version": "5.1.14",
+    "version": "5.1.15",
     "main": "dist/components.js",
     "ports": {
         "fractal": "3000"
@@ -68,6 +68,7 @@
         "@tiptap/extension-paragraph": "^3.4.4",
         "@tiptap/extension-text": "^3.4.4",
         "a11y-toggle": "^2.1.0",
+        "ag-grid-community": "^34.2.0",
         "focus-trap": "^7.6.5",
         "glider-js": "^1.7.9",
         "lodash": "^4.17.21",

package/src/app.scss

@@ -50,6 +50,7 @@
 @use 'molecules/form-control/form-control';
 @use 'molecules/alert/alert';
 @use 'molecules/table/table';
+@use 'molecules/table-advanced/table-advanced';
 @use 'molecules/system-error/system-error';
 @use 'molecules/info-box/info-box';
 @use 'molecules/share/share';

package/src/atoms/icon/exit-fullscreen.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32"><path d="M3 23.43h5.57V29h3.71v-9.29H3v3.71ZM8.57 8.57H3v3.71h9.29V3H8.58v5.57ZM19.71 29h3.71v-5.57h5.57v-3.71H19.7v9.29Zm3.72-20.43V3h-3.71v9.29h9.29V8.58h-5.57Z" style="fill-rule:evenodd"/></svg>

package/src/atoms/icon/fullscreen.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32"><path d="M6.71 19.71H3V29h9.29v-3.71H6.72v-5.57ZM3 12.29h3.71V6.72h5.57V3.01H3v9.29Zm22.29 13h-5.57V29h9.29v-9.29H25.3v5.57ZM19.71 3v3.71h5.57v5.57h3.71V3H19.7Z" style="fill-rule:evenodd"/></svg>

package/src/atoms/progress/_progress.scss

@@ -89,21 +89,38 @@
 	}
 
 	@include bem.m(heat) {
+		position: relative;
+
 		&[value]::-webkit-progress-value,
 		&[value]::-webkit-meter-optimum-value {
 			border-radius: 0;
-			transition: width 5s ease;
+			transition: width .25s ease-out;
 			background: linear-gradient(90deg, rgba(217, 0, 47, 1) 0%, rgba(217, 0, 47, 1) 19.99%, rgba(255, 64, 105, 1) 20%, rgba(255, 64, 105, 1) 39.99%, rgba(249, 153, 99, 1) 40%, rgba(249, 153, 99, 1) 59.99%, rgba(255, 206, 46, 1) 60%, rgba(255, 206, 46, 1) 79.99%, rgba(37, 194, 121, 1) 80%, rgba(37, 194, 121, 1) 89.99%, rgba(25, 135, 84, 1) 90%, rgba(25, 135, 84, 1) 100%);
 			background-size: var(--progressbar-width) 100%; /* The value is calculated by JS and set in the DOM */
 			background-repeat: no-repeat;
 		}
 
 		&::-moz-progress-bar {
-			transition: width 5s ease;
+			transition: width .25s ease-out;
 			background: linear-gradient(90deg, rgba(217, 0, 47, 1) 0%, rgba(217, 0, 47, 1) 19.99%, rgba(255, 64, 105, 1) 20%, rgba(255, 64, 105, 1) 39.99%, rgba(249, 153, 99, 1) 40%, rgba(249, 153, 99, 1) 59.99%, rgba(255, 206, 46, 1) 60%, rgba(255, 206, 46, 1) 79.99%, rgba(37, 194, 121, 1) 80%, rgba(37, 194, 121, 1) 89.99%, rgba(25, 135, 84, 1) 90%, rgba(25, 135, 84, 1) 100%);
 			background-size: var(--progressbar-width) 100%; /* The value is calculated by JS and set in the DOM */
 			background-repeat: no-repeat;
 		}
+
+		&::after {
+			position: absolute;
+			top: 50%;
+			left: var(--progressbar-width-percent);
+			content: attr(data-value) '%';
+			display: block;
+			color: colors.$color-cyberspace;
+			transform: translateX(-100%) translateY(-50%);
+			padding-right: func.rhythm(1);
+			color: colors.$color-snow;
+			text-shadow: 0 0 5px colors.$color-cyberspace;
+			font-size: var.$size-base * 1.2;
+			line-height: 1;
+		}
 	}
 }
 
@@ -119,4 +136,15 @@
 	@include bem.m(large) {
 		font-size: var.$size-base * 1.5;
 	}
+
+	@include bem.m(hidden) {
+		span {
+			@include mixin.visuallyhidden;
+		}
+
+		> progress,
+		> meter {
+			margin-left: 0;
+		}
+	}
 }

package/src/atoms/progress/progress.config.js

@@ -15,7 +15,8 @@ module.exports = {
 			context: {
 				heat: true,
 				meter: false,
-				value: '100'
+				value: '100',
+				hidden_label: true
 			}
 		},
 		{

package/src/atoms/progress/progress.js

@@ -1,10 +1,15 @@
-const progressbars = document.querySelectorAll('[data-width-progress]')
+const progressbars = document.querySelectorAll('[data-width-progress]');
 
-if (progressbars) {
+if (progressbars.length) {
 	function progressBarWidths() {
-		progressbars.forEach((container, index) => {
+		progressbars.forEach((container) => {
 			const width = container.offsetWidth;
-			document.documentElement.style.setProperty(`--progressbar-width`, width + 'px');
+			const value = +container.getAttribute('value') || 0;
+			const max = +container.getAttribute('max') || 100;
+			const percent = Math.round((value / max * 100) / 2) * 2;
+
+			document.documentElement.style.setProperty('--progressbar-width', width + 'px');
+			document.documentElement.style.setProperty('--progressbar-width-percent', percent + '%');
 		});
 	}
 

package/src/components.js

@@ -38,3 +38,4 @@ import './assets/js/iconToggle';
 import './molecules/multi-select/multi-select';
 import './organisms/haveibeenpwned/haveibeenpwned';
 import './atoms/progress/progress';
+import './molecules/table-advanced/table-advanced';

package/src/configurations/icons.json

@@ -1 +1 @@
-[{"id":"search","name":"Search"},{"id":"search-domain","name":"Search Domain"},{"id":"arrow-forwards","name":"Arrow Forwards"},{"id":"arrow-backwards","name":"Arrow Backwards"},{"id":"arrow-down","name":"Arrow Down"},{"id":"arrow-variant","name":"Arrow Variant"},{"id":"hamburger","name":"Hamburger"},{"id":"close","name":"Close"},{"id":"close-variant","name":"Close Variant"},{"id":"check","name":"Check"},{"id":"check-variant","name":"Check Variant"},{"id":"quote","name":"Quote"},{"id":"file","name":"File"},{"id":"download","name":"Download"},{"id":"upload","name":"Upload"},{"id":"filter","name":"Filter"},{"id":"read","name":"Read"},{"id":"pin","name":"Pin"},{"id":"user","name":"User"},{"id":"language","name":"Language"},{"id":"linkedin","name":"Linkedin"},{"id":"facebook","name":"Facebook"},{"id":"instagram","name":"Instagram"},{"id":"twitter","name":"Twitter"},{"id":"x","name":"X"},{"id":"external-link","name":"External Link"},{"id":"app-share","name":"App Share"},{"id":"print","name":"Print"},{"id":"chapters","name":"Chapters"},{"id":"article","name":"Article"},{"id":"padlock","name":"Padlock"},{"id":"trash","name":"Trash"},{"id":"link","name":"Link"},{"id":"share","name":"Share"},{"id":"questionmark","name":"Questionmark"},{"id":"info","name":"Info"},{"id":"info-variant","name":"Info Variant"},{"id":"contrast","name":"Contrast"},{"id":"gauge","name":"Gauge"},{"id":"backward-15","name":"Backward 15"},{"id":"step-backwards","name":"Step Backwards"},{"id":"play","name":"Play"},{"id":"step-forwards","name":"Step Forwards"},{"id":"forward-60","name":"Forward 60"},{"id":"pause","name":"Pause"},{"id":"subtitles","name":"Subtitles"},{"id":"author","name":"Author"},{"id":"copy","name":"Copy"},{"id":"speaker","name":"Speaker"},{"id":"mute","name":"Mute"},{"id":"settings","name":"Settings"},{"id":"lte","name":"Lte"},{"id":"wifi","name":"Wifi"},{"id":"reception","name":"Reception"},{"id":"2g","name":"2g"},{"id":"3g","name":"3g"},{"id":"4g","name":"4g"},{"id":"5g","name":"5g"},{"id":"latency","name":"Latency"},{"id":"spinner","name":"Spinner"},{"id":"spinner-white","name":"Spinner White"},{"id":"3d","name":"3d"},{"id":"accessibility","name":"Accessibility"},{"id":"cafe","name":"Cafe"},{"id":"capacity","name":"Capacity"},{"id":"display","name":"Display"},{"id":"email","name":"Email"},{"id":"at","name":"At"},{"id":"headset","name":"Headset"},{"id":"phone","name":"Phone"},{"id":"plus","name":"Plus"},{"id":"podcast","name":"Podcast"},{"id":"richtext-bold","name":"Richtext Bold"},{"id":"richtext-italic","name":"Richtext Italic"},{"id":"richtext-heading-2","name":"Richtext Heading 2"},{"id":"richtext-heading-3","name":"Richtext Heading 3"},{"id":"richtext-bullet-list","name":"Richtext Bullet List"},{"id":"richtext-ordered-list","name":"Richtext Ordered List"},{"id":"streaming","name":"Streaming"},{"id":"time","name":"Time"},{"id":"drag-item","name":"Drag Item"},{"id":"personal-data","name":"Personal Data"},{"id":"security","name":"Security"},{"id":"security-variant","name":"Security Variant"},{"id":"unsecure","name":"Unsecure"},{"id":"unsecure-variant","name":"Unsecure Variant"},{"id":"romance","name":"Romance"},{"id":"shopping","name":"Shopping"},{"id":"warning","name":"Warning"},{"id":"warning-variant","name":"Warning Variant"},{"id":"diamond","name":"Diamond"},{"id":"world","name":"World"},{"id":"table","name":"Table"}]
+[{"id":"search","name":"Search"},{"id":"search-domain","name":"Search Domain"},{"id":"arrow-forwards","name":"Arrow Forwards"},{"id":"arrow-backwards","name":"Arrow Backwards"},{"id":"arrow-down","name":"Arrow Down"},{"id":"arrow-variant","name":"Arrow Variant"},{"id":"hamburger","name":"Hamburger"},{"id":"close","name":"Close"},{"id":"close-variant","name":"Close Variant"},{"id":"check","name":"Check"},{"id":"check-variant","name":"Check Variant"},{"id":"quote","name":"Quote"},{"id":"file","name":"File"},{"id":"download","name":"Download"},{"id":"upload","name":"Upload"},{"id":"filter","name":"Filter"},{"id":"read","name":"Read"},{"id":"pin","name":"Pin"},{"id":"user","name":"User"},{"id":"language","name":"Language"},{"id":"linkedin","name":"Linkedin"},{"id":"facebook","name":"Facebook"},{"id":"instagram","name":"Instagram"},{"id":"twitter","name":"Twitter"},{"id":"x","name":"X"},{"id":"external-link","name":"External Link"},{"id":"app-share","name":"App Share"},{"id":"print","name":"Print"},{"id":"chapters","name":"Chapters"},{"id":"article","name":"Article"},{"id":"padlock","name":"Padlock"},{"id":"trash","name":"Trash"},{"id":"link","name":"Link"},{"id":"share","name":"Share"},{"id":"questionmark","name":"Questionmark"},{"id":"info","name":"Info"},{"id":"info-variant","name":"Info Variant"},{"id":"contrast","name":"Contrast"},{"id":"gauge","name":"Gauge"},{"id":"backward-15","name":"Backward 15"},{"id":"step-backwards","name":"Step Backwards"},{"id":"play","name":"Play"},{"id":"step-forwards","name":"Step Forwards"},{"id":"forward-60","name":"Forward 60"},{"id":"pause","name":"Pause"},{"id":"subtitles","name":"Subtitles"},{"id":"author","name":"Author"},{"id":"copy","name":"Copy"},{"id":"speaker","name":"Speaker"},{"id":"mute","name":"Mute"},{"id":"settings","name":"Settings"},{"id":"lte","name":"Lte"},{"id":"wifi","name":"Wifi"},{"id":"reception","name":"Reception"},{"id":"2g","name":"2g"},{"id":"3g","name":"3g"},{"id":"4g","name":"4g"},{"id":"5g","name":"5g"},{"id":"latency","name":"Latency"},{"id":"spinner","name":"Spinner"},{"id":"spinner-white","name":"Spinner White"},{"id":"3d","name":"3d"},{"id":"accessibility","name":"Accessibility"},{"id":"cafe","name":"Cafe"},{"id":"capacity","name":"Capacity"},{"id":"display","name":"Display"},{"id":"email","name":"Email"},{"id":"at","name":"At"},{"id":"headset","name":"Headset"},{"id":"phone","name":"Phone"},{"id":"plus","name":"Plus"},{"id":"podcast","name":"Podcast"},{"id":"richtext-bold","name":"Richtext Bold"},{"id":"richtext-italic","name":"Richtext Italic"},{"id":"richtext-heading-2","name":"Richtext Heading 2"},{"id":"richtext-heading-3","name":"Richtext Heading 3"},{"id":"richtext-bullet-list","name":"Richtext Bullet List"},{"id":"richtext-ordered-list","name":"Richtext Ordered List"},{"id":"streaming","name":"Streaming"},{"id":"time","name":"Time"},{"id":"drag-item","name":"Drag Item"},{"id":"personal-data","name":"Personal Data"},{"id":"security","name":"Security"},{"id":"security-variant","name":"Security Variant"},{"id":"unsecure","name":"Unsecure"},{"id":"unsecure-variant","name":"Unsecure Variant"},{"id":"romance","name":"Romance"},{"id":"shopping","name":"Shopping"},{"id":"warning","name":"Warning"},{"id":"warning-variant","name":"Warning Variant"},{"id":"diamond","name":"Diamond"},{"id":"world","name":"World"},{"id":"table","name":"Table"},{"id":"fullscreen","name":"Fullscreen"},{"id":"exit-fullscreen","name":"Exit Fullscreen"}]

package/src/molecules/table/_table.scss

@@ -14,6 +14,10 @@
 	border: 0;
 	counter-reset: table-counter;
 
+	&[aria-hidden="true"] {
+		display: none;
+	}
+
 	caption {
 		font-family: var.$font-family-headings;
 		padding-top: func.rhythm(1);
@@ -286,7 +290,7 @@
 		-webkit-overflow-scrolling: touch;
 	}
 
-	@include breakpoint.bp-up(sm) {
+	@include breakpoint.bp-up(lg) {
 		@include bem.b(scroll-indicator) {
 			display: none;
 		}

package/src/molecules/table-advanced/_table-advanced.scss

@@ -0,0 +1,97 @@
+@charset "UTF-8";
+@use '../../configurations/variables' as var;
+@use '../../configurations/extends';
+@use '../../configurations/functions' as func;
+@use '../../configurations/colors/colors' as colors;
+
+body {
+	height: 100%;
+}
+
+:root {
+	--ag-header-font-family: 'Roboto Mono Regular', monospace;
+	--ag-font-family: 'HK Grotesk', sans-serif;
+	--ag-cell-font-family: 'HK Grotesk', sans-serif;
+	--ag-header-font-size: 15px;
+	--ag-font-size: 16px;
+}
+
+.ag-header-cell,
+.ag-header-cell-comp-wrapper {
+	text-shadow: 0 1px 0 colors.$color-snow;
+}
+
+/* Always show sort icons in headers */
+.ag-header-cell .ag-sort-ascending-icon {
+	opacity: 1 !important;
+	visibility: visible !important;
+}
+
+/* Ensure the "unsorted" chevrons render when nothing is sorted yet */
+.ag-header-cell .ag-sort-none-icon {
+	display: inline-block !important;
+}
+
+.ag-grid {
+	display: flex;
+	flex-direction: column;
+
+	&.has-fullscreen {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100vw;
+		height: 100vh;
+		z-index: func.z_index(foreground);
+		background-color: colors.$color-ash;
+		padding-left: func.rhythm(1);
+		padding-right: func.rhythm(1);
+		padding-bottom: func.rhythm(1);
+	}
+}
+
+.ag-root-wrapper {
+	border-top: 0;
+}
+
+.ag-grid__wrapper {
+	flex: 1 1 0px;
+	width: 100%;
+}
+
+.ag-grid__inner {
+	height: 100%;
+}
+
+.ag-cell {
+	display: inline-flex;
+}
+
+.ag-cell span {
+	display: flex;
+	align-items: center;
+}
+
+.ag-cell span a {
+	@extend %link-styles;
+
+	line-height: initial;
+}
+
+.ag-cell svg {
+	margin-right: func.rhythm(1);
+}
+
+/* Vertically center any cells that render your icon+label markup */
+.ag-cell .cell-center {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+}
+
+/* Optional: make sort icons always visible a bit stronger */
+.ag-header-cell .ag-sort-indicator-icon { opacity: 1; }
+
+.ag-header-group-cell-label.expand-header { cursor: pointer; }
+.ag-header-group-cell-label.expand-header:hover { opacity: .9; }
+

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

@@ -0,0 +1,22 @@
+module.exports = {
+	status: 'wip',
+	default: 'Small table',
+
+	context: {
+		json: './table-small.json',
+		minHeight: '345px',
+		id: 'tableSmall',
+		expandable: false
+	},
+	variants: [
+		{
+			name: 'Large table',
+			context: {
+				json: './table.json',
+				minHeight: '600px',
+				id: 'tableLarge',
+				expandable: true
+			}
+		},
+	],
+};