js/dropdown/Dropdown.stories.svelte

<script lang="ts">
	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
	import Dropdown from "./shared/Dropdown.svelte";
</script>

<Meta
	title="Components/Dropdown"
	component={Dropdown}
	argTypes={{
		multiselect: {
			control: [true, false],
			description: "Whether to autoplay the video on load",
			name: "multiselect",
			value: false
		}
	}}
/>

<Template let:args>
	<Dropdown {...args} />
</Template>

<Story
	name="Single-select"
	args={{
		value: "swim",
		choices: [
			["run", "run"],
			["swim", "swim"],
			["jump", "jump"]
		],
		label: "Single-select Dropdown",
		info: "This is a single-select dropdown"
	}}
/>
<Story
	name="Single-select Static"
	args={{
		value: "swim",
		choices: [
			["run", "run"],
			["swim", "swim"],
			["jump", "jump"]
		],
		disabled: true,
		label: "Single-select Dropdown"
	}}
/>

<Story
	name="Empty initial value"
	args={{
		interactive: true,
		choices: [
			["run", "run"],
			["swim", "swim"],
			["jump", "jump"]
		],
		label: "Empty Dropdown"
	}}
/>