@internetstiftelsen/styleguide 3.0.10-beta.0.4 → 3.0.10

package/dist/molecules/modal/modal.js

@@ -187,6 +187,7 @@ 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);
@@ -254,6 +255,7 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "3.0.10-beta.0.4",
+	"version": "3.0.10",
 	"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: 'Open modal',
+					text: 'Close modal',
 					color: 'peacock-light',
 					modifier: 'primary',
 					attrs: {

package/src/molecules/modal/modal.js

@@ -164,6 +164,7 @@ 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);
@@ -229,6 +230,7 @@ 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

@@ -197,25 +197,27 @@
 	}
 
 	@include m(lines) {
-		tr {
-			background-image:
-				linear-gradient(
-					to right,
-					$color-cyberspace,
-					$color-cyberspace 2px,
-					transparent 2px,
-					transparent 6px
-				);
-			background-repeat: repeat-x;
-			background-position: bottom left;
-			background-size: 6px 1px;
-		}
+		tbody {
+			tr {
+				background-image:
+					linear-gradient(
+							to right,
+							$color-cyberspace,
+							$color-cyberspace 2px,
+							transparent 2px,
+							transparent 6px
+					);
+				background-repeat: repeat-x;
+				background-position: bottom left;
+				background-size: 6px 1px;
+			}
 
-		td,
-		th {
-			padding-top: rhythm(2);
-			padding-bottom: rhythm(2);
-			border: 0;
+			td,
+			th {
+				padding-top: rhythm(2);
+				padding-bottom: rhythm(2);
+				border: 0;
+			}
 		}
 
 		tfoot {

package/src/organisms/accordion/_accordion.scss

@@ -110,6 +110,7 @@
 
 .js {
 	.js-accordion {
+
 		@include e(header) {
 			border-bottom: 1px solid $color-snow;
 
@@ -248,6 +249,12 @@
 		margin-bottom: 0;
 		padding-top: 0;
 		padding-bottom: 0;
+
+		&:last-of-type {
+			> button {
+				border-bottom: 0;
+			}
+		}
 	}
 
 	@include e(logo) {

package/src/organisms/accordion/accordion.config.js

@@ -32,7 +32,7 @@ module.exports = {
 			},
 			{
 				heading: 'Proin faucibus pretium orci',
-				content: false,
+				content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut elit lacinia, feugiat felis sit amet, congue ante. Morbi vel egestas mi. Nulla urna sapien, gravida et nisl ac, maximus euismod ipsum. Vivamus condimentum, massa non convallis hendrerit, orci mi porttitor nisi, at commodo purus magna non nisi. Duis feugiat lectus in sapien mollis, ac volutpat leo elementum. Nullam euismod massa a nulla placerat sagittis. Integer id purus a dolor fermentum mollis vel feugiat dui. Nullam neque diam, mattis nec cursus at, facilisis nec diam.</p><p>Proin faucibus pretium orci, eu tristique augue condimentum at. Suspendisse potenti. Donec ut luctus eros. Nam justo nunc, facilisis lobortis hendrerit sodales, fermentum at purus. Proin eget elementum nulla, nec tincidunt lacus. Mauris massa eros, interdum eget nunc id, molestie semper libero. Vivamus tortor ex, viverra ut varius vel, finibus hendrerit nunc. Morbi pulvinar arcu erat, consectetu mollis leo vulputate eu.</p>',
 				color: false
 			},
 		]

package/src/organisms/hero/_hero.scss

@@ -295,7 +295,15 @@
 		@include e(text) {
 			max-width: 100%;
 
+			@include bp-up(md) {
+				max-width: 90%;
+			}
+
 			@include bp-up(lg) {
+				max-width: 85%;
+			}
+
+			@include bp-up(xxl) {
 				max-width: 70%;
 			}
 
@@ -308,10 +316,6 @@
 					);
 				}
 			}
-
-			@include bp-up(xl) {
-				max-width: 50%;
-			}
 		}
 
 		@include e(link) {

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

@@ -2,6 +2,7 @@ module.exports = {
 	status: 'ready',
 
 	context: {
+		updateURL: false,
 		tab_item: [
 			{
 				id: 'tab-1',
@@ -28,5 +29,19 @@ module.exports = {
 				content: '<p>Dock upprätthållande ta faktor sällan dimmhöljd ingalunda mjuka, vidsträckt bra tidigare vemod samma att lax redan, bra oss strand dimma redan är. Räv att dimmhöljd söka kunde tiden söka vid när, gör del dag söka vad icke se, göras tidigare vid nu dunge kunde tiden. Gamla det som mjuka gamla hans gamla bra sista fram gamla, tiden trevnadens se hwila när själv nu har kanske hwila, helt i när groda göras rännil verkligen tid så. </p>'
 			}
 		]
-	}
+	},
+	variants: [
+		{
+			name: 'Update URL',
+			context: {
+				updateURL: true
+			}
+		},
+		{
+			name: 'Wrapped Tabs',
+			context: {
+				wrapped: true
+			}
+		}
+	]
 }

package/src/organisms/tabs/tabs.js

@@ -1,5 +1,8 @@
 window.a11yTabs = (function tabsComponentIIFE(global, document) {
 	const tabInstances = new WeakMap();
+	const className = 'o-tab-list';
+	const tablistElement = document.querySelector(`.js-${className}`);
+	const updateURLFromHash = tablistElement.getAttribute('data-update-url');
 
 	/**
 	* Instantiates the component
@@ -11,8 +14,6 @@ window.a11yTabs = (function tabsComponentIIFE(global, document) {
 			return;
 		}
 
-		const className = 'o-tab-list';
-		const tablistElement = document.querySelector(`.js-${className}`);
 		const namespace = getComputedStyle(tablistElement, ':before').content.replace(/["']/g, '');
 
 		const defaults = {
@@ -50,7 +51,6 @@ window.a11yTabs = (function tabsComponentIIFE(global, document) {
 
 		this.tabLinks.forEach((item, index) => {
 			item.setAttribute('role', 'tab');
-			// item.setAttribute('id', `tab${index}`);
 
 			if (index > 0) {
 				item.setAttribute('tabindex', '-1');
@@ -75,14 +75,10 @@ window.a11yTabs = (function tabsComponentIIFE(global, document) {
 
 		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
+		// Select the correct tab based on URL hash
+		if (updateURLFromHash) {
+			this.selectTabFromHash();
+		}
 	};
 
 	TabComponent.prototype = {
@@ -119,16 +115,18 @@ window.a11yTabs = (function tabsComponentIIFE(global, document) {
 			this.tabLinks[newIndex].setAttribute('aria-selected', 'true');
 			this.tabItems[newIndex].setAttribute('data-tab-active', '');
 			this.tabLinks[newIndex].removeAttribute('tabindex');
-			this.tabLinks[newIndex].focus();
+			this.tabLinks[newIndex].focus(); // Focus the newly selected tab
 
 			// update tab panels
 			this.tabPanels[currentIndex].setAttribute('hidden', '');
 			this.tabPanels[newIndex].removeAttribute('hidden');
 
-			// After updating tabs and tab panels, add the URL update feature
 			// Update the browser's URL hash to reflect the current tab's ID
 			const selectedTabId = this.tabLinks[newIndex].id;
-			global.history.pushState(null, '', `#${selectedTabId}`);
+
+			if (updateURLFromHash) {
+				window.history.pushState(null, '', `#${selectedTabId}`);
+			}
 
 			this.currentIndex = newIndex;