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 = () => {
	return `
		<h2>Regular</h2>
		<sr-icon-button>Enlarge</sr-icon-button>
				
		<h2>Disabled</h2>
		<sr-icon-button disabled>Disabled</sr-icon-button>
		
		<h2>As Link</h2>
		<sr-icon-button href="https://google.com" target="_blank">I’m a link</sr-icon-button>
	
		<h2>Large</h2>
		<sr-icon-button size="large">Enlarge</sr-icon-button>
	`;
};

export const OnDarkBackground = () => {
	return `
		<h2 class="white">Regular</h2>
		<sr-icon-button>Enlarge</sr-icon-button>
				
		<h2 class="white">Disabled</h2>
		<sr-icon-button disabled>Disabled</sr-icon-button>

		<h2 class="white">Transparent</h2>
		<sr-icon-button color="transparent" >Enlarge</sr-icon-button>
				
		<h2 class="white">Transparent Disabled</h2>
		<sr-icon-button color="transparent" disabled>Disabled</sr-icon-button>
	`;
};

OnDarkBackground.parameters = {
	backgrounds: {
		default: 'dark',
		values: [{ name: 'dark', value: '#282828' }]
	},
	docs: false
};
