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

Web components for Font Awesome

import { html } from 'lit-html';
import { faCalendar, faCertificate, faEnvelope } from '@fortawesome/free-solid-svg-icons';
import { omitArgTypes, pick, storyParamsOf } from '#storybook/utils';
import iconStories from './font-awesome-icon.stories';

const icons = { faCalendar, faCertificate, faEnvelope };

export default {
	title: 'Components/FontAwesomeLayersText',
	component: 'font-awesome-layers-text',
	argTypes: {
		...pick(['size', 'transform'], iconStories.argTypes),
		icon: { options: Object.keys(icons), control: 'select', mapping: icons, description: 'Not a FontAwesomeLayersText prop' },
		value: { control: 'text' },
		position: { options: ['top-left', 'top-right', 'bottom-left', 'bottom-right', null], control: 'inline-radio' },
		...omitArgTypes([
			'fixedWidth',
			'parsedTransform',
		]),
		'--fa-layers-counter-background': { control: 'color' },
	},
	args: {
		icon: 'faCertificate',
		size: '4x',
		transform: 'rotate--45 shrink-12',
		value: 'NEW',
	},
	render: ({ icon, value, size, transform, inverse, position, counter }) => html`
		<font-awesome-layers .size=${size}>
			<font-awesome-icon .icon=${icon} .inverse=${inverse}></font-awesome-icon>
			<font-awesome-layers-text
				.transform=${transform}
				.value=${value}
				.inverse=${!inverse}
				.position=${position}
				.counter=${counter}
			></font-awesome-layers-text>
		</font-awesome-layers>
	`,
	parameters: {
		controls: { disable: false },
		docs: { description: { component:
			// eslint-disable-next-line @stylistic/max-len
			'Modeled after the official [vue-fontawesome / FontAwesomeLayersText](https://github.com/FortAwesome/vue-fontawesome#advanced) component.',
		} },
	},
};

export const Base = {
	parameters: storyParamsOf({ sourceCode: `
		<font-awesome-layers size="4x">
			<font-awesome-icon .icon=\${faCalendar}></font-awesome-icon>
			<font-awesome-layers-text transform="down-2.5 shrink-8" value="27"></font-awesome-layers-text>
		</font-awesome-layers>
	` }),
};

export const Text = {
	args: { icon: 'faCalendar', transform: 'down-2.5 shrink-8', value: '27' },
	argTypes: omitArgTypes(['counter', 'inverse', 'size', 'position', 'widthAuto', '--fa-layers-counter-background']),
	parameters: storyParamsOf({ sourceCode: `
		<font-awesome-layers size="4x">
			<font-awesome-icon .icon=\${faCalendar}></font-awesome-icon>
			<font-awesome-layers-text transform="down-2.5 shrink-8" value="27"></font-awesome-layers-text>
		</font-awesome-layers>
	` }),
};

export const Counter = {
	args: { counter: true, transform: '', icon: 'faEnvelope', position: 'top-left', value: '42' },
	argTypes: omitArgTypes(['counter', 'inverse', 'size', 'transform', 'widthAuto']),
	parameters: storyParamsOf({ sourceCode: `
		<font-awesome-layers size="4x">
			<font-awesome-icon .icon=\${faEnvelope}></font-awesome-icon>
			<font-awesome-layers-text counter value="27" position="top-left"></font-awesome-layers-text>
		</font-awesome-layers>
	` }),
};