@internetstiftelsen/styleguide 2.22.1 → 2.22.3-beta.0.2

package/src/atoms/password-toggle/password-toggle.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		type: 'password',
+		id: 'password',
+		value: false,
+		placeholder: '',
+		autocomplete: 'off',
+		has_icon: true,
+		required: false,
+		disabled: false
+	}
+}

package/src/atoms/quote/quote.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		name: 'Quote',
+		quote: '"I’ve never been to a virtual conference, but Confab online was 100x better than any other conference I’ve been to before—polished and professional, yet completely human."',
+		quotee: 'Paloma Picasso'
+	}
+}

package/src/atoms/radiobutton/radiobutton.config.js

@@ -0,0 +1,48 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		name: 'Radio button default',
+		id: 'radiobutton-0',
+		label: 'Radiobutton',
+		value: '0',
+		is_inline: false,
+		is_disabled: false
+	},
+
+	variants: [
+		{
+			name: 'Radio button inline',
+			context: {
+				id: 'radiobutton-1',
+				label: 'Radio button inline',
+				value: '1',
+				is_inline: true,
+				is_disabled: false
+			}
+		},
+		{
+			name: 'Radio button disabled',
+			context: {
+
+				id: 'radiobutton-2',
+				label: 'Radio button disabled',
+				value: '2',
+				is_inline: false,
+				is_disabled: true
+			}
+		},
+		{
+			name: 'Radio button invalid',
+			context: {
+
+				id: 'radiobutton-3',
+				label: 'Radio button invalid',
+				value: '3',
+				is_inline: false,
+				is_invalid: true,
+				is_required: true
+			}
+		}
+	]
+}

package/src/atoms/rating/rating.config.js

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

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/base/_normalize.scss

@@ -18,7 +18,7 @@ html {
 }
 
 body {
-	height: 100%;
+	height: auto;
 	min-height: 100%;
 	margin: 0;
 

package/src/base/fonts/_fonts.scss

@@ -6,8 +6,8 @@
 	font-style: normal;
 	font-weight: normal;
 	src:
-		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-regular-webfont.woff2') format('woff2'),
-		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-regular-webfont.woff') format('woff');
+		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/HKGrotesk-Light.woff2') format('woff2'),
+		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/HKGrotesk-Light.woff') format('woff');
 	font-display: swap;
 }
 
@@ -16,8 +16,8 @@
 	font-style: normal;
 	font-weight: normal;
 	src:
-		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-medium-webfont.woff2') format('woff2'),
-		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-medium-webfont.woff') format('woff');
+		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/HKGrotesk-Medium.woff2') format('woff2'),
+		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/HKGrotesk-Medium.woff') format('woff');
 	font-display: swap;
 }
 
@@ -26,8 +26,8 @@
 	font-style: normal;
 	font-weight: normal;
 	src:
-		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-semibold-webfont.woff2') format('woff2'),
-		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-semibold-webfont.woff') format('woff');
+		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/HKGrotesk-SemiBold.woff2') format('woff2'),
+		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/HKGrotesk-SemiBold.woff') format('woff');
 	font-display: swap;
 }
 
@@ -36,8 +36,8 @@
 	font-style: normal;
 	font-weight: normal;
 	src:
-		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-bold-webfont.woff2') format('woff2'),
-		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-bold-webfont.woff') format('woff');
+		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/HKGrotesk-Bold.woff2') format('woff2'),
+		url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/HKGrotesk-Bold.woff') format('woff');
 	font-display: swap;
 }
 

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

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

package/src/components.js

@@ -21,7 +21,9 @@ import './assets/js/responsivePosition';
 import './assets/js/youtube';
 import './molecules/glider/glider';
 import './molecules/glider/glider-course';
-import './atoms/timeline/anchorScroll';
-import './molecules/timeline-navigation/timeline-navigation';
+import './molecules/glider/glider-hero';
 import './molecules/context-menu/context-menu';
 import './molecules/alert/alert';
+import './molecules/continue-video-guide/continue-video-guide';
+import './organisms/video-guide/video-guide';
+import './organisms/timeline/timeline';

package/src/configurations/_extends.scss

@@ -146,13 +146,17 @@
 	}
 
 	&:disabled {
-		background-color: $color-granit !important;
+		background-color: $color-concrete !important;
 		box-shadow: none;
 		cursor: not-allowed;
 
 		[class*='text'] {
 			color: $color-snow !important;
 		}
+
+		svg {
+			fill: $color-granit;
+		}
 	}
 
 	svg {

package/src/configurations/_variables.scss

@@ -11,9 +11,9 @@ $font-family-medium: 'HK Grotesk Medium', sans-serif !default;
 $font-family-bold: 'HK Grotesk Bold', sans-serif !default;
 $font-family-mono: 'Roboto Mono Regular', monospace !default;
 
-$headings-baseline: 0.09 !default; // HK Semibold
-$body-baseline: 0.09 !default; // HK Regular
-$mono-baseline: 0.111 !default; // Roboto Mono Regular
+$headings-baseline: 0.150 !default; // HK Semibold
+$body-baseline: 0.150 !default; // HK Regular
+$mono-baseline: 0.110 !default; // Roboto Mono Regular
 
 // Size base
 $size-base: 18px !default;