@internetstiftelsen/styleguide 2.22.1 → 2.22.2

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

@@ -0,0 +1,117 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		heading: 'Meningsfull tid i rapporten Svenskarna och internet 2019',
+		has_image: true,
+		has_radius: false,
+		limited_width: false,
+		has_buttons: false,
+		has_tags: true,
+		hero_image: '/assets/images/hero.jpg',
+		has_link: true
+	},
+	variants: [
+		{
+			name: 'Wrapped',
+			context: {
+				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. Tid på sociala medier tycker bara var fjärde är meningsfull.',
+			}
+		},
+		{
+			name: 'Buttons',
+			context: {
+				has_tags: false,
+				has_buttons: true,
+				limited_width: false,
+				text: 'Så gott som alla svenskar använder internet och digitala tjänster idag',
+			},
+		},
+		{
+			name: 'No image',
+			context: {
+				no_image_class: 'o-hero--no-image',
+				has_radius: false,
+				has_image: false,
+				has_buttons: false,
+				has_tags: true,
+				limited_width: 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. Tid på sociala medier tycker bara var fjärde är meningsfull.',
+			}
+		},
+		{
+			name: 'Video',
+			context: {
+				no_image_class: false,
+				has_radius: true,
+				video_class: 'o-hero--video',
+				limited_width: true,
+				has_video: true,
+				has_image: false,
+				has_buttons: false,
+			}
+		},
+		{
+			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'
+				}
+		},
+		{
+			name: 'Event hero with button',
+			status: 'wip',
+				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',
+			context: {
+				no_image_class: 'o-hero--clean',
+				limited_width: false,
+				has_buttons: false,
+			}
+		},
+		{
+			name: 'Early breakpoint',
+			context: {
+				no_image_class: 'o-hero--break-early o-hero--clean',
+				limited_width: false,
+				has_buttons: false,
+			}
+		},
+	]
+}

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

@@ -0,0 +1,38 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		has_image: true,
+		heading: 'Nyhetsbrev från Internetstiftelsen',
+		preable: 'Cirka en gång i månaden tipsar vi om intressanta evenemang och roliga projekt som vi driver. Se till att du håller dig uppdaterad genom att prenumerera på nyhetsbrevet!',
+		label: 'Din e-postadress',
+		policy_agree: 'Jag samtycker till att ta emot nyhetsbrev och har tagit del av <a href="https://internetstiftelsen.se/om-webbplatsen/integritetspolicy-for-besokare-pa-internetstiftelsens-webbplatser/" target="_blank" class="u-link">integritetspolicyn</a>',
+		policy_agree_short: 'Integritetspolicy',
+		subscribe: 'Prenumerera',
+		email_help_text: 'E-post är obligatoriskt',
+		has_groups: false
+	},
+	variants: [
+		{
+			name: "Has groups",
+			context: {
+				has_groups: true,
+				group_name: 'Årskurs',
+				groups: [
+					{
+						text: 'F-3'
+					},
+					{
+						text: '4-6'
+					},
+					{
+						text: '7-9'
+					},
+					{
+						text: 'Gymnasiet'
+					}
+				]
+			}
+		}
+	]
+}

package/src/organisms/mega-menu/mega-menu.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		hidden: 'false',
+		id: 'mega-menu'
+	},
+	variants: [
+		{
+			name: 'With search',
+			context: {
+				search: true
+			}
+		},
+		{
+			name: 'With domain search',
+			context: {
+				domain_search: true
+			}
+		}
+	]
+}

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

