From 4f5693e63c0da7f3ed6fa23b4492b7f3c0d5a2e7 Mon Sep 17 00:00:00 2001 From: Darren Ethier Date: Fri, 26 Jun 2020 10:22:41 -0400 Subject: [PATCH] Add storybook story for icon library (https://github.com/woocommerce/woocommerce-blocks/pull/2787) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 Co-authored-by: Albert Juhé Lluveras --- .../assets/js/filters/block-list-block.js | 5 +- .../assets/js/filters/get-block-attributes.js | 5 +- .../assets/js/icons/library/arrow-back.js | 1 + .../js/icons/library/arrow-down-alt2.js | 4 +- .../assets/js/icons/library/no-alt.js | 5 +- .../assets/js/icons/library/woo.js | 43 +++++---- .../assets/js/icons/stories/index.js | 89 +++++++++++++++++++ plugins/woocommerce-blocks/assets/js/index.js | 4 +- .../assets/js/module_replacements/dashicon.js | 4 +- 9 files changed, 131 insertions(+), 29 deletions(-) create mode 100644 plugins/woocommerce-blocks/assets/js/icons/stories/index.js diff --git a/plugins/woocommerce-blocks/assets/js/filters/block-list-block.js b/plugins/woocommerce-blocks/assets/js/filters/block-list-block.js index 293e66a533b..7d9ed6ff9d3 100644 --- a/plugins/woocommerce-blocks/assets/js/filters/block-list-block.js +++ b/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. diff --git a/plugins/woocommerce-blocks/assets/js/filters/get-block-attributes.js b/plugins/woocommerce-blocks/assets/js/filters/get-block-attributes.js index 3b02d3db013..159296236c9 100644 --- a/plugins/woocommerce-blocks/assets/js/filters/get-block-attributes.js +++ b/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. diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/arrow-back.js b/plugins/woocommerce-blocks/assets/js/icons/library/arrow-back.js index fb395e35d38..d3fc80ef25d 100644 --- a/plugins/woocommerce-blocks/assets/js/icons/library/arrow-back.js +++ b/plugins/woocommerce-blocks/assets/js/icons/library/arrow-back.js @@ -6,6 +6,7 @@ import { SVG } from 'wordpress-components'; const arrowBack = ( { +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 = ; + export default arrowDownAlt2; diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/no-alt.js b/plugins/woocommerce-blocks/assets/js/icons/library/no-alt.js index 4b1984400d8..47af505ebc5 100644 --- a/plugins/woocommerce-blocks/assets/js/icons/library/no-alt.js +++ b/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 = ; + export default noAlt; diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/woo.js b/plugins/woocommerce-blocks/assets/js/icons/library/woo.js index 565ab09e630..503af16ef77 100644 --- a/plugins/woocommerce-blocks/assets/js/icons/library/woo.js +++ b/plugins/woocommerce-blocks/assets/js/icons/library/woo.js @@ -3,24 +3,29 @@ */ import { SVG } from 'wordpress-components'; import classnames from 'classnames'; -const woo = ( { className, size } ) => ( - - - - -); +const Component = ( { className, height, width, ...props } ) => { + return ( + + + + + ); +}; + +const woo = ; export default woo; diff --git a/plugins/woocommerce-blocks/assets/js/icons/stories/index.js b/plugins/woocommerce-blocks/assets/js/icons/stories/index.js new file mode 100644 index 00000000000..9f2d456cced --- /dev/null +++ b/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 ( +
+ + setFilter( event.target.value ) } + /> +
+ { map( filteredIcons, ( icon, name ) => { + return ( +
+ + { name } + +
+ + + +
+
+ ); + } ) } +
+
+ ); +}; + +export const Library = () => ; diff --git a/plugins/woocommerce-blocks/assets/js/index.js b/plugins/woocommerce-blocks/assets/js/index.js index 89e7145fdaf..e6ac6539b23 100644 --- a/plugins/woocommerce-blocks/assets/js/index.js +++ b/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: , }, ] ); diff --git a/plugins/woocommerce-blocks/assets/js/module_replacements/dashicon.js b/plugins/woocommerce-blocks/assets/js/module_replacements/dashicon.js index b28af03a7bb..47b6a669ed2 100644 --- a/plugins/woocommerce-blocks/assets/js/module_replacements/dashicon.js +++ b/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, } );