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

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-beta.0.4",
+    "version": "5.1.14-beta.0.6",
     "main": "dist/components.js",
     "ports": {
         "fractal": "3000"

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);

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

@@ -1,5 +1,8 @@
 @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%;
@@ -12,3 +15,73 @@ body {
 	--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;
+}
+
+.ag-grid__wrapper {
+	flex: 1 1 0px;
+	width: 100%;
+}
+
+.ag-grid__inner {
+	height: 100%;
+}
+
+/*.ag-cell,
+.ag-header-cell,
+.ag-header-group-cell,
+.ag-row,
+.ag-spanned-cell-wrapper {
+	visibility: visible;
+}*/
+
+.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,18 @@
+module.exports = {
+	status: 'wip',
+	default: 'Small table',
+
+	context: {
+		json: './table-small.json',
+		minHeight: '345px',
+	},
+	variants: [
+		{
+			name: 'Large table',
+			context: {
+				json: './table.json',
+				minHeight: '600px',
+			}
+		},
+	],
+};