@internetstiftelsen/styleguide 3.0.8 → 3.0.10-beta.0.1

package/dist/molecules/modal/modal.js

@@ -187,7 +187,6 @@ function display() {
 	(0, _focusTrap2.default)(active.el);
 
 	active.el.setAttribute('aria-hidden', 'false');
-	active.el.setAttribute('data-a11y-toggle-open', 'true');
 
 	if (active.settings.onOpen) {
 		active.settings.onOpen(active.id, active.el);
@@ -255,7 +254,6 @@ function dispatchOnCloseHandlers(el, id) {
 function close() {
 	if (active) {
 		active.el.setAttribute('aria-hidden', 'true');
-		active.el.removeAttribute('data-a11y-toggle-open');
 
 		if (active.settings.onClose) {
 			active.settings.onClose(active.id);

package/dist/organisms/tabs/tabs.js

@@ -70,6 +70,15 @@ window.a11yTabs = function tabsComponentIIFE(global, document) {
 		this.tabList.addEventListener('keydown', this.eventCallback, false);
 
 		tabInstances.set(this.element, this);
+
+		this.eventCallback = handleEvents.bind(this); // eslint-disable-line
+		this.tabList.addEventListener('click', this.eventCallback, false);
+		this.tabList.addEventListener('keydown', this.eventCallback, false);
+
+		tabInstances.set(this.element, this);
+
+		// New line to select the correct tab based on URL hash
+		this.selectTabFromHash(); // Call the new method after setup
 	};
 
 	TabComponent.prototype = {
@@ -126,6 +135,22 @@ window.a11yTabs = function tabsComponentIIFE(global, document) {
 			this.tabPanels[index].focus();
 
 			return this;
+		},
+		/**
+   * Selects a tab based on the URL hash
+   */
+		selectTabFromHash: function selectTabFromHash() {
+			var hash = global.location.hash;
+
+			if (hash) {
+				var targetId = hash.substring(1); // Remove the '#' character
+				var targetIndex = this.tabLinks.findIndex(function (link) {
+					return link.id === targetId;
+				});
+				if (targetIndex !== -1) {
+					this.handleTabInteraction(targetIndex);
+				}
+			}
 		}
 	};
 

package/dist/organisms/timeline/openTimelineItem.js

@@ -0,0 +1,54 @@
+'use strict';
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+// DUMMY TIMELINE ITEM OPEN/CLOSE
+function wrap(el, wrapper) {
+	el.parentNode.insertBefore(wrapper, el);
+	wrapper.classList.add('wrapper');
+	wrapper.appendChild(el);
+}
+
+var timeLineItems = document.querySelectorAll('.js-timeline-item');
+var timeLineItemScrollPosition = 0;
+
+[].forEach.call(timeLineItems, function (timeLineItem) {
+	var timeLineItemLink = timeLineItem.querySelector('a');
+	var timeLineItemClose = timeLineItem.querySelector('.js-timeline-item-close');
+	var timeLineItemBottomClose = timeLineItem.querySelector('.js-timeline-item-bottom-close');
+
+	timeLineItemLink.addEventListener('click', function () {
+		timeLineItemScrollPosition = window.pageYOffset;
+		sessionStorage.setItem('scroll-position', timeLineItemScrollPosition);
+
+		if (!timeLineItem.classList.contains('is-open')) {
+			timeLineItem.classList.add('is-open');
+			timeLineItem.closest('.row').classList.add('row-has-open-child');
+
+			// Wrap open timeline item
+			wrap(timeLineItem.querySelector('.wp-block-iis-timeline-post'), document.createElement('div'));
+		}
+	});
+
+	timeLineItemClose.addEventListener('click', function () {
+		timeLineItem.classList.remove('is-open');
+		timeLineItem.closest('.row').classList.remove('row-has-open-child');
+
+		// Destroy generated wrapper
+		var wrapper = timeLineItemClose.nextElementSibling;
+		wrapper.replaceWith.apply(wrapper, _toConsumableArray(wrapper.childNodes));
+
+		var top = sessionStorage.getItem('scroll-position');
+		if (top !== null) {
+			window.scrollTo(0, parseInt(top, 10));
+		}
+		sessionStorage.removeItem('scroll-position');
+
+		// Trigger scroll event to reveal timeline items not yet parallaxed into view
+		window.dispatchEvent(new CustomEvent('scroll'));
+	});
+
+	timeLineItemBottomClose.addEventListener('click', function () {
+		timeLineItemClose.click();
+	});
+});

package/dist/organisms/timeline/timeline.js

@@ -141,56 +141,4 @@ if (progressBar) {
 		animateProgressBar();
 		decadeIsVisible();
 	});
-}
-
-// DUMMY TIMELINE ITEM OPEN/CLOSE
-// function wrap(el, wrapper) {
-// 	el.parentNode.insertBefore(wrapper, el);
-// 	wrapper.classList.add('wrapper');
-// 	wrapper.appendChild(el);
-// }
-//
-// const timeLineItems = document.querySelectorAll('.js-timeline-item');
-// let timeLineItemScrollPosition = 0;
-//
-// [].forEach.call(timeLineItems, (timeLineItem) => {
-// 	const timeLineItemLink = timeLineItem.querySelector('a');
-// 	const timeLineItemClose = timeLineItem.querySelector('.js-timeline-item-close');
-// 	const timeLineItemBottomClose = timeLineItem.querySelector('.js-timeline-item-bottom-close');
-//
-// 	timeLineItemLink.addEventListener('click', () => {
-// 		timeLineItemScrollPosition = window.pageYOffset;
-// 		sessionStorage.setItem('scroll-position', timeLineItemScrollPosition);
-//
-// 		if (!timeLineItem.classList.contains('is-open')) {
-// 			timeLineItem.classList.add('is-open');
-// 			timeLineItem.closest('.row').classList.add('row-has-open-child');
-//
-// 			// Wrap open timeline item
-// 			wrap(timeLineItem.querySelector('.wp-block-iis-timeline-post'),
-//			document.createElement('div'));
-// 		}
-// 	});
-//
-// 	timeLineItemClose.addEventListener('click', () => {
-// 		timeLineItem.classList.remove('is-open');
-// 		timeLineItem.closest('.row').classList.remove('row-has-open-child');
-//
-// 		// Destroy generated wrapper
-// 		const wrapper = timeLineItemClose.nextElementSibling;
-// 		wrapper.replaceWith(...wrapper.childNodes);
-//
-// 		const top = sessionStorage.getItem('scroll-position');
-// 		if (top !== null) {
-// 			window.scrollTo(0, parseInt(top, 10));
-// 		}
-// 		sessionStorage.removeItem('scroll-position');
-//
-// 		// Trigger scroll event to reveal timeline items not yet parallaxed into view
-// 		window.dispatchEvent(new CustomEvent('scroll'));
-// 	});
-//
-// 	timeLineItemBottomClose.addEventListener('click', () => {
-// 		timeLineItemClose.click();
-// 	});
-// });
+}

package/package.json

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

package/src/app.js

@@ -37,7 +37,7 @@ if (demoModal) {
 			content: '<p>My modal content.</p>',
 			actions: [
 				{
-					text: 'Close modal',
+					text: 'Open modal',
 					color: 'peacock-light',
 					modifier: 'primary',
 					attrs: {

package/src/molecules/modal/modal.js

@@ -164,7 +164,6 @@ function display() {
 	focusTrap(active.el);
 
 	active.el.setAttribute('aria-hidden', 'false');
-	active.el.setAttribute('data-a11y-toggle-open', 'true');
 
 	if (active.settings.onOpen) {
 		active.settings.onOpen(active.id, active.el);
@@ -230,7 +229,6 @@ function dispatchOnCloseHandlers(el, id) {
 function close() {
 	if (active) {
 		active.el.setAttribute('aria-hidden', 'true');
-		active.el.removeAttribute('data-a11y-toggle-open');
 
 		if (active.settings.onClose) {
 			active.settings.onClose(active.id);

package/src/molecules/table/_table.scss

@@ -96,7 +96,7 @@
 	}
 }
 
-@keyframes pulse {
+@keyframes xPulse {
 	0% {
 		right: 0;
 		opacity: 1;
@@ -245,7 +245,7 @@
 		right: rhythm(3);
 		width: rhythm(7);
 		height: 0;
-		animation: pulse 2s infinite;
+		animation: xPulse 2s infinite;
 		font-family: $font-family-mono;
 		font-size: 80%;
 		text-transform: uppercase;
@@ -257,7 +257,7 @@
 		z-index: z_index(background);
 		top: -#{rem(4px)};
 		right: 0;
-		animation: pulse 2s infinite;
+		animation: xPulse 2s infinite;
 		font-family: $font-family-mono;
 	}
 }

package/src/organisms/hero/_hero--bbk.scss

@@ -39,6 +39,34 @@
 				padding-bottom: rhythm(10);
 			}
 		}
+
+		@include e(button) {
+			position: absolute;
+			bottom: 0;
+			transform: translateY(50%);
+
+			@extend %box-shadow;
+		}
+
+		@include e(text) {
+			color: $color-snow;
+			margin-left: rhythm(4);
+			transition: opacity 0.25s ease;
+			overflow: hidden;
+			opacity: 1;
+
+			&.is-minimized {
+				opacity: 0;
+			}
+
+			@include bp-up(md) {
+				max-width: 60%;
+			}
+
+			@include bp-up(lg) {
+				max-width: 60%;
+			}
+		}
 	}
 
 	@include e(gauge) {
@@ -110,32 +138,4 @@
 			left: -#{rem(20px)};
 		}
 	}
-
-	@include e(button) {
-		position: absolute;
-		bottom: 0;
-		transform: translateY(50%);
-
-		@extend %box-shadow;
-	}
-
-	@include e(text) {
-		color: $color-snow;
-		margin-left: rhythm(4);
-		transition: opacity 0.25s ease;
-		overflow: hidden;
-		opacity: 1;
-
-		&.is-minimized {
-			opacity: 0;
-		}
-
-		@include bp-up(md) {
-			max-width: 60%;
-		}
-
-		@include bp-up(lg) {
-			max-width: 60%;
-		}
-	}
 }

package/src/organisms/hero/_hero.scss

@@ -62,10 +62,16 @@
 	}
 
 	@include e(paragraph) {
+		color: $color-cyberspace;
+
 		@include plumber(
 			$font-size: 2.5,
 			$line-height: 3
 		);
+
+		@include bp-up(sm) {
+			color: $color-snow;
+		}
 	}
 
 	@include e(tags) {
@@ -196,6 +202,10 @@
 			}
 		}
 
+		@include e(paragraph) {
+			color: $color-cyberspace;
+		}
+
 		&.alignfull {
 			@include e(caption) {
 				.wrapper {

package/src/organisms/hero/hero.config.js

@@ -22,7 +22,7 @@ module.exports = {
 				limited_width: true,
 				has_radius: true,
 				has_buttons: false,
-				text: 'Nästan alla i Sverige använder internet – men hur meningsfull är tiden vi spenderar där? I rapporten Svenskarna och internet 2019 frågar vi för första gången om meningsfullhet, och det syns stora skillnader mellan olika aktiviteter. Tid på sociala medier tycker bara var fjärde är meningsfull.',
+				text: 'Nästan alla i Sverige använder internet – men hur meningsfull är tiden vi spenderar där? I rapporten Svenskarna och internet 2019 frågar vi för första gången om meningsfullhet, och det syns stora skillnader mellan olika aktiviteter.',
 			}
 		},
 		{

package/src/organisms/tabs/tabs.config.js

@@ -6,12 +6,12 @@ module.exports = {
 			{
 				id: 'tab-1',
 				heading: 'De här',
-				content: '<p>Klinisk och min drink. Reserverad potten var nu en kund, men inte bara protein. Renare TV, uppvärmning för någon, chips start. Antioxidanter eller om barnen orienterade, fotboll framför datorn. Medlemmar i dörren var intakt protein. Läxor fotbollstips lejon kartong bananer. Smartphones och bananer temperatur.</p>'
+				content: '<p>Klinisk och min drink. Reserverad potten var nu en kund, men inte bara protein. Renare TV, uppvärmning för någon, chips start. <a href="#">Antioxidanter</a> eller om barnen orienterade, fotboll framför datorn. Medlemmar i dörren var intakt protein. Läxor fotbollstips lejon kartong bananer. Smartphones och bananer temperatur.</p>'
 			},
 			{
 				id: 'tab-2',
 				heading: 'Tabbarna',
-				content: '<p>Ta färdväg åker rot häst se precis det blev därmed se, söka smultron för ingalunda brunsås fram se vi miljoner jäst olika, groda sällan dunge när tiden fram helt sig dock. För sax blivit redan av där vid upprätthållande omfångsrik det på bra, icke dunge på mjuka groda ser del kan stora. År denna gör erfarenheter häst bland tre ta söka redan år, dimma om händer rot dimma att om själv av sjö, sig stig genom och sorgliga själv verkligen nya där.</p>'
+				content: '<p>Ta färdväg åker rot häst se precis det blev därmed se, <a href="#">söka smultron</a> för ingalunda brunsås fram se vi miljoner jäst olika, groda sällan dunge när tiden fram helt sig dock. För sax blivit redan av där vid upprätthållande omfångsrik det på bra, icke dunge på mjuka groda ser del kan stora. År denna gör erfarenheter häst bland tre ta söka redan år, dimma om händer rot dimma att om själv av sjö, sig stig genom och sorgliga själv verkligen nya där.</p>'
 			},
 			{
 				id: 'tab-3',

package/src/organisms/tabs/tabs.js

@@ -74,6 +74,15 @@ window.a11yTabs = (function tabsComponentIIFE(global, document) {
 		this.tabList.addEventListener('keydown', this.eventCallback, false);
 
 		tabInstances.set(this.element, this);
+
+		this.eventCallback = handleEvents.bind(this); // eslint-disable-line
+		this.tabList.addEventListener('click', this.eventCallback, false);
+		this.tabList.addEventListener('keydown', this.eventCallback, false);
+
+		tabInstances.set(this.element, this);
+
+		// New line to select the correct tab based on URL hash
+		this.selectTabFromHash(); // Call the new method after setup
 	};
 
 	TabComponent.prototype = {
@@ -130,6 +139,19 @@ window.a11yTabs = (function tabsComponentIIFE(global, document) {
 
 			return this;
 		},
+		/**
+		 * Selects a tab based on the URL hash
+		 */
+		selectTabFromHash() {
+			const { hash } = global.location;
+			if (hash) {
+				const targetId = hash.substring(1); // Remove the '#' character
+				const targetIndex = this.tabLinks.findIndex((link) => link.id === targetId);
+				if (targetIndex !== -1) {
+					this.handleTabInteraction(targetIndex);
+				}
+			}
+		},
 	};
 
 	/**