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

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

# Border Radius

<Canvas>
	<Story name="border-radius">
		{{
			template: `<variable-table :variables="['--border-radius-small','--border-radius-base', '--border-radius-large', '--border-radius-xlarge']" />`,
			components: {
				VariableTable,
			},
		}}
	</Story>
</Canvas>

# Border Width

<Canvas>
	<Story name="border-width">
		{{
			template: `<variable-table :variables="['--border-width-base']" />`,
			components: {
				VariableTable,
			},
		}}
	</Story>
</Canvas>

<Canvas>
	<Story name="border-style">
		{{
			template: `<variable-table :variables="['--border-style-base']" />`,
			components: {
				VariableTable,
			},
		}}
	</Story>
</Canvas>
