import { Meta, Story, Canvas } from '@storybook/addon-docs';
import Sizes from './Sizes.vue';

<Meta
	title="Styleguide/Spacing"
	parameters={{
		design: {
			type: 'figma',
			url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898',
		},
	}}
/>

# Spacing

<Canvas>
	<Story name="spacing">
		{{
			template: `<sizes :variables="['--spacing-5xs','--spacing-4xs','--spacing-3xs','--spacing-2xs','--spacing-xs','--spacing-s','--spacing-m','--spacing-l','--spacing-xl','--spacing-2xl','--spacing-3xl','--spacing-4xl','--spacing-5xl']" />`,
			components: {
				Sizes,
			},
		}}
	</Story>
</Canvas>
