@internetstiftelsen/styleguide 2.22.1 → 2.22.3-beta.0.2

package/src/atoms/button/button.config.js

@@ -0,0 +1,202 @@
+module.exports = {
+	status: "ready",
+	tags: ['RTR', 'website'],
+
+	context: {
+		url: '#',
+		text: 'Primary button',
+		alternative_text: false,
+		button_type: false,
+		type: false,
+		id: false,
+		aria_controls: false,
+	},
+	variants: [
+		{
+			name: 'Ruby',
+			context: {
+				modifiers: ['ruby'],
+				text: 'Ruby secondary button'
+			}
+		},
+		{
+			name: 'Ruby light',
+			context: {
+				modifiers: ['ruby-light'],
+				text: 'Ruby secondary button'
+			}
+		},
+		{
+			name: 'Ruby dark',
+			context: {
+				modifiers: ['ruby-dark'],
+				text: 'Ruby dark secondary button'
+			}
+		},
+		{
+			name: 'Jade',
+			context: {
+				modifiers: ['jade'],
+				text: 'Jade button'
+			}
+		},
+		{
+			name: 'Jade light',
+			context: {
+				modifiers: ['jade-light'],
+				text: 'Jade secondary button'
+			}
+		},
+		{
+			name: 'Jade dark',
+			context: {
+				modifiers: ['jade-dark'],
+				text: 'Jade dark secondary button'
+			}
+		},
+		{
+			name: 'Lemon',
+			context: {
+				modifiers: ['lemon'],
+				text: 'Lemon button'
+			}
+		},
+		{
+			name: 'Lemon light',
+			context: {
+				modifiers: ['lemon-light'],
+				text: 'Lemon secondary button'
+			}
+		},
+		{
+			name: 'Peacock',
+			context: {
+				modifiers: ['peacock'],
+				text: 'Peacock button'
+			}
+		},
+		{
+			name: 'Peacock light',
+			context: {
+				modifiers: ['peacock-light'],
+				text: 'Peacock secondary button'
+			}
+		},
+		{
+			name: 'Cyberspace',
+			context: {
+				modifiers: ['cyberspace'],
+				text: 'Cyberspace button'
+			}
+		},
+		{
+			name: 'Sandstone',
+			context: {
+				modifiers: ['sandstone'],
+				text: 'Sandstone button'
+			}
+		},
+		{
+			name: 'Transparent',
+			context: {
+				modifiers: ['transparent'],
+				text: 'Going home'
+			}
+		},
+		{
+			name: 'Dashed',
+			context: {
+				modifiers: ['dashed'],
+				text: 'Dashed hollow button'
+			}
+		},
+		{
+			name: 'Full width',
+			context: {
+				modifiers: ['full-width'],
+				text: 'Way wide'
+			}
+		},
+		{
+			name: 'Small',
+			context: {
+				modifiers: ['small'],
+				text: 'Going home'
+			}
+		},
+		{
+			name: 'Large',
+			context: {
+				modifiers: ['large'],
+				text: 'Going home'
+			}
+		},
+		{
+			name: 'Large responsive',
+			context: {
+				modifiers: ['large-responsive'],
+				text: 'Going home'
+			}
+		},
+		{
+			name: 'With icon',
+			context: {
+				modifiers: ['icon'],
+				text: 'Button with icon',
+				additional_classes: '',
+				icon: 'arrow-forwards',
+				el: 'button'
+			}
+		},
+		{
+			name: 'With left icon',
+			context: {
+				modifiers: ['icon', 'icon-left'],
+				text: 'Button with left icon',
+				additional_classes: '',
+				icon: 'arrow-forwards',
+				el: 'button'
+			}
+		},
+		{
+			name: 'Transparent with icon',
+			context: {
+				modifiers: ['transparent'],
+				text: 'Going home',
+				icon: 'arrow-forwards',
+				el: 'button'
+			}
+		},
+		{
+			name: 'Loading',
+			context: {
+				url: false,
+				modifiers: ['large'],
+				additional_classes: 'has-loader',
+				text: 'Click me',
+				el: 'button'
+			}
+		},
+		{
+			name: 'Standalone icon',
+			context: {
+				url: false,
+				modifiers: ['standalone-icon'],
+				text: '',
+				icon: 'close',
+				el: 'button'
+			}
+		},
+		{
+			name: 'Standalone icon white',
+			context: {
+				url: false,
+				modifiers: ['standalone-icon'],
+				additional_classes: 'a-button--standalone-icon--white',
+				text: '',
+				icon: 'close',
+				el: 'button'
+			}
+		},
+	]
+};

