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

Add product name and checkboxes for Product details (#34214) 

* Add product details

# Conflicts:
#	plugins/woocommerce-admin/client/products/sections/product-details-section.tsx

# Conflicts:
#	plugins/woocommerce-admin/client/products/sections/product-details-section.tsx

* Rename folder

* Fix help icon

* Fix form

* Removed useless `useState`

* Add `getCheckboxProps`

* Add params to getCheckboxProps

* Add recordEvent

* Rename event

* Add changelog

* Fix texts

* Remove Fragment

* Fix useState initial state

* Convert EnrichedLabel to TS

* Fix unknown value prop

* Rename event

* Move EnrichedLabel

* Fix js warning

* Add storybook

* Add readme

* Add components changelog

Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>
This commit is contained in:
Fernando 2022-08-12 10:47:54 -03:00 committed by GitHub
parent 3e7c2e52cd
commit 4693e251f7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 238 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/components/changelog/add-28_product_details Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: dev
Add component EnrichedLabel #34214

23
packages/js/components/src/enriched-label/README.md Normal file
View File

@ -0,0 +1,23 @@
# EnrichedLabel
Use `EnrichedLabel` to create a label with a tooltip.
## Usage
```jsx
<EnrichedLabel
label="My label"
helpDescription="My description."
moreUrl="https://woocommerce.com"
tooltipLinkCallback={ () => alert( 'Learn More clicked' ) }
/>
```
### Props
| Name | Type | Default | Description |
| --------------------- | -------- | ------- | ----------------------------------------------------------------------- |
| `helpDescription` | String | `null` | Text that will be shown in the tooltip. |
| `label` | String | `null` | Text that will be shown in the label. |
| `moreUrl` | String | `null` | URL that will be added to the link `Learn More`, shown after the label. |
| `tooltipLinkCallback` | Function | `noop` | Callback that will be triggered after clicking the `Learn More` link. |

75
packages/js/components/src/enriched-label/enriched-label.tsx Normal file
View File

@ -0,0 +1,75 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Button, Popover } from '@wordpress/components';
import { createElement, Fragment, useState } from '@wordpress/element';
import interpolateComponents from '@automattic/interpolate-components';
import { Icon, help } from '@wordpress/icons';
/**
* Internal dependencies
*/
import Link from '../link';
type EnrichedLabelProps = {
helpDescription: string;
label: string;
moreUrl: string;
tooltipLinkCallback: () => void;
};
export const EnrichedLabel: React.FC< EnrichedLabelProps > = ( {
helpDescription,
label,
moreUrl,
tooltipLinkCallback,
} ) => {
const [ isPopoverVisible, setIsPopoverVisible ] = useState( false );
return (
<>
<span className="woocommerce-enriched-label__text">{ label }</span>
{ helpDescription && (
<div
className="woocommerce-enriched-label__help-wrapper"
onMouseLeave={ () => setIsPopoverVisible( false ) }
>
<Button
label={ __( 'Help button', 'woocommerce' ) }
onMouseEnter={ () => setIsPopoverVisible( true ) }
>
<Icon icon={ help } />
</Button>
{ isPopoverVisible && (
<Popover focusOnMount="container" position="top center">
{ interpolateComponents( {
mixedString:
helpDescription +
( moreUrl ? ' {{moreLink/}}' : '' ),
components: {
moreLink: moreUrl ? (
<Link
href={ moreUrl }
target="_blank"
type="external"
onClick={ tooltipLinkCallback }
>
{ __(
'Learn more',
'woocommerce'
) }
</Link>
) : (
<div />
),
},
} ) }
</Popover>
) }
</div>
) }
</>
);
};

1
packages/js/components/src/enriched-label/index.js Normal file
View File

@ -0,0 +1 @@
export * from './enriched-label';

32
packages/js/components/src/enriched-label/stories/index.js Normal file
View File

@ -0,0 +1,32 @@
/**
* External dependencies
*/
import { EnrichedLabel } from '@woocommerce/components';
import { CheckboxControl } from '@wordpress/components';
/**
* Internal dependencies
*/
import './style.scss';
export const Basic = () => (
<CheckboxControl
label={
<EnrichedLabel
label="My label"
helpDescription="My description."
moreUrl="https://woocommerce.com"
tooltipLinkCallback={ () => {
// eslint-disable-next-line no-alert
window.alert( 'Learn More clicked' );
} }
/>
}
onChange={ () => {} }
/>
);
export default {
title: 'WooCommerce Admin/components/EnrichedLabel',
component: EnrichedLabel,
};

5
packages/js/components/src/enriched-label/stories/style.scss Normal file
View File

@ -0,0 +1,5 @@
.woocommerce-enriched-label__help-wrapper {
.components-popover {
margin: 0;
}
}

15
packages/js/components/src/enriched-label/style.scss Normal file
View File

