@internetstiftelsen/styleguide 2.22.1 → 2.22.3-beta.0.2

package/src/configurations/colors/colors.config.js

@@ -0,0 +1,225 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		sass: 'SASS',
+		hex: 'HEX',
+		rgb: 'RGB',
+		cmyk: 'CMYK',
+		pms: 'PMS',
+		colors: [
+			{
+				name: 'ruby',
+				title: '$color-ruby',
+				hex: '#ff4069',
+				rgb: '255 64 105',
+				cmyk: '0 84 38 0',
+				pms: '1925U',
+				hasBorder: false
+			},
+			{
+				name: 'ruby-light',
+				title: '$color-ruby-light',
+				hex: '#ff9fb4',
+				rgb: '255 159 180',
+				cmyk: '0 51 13 0',
+				pms: '708UP',
+				hasBorder: false
+			},
+			{
+				name: 'peacock',
+				title: '$color-peacock',
+				hex: '#c27fec',
+				rgb: '194 127 236',
+				cmyk: '41 54 0 0',
+				pms: '2655U',
+				hasBorder: false
+			},
+			{
+				name: 'peacock-light',
+				title: '$color-peacock-light',
+				hex: '#e0bff5',
+				rgb: '224 191 245',
+				cmyk: '17 30 0 0',
+				pms: '2635U',
+				hasBorder: false
+			},
+			{
+				name: 'jade',
+				title: '$color-jade',
+				hex: '#55c7b4',
+				rgb: '85 199 180',
+				cmyk: '58 0 30 0',
+				pms: '325U',
+				hasBorder: false
+			},
+			{
+				name: 'jade-light',
+				title: '$color-jade-light',
+				hex: '#aae3d9',
+				rgb: '170 227 217',
+				cmyk: '28 0 20 0',
+				pms: '324U',
+				hasBorder: false
+			},
+			{
+				name: 'sandstone',
+				title: '$color-sandstone',
+				hex: '#f99963',
+				rgb: '249 153 99',
+				cmyk: '0 39 50 0',
+				pms: '473U'
+			},
+			{
+				name: 'sandstone-light',
+				title: '$color-sandstone-light',
+				hex: '#fcccb1',
+				rgb: '252 204 177',
+				cmyk: '1 20 30 0',
+				pms: '719UP',
+				hasBorder: false
+			},
+			{
+				name: 'lemon',
+				title: '$color-lemon',
+				hex: '#ffce2e',
+				rgb: '255 206 46',
+				cmyk: '0 20 86 0',
+				pms: '120U'
+			},
+			{
+				name: 'lemon-light',
+				title: '$color-lemon-light',
+				hex: '#ffe696',
+				rgb: '255 230 150',
+				cmyk: '0 9 50 0',
+				pms: '1215UP',
+				hasBorder: false
+			},
+			{
+				name: 'ocean',
+				title: '$color-ocean',
+				hex: '#50b2fc',
+				rgb: '80 178 252',
+				cmyk: '69 10 0 0',
+				pms: '299U',
+				hasBorder: false
+			},
+			{
+				name: 'ocean-light',
+				title: '$color-ocean-light',
+				hex: '#a7d8fd',
+				rgb: '167 216 253',
+				cmyk: '35 5 1 0',
+				pms: '2830U',
+				hasBorder: false
+			},
+			{
+				name: 'black',
+				title: '$color-black',
+				hex: '#000000',
+				rgb: '0 0 0',
+				cmyk: '50 50 50 100',
+				pms: 'n/a',
+				hasBorder: false
+			},
+			{
+				name: 'cyberspace',
+				title: '$color-cyberspace',
+				hex: '#1f2a36',
+				rgb: '31 42 54',
+				cmyk: '88 71 52 41',
+				pms: 'PMS 289U',
+				hasBorder: false
+			},
+			{
+				name: 'granit',
+				title: '$color-granit',
+				hex: '#8E9297',
+				rgb: '142 146 151',
+				cmyk: '6 3 0 41',
+				pms: 'n/a',
+				hasBorder: false
+			},
+			{
+				name: 'concrete',
+				title: '$color-concrete',
+				hex: '#d8d8d8',
+				rgb: '216 216 216',
+				cmyk: '0 0 0 15',
+				pms: 'n/a',
+				hasBorder: false
+			},
+			{
+				name: 'ash',
+				title: '$color-ash',
+				hex: '#ededed',
+				rgb: '237 237 237',
+				cmyk: '0 0 0 7',
+				pms: 'n/a',
+				hasBorder: true
+			},
+
+			{
+				name: 'snow',
+				title: '$color-snow',
+				hex: '#ffffff',
+				rgb: '255 255 255',
+				cmyk: '0 0 0 0',
+				pms: 'n/a',
+				hasBorder: false
+			},
+		],
+		specialColors: [
+			{
+				name: 'ruby-dark',
+				title: '$color-ruby-dark',
+				hex: '#d9002f',
+				rgb: 'n/a',
+				cmyk: 'n/a',
+				pms: 'n/a',
+			},
+			{
+				name: 'peacock-dark',
+				title: '$color-peacock-dark',
+				hex: '#9826df',
+				rgb: 'n/a',
+				cmyk: 'n/a',
+				pms: 'n/a',
+			},
+			{
+				name: 'sandstone-dark',
+				title: '$color-sandstone-dark',
+				hex: '#ed5b09',
+				rgb: 'n/a',
+				cmyk: 'n/a',
+				pms: 'n/a',
+			},
+			{
+				name: 'lemon-dark',
+				title: '$color-lemon-dark',
+				hex: '#e1ac00',
+				rgb: 'n/a',
+				cmyk: 'n/a',
+				pms: 'n/a',
+			},
+			{
+				name: 'jade-dark',
+				title: '$color-jade-dark',
+				hex: '#2d897a',
+				rgb: 'n/a',
+				cmyk: 'n/a',
+				pms: 'n/a',
+			},
+			{
+				name: 'ocean-dark',
+				title: '$color-ocean-dark',
+				hex: '#0477ce',
+				rgb: 'n/a',
+				cmyk: 'n/a',
+				pms: 'n/a',
+				hasBorder: false
+			},
+		]
+	}
+}

