@internetstiftelsen/styleguide 5.0.0 → 5.0.1

package/src/organisms/footer/_footer.scss

@@ -12,7 +12,7 @@
 @use '../../vendor/grid/grid' as grid;
 @use '../../vendor/baseline/plumber' as plumber;
 
-$footer-font-size: 18px; // To ensure all footers on all sites have the same font size this component used pixel based values
+$footer-font-size: 18px; /* To ensure all footers on all sites have the same font size this component used pixel based values */
 
 * { /* Because not all of the old sites have this */
 	box-sizing: border-box;

package/src/organisms/footer/footer.config.js

@@ -27,4 +27,4 @@ module.exports = {
 		site_heading_8: 'Internetstiftelsen',
 		site_description_8: 'Internetstiftelsen verkar för ett internet som bidrar positivt till människan och samhället'
 	}
-}
+};

package/src/organisms/header/header.config.js

@@ -7,4 +7,4 @@ module.exports = {
 		label: 'sök en .se- eller .nu-domän',
 		controls: ''
 	}
-}
+};

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

@@ -20,7 +20,6 @@ module.exports = {
 				no_image_class: false,
 				has_radius: true,
 				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.',
 			}
@@ -74,44 +73,44 @@ module.exports = {
 		},
 		{
 			name: 'Event hero',
-				context: {
-					event_title: 'Creator Circle Meetup',
-					organizer: 'Creator Circle',
-					city: 'Stockholm',
-					time: '24 januari 2020 18:20-21:30',
-					event_text: 'Event på Goto 10 i',
-					no_image_class: 'o-hero--no-image',
-					icon_share: 'share',
-					icon_export: 'external-link',
-					limited_width: false,
-					has_image: false,
-					has_video: false,
-					is_event: true,
-					has_buttons: false,
-					background_color: 'background-peacock-light'
-				}
+			context: {
+				event_title: 'Creator Circle Meetup',
+				organizer: 'Creator Circle',
+				city: 'Stockholm',
+				time: '24 januari 2020 18:20-21:30',
+				event_text: 'Event på Goto 10 i',
+				no_image_class: 'o-hero--no-image',
+				icon_share: 'share',
+				icon_export: 'external-link',
+				limited_width: false,
+				has_image: false,
+				has_video: false,
+				is_event: true,
+				has_buttons: false,
+				background_color: 'background-peacock-light'
+			}
 		},
 		{
 			name: 'Event hero with button',
 			status: 'ready',
-				context: {
-					event_title: 'Framtidsoptimism och problemlösning i en uppkopplad värld',
-					organizer: 'Heja framtiden',
-					city: false,
-					time: '22 november 09:00-17:00',
-					event_text: 'Digitalt spår på Internetdagarna',
-					no_image_class: 'o-hero--no-image',
-					geometric_figures: false,
-					icon_share: 'share',
-					icon_export: 'external-link',
-					limited_width: false,
-					has_image: false,
-					has_video: false,
-					is_event: true,
-					has_button: true,
-					text: 'Köp biljett',
-					background_color: 'background-jade-light'
-				}
+			context: {
+				event_title: 'Framtidsoptimism och problemlösning i en uppkopplad värld',
+				organizer: 'Heja framtiden',
+				city: false,
+				time: '22 november 09:00-17:00',
+				event_text: 'Digitalt spår på Internetdagarna',
+				no_image_class: 'o-hero--no-image',
+				geometric_figures: false,
+				icon_share: 'share',
+				icon_export: 'external-link',
+				limited_width: false,
+				has_image: false,
+				has_video: false,
+				is_event: true,
+				has_button: true,
+				text: 'Köp biljett',
+				background_color: 'background-jade-light'
+			}
 		},
 		{
 			name: 'Clean',
@@ -151,4 +150,4 @@ module.exports = {
 			}
 		},
 	]
-}
+};

package/src/organisms/mailchimp/_mailchimp.scss

@@ -32,7 +32,7 @@
 
 		@include breakpoint.bp-up(lg) {
 			display: flex;
-			display: -webkit-box; // Weird Sarafi bug needs this
+			display: -webkit-box; /* Weird Sarafi bug needs this */
 			width: 50%;
 			margin-bottom: 0;
 		}

package/src/organisms/mailchimp/mailchimp.config.js

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

package/src/organisms/mailchimp/mailchimp.js

@@ -49,7 +49,8 @@ function isInViewport(element) {
 	const 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/src/organisms/mega-menu/mega-menu.config.js

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

package/src/organisms/members-service-product/members-service-product.config.js

@@ -1,5 +1,3 @@
-const { filter } = require("lodash");
-
 module.exports = {
 	status: 'wip',
 	default: 'Single item',
@@ -76,4 +74,4 @@ module.exports = {
 			}
 		}
 	]