@ -0,0 +1,15 @@
.woocommerce-enriched-label__text {
vertical-align: top;
}
.woocommerce-enriched-label__help-wrapper {
display: inline;
.components-popover {
.components-popover__content {
min-width: 360px;
> div {
padding: $gap $gap-large;
font-size: 16px;
}
}
}
}

1
packages/js/components/src/index.ts
View File

@ -59,6 +59,7 @@ export { default as ViewMoreList } from './view-more-list';
export { default as WebPreview } from './web-preview';
export { Badge } from './badge';
export { DynamicForm } from './dynamic-form';
export { EnrichedLabel } from './enriched-label';
export { default as TourKit } from './tour-kit';
export * as TourKitTypes from './tour-kit/types';
export { CollapsibleContent } from './collapsible-content';

1
packages/js/components/src/style.scss
View File

@ -43,5 +43,6 @@
@import 'web-preview/style.scss';
@import 'badge/style.scss';
@import 'dynamic-form/style.scss';
@import 'enriched-label/style.scss';
@import 'tour-kit/style.scss';
@import 'collapsible-content/style.scss';

6
plugins/woocommerce-admin/client/products/product-page.scss
View File

@ -25,3 +25,9 @@
height: 100%;
}
}
.woocommerce-enriched-label__checkbox {
& > * {
margin-bottom: 0;
}
}

69
plugins/woocommerce-admin/client/products/sections/product-details-section.tsx
View File

@ -1,18 +1,58 @@
/**
* External dependencies
*/
import { TextControl } from '@wordpress/components';
import { CheckboxControl, TextControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useFormContext } from '@woocommerce/components';
import { EnrichedLabel, useFormContext } from '@woocommerce/components';
import { Product } from '@woocommerce/data';
import classnames from 'classnames';
import { recordEvent } from '@woocommerce/tracks';
/**
* Internal dependencies
*/
import { ProductSectionLayout } from '../layout/product-section-layout';
const PRODUCT_DETAILS_SLUG = 'product-details';
export const ProductDetailsSection: React.FC = () => {
const formContext = useFormContext< Product >();
const { getInputProps } = useFormContext< Product >();
const getCheckboxProps = ( item: string ) => {
const { checked, className, onChange, onBlur } =
getInputProps< boolean >( item );
return {
checked,
className: classnames(
'woocommerce-add-product__checkbox',
className
),
onChange: ( isChecked: boolean ) => {
recordEvent( `add_product_checkbox_${ item }`, {
checked: isChecked,
} );
return onChange( isChecked );
},
onBlur,
};
};
const getTextControlProps = ( item: string ) => {
const {
className,
onBlur,
onChange,
value = '',
} = getInputProps< string >( item );
return {
value,
className: classnames(
'woocommerce-add-product__checkbox',
className
),
onChange,
onBlur,
};
};
return (
<ProductSectionLayout
title={ __( 'Product details', 'woocommerce' ) }
@ -23,8 +63,27 @@ export const ProductDetailsSection: React.FC = () => {
>
<TextControl
label={ __( 'Name', 'woocommerce' ) }
name="name"
{ ...formContext.getInputProps< string >( 'name' ) }
name={ `${ PRODUCT_DETAILS_SLUG }-name` }
placeholder={ __( 'e.g. 12 oz Coffee Mug', 'woocommerce' ) }
{ ...getTextControlProps( 'name' ) }
/>
<CheckboxControl
label={
<EnrichedLabel
label={ __( 'Feature this product', 'woocommerce' ) }
helpDescription={ __(
'Include this product in a featured section on your website with a widget or shortcode.',
'woocommerce'
) }
moreUrl="https://woocommerce.com/document/woocommerce-shortcodes/#products"
tooltipLinkCallback={ () =>
recordEvent( 'add_product_learn_more', {
category: PRODUCT_DETAILS_SLUG,
} )
}
/>
}
{ ...getCheckboxProps( 'featured' ) }
/>
</ProductSectionLayout>
);

15
plugins/woocommerce-admin/client/products/use-product-helper.ts
View File

@ -74,14 +74,6 @@ export function useProductHelper() {
status,
} ).then(
( newProduct ) => {
if ( ! skipRedirect ) {
navigateTo( {
url:
'admin.php?page=wc-admin&path=/product/' +
newProduct.id,
} );
}
if ( ! skipNotice ) {
createNotice(
'success',
@ -106,6 +98,13 @@ export function useProductHelper() {
...updating,
[ status ]: false,
} );
if ( ! skipRedirect ) {
navigateTo( {
url:
'admin.php?page=wc-admin&path=/product/' +
newProduct.id,
} );
}
},
() => {
createNotice(

4
plugins/woocommerce/changelog/add-28_product_details Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: dev
Add product name and checkboxes for Product details #34214