@internetstiftelsen/styleguide 2.22.1 → 2.22.2

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/cookie-disclaimer/cookie-disclaimer.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		name: 'Cookies',
+		type: 'info',
+		role: 'alert',
+		text: 'På internetstiftelsen.se använder vi kakor (cookies) för att löpande förbättra webbplatsen. <a href="https://internetstiftelsen.se/om-webbplatsen/cookies/">Läs mer om hur Internetstiftelsen använder kakor</a>.',
+		js_class: 'js-dismiss-alert',
+		is_dismissable: true,
+	}
+}

package/src/molecules/download/download.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		url: 'https://www.iis.se/docs/Remiss_se_sv.pdf',
+		link_text: 'Svenskarna och internet 2019',
+		description: 'Rapport om Svenskarnas internetanvändande i pdf-format',
+		background_image: '/assets/images/KPA_5090-5-4.jpg',
+		download: 'Ladda ner',
+		icon: 'arrow-forwards'
+	}
+}

package/src/molecules/form/form.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		disabled: false
+	},
+	variants: [
+		{
+			name: 'Disabled',
+			context: {
+				disabled: true
+			}
+		}
+	]
+}

package/src/molecules/form-control/form-control.config.js

@@ -0,0 +1,78 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		label: 'Namn',
+		labelClasses: 'is-required',
+		type: 'text',
+		select_id: 'select-id',
+		textarea_id: 'textarea-id',
+		value: false,
+		placeholder: 'Förnamn',
+		autocomplete: 'off',
+		has_icon: true,
+		required: true,
+		disabled: false,
+		button_type: 'button',
+		button_text: 'Sök',
+		checkbox_value: '1',
+		checkbox_id: 'checkbox',
+		checkbox_name: 'checkbox',
+		radiobutton_id: 'radiobutton',
+		radiobutton_name: 'radiobutton',
+		options: [
+			{
+				value: '',
+				text:'Välj',
+				is_disabled: true,
+				is_selected: true
+			},
+			{
+				value: 'value-1',
+				text:'Option 1',
+				is_disabled: false,
+				is_selected: false
+			},
+			{
+				value: 'value-2',
+				text:'Option 2',
+				is_disabled: false,
+				is_selected: false
+			},
+			{
+				value: 'value-3',
+				text:'Option 3',
+				is_disabled: false,
+				is_selected: false
+			},
+			{
+				value: 'value-4',
+				text:'Option 4',
+				is_disabled: false,
+				is_selected: false
+			}
+		]
+	},
+	variants: [
+		{
+			name: 'Large',
+			context: {
+				modifier_class: 'm-form-control--large',
+				checkbox_id: 'checkbox-large',
+				checkbox_name: 'checkbox-large',
+				radiobutton_id: 'radiobutton-large',
+				radiobutton_name: 'radiobutton-large'
+			}
+		},
+		{
+			name: 'Small',
+			context: {
+				modifier_class: 'm-form-control--small',
+				checkbox_id: 'checkbox-small',
+				checkbox_name: 'checkbox-small',
+				radiobutton_id: 'radiobutton-small',
+				radiobutton_name: 'radiobutton-small'
+			}
+		}
+	]
+}

package/src/molecules/glider/glider.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		dots: false,
+	},
+	variants: [
+		{
+			name: 'With dots',
+			context: {
+				dots: true
+			}
+		},
+		{
+			name: 'Course',
+			status: 'wip',
+			context: {
+				single: true
+			}
+		}
+	]
+}

package/src/molecules/icon-overlay/icon-overlay.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		title: 'Icon overlay',
+		description: 'Lägg en ikon ovanpå en container',
+		img_url: "/assets/images/ALX_0876.jpg",
+		overlay_icon: "play",
+		additional_classes: false
+	}
+}

package/src/molecules/info-box/info-box.config.js