package/src/configurations/favicon/favicon.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		url: 'https://static.internetstiftelsen.se/favicons/'
+	}
+}

package/src/configurations/grid/_grid.scss

@@ -18,7 +18,8 @@
 // Set the container width, and override it for fixed navbars in media queries.
 
 @if $enable-grid-classes {
-	.wrapper {
+	.wrapper,
+	%wrapper {
 		@include make-container();
 		@include make-container-max-widths();
 
@@ -57,6 +58,12 @@
 		> [class*='grid-']:nth-child(#{$i}) {
 			transform: translateY(rhythm($col-gap));
 		}
+
+		@include bp-only(sm) {
+			> [class*='grid-']:last-child {
+				transform: translateY(rhythm($gap));
+			}
+		}
 	}
 }
 
@@ -75,7 +82,7 @@
 		@include make-asymmetric-cols($bp-gap, true);
 	}
 
-	@include bp-up(md) {
+	@include bp-up(sm) {
 		$bp-gap: $gap * 1.25;
 
 		margin: rhythm($margin * 1.25) 0 0;
@@ -89,6 +96,12 @@
 		}
 	}
 
+	@include bp-up(md) {
+		&.asymmetric-reversed {
+			margin-bottom: calc(100px);
+		}
+	}
+
 	@include bp-up(lg) {
 		$bp-gap: $gap * 1.5;
 
@@ -100,6 +113,7 @@
 
 		&.asymmetric-reversed {
 			@include make-asymmetric-cols($bp-gap, true);
+			margin-bottom: calc(180px);
 		}
 	}
 
@@ -114,6 +128,7 @@
 
 		&.asymmetric-reversed {
 			@include make-asymmetric-cols($bp-gap, true);
+			margin-bottom: calc(216px);
 		}
 	}
 }

package/src/configurations/grid/grid.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		title: 'Grid',
+		description: 'Layout grid - 18 columns.'
+	}
+}