package/src/atoms/checkbox/checkbox.config.js

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

package/src/atoms/file/file.config.js

@@ -0,0 +1,36 @@
+module.exports = {
+	status: 'ready',
+	default: 'Single file',
+
+	context: {
+		label: 'Välj fil',
+		type: 'file',
+		id: 'file',
+		value: false,
+		placeholder: 'Välj fil',
+		icon: 'upload',
+		icon2: 'trashcan'
+	},
+	variants: [
+		{
+			name: 'Multiple files',
+			context: {
+				modifier: 'a-file---multiple',
+				is_multiple: true,
+				placeholder: 'Välj filer'
+			}
+		},
+		{
+			name: 'Color variant',
+			context: {
+				color_variant: 'cyberspace'
+			}
+		},
+		{
+			name: 'With preview',
+			context: {
+				has_preview: true
+			}
+		}
+	]
+}

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

@@ -0,0 +1,8 @@
+module.exports = {
+	status: 'prototype',
+
+	context: {
+		title: 'Grid toggle',
+		description: 'Slå av eller på en synlig grid för att se baslinjeraster.'
+	}
+}

package/src/atoms/height-limiter/height-limiter.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		title: 'Height limiter',
+		description: 'Toggla höjd på en container'
+	}
+}

package/src/atoms/icon/icon.config.js

@@ -0,0 +1,43 @@
+const fs = require('fs');
+let sprite = fs.readFileSync(__dirname + '/../../_icon-sprite.hbs');
+sprite = sprite.toString().replace(/\ /g, '').replace(/\n/g, '').split('id="');
+const icons = [];
+
+for (let i = 0; i < sprite.length; i++) {
+	if (sprite[i].substr(0, 4) === 'icon') {
+		icons.push({
+			id: sprite[i].substr(0, sprite[i].indexOf('"')).replace('icon-', '')
+		});
+	}
+}
+
+module.exports = {
+	status: 'ready',
+	title: 'Icons',
+
+	collated: true,
+
+	preview: '@layout-icons',
+
+	collator: function(markup, item) {
+		if (item.isDefault) {
+			return ''; // Don't render default empty icon
+		}
+		return `<div class="icon-wrapper">${markup}</div>`
+	},
+
+	context: {
+		additional_classes: '',
+		fill: ''
+	},
+
+	variants: icons.map((icon) => {
+		const {id} = icon;
+		return {
+			name: id,
+			context: {
+				id: id
+			}
+		};
+	})
+};

package/src/atoms/icon/spinner-white.svg

@@ -1,9 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="icon-spinner-white" viewbox="0 0 100 100" class="spinner" width="100" height="100">
-	<g>
-		<circle cx="50" cy="50" fill="none" r="43" stroke="none" stroke-width="7"></circle>
-		<circle cx="50" cy="50" fill="none" r="43" stroke="#fff" stroke-width="7" stroke-linecap="square" transform="rotate(27.6965 50 50)">
-			<animatetransform attributename="transform" type="rotate" calcmode="linear" values="0 50 50;180 50 50;720 50 50" keytimes="0;0.5;1" dur="2.5s" begin="0s" repeatcount="indefinite"></animatetransform>
-			<animate attributename="stroke-dasharray" calcmode="linear" values="9.42477796076938 179.0707812546182;188.4955592153876 -2.842170943040401e-14;9.42477796076938 179.0707812546182" keytimes="0;0.5;1" dur="2.5" begin="0s" repeatcount="indefinite"></animate>
-		</circle>
-	</g>
-</svg>
+<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-ring" style="background: none;"><circle cx="50" cy="50" ng-attr-r="{{config.radius}}" ng-attr-stroke="{{config.base}}" ng-attr-stroke-width="{{config.width}}" fill="none" r="43" stroke="transparent" stroke-width="7"></circle><circle cx="50" cy="50" ng-attr-r="{{config.radius}}" ng-attr-stroke="{{config.stroke}}" ng-attr-stroke-width="{{config.innerWidth}}" ng-attr-stroke-linecap="{{config.linecap}}" fill="none" r="43" stroke="#ffffff" stroke-width="7" stroke-linecap="square" transform="rotate(27.6965 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;180 50 50;720 50 50" keyTimes="0;0.5;1" dur="2.5s" begin="0s" repeatCount="indefinite"></animateTransform><animate attributeName="stroke-dasharray" calcMode="linear" values="9.42477796076938 179.0707812546182;188.4955592153876 -2.842170943040401e-14;9.42477796076938 179.0707812546182" keyTimes="0;0.5;1" dur="2.5" begin="0s" repeatCount="indefinite"></animate></circle></svg>

