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

Web components for Font Awesome

import { html } from 'lit-html';
import { omitArgTypes, propNamesOf, storyParamsOf } from '#storybook/utils';
import {
	faBan, faCog, faFlag, faRocket, faSkating, faSkiing, faSkiingNordic, faSnowboarding, faSnowplow,
	faQuoteLeft, faQuoteRight, faSpinner,
} from '@fortawesome/free-solid-svg-icons';

const propNames = propNamesOf('font-awesome-icon');
const argTypesIconOnly = omitArgTypes(propNames.filter(prop => prop !== 'icon'));
const icons = { faBan, faCog, faFlag, faRocket, faSpinner, faSkating, faSkiing, faSkiingNordic, faSnowboarding, faSnowplow };
const sizeOptions = ['xs', 'sm', '', 'lg', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x'];

export default {
	title: 'Components/FontAwesomeIcon',
	component: 'font-awesome-icon',
	argTypes: {
		icon: { options: Object.keys(icons), control: 'select', mapping: icons },
		mask: { options: Object.keys(icons), control: 'select', mapping: icons },
		size: {	options: sizeOptions, control: 'select' },
		rotation: {	options: [90, 180, 270, null], control: 'inline-radio' },
		pull: { options: ['left', 'right', null], control: 'inline-radio' },
		flip: { options: ['horizontal', 'vertical', 'both', null], control: 'inline-radio' },
		transform: { control: 'text' },
		...omitArgTypes([
			'fixedWidth',
			'parsedTransform',
			'resolvedIcon',
			'resolvedMask',
			'swapOpacity',
			'--fa-primary-color',
			'--fa-secondary-color',
			'--fa-primary-opacity',
			'--fa-secondary-opacity',
		]),
	},
	args: {
		size: '3x',
		icon: 'faRocket',
	},
	parameters: {
		docs: { description: { component:
			'Modeled after the official [vue-fontawesome / FontAwesomeIcon](https://github.com/FortAwesome/vue-fontawesome#basic) component.',
		} },
	},
	globals: { backgrounds: { value: 'light' } },
};

export const Base = {
	parameters: storyParamsOf({ sourceCode: `
		<font-awesome-icon .icon=\${faRocket} size="3x"></font-awesome-icon>
	` }),
};

export const WithText = {
	render: ({ icon, text }) => html`
		<span>
			<font-awesome-icon .icon=${icon}></font-awesome-icon>
			${text}
		</span>
	`,
	args: { icon: 'faCog', text: 'Settings' },
	argTypes: argTypesIconOnly,
};

export const Sizes = {
	render: ({ icon }) => html`
		<div style="display: inline-grid; grid-template-columns: auto auto; gap: 8px">
			${sizeOptions.map(size => html`
				${size ?? '[none]'}
				<font-awesome-icon .icon=${icon} size=${size} width-auto></font-awesome-icon>
			`)}
		</div>
	`,
	argTypes: argTypesIconOnly,
};

export const WidthAuto = {
	render: () => html`
		<div style="font-size: 2rem;">
			<div><font-awesome-icon style="background: skyblue" .icon=${faSkating} width-auto></font-awesome-icon> Skating</div>
			<div><font-awesome-icon style="background: skyblue" .icon=${faSkiing} width-auto></font-awesome-icon> Skiing</div>
			<div><font-awesome-icon style="background: skyblue" .icon=${faSkiingNordic} width-auto></font-awesome-icon> Nordic Skiing</div>
			<div><font-awesome-icon style="background: skyblue" .icon=${faSnowboarding} width-auto></font-awesome-icon> Snowboarding</div>
			<div><font-awesome-icon style="background: skyblue" .icon=${faSnowplow} width-auto></font-awesome-icon> Snowplow</div>
		</div>
	`,
	parameters: { controls: { disable: true } },
};

export const RotationAndFlip = {
	render: ({ icon, size, faRotateAngle }) => html`
		<div style="--fa-rotate-angle: ${faRotateAngle}deg">
			<font-awesome-icon .icon=${icon} size=${size}></font-awesome-icon>
			<font-awesome-icon rotate-by .icon=${icon} size=${size}></font-awesome-icon>
			<font-awesome-icon rotation="90" .icon=${icon} size=${size}></font-awesome-icon>
			<font-awesome-icon rotation="180" .icon=${icon} size=${size}></font-awesome-icon>
			<font-awesome-icon rotation="270" .icon=${icon} size=${size}></font-awesome-icon>
			<font-awesome-icon flip="horizontal" .icon=${icon} size=${size}></font-awesome-icon>
			<font-awesome-icon flip="vertical" .icon=${icon} size=${size}></font-awesome-icon>
			<font-awesome-icon flip="both" .icon=${icon} size=${size}></font-awesome-icon>
		</div>
	`,
	args: { icon: 'faSkiing', size: '4x', faRotateAngle: 15 },
	argTypes: argTypesIconOnly,
};

export const SpinAndPulse = {
	render: ({ icon, size }) => html`
		<font-awesome-icon .icon=${icon} .size=${size} spin></font-awesome-icon>
		<font-awesome-icon .icon=${icon} .size=${size} pulse></font-awesome-icon>
	`,
	args: { icon: 'faSpinner' },
	parameters: { controls: { disable: true } },
};

export const Pull = {
	render: ({ size }) => html`
		<div style="width: 64ch">
			<font-awesome-icon .icon=${faQuoteLeft} size=${size} pull="left" width-auto></font-awesome-icon>
			<font-awesome-icon .icon=${faQuoteRight} size=${size} pull="right" width-auto></font-awesome-icon>
			<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>
	`,
	args: { size: '3x' },
	parameters: { controls: { disable: true } },
};

export const Inverse = {
	render: ({ icon, size }) => html`
		<font-awesome-icon .icon=${icon} size=${size} inverse></font-awesome-icon>
	`,
	args: { size: '3x' },
	argTypes: argTypesIconOnly,
	globals: { backgrounds: { value: 'dark' } },
};