-}
+};

package/src/organisms/podcast/_podcast-player.scss

@@ -14,7 +14,7 @@
 
 @include mixin.organism(podcast-player) {
 
-	// Player
+	/* Player */
 
 	$time-left-width: func.to_rem(65px);
 

package/src/organisms/podcast/podcast.config.js

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

package/src/organisms/search-result/search-result.config.js

@@ -9,4 +9,4 @@ module.exports = {
 		url: 'http://www.google.se',
 		exerpt: 'Praesent tempus metus in arcu mollis, non convallis odio faucibus. Nullam lectus nulla, rutrum nec odio ut, mollis interdum enim. Proin tincidunt odio at quam eleifend imperdiet. Mauris sagittis nulla ipsum, consectetur efficitur libero dignissim in.'
 	}
-}
+};

package/src/organisms/sections/sections.config.js

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

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

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

package/src/organisms/tabs/tabs.js

@@ -73,7 +73,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);
 
@@ -257,4 +257,5 @@ window.a11yTabs = (function tabsComponentIIFE(global, document) {
 	};
 }(window, document));
 
-const tabComponent = a11yTabs.create('[data-tab-component]'); // eslint-disable-line
+// eslint-disable-next-line no-unused-vars,no-undef
+const tabComponent = a11yTabs.create('[data-tab-component]');

package/src/organisms/timeline/timeline.config.js

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

package/src/organisms/timeline/timeline.js

@@ -2,7 +2,7 @@ import '../../assets/js/parallax';
 
 const { offsetTop, offsetBottom, offsetLeft } = require('../../assets/js/offset');
 
-// eslint-disable-next-line no-underscore-dangle
+
 const dataLayer = window._mtm || [];
 const progressBar = document.querySelector('.js-progress-bar');
 const decadeContainer = document.querySelector('.js-decade-container');
@@ -85,7 +85,8 @@ function isInViewport(element) {
 	const 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/src/organisms/video-guide/VideoGuidePlayback.js

@@ -244,5 +244,5 @@ export default class VideoGuidePlayback {
 				},
 			});
 		}
-	}
+	};
 }

package/src/organisms/video-guide/video-guide.config.js

@@ -5,4 +5,4 @@ module.exports = {
 		videoSrc: 'https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-till-svenska-hem.mp4',
 		videoSrc2: 'https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-till-svenska-hem-vp9-chrome.webm',
 	}
-}
+};

package/src/organisms/video-guide/video-guide.js

@@ -39,7 +39,7 @@ class VideoGuide {
 		this.timeline = new VideoGuideTimeline(this.element, this.video);
 
 		this.video.classList.remove('is-loading');
-	}
+	};
 
 	dispatchEvent = (eventName) => {
 		[this.playback, this.subtitles, this.timeline].forEach((instance) => {
@@ -47,7 +47,7 @@ class VideoGuide {
 				instance[eventName]();
 			}
 		});
-	}
+	};
 
 	onPlay = () => this.dispatchEvent('onPlay');
 

package/src/pages/animate-footer/animate-footer.config.js

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

package/src/pages/bredbandskollen/bredbandskollen.config.js

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

package/src/pages/conditional/conditional.config.js

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

package/src/pages/dark-mode/dark-mode.config.js

@@ -16,4 +16,4 @@ module.exports = {
 		has_image: true,
 		has_radius: true
 	}
-}
+};

package/src/pages/internetguider/internetguider.config.js

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

package/src/pages/magazine/magazine.config.js

@@ -16,4 +16,4 @@ module.exports = {
 		has_image: true,
 		has_radius: true
 	}
-}
+};

package/src/pages/mailchimp-newsletter/mailchimp-newsletter.config.js

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

package/src/pages/responsive-position/responsive-position.config.js

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

package/src/pages/search/search.config.js

@@ -4,4 +4,4 @@ module.exports = {
 	context: {
 		label: 'sök på internetstiftelsen.se',
 	}
-}
+};

package/src/pages/wordpress-blocks/wordpress-blocks.config.js

@@ -16,4 +16,4 @@ module.exports = {
 		has_image: true,
 		has_radius: true
 	}
-}
+};

package/src/theme/_theme.scss

@@ -17,7 +17,7 @@
 
 $namespace: '';
 
-// Theme palette
+/* Theme palette */
 $theme-palette: (
 	background: var(--ash-color)
 ) !default;

package/src/utilities/_icons.scss

@@ -4,7 +4,7 @@
 @use '../configurations/bem' as bem;
 @use '../vendor/grid/breakpoints' as breakpoint;
 
