/**
* External dependencies
*/
import { omitBy, omit, map } from 'lodash';
import { useState } from '@wordpress/element';
/**
* Internal dependencies
*/
import Icon from '../icon';
import * as icons from '../index';
const availableIcons = omit( icons, 'Icon' );
export default {
title: 'WooCommerce Blocks/@woocommerce/icons',
component: Icon,
};
const LibraryExample = () => {
const [ filter, setFilter ] = useState( '' );
const filteredIcons = omitBy( availableIcons, ( _icon, name ) => {
return ! name.includes( filter );
} );
return (
<div style={ { padding: '20px' } }>
<label htmlFor="filter-icons" style={ { paddingRight: '30px' } }>
Filter Icons
</label>
<input
// eslint-disable-next-line no-restricted-syntax
id="filter-icons"
type="search"
value={ filter }
placeholder="Icon name"
onChange={ ( event ) => setFilter( event.target.value ) }
/>
<div
style={ {
display: 'flex',
alignItems: 'bottom',
'flex-wrap': 'wrap',
} }
>
{ map( filteredIcons, ( icon, name ) => {
return (
<div
key={ name }
style={ {
display: 'flex',
'flex-direction': 'column',
width: '25%',
padding: '25px 0 25px 0',
} }
>
<strong
style={ {
width: '200px',
} }
>
{ name }
</strong>
<div
style={ {
display: 'flex',
alignItems: 'center',
} }
>
<Icon srcElement={ icon } />
<Icon
style={ { 'padding-left': '10px' } }
srcElement={ icon }
size={ 36 }
/>
<Icon
style={ { 'padding-left': '10px' } }
srcElement={ icon }
size={ 48 }
/>
</div>
</div>
);
} ) }
</div>
</div>
);
};
export const Library = () => <LibraryExample />;