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:
parent
3e7c2e52cd
commit
4693e251f7
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: dev
|
||||
|
||||
Add component EnrichedLabel #34214
|
|
@ -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. |
|
|
@ -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>
|
||||
) }
|
||||
</>
|
||||
);
|
||||
};
|
|
@ -0,0 +1 @@
|
|||
export * from './enriched-label';
|
|
@ -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,
|
||||
};
|
|
@ -0,0 +1,5 @@
|
|||
.woocommerce-enriched-label__help-wrapper {
|
||||
.components-popover {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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';
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -25,3 +25,9 @@
|
|||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-enriched-label__checkbox {
|
||||
& > * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: dev
|
||||
|
||||
Add product name and checkboxes for Product details #34214
|
Loading…
Reference in New Issue