package/src/atoms/icon/spinner.svg

@@ -1,9 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="icon-spinner" viewbox="0 0 100 100" class="spinner" width="100" height="100">
-	<g>
-		<circle cx="50" cy="50" fill="none" r="43" stroke="#50b2fc" stroke-width="7"></circle>
-		<circle cx="50" cy="50" fill="none" r="43" stroke="#a7d8fd" stroke-width="7" stroke-linecap="square" transform="rotate(27.6965 50 50)">
-			<animatetransform attributename="transform" type="rotate" calcmode="linear" values="0 50 50;180 50 50;720 50 50" keytimes="0;0.5;1" dur="2.5s" begin="0s" repeatcount="indefinite"></animatetransform>
-			<animate attributename="stroke-dasharray" calcmode="linear" values="9.42477796076938 179.0707812546182;188.4955592153876 -2.842170943040401e-14;9.42477796076938 179.0707812546182" keytimes="0;0.5;1" dur="2.5" begin="0s" repeatcount="indefinite"></animate>
-		</circle>
-	</g>
-</svg>
+<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-ring" style="background: none;"><circle cx="50" cy="50" ng-attr-r="{{config.radius}}" ng-attr-stroke="{{config.base}}" ng-attr-stroke-width="{{config.width}}" fill="none" r="43" stroke="#a7d8fd" stroke-width="7"></circle><circle cx="50" cy="50" ng-attr-r="{{config.radius}}" ng-attr-stroke="{{config.stroke}}" ng-attr-stroke-width="{{config.innerWidth}}" ng-attr-stroke-linecap="{{config.linecap}}" fill="none" r="43" stroke="#50b2fc" stroke-width="7" stroke-linecap="square" transform="rotate(27.6965 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;180 50 50;720 50 50" keyTimes="0;0.5;1" dur="2.5s" begin="0s" repeatCount="indefinite"></animateTransform><animate attributeName="stroke-dasharray" calcMode="linear" values="9.42477796076938 179.0707812546182;188.4955592153876 -2.842170943040401e-14;9.42477796076938 179.0707812546182" keyTimes="0;0.5;1" dur="2.5" begin="0s" repeatCount="indefinite"></animate></circle></svg>

package/src/atoms/icon/sprite.svg

@@ -155,10 +155,16 @@
 			<path d="M16.6 4.1V1l-4.5 4.5 4.5 4.5V7c5.6.3 10 4.9 10 10.6 0 5.9-4.8 10.6-10.6 10.6S5.4 23.4 5.4 17.5c0-3.5 1.8-6.8 4.7-8.8L8.5 6.4c-3.7 2.5-5.9 6.7-5.9 11.2C2.5 25 8.6 31 16 31s13.5-6 13.5-13.5c0-7.2-5.8-13.1-12.9-13.4z"/>
 			<path d="M12.5 14.5c0 .2-.1.5-.6.5h-1.1v1.3h1.6v4.8H14v-7.2h-1.5v.6zM18.7 16c-.3 0-.6 0-.8.1l.2-.8H21v-1.5h-4.1l-.9 4 1.4.4.1-.1c.2-.3.6-.6 1-.6.7 0 1.1.5 1.1 1.1 0 .6-.4 1.1-1.1 1.1-.8 0-1-.6-1.2-1.1v-.2l-1.5.4v.2c.3 1.3 1.4 2.2 2.6 2.2 1.5 0 2.7-1.2 2.7-2.6.1-1.4-1.1-2.6-2.4-2.6z"/>
 		</symbol>
+		<symbol id="icon-step-backwards" viewbox="0 0 32 32">
+			<path d="m25.7 28.9-14.2-13 14.2-13v26zM9.753 28h-5V3h5z"/>
+		</symbol>
 		<symbol id="icon-play" viewbox="0 0 32 32">
 			<path d="M16 28.5c6.9 0 12.5-5.6 12.5-12.5S22.9 3.5 16 3.5 3.5 9.1 3.5 16 9.1 28.5 16 28.5m0 3C7.4 31.5.5 24.6.5 16S7.4.5 16 .5 31.5 7.4 31.5 16 24.6 31.5 16 31.5"/>
 			<path d="M11.7 8.2l11.4 7.7-11.4 7.7z"/>
 		</symbol>
