import { ArgsTable, Canvas, Story } from '@storybook/addon-docs/blocks';
import { action } from '@storybook/addon-actions';
import Select from './Select';

<Meta title="Forms/Select" component={Select} />

export const options = [
	{ label: 'Future of Finance', value: 'ff' },
	{ label: 'Beyond Silicon Valley', value: 'bsv' },
	{ label: 'How we spend', value: 'hws' },
	{ label: 'Because China', value: 'bc' },
	{ label: 'Fixing capitalism', value: 'fcs' },
	{ label: 'The climate economy', value: 'tce' },
];

# Select

Presents users with a choice of options from a dropdown.

## Props

export const defaultActions = {
	onChange: action( 'changed' ),
};

<Canvas>
	<Story
		args={{
			...defaultActions,
			hint: 'Obsessions are our alternative to traditional journalistic beats.',
			label: "Our obsessions",
			options,
			placeholder: "What are you obsessed with?",
			required: true,
			value: '',
		}}
		name="Default"
	>
		{args => <Select {...args} />}
	</Story>
</Canvas>

<ArgsTable story="Default" />

## Stories

<Canvas>
	<Story
		args={{
			...defaultActions,
			disabled: true,
			hint: 'Enter your email to select an obsession to follow.',
			label: 'Our obsessions',
			options,
			value: 'ff',
		}}
		name="Disabled"
	>
		{args => <Select {...args} />}
	</Story>
</Canvas>

<Canvas>
	<Story
		args={{
			...defaultActions,
			invalid: true,
			options,
			hint: "Sorry, your selection isn't available for mail order.",
			label: "Our obsessions",
			value: 'xx',
		}}
		name="Invalid"
	>
		{args => <Select {...args} />}
	</Story>
</Canvas>