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>
This commit is contained in:
parent
c65fd05a73
commit
4f5693e63c
|
@ -4,9 +4,8 @@
|
||||||
import { Component } from '@wordpress/element';
|
import { Component } from '@wordpress/element';
|
||||||
import { createHigherOrderComponent } from '@wordpress/compose';
|
import { createHigherOrderComponent } from '@wordpress/compose';
|
||||||
import { compareWithWpVersion } from '@woocommerce/settings';
|
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.
|
* withDefaultAttributes HOC for editor.BlockListBlock.
|
||||||
|
|
|
@ -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.
|
* Adjust attributes on load to set defaults so default attributes get saved.
|
||||||
|
|
|
@ -6,6 +6,7 @@ import { SVG } from 'wordpress-components';
|
||||||
const arrowBack = (
|
const arrowBack = (
|
||||||
<SVG
|
<SVG
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
width="24"
|
width="24"
|
||||||
height="24"
|
height="24"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
import { SVG } from 'wordpress-components';
|
import { SVG } from 'wordpress-components';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
|
|
||||||
const arrowDownAlt2 = ( { className, size, ...extraProps } ) => {
|
const Component = ( { className, size = 20, ...extraProps } ) => {
|
||||||
const iconClass = classnames(
|
const iconClass = classnames(
|
||||||
'dashicon',
|
'dashicon',
|
||||||
'dashicons-arrow-down-alt2',
|
'dashicons-arrow-down-alt2',
|
||||||
|
@ -24,4 +24,6 @@ const arrowDownAlt2 = ( { className, size, ...extraProps } ) => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const arrowDownAlt2 = <Component />;
|
||||||
|
|
||||||
export default arrowDownAlt2;
|
export default arrowDownAlt2;
|
||||||
|
|
|
@ -3,7 +3,8 @@
|
||||||
*/
|
*/
|
||||||
import { SVG } from 'wordpress-components';
|
import { SVG } from 'wordpress-components';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
const noAlt = ( { className, size, ...extraProps } ) => {
|
|
||||||
|
const Component = ( { className, size, ...extraProps } ) => {
|
||||||
const iconClass = classnames(
|
const iconClass = classnames(
|
||||||
'dashicon',
|
'dashicon',
|
||||||
'dashicons-arrow-down-alt2',
|
'dashicons-arrow-down-alt2',
|
||||||
|
@ -23,4 +24,6 @@ const noAlt = ( { className, size, ...extraProps } ) => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const noAlt = <Component />;
|
||||||
|
|
||||||
export default noAlt;
|
export default noAlt;
|
||||||
|
|
|
@ -3,13 +3,15 @@
|
||||||
*/
|
*/
|
||||||
import { SVG } from 'wordpress-components';
|
import { SVG } from 'wordpress-components';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
const woo = ( { className, size } ) => (
|
const Component = ( { className, height, width, ...props } ) => {
|
||||||
|
return (
|
||||||
<SVG
|
<SVG
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 245 145"
|
viewBox="0 0 245 145"
|
||||||
className={ classnames( 'woo-icon', className ) }
|
className={ classnames( 'woo-icon', className ) }
|
||||||
width={ Math.floor( size * 1.67 ) }
|
width={ width }
|
||||||
height={ size }
|
height={ height }
|
||||||
|
{ ...props }
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
fill="#96588A"
|
fill="#96588A"
|
||||||
|
@ -22,5 +24,8 @@ const woo = ( { className, size } ) => (
|
||||||
/>
|
/>
|
||||||
</SVG>
|
</SVG>
|
||||||
);
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const woo = <Component />;
|
||||||
|
|
||||||
export default woo;
|
export default woo;
|
||||||
|
|
|
@ -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 />;
|
|
@ -3,7 +3,7 @@
|
||||||
*/
|
*/
|
||||||
import { getCategories, setCategories } from '@wordpress/blocks';
|
import { getCategories, setCategories } from '@wordpress/blocks';
|
||||||
import { __ } from '@wordpress/i18n';
|
import { __ } from '@wordpress/i18n';
|
||||||
import { woo as Icon } from '@woocommerce/icons';
|
import { woo, Icon } from '@woocommerce/icons';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Internal dependencies
|
* Internal dependencies
|
||||||
|
@ -19,6 +19,6 @@ setCategories( [
|
||||||
{
|
{
|
||||||
slug: 'woocommerce',
|
slug: 'woocommerce',
|
||||||
title: __( 'WooCommerce', 'woo-gutenberg-products-block' ),
|
title: __( 'WooCommerce', 'woo-gutenberg-products-block' ),
|
||||||
icon: <Icon />,
|
icon: <Icon srcElement={ woo } />,
|
||||||
},
|
},
|
||||||
] );
|
] );
|
||||||
|
|
|
@ -5,7 +5,7 @@ import {
|
||||||
arrowDownAlt2 as ArrowDownIcon,
|
arrowDownAlt2 as ArrowDownIcon,
|
||||||
noAlt as DismissIcon,
|
noAlt as DismissIcon,
|
||||||
} from '@woocommerce/icons';
|
} 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
|
// 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
|
// because currently it does not go through babel transpiling. It is injected
|
||||||
|
@ -24,7 +24,7 @@ export default function( props ) {
|
||||||
Icon = DismissIcon;
|
Icon = DismissIcon;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
return createElement( Icon, {
|
return cloneElement( Icon, {
|
||||||
size: props.size || 20,
|
size: props.size || 20,
|
||||||
className: props.className,
|
className: props.className,
|
||||||
} );
|
} );
|
||||||
|
|
Loading…
Reference in New Issue