import docs from '~forestry/4 - Components/Navigation/footer.mdx';

export default {
	title: '4 - Components/Navigation/Footer',
	parameters: {
		componentName: 'sr-footer',
		docs: {
			page: docs
		}
	}
};

export const Default = () => {
	return `
		<sr-footer>
			<a slot="left" href="https://www.swissre.com/privacy-policy.html">Privacy policy</a>
			<a slot="left" href="https://www.swissre.com/legal-notice.html">Legal Notice</a>
			<a slot="left" href="https://www.swissre.com/about-us/modern-slavery-statement.html">UK Slavery Statement</a>

			<sr-icon-button slot="right" icon="linkedin" href="https://www.linkedin.com/company/swiss-re/" target="_blank">
				Follow us on LinkedIn
			</sr-icon-button>
			
			<sr-icon-button slot="right" icon="twitter" href="https://twitter.com/SwissRe" target="_blank">
				Follow us on Twitter
			</sr-icon-button>
			
			<sr-icon-button slot="right" icon="youtube" href="https://www.youtube.com/user/swissretv" target="_blank">
				Follow us on YouTube
			</sr-icon-button>
			
			<sr-icon-button slot="right" icon="instagram" href="https://www.instagram.com/swiss_re_group/" target="_blank">
				Follow us on Instagram
			</sr-icon-button>

			<span slot="bottom">&copy; 2020 Swiss Re.</span>
			<span slot="bottom">All rights reserved.</span>

		</sr-footer>
	`;
};

export const CustomContent = () => {
	return `
		<sr-footer>
			<a slot="left" href="/more">More about us</a>
			<a slot="left" href="/imprint">Imprint</a>

			<sr-icon-button slot="right" icon="message" href="/contact">Contact us</sr-icon-button>
			<sr-icon-button slot="right" icon="phone" href="tel:123123123">Call us</sr-icon-button>
			
			<span slot="bottom">&copy; Hinderling Volkart AG</span>
		</sr-footer>
	`;
};
