@internetstiftelsen/styleguide 2.22.1 → 2.22.2

package/src/atoms/ribbon/ribbon.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		name: 'Ribbon',
+		text: 'stage',
+		background: 'peacock-light'
+	}
+}

package/src/atoms/select/select.config.js

@@ -0,0 +1,78 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		label: 'Select',
+		labelClasses: 'is-required',
+		id:'select',
+		has_icon: true,
+		modifier: false,
+		required: false,
+		disabled: false,
+		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: 'Full width',
+			context: {
+				required: false,
+				has_help: false,
+				modifier: 'a-select--full-width'
+			}
+		},
+		{
+			name: 'Help text',
+			context: {
+				required: false,
+				has_help: true,
+				modifier: 'a-select--full-width'
+			}
+		},
+		{
+			name: 'Invalid',
+			context: {
+				is_invalid: true,
+				required: true,
+				modifier: 'a-select--full-width'
+			}
+		},
+		{
+			name: 'Discreet',
+			context: {
+				modifier: 'a-input--discreet',
+				has_icon: false
+			}
+		}
+	]
+}

package/src/atoms/skip/skip.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		navId: 'navbar',
+		content_id: 'content',
+		skip_item: [
+			{
+				id: 'siteNav',
+				text: 'Till navigationen'
+			},
+			{
+				id: 'siteMain',
+				text: 'Till innehållet',
+				accesskey: 's'
+			}
+		]
+	}
+}

package/src/atoms/spinner/spinner.config.js

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

package/src/atoms/tag/tag.config.js

@@ -0,0 +1,36 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		text: 'cyberspace',
+		href: '#'
+	},
+	variants: [
+		{
+			name: 'Light',
+			context: {
+				text: 'light',
+				href: '#',
+				is_light: true
+			}
+		},
+		{
+			name: 'Background',
+			context: {
+				text: 'background',
+				href: '#',
+				is_light: false,
+				background_color: 'jade'
+			}
+		},
+		{
+			name: 'Combined',
+			context: {
+				text: 'combined',
+				href: '#',
+				is_light: true,
+				background_color: 'ruby'
+			}
+		}
+	]
+}

package/src/atoms/textarea/textarea.config.js

@@ -0,0 +1,56 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		label: 'Meddelande',
+		placeholder: 'Meddelande',
+		id:'message',
+		required: false,
+		disabled: 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: 'Help text',
+			context: {
+				required: false,
+				has_help: true
+			}
+		},
+		{
+			name: 'Disabled',
+			context: {
+				is_disabled: true
+			}
+		},
+		{
+			name: 'Invalid',
+			context: {
+				is_invalid: true,
+				required: true
+			}
+		},
+		{
+			name: 'Discreet',
+			context: {
+				modifier: 'a-input--discreet',
+				has_icon: false
+			}
+		},
+		{
+			name: 'Rich text',
+			status: 'wip',
+			context: {
+				is_richtext: true,
+				has_help: false
+			}
+		}
+	]
+}

package/src/atoms/toggle-high-contrast/toggle-high-contrast.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		button_text: 'Toggle high contrast',
+		trigger_class: 'js-toggle-high-contrast'
+	}
+}

package/src/atoms/tooltip/tooltip.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+	status: "ready",
+
+	context: {
+		name: "Tooltip",
+		text: "Ett .se-domännamn kan registreras för en period mellan 12-120 månader. Efter att ett domännamn förfallit kommer den att få statusen “Expired” i tio dagar. Om domänen inte förnyas under dessa tio dagar ändras statusen på domänen till “Deactivated”, vilket innebär att den inte kommer med i zonfilen. Domänen är därefter deaktiverad i 60 dagar om ingen förnyelse sker. Under deaktiveringsperioden har du möjlighet att förnya domänen."
+	}
+}

package/src/brandbook/goto10/goto10.config.js

@@ -0,0 +1,187 @@
+module.exports = {
+	status: 'ready',
+	label: 'Goto 10',
+	title: 'Goto 10',
+
+	context: {
+		sass: 'SASS',
+		hex: 'HEX',
+		rgb: 'RGB',
+		cmyk: 'CMYK',
+		pms: 'PMS',
+		colors: [
+			{
+				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: 'cyberspace',
+				title: '$color-cyberspace',
+				hex: '#1f2a36',
+				rgb: '31 42 54',
+				cmyk: '88 71 52 41',
+				pms: 'PMS 289U',
+				hasBorder: false
+			},
+			{
+				name: 'dark',
+				title: '$color-dark',
+				hex: '#4c4c4c',
+				rgb: '76 76 76',
+				cmyk: '66 58 57 37',
+				pms: 'PMS Warm Gray 11',
+				hasBorder: false
+			},
+
+		],
+		secondaryColors: [
+			{
+				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 109 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: '249 153 99',
+				cmyk: '1 20 30 0',
+				pms: '719UP',
+				hasBorder: false
+			},
+			{
+				name: 'ocean',
+				title: '$color-ocean',
+				hex: '#50b2fc',
+				rgb: '80 178 256',
+				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: 'granit',
+				title: '$color-granit',
+				hex: '#8E9297',
+				rgb: 'n/a',
+				cmyk: 'n/a',
+				pms: 'n/a',
+				hasBorder: false
+			},
+			{
+				name: 'concrete',
+				title: '$color-concrete',
+				hex: '#d8d8d8',
+				rgb: 'n/a',
+				cmyk: 'n/a',
+				pms: 'n/a',
+				hasBorder: false
+			},
+			{
+				name: 'ash',
+				title: '$color-ash',
+				hex: '#ededed',
+				rgb: 'n/a',
+				cmyk: 'n/a',
+				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
+			}
+		]
+	}
+}

package/src/brandbook/internetstiftelsen/bildman/303/251r/bildman/303/251r.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+	status: 'ready',
+	label: 'Bildmanér',
+	title: 'Bildmanér'
+}

package/src/brandbook/internetstiftelsen/identitet/identitet.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+	status: 'ready',
+	label: 'Identitet',
+	title: 'Identitet'
+}

package/src/brandbook/internetstiftelsen/tonalitet och spr/303/245kbruk/tonalitet och spr/303/245kbruk.config.js"

@@ -0,0 +1,5 @@
+module.exports = {
+	status: 'ready',
+	label: 'Tonalitet och språkbruk',
+	title: 'Tonalitet och språkbruk'
+}

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.config.js

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

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'
+	}
+}