import docs from '~forestry/4 - Components/Structure/section-title.mdx';

export default {
	title: '4 - Components/Structure/Section Title',
	parameters: {
		componentName: 'sr-section-title',
		docs: {
			page: docs
		}
	}
};

export const Default = () => '';

Default.parameters = {
	variations: [
		{
			title: 'Superscript only',
			src: `<sr-section-title superscript="Section Title"></sr-section-title>`
		},
		{
			title: 'Superscript and Headline',
			src: `<sr-section-title headline="This is the headline" superscript="Section Title"></sr-section-title>`
		},
		{
			title: 'Headline only',
			src: `<sr-section-title headline="This is the headline"></sr-section-title>`
		},
		{
			title: 'Superscript, Headline and Content',
			src: `
				<sr-section-title headline="This is the Headline" superscript="Section Title">
					<p>Lorem ipsum content</p>
				</sr-section-title>`
		}
	]
};

export const Medium = () => '';
Medium.parameters = {
	variations: [
		{
			title: 'Headline and Content',
			src: `
				<sr-section-title headline="This is the Headline" size="medium">
					<p>Lorem ipsum content</p>
				</sr-section-title>`
		},
		{
			title: 'Superscript and Content',
			src: `
				<sr-section-title superscript="Section Title" size="medium">
					<p>Lorem ipsum content</p>
				</sr-section-title>`
		},
		{
			title: 'Superscript, Headline and Content',
			src: `
				<sr-section-title headline="This is the Headline" superscript="Section Title" size="medium">
					<p>Lorem ipsum content</p>
				</sr-section-title>
	`
		}
	]
};

export const Large = () => '';
Large.parameters = {
	variations: [
		{
			title: 'Headline and Content',
			src: `
				<sr-section-title headline="This is the Headline" size="large">
					<p>Lorem ipsum content</p>
				</sr-section-title>`
		},
		{
			title: 'Superscript and Content',
			src: `
				<sr-section-title superscript="Section Title" size="large">
					<p>Lorem ipsum content</p>
				</sr-section-title>`
		},
		{
			title: 'Superscript, Headline and Content',
			src: `
				<sr-section-title headline="This is the Headline" superscript="Section Title" size="large">
					<p>Lorem ipsum content</p>
				</sr-section-title>`
		}
	]
};
