import { allIcons } from '~/utils/Icons';
import docs from '~forestry/3 - Styles/icons.mdx';

export default {
	title: '3 - Styles/Icons',
	parameters: {
		docs: {
			page: docs
		},
		componentName: 'sr-icon'
	}
};

export const Usage = () => `
	<h2>Default</h2>
	<sr-icon name="reset"></sr-icon>

	<h2>Individual Color (can be set with CSS)</h2>
	<sr-icon name="reset" style="color: red"></sr-icon>

	<h2>Individual Size (can be set with CSS)</h2>
	<sr-icon name="reset" style="font-size: 64px"></sr-icon>

	<h2>Unavailable Icon (Warning in developer console)</h2>
	<sr-icon name="i-dont-exist"></sr-icon>
`;

export const AvailableIcons = () => `
	<h2>All Icons</h2>
	${allIcons
		.map(
			name =>
				'<div class="icon-example"><sr-icon name=' +
				name +
				'></sr-icon><span class="icon-example-text">' +
				name +
				'</span></div>'
		)
		.join('\n')}
`;

AvailableIcons.parameters = {
	docs: false
};
