@internetstiftelsen/styleguide 2.22.1 → 2.22.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.22.1",
+	"version": "2.22.2",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"

package/src/atoms/archive-link/archive-link.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		text: 'Fler nyheter',
+		url: '#',
+		icon: 'arrow-forwards'
+	}
+}

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/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: 'read',
+				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'
+			}
+		}
+	]
+}

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