[Product Block Editor]: improve and tweak AdviceCard component (#43427)
* rename image prop with children * update AdviceCard usage * tweak AdviceCard styles * tweak advice cards in the Linked Product feature * changelog * tweak story layout
This commit is contained in:
Damián Suárez
GitHub
parent
556cf46523
commit
9dce7fc71d
|
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: tweak
|
||||
|
||||
[Product Block Editor]: improve and tweak AdviceCard component
|
||||
|
|
@ -127,10 +127,11 @@ export function Edit( {
|
|||
|
||||
{ ! state.isLoading && state.linkedProducts.length === 0 && (
|
||||
<AdviceCard
|
||||
image={ <EmptyStateImage { ...emptyState } /> }
|
||||
tip={ emptyState.tip }
|
||||
isDismissible={ emptyState.isDismissible }
|
||||
/>
|
||||
>
|
||||
<EmptyStateImage { ...emptyState } />
|
||||
</AdviceCard>
|
||||
) }
|
||||
|
||||
{ ! state.isLoading && state.linkedProducts.length > 0 && (
|
||||
|
|
|
|||
|
|
@ -2,4 +2,12 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $grid-unit-30;
|
||||
|
||||
.woocommerce-advice-card {
|
||||
min-height: 233px; // min height to cover the min rows rendered in the table on its back
|
||||
|
||||
&__footer {
|
||||
padding: 0 calc( $gap * 6 ) $gap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,12 +13,12 @@ export interface AdviceCardProps {
|
|||
tip?: string;
|
||||
isDismissible?: boolean;
|
||||
onDismiss?: () => void;
|
||||
image?: React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
export const AdviceCard: React.FC< AdviceCardProps > = ( {
|
||||
tip,
|
||||
image = null,
|
||||
children = null,
|
||||
isDismissible = true,
|
||||
onDismiss,
|
||||
} ) => {
|
||||
|
|
@ -68,7 +68,7 @@ export const AdviceCard: React.FC< AdviceCardProps > = ( {
|
|||
/>
|
||||
</div>
|
||||
) }
|
||||
<div className="woocommerce-advice-card__body">{ image }</div>
|
||||
<div className="woocommerce-advice-card__body">{ children }</div>
|
||||
{ tip && tip.length > 0 && (
|
||||
<div className="woocommerce-advice-card__footer">{ tip }</div>
|
||||
) }
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Flex } from '@wordpress/components';
|
||||
import React from 'react';
|
||||
|
||||
/**
|
||||
|
|
@ -9,18 +10,13 @@ import React from 'react';
|
|||
*/
|
||||
import { AdviceCard, AdviceCardProps } from '..';
|
||||
import { ShoppingBags } from '../../../images/shopping-bags';
|
||||
import { Shirt } from '../../../images/shirt';
|
||||
import { Pants } from '../../../images/pants';
|
||||
import { Glasses } from '../../../images/glasses';
|
||||
|
||||
export default {
|
||||
title: 'Product Editor/components/AdviceCard',
|
||||
component: AdviceCard,
|
||||
args: {
|
||||
tip: __(
|
||||
'Tip: Upsells are typically products that are extra profitable or better quality or more expensive. Experiment with combinations to boost sales.',
|
||||
'woocommerce'
|
||||
),
|
||||
image: <ShoppingBags />,
|
||||
isDismissible: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const Default = ( args: AdviceCardProps ) => <AdviceCard { ...args } />;
|
||||
|
|
@ -28,4 +24,32 @@ export const Default = ( args: AdviceCardProps ) => <AdviceCard { ...args } />;
|
|||
Default.args = {
|
||||
// @todo: use an addon
|
||||
onDismiss: console.log, // eslint-disable-line no-console
|
||||
|
||||
tip: __(
|
||||
'Tip: Upsells are typically products that are extra profitable or better quality or more expensive. Experiment with combinations to boost sales.',
|
||||
'woocommerce'
|
||||
),
|
||||
children: <ShoppingBags />,
|
||||
isDismissible: true,
|
||||
};
|
||||
|
||||
export const MultipleChildren = ( args: AdviceCardProps ) => (
|
||||
<AdviceCard { ...args } />
|
||||
);
|
||||
|
||||
MultipleChildren.args = {
|
||||
tip: __(
|
||||
'Tip: Group together items that have a clear relationship or compliment each other well, e.g., garment bundles, camera kits, or skincare product sets.',
|
||||
'woocommerce'
|
||||
),
|
||||
|
||||
children: (
|
||||
<Flex justify="center" style={ { gap: '16px ' } }>
|
||||
<Shirt />
|
||||
<Pants />
|
||||
<Glasses />
|
||||
</Flex>
|
||||
),
|
||||
isDismissible: false,
|
||||
onDismiss: console.log, // eslint-disable-line no-console
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,12 +5,11 @@ $card-border-width: 2px;
|
|||
background-image: url( "data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23" + str-slice( '#{ $card-border-color }', 2 ) + "' stroke-width='#{ $card-border-width }' stroke-dasharray='4 4' stroke-dashoffset='46' stroke-linecap='butt'/%3e%3c/svg%3e" );
|
||||
background-color: $white;
|
||||
border-radius: 4px;
|
||||
min-height: 233px;
|
||||
padding: calc( 2 * $gap );
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
gap: $gap;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
|
|
@ -21,15 +20,12 @@ $card-border-width: 2px;
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 0 $gap;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
color: $gray-700;
|
||||
border-top: 0;
|
||||
padding: 0 0 $gap;
|
||||
}
|
||||
|
||||
&.is-dismissible {
|
||||
|
|
|
|||
Loading…
Reference in New Issue