@@ -0,0 +1,33 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		text: '<ul><li>Nyttan med öppna licenser</li><li>Att skilja på olika sorters licenser</li><li>Om företagande och öppen källkod</li><li>Hur du använder licenserna i praktiken</li><li>Klargör vilka marknader du riktar dig till och registrera relevanta domäner.</li></ul>'
+	},
+	variants: [
+		{
+			name: 'Big',
+			context: {
+				text: '<p>Sed malesuada quis risus eget malesuada. <strong>Vivamus posuere</strong>, erat sit amet vehicula suscipit, nisi arcu euismod sem, id tempus justo ligula sit amet turpis. <a href="#">Sed faucibus purus</a> sed neque pulvinar, ac faucibus leo tristique.</p>',
+				modifiers: ['big'],
+				additional_classes: false
+			}
+		},
+		{
+			name: 'Basic',
+			context: {
+				text: '<p>Sed malesuada quis risus eget malesuada. <strong>Vivamus posuere</strong>, erat sit amet vehicula suscipit, nisi arcu euismod sem, id tempus justo ligula sit amet turpis. <a href="#">Sed faucibus purus</a> sed neque pulvinar, ac faucibus leo tristique.</p>',
+				modifiers: ['basic'],
+				additional_classes: 'background-peacock-light'
+			},
+		},
+		{
+			name: 'Custom border',
+			context: {
+				text: '<p>Sed malesuada quis risus eget malesuada. <strong>Vivamus posuere</strong>, erat sit amet vehicula suscipit, nisi arcu euismod sem, id tempus justo ligula sit amet turpis. <a href="#">Sed faucibus purus</a> sed neque pulvinar, ac faucibus leo tristique.</p>',
+				modifiers: ['custom-border'],
+				additional_classes: false
+			}
+		}
+	]
+}

package/src/molecules/modal/modal.config.js

@@ -0,0 +1,44 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		title: 'Du har sparat FooCoding Graduation!',
+		text: 'En påminnelse kommer skickas till din adress <a href="https://internetstiftelsen.se/om-webbplatsen/integritetspolicy-for-besokare-pa-internetstiftelsens-webbplatser/" class="u-link">15 minuter</a> innan streamen startar.',
+		button_text: 'Stäng',
+		aria_controls: '',
+		is_hidden: false,
+		button_primary_color: '#e0bff5',
+		button_primary_hover_color: '#c27fec',
+		button_primary_border_color: '#c27fec',
+		button_primary_text_color: '#1f2a36',
+		button_secondary_color: '#ff9fb4',
+		button_secondary_hover_color: '#ff4069',
+		button_secondary_border_color: '#ff4069',
+		button_secondary_text_color: '#1f2a36',
+	},
+
+	variants: [
+		{
+			name: 'form',
+			context: {
+				title: 'Skapa konto',
+				button_text: 'Skapa konto',
+				is_form: true,
+				is_hidden: false,
+				check_text: 'Prenumerera på våra lokala nyhetsbrev:',
+				terms_text: 'Jag godkänner Goto 10:s <a href="#" class="u-link">medlemsvillkor</a> och <a href="https://internetstiftelsen.se/om-webbplatsen/integritetspolicy-for-besokare-pa-internetstiftelsens-webbplatser/" class="u-link">integritetspolicy</a>.',
+				bottom_text: 'Har du redan ett konto? <a href="#" class="u-link">Logga in</a>'
+			}
+		},
+		{
+			name: 'hidden',
+			context: {
+				btn_text: 'Öppna modal',
+				is_hidden: true,
+				aria_controls: 'modal-container',
+				aria_expanded: false,
+				data_a11y_toggle: ''
+			}
+		}
+	]
+};

package/src/molecules/natural-language-form/natural-language-form.config.js

@@ -0,0 +1,43 @@
+module.exports = {
+	status: 'ready',
+	default: 'select',
+
+	context: {
+		title: 'Select',
+		select: true,
+		textElement: 'h1',
+		elementClass: 'supersize',
+		modifier: false,
+
+	},
+
+	variants: [
+		{
+		name: 'Select with arrow',
+			context: {
+				select: true,
+				textElement: 'h1',
+				elementClass: 'supersize',
+				modifier:'arrow'
+			}
+		},
+		{
+		name: 'Other text element',
+			context: {
+				select: true,
+				textElement: 'h2',
+				elementClass: false,
+				modifier: false,
+			}
+		},
+		{
+		name: 'Input',
+			context: {
+				select: false,
+				textElement: 'h1',
+				elementClass: false,
+				modifier: false
+			}
+		}
+	]
+}

