woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-04 08:47:23 +08:00
Code Issues Projects Packages Wiki Activity Actions 11

✨ Create new VStack component

Browse source
This commit is contained in:
Philipp Stracker 2025-01-27 13:50:28 +01:00
parent 4d60b8cff0
commit 563f9e5ac1
No known key found for this signature in database
1 changed files with 20 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

22
modules/ppcp-settings/resources/js/Components/ReusableComponents/Stack.js
View file

@ -2,13 +2,15 @@
* Temporary component, until the experimental VStack/HStack block editor component is stable.
*
* @see https://wordpress.github.io/gutenberg/?path=/docs/components-experimental-hstack--docs
* @see https://wordpress.github.io/gutenberg/?path=/docs/components-experimental-vstack--docs
* @file
*/
import classNames from 'classnames';
export const HStack = ( { className, spacing = 3, children } ) => {
const Stack = ( { type, className, spacing, children } ) => {
const wrapperClass = classNames(
'components-flex components-h-stack',
'components-flex',
`components-${ type }-stack`,
className
);
@ -22,3 +24,19 @@ export const HStack = ( { className, spacing = 3, children } ) => {
</div>
);
};
export const HStack = ( { className, spacing = 3, children } ) => {
return (
<Stack type="h" className={ className } spacing={ spacing }>
{ children }
</Stack>
);
};
export const VStack = ( { className, spacing = 3, children } ) => {
return (
<Stack type="v" className={ className } spacing={ spacing }>
{ children }
</Stack>
);
};