@internetstiftelsen/styleguide 2.22.1 → 2.22.2

package/src/organisms/accordion/accordion.config.js

@@ -0,0 +1,163 @@
+module.exports = {
+	status: 'ready',
+	context: {
+		has_background: false,
+		has_time: false,
+		accordion_item: [
+			{
+				heading: 'Quisque non molestie arcu',
+				content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut elit lacinia, feugiat felis sit amet, congue ante. Morbi vel egestas mi. Nulla urna sapien, gravida et nisl ac, maximus euismod ipsum. Vivamus condimentum, massa non convallis hendrerit, orci mi porttitor nisi, at commodo purus magna non nisi. Duis feugiat lectus in sapien mollis, ac volutpat leo elementum. Nullam euismod massa a nulla placerat sagittis. Integer id purus a dolor fermentum mollis vel feugiat dui. Nullam neque diam, mattis nec cursus at, facilisis nec diam.</p><p>Proin faucibus pretium orci, eu tristique augue condimentum at. Suspendisse potenti. Donec ut luctus eros. Nam justo nunc, facilisis lobortis hendrerit sodales, fermentum at purus. Proin eget elementum nulla, nec tincidunt lacus. Mauris massa eros, interdum eget nunc id, molestie semper libero. Vivamus tortor ex, viverra ut varius vel, finibus hendrerit nunc. Morbi pulvinar arcu erat, consectetu mollis leo vulputate eu.</p>',
+				color: false,
+				is_expanded: true
+			},
+			{
+				heading: 'Nullam neque diam, mattis nec cursus at',
+				content: '<ul><li>Quisque non molestie arcu</li><li>Nullam vehicula eros nec lorem congue mattis</li><li>Pellentesque rutrum lacinia diam in finibus</li><li>Mauris at risus pulvinar, scelerisque sapien</li></ul>',
+				color: false
+			},
+			{
+				heading: 'Suspendisse potenti',
+				content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut elit lacinia, feugiat felis sit amet, congue ante. Morbi vel egestas mi. Nulla urna sapien, gravida et nisl ac, maximus euismod ipsum. Vivamus condimentum, massa non convallis hendrerit, orci mi porttitor nisi, at commodo purus magna non nisi. Duis feugiat lectus in sapien mollis, ac volutpat leo elementum. Nullam euismod massa a nulla placerat sagittis. Integer id purus a dolor fermentum mollis vel feugiat dui. Nullam neque diam, mattis nec cursus at, facilisis nec diam.</p><p>Proin faucibus pretium orci, eu tristique augue condimentum at. Suspendisse potenti. Donec ut luctus eros. Nam justo nunc, facilisis lobortis hendrerit sodales, fermentum at purus. Proin eget elementum nulla, nec tincidunt lacus. Mauris massa eros, interdum eget nunc id, molestie semper libero. Vivamus tortor ex, viverra ut varius vel, finibus hendrerit nunc. Morbi pulvinar arcu erat, consectetu mollis leo vulputate eu.</p>',
+				color: false
+			},
+			{
+				heading: 'Mauris at risus pulvinar, scelerisque sapien',
+				content: '<ul><li>Quisque non molestie arcu</li><li>Nullam vehicula eros nec lorem congue mattis</li><li>Pellentesque rutrum lacinia diam in finibus</li><li>Mauris at risus pulvinar, scelerisque sapien</li></ul>',
+				color: false
+			},
+			{
+				heading: 'Proin faucibus pretium orci',
+				content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut elit lacinia, feugiat felis sit amet, congue ante. Morbi vel egestas mi. Nulla urna sapien, gravida et nisl ac, maximus euismod ipsum. Vivamus condimentum, massa non convallis hendrerit, orci mi porttitor nisi, at commodo purus magna non nisi. Duis feugiat lectus in sapien mollis, ac volutpat leo elementum. Nullam euismod massa a nulla placerat sagittis. Integer id purus a dolor fermentum mollis vel feugiat dui. Nullam neque diam, mattis nec cursus at, facilisis nec diam.</p><p>Proin faucibus pretium orci, eu tristique augue condimentum at. Suspendisse potenti. Donec ut luctus eros. Nam justo nunc, facilisis lobortis hendrerit sodales, fermentum at purus. Proin eget elementum nulla, nec tincidunt lacus. Mauris massa eros, interdum eget nunc id, molestie semper libero. Vivamus tortor ex, viverra ut varius vel, finibus hendrerit nunc. Morbi pulvinar arcu erat, consectetu mollis leo vulputate eu.</p>',
+				color: false
+			},
+			{
+				heading: 'Proin faucibus pretium orci',
+				content: false,
+				color: false
+			},
+		]
+	},
+	variants: [
+		{
+			status: 'wip',
+			name: 'Colored background',
+			context: {
+				has_background: true,
+				has_time: false,
+				accordion_item: [
+					{
+						heading: 'Keynote',
+						content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut elit lacinia, feugiat felis sit amet, congue ante. Morbi vel egestas mi. Nulla urna sapien, gravida et nisl ac, maximus euismod ipsum. Vivamus condimentum, massa non convallis hendrerit, orci mi porttitor nisi, at commodo purus magna non nisi. Duis feugiat lectus in sapien mollis, ac volutpat leo elementum. Nullam euismod massa a nulla placerat sagittis. Integer id purus a dolor fermentum mollis vel feugiat dui. Nullam neque diam, mattis nec cursus at, facilisis nec diam.</p><p>Proin faucibus pretium orci, eu tristique augue condimentum at. Suspendisse potenti. Donec ut luctus eros. Nam justo nunc, facilisis lobortis hendrerit sodales, fermentum at purus. Proin eget elementum nulla, nec tincidunt lacus. Mauris massa eros, interdum eget nunc id, molestie semper libero. Vivamus tortor ex, viverra ut varius vel, finibus hendrerit nunc. Morbi pulvinar arcu erat, consectetu mollis leo vulputate eu.</p>',
+						color: 'peacock-light',
+						is_expanded: true
+					},
+					{
+						heading: 'Nullam neque diam, mattis nec cursus at',
+						content: '<ul><li>Quisque non molestie arcu</li><li>Nullam vehicula eros nec lorem congue mattis</li><li>Pellentesque rutrum lacinia diam in finibus</li><li>Mauris at risus pulvinar, scelerisque sapien</li></ul>',
+						color: false
+					},
+					{
+						heading: 'Suspendisse potenti',
+						content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut elit lacinia, feugiat felis sit amet, congue ante. Morbi vel egestas mi. Nulla urna sapien, gravida et nisl ac, maximus euismod ipsum. Vivamus condimentum, massa non convallis hendrerit, orci mi porttitor nisi, at commodo purus magna non nisi. Duis feugiat lectus in sapien mollis, ac volutpat leo elementum. Nullam euismod massa a nulla placerat sagittis. Integer id purus a dolor fermentum mollis vel feugiat dui. Nullam neque diam, mattis nec cursus at, facilisis nec diam.</p><p>Proin faucibus pretium orci, eu tristique augue condimentum at. Suspendisse potenti. Donec ut luctus eros. Nam justo nunc, facilisis lobortis hendrerit sodales, fermentum at purus. Proin eget elementum nulla, nec tincidunt lacus. Mauris massa eros, interdum eget nunc id, molestie semper libero. Vivamus tortor ex, viverra ut varius vel, finibus hendrerit nunc. Morbi pulvinar arcu erat, consectetu mollis leo vulputate eu.</p>',
+						color: false
+					},
+					{
+						heading: 'Potenti suspendisse',
+						content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut elit lacinia, feugiat felis sit amet, congue ante. Morbi vel egestas mi. Nulla urna sapien, gravida et nisl ac, maximus euismod ipsum. Vivamus condimentum, massa non convallis hendrerit, orci mi porttitor nisi, at commodo purus magna non nisi. Duis feugiat lectus in sapien mollis, ac volutpat leo elementum. Nullam euismod massa a nulla placerat sagittis. Integer id purus a dolor fermentum mollis vel feugiat dui. Nullam neque diam, mattis nec cursus at, facilisis nec diam.</p><p>Proin faucibus pretium orci, eu tristique augue condimentum at. Suspendisse potenti. Donec ut luctus eros. Nam justo nunc, facilisis lobortis hendrerit sodales, fermentum at purus. Proin eget elementum nulla, nec tincidunt lacus. Mauris massa eros, interdum eget nunc id, molestie semper libero. Vivamus tortor ex, viverra ut varius vel, finibus hendrerit nunc. Morbi pulvinar arcu erat, consectetu mollis leo vulputate eu.</p>',
+						color: false
+					},
+					{
+						heading: 'Lunch',
+						content: '<ul><li>Quisque non molestie arcu</li><li>Nullam vehicula eros nec lorem congue mattis</li><li>Pellentesque rutrum lacinia diam in finibus</li><li>Mauris at risus pulvinar, scelerisque sapien</li></ul>',
+						color: 'jade-light'
+					},
+					{
+						heading: 'Proin faucibus pretium orci',
+						content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut elit lacinia, feugiat felis sit amet, congue ante. Morbi vel egestas mi. Nulla urna sapien, gravida et nisl ac, maximus euismod ipsum. Vivamus condimentum, massa non convallis hendrerit, orci mi porttitor nisi, at commodo purus magna non nisi. Duis feugiat lectus in sapien mollis, ac volutpat leo elementum. Nullam euismod massa a nulla placerat sagittis. Integer id purus a dolor fermentum mollis vel feugiat dui. Nullam neque diam, mattis nec cursus at, facilisis nec diam.</p><p>Proin faucibus pretium orci, eu tristique augue condimentum at. Suspendisse potenti. Donec ut luctus eros. Nam justo nunc, facilisis lobortis hendrerit sodales, fermentum at purus. Proin eget elementum nulla, nec tincidunt lacus. Mauris massa eros, interdum eget nunc id, molestie semper libero. Vivamus tortor ex, viverra ut varius vel, finibus hendrerit nunc. Morbi pulvinar arcu erat, consectetu mollis leo vulputate eu.</p>',
+						color: false
+					},
+					{
+						heading: 'Potenti suspendisse',
+						content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut elit lacinia, feugiat felis sit amet, congue ante. Morbi vel egestas mi. Nulla urna sapien, gravida et nisl ac, maximus euismod ipsum. Vivamus condimentum, massa non convallis hendrerit, orci mi porttitor nisi, at commodo purus magna non nisi. Duis feugiat lectus in sapien mollis, ac volutpat leo elementum. Nullam euismod massa a nulla placerat sagittis. Integer id purus a dolor fermentum mollis vel feugiat dui. Nullam neque diam, mattis nec cursus at, facilisis nec diam.</p><p>Proin faucibus pretium orci, eu tristique augue condimentum at. Suspendisse potenti. Donec ut luctus eros. Nam justo nunc, facilisis lobortis hendrerit sodales, fermentum at purus. Proin eget elementum nulla, nec tincidunt lacus. Mauris massa eros, interdum eget nunc id, molestie semper libero. Vivamus tortor ex, viverra ut varius vel, finibus hendrerit nunc. Morbi pulvinar arcu erat, consectetu mollis leo vulputate eu.</p>',
+						color: false
+					},
+					{
+						heading: 'Fika',
+						content: '<ul><li>Quisque non molestie arcu</li><li>Nullam vehicula eros nec lorem congue mattis</li><li>Pellentesque rutrum lacinia diam in finibus</li><li>Mauris at risus pulvinar, scelerisque sapien</li></ul>',
+						color: 'jade-light'
+					},
+					{
+						heading: 'Keynote',
+						content: '<ul><li>Quisque non molestie arcu</li><li>Nullam vehicula eros nec lorem congue mattis</li><li>Pellentesque rutrum lacinia diam in finibus</li><li>Mauris at risus pulvinar, scelerisque sapien</li></ul>',
+						color: 'peacock-light'
+					},
+				]
+			}
+		},
+		{
+			status: 'wip',
+			name: 'Has time',
+			context: {
+				has_background: true,
+				has_time: true,
+				accordion_item: [
+					{
+						heading: 'Keynote',
+						content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut elit lacinia, feugiat felis sit amet, congue ante. Morbi vel egestas mi. Nulla urna sapien, gravida et nisl ac, maximus euismod ipsum. Vivamus condimentum, massa non convallis hendrerit, orci mi porttitor nisi, at commodo purus magna non nisi. Duis feugiat lectus in sapien mollis, ac volutpat leo elementum. Nullam euismod massa a nulla placerat sagittis. Integer id purus a dolor fermentum mollis vel feugiat dui. Nullam neque diam, mattis nec cursus at, facilisis nec diam.</p><p>Proin faucibus pretium orci, eu tristique augue condimentum at. Suspendisse potenti. Donec ut luctus eros. Nam justo nunc, facilisis lobortis hendrerit sodales, fermentum at purus. Proin eget elementum nulla, nec tincidunt lacus. Mauris massa eros, interdum eget nunc id, molestie semper libero. Vivamus tortor ex, viverra ut varius vel, finibus hendrerit nunc. Morbi pulvinar arcu erat, consectetu mollis leo vulputate eu.</p>',
+						color: 'peacock-light',
+						time: '10:00-10:30',
+						is_expanded: true
+					},
+					{
+						heading: 'Nullam neque diam, mattis nec cursus at',
+						content: '<ul><li>Quisque non molestie arcu</li><li>Nullam vehicula eros nec lorem congue mattis</li><li>Pellentesque rutrum lacinia diam in finibus</li><li>Mauris at risus pulvinar, scelerisque sapien</li></ul>',
+						color: false,
+						time: '10:30-11:00',
+					},
+					{
+						heading: 'Suspendisse potenti',
+						content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut elit lacinia, feugiat felis sit amet, congue ante. Morbi vel egestas mi. Nulla urna sapien, gravida et nisl ac, maximus euismod ipsum. Vivamus condimentum, massa non convallis hendrerit, orci mi porttitor nisi, at commodo purus magna non nisi. Duis feugiat lectus in sapien mollis, ac volutpat leo elementum. Nullam euismod massa a nulla placerat sagittis. Integer id purus a dolor fermentum mollis vel feugiat dui. Nullam neque diam, mattis nec cursus at, facilisis nec diam.</p><p>Proin faucibus pretium orci, eu tristique augue condimentum at. Suspendisse potenti. Donec ut luctus eros. Nam justo nunc, facilisis lobortis hendrerit sodales, fermentum at purus. Proin eget elementum nulla, nec tincidunt lacus. Mauris massa eros, interdum eget nunc id, molestie semper libero. Vivamus tortor ex, viverra ut varius vel, finibus hendrerit nunc. Morbi pulvinar arcu erat, consectetu mollis leo vulputate eu.</p>',
+						color: false,
+						time: '11:00-11:30',
+					},
+					{
+						heading: 'Potenti suspendisse',
+						content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut elit lacinia, feugiat felis sit amet, congue ante. Morbi vel egestas mi. Nulla urna sapien, gravida et nisl ac, maximus euismod ipsum. Vivamus condimentum, massa non convallis hendrerit, orci mi porttitor nisi, at commodo purus magna non nisi. Duis feugiat lectus in sapien mollis, ac volutpat leo elementum. Nullam euismod massa a nulla placerat sagittis. Integer id purus a dolor fermentum mollis vel feugiat dui. Nullam neque diam, mattis nec cursus at, facilisis nec diam.</p><p>Proin faucibus pretium orci, eu tristique augue condimentum at. Suspendisse potenti. Donec ut luctus eros. Nam justo nunc, facilisis lobortis hendrerit sodales, fermentum at purus. Proin eget elementum nulla, nec tincidunt lacus. Mauris massa eros, interdum eget nunc id, molestie semper libero. Vivamus tortor ex, viverra ut varius vel, finibus hendrerit nunc. Morbi pulvinar arcu erat, consectetu mollis leo vulputate eu.</p>',
+						color: false,
+						time: '11:30-12:00',
+					},
+					{
+						heading: 'Lunch',
+						content: '<ul><li>Quisque non molestie arcu</li><li>Nullam vehicula eros nec lorem congue mattis</li><li>Pellentesque rutrum lacinia diam in finibus</li><li>Mauris at risus pulvinar, scelerisque sapien</li></ul>',
+						color: 'jade-light',
+						time: '12:00-13:00',
+					},
+					{
+						heading: 'Proin faucibus pretium orci',
+						content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut elit lacinia, feugiat felis sit amet, congue ante. Morbi vel egestas mi. Nulla urna sapien, gravida et nisl ac, maximus euismod ipsum. Vivamus condimentum, massa non convallis hendrerit, orci mi porttitor nisi, at commodo purus magna non nisi. Duis feugiat lectus in sapien mollis, ac volutpat leo elementum. Nullam euismod massa a nulla placerat sagittis. Integer id purus a dolor fermentum mollis vel feugiat dui. Nullam neque diam, mattis nec cursus at, facilisis nec diam.</p><p>Proin faucibus pretium orci, eu tristique augue condimentum at. Suspendisse potenti. Donec ut luctus eros. Nam justo nunc, facilisis lobortis hendrerit sodales, fermentum at purus. Proin eget elementum nulla, nec tincidunt lacus. Mauris massa eros, interdum eget nunc id, molestie semper libero. Vivamus tortor ex, viverra ut varius vel, finibus hendrerit nunc. Morbi pulvinar arcu erat, consectetu mollis leo vulputate eu.</p>',
+						color: false,
+						time: '13:00-14:00',
+					},
+					{
+						heading: 'Potenti suspendisse',
+						content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut elit lacinia, feugiat felis sit amet, congue ante. Morbi vel egestas mi. Nulla urna sapien, gravida et nisl ac, maximus euismod ipsum. Vivamus condimentum, massa non convallis hendrerit, orci mi porttitor nisi, at commodo purus magna non nisi. Duis feugiat lectus in sapien mollis, ac volutpat leo elementum. Nullam euismod massa a nulla placerat sagittis. Integer id purus a dolor fermentum mollis vel feugiat dui. Nullam neque diam, mattis nec cursus at, facilisis nec diam.</p><p>Proin faucibus pretium orci, eu tristique augue condimentum at. Suspendisse potenti. Donec ut luctus eros. Nam justo nunc, facilisis lobortis hendrerit sodales, fermentum at purus. Proin eget elementum nulla, nec tincidunt lacus. Mauris massa eros, interdum eget nunc id, molestie semper libero. Vivamus tortor ex, viverra ut varius vel, finibus hendrerit nunc. Morbi pulvinar arcu erat, consectetu mollis leo vulputate eu.</p>',
+						color: false,
+						time: '14:00-15:00',
+					},
+					{
+						heading: 'Fika',
+						content: '<ul><li>Quisque non molestie arcu</li><li>Nullam vehicula eros nec lorem congue mattis</li><li>Pellentesque rutrum lacinia diam in finibus</li><li>Mauris at risus pulvinar, scelerisque sapien</li></ul>',
+						color: 'jade-light',
+						time: '15:00-15:30',
+					},
+					{
+						heading: 'Keynote',
+						content: '<ul><li>Quisque non molestie arcu</li><li>Nullam vehicula eros nec lorem congue mattis</li><li>Pellentesque rutrum lacinia diam in finibus</li><li>Mauris at risus pulvinar, scelerisque sapien</li></ul>',
+						color: 'peacock-light',
+						time: '16:00-17:00',
+					},
+				]
+			}
+		}
+	]
+}

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