package/src/molecules/share/share.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		url: 'https://www.iis.se/press/pressmeddelanden/internetstiftelsen-far-utmarkelsen-svensk-kvalitet-for-andra-gangen/',
+		text: 'Internetstiftelsen får utmärkelsen Svensk Kvalitet för andra gången'
+	}
+}

package/src/molecules/submenu/submenu.config.js

@@ -0,0 +1,27 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		background_color: '#ffce2e',
+		icon_fill_color: '#1f2a36',
+		icon_background_hover_color: '#ffce2e',
+	},
+	variants: [
+		{
+			status: 'prototype',
+			name: 'With icons',
+			context: {
+				has_sublevel: true,
+				has_icons: true,
+				sublevel_has_icon: true
+			}
+		},
+		{
+			name: 'With sublevel',
+			context: {
+				has_sublevel: true,
+				sublevel_has_icon: false
+			}
+		}
+	]
+}

package/src/molecules/system-error/system-error.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		errorCode: '404',
+		preamble: 'Sidan du eftersökte kunde tyvärr inte hittas.',
+		suggestion: 'Försök <a href="#" class="js-history">backa i webbläsaren</a> eller gå till <a href="/">startsidan</a>.',
+		errorMessage: 'error - Sidan kan inte hittas'
+	}
+}

package/src/molecules/table/table.config.js

@@ -0,0 +1,55 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		th: 'Table header',
+		td: 'Table cell',
+		tfoot: 'Table footer',
+		td_num1: '42',
+		td_unit1: 'mkr',
+		td_num2: '10 000',
+		td_unit2: 'Mbit',
+		td_num3: '175 000 000',
+		td_unit3: '.se',
+		td_num4: '99',
+		td_unit4: 'kr/mån',
+		modifier: false
+	},
+	variants: [
+		{
+			name: 'columns',
+			context: {
+				modifier: 'm-table--columns',
+				scrollable: false
+			}
+		},
+		{
+			name: 'rows',
+			context: {
+				modifier: 'm-table--rows',
+				scrollable: false
+			}
+		},
+		{
+			name: 'Auto increment',
+			context: {
+				modifier: 'm-table--increment',
+				increment: true
+			}
+		},
+		{
+			name: 'lines',
+			context: {
+				modifier: 'm-table--lines',
+				scrollable: false
+			}
+		},
+		{
+			name: 'scrollable',
+			context: {
+				modifier: 'm-table--scrollable m-table--rows',
+				scrollable: true
+			}
+		},
+	]
+}

package/src/molecules/teaser-news-list/teaser-news-list.config.js

@@ -0,0 +1,47 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		title: 'Nyheter',
+		link_text: 'Nätneutraliteten och den svenska lagstiftningen',
+		background_image: '/assets/images/KPA_5090-5-4.jpg',
+		items: [
+			{
+				url: 'http://www.iis.se',
+				heading: 'Internetdagarna 2019',
+				time: '2018-12-04',
+				tags: [
+					{
+						text: 'stockholm',
+						url: '#'
+					},
+					{
+						text: 'göteborg',
+						url: '#'
+					}
+				]
+			},
+			{
+				url: 'http://www.iis.se',
+				heading: 'Lansering av Svenskarna och internet 2019',
+				time: '2019-01-22, Tid: 10:00',
+				tags: false
+			},
+			{
+				url: 'http://www.iis.se',
+				heading: 'Så säkrar du dina konton',
+				time: '2019-05-13',
+				tags: [
+					{
+						text: 'stockholm',
+						url: '#'
+					},
+					{
+						text: 'göteborg',
+						url: '#'
+					}
+				]
+			}
+		]
+	}
+}

package/src/molecules/timeline-navigation/timeline-navigation.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+	status: 'prototype',
+
+	context: {
+		text: 'Paging',
+		modifiers: ['icon'],
+		icon: 'richtext-bullet-list',
+		additional_classes: 'm-timeline-navigation__button js-timeline-navigation',
+		button_type: 'button',
+		url: false,
+		aria_controls: 'timeline-navigation',
+		aria_expanded: false,
+		text: 'Visa tidslinje'
+	}
+}