@internetstiftelsen/styleguide 4.1.13 → 5.0.1

package/dist/assets/js/iconToggle.js

@@ -5,7 +5,7 @@ function toggleIconOnClick(e) {
 	e.preventDefault();
 
 	var el = e.target;
-	/* eslint-disable-next-line */
+
 	var target = el.dataset.toggleIconTarget ? document.getElementById(el.dataset.toggleIconTarget) : el;
 	var i = parseInt(el.dataset.iconIteration || 0, 10);
 	var options = el.dataset.toggleIcon.split('|');
@@ -16,7 +16,6 @@ function toggleIconOnClick(e) {
 	useElement.setAttribute('xlink:href', '#icon-' + options[nextIteration]);
 }
 
-/* eslint-disable */
 document.addEventListener('click', function (e) {
 	if (e.target.closest('[data-toggle-icon]')) {
 		toggleIconOnClick(e);

package/dist/assets/js/parallax.js

@@ -10,8 +10,6 @@ function isInView(el) {
 }
 
 var parallaxes = [];
-
-// eslint-disable-next-line import/prefer-default-export
 function cache() {
 	parallaxes = document.querySelectorAll('.js-parallax');
 }

package/dist/assets/js/textToggle.js

@@ -19,7 +19,6 @@ function toggleTextOnClick(e) {
 	}
 }
 
-/* eslint-disable */
 document.addEventListener('click', function (e) {
 	if (e.target.closest('[data-toggle-text]')) {
 		toggleTextOnClick(e);

package/dist/assets/js/track.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = track;
 function track(data) {
-	// eslint-disable-next-line no-underscore-dangle
+
 	if (window._mtm) {
-		// eslint-disable-next-line no-underscore-dangle
+
 		window._mtm.push(data);
 	} else {
 		console.log('GTM not loaded', data);

package/dist/assets/js/youtube.js

@@ -18,6 +18,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 // TODO: Should probably implement a way to localize texts in the styleguide
 var consent = (0, _hasCookieConsent2.default)('C0004');
+var YT = void 0;
 var missingConsentMessage = 'För att spela Youtubefilmer krävs att "Riktade kakor" tillåts. Tryck för att "Anpassa kakor"';
 
 function loadYoutubeAPI() {
@@ -36,7 +37,7 @@ function loadYoutubeAPI() {
 	firstScript.parentNode.insertBefore(tag, firstScript);
 }
 
-function onPlayerStateChange(el, e) {
+function onPlayerStateChange(el, e, YT) {
 	if (e.data === YT.PlayerState.PLAYING) {
 		el.getElementsByTagName('img')[0].style.zIndex = '-1';
 		el.getElementsByTagName('button')[0].style.display = 'none';

package/dist/components.js

@@ -26,8 +26,6 @@ require('./molecules/natural-language-form/natural-language-form');
 
 require('./atoms/tooltip/tooltip');
 
-require('./atoms/toggle-high-contrast/toggle-high-contrast');
-
 require('./atoms/height-limiter/height-limiter');
 
 require('./atoms/file/file');
@@ -50,8 +48,6 @@ require('./molecules/context-menu/context-menu');
 
 require('./molecules/alert/alert');
 
-require('./molecules/modal/modal-graph');
-
 require('./molecules/continue-video-guide/continue-video-guide');
 
 require('./organisms/video-guide/video-guide');

package/dist/molecules/glider/glider-hero.js

@@ -15,12 +15,11 @@ var _nodeAdded2 = _interopRequireDefault(_nodeAdded);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// eslint-disable-next-line import/prefer-default-export
 function initHeroGlider(node) {
 	if (node.hasAttribute('data-glider-initialized')) {
 		return;
 	}
-	// eslint-disable-next-line no-underscore-dangle
+
 	var dataLayer = window._mtm || [];
 	var gliderLinks = document.querySelectorAll('.glider-slide a');
 

package/dist/molecules/modal/modal.js

@@ -124,7 +124,7 @@ function addAction(action) {
 
 	if (action.onClick) {
 		el.addEventListener('click', function (e) {
-			// eslint-disable-next-line no-use-before-define
+
 			action.onClick(e, modal, close);
 		});
 	}
@@ -137,7 +137,7 @@ function handleKeyUp(e) {
 		    handler = _ref6[1];
 
 		if (e.key.toLowerCase() === key) {
-			// eslint-disable-next-line no-use-before-define
+
 			handler(e, modal, close);
 		}
 	});

package/dist/molecules/overview-navigation/overview-navigation.js

@@ -96,7 +96,7 @@ var OverviewNavigation = function () {
 
 			this.button.style.transition = 'none';
 			this.updateButtonPosition();
-			// eslint-disable-next-line no-unused-expressions
+
 			this.element.offsetHeight; // force reflow
 			this.button.style.transition = 'right 0.25s ease-out, bottom 0.25s ease-out, opacity 0.25s ease-out';
 
@@ -119,7 +119,6 @@ var OverviewNavigation = function () {
 			this.element.setAttribute('aria-hidden', 'false');
 			this.element.classList.remove('is-minimized');
 
-			// eslint-disable-next-line no-unused-expressions
 			this.element.offsetHeight; // force reflow
 
 			this.updateButtonPosition();

package/dist/organisms/mailchimp/mailchimp.js

@@ -55,7 +55,8 @@ function isInViewport(element) {
 	var height = element.offsetHeight;
 
 	while (element.offsetParent) {
-		element = element.offsetParent; // eslint-disable-line
+		// eslint-disable-next-line no-param-reassign
+		element = element.offsetParent;
 		top += element.offsetTop;
 	}
 

package/dist/organisms/tabs/tabs.js

@@ -69,7 +69,7 @@ window.a11yTabs = function tabsComponentIIFE(global, document) {
 			}
 		});
 
-		this.eventCallback = handleEvents.bind(this); // eslint-disable-line
+		this.eventCallback = handleEvents.bind(this);
 		this.tabList.addEventListener('click', this.eventCallback, false);
 		this.tabList.addEventListener('keydown', this.eventCallback, false);
 
@@ -251,4 +251,5 @@ window.a11yTabs = function tabsComponentIIFE(global, document) {
 	};
 }(window, document);
 
-var tabComponent = a11yTabs.create('[data-tab-component]'); // eslint-disable-line
+// eslint-disable-next-line no-unused-vars,no-undef
+var tabComponent = a11yTabs.create('[data-tab-component]');

package/dist/organisms/timeline/timeline.js

@@ -7,9 +7,6 @@ var _require = require('../../assets/js/offset'),
     offsetBottom = _require.offsetBottom,
     offsetLeft = _require.offsetLeft;
 
-// eslint-disable-next-line no-underscore-dangle
-
-
 var dataLayer = window._mtm || [];
 var progressBar = document.querySelector('.js-progress-bar');
 var decadeContainer = document.querySelector('.js-decade-container');
@@ -93,7 +90,8 @@ function isInViewport(element) {
 	var height = element.offsetHeight;
 
 	while (element.offsetParent) {
-		element = element.offsetParent; // eslint-disable-line
+		// eslint-disable-next-line no-param-reassign
+		element = element.offsetParent;
 		top += element.offsetTop;
 	}
 

package/package.json

@@ -1,12 +1,12 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "4.1.13",
+	"version": "5.0.1",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"
 	},
 	"scripts": {
-		"start": "npm run dev",
+		"start": "npm run dev --trace-deprecation",
 		"start:fractal": "fractal start -s",
 		"build:fractal": "fractal build",
 		"scss": "sass src/app.scss public/assets/css/app.css",
@@ -41,32 +41,37 @@
 		"create-icons-config": "node ./createIconsJson"
 	},
 	"devDependencies": {
-		"@frctl/fractal": "^1.5.14",
+		"@babel/core": "^7.26.0",
+		"@babel/eslint-parser": "^7.25.9",
+		"@eslint/eslintrc": "^3.1.0",
+		"@eslint/js": "^9.14.0",
+		"@frctl/fractal": "^1.5.15",
 		"@frctl/mandelbrot": "^1.10.3",
-		"@internetstiftelsen/eslint-config": "^0.0.5",
-		"@internetstiftelsen/stylelint-config": "^1.0.0",
+		"@internetstiftelsen/eslint-config": "^4.0.3",
+		"@internetstiftelsen/stylelint-config": "^3.0.0",
 		"babel-cli": "^6.26.0",
-		"babel-eslint": "^10.0.3",
+		"babel-eslint": "^10.1.0",
 		"babel-plugin-syntax-dynamic-import": "^6.18.0",
 		"babel-plugin-transform-class-properties": "^6.24.1",
 		"babel-plugin-transform-custom-element-classes": "^0.1.0",
 		"babel-plugin-transform-es2015-classes": "^6.24.1",
 		"babel-plugin-transform-object-rest-spread": "^6.26.0",
 		"babel-preset-env": "^1.7.0",
-		"browserify": "^16.5.0",
+		"browserify": "^17.0.1",
 		"concat": "^1.0.3",
-		"concurrently": "^5.2.0",
-		"copyfiles": "^2.2.0",
-		"css-loader": "^5.2.6",
-		"cssnano": "^5.0.6",
-		"eslint": "^7.28.0",
-		"imagemin-cli": "^7.0.0",
-		"onchange": "^6.1.0",
+		"concurrently": "^9.0.1",
+		"copyfiles": "^2.4.1",
+		"css-loader": "^7.1.2",
+		"cssnano": "^7.0.6",
+		"eslint": "^9.14.0",
+		"globals": "^15.12.0",
+		"imagemin-cli": "^8.0.0",
+		"onchange": "^7.1.0",
 		"postcss-class-prefix": "^0.3.0",
-		"postcss-cli": "^8.3.1",
-		"replace": "^1.2.1",
-		"sass": "^1.79.4",
-		"stylelint": "^13.13.1",
+		"postcss-cli": "^11.0.0",
+		"replace": "^1.2.2",
+		"sass": "^1.80.3",
+		"stylelint": "^16.10.0",
 		"uglify-es": "^3.3.9"
 	},
 	"dependencies": {

package/src/app.js

@@ -6,7 +6,7 @@ require('./atoms/grid-toggle/grid-toggle');
 require('./components');
 
 const Button = require('./atoms/button/Button');
-const { open, onClose, onOpen } = require('./molecules/modal/modal');
+const { open } = require('./molecules/modal/modal');
 
 const demoButtons = document.querySelectorAll('button.a-button.has-loader');
 
@@ -61,20 +61,6 @@ if (demoModal) {
 	});
 }
 
-// eslint-disable-next-line no-unused-vars
-const unsubscribe = onClose((el, id) => {
-	console.log('Global onClose', el, id);
-});
-
-// Call unsubscribe to remove callback
-
-// eslint-disable-next-line no-unused-vars
-const unsubscribeOpen = onOpen((el, id) => {
-	console.log('Global onOpen', el, id);
-});
-
-// Call unsubscribe to remove callback
-
 const demoForms = document.querySelectorAll('[data-form]');
 
 [].forEach.call(demoForms, (el) => {

package/src/app.scss

@@ -1,102 +1,99 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 
 // Base
-@import 'globals';
-
-$namespace: '';
+@use 'globals';
 
 // Configurations
-@import 'configurations/grid/grid';
-@import 'configurations/colors/colors';
-@import 'configurations/colors/wordpress-colors';
-@import 'configurations/colors/colors-functions';
-@import 'configurations/colors/text-colors';
-@import 'configurations/colors/background-colors';
-@import 'configurations/extends';
-@import 'configurations/typography/typography';
-@import 'configurations/forms/fields';
-@import 'configurations/wordpress';
+@use 'configurations/grid/grid';
+@use 'configurations/colors/colors';
+@use 'configurations/colors/wordpress-colors';
+@use 'configurations/colors/colors-functions';
+@use 'configurations/colors/text-colors';
+@use 'configurations/colors/background-colors';
+@use 'configurations/extends';
+@use 'configurations/typography/typography';
+@use 'configurations/forms/fields';
+@use 'configurations/wordpress';
 
 // Atoms
-@import 'atoms/skip/skip';
-@import 'atoms/meta/meta';
-@import 'atoms/tag/tag';
-@import 'atoms/logotype/logotype';
-@import 'atoms/main-menu/main-menu';
-@import 'atoms/button/button';
-@import 'atoms/paging/paging';
-@import 'atoms/grid-toggle/grid-toggle';
-@import 'atoms/archive-link/archive-link';
-@import 'atoms/label/label';
-@import 'atoms/input/input';
-@import 'atoms/password-toggle/password-toggle';
-@import 'atoms/radiobutton/radiobutton';
-@import 'atoms/checkbox/checkbox';
-@import 'atoms/textarea/textarea';
-@import 'atoms/select/select';
-@import 'atoms/spinner/spinner';
-@import 'atoms/tooltip/tooltip';
-@import 'atoms/height-limiter/height-limiter';
-@import 'atoms/file/file';
-@import 'atoms/ribbon/ribbon';
-@import 'atoms/quote/quote';
-@import 'atoms/rating/rating';
-@import 'atoms/progress/progress';
-@import 'atoms/range/range';
+@use 'atoms/skip/skip';
+@use 'atoms/meta/meta';
+@use 'atoms/tag/tag';
+@use 'atoms/logotype/logotype';
+@use 'atoms/main-menu/main-menu';
+@use 'atoms/button/button';
+@use 'atoms/paging/paging';
+@use 'atoms/grid-toggle/grid-toggle';
+@use 'atoms/archive-link/archive-link';
+@use 'atoms/label/label';
+@use 'atoms/input/input';
+@use 'atoms/password-toggle/password-toggle';
+@use 'atoms/radiobutton/radiobutton';
+@use 'atoms/checkbox/checkbox';
+@use 'atoms/textarea/textarea';
+@use 'atoms/select/select';
+@use 'atoms/spinner/spinner';
+@use 'atoms/tooltip/tooltip';
+@use 'atoms/height-limiter/height-limiter';
+@use 'atoms/file/file';
+@use 'atoms/ribbon/ribbon';
+@use 'atoms/quote/quote';
+@use 'atoms/rating/rating';
+@use 'atoms/progress/progress';
+@use 'atoms/range/range';
 
 // Molecules
-@import 'molecules/breadcrumb/breadcrumb';
-@import 'molecules/card/card';
-@import 'molecules/download/download';
-@import 'molecules/teaser-news-list/teaser-news-list';
-@import 'molecules/form-control/form-control';
-@import 'molecules/alert/alert';
-@import 'molecules/table/table';
-@import 'molecules/system-error/system-error';
-@import 'molecules/info-box/info-box';
-@import 'molecules/share/share';
-@import 'molecules/cookie-disclaimer/cookie-disclaimer';
-@import 'molecules/byline/byline';
-@import 'molecules/context-menu/context-menu';
-@import 'molecules/modal/modal';
-@import 'molecules/readspeaker/readspeaker';
-@import 'molecules/natural-language-form/natural-language-form';
-@import 'molecules/icon-overlay/icon-overlay';
-@import 'molecules/submenu/submenu';
-@import 'molecules/glider/glider';
-@import 'molecules/glider/glider-course';
-@import 'molecules/glider/glider-hero';
-@import 'molecules/continue-video-guide/continue-video-guide';
-@import 'molecules/overview-navigation/overview-navigation';
-@import 'molecules/multi-select/multi-select';
-@import 'molecules/input-group/input-group';
+@use 'molecules/breadcrumb/breadcrumb';
+@use 'molecules/card/card';
+@use 'molecules/download/download';
+@use 'molecules/teaser-news-list/teaser-news-list';
+@use 'molecules/form-control/form-control';
+@use 'molecules/alert/alert';
+@use 'molecules/table/table';
+@use 'molecules/system-error/system-error';
+@use 'molecules/info-box/info-box';
+@use 'molecules/share/share';
+@use 'molecules/cookie-disclaimer/cookie-disclaimer';
+@use 'molecules/byline/byline';
+@use 'molecules/context-menu/context-menu';
+@use 'molecules/modal/modal';
+@use 'molecules/natural-language-form/natural-language-form';
+@use 'molecules/icon-overlay/icon-overlay';
+@use 'molecules/submenu/submenu';
+@use 'molecules/glider/glider';
+@use 'molecules/glider/glider-course';
+@use 'molecules/glider/glider-hero';
+@use 'molecules/continue-video-guide/continue-video-guide';
+@use 'molecules/overview-navigation/overview-navigation';
+@use 'molecules/multi-select/multi-select';
+@use 'molecules/input-group/input-group';
 
 // Organisms
-@import 'organisms/header/header';
-@import 'organisms/footer/footer';
-@import 'organisms/mega-menu/mega-menu';
-@import 'organisms/hero/hero';
-@import 'organisms/hero/hero--dynamic-headline';
-@import 'organisms/hero/hero--bbk';
-@import 'organisms/sections/sections';
-@import 'organisms/accordion/accordion';
-@import 'organisms/domain-search/domain-search';
-@import 'organisms/search-result/search-result';
-@import 'organisms/filter/filter';
-@import 'organisms/search/search';
-@import 'organisms/tabs/tabs';
-@import 'organisms/mailchimp/mailchimp';
-@import 'organisms/features-box/features-box';
-@import 'organisms/event-listing-item/event-listing-item';
-@import 'organisms/podcast/podcast-episodes';
-@import 'organisms/podcast/podcast-player';
-@import 'organisms/video-guide/video-guide';
-@import 'organisms/timeline/timeline';
-@import 'organisms/members-service-product/members-service-product';
-@import 'organisms/schedule/schedule';
+@use 'organisms/header/header';
+@use 'organisms/footer/footer';
+@use 'organisms/mega-menu/mega-menu';
+@use 'organisms/hero/hero';
+@use 'organisms/hero/hero--dynamic-headline';
+@use 'organisms/hero/hero--bbk';
+@use 'organisms/sections/sections';
+@use 'organisms/accordion/accordion';
+@use 'organisms/domain-search/domain-search';
+@use 'organisms/search-result/search-result';
+@use 'organisms/filter/filter';
+@use 'organisms/search/search';
+@use 'organisms/tabs/tabs';
+@use 'organisms/mailchimp/mailchimp';
+@use 'organisms/features-box/features-box';
+@use 'organisms/event-listing-item/event-listing-item';
+@use 'organisms/podcast/podcast-episodes';
+@use 'organisms/podcast/podcast-player';
+@use 'organisms/video-guide/video-guide';
+@use 'organisms/timeline/timeline';
+@use 'organisms/members-service-product/members-service-product';
+@use 'organisms/schedule/schedule';
 
 // Structures
-@import 'structures/manifest';
+@use 'structures/manifest';
 
 // Dark mode
-@import 'theme/dark-mode';
+@use 'theme/dark-mode';

package/src/assets/js/iconToggle.js

@@ -3,7 +3,7 @@ function toggleIconOnClick(e) {
 	e.preventDefault();
 
 	const el = e.target;
-	/* eslint-disable-next-line */
+	 
 	const target = (el.dataset.toggleIconTarget) ? document.getElementById(el.dataset.toggleIconTarget) : el;
 	const i = parseInt(el.dataset.iconIteration || 0, 10);
 	const options = el.dataset.toggleIcon.split('|');
@@ -14,7 +14,7 @@ function toggleIconOnClick(e) {
 	useElement.setAttribute('xlink:href', `#icon-${options[nextIteration]}`);
 }
 
-/* eslint-disable */
+ 
 document.addEventListener('click', (e) => {
 	if (e.target.closest('[data-toggle-icon]')) {
 		toggleIconOnClick(e);

package/src/assets/js/parallax.js

@@ -4,8 +4,6 @@ function isInView(el) {
 }
 
 let parallaxes = [];
-
-// eslint-disable-next-line import/prefer-default-export
 export function cache() {
 	parallaxes = document.querySelectorAll('.js-parallax');
 }

package/src/assets/js/textToggle.js

@@ -17,7 +17,7 @@ function toggleTextOnClick(e) {
 	}
 }
 
-/* eslint-disable */
+ 
 document.addEventListener('click', (e) => {
 	if (e.target.closest('[data-toggle-text]')) {
 		toggleTextOnClick(e);

package/src/assets/js/track.js

@@ -1,7 +1,7 @@
 export default function track(data) {
-	// eslint-disable-next-line no-underscore-dangle
+	 
 	if (window._mtm) {
-		// eslint-disable-next-line no-underscore-dangle
+		 
 		window._mtm.push(data);
 	} else {
 		console.log('GTM not loaded', data);

package/src/assets/js/youtube.js

@@ -3,6 +3,7 @@ import className from './className';
 import hasCookieConsent from './hasCookieConsent';
 
 let consent = hasCookieConsent('C0004');
+let YT;
 const missingConsentMessage = 'För att spela Youtubefilmer krävs att "Riktade kakor" tillåts. Tryck för att "Anpassa kakor"';
 
 function loadYoutubeAPI() {
@@ -21,7 +22,7 @@ function loadYoutubeAPI() {
 	firstScript.parentNode.insertBefore(tag, firstScript);
 }
 
-function onPlayerStateChange(el, e) {
+function onPlayerStateChange(el, e, YT) {
 	if (e.data === YT.PlayerState.PLAYING) {
 		el.getElementsByTagName('img')[0].style.zIndex = '-1';
 		el.getElementsByTagName('button')[0].style.display = 'none';

package/src/atoms/archive-link/archive-link.config.js

@@ -6,4 +6,4 @@ module.exports = {
 		url: '#',
 		icon: 'arrow-forwards'
 	}
-}
+};

package/src/atoms/archive-link/archive-link.scss

@@ -1,11 +1,18 @@
-@charset 'UTF-8';
+@charset "UTF-8";
+@use '../../configurations/mixins' as mixin;
+@use '../../configurations/bem' as bem;
+@use '../../configurations/variables' as var;
+@use '../../configurations/functions' as func;
+@use '../../configurations/colors/colors' as colors;
+@use '../../configurations/colors/colors-functions' as colorFunc;
+
 
 /// @group Links
-@include b(archive-link-wrapper) {
-	padding: rhythm(2) 0;
-	border-bottom: 1px solid $color-cyberspace;
+@include bem.b(archive-link-wrapper) {
+	padding: func.rhythm(2) 0;
+	border-bottom: 1px solid colors.$color-cyberspace;
 }
-@include atom(archive-link) {
+@include mixin.atom(archive-link) {
 	display: inline-flex;
 	position: relative;
 	flex-wrap: nowrap;
@@ -13,7 +20,7 @@
 	justify-content: center;
 	border: 0;
 	color: currentColor;
-	font-family: $font-family-headings;
+	font-family: var.$font-family-headings;
 	text-decoration: none;
 	hyphens: auto;
 
@@ -22,24 +29,24 @@
 		text-decoration: underline;
 	}
 
-	@include e(text) {
+	@include bem.e(text) {
 		position: relative;
-		top: -#{rhythm(0.2)};
-		color: $color-cyberspace;
+		top: -#{func.rhythm(0.2)};
+		color: colors.$color-cyberspace;
 	}
 
-	@include m(icon) {
+	@include bem.m(icon) {
 		justify-content: space-between;
-		max-width: rhythm(50);
-		padding-right: rhythm(5);
+		max-width: func.rhythm(50);
+		padding-right: func.rhythm(5);
 		text-align: left;
 	}
 
-	@include e(icon) {
-		width: $icon-size-small;
-		height: $icon-size-small;
-		margin-top: rem(3px);
-		margin-left: rhythm(1);
+	@include bem.e(icon) {
+		width: var.$icon-size-small;
+		height: var.$icon-size-small;
+		margin-top: func.to_rem(3px);
+		margin-left: func.rhythm(1);
 		fill: currentColor;
 	}
 }