@riovir/wc-fontawesome/src/font-awesome-layers.stories.js

Web components for Font Awesome

import { html } from 'lit-html';
import { faCircle, faCheck, faComment, faLightbulb, faShip, faWater } from '@fortawesome/free-solid-svg-icons';
import { omitArgTypes, pick, storyParamsOf } from '#storybook/utils';
import iconStories from './font-awesome-icon.stories';

export default {
	title: 'Components/FontAwesomeLayers',
	component: 'font-awesome-layers',
	parameters: {
		controls: { disable: false },
		docs: { description: { component:
			// eslint-disable-next-line @stylistic/max-len
			'Modeled after the official [vue-fontawesome / FontAwesomeLayers](https://github.com/FortAwesome/vue-fontawesome#advanced) component.\n\n' +
			'_Note that `size` is an extra prop that the official component only supports via the `fa-[size]` class._',
		} },
	},
	args: { size: '3x' },
	argTypes: {
		...pick(['size', 'pull'], iconStories.argTypes),
		...omitArgTypes(['fixedWidth']),
	},
};

export const Base = {
	render: ({ size, pull, widthAuto }) => html`
		<font-awesome-layers .size=${size} .pull=${pull} .widthAuto=${widthAuto}>
			<font-awesome-icon .icon=${faCircle}></font-awesome-icon>
			<font-awesome-icon .icon=${faCheck} transform="shrink-8" inverse></font-awesome-icon>
		</font-awesome-layers>
	`,
	parameters: storyParamsOf({ sourceCode: `
		<font-awesome-layers .size=\${size} .pull=\${pull} .widthAuto=\${widthAuto}>
			<font-awesome-icon .icon=\${faCircle}></font-awesome-icon>
			<font-awesome-icon .icon=\${faCheck} transform="shrink-8" inverse></font-awesome-icon>
		</font-awesome-layers>
	` }),
};

export const StatusIcon = {
	render: ({ size, pull, fixedWidth }) => html`
		<font-awesome-layers .size=${size} .pull=${pull} .fixedWidth=${fixedWidth}>
			<font-awesome-icon .icon=${faWater} style="color: #05386b;"></font-awesome-icon>
			<font-awesome-icon .icon=${faCircle} transform="right-6 down-5 shrink-6" style="color: #5cdb95;"></font-awesome-icon>
			<font-awesome-icon .icon=${faCheck} transform="right-6 down-5 shrink-10" style="color: #edf5e1;"></font-awesome-icon>
		</font-awesome-layers>
	`,
	parameters: storyParamsOf({ sourceCode: `
		<font-awesome-layers .size=\${size} .pull=\${pull} .fixedWidth=\${fixedWidth}>
			<font-awesome-icon .icon=\${faWater} style="color: #05386b;"></font-awesome-icon>
			<font-awesome-icon .icon=\${faCircle} transform="right-6 down-5 shrink-6" style="color: #5cdb95;"></font-awesome-icon>
			<font-awesome-icon .icon=\${faCheck} transform="right-6 down-5 shrink-10" style="color: #edf5e1;"></font-awesome-icon>
		</font-awesome-layers>
	` }),
};

export const Pull = {
	render: () => html`
		<div style="width: 64ch">
			<font-awesome-layers size="3x" pull="left">
				<font-awesome-icon .icon=${faComment} flip="horizontal"></font-awesome-icon>
				<font-awesome-icon .icon=${faLightbulb} transform="shrink-7 up-.5" style="color: #5cdb95;"></font-awesome-icon>
			</font-awesome-layers>
			<font-awesome-layers size="4x" pull="right">
				<font-awesome-icon .icon=${faComment}></font-awesome-icon>
				<font-awesome-icon .icon=${faShip} transform="shrink-11 up-3" inverse></font-awesome-icon>
				<font-awesome-icon .icon=${faWater} transform="shrink-11 down-2" style="color: #8eb0e4ff;"></font-awesome-icon>
			</font-awesome-layers>
			<p>
				There was an Old Man with a beard, Who said, <br />
				"It is just as I feared! - Two Owls and a Hen, Four Larks and a Wren, Have all built their nests in my beard!"
			</p>
		</div>
	`,
	parameters: { controls: { disable: true } },
};