+		<symbol id="icon-step-forwards" viewbox="0 0 32 32">
+			<path d="m4.8 2.9 14.2 13-14.2 13v-26zM20.7 3.1h5v25h-5z"/>
+		</symbol>
 		<symbol id="icon-forward-60" viewbox="0 0 32 32">
 			<path d="M15.4 4.1V1l4.5 4.5-4.5 4.5V7c-5.6.2-10.1 4.9-10.1 10.5 0 5.9 4.8 10.6 10.7 10.6s10.7-4.8 10.7-10.6c0-3.5-1.8-6.8-4.7-8.8l1.6-2.3c3.7 2.5 6 6.7 6 11.2C29.5 25 23.4 31 16 31S2.5 25 2.5 17.5c0-7.2 5.7-13.1 12.9-13.4z"/>
 			<path d="M14.2 16.3c-.2-.1-.5-.1-.7-.2l1.4-2.2H13l-2.1 3.4c-.3.4-.4.9-.4 1.4 0 1.4 1.2 2.6 2.7 2.6 1.5 0 2.7-1.2 2.7-2.6 0-1.1-.7-2-1.7-2.4zm-1 3.4c-.6 0-1.1-.5-1.1-1.1 0-.6.5-1.1 1.1-1.1.6 0 1.1.5 1.1 1.1 0 .7-.5 1.1-1.1 1.1zM18.9 13.8c-2.5 0-2.5 2.8-2.5 3.7 0 2.5.9 3.7 2.6 3.7 1.6 0 2.5-1.3 2.5-3.7 0-2.4-.9-3.7-2.6-3.7zm0 1.6c.9 0 .9 1 .9 2.2 0 1.2-.1 2.2-.9 2.2-.9 0-1-1-1-2.2.1-1.3.2-2.2 1-2.2z"/>
@@ -166,6 +172,17 @@
 		<symbol id="icon-pause" viewbox="0 0 32 32">
 			<path d="M6 3h8v26H6zM18 3h8v26h-8z"/>
 		</symbol>
+		<symbol id="icon-subtitles" viewbox="0 0 32 32">
+			<path d="M27 10v12H5V10h22m3-3H2v18h28V7z"/>
+			<path d="M25 19h-4"/>
+			<path d="M21 18h4v2h-4z"/>
+			<path d="M19 19H7"/>
+			<path d="M7 18h12v2H7z"/>
+			<path d="M7 15h4"/>
+			<path d="M7 14h4v2H7z"/>
+			<path d="M13 15h12"/>
+			<path d="M13 14h12v2H13z"/>
+		</symbol>
 		<symbol id="icon-author" viewbox="0 0 32 32">
 			<path d="M4 29h24v2H4zM10.3 26H4v-6.3L22.1 1.6l6.3 6.3L10.3 26zM6 24h3.5L25.6 7.9l-3.5-3.5L6 20.5V24z"/>
 			<path d="M17.07 6.69l1.414-1.414 6.293 6.293-1.414 1.415z"/>

package/src/atoms/icon/step-backwards.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32" xml:space="preserve"><path d="m25.7 28.9-14.2-13 14.2-13v26zM9.753 28h-5V3h5z"/></svg>

package/src/atoms/icon/step-forwards.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32" xml:space="preserve"><path d="m4.8 2.9 14.2 13-14.2 13v-26zM20.7 3.1h5v25h-5z"/></svg>

package/src/atoms/icon/subtitles.svg

@@ -0,0 +1 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 32 32" width="32" height="32" xml:space="preserve"><path d="M27 10v12H5V10h22m3-3H2v18h28V7z"/><path class="st0" d="M25 19h-4"/><path d="M21 18h4v2h-4z"/><path class="st0" d="M19 19H7"/><path d="M7 18h12v2H7z"/><g><path class="st0" d="M7 15h4"/><path d="M7 14h4v2H7z"/></g><g><path class="st0" d="M13 15h12"/><path d="M13 14h12v2H13z"/></g></svg>

package/src/atoms/input/input.config.js

@@ -0,0 +1,56 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		label: 'Namn',
+		type: 'text',
+		id: 'name',
+		value: false,
+		placeholder: 'Förnamn',
+		autocomplete: 'off',
+		has_icon: false,
+		required: false,
+		disabled: false
+	},
+	variants: [
+		{
+			name: 'Help text',
+			context: {
+				required: false,
+				has_help: true,
+				has_icon: false
+			}
+		},
+		{
+			name: 'With icon',
+			context: {
+				label: 'Sök',
+				placeholder: 'Söktext',
+				required: false,
+				has_icon: true
+			}
+		},
+		{
+			name: 'Disabled',
+			context: {
+				is_disabled: true,
+				has_icon: false
+			}
+		},
+		{
+			name: 'Invalid',
+			context: {
+				is_invalid: true,
+				required: true,
+				has_icon: false
+			}
+		},
+		{
+			name: 'Discreet',
+			context: {
+				modifier: 'a-input--discreet',
+				has_icon: false
+			}
+		}
+	]
+}