-// Default
+/* Default */
 $fill-color: colors.$color-black;
 
 @include bem.b(u-icon) {
@@ -14,7 +14,7 @@ $fill-color: colors.$color-black;
 	background-repeat: no-repeat !important;
 	background-position: center center !important;
 
-	// Sizes
+	/* Sizes */
 	@include bem.m(smallest) {
 		width: var.$icon-size-smallest !important;
 		height: var.$icon-size-smallest !important;
@@ -50,10 +50,10 @@ $fill-color: colors.$color-black;
 		}
 	}
 
-	// Specific icons
+	/* Specific icons */
 	@include bem.m(check) {
 		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24.42' fill='" + $fill-color + "'%3E%3Cpolygon points='12.04 24.42 0 13.26 2.87 10.16 11.81 18.44 28.9 0 32 2.87 12.04 24.42' data-name='Layer 3'/%3E%3C/svg%3E") !important;
-		// Colors
+		/* Colors */
 		@include bem.m(jade) {
 			$fill-color: colors.$color-jade !important;
 

package/src/utilities/_margin.scss

@@ -3,7 +3,7 @@
 @use '../configurations/variables' as var;
 @use '../configurations/functions' as func;
 
-/// @group Utilities
+/* @group Utilities */
 $class-m: u-m !default;
 $class-m-t: u-m-t !default;
 $class-m-r: u-m-r !default;
@@ -13,38 +13,38 @@ $class-m-x: u-m-x !default;
 $class-m-y: u-m-y !default;
 
 @for $i from 0 through 8 {
-	// Margin all
+	/* Margin all */
 	.#{$class-m}-#{$i} {
 		margin: func.rhythm($i) !important;
 	}
 
-	// Margin top
+	/* Margin top */
 	.#{$class-m-t}-#{$i} {
 		margin-top: func.rhythm($i) !important;
 	}
 
-	// Margin right
+	/* Margin right */
 	.#{$class-m-r}-#{$i} {
 		margin-right: func.rhythm($i) !important;
 	}
 
-	// Margin bottom
+	/* Margin bottom */
 	.#{$class-m-b}-#{$i} {
 		margin-bottom: func.rhythm($i) !important;
 	}
 
-	// Margin left
+	/* Margin left */
 	.#{$class-m-l}-#{$i} {
 		margin-left: func.rhythm($i) !important;
 	}
 
-	// Margin x (left and right)
+	/* Margin x (left and right) */
 	.#{$class-m-x}-#{$i} {
 		margin-right: func.rhythm($i) !important;
 		margin-left: func.rhythm($i) !important;
 	}
 
-	// Margin y (top and bottom)
+	/* Margin y (top and bottom) */
 	.#{$class-m-y}-#{$i} {
 		margin-top: func.rhythm($i) !important;
 		margin-bottom: func.rhythm($i) !important;

package/src/utilities/_padding.scss

@@ -3,7 +3,7 @@
 @use '../configurations/variables' as var;
 @use '../configurations/functions' as func;
 
-/// @group Utilities
+/* @group Utilities */
 $class-p: u-p !default;
 $class-p-t: u-p-t !default;
 $class-p-r: u-p-r !default;
@@ -14,38 +14,38 @@ $class-p-y: u-p-y !default;
 
 /* stylelint-disable */
 @for $i from 0 through 8 {
-	// Padding all
+	/* Padding all */
 	.#{$class-p}-#{$i} {
 		padding: func.rhythm($i) !important;
 	}
 
-	// Padding top
+	/* Padding top */
 	.#{$class-p-t}-#{$i} {
 		padding-top: func.rhythm($i) !important;
 	}
 
-	// Padding right
+	/* Padding right */
 	.#{$class-p-r}-#{$i} {
 		padding-right: func.rhythm($i) !important;
 	}
 
-	// Padding bottom
+	/* Padding bottom */
 	.#{$class-p-b}-#{$i} {
 		padding-bottom: func.rhythm($i) !important;
 	}
 
-	// Padding left
+	/* Padding left */
 	.#{$class-p-l}-#{$i} {
 		padding-left: func.rhythm($i) !important;
 	}
 
-	// Padding x (left and right)
+	/* Padding x (left and right) */
 	.#{$class-p-x}-#{$i} {
 		padding-right: func.rhythm($i) !important;
 		padding-left: func.rhythm($i) !important;
 	}
 
-	// Padding x (left and right)
+	/* Padding x (left and right) */
 	.#{$class-p-y}-#{$i} {
 		padding-top: func.rhythm($i) !important;
 		padding-bottom: func.rhythm($i) !important;