package/src/configurations/icons.json

@@ -1 +1 @@
-[{"id":"search","name":"Search"},{"id":"arrow-forwards","name":"Arrow Forwards"},{"id":"arrow-backwards","name":"Arrow Backwards"},{"id":"arrow-down","name":"Arrow Down"},{"id":"arrow-variant","name":"Arrow Variant"},{"id":"hamburger","name":"Hamburger"},{"id":"close","name":"Close"},{"id":"check","name":"Check"},{"id":"quote","name":"Quote"},{"id":"file","name":"File"},{"id":"download","name":"Download"},{"id":"upload","name":"Upload"},{"id":"filter","name":"Filter"},{"id":"read","name":"Read"},{"id":"pin","name":"Pin"},{"id":"user","name":"User"},{"id":"language","name":"Language"},{"id":"linkedin","name":"Linkedin"},{"id":"facebook","name":"Facebook"},{"id":"instagram","name":"Instagram"},{"id":"twitter","name":"Twitter"},{"id":"external-link","name":"External Link"},{"id":"app-share","name":"App Share"},{"id":"print","name":"Print"},{"id":"chapters","name":"Chapters"},{"id":"article","name":"Article"},{"id":"padlock","name":"Padlock"},{"id":"trash","name":"Trash"},{"id":"link","name":"Link"},{"id":"share","name":"Share"},{"id":"questionmark","name":"Questionmark"},{"id":"info","name":"Info"},{"id":"contrast","name":"Contrast"},{"id":"gauge","name":"Gauge"},{"id":"backward-15","name":"Backward 15"},{"id":"play","name":"Play"},{"id":"forward-60","name":"Forward 60"},{"id":"pause","name":"Pause"},{"id":"author","name":"Author"},{"id":"speaker","name":"Speaker"},{"id":"mute","name":"Mute"},{"id":"settings","name":"Settings"},{"id":"lte","name":"Lte"},{"id":"wifi","name":"Wifi"},{"id":"reception","name":"Reception"},{"id":"2g","name":"2g"},{"id":"3g","name":"3g"},{"id":"4g","name":"4g"},{"id":"5g","name":"5g"},{"id":"latency","name":"Latency"},{"id":"spinner","name":"Spinner"},{"id":"spinner-white","name":"Spinner White"},{"id":"3d","name":"3d"},{"id":"accessibility","name":"Accessibility"},{"id":"cafe","name":"Cafe"},{"id":"capacity","name":"Capacity"},{"id":"display","name":"Display"},{"id":"email","name":"Email"},{"id":"headset","name":"Headset"},{"id":"phone","name":"Phone"},{"id":"plus","name":"Plus"},{"id":"podcast","name":"Podcast"},{"id":"richtext-bold","name":"Richtext Bold"},{"id":"richtext-bullet-list","name":"Richtext Bullet List"},{"id":"richtext-italic","name":"Richtext Italic"},{"id":"streaming","name":"Streaming"},{"id":"time","name":"Time"},{"id":"drag-item","name":"Drag Item"},{"id":"personal-data","name":"Personal Data"},{"id":"romance","name":"Romance"},{"id":"shopping","name":"Shopping"},{"id":"warning","name":"Warning"}]
+[{"id":"search","name":"Search"},{"id":"arrow-forwards","name":"Arrow Forwards"},{"id":"arrow-backwards","name":"Arrow Backwards"},{"id":"arrow-down","name":"Arrow Down"},{"id":"arrow-variant","name":"Arrow Variant"},{"id":"hamburger","name":"Hamburger"},{"id":"close","name":"Close"},{"id":"check","name":"Check"},{"id":"quote","name":"Quote"},{"id":"file","name":"File"},{"id":"download","name":"Download"},{"id":"upload","name":"Upload"},{"id":"filter","name":"Filter"},{"id":"read","name":"Read"},{"id":"pin","name":"Pin"},{"id":"user","name":"User"},{"id":"language","name":"Language"},{"id":"linkedin","name":"Linkedin"},{"id":"facebook","name":"Facebook"},{"id":"instagram","name":"Instagram"},{"id":"twitter","name":"Twitter"},{"id":"external-link","name":"External Link"},{"id":"app-share","name":"App Share"},{"id":"print","name":"Print"},{"id":"chapters","name":"Chapters"},{"id":"article","name":"Article"},{"id":"padlock","name":"Padlock"},{"id":"trash","name":"Trash"},{"id":"link","name":"Link"},{"id":"share","name":"Share"},{"id":"questionmark","name":"Questionmark"},{"id":"info","name":"Info"},{"id":"contrast","name":"Contrast"},{"id":"gauge","name":"Gauge"},{"id":"backward-15","name":"Backward 15"},{"id":"step-backwards","name":"Step Backwards"},{"id":"play","name":"Play"},{"id":"step-forwards","name":"Step Forwards"},{"id":"forward-60","name":"Forward 60"},{"id":"pause","name":"Pause"},{"id":"subtitles","name":"Subtitles"},{"id":"author","name":"Author"},{"id":"speaker","name":"Speaker"},{"id":"mute","name":"Mute"},{"id":"settings","name":"Settings"},{"id":"lte","name":"Lte"},{"id":"wifi","name":"Wifi"},{"id":"reception","name":"Reception"},{"id":"2g","name":"2g"},{"id":"3g","name":"3g"},{"id":"4g","name":"4g"},{"id":"5g","name":"5g"},{"id":"latency","name":"Latency"},{"id":"spinner","name":"Spinner"},{"id":"spinner-white","name":"Spinner White"},{"id":"3d","name":"3d"},{"id":"accessibility","name":"Accessibility"},{"id":"cafe","name":"Cafe"},{"id":"capacity","name":"Capacity"},{"id":"display","name":"Display"},{"id":"email","name":"Email"},{"id":"headset","name":"Headset"},{"id":"phone","name":"Phone"},{"id":"plus","name":"Plus"},{"id":"podcast","name":"Podcast"},{"id":"richtext-bold","name":"Richtext Bold"},{"id":"richtext-bullet-list","name":"Richtext Bullet List"},{"id":"richtext-italic","name":"Richtext Italic"},{"id":"streaming","name":"Streaming"},{"id":"time","name":"Time"},{"id":"drag-item","name":"Drag Item"},{"id":"personal-data","name":"Personal Data"},{"id":"romance","name":"Romance"},{"id":"shopping","name":"Shopping"},{"id":"warning","name":"Warning"}]