package/src/atoms/label/label.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		label: 'Namn',
+		for: 'name',
+		labelClasses: 'is-required'
+	}
+}

package/src/atoms/logotype/logotype.config.js

@@ -0,0 +1,39 @@
+const fs = require('fs');
+let sprite = fs.readFileSync(__dirname + '/../../_logotype-sprite.hbs');
+sprite = sprite.toString().replace(/\ /g, '').replace(/\n/g, '').split('id="');
+const logotypes = [];
+
+for (let i = 0; i < sprite.length; i++) {
+	if (sprite[i].substr(0, 8) === 'logotype') {
+		logotypes.push({
+			id: sprite[i].substr(0, sprite[i].indexOf('"')).replace('logotype-', '')
+		});
+	}
+}
+
+module.exports = {
+	status: 'ready',
+	title: 'Logotype',
+
+	collated: true,
+
+	preview: '@layout-logotypes',
+
+	collator: function(markup, item) {
+		return `<div class="logotype-wrapper">${markup}</div>`
+	},
+
+	context: {
+		additional_classes: ''
+	},
+
+	variants: logotypes.map((logotype) => {
+		const {id} = logotype;
+		return {
+			name: id,
+			context: {
+				id: id
+			}
+		};
+	})
+};

package/src/atoms/main-menu/main-menu.config.js

@@ -0,0 +1,75 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		item: [
+			{
+				text: 'Kunskap',
+				url: '#',
+				is_current: false,
+				icon: false,
+				hide_mobile: true
+			},
+			{
+				text: 'Innovation',
+				url: '#',
+				is_current: false,
+				icon: false,
+				hide_mobile: true
+			},
+			{
+				text: 'Domäner',
+				url: '#',
+				is_current: true,
+				icon: false,
+				hide_mobile: true
+			},
+			{
+				text: 'Ämnen',
+				url: false,
+				is_current: false,
+				icon: 'icon-arrow-down',
+				hide_mobile: true,
+				has_dropdown: true,
+				has_expandable: true,
+				controls: 'dropdown'
+			},
+			{
+				text: 'Bli medlem',
+				url: '#',
+				is_current: false,
+				icon: false,
+				hide_mobile: false,
+				is_button: true
+			},
+			{
+				text: 'Lyssna',
+				url: false,
+				is_current: false,
+				icon: false,
+				has_readspeaker: true,
+				hide_mobile: false
+			},
+			{
+				text: 'Sök ledig domän',
+				url: false,
+				is_current: false,
+				icon: 'icon-arrow-down',
+				extra_class: 'js-toggle-domain-search',
+				has_expandable: true,
+				controls: 'domain-search',
+				hide_mobile: true
+			},
+			{
+				text: 'Meny',
+				url: false,
+				is_current: false,
+				icon: 'icon-hamburger',
+				extra_class: 'js-toggle-mega-menu',
+				has_expandable: true,
+				controls: 'mega-menu',
+				hide_mobile: false
+			}
+		]
+	}
+}

package/src/atoms/meta/meta.config.js

@@ -0,0 +1,42 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		text: '2018-11-26',
+		icon: false,
+		is_light: false,
+		lowercase: false,
+		additional_classes: false,
+	},
+	variants: [
+		{
+			name: 'light',
+			context: {
+				is_light: true
+			}
+		},
+		{
+			name: 'With icon',
+			context: {
+				text: 'poddradio',
+				icon: 'play',
+			}
+		},
+		{
+			name: 'colored icon',
+			context: {
+				text: 'artikel',
+				icon: 'article',
+				color: 'ruby',
+			}
+		},
+		{
+			name: 'Lower case',
+			context: {
+				text: '20 min <span class="u-hide-sm">läsning</span>',
+				icon: 'time',
+				lowercase: true,
+			}
+		},
+	]
+}

package/src/atoms/paging/paging.config.js

@@ -0,0 +1,30 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		text: 'Paging',
+		modifiers: ['icon'],
+		icon: 'arrow-down',
+		additional_classes: false,
+		button_type: false,
+		url: '#',
+	},
+	variants: [
+		{
+			name: 'Forwards',
+			context: {
+				text: 'Framåt',
+				modifiers: ['icon'],
+				icon: 'arrow-forwards'
+			}
+		},
+		{
+			name: 'Backwards',
+			context: {
+				text: 'Bakåt',
+				modifiers: ['icon'],
+				icon: 'arrow-backwards'
+			}
+		}
+	]
+}