@@ -0,0 +1,76 @@
+module.exports = {
+	status: 'ready',
+	default: 'player',
+
+	context: {
+		playlist: false,
+		hidden: false,
+		src: 'https://traffic.libsyn.com/secure/internetpodden/20201215-svenskarna-och-internet-2020.mp3?dest-id=1534313',
+		image: true,
+		title: 'Svenskarna och internet 2020',
+		description: 'Årets högtidsstund för alla som älskar internetstatistik är här! Vår rapport Svenskarna och internet har utökats inför ett speciellt år med extra frågor kring Coronapandemin. Jannike Tillå, Måns Jonasson och Jenny Andersson från Internetstiftelsen diskuterar insikterna från årets rapport.',
+		duration: '53:04',
+		has_modifier: false,
+		is_single_episode: true,
+		date: '15 december, 2020',
+		episodeImage: 'https://ssl-static.libsyn.com/p/assets/a/9/6/5/a9653e010511f97e/internetpodden-logo.png'
+	},
+
+	variants: [
+		{
+			name: 'with playlist',
+			status: 'prototype',
+			context: {
+				playlist: true,
+				hidden: true,
+				src: false,
+				image: false,
+				title: false,
+				description: false,
+				duration: false,
+				is_single_episode: false
+			}
+		},
+		{
+			name: 'Episode list',
+			context: {
+				is_single_episode: false,
+				modifiers: ['list'],
+				episodes: [
+					{
+						title: 'Svenskarna och internet 2020',
+						src: 'https://traffic.libsyn.com/secure/internetpodden/20201215-svenskarna-och-internet-2020.mp3?dest-id=1534313',
+						episodeImage: 'https://ssl-static.libsyn.com/p/assets/a/9/6/5/a9653e010511f97e/internetpodden-logo.png',
+						description: 'Årets högtidsstund för alla som älskar internetstatistik är här! Vår rapport Svenskarna och internet har utökats inför ett speciellt år med extra frågor kring Coronapandemin. Jannike Tillå, Måns Jonasson och Jenny Andersson från Internetstiftelsen diskuterar insikterna från årets rapport.',
+						duration: '53:04',
+						date: '15 december, 2020'
+					},
+					{
+						title: 'David Rowan på Internetdagarna 2019',
+						src: 'https://traffic.libsyn.com/secure/internetpodden/Internetpodden_avsnitt5.mp3?dest-id=1534313',
+						episodeImage: 'https://ssl-static.libsyn.com/p/assets/3/6/a/2/36a281563e8e08b8/Internetpodden_avsnitt5.jpg',
+						description: 'Vi fortsätter våra samtal med huvudtalarna från årets Internetdagarna. I det här avsnittet samtalar Internetstiftelsens Måns Jonasson med David Rowan, tidigare chefredaktör för teknikmagasinet Wired. Rowan höll en hyllad presentation på temat innovationer, och visade upp en del inte fullt så innovativa uppfinningar. Vad är egentligen riktig innovation?',
+						duration: '17:12',
+						date: '30 december, 2019'
+					},
+					{
+						title: 'Jenny Radcliffe på Internetdagarna 2019',
+						src: 'https://traffic.libsyn.com/secure/internetpodden/internetpodden_avsnitt3.mp3?dest-id=1534313',
+						episodeImage: 'https://ssl-static.libsyn.com/p/assets/7/4/b/7/74b768ea833215f0/internetpodden_avsnitt3.jpg',
+						description: 'Vi fortsätter våra samtal med huvudtalarna från årets Internetdagarna. I det här avsnittet samtalar Internetstiftelsens Isadora Hellegren med Jenny Radcliffe, känd som "The People Hacker". Hon tar sig in i vilken byggnad som helst genom konsten att förhandla och övertala, och utnyttja säkerhetssystemens svagaste länk; människan.',
+						duration: '13:46',
+						date: '15 december, 2019'
+					}
+				]
+			}
+		},
+		{
+			name: 'Hero',
+			context: {
+				is_single_episode: true,
+				modifiers: ['hero'],
+				is_hero: true
+			}
+		}
+	]
+}

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

@@ -0,0 +1,12 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		label: 'sök på internetstiftelsen.se',
+		alt: 'Hands typing on laptop',
+		img_url: '/assets/images/ALX_0876.jpg',
+		title: 'Man spelar Candy Crush',
+		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

