import docs from '~forestry/4 - Components/Basic Controls/button-icon.mdx';

export default {
	title: '4 - Components/Basic Controls/IconButton',
	parameters: {
		docs: {
			page: docs
		},
		componentName: 'sr-icon-button'
	}
};

export const Default = () => '';
export const OnDarkBackground = () => '';

Default.parameters = {
	variations: [
		{
			title: 'Default',
			src: `<sr-icon-button>Enlarge</sr-icon-button>`
		},
		{
			title: 'Disabled',
			src: `<sr-icon-button disabled>Disabled</sr-icon-button>`
		},
		{
			title: 'As Link',
			src: `<sr-icon-button href="https://google.com" target="_blank">I’m a link</sr-icon-button>`
		},
		{
			title: 'Large',
			src: `<sr-icon-button size="large">Enlarge</sr-icon-button>`
		}
	]
};

OnDarkBackground.parameters = {
	backgrounds: {
		default: 'dark',
		values: [{ name: 'dark', value: '#282828' }]
	},
	docs: false,
	variations: [
		{
			title: 'Default',
			src: `<sr-icon-button>Enlarge</sr-icon-button>`
		},
		{
			title: 'Disabled',
			src: `<sr-icon-button disabled>Disabled</sr-icon-button>`
		},
		{
			title: 'Transparent',
			src: `<sr-icon-button color="transparent" >Enlarge</sr-icon-button>`
		},
		{
			title: 'Transparent Disabled',
			src: `<sr-icon-button color="transparent" disabled>Disabled</sr-icon-button>`
		}
	]
};
