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 = () => {
	return `
		<h2>Superscript only</h2>
		<sr-section-title superscript="Section Title">
		</sr-section-title>

		<h2>Superscript and Headline</h2>
		<sr-section-title headline="This is the headline" superscript="Section Title">
		</sr-section-title>

		<h2>Headline only</h2>
		<sr-section-title headline="This is the headline">
		</sr-section-title>

		<h2>Superscript, Headline and Content</h2>
		<sr-section-title headline="This is the Headline" superscript="Section Title">
			<p>Lorem ipsum content</p>
		</sr-section-title>

	`;
};

export const Medium = () => {
	return `
		<h2>Headline and Content</h2>
		<sr-section-title headline="This is the Headline" size="medium">
			<p>Lorem ipsum content</p>
		</sr-section-title>

		<h2>Superscript and Content</h2>
		<sr-section-title superscript="Section Title" size="medium">
			<p>Lorem ipsum content</p>
		</sr-section-title>

		<h2>Superscript, Headline and Content</h2>
		<sr-section-title headline="This is the Headline" superscript="Section Title" size="medium">
			<p>Lorem ipsum content</p>
		</sr-section-title>
	`;
};

export const Large = () => {
	return `
		<h2>Headline and Content</h2>
		<sr-section-title headline="This is the Headline" size="large">
			<p>Lorem ipsum content</p>
		</sr-section-title>

		<h2>Superscript and Content</h2>
		<sr-section-title superscript="Section Title" size="large">
			<p>Lorem ipsum content</p>
		</sr-section-title>

		<h2>Superscript, Headline and Content</h2>
		<sr-section-title headline="This is the Headline" superscript="Section Title" size="large">
			<p>Lorem ipsum content</p>
		</sr-section-title>
	`;
};
