Add storybook story for icon library (https://github.com/woocommerce/woocommerce-blocks/pull/2787)

* modify dashicon replacements to be consistent with other icon exports

This also involved modifying the dashicon module replacement to use `cloneElement` instead of `createElement`.

* import from packages not global

* export woo icon consistent with other icons from the library

The Woo category icon was not using the Icon system and not exported consistent with other icons.

* add missing viewbox to arrowBack

* add story for icon library

* Update assets/js/icons/stories/index.js

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

plugins/woocommerce-blocks/assets/js/filters/block-list-block.js

@@ -4,9 +4,8 @@
 import { Component } from '@wordpress/element';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { compareWithWpVersion } from '@woocommerce/settings';
-
-const { getBlockType } = wp.blocks;
-const { addFilter } = wp.hooks;
+import { getBlockType } from '@wordpress/blocks';
+import { addFilter } from '@wordpress/hooks';
 
 /**
  * withDefaultAttributes HOC for editor.BlockListBlock.

plugins/woocommerce-blocks/assets/js/filters/get-block-attributes.js

@@ -1,4 +1,7 @@
-const { addFilter } = wp.hooks;
+/**
+ * External dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
 
 /**
  * Adjust attributes on load to set defaults so default attributes get saved.

plugins/woocommerce-blocks/assets/js/icons/library/arrow-back.js

@@ -6,6 +6,7 @@ import { SVG } from 'wordpress-components';
 const arrowBack = (
 	<SVG
 		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
 		width="24"
 		height="24"
 		fill="currentColor"

plugins/woocommerce-blocks/assets/js/icons/library/arrow-down-alt2.js

@@ -4,7 +4,7 @@
 import { SVG } from 'wordpress-components';
 import classnames from 'classnames';
 
-const arrowDownAlt2 = ( { className, size, ...extraProps } ) => {
+const Component = ( { className, size = 20, ...extraProps } ) => {
 	const iconClass = classnames(
 		'dashicon',
 		'dashicons-arrow-down-alt2',
@@ -24,4 +24,6 @@ const arrowDownAlt2 = ( { className, size, ...extraProps } ) => {
 	);
 };
 
+const arrowDownAlt2 = <Component />;
+
 export default arrowDownAlt2;

plugins/woocommerce-blocks/assets/js/icons/library/no-alt.js

@@ -3,7 +3,8 @@
  */
 import { SVG } from 'wordpress-components';
 import classnames from 'classnames';
-const noAlt = ( { className, size, ...extraProps } ) => {
+
+const Component = ( { className, size, ...extraProps } ) => {
 	const iconClass = classnames(
 		'dashicon',
 		'dashicons-arrow-down-alt2',
@@ -23,4 +24,6 @@ const noAlt = ( { className, size, ...extraProps } ) => {
 	);
 };
 
+const noAlt = <Component />;
+
 export default noAlt;

plugins/woocommerce-blocks/assets/js/icons/library/woo.js

@@ -3,13 +3,15 @@
  */
 import { SVG } from 'wordpress-components';
 import classnames from 'classnames';
-const woo = ( { className, size } ) => (
+const Component = ( { className, height, width, ...props } ) => {
+	return (
 		<SVG
 			xmlns="http://www.w3.org/2000/svg"
 			viewBox="0 0 245 145"
 			className={ classnames( 'woo-icon', className ) }
-		width={ Math.floor( size * 1.67 ) }
-		height={ size }
+			width={ width }
+			height={ height }
+			{ ...props }
 		>
 			<path
 				fill="#96588A"
@@ -22,5 +24,8 @@ const woo = ( { className, size } ) => (
 			/>
 		</SVG>
 	);
+};
+
+const woo = <Component />;
 
 export default woo;

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

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

plugins/woocommerce-blocks/assets/js/index.js

@@ -3,7 +3,7 @@
  */
 import { getCategories, setCategories } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
-import { woo as Icon } from '@woocommerce/icons';
+import { woo, Icon } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
@@ -19,6 +19,6 @@ setCategories( [
 	{
 		slug: 'woocommerce',
 		title: __( 'WooCommerce', 'woo-gutenberg-products-block' ),
-		icon: <Icon />,
+		icon: <Icon srcElement={ woo } />,
 	},
 ] );

plugins/woocommerce-blocks/assets/js/module_replacements/dashicon.js

@@ -5,7 +5,7 @@ import {
 	arrowDownAlt2 as ArrowDownIcon,
 	noAlt as DismissIcon,
 } from '@woocommerce/icons';
-import { createElement } from '@wordpress/element';
+import { cloneElement } from '@wordpress/element';
 
 // Note: Aside from import/export, everything in this file must be IE11 friendly
 // because currently it does not go through babel transpiling. It is injected
@@ -24,7 +24,7 @@ export default function( props ) {
 			Icon = DismissIcon;
 			break;
 	}
-	return createElement( Icon, {
+	return cloneElement( Icon, {
 		size: props.size || 20,
 		className: props.className,
 	} );