rebase from live enviornment
This commit is contained in:
Rachit Bhargava
@@ -0,0 +1,25 @@
|
||||
import { Meta, Title, IconGallery, IconItem } from '@storybook/blocks';
|
||||
import * as icons from '../index';
|
||||
|
||||
<Meta title="Icons/Icon Library" />
|
||||
|
||||
# Icon Library
|
||||
|
||||
<IconGallery>
|
||||
{ Object.entries( icons ).map( ( [ name, icon ] ) => {
|
||||
return (
|
||||
<IconItem key={ name } name={ name }>
|
||||
{ typeof icon === 'function' ? icon( {} ) : icon }
|
||||
</IconItem>
|
||||
);
|
||||
} ) }
|
||||
</IconGallery>
|
||||
|
||||
## Usage
|
||||
|
||||
```jsx
|
||||
import { bagAlt } from '@woocommerce/icons';
|
||||
import { Icon } from '@wordpress/icons';
|
||||
|
||||
const IconExample = () => <Icon icon={ bagAlt } />;
|
||||
```
|
||||
@@ -17,9 +17,10 @@ export { default as miniCartAlt } from './library/mini-cart-alt';
|
||||
export { default as productDetails } from './library/product-details';
|
||||
export { default as productMeta } from './library/product-meta';
|
||||
export { default as removeCart } from './library/remove-cart';
|
||||
export { default as sparkles } from './library/sparkles';
|
||||
export { default as stacks } from './library/stacks';
|
||||
export { default as thumbnailsPositionLeft } from './library/thumbnails-position-left';
|
||||
export { default as thumbnailsPositionBottom } from './library/thumbnails-position-bottom';
|
||||
export { default as thumbnailsPositionLeft } from './library/thumbnails-position-left';
|
||||
export { default as thumbnailsPositionRight } from './library/thumbnails-position-right';
|
||||
export { default as thumbUp } from './library/thumb-up';
|
||||
export { default as toggle } from './library/toggle';
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { SVG } from '@wordpress/primitives';
|
||||
|
||||
const sparkles = (
|
||||
<SVG viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M10 11c-1.588-.479-4-.91-4-.91s2-.241 4-.454c1.8-.191 3.365-.502 4-3.181C14.635 3.775 15 1 15 1s.365 2.775 1 5.455c.635 2.679 2 2.969 4 3.181 2 .213 4 .455 4 .455s-2.412.43-4 .909c-1.588.479-3 1-4 4.546-.746 2.643-.893 4.948-1 5.454-.107-.506-.167-2.5-1-5.454C13 12 11.588 11.479 10 11zM7.333 3.5C6.803 3.333 6 3.182 6 3.182s.667-.085 1.333-.16c.6-.066 1.122-.175 1.334-1.113C8.878.971 9 0 9 0s.122.971.333 1.91c.212.937.667 1.038 1.334 1.113.666.074 1.333.159 1.333.159s-.804.15-1.333.318c-.53.167-1 .35-1.334 1.59C9.085 6.017 9.036 6.824 9 7c-.036-.177-.056-.875-.333-1.91-.334-1.24-.804-1.423-1.334-1.59zM2.444 18C1.474 17.713 0 17.454 0 17.454s1.222-.145 2.444-.272c1.1-.115 2.057-.302 2.445-1.91C5.277 13.666 5.5 12 5.5 12s.223 1.665.611 3.273c.388 1.607 1.222 1.781 2.445 1.909 1.222.127 2.444.273 2.444.273s-1.474.258-2.444.545c-.971.287-1.834.6-2.445 2.727-.456 1.586-.546 2.97-.611 3.273-.065-.304-.102-1.5-.611-3.273C4.278 18.6 3.415 18.287 2.444 18z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</SVG>
|
||||
);
|
||||
|
||||
export default sparkles;
|
||||
@@ -1,97 +0,0 @@
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import type { Story } from '@storybook/react';
|
||||
import { useState } from '@wordpress/element';
|
||||
import { Icon } from '@wordpress/icons';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import * as icons from '../index';
|
||||
const { ...availableIcons } = icons;
|
||||
|
||||
export const Library: Story = ( args ) => {
|
||||
const [ filter, setFilter ] = useState( '' );
|
||||
|
||||
const filteredIcons = Object.entries( availableIcons ).reduce(
|
||||
( acc: Record< string, unknown >, [ name, icon ] ) => {
|
||||
if ( name.includes( filter ) ) {
|
||||
acc[ name ] = icon;
|
||||
}
|
||||
return acc;
|
||||
},
|
||||
{} as Partial< typeof availableIcons >
|
||||
);
|
||||
|
||||
return (
|
||||
<div style={ { padding: '20px' } }>
|
||||
<label htmlFor="filter-icons" style={ { paddingRight: '30px' } }>
|
||||
Filter Icons
|
||||
</label>
|
||||
<input
|
||||
id="filter-icons"
|
||||
type="search"
|
||||
value={ filter }
|
||||
placeholder="Icon name"
|
||||
onChange={ ( event ) => setFilter( event.target.value ) }
|
||||
/>
|
||||
<div
|
||||
style={ {
|
||||
display: 'flex',
|
||||
alignItems: 'bottom',
|
||||
flexWrap: 'wrap',
|
||||
} }
|
||||
>
|
||||
{ Object.entries( filteredIcons ).map( ( [ name, icon ] ) => {
|
||||
return (
|
||||
<div
|
||||
key={ name }
|
||||
style={ {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: '25%',
|
||||
padding: '25px 0 25px 0',
|
||||
} }
|
||||
>
|
||||
<strong
|
||||
style={ {
|
||||
width: '200px',
|
||||
} }
|
||||
>
|
||||
{ name }
|
||||
</strong>
|
||||
<div
|
||||
style={ {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
} }
|
||||
>
|
||||
<Icon
|
||||
className={ args.className }
|
||||
icon={ icon }
|
||||
/>
|
||||
<Icon
|
||||
className={ args.className }
|
||||
style={ { paddingLeft: '10px' } }
|
||||
icon={ icon }
|
||||
size={ 36 }
|
||||
/>
|
||||
<Icon
|
||||
className={ args.className }
|
||||
style={ { paddingLeft: '10px' } }
|
||||
icon={ icon }
|
||||
size={ 48 }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} ) }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Library.parameters = {
|
||||
controls: { include: [], hideNoControlsWarning: true },
|
||||
};
|
||||
Library.storyName = 'Icon Library';
|
||||
Reference in New Issue
Block a user