Dropdown.stories.svelte

<script module>
	import { Anchor, BarbiTheme, Dropdown } from '$lib';
	import { defineMeta } from '@storybook/addon-svelte-csf';
	import CustomIcon from './CustomIcon.internal.svelte';

	const { Story } = defineMeta({
		title: 'Components/Components/Dropdown',
		component: Dropdown,
		argTypes: {
			alternate: {
				name: 'Alternate Style',
				control: 'boolean'
			},
			flat: {
				name: 'Flat Style',
				control: 'boolean'
			},
			options: {
				table: {
					disable: true
				}
			}
		}
	});
</script>

<Story
	name="Simple Dropdown"
	args={{
		label: "I'm a dropdown",
		options: [
			{
				value: '1',
				label: 'I log to the console',
				onClick() {
					console.log('First button');
				}
			},
			{ value: '2', label: "I'm an external link", href: 'https://example.com' }
		]
	}}>
	{#snippet children(args)}
		<BarbiTheme />
		<div class="storybook-center">
			<Dropdown {...args} />
		</div>
	{/snippet}
</Story>

<Story
	name="Alternate Colour Dropdown"
	args={{
		label: "This dropdown uses variant='secondary'",
		alternate: true,
		options: [
			{
				value: '1',
				label: 'I log to the console',
				onClick() {
					console.log('First button');
				}
			},
			{ value: '2', label: "I'm an external link", href: 'https://example.com' }
		]
	}}>
	{#snippet children(args)}
		<BarbiTheme />
		<div class="storybook-center">
			<Dropdown {...args} />
		</div>