@@ -0,0 +1,68 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		sections: [
+			{
+				type: false,
+				modifier: false,
+				heading: 'Section grey',
+				heading_class: false,
+				text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum enim ac facilisis vehicula. Ut consequat consequat velit vel tempus. Sed non massa purus. Donec iaculis justo tristique ultrices tempus. Sed erat lectus, malesuada non lectus a, accumsan aliquam libero. Nunc sed dolor turpis. Nunc efficitur malesuada enim non viverra. Vestibulum in mi suscipit, laoreet purus eu, elementum nunc. Aliquam mattis leo sit amet erat posuere fermentum. Nunc mollis tortor quis enim facilisis, nec porttitor metus volutpat. Ut eu augue porttitor, placerat quam in, molestie nunc. Nam lacinia dignissim justo, ac mollis lorem vulputate sit amet. Maecenas feugiat eget erat nec suscipit. Phasellus pretium tellus ut pellentesque fringilla. In sodales maximus lorem eget vulputate. Donec viverra massa vel urna efficitur rutrum.'
+			},
+			{
+				type: 'white',
+				modifier: 'rectangle-left',
+				heading: 'Section white',
+				text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum enim ac facilisis vehicula. Ut consequat consequat velit vel tempus. Sed non massa purus. Donec iaculis justo tristique ultrices tempus. Sed erat lectus, malesuada non lectus a, accumsan aliquam libero. Nunc sed dolor turpis. Nunc efficitur malesuada enim non viverra. Vestibulum in mi suscipit, laoreet purus eu, elementum nunc. Aliquam mattis leo sit amet erat posuere fermentum. Nunc mollis tortor quis enim facilisis, nec porttitor metus volutpat. Ut eu augue porttitor, placerat quam in, molestie nunc. Nam lacinia dignissim justo, ac mollis lorem vulputate sit amet. Maecenas feugiat eget erat nec suscipit. Phasellus pretium tellus ut pellentesque fringilla. In sodales maximus lorem eget vulputate. Donec viverra massa vel urna efficitur rutrum.'
+			},
+			{
+				type: false,
+				modifier: false,
+				heading: 'Section grey',
+				text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum enim ac facilisis vehicula. Ut consequat consequat velit vel tempus. Sed non massa purus. Donec iaculis justo tristique ultrices tempus. Sed erat lectus, malesuada non lectus a, accumsan aliquam libero. Nunc sed dolor turpis. Nunc efficitur malesuada enim non viverra. Vestibulum in mi suscipit, laoreet purus eu, elementum nunc. Aliquam mattis leo sit amet erat posuere fermentum. Nunc mollis tortor quis enim facilisis, nec porttitor metus volutpat. Ut eu augue porttitor, placerat quam in, molestie nunc. Nam lacinia dignissim justo, ac mollis lorem vulputate sit amet. Maecenas feugiat eget erat nec suscipit. Phasellus pretium tellus ut pellentesque fringilla. In sodales maximus lorem eget vulputate. Donec viverra massa vel urna efficitur rutrum.'
+			},
+			{
+				type: 'white',
+				modifier: 'rectangle-right',
+				heading: 'Section white',
+				text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum enim ac facilisis vehicula. Ut consequat consequat velit vel tempus. Sed non massa purus. Donec iaculis justo tristique ultrices tempus. Sed erat lectus, malesuada non lectus a, accumsan aliquam libero. Nunc sed dolor turpis. Nunc efficitur malesuada enim non viverra. Vestibulum in mi suscipit, laoreet purus eu, elementum nunc. Aliquam mattis leo sit amet erat posuere fermentum. Nunc mollis tortor quis enim facilisis, nec porttitor metus volutpat. Ut eu augue porttitor, placerat quam in, molestie nunc. Nam lacinia dignissim justo, ac mollis lorem vulputate sit amet. Maecenas feugiat eget erat nec suscipit. Phasellus pretium tellus ut pellentesque fringilla. In sodales maximus lorem eget vulputate. Donec viverra massa vel urna efficitur rutrum.'
+			}
+		]
+	},
+	variants: [
+		{
+			name: 'Header and assymetric grid',
+			context: {
+				sections: [
+					{
+						type: false,
+						modifier: false,
+						heading: 'With header and assymetric grid',
+						heading_class: 'supersize',
+						has_header: true,
+						text: 'Internetstiftelsens vision är att alla vill, vågar och kan använda internet. Här har vi samlat våra utbildningssatsningar som gör att du enklare kan förstå och använda internets tjänster, och som bidrar till ökad digital kompetens.',
+					},
+					{
+						type: 'white',
+						modifier: 'rectangle-left o-section__content--peacock',
+						heading: 'Section white',
+						has_header: true,
+						has_grid: true,
+						meta: true,
+						text: 'Vi tycker om och tror på internet och brinner för att dela med oss av vår kunskap. Vår vision är att alla i Sverige vill, vågar och kan använda internet. För att det ska bli verklighet krävs kunskap om hur internet och digital teknik fungerar, både vad gäller tekniska aspekter och saker som källkritik och riskmedvetenhet.'
+					},
+					{
+						type: false,
+						modifier: 'rectangle-right o-section__content--jade',
+						heading: 'Section grey',
+						has_header: true,
+						has_grid: true,
+						meta: true,
+						text: 'Vi verkar för ett internet som bidrar positivt till människan och samhället. Därför är vi intresserade av hur internet i Sverige används och hur vi kan hjälpa medborgarna att använda det bättre och försäkra sig om att de får vad de betalar för.'
+					},
+				]
+			}
+		}
+	]
+}

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

