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';
-
+import { getBlockType } from '@wordpress/blocks';
-const { getBlockType } = wp.blocks;
+import { addFilter } from '@wordpress/hooks';
-const { addFilter } = wp.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 ) }
+			width={ width }
-		height={ size }
+			height={ height }
+			{ ...props }
 		>
 			<path
 				fill="#96588A"
@@ -21,6 +23,9 @@ const woo = ( { className, size } ) => (
 				d="M12.32 20.63a8.16 8.16 0 0 1 6.25-3.09c5.0733-.36 7.9867 2.0333 8.74 7.18 3.14 20.86 6.4933 38.5633 10.06 53.11l21.92-41.69c2-3.76 4.49-5.76 7.52-6 4.3867-.3067 7.13 2.49 8.23 8.39a186 186 0 0 0 9.47 34.23c2.62-25.38 7.0133-43.7133 13.18-55a7.73 7.73 0 0 1 6.6-4.43 8.8 8.8 0 0 1 6.32 2 7.75 7.75 0 0 1 3.05 5.74 8.52 8.52 0 0 1-1 4.77c-3.9 7.24-7.12 19.28-9.66 36.12-2.48 16.2533-3.3967 28.9633-2.75 38.13a12.25 12.25 0 0 1-1.16 6.56 6.32 6.32 0 0 1-5.33 3.53c-2.6667.18-5.3033-1.0567-7.91-3.71-9.2933-9.54-16.6567-23.7267-22.09-42.56C57.3 76.7167 52.48 86.3333 49.3 92.76c-5.86 11.3333-10.89 17.13-15.09 17.39-2.7333.1933-5.0667-2.0933-7-6.86-5.1-13.0933-10.5833-38.4033-16.45-75.93a8.56 8.56 0 0 1 1.56-6.73zM227.23 36.34a23.17 23.17 0 0 0-16-11.59 26.25 26.25 0 0 0-5.42-.58c-9.5867 0-17.41 5-23.47 15a53 53 0 0 0-7.78 28.16c0 7.7333 1.6167 14.3333 4.85 19.8a23.15 23.15 0 0 0 16 11.59 26.28 26.28 0 0 0 5.42.59c9.68 0 17.5033-5 23.47-15A53.89 53.89 0 0 0 232.08 56c0-7.7333-1.6167-14.2867-4.85-19.66zm-12.61 27.72c-1.3733 6.56-3.9167 11.5-7.63 14.82-2.9267 2.6667-5.6133 3.7433-8.06 3.23-2.4467-.5133-4.4033-2.6667-5.87-6.46a25.68 25.68 0 0 1-1.76-9.09 35.9 35.9 0 0 1 .73-7.34 33 33 0 0 1 5.28-11.88c3.3333-4.8933 6.8067-6.9467 10.42-6.16 2.44.4867 4.3933 2.64 5.86 6.46a25.68 25.68 0 0 1 1.76 9.12 35.73 35.73 0 0 1-.73 7.33v-.03zM164.57 36.34a23.2 23.2 0 0 0-16-11.59 26.42 26.42 0 0 0-5.43-.58c-9.5933 0-17.4167 5-23.47 15a53 53 0 0 0-7.78 28.16c0 7.7333 1.6133 14.3333 4.84 19.8a23.19 23.19 0 0 0 16 11.59 26.44 26.44 0 0 0 5.43.59c9.68 0 17.5033-5 23.47-15A53.88 53.88 0 0 0 169.4 56c0-7.7333-1.6133-14.2867-4.84-19.66h.01zm-12.61 27.72c-1.3667 6.56-3.91 11.5-7.63 14.82-2.93 2.64-5.63 3.72-8.07 3.23-2.44-.49-4.4-2.64-5.86-6.46a25.7 25.7 0 0 1-1.77-9.09 35.9 35.9 0 0 1 .74-7.34 33 33 0 0 1 5.28-11.88c3.3333-4.8933 6.8067-6.9467 10.42-6.16 2.44.4867 4.3933 2.64 5.86 6.46a25.91 25.91 0 0 1 1.76 9.12 35.73 35.73 0 0 1-.73 7.33v-.03z"
 			/>
 		</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,
 	} );