@internetstiftelsen/styleguide 5.1.14-beta.0.6 → 5.1.14

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: Object.getOwnPropertyDescriptor(all, name).get
+        get: all[name]
     });
 }
 _export(exports, {
-    get destroyPlayer () {
+    destroyPlayer: function() {
         return destroyPlayer;
     },
-    get setupPlayers () {
+    setupPlayers: function() {
         return setupPlayers;
     }
 });

package/dist/atoms/progress/progress.js

@@ -1,14 +1,10 @@
 "use strict";
 const progressbars = document.querySelectorAll('[data-width-progress]');
-if (progressbars.length) {
+if (progressbars) {
     function progressBarWidths() {
-        progressbars.forEach((container)=>{
+        progressbars.forEach((container, index)=>{
             const width = container.offsetWidth;
-            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 + '%');
+            document.documentElement.style.setProperty(`--progressbar-width`, width + 'px');
         });
     }
     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: Object.getOwnPropertyDescriptor(all, name).get
+        get: all[name]
     });
 }
 _export(exports, {
-    get init () {
+    init: function() {
         return init;
     },
-    get setupTextArea () {
+    setupTextArea: function() {
         return setupTextArea;
     }
 });

package/dist/components.js

@@ -42,4 +42,3 @@ 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: Object.getOwnPropertyDescriptor(all, name).get
+        get: all[name]
     });
 }
 _export(exports, {
-    get clearQueue () {
+    clearQueue: function() {
         return clearQueue;
     },
-    get close () {
+    close: function() {
         return close;
     },
-    get onClose () {
+    onClose: function() {
         return onClose;
     },
-    get onOpen () {
+    onOpen: function() {
         return onOpen;
     },
-    get open () {
+    open: function() {
         return open;
     }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@internetstiftelsen/styleguide",
-    "version": "5.1.14-beta.0.6",
+    "version": "5.1.14",
     "main": "dist/components.js",
     "ports": {
         "fractal": "3000"
@@ -68,7 +68,6 @@
         "@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,7 +50,6 @@
 @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/progress/_progress.scss

@@ -89,8 +89,6 @@
 	}
 
 	@include bem.m(heat) {
-		position: relative;
-
 		&[value]::-webkit-progress-value,
 		&[value]::-webkit-meter-optimum-value {
 			border-radius: 0;
@@ -106,21 +104,6 @@
 			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;
-		}
 	}
 }
 
@@ -136,15 +119,4 @@
 	@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,8 +15,7 @@ module.exports = {
 			context: {
 				heat: true,
 				meter: false,
-				value: '100',
-				hidden_label: true
+				value: '100'
 			}
 		},
 		{

package/src/atoms/progress/progress.js

@@ -1,15 +1,10 @@
-const progressbars = document.querySelectorAll('[data-width-progress]');
+const progressbars = document.querySelectorAll('[data-width-progress]')
 
-if (progressbars.length) {
+if (progressbars) {
 	function progressBarWidths() {
-		progressbars.forEach((container) => {
+		progressbars.forEach((container, index) => {
 			const width = container.offsetWidth;
-			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 + '%');
+			document.documentElement.style.setProperty(`--progressbar-width`, width + 'px');
 		});
 	}
 

package/src/components.js

@@ -38,4 +38,3 @@ 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/molecules/table/_table.scss

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

package/src/organisms/header/_header.scss

@@ -28,7 +28,6 @@
 	}
 
 	@include bem.b(logotype) {
-		width: 100%;
 		max-width: func.rhythm(10);
 		height: func.rhythm(2.96);
 		overflow: visible;

package/src/organisms/selectable/_selectable.scss

@@ -1,6 +1,5 @@
 @charset "UTF-8";
 @use "sass:color";
-@use "sass:math";
 @use '../../configurations/mixins' as mixin;
 @use '../../configurations/extends';
 @use '../../configurations/bem' as bem;
@@ -10,41 +9,25 @@
 @use '../../vendor/grid/breakpoints' as breakpoint;
 
 @include mixin.organism(selectable) {
-	fieldset button {
-		margin-bottom: func.rhythm(1);
-
-		@include breakpoint.bp-up(md) {
-			margin-bottom: 0;
-		}
+	[aria-hidden="true"] {
+		display: none;
 	}
 
 	@include bem.e(item) {
 		border-top: 1px solid colors.$color-concrete;
-		padding-top: func.rhythm(2);
-		margin-top: func.rhythm(1.5);
-
-		@include breakpoint.bp-up(lg) {
-			padding-top: func.rhythm(4);
-			margin-top: func.rhythm(3);
-		}
+		padding-top: func.rhythm(4);
+		margin-top: func.rhythm(3);
 
 		.js &:not(:first-child):not([aria-hidden]) {
 			display: none;
 		}
-
-		&[aria-hidden="true"] {
-			display: none;
-		}
 	}
 
 	@include bem.m(padded) {
-		padding: func.rhythm(2);
+		padding: func.rhythm(1);
 
-		@include bem.e(item) {
-			.wp-block-graph .wrapper {
-				padding-left: 0;
-				padding-right: 0;
-			}
+		@include breakpoint.bp-up(md) {
+			padding: func.rhythm(2);
 		}
 	}
 
@@ -59,42 +42,4 @@
 	@include bem.m(shadow-large) {
 		@include mixin.card-shadow(colors.$color-cyberspace, 0.2);
 	}
-
-	@include bem.m(article-indent) {
-		@include breakpoint.bp-up(lg) {
-			@include bem.e(item) {
-				> p:not(.preamble),
-				> h2,
-				> h3,
-				> h4,
-				> h5,
-				> h6,
-				> ul,
-				> ol,
-				> .wp-block-image > figure,
-				> figure,
-				> blockquote {
-					&:not(.alignfull):not(.alignleft):not(.alignright):not(.alignwide):not(.wp-block-iis-hero) {
-						max-width: 46.364%;
-						margin-right: math.div(var.$grid-gutter-width, 2);
-						margin-left: calc(var.$indent * 2 - func.rhythm(2));
-					}
-				}
-
-				> [class*='meta'] {
-					margin-left: calc(var.$indent * 2 - func.rhythm(2));
-				}
-
-				> p.preamble {
-					max-width: 46.364%;
-					margin-left: calc(var.$indent * 2 - func.rhythm(2));
-				}
-
-				.wp-block-iis-info {
-					max-width: calc(46.364% + #{(var.$indent * 2)});
-					margin-left: calc(var.$indent * 2 - func.rhythm(2));
-				}
-			}
-		}
-	}
 }

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

@@ -1,195 +0,0 @@
-"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/src/molecules/table-advanced/_table-advanced.scss

@@ -1,87 +0,0 @@
-@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;
-}
-
-.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

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