@@ -0,0 +1,10 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		hidden: 'false',
+		id: 'domain-search',
+		addidional_classes: 'o-domain-search--narrow',
+		label: 'sök en .se- eller .nu-domän'
+	}
+}

package/src/organisms/event-listing-item/event-listing-item.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+	status: "ready",
+	title: "Event listing",
+	context: {
+		borderColor: "ruby",
+	},
+	variants: [
+		{
+			name: "With jade border color",
+			context: {
+				borderColor: "jade",
+			},
+		},
+	],
+};

package/src/organisms/features-box/features-box.config.js

@@ -0,0 +1,227 @@
+module.exports = {
+	status: 'ready',
+	title: 'Features box',
+	context: {
+		color: 'snow',
+		padding: 'u-p-x-4 u-p-t-3 u-p-b-4',
+		height: '',
+		heading: false,
+		heading_classes: false,
+		button: true,
+		button_icon: 'plus',
+		button_text: 'Skapa event',
+		additional_classes: false,
+		button_modifiers: 'icon, lemon, icon-left o-features-box__button',
+		list_items: [
+			{
+				li_text: 'Max 40 personer',
+				icon: 'capacity'
+			},
+			{
+				li_text: 'Bildskärm med anslutning via HDMI eller Mini Display Port',
+				icon: 'display'
+			},
+			{
+				li_text: 'Lång text för att testa radbryt och så. Sunt dolores aliquam non repellat sed nihil doloribus placeat. Autem debitis ut veniam',
+				icon: 'headset'
+			},
+			{
+				li_text: '5 headsets och 4 handmikrofoner',
+				icon: 'headset'
+			},
+			{
+				li_text: 'Riggat för livesändning',
+				icon: 'streaming'
+			},
+			{
+				li_text: 'Rullstolsanpassad lokal med ramp',
+				icon: 'accessibility'
+			},
+		]
+	},
+	variants: [
+		{
+			name: "headline",
+			context: {
+				padding: 'u-p-x-4 u-p-t-2 u-p-b-4',
+				heading: 'Vårt utbud i Stockholm',
+				heading_classes: 'u-m-b-2',
+				modifier: false,
+				button_classes: false,
+				button_modifiers: 'icon, icon-left, lemon o-features-box__button',
+				additional_classes: false,
+				list_items: [
+					{
+						li_text: 'Max 40 personer',
+						icon: 'capacity'
+					},
+					{
+						li_text: 'Bildskärm med anslutning via HDMI eller Mini Display Port',
+						icon: 'display'
+					},
+					{
+						li_text: 'Lång text för att testa radbryt och så. Sunt dolores aliquam non repellat sed nihil doloribus placeat. Autem debitis ut veniam',
+						icon: 'headset'
+					},
+					{
+						li_text: '5 headsets och 4 handmikrofoner',
+						icon: 'headset'
+					},
+					{
+						li_text: 'Riggat för livesändning',
+						icon: 'streaming'
+					},
+					{
+						li_text: 'Rullstolsanpassad lokal med ramp',
+						icon: 'accessibility'
+					},
+				]
+			}
+		},
+		{
+			name: "large-text",
+			context: {
+				modifier: 'large-text',
+				color: 'lemon',
+				padding: 'u-p-x-6 u-p-t-4 u-p-b-6',
+				heading: 'Vårt utbud i Stockholm',
+				heading_classes: 'u-m-b-3 supersize',
+				additional_classes: false,
+				button: false,
+				list_items: [
+					{
+						li_text: 'Max 40 personer',
+						icon: 'capacity'
+					},
+					{
+						li_text: 'Bildskärm med anslutning via HDMI eller Mini Display Port',
+						icon: 'wifi'
+					},
+					{
+						li_text: 'Lång text för att testa radbryt och så. Sunt dolores aliquam non repellat sed nihil doloribus placeat. Autem debitis ut veniam',
+						icon: 'podcast'
+					},
+					{
+						li_text: '5 headsets och 4 handmikrofoner',
+						icon: '3d'
+					},
+					{
+						li_text: 'Riggat för livesändning',
+						icon: 'capacity'
+					},
+					{
+						li_text: 'Rullstolsanpassad lokal med ramp',
+						icon: 'accessibility'
+					},
+					{
+						li_text: 'kologiskt café med lunchservering',
+						icon: 'cafe'
+					},
+				]
+			}
+		},
+		{
+			name: "event-info",
+			context: {
+				modifier: false,
+				button: true,
+				button_icon: false,
+				button_text: 'Anmäl dig',
+				button_classes: false,
+				button_modifiers: 'lemon',
+				additional_classes: false,
+				list_items: [
+					{
+						li_text: 'Max 40 personer',
+						icon: 'capacity'
+					},
+					{
+						li_text: 'Bildskärm med anslutning via HDMI eller Mini Display Port',
+						icon: 'display'
+					},
+					{
+						li_text: 'Lång text för att testa radbryt och så. Sunt dolores aliquam non repellat sed nihil doloribus placeat. Autem debitis ut veniam',
+						icon: 'headset'
+					},
+					{
+						li_text: '5 headsets och 4 handmikrofoner',
+						icon: 'headset'
+					},
+					{
+						li_text: 'Riggat för livesändning',
+						icon: 'streaming'
+					},
+					{
+						li_text: 'Rullstolsanpassad lokal med ramp',
+						icon: 'accessibility'
+					},
+				]
+			}
+		},
+		{
+			name: "contact-info",
+			context: {
+				modifier: false,
+				button: true,
+				button_icon: false,
+				button_text: 'Alla kontaktuppgifter',
+				button_classes: false,
+				button_modifiers: 'lemon',
+				additional_classes: false,
+				list_items: [
+					{
+						li_text: '<span>Gradängen, Goto10</span><br /><span class="color-granit">Hammarby Slussväg 4, 118 60 Stockholm</span>',
+						icon: 'pin'
+					},
+					{
+						li_text: 'Vardagar: 8:00-17:00<br />Helger: Stängt',
+						icon: 'time'
+					},
+					{
+						li_text: '<a href="mailto:info@goto10.se">info@goto10.se</a>',
+						icon: 'email'
+					},
+					{
+						li_text: '<a href="tel:08-10 10 10">08–10 10 10</a>',
+						icon: 'phone'
+					},
+					{
+						li_text: 'Riggat för livesändning',
+						icon: 'streaming'
+					},
+					{
+						li_text: 'Rullstolsanpassad lokal med ramp',
+						icon: 'accessibility'
+					},
+				]
+			}
+		},
+		{
+			name: "full-height",
+			context: {
+				modifier: false,
+				height: 'u-height-full',
+				additional_classes: false,
+				button: false,
+				list_items: [
+					{
+						li_text: '<span>Gradängen, Goto10</span><br /><span class="color-granit">Hammarby Slussväg 4, 118 60 Stockholm</span>',
+						icon: 'pin'
+					},
+					{
+						li_text: 'Vardagar: 8:00-17:00<br />Helger: Stängt',
+						icon: 'time'
+					},
+					{
+						li_text: 'Riggat för livesändning',
+						icon: 'streaming'
+					},
+					{
+						li_text: 'Rullstolsanpassad lokal med ramp',
+						icon: 'accessibility'
+					},
+				]
+			}
+		},
+	],
+};

