@internetstiftelsen/styleguide 5.1.14-beta.0.6 → 5.1.15-beta.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@internetstiftelsen/styleguide",
-    "version": "5.1.14-beta.0.6",
+    "version": "5.1.15-beta.0.1",
     "main": "dist/components.js",
     "ports": {
         "fractal": "3000"

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

@@ -94,14 +94,14 @@
 		&[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;

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-advanced/_table-advanced.scss

@@ -35,6 +35,16 @@ body {
 .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;
+	}
 }
 
 .ag-grid__wrapper {
@@ -85,3 +95,4 @@ body {
 
 .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

@@ -5,6 +5,7 @@ module.exports = {
 	context: {
 		json: './table-small.json',
 		minHeight: '345px',
+		id: 'tableSmall'
 	},
 	variants: [
 		{
@@ -12,6 +13,7 @@ module.exports = {
 			context: {
 				json: './table.json',
 				minHeight: '600px',
+				id: 'tableLarge'
 			}
 		},
 	],

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

@@ -298,3 +298,16 @@ document.addEventListener('DOMContentLoaded', () => {
 		ro.observe(el);
 	});
 });
+
+// ---- TOGGLE FULLSCREEN CLASS ON PARENT CONTAINER WHEN CLICKING FULLSCREEN BUTTON ----
+document.querySelectorAll('[data-ag-grid-fullscreen]').forEach((btn) => {
+	btn.addEventListener('click', (e) => {
+
+		// Find the nearest parent container for this button
+		const gridEl = btn.closest('.js-ag-grid');
+		if (!gridEl) return;
+
+		// Toggle fullscreen class only for this specific element
+		gridEl.classList.toggle('has-fullscreen');
+	});
+});

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;