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

export default {
	title: '4 - Components/Basic Controls/Tags',
	parameters: {
		componentName: ['sr-tag-area', 'sr-tag'],
		docs: {
			page: docs
		}
	}
};

export const TagArea = () => {
	return `
		<h2>Tag Area</h2>
		<sr-tag-area>
			<sr-tag>Cities</sr-tag>
			<sr-tag>Counties</sr-tag>
			<sr-tag>Hotspots</sr-tag>
		</sr-tag-area>

		<h2>With title text</h2>
		<sr-tag-area text="Dive deeper with these tags:">
			<sr-tag>Cities</sr-tag>
			<sr-tag>Counties</sr-tag>
			<sr-tag>Hotspots</sr-tag>
		</sr-tag-area>

		<h2>Centered</h2>
		<sr-tag-area centered>
			<sr-tag>Cities</sr-tag>
			<sr-tag>Counties</sr-tag>
			<sr-tag>Hotspots</sr-tag>
		</sr-tag-area>

		<h2>Centered with title text</h2>
		<sr-tag-area centered text="Dive deeper with these tags:">
			<sr-tag>Cities</sr-tag>
			<sr-tag>Counties</sr-tag>
			<sr-tag>Hotspots</sr-tag>
		</sr-tag-area>
	`;
};

export const SingleDefault = () => {
	return `
		<h2>Link</h2>
		<sr-tag href="https://www.swissre.com">Link</sr-tag>

		<h2>Button</h2>
		<sr-tag>Link</sr-tag>
	`;
};

export const SingleBorder = () => {
	return `
		<h2>Link</h2>
		<sr-tag color="border" href="https://www.swissre.com">Link</sr-tag>

		<h2>Button</h2>
		<sr-tag color="border">Link</sr-tag>
	`;
};

export const SingleTransparent = () => {
	return `
		<h2 class="white">Link</h2>
		<sr-tag color="transparent" href="https://www.swissre.com">Link</sr-tag>

		<h2 class="white">Button</h2>
		<sr-tag color="transparent">Link</sr-tag>
	`;
};

SingleDefault.parameters = {
	componentName: ['sr-tag', 'sr-tag-area']
};

SingleBorder.parameters = {
	componentName: ['sr-tag', 'sr-tag-area']
};

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