@internetstiftelsen/styleguide 5.0.0 → 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,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "5.0.0",
+	"version": "5.0.1",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"
@@ -41,9 +41,13 @@
 		"create-icons-config": "node ./createIconsJson"
 	},
 	"devDependencies": {
+		"@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": "^3.0.0",
+		"@internetstiftelsen/eslint-config": "^4.0.3",
 		"@internetstiftelsen/stylelint-config": "^3.0.0",
 		"babel-cli": "^6.26.0",
 		"babel-eslint": "^10.1.0",
@@ -59,7 +63,8 @@
 		"copyfiles": "^2.4.1",
 		"css-loader": "^7.1.2",
 		"cssnano": "^7.0.6",
-		"eslint": "^9.13.0",
+		"eslint": "^9.14.0",
+		"globals": "^15.12.0",
 		"imagemin-cli": "^8.0.0",
 		"onchange": "^7.1.0",
 		"postcss-class-prefix": "^0.3.0",

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/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/button/_button.scss

@@ -7,8 +7,8 @@
 @use '../../configurations/colors/colors' as colors;
 @use '../../vendor/grid/breakpoints' as breakpoint;
 
-// Default Button
-/// @group Buttons
+/* Default Button
+/// @group Buttons */
 @include mixin.atom(button) {
 	display: inline-flex;
 	position: relative;
@@ -21,7 +21,7 @@
 	border: 0;
 	border-radius: var.$border-radius;
 	background-color: currentColor;
-	background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
+	background-image: none; /* Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214;httpshttpshttps */
 	box-shadow: 0 0 0 1px inset currentColor;
 	color: colors.$color-ocean-dark;
 	font-family: var.$font-family-headings;
@@ -47,7 +47,7 @@
 		}
 	}
 
-	// States
+	/* States */
 	&.is-loading {
 		cursor: wait;
 	}
@@ -91,7 +91,7 @@
 		opacity: 0;
 	}
 
-	// Modifiers
+	/* Modifiers */
 
 	@include bem.m(full-width) {
 		display: flex;
@@ -207,7 +207,7 @@
 		pointer-events: none;
 	}
 
-	// More colors
+	/* More colors */
 	@include bem.m(transparent) {
 		border-color: transparent;
 		background-color: transparent;

package/src/atoms/checkbox/checkbox.config.js

@@ -45,4 +45,4 @@ module.exports = {
 			}
 		}
 	]
-}
+};

package/src/atoms/file/file.config.js

@@ -33,4 +33,4 @@ module.exports = {
 			}
 		}
 	]
-}
+};

package/src/atoms/grid-toggle/grid-toggle.config.js

@@ -5,4 +5,4 @@ module.exports = {
 		title: 'Grid toggle',
 		description: 'Slå av eller på en synlig grid för att se baslinjeraster.'
 	}
-}
+};

package/src/atoms/height-limiter/height-limiter.config.js

@@ -13,4 +13,4 @@ module.exports = {
 			}
 		}
 	]
-}
+};

package/src/atoms/hr/hr.config.js

@@ -39,4 +39,4 @@ module.exports = {
 			}
 		}
 	]
-}
+};

package/src/atoms/icon/icon.config.js

@@ -1,6 +1,6 @@
 const fs = require('fs');
 let sprite = fs.readFileSync(__dirname + '/../../_icon-sprite.hbs');
-sprite = sprite.toString().replace(/\ /g, '').replace(/\n/g, '').split('id="');
+sprite = sprite.toString().replace(/ /g, '').replace(/\n/g, '').split('id="');
 const icons = [];
 
 for (let i = 0; i < sprite.length; i++) {
@@ -23,7 +23,7 @@ module.exports = {
 		if (item.isDefault) {
 			return ''; // Don't render default empty icon
 		}
-		return `<div class="icon-wrapper">${markup}</div>`
+		return `<div class="icon-wrapper">${markup}</div>`;
 	},
 
 	context: {

package/src/atoms/input/input.config.js

@@ -53,4 +53,4 @@ module.exports = {
 			}
 		}
 	]
-}
+};

package/src/atoms/label/label.config.js

@@ -6,4 +6,4 @@ module.exports = {
 		for: 'name',
 		labelClasses: 'is-required'
 	}
-}
+};

package/src/atoms/logotype/logotype.config.js

@@ -1,6 +1,6 @@
 const fs = require('fs');
 let sprite = fs.readFileSync(__dirname + '/../../_logotype-sprite.hbs');
