@internetstiftelsen/styleguide 5.1.14-beta.0.5 → 5.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@internetstiftelsen/styleguide",
-    "version": "5.1.14-beta.0.5",
+    "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

@@ -286,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;
@@ -14,23 +13,10 @@
 		display: none;
 	}
 
-	fieldset button {
-		margin-bottom: func.rhythm(1);
-
-		@include breakpoint.bp-up(md) {
-			margin-bottom: 0;
-		}
-	}
-
 	@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;
@@ -38,13 +24,10 @@
 	}
 
 	@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/src/molecules/table-advanced/_table-advanced.scss

@@ -1,14 +0,0 @@
-@charset "UTF-8";
-@use '../../configurations/variables' as var;
-
-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;
-}

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

@@ -1,44 +0,0 @@
-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 },
-	],
-};
-
-(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 = agGrid.createGrid(gridDiv, gridOptions);
-
-fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
-	.then((response) => response.json())
-	.then((data) => gridApi.setGridOption("rowData", data));