Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add to Cart Form: Replace Notice with Skeleton component (https://github.com/woocommerce/woocommerce-blocks/pull/8842) 

* Add Skeleton component

* Replace notice with skeleton on Add to Cart Form block

* Fix css lint error

* add tooltip

* fix css linter

* add css for change cursor

---------

Co-authored-by: Luigi <gigitux@gmail.com>
This commit is contained in:
Alexandre Lara 2023-04-05 09:38:58 -03:00 committed by GitHub
parent d27d4d3a2e
commit 2f98513cd8
4 changed files with 83 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart-form/edit.tsx
View File

@ -3,7 +3,9 @@
*/
import { useBlockProps } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import { Button, Disabled, Notice } from '@wordpress/components';
import { Button, Disabled, Tooltip } from '@wordpress/components';
import { Skeleton } from '@woocommerce/base-components/skeleton';
/**
* Internal dependencies
*/
@ -19,31 +21,34 @@ const Edit = () => {
return (
<div { ...blockProps }>
<Disabled>
<Notice
className={ 'wc-block-add-to-cart-form__notice' }
status={ 'warning' }
isDismissible={ false }
>
<p>
{ __(
'Customers will see product add-to-cart options displayed here, dependent on the product type.',
'woo-gutenberg-products-block'
) }
</p>
</Notice>
<input
type={ 'number' }
value={ '1' }
className={ 'wc-block-add-to-cart-form__quantity' }
/>
<Button
variant={ 'primary' }
className={ 'wc-block-add-to-cart-form__button' }
>
{ __( 'Add to cart', 'woo-gutenberg-products-block' ) }
</Button>
</Disabled>
<Tooltip
text="Customer will see product add-to-cart options in this space, dependend on the product type. "
position="bottom right"
>
<div className="wc-block-editor-container">
<Skeleton numberOfLines={ 3 } />
<Disabled>
<input
type={ 'number' }
value={ '1' }
className={
'wc-block-editor-add-to-cart-form__quantity'
}
/>
<Button
variant={ 'primary' }
className={
'wc-block-editor-add-to-cart-form__button'
}
>
{ __(
'Add to cart',
'woo-gutenberg-products-block'
) }
</Button>
</Disabled>
</div>
</Tooltip>
</div>
);
};

20
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart-form/editor.scss
View File

@ -1,15 +1,10 @@
.wc-block-add-to-cart-form {
.wc-block-editor-add-to-cart-form {
display: flex;
flex-direction: row;
flex-direction: column;
row-gap: $default-block-margin;
}
.wc-block-add-to-cart-form__notice.components-notice {
margin: 10px 0;
color: $black;
max-width: 60%;
}
input.wc-block-add-to-cart-form__quantity[type="number"] {
input.wc-block-editor-add-to-cart-form__quantity[type="number"] {
max-width: 50px;
min-height: 23px;
float: left;
@ -28,3 +23,10 @@ button.components-button.wc-block-add-to-cart-form__button {
padding: 20px 30px;
border-radius: 0;
}
.wc-block-editor-container {
cursor: help;
gap: 10px;
display: flex;
flex-direction: column;
}

22
plugins/woocommerce-blocks/assets/js/base/components/skeleton/index.tsx Normal file
View File

@ -0,0 +1,22 @@
/**
* Internal dependencies
*/
import './style.scss';
export interface SkeletonProps {
numberOfLines?: number;
}
export const Skeleton = ( {
numberOfLines = 1,
}: SkeletonProps ): JSX.Element => {
const skeletonLines = Array( numberOfLines ).fill(
<span
className="wc-block-components-skeleton-text-line"
aria-hidden="true"
/>
);
return (
<div className="wc-block-components-skeleton">{ skeletonLines }</div>
);
};

19
plugins/woocommerce-blocks/assets/js/base/components/skeleton/style.scss Normal file
View File

@ -0,0 +1,19 @@
.wc-block-components-skeleton {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
}
.wc-block-components-skeleton-text-line {
height: 0.8em;
width: 100%;
position: relative;
background: $gray-200;
border-radius: 2em;
&:last-child {
width: 80%;
}
}