package/src/organisms/filter/filter.config.js

@@ -0,0 +1,165 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		heading: 'Filtrera',
+		is_expanded: false,
+		checkboxes1: [
+			{
+				id: 'film',
+				label: 'Film',
+				value: '0',
+				is_inline: false,
+				is_disabled: false
+			},
+			{
+				id: 'rapport',
+				label: 'Rapport',
+				value: '1',
+				is_inline: false,
+				is_disabled: false
+			},
+			{
+				id: 'internetguider',
+				label: 'Internetguider',
+				value: '2',
+				is_inline: false,
+				is_disabled: false
+			}
+		],
+		checkboxes2: [
+			{
+				id: 'barnhack',
+				label: 'Barnhack',
+				value: '3',
+				is_inline: false,
+				is_disabled: false
+			},
+			{
+				id: 'domämnnamn',
+				label: 'Domämnnamn',
+				value: '4',
+				is_inline: false,
+				is_disabled: false
+			},
+			{
+				id: 'it-säkerhet',
+				label: 'IT-säkerhet',
+				value: '5',
+				is_inline: false,
+				is_disabled: false
+			},
+			{
+				id: 'statistik',
+				label: 'Statistik',
+				value: '6',
+				is_inline: false,
+				is_disabled: false
+			},
+			{
+				id: 'dns',
+				label: 'DNS',
+				value: '7',
+				is_inline: false,
+				is_disabled: false
+			},
+			{
+				id: 'integritet',
+				label: 'Integritet',
+				value: '8',
+				is_inline: false,
+				is_disabled: false
+			},
+			{
+				id: 'skola',
+				label: 'Skola',
+				value: '9',
+				is_inline: false,
+				is_disabled: false
+			}
+		],
+		checkboxes3: [
+			{
+				id: 'barn och unga',
+				label: 'Barn coh unga',
+				value: '10',
+				is_inline: false,
+				is_disabled: false
+			},
+			{
+				id: 'företagare',
+				label: 'Företagare',
+				value: '11',
+				is_inline: false,
+				is_disabled: false
+			},
+			{
+				id: 'pedagoger',
+				label: 'Pedagoger',
+				value: '12',
+				is_inline: false,
+				is_disabled: false
+			},
+			{
+				id: 'föräldrar',
+				label: 'Föräldrar',
+				value: '13',
+				is_inline: false,
+				is_disabled: false
+			},
+			{
+				id: 'journalister',
+				label: 'Journalister',
+				value: '14',
+				is_inline: false,
+				is_disabled: false
+			},
+			{
+				id: 'privatpersoner',
+				label: 'Privatpersoner',
+				value: '15',
+				is_inline: false,
+				is_disabled: false
+			}
+		],
+		checkboxes4: [
+			{
+				id: 'iis',
+				label: 'IIS',
+				value: '16',
+				is_inline: false,
+				is_disabled: false
+			},
+			{
+				id: 'pts',
+				label: 'PTS',
+				value: '17',
+				is_inline: false,
+				is_disabled: false
+			},
+			{
+				id: 'scb',
+				label: 'SCB',
+				value: '18',
+				is_inline: false,
+				is_disabled: false
+			},
+			{
+				id: 'statens medieråd',
+				label: 'Statens medieråd',
+				value: '19',
+				is_inline: false,
+				is_disabled: false
+			}
+		],
+		checkboxes5: [
+			{
+				id: 'visa arkiverat material',
+				label: 'Visa arkiverat material',
+				value: '20',
+				is_inline: false,
+				is_disabled: false
+			}
+		]
+	}
+}

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

