[Product Block Editor]: Add new image components (#43383)
* remove unused image component * add Shirt image component * add Glasses image component * changelog
This commit is contained in:
Damián Suárez
GitHub
parent
0ec42d2cb6
commit
ed5c7b265c
|
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: update
|
||||
|
||||
[Product Block Editor]: Add new image components
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { SVG, Path } from '@wordpress/components';
|
||||
import { createElement } from '@wordpress/element';
|
||||
|
||||
export function Glasses( {
|
||||
colorOne = '#E0E0E0',
|
||||
colorTwo = '#F0F0F0',
|
||||
size = 72,
|
||||
style = {},
|
||||
} ) {
|
||||
const rate = 72 / 33;
|
||||
|
||||
return (
|
||||
<SVG
|
||||
width={ size }
|
||||
height={ Math.round( size / rate ) }
|
||||
viewBox="0 0 72 33"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={ style }
|
||||
>
|
||||
<Path
|
||||
d="M1.82318 26.2927C2.40837 25.6395 12.1796 15.8683 13.4588 14.6027C14.6156 13.4596 16.0853 12.9696 17.8409 12.8336C19.2426 12.7383 65.159 9.36328 65.159 9.36328L65.9075 12.9016C65.9075 12.9016 17.3782 17.7736 17.3509 17.7736C13.5132 22.8633 8.01523 30.7156 7.49809 31.3008C6.10999 32.8658 3.71482 33.0019 2.13618 31.6274C0.598377 30.2257 0.448677 27.8306 1.83679 26.2655L1.82318 26.2927Z"
|
||||
fill={ colorTwo }
|
||||
/>
|
||||
<Path
|
||||
d="M70.4378 26.2927C69.8526 25.6395 60.0815 15.8683 58.8022 14.6027C57.6455 13.4596 56.1757 12.9696 54.4202 12.8336C53.0184 12.7383 7.10201 9.36328 7.10201 9.36328L6.35352 12.9016C6.35352 12.9016 54.8829 17.7736 54.9101 17.7736C58.7478 22.8633 64.2458 30.7156 64.7629 31.3008C66.151 32.8658 68.5462 33.0019 70.1248 31.6274C71.6626 30.2257 71.8123 27.8306 70.4242 26.2655L70.4378 26.2927Z"
|
||||
fill={ colorTwo }
|
||||
/>
|
||||
<Path
|
||||
d="M53.3189 0C46.4328 0 41.6016 2.5993 38.4715 8.70969C38.1449 8.4103 37.1379 8.01564 36.1172 8.01564C35.0965 8.01564 34.1031 8.42391 33.7629 8.70969C30.6328 2.5993 25.8017 0 18.9156 0C12.0295 0 4.49012 4.53176 0.666016 6.38257V11.9078H4.77591C5.34748 15.4461 8.61362 25.68 19.0244 25.68C28.1288 25.68 30.9322 19.2838 32.9736 15.378C33.6812 14.0172 34.5658 12.0711 36.1172 12.0711C37.6686 12.0711 38.5532 14.0172 39.2609 15.378C41.2886 19.2838 44.092 25.68 53.21 25.68C63.6208 25.68 66.8869 15.4597 67.4585 11.9078H71.5684V6.38257C67.7443 4.54537 60.3683 0 53.3189 0ZM19.0517 22.3186C12.9277 22.3186 8.83136 16.9022 8.83136 11.4723C8.83136 5.53882 14.1797 3.2117 19.1605 3.2117C24.1414 3.2117 29.8027 5.811 29.8027 11.0912C29.8027 17.1336 25.3662 22.305 19.0517 22.305V22.3186ZM53.21 22.3186C46.9091 22.3186 42.459 17.1472 42.459 11.1049C42.459 5.83822 48.1066 3.22531 53.1011 3.22531C58.0956 3.22531 63.4303 5.55243 63.4303 11.4859C63.4303 16.9159 59.3204 22.3322 53.21 22.3322V22.3186Z"
|
||||
fill={ colorOne }
|
||||
/>
|
||||
</SVG>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { Glasses } from '../index';
|
||||
|
||||
export default {
|
||||
title: 'Product Editor/images/Glasses',
|
||||
component: Glasses,
|
||||
args: {
|
||||
size: 72,
|
||||
colorOne: '#E0E0E0',
|
||||
colorTwo: '#F0F0F0',
|
||||
},
|
||||
};
|
||||
|
||||
export const Default = Glasses;
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { SVG, Path, G, Rect } from '@wordpress/components';
|
||||
import { useInstanceId } from '@wordpress/compose';
|
||||
import { createElement } from '@wordpress/element';
|
||||
|
||||
export function Pants( {
|
||||
colorOne = '#DDDDDD',
|
||||
colorTwo = '#F0F0F0',
|
||||
size = 50,
|
||||
style = {},
|
||||
} ) {
|
||||
const clipPathId = useInstanceId( Pants, 'pants' ) as string;
|
||||
const rate = 50 / 72;
|
||||
|
||||
return (
|
||||
<SVG
|
||||
width={ size }
|
||||
height={ Math.round( size / rate ) }
|
||||
viewBox="0 0 50 72"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={ style }
|
||||
>
|
||||
<G clipPath={ `url(#${ clipPathId })` }>
|
||||
<Path
|
||||
d="M44.6084 21.3845C40.788 21.6427 35.5059 20.8456 35.1404 16.333C34.8746 13.0889 34.5867 9.04771 34.3431 5.7811H42.9474L42.3273 0H8.34205L7.72192 5.7811H16.3262C16.0826 9.04771 15.8057 13.0889 15.5289 16.333C15.1635 20.8456 9.87022 21.6314 6.06086 21.3845L0.667969 72H14.0007C14.0007 72 21.7745 32.0711 22.904 26.0318C23.4909 22.9111 24.3989 22.2264 25.3291 22.2264C26.2593 22.2264 27.1673 22.9224 27.7543 26.0318C28.8948 32.0599 36.6575 72 36.6575 72H49.9903L44.5974 21.3845H44.6084Z"
|
||||
fill={ colorTwo }
|
||||
/>
|
||||
<Path
|
||||
d="M15.5383 16.3332C15.8041 13.089 16.092 9.04785 16.3356 5.78125H7.73137L6.07031 21.3846C9.89074 21.6428 15.1729 20.8458 15.5383 16.3332Z"
|
||||
fill={ colorOne }
|
||||
/>
|
||||
<Path
|
||||
d="M35.1293 16.3332C35.4948 20.8458 40.788 21.6316 44.5974 21.3846L42.9363 5.78125H34.332C34.5757 9.04785 34.8525 13.089 35.1293 16.3332Z"
|
||||
fill={ colorOne }
|
||||
/>
|
||||
</G>
|
||||
<defs>
|
||||
<clipPath id={ clipPathId }>
|
||||
<Rect
|
||||
width="49.3334"
|
||||
height="72"
|
||||
fill="white"
|
||||
transform="translate( 0.667969 )"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</SVG>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { Pants } from '../index';
|
||||
|
||||
export default {
|
||||
title: 'Product Editor/images/Pants',
|
||||
component: Pants,
|
||||
args: {
|
||||
size: 50,
|
||||
colorOne: '#E0E0E0',
|
||||
colorTwo: '#F0F0F0',
|
||||
},
|
||||
};
|
||||
|
||||
export const Default = Pants;
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { SVG, Path } from '@wordpress/components';
|
||||
import { createElement } from '@wordpress/element';
|
||||
|
||||
export function Shirt( {
|
||||
colorOne = '#E0E0E0',
|
||||
colorTwo = '#F0F0F0',
|
||||
size = 68,
|
||||
style = {},
|
||||
} ) {
|
||||
const rate = 68 / 56;
|
||||
return (
|
||||
<SVG
|
||||
width={ size }
|
||||
height={ Math.round( size / rate ) }
|
||||
viewBox="0 0 68 56"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={ style }
|
||||
>
|
||||
<Path
|
||||
d="M43.0926 0.333984C41.0526 1.54732 37.5593 2.46732 34.2526 2.46732C30.946 2.46732 27.4526 1.54732 25.4126 0.333984L22.2793 10.5207H46.2126L43.106 0.333984H43.0926Z"
|
||||
fill={ colorOne }
|
||||
/>
|
||||
<Path
|
||||
d="M43.0927 0.333984C43.0927 4.09398 40.306 8.80065 34.2527 8.80065C28.1994 8.80065 25.4127 4.08065 25.4127 0.333984C15.546 0.333984 3.81268 7.45398 0.666016 10.6006L9.73269 24.7606L14.986 23.414L15.066 55.5606H53.4394L53.5194 23.414L58.7727 24.7606L67.8394 10.6006C64.6927 7.45398 52.9594 0.333984 43.0927 0.333984Z"
|
||||
fill={ colorTwo }
|
||||
/>
|
||||
</SVG>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { Shirt } from '../index';
|
||||
|
||||
export default {
|
||||
title: 'Product Editor/images/Shirt',
|
||||
component: Shirt,
|
||||
args: {
|
||||
size: '88',
|
||||
colorOne: '#E0E0E0',
|
||||
colorTwo: '#F0F0F0',
|
||||
},
|
||||
};
|
||||
|
||||
export const Default = Shirt;
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { SVG, Path } from '@wordpress/components';
|
||||
import { createElement } from '@wordpress/element';
|
||||
|
||||
export function ShoppingBags( {
|
||||
colorOne = '#E0E0E0',
|
||||
colorTwo = '#F0F0F0',
|
||||
size = '88',
|
||||
} ) {
|
||||
return (
|
||||
<SVG
|
||||
width={ size }
|
||||
height={ size }
|
||||
viewBox="0 0 88 88"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<Path
|
||||
d="M59.5299 29.3511H6.48494C4.38544 44.6382 0.74386 74.8826 0.105058 79.5685C-0.505262 84.0386 1.48031 87.9998 7.72592 87.9998H58.293C64.5386 87.9998 66.5241 84.0386 65.9138 79.5685C65.275 74.8826 61.6294 44.6382 59.534 29.3511H59.5299Z"
|
||||
fill={ colorOne }
|
||||
/>
|
||||
|
||||
<Path
|
||||
d="M45.1549 17.5C42.7177 15.6069 39.3976 14.6787 35.0155 14.6665C34.987 14.6665 31.024 14.6665 30.9996 14.6665C26.6175 14.6787 23.3014 15.6069 20.8601 17.5C17.9916 19.7269 16.5391 23.106 16.5391 27.5476V40.2454H23.8629V28.5898C23.8629 25.569 25.2422 22.0393 30.9833 21.9986C31.0159 21.9986 35.0033 21.9986 35.0358 21.9986C40.7769 22.0393 42.1562 25.569 42.1562 28.5898V40.2454H49.4801V27.5476C49.4801 23.106 48.0275 19.7269 45.159 17.5H45.1549Z"
|
||||
fill={ colorTwo }
|
||||
/>
|
||||
|
||||
<Path
|
||||
d="M47.3921 47.6711L44.0312 87.9998H87.9987L84.2676 47.6711H47.3921Z"
|
||||
fill={ colorTwo }
|
||||
/>
|
||||
|
||||
<Path
|
||||
d="M66.0147 65.9912C60.2736 65.9912 56.8477 62.4738 56.8477 56.5828V51.3188H60.5096V56.5828C60.5096 62.3272 64.6516 62.3272 66.0147 62.3272C67.3777 62.3272 71.5197 62.3272 71.5197 56.5828V51.3188H75.1817V56.5828C75.1817 62.4738 71.7557 65.9912 66.0147 65.9912Z"
|
||||
fill={ colorOne }
|
||||
/>
|
||||
</SVG>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import React from 'react';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { ShoppingBags } from '../index';
|
||||
|
||||
export default {
|
||||
title: 'Product Editor/images/ShoppingBags',
|
||||
component: ShoppingBags,
|
||||
args: {
|
||||
size: '88',
|
||||
colorOne: '#E0E0E0',
|
||||
colorTwo: '#F0F0F0',
|
||||
},
|
||||
};
|
||||
|
||||
export const Default = ( args ) => <ShoppingBags { ...args } />;
|
||||
|
||||
// Set the story name
|
||||
Default.storyName = 'Shopping Bags';
|
||||
Loading…
Reference in New Issue