@@ -0,0 +1,28 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		tab_item: [
+			{
+				id: 'tab-1',
+				heading: 'De här',
+				content: '<p>Klinisk och min drink. Reserverad potten var nu en kund, men inte bara protein. Renare TV, uppvärmning för någon, chips start. Antioxidanter eller om barnen orienterade, fotboll framför datorn. Medlemmar i dörren var intakt protein. Läxor fotbollstips lejon kartong bananer. Smartphones och bananer temperatur.</p>'
+			},
+			{
+				id: 'tab-2',
+				heading: 'Tabbarna',
+				content: '<p>Ta färdväg åker rot häst se precis det blev därmed se, söka smultron för ingalunda brunsås fram se vi miljoner jäst olika, groda sällan dunge när tiden fram helt sig dock. För sax blivit redan av där vid upprätthållande omfångsrik det på bra, icke dunge på mjuka groda ser del kan stora. År denna gör erfarenheter häst bland tre ta söka redan år, dimma om händer rot dimma att om själv av sjö, sig stig genom och sorgliga själv verkligen nya där.</p>'
+			},
+			{
+				id: 'tab-3',
+				heading: ' Går till elva',
+				content: '<p>Gamla det som mjuka gamla hans gamla bra sista fram gamla, tiden trevnadens se hwila när själv nu har kanske hwila, helt i när groda göras rännil verkligen tid så. Dock upprätthållande ta faktor sällan dimmhöljd ingalunda mjuka, vidsträckt bra tidigare vemod samma att lax redan, bra oss strand dimma redan är. Räv att dimmhöljd söka kunde tiden söka vid när, gör del dag söka vad icke se, göras tidigare vid nu dunge kunde tiden.</p>'
+			},
+			{
+				id: 'tab-4',
+				heading: '<svg width="20" height="20" viewbox="0 0 32 32"><path d="M31.5 18.2v-4.4h-4.7c-.3-1.4-.8-2.6-1.5-3.7l3.3-3.3-3.1-3.1L22.2 7c-1.2-.8-2.6-1.4-4-1.7V.5h-4.4v4.7c-1.4.2-2.7.8-3.9 1.6L6.7 3.6 3.6 6.7l3.2 3.2c-.8 1.2-1.3 2.5-1.6 3.9H.5v4.4h4.7c.3 1.5.9 2.8 1.7 4l-3.3 3.3 3.1 3.1 3.3-3.3c1.1.7 2.4 1.3 3.7 1.5v4.7h4.4v-4.7c1.4-.3 2.7-.8 3.9-1.6l3.4 3.4 3.1-3.1-3.4-3.4c.8-1.2 1.3-2.5 1.6-3.9h4.8zM16 23.5c-4.1 0-7.5-3.4-7.5-7.5s3.4-7.5 7.5-7.5 7.5 3.4 7.5 7.5-3.4 7.5-7.5 7.5z"></path></svg>',
+				content: '<p>Dock upprätthållande ta faktor sällan dimmhöljd ingalunda mjuka, vidsträckt bra tidigare vemod samma att lax redan, bra oss strand dimma redan är. Räv att dimmhöljd söka kunde tiden söka vid när, gör del dag söka vad icke se, göras tidigare vid nu dunge kunde tiden. Gamla det som mjuka gamla hans gamla bra sista fram gamla, tiden trevnadens se hwila när själv nu har kanske hwila, helt i när groda göras rännil verkligen tid så. </p>'
+			}
+		]
+	}
+}

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

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

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

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

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

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

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

@@ -0,0 +1,19 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		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',
+		exerpt: 'Eget nulla <strong>facilisi etiam</strong> dignissim diam quis enim lobortis scelerisque. Faucibus a pellentesque sit amet porttitor.',
+		is_padded: true,
+		is_wide: false,
+		has_shadow: false,
+		has_button: false,
+		read_time: true,
+		has_border: false,
+		has_image: true,
+		has_radius: true
+	}
+}

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

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

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

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

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

@@ -0,0 +1,7 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		label: 'sök på internetstiftelsen.se',
+	}
+}

package/src/pages/timeline/timeline.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+	status: 'prototype',
+
+	context: {
+		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',
+		exerpt: '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,
+		read_time: true,
+		has_border: false,
+		has_image: true,
+		has_radius: true
+	}
+}

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

@@ -0,0 +1,19 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		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',
+		exerpt: 'Eget nulla <strong>facilisi etiam</strong> dignissim diam quis enim lobortis scelerisque. Faucibus a pellentesque sit amet porttitor.',
+		is_padded: true,
+		is_wide: false,
+		has_shadow: false,
+		has_button: false,
+		read_time: true,
+		has_border: false,
+		has_image: true,
+		has_radius: true
+	}
+}