@gechiui/components/src/icon/stories/index.js

UI components for GeChiUI.

/**
 * External dependencies
 */
import { number } from '@storybook/addon-knobs';

/**
 * GeChiUI dependencies
 */
import { SVG, Path } from '@gechiui/primitives';
import { gechiui } from '@gechiui/icons';

/**
 * Internal dependencies
 */
import Icon from '../';

export default {
	title: 'Components/Icon',
	component: Icon,
	parameters: {
		knobs: { disabled: false },
	},
};

const IconSizeLabel = ( { size } ) => (
	<div style={ { fontSize: 12 } }>{ size }px</div>
);

export const _default = () => {
	const size = number( 'Size', '24' );

	return (
		<div>
			<Icon icon={ gechiui } size={ size } />
			<IconSizeLabel size={ size } />
		</div>
	);
};

export const sizes = () => {
	const iconSizes = [ 14, 16, 20, 24, 28, 32, 40, 48, 56 ];

	return (
		<>
			{ iconSizes.map( ( size ) => (
				<div
					key={ size }
					style={ { padding: 20, display: 'inline-block' } }
				>
					<Icon icon={ gechiui } size={ size } />
					<IconSizeLabel size={ size } />
				</div>
			) ) }
		</>
	);
};

export const colors = () => {
	const iconColors = [ 'blue', 'purple', 'green' ];

	return (
		<>
			{ iconColors.map( ( color ) => (
				<div
					key={ color }
					style={ {
						padding: 20,
						display: 'inline-block',
						fill: color,
					} }
				>
					<Icon icon={ gechiui } />
					<IconSizeLabel size={ 24 } />
				</div>
			) ) }
		</>
	);
};

export const withAFunction = () => (
	<Icon
		icon={ () => (
			<SVG>
				<Path d="M5 4v3h5.5v12h3V7H19V4z" />
			</SVG>
		) }
	/>
);

export const withAComponent = () => {
	const MyIconComponent = () => (
		<SVG>
			<Path d="M5 4v3h5.5v12h3V7H19V4z" />
		</SVG>
	);

	return <Icon icon={ MyIconComponent } />;
};

export const withAnSVG = () => {
	return (
		<Icon
			icon={
				<SVG>
					<Path d="M5 4v3h5.5v12h3V7H19V4z" />
				</SVG>
			}
		/>
	);
};