@internetstiftelsen/styleguide 5.1.13 → 5.1.14-beta.0.1

package/package.json

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

@@ -89,6 +89,8 @@
 	}
 
 	@include bem.m(heat) {
+		position: relative;
+
 		&[value]::-webkit-progress-value,
 		&[value]::-webkit-meter-optimum-value {
 			border-radius: 0;
@@ -104,6 +106,21 @@
 			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/molecules/table/_table.scss

@@ -286,7 +286,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,14 @@
+@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

@@ -0,0 +1,44 @@
+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));

package/src/organisms/selectable/_selectable.scss

@@ -1,5 +1,6 @@
 @charset "UTF-8";
 @use "sass:color";
+@use "sass:math";
 @use '../../configurations/mixins' as mixin;
 @use '../../configurations/extends';
 @use '../../configurations/bem' as bem;
@@ -42,4 +43,39 @@
 	@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,
+				> div:not(.wp-block-iis-info):not(.wp-block-image):not(.wp-block-iis-hero):not(.wp-block-iis-grid):not([class*='accordion']),
+				> .wp-block-iis-card,
+				> .wp-block-image > figure,
+				> figure,
+				> blockquote {
+					&:not(.alignfull):not(.alignleft):not(.alignright):not(.alignwide):not(.wp-block-iis-hero) {
+						max-width: calc(#{func.to_rem(612px)} + #{(var.$indent * 2)});
+						margin-right: math.div(var.$grid-gutter-width, 2);
+						margin-left: var.$indent * 2;
+					}
+				}
+
+				> [class*='meta'] {
+					margin-left: var.$indent;
+				}
+
+				> p.preamble {
+					max-width: func.to_rem(612px);
+					margin-left: var.$indent;
+				}
+			}
+		}
+	}
 }