-sprite = sprite.toString().replace(/\ /g, '').replace(/\n/g, '').split('id="');
+sprite = sprite.toString().replace(/ /g, '').replace(/\n/g, '').split('id="');
 const logotypes = [];
 
 for (let i = 0; i < sprite.length; i++) {
@@ -19,8 +19,8 @@ module.exports = {
 
 	preview: '@layout-logotypes',
 
-	collator: function(markup, item) {
-		return `<div class="logotype-wrapper">${markup}</div>`
+	collator: function(markup) {
+		return `<div class="logotype-wrapper">${markup}</div>`;
 	},
 
 	context: {

package/src/atoms/main-menu/_main-menu.scss

@@ -199,7 +199,7 @@
 		}
 
 		@include bem.e(text) {
-			margin-top: -#{func.to_rem(3px)}; // Adjust for the font's bad placement in viewbox
+			margin-top: -#{func.to_rem(3px)}; /* Adjust for the font's bad placement in viewbox */
 			pointer-events: none;
 		}
 	}

package/src/atoms/main-menu/main-menu.config.js

@@ -76,4 +76,4 @@ module.exports = {
 			}
 		]
 	}
-}
+};

package/src/atoms/meta/meta.config.js

@@ -39,4 +39,4 @@ module.exports = {
 			}
 		},
 	]
-}
+};

package/src/atoms/paging/paging.config.js

@@ -27,4 +27,4 @@ module.exports = {
 			}
 		}
 	]
-}
+};

package/src/atoms/password-toggle/password-toggle.config.js

@@ -11,4 +11,4 @@ module.exports = {
 		required: false,
 		disabled: false
 	}
-}
+};

package/src/atoms/progress/progress.config.js

@@ -8,4 +8,4 @@ module.exports = {
 		max_width: false,
 		additional_classes: false,
 	}
-}
+};

package/src/atoms/quote/quote.config.js

@@ -6,4 +6,4 @@ module.exports = {
 		quote: '"I’ve never been to a virtual conference, but Confab online was 100x better than any other conference I’ve been to before—polished and professional, yet completely human."',
 		quotee: 'Paloma Picasso'
 	}
-}
+};

package/src/atoms/radiobutton/radiobutton.config.js

@@ -45,4 +45,4 @@ module.exports = {
 			}
 		}
 	]
-}
+};

package/src/atoms/range/range.config.js

@@ -63,4 +63,4 @@ module.exports = {
 			}
 		}
 	]
-}
+};

package/src/atoms/rating/rating.config.js

@@ -4,4 +4,4 @@ module.exports = {
 	context: {
 		additional_classes: false
 	}
-}
+};

package/src/atoms/ribbon/_ribbon.scss

@@ -9,7 +9,7 @@
 
 @include mixin.atom(ribbon) {
 	position: fixed;
-	z-index: 100000; // Must be higher than WP's admin toolbar
+	z-index: 100000; /* Must be higher than WP's admin toolbar */
 	bottom: 0;
 	left: 0;
 	padding: func.rhythm(1) 0;

package/src/atoms/ribbon/ribbon.config.js

@@ -6,4 +6,4 @@ module.exports = {
 		text: 'stage',
 		background: 'peacock-light'
 	}
-}
+};

package/src/atoms/select/select.config.js

@@ -75,4 +75,4 @@ module.exports = {
 			}
 		}
 	]
-}
+};

package/src/atoms/skip/skip.config.js

@@ -16,4 +16,4 @@ module.exports = {
 			}
 		]
 	}
-}
+};

package/src/atoms/spinner/spinner.config.js

@@ -2,4 +2,4 @@ module.exports = {
 	status: 'ready',
 
 	context: {}
-}
+};

package/src/atoms/tag/tag.config.js

@@ -81,4 +81,4 @@ module.exports = {
 			}
 		}
 	]
-}
+};

package/src/atoms/textarea/textarea.config.js

@@ -91,4 +91,4 @@ module.exports = {
 			},
 		}
 	]
-}
+};

package/src/atoms/toggle-button/toggle-button.config.js

@@ -65,4 +65,4 @@ module.exports = {
 			}
 		},
 	]
-}
+};

package/src/atoms/tooltip/tooltip.config.js

@@ -5,4 +5,4 @@ module.exports = {
 		name: "Tooltip",
 		text: "Ett .se-domännamn kan registreras för en period mellan 12-120 månader. Efter att ett domännamn förfallit kommer den att få statusen “Expired” i tio dagar. Om domänen inte förnyas under dessa tio dagar ändras statusen på domänen till “Deactivated”, vilket innebär att den inte kommer med i zonfilen. Domänen är därefter deaktiverad i 60 dagar om ingen förnyelse sker. Under deaktiveringsperioden har du möjlighet att förnya domänen."
 	}
-}
+};