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:
Darren Ethier
GitHub
parent
c65fd05a73
commit
4f5693e63c
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -3,24 +3,29 @@
|
|||
*/
|
||||
import { SVG } from 'wordpress-components';
|
||||
import classnames from 'classnames';
|
||||
const woo = ( { className, size } ) => (
|
||||
<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 }
|
||||
>
|
||||
<path
|
||||
fill="#96588A"
|
||||
d="M22.76 0h199.1a22.77 22.77 0 0 1 22.8 22.76v75.92a22.77 22.77 0 0 1-22.78 22.78h-71.41l9.77 24-43.13-24H22.76C10.1946 121.449.011 111.2654 0 98.7V22.76C.011 10.1946 10.1946.011 22.76 0z"
|
||||
/>
|
||||
<path
|
||||
fill="#FFF"
|
||||
fillRule="nonzero"
|
||||
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 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={ width }
|
||||
height={ height }
|
||||
{ ...props }
|
||||
>
|
||||
<path
|
||||
fill="#96588A"
|
||||
d="M22.76 0h199.1a22.77 22.77 0 0 1 22.8 22.76v75.92a22.77 22.77 0 0 1-22.78 22.78h-71.41l9.77 24-43.13-24H22.76C10.1946 121.449.011 111.2654 0 98.7V22.76C.011 10.1946 10.1946.011 22.76 0z"
|
||||
/>
|
||||
<path
|
||||
fill="#FFF"
|
||||
fillRule="nonzero"
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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 { __ } 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 } />,
|
||||
},
|
||||
] );
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
} );
|
||||
|
|
|
|||
Loading…
Reference in New Issue