91 lines
1.8 KiB
JavaScript
91 lines
1.8 KiB
JavaScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { omitBy, omit } 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',
|
|
flexWrap: 'wrap',
|
|
} }
|
|
>
|
|
{ Object.entries( filteredIcons ).map( ( [ name, icon ] ) => {
|
|
return (
|
|
<div
|
|
key={ name }
|
|
style={ {
|
|
display: 'flex',
|
|
flexDirection: '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={ { paddingLeft: '10px' } }
|
|
srcElement={ icon }
|
|
size={ 36 }
|
|
/>
|
|
<Icon
|
|
style={ { paddingLeft: '10px' } }
|
|
srcElement={ icon }
|
|
size={ 48 }
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
} ) }
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const Library = () => <LibraryExample />;
|