initial commit

packages/woocommerce-blocks/assets/js/icons/stories/index.js

@@ -0,0 +1,90 @@
+/**
+ * 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 />;