package/src/configurations/typography/_typography.scss

@@ -1,7 +1,8 @@
 @charset 'UTF-8';
 
 h1,
-.alpha {
+.alpha,
+%alpha {
 	@include plumber(
 		$font-size: 3,
 		$line-height: 4,
@@ -22,7 +23,8 @@ h1,
 }
 
 h2,
-.beta {
+.beta,
+%beta {
 	@include plumber(
 		$font-size: 2.2,
 		$line-height: 3,
@@ -43,7 +45,8 @@ h2,
 }
 
 h3,
-.gamma {
+.gamma,
+%gamma {
 	@include plumber(
 		$font-size: 2.2,
 		$line-height: 3,
@@ -53,7 +56,8 @@ h3,
 }
 
 h4,
-.delta {
+.delta,
+%delta {
 	@include plumber(
 		$font-size: 2,
 		$line-height: 3,
@@ -168,6 +172,55 @@ small {
 	}
 }
 
+.godzilla {
+	@include plumber(
+		$leading-top: 0,
+		$leading-bottom: 0
+	);
+
+	line-height: 84px;
+	font-size: 120px;
+	font-family: $font-family-bold;
+	letter-spacing: -#{rem(5px)};
+
+	@include bp-up(sm) {
+		line-height: 105px;
+		font-size: 150px;
+	}
+
+	@include bp-up(md) {
+		line-height: 139px;
+		font-size: 200px;
+		letter-spacing: -#{rem(10px)};
+	}
+
+	@include bp-up(lg) {
+		line-height: 207px;
+		font-size: 295px;
+		letter-spacing: -#{rem(20px)};
+	}
+
+	@include bp-up(xl) {
+		line-height: 251px;
+		font-size: 360px;
+	}
+
+	// Special rule for decade starting with 1
+	@include m(19) {
+		&::first-letter {
+			letter-spacing: -#{rem(20px)};
+
+			@include bp-up(lg) {
+				letter-spacing: -#{rem(40px)};
+			}
+
+			@include bp-up(xl) {
+				letter-spacing: -#{rem(45px)};
+			}
+		}
+	}
+}
+
 .preamble,
 %preamble {
 

package/src/configurations/typography/typography.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		supersize: 'Typografiska regler för Internetstiftelsens webbplatser.',
+		h1: 'Typografi Ut ante enim, mollis sit amet arcu sed, auctor accumsan arcu',
+		h2: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
+		preamble: 'Typografiska regler för Internetstiftelsens webbplatser.',
+		paragraph: 'Typografiska regler för Internetstiftelsens webbplatser',
+		meta: 'Typografiska regler för Internetstiftelsens webbplatser.',
+		small: 'Typografiska regler för Internetstiftelsens webbplatser.',
+		blockquote: 'Välkommen till Internetmuseum!
 Här tar vi dig med på en resa genom den svenska internethistorien.',
+		quotee: 'Frank Zappa',
+		link: 'lorem non turpis condimentum iaculis',
+		strong: 'Den här texten är bold'
+	}
+}

package/src/molecules/alert/alert.config.js

@@ -0,0 +1,50 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		name: 'Information',
+		type: 'info',
+		text: 'Meddelanderuta med vanlig information, t.ex information om öppettider. <a href="https://internetstiftelsen.se">Dessa meddelanden</a> är fasta dv.s inget dom dyker upp tillfälligt när användaren interagerar med tjänsten.',
+		additional_classes: false,
+	},
+	variants: [
+		{
+			name: 'warning',
+			context: {
+				name: 'Varning',
+				type: 'warning',
+				role: 'alert',
+				text: 'Meddelanderuta med en varning om att något behöver användarens uppmärksamhet, t.ex. att tjänsten stängs ner för underhåll. Tillfälligt meddelande.'
+			}
+		},
+		{
+			name: 'error',
+			context: {
+				name: 'Fel',
+				type: 'error',
+				role: 'alert',
+				text: 'Meddelanderuta med information om att något är fel, t.ex. att ett formulär inte kunde skickas. Tillfälligt meddelande.'
+			}
+		},
+		{
+			name: 'success',
+			context: {
+				name: 'Succé',
+				type: 'success',
+				role: 'alert',
+				text: 'Meddelanderuta med information att en uppgift genomförts utan fel, t.ex. att formulär som skickats. Tillfälligt meddelande'
+			}
+		},
+		{
+			name: 'dismissable',
+			context: {
+				name: 'Avfärda',
+				type: 'warning',
+				role: 'alert',
+				text: 'Meddelanderuta med som användaren kan välja att klicka bort.',
+				js_class: 'js-dismiss-alert',
+				is_dismissable: true,
+			}
+		}
+	]
+}

package/src/molecules/breadcrumb/breadcrumb.config.js

@@ -0,0 +1,28 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		breadcrumb_item: [
+			{
+				title: 'Hem',
+				url: '/',
+				is_current: false
+			},
+			{
+				title: 'Om oss',
+				url: '/',
+				is_current: false
+			},
+			{
+				title: 'Organisation',
+				url: '/',
+				is_current: false
+			},
+			{
+				title: 'Urkund och stadgar',
+				url: '/',
+				is_current: true
+			}
+		]
+	}
+}

package/src/molecules/byline/byline.config.js

@@ -0,0 +1,25 @@
+module.exports = {
+	status: 'ready',
+	default: 'Basic',
+
+	context: {
+		author_name: 'Pennan Modemberg',
+		author_archive: '',
+		archive_text: 'Visa alla artiklar från skribenten',
+		author_email: false,
+		author_image: '/assets/images/author.png',
+		publish_date: '29 september 2020',
+		update_date: '2 december 2020',
+	},
+	variants: [
+		{
+			name: 'Reviewed by',
+			context: {
+				publish_date: '29 september 2020',
+				reviewer_name: 'Charlotte Sandberg, Polismyndigheten',
+				update_date: '2 december 2020'
+			},
+
+		}
+	]
+}

package/src/molecules/card/card.config.js

@@ -0,0 +1,111 @@
+module.exports = {
+	status: "ready",
+
+	context: {
+		id: false,
+		alt: "Hands typing on laptop",
+		img_url: "/assets/images/ALX_0876.jpg",
+		title: "Gymnasieskolor med hög bandbredd har bättre skolresultat",
+		url: "http://www.google.se",
+		excerpt:
+			"Eget nulla <strong>facilisi etiam</strong> dignissim diam quis enim lobortis scelerisque. Faucibus a pellentesque sit amet porttitor.",
+		is_padded: true,
+		is_wide: true,
+		has_shadow: false,
+		has_button: false,
+		has_border: false,
+		has_meta: true,
+		read_time: true,
+		date: true,
+		has_map: false,
+		has_contact_info: false,
+		has_icon_overlay: false,
+		overlay_icon: false,
+		teaser: false,
+		top_level: false,
+		icon: false,
+		button_color: false,
+		button_text: 'Button',
+		modifier: false
+	},
+	variants: [
+		{
+			name: "Without meta",
+			context: {
+				has_meta: false,
+			},
+		},
+		{
+			name: "With button",
+			context: {
+				has_button: true,
+			},
+		},
+		{
+			name: "With map and contact",
+			context: {
+				has_meta: false,
+				img_url: false,
+				url: false,
+				exerpt: false,
+				has_map: true,
+				has_contact_info: true,
+			},
+		},
+		{
+			name: "With Youtube video",
+			context: {
+				date: false,
+				youtube: 'n8hPhZwV8a0',
+				read_time: false,
+				has_icon_overlay: true,
+				url: false,
+				img_url: false,
+				top_level: true
+			},
+		},
+		{
+			name: "Teaser",
+			context: {
+				teaser: true,
+				has_meta: true,
+				img_url: '/assets/images/KPA_5090-5-4.jpg',
+				is_wide: false,
+				is_padded: false,
+				top_level: true,
+				icon: 'arrow-forwards',
+				title: 'Nätneutraliteten och den svenska lagstiftningen',
+				excerpt: false,
+			},
+		},
+		{
+			name: "Teaser with excerpt",
+			context: {
+				teaser: true,
+				has_meta: false,
+				img_url: '/assets/images/KPA_5090-5-4.jpg',
+				is_wide: false,
+				is_padded: false,
+				top_level: true,
+				icon: 'arrow-forwards',
+				title: 'Nätneutraliteten och den svenska lagstiftningen',
+			},
+		},
+		{
+			name: "Teaser with button and excerpt",
+			context: {
+				teaser: true,
+				has_meta: false,
+				img_url: '/assets/images/KPA_5090-5-4.jpg',
+				is_wide: false,
+				is_padded: false,
+				top_level: true,
+				icon: false,
+				title: 'Nätneutraliteten och den svenska lagstiftningen',
+				has_button: true,
+				button_color: 'lemon',
+				url: false,
+			},
+		},
+	],
+};

package/src/molecules/context-menu/context-menu.config.js

@@ -0,0 +1,28 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		name: 'Context menu',
+		controls: 'contextMenu',
+		focusTrap: true,
+		outsideClick: false
+	},
+	variants: [
+		{
+		name: 'No focus trap',
+		context: {
+			controls: 'contextMenu2',
+			focusTrap: false,
+			outsideClick: false
+			}
+		},
+		{
+		name: 'Close on outside click',
+		context: {
+			controls: 'contextMenu3',
+			focusTrap: false,
+			outsideClick: true
+			}
+		}
+	]
+}

package/src/molecules/continue-video-guide/continue-video-guide.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+	status: 'wip',
+
+	context: {
+		additional_classes: false
+	}
+}