import generalDocs from '~forestry/4 - Components/Basic Controls/button.mdx';
import primaryDocs from '~forestry/4 - Components/Basic Controls/button-primary.mdx';
import secondaryDocs from '~forestry/4 - Components/Basic Controls/button-secondary.mdx';
import transparentDocs from '~forestry/4 - Components/Basic Controls/button-transparent.mdx';

export default {
	title: '4 - Components/Basic Controls/Button',
	parameters: {
		componentName: 'sr-button'
	}
};

export const General = () => '';

export const RichGreen = () => {
	return `
		<h2>Regular</h2>
		<sr-button>Button</sr-button>
		
		<h2>Small</h2>
		<sr-button size="small">Button</sr-button>
		
		<h2>Disabled</h2>
		<sr-button disabled>Button</sr-button>
		
		<h2>As Link</h2>
		<sr-button href="https://google.com">I’m a link</sr-button>
	`;
};

export const White = () => {
	return `
		<h2>Regular</h2>
		<sr-button color="secondary">Button</sr-button>
		
		<h2>Small</h2>
		<sr-button color="secondary" size="small">Button</sr-button>

		<h2>Disabled</h2>
		<sr-button color="secondary" disabled>Button</sr-button>
		
		<h2>As Link</h2>
		<sr-button color="secondary" href="https://google.com">I’m a link</sr-button>
	`;
};

export const Transparent = () => {
	return `
		<h2 class="white">Regular</h2>
		<sr-button color="transparent">Button</sr-button>
		
		<h2 class="white">Small</h2>
		<sr-button color="transparent" size="small">Button</sr-button>

		<h2 class="white">Disabled</h2>
		<sr-button color="transparent" disabled>Button</sr-button>
		
		<h2 class="white">As Link</h2>
		<sr-button color="transparent" href="https://google.com">I’m a link</sr-button>
	`;
};

export const WithIcon = () => {
	return `
		<h2>Icon Before Content</h2>
		<sr-button icon-before="bin">Delete</sr-button>
		
		<h2>Icon After Content</h2>
		<sr-button icon-after="bin">Delete</sr-button>
		
		<h2>With color variant</h2>
		<sr-button icon-after="bin" color="secondary">Delete</sr-button>
		
		<h2>With small size</h2>
		<sr-button icon-after="bin" size="small">Delete</sr-button>
	`;
};

export const OtherOptions = () => {
	return `
		<h2>With A11Y-Text</h2>
		<sr-button>
			Load <span class="visuallyhidden">more entries</span>
		</sr-button>

		<h2>Regular display is inline-block</h2>
		<sr-button>Button</sr-button>
		<sr-button>Button</sr-button>

		<h2>Display as block (can also be done with CSS)</h2>
		<sr-button block class="sr-gap-bottom">Button</sr-button>
		<sr-button block>Button</sr-button>

		<h2>Full Width</h2>
		<sr-button full-width>Full width button</sr-button>
	`;
};

General.parameters = {
	hideStory: true,
	docs: {
		page: generalDocs
	}
};

RichGreen.parameters = {
	docs: {
		page: primaryDocs
	}
};

White.parameters = {
	docs: {
		page: secondaryDocs
	}
};

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

WithIcon.parameters = {
	docs: false
};

OtherOptions.parameters = {
	docs: false
};