@@ -0,0 +1,30 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		id: '',
+		footer_text: '<p class="o-footer__paragraph"><a href="https://internetstiftelsen.se">Internetstiftelsen</a> verkar för ett internet som bidrar positivt till människan och samhället. Vi är en oberoende organisation som säkerställer en stark och säker infrastruktur för internet i Sverige. Vårt mål är att alla ska våga och kunna använda internet. Vi finns i Sverige och ansvarar för den svenska toppdomänen .se och driften av toppdomänen .nu.</p>',
+		contact_1: '<ul class="u-list-clean o-footer__info__contact__address"><li class="o-footer__info__contact__address__li">Internetstiftelsen</li><li class="o-footer__info__contact__address__li">Hammarby Kaj 10D</li><li class="o-footer__info__contact__address__li">Box 92073</li><li class="o-footer__info__contact__address__li">120 07 Stockholm</li></ul>',
+		contact_2: '<ul class="u-list-clean o-footer__info__contact__address"><li class="o-footer__info__contact__address__li">E-post: <a class="o-footer__link" href="mailto:info@internetstiftelsen.se">info@internetstiftelsen.se</a></li><li class="o-footer__info__contact__address__li">Telefon: <a class="o-footer__link" href="tel:084523500">08-452 35 00</a></li><li class="o-footer__info__contact__address__li">Organisationsnummer: 802405-0190</li></ul>',
+		ISO_link: 'https://internetstiftelsen.se/docs/Certifikat_27001_UKAS_sv.pdf',
+		ISO_image: 'https://internetstiftelsen.se/app/themes/internetstiftelsen/images/ISO_27001_2013_black_TM.svg',
+		ISO_text: 'Certifierade enligt ISO/IEC<br>27001:2013',
+		CC_license: 'Creative Commons licens<br>Erkännande 4.0 Internationell',
+		site_heading_1: 'Svenskarna och internet',
+		site_description_1: 'En årlig studie av svenska folkets internetvanor',
+		site_heading_2: 'Internetdagarna',
+		site_description_2: 'Internetdagarna är en konferens som arrangeras av Internetstiftelsen',
+		site_heading_3: 'Goto 10',
+		site_description_3: 'Goto 10 är en start- och mötesplats för internetrelaterade frågor som drivs av Internetstiftelsen',
+		site_heading_4: 'Bredbandskollen',
+		site_description_4: 'Bredbandskollen är ett oberoende konsumentverktyg som drivs av Internetstiftelsen',
+		site_heading_5: 'Internetmuseum',
+		site_description_5: 'Ett digitalt museum som byggts, och kureras av Internetstiftelsen',
+		site_heading_6: 'Digitala lektioner',
+		site_description_6: 'Öppen digital lärresurs med färdiga lektioner för alla stadier i grundskolan',
+		site_heading_7: 'Internetkunskap',
+		site_description_7: 'Samlad kunskap som hjälper dig att bli en säker och medveten internetanvändare',
+		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

@@ -0,0 +1,10 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		logo_link_text: 'Till startsidan',
+		logo_link_href: '/',
+		label: 'sök en .se- eller .nu-domän',
+		controls: ''
+	}
+}