[Product Block Editor]: Introduce AdviceCard component (#43082)
* introduce AdviceCard component * import advice card styles * add onDismiss() prop * tweak border style * implement dashed border * log the onDismiss function * changelog * tweak layout * tweak card border style
This commit is contained in:
Damián Suárez
GitHub
parent
2700d80614
commit
5ee2447145
|
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: add
|
||||
|
||||
[Product Block Editor]: Introduce AdviceCard component
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { createElement } from '@wordpress/element';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
CardBody,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
} from '@wordpress/components';
|
||||
import { close } from '@wordpress/icons';
|
||||
|
||||
export interface AdviceCardProps {
|
||||
tip?: string;
|
||||
isDismissible?: boolean;
|
||||
onDismiss?: () => void;
|
||||
image?: React.ReactNode;
|
||||
}
|
||||
|
||||
export const AdviceCard: React.FC< AdviceCardProps > = ( {
|
||||
tip,
|
||||
image = null,
|
||||
isDismissible = false,
|
||||
onDismiss = () => {},
|
||||
} ) => {
|
||||
return (
|
||||
<Card className="woocommerce-advice-card">
|
||||
{ isDismissible && (
|
||||
<CardHeader>
|
||||
<Button
|
||||
className="woocommerce-advice-card__dismiss-button"
|
||||
onClick={ onDismiss }
|
||||
icon={ close }
|
||||
label={ __( 'Dismiss', 'woocommerce' ) }
|
||||
/>
|
||||
</CardHeader>
|
||||
) }
|
||||
<CardBody>{ image }</CardBody>
|
||||
{ tip && tip.length > 0 && <CardFooter>{ tip }</CardFooter> }
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import React from 'react';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { AdviceCard, AdviceCardProps } from '..';
|
||||
import { ShoppingBags } from '../../../images/shopping-bugs';
|
||||
|
||||
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 } />;
|
||||
|
||||
Default.args = {
|
||||
// @todo: use an addon
|
||||
onDismiss: console.log, // eslint-disable-line no-console
|
||||
};
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
$card-border-color: $gray-400;
|
||||
$card-border-width: 2px;
|
||||
|
||||
.woocommerce-advice-card {
|
||||
&.components-card {
|
||||
box-shadow: none;
|
||||
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" );
|
||||
border-radius: 4px;
|
||||
|
||||
.components-card__body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.components-card {
|
||||
&__header {
|
||||
text-align: center;
|
||||
padding: $gap $gap 0;
|
||||
border-bottom: 0;
|
||||
justify-content: right;
|
||||
}
|
||||
|
||||
&__body {
|
||||
padding: calc( 1.5 * $gap ) $gap;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
color: $gray-700;
|
||||
border-top: 0;
|
||||
padding: 0 $gap calc( 3 * $gap );
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-advice-card__dismiss-button {
|
||||
color: $gray-700;
|
||||
}
|
||||
}
|
||||
|
|
@ -8,6 +8,7 @@ export function ShoppingBags( {
|
|||
colorOne = '#E0E0E0',
|
||||
colorTwo = '#F0F0F0',
|
||||
size = '88',
|
||||
style = {},
|
||||
} ) {
|
||||
return (
|
||||
<SVG
|
||||
|
|
@ -16,6 +17,7 @@ export function ShoppingBags( {
|
|||
viewBox="0 0 88 88"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={ style }
|
||||
>
|
||||
<Path
|
||||
d="M59.5299 29.3511H6.48494C4.38544 44.6382 0.74386 74.8826 0.105058 79.5685C-0.505262 84.0386 1.48031 87.9998 7.72592 87.9998H58.293C64.5386 87.9998 66.5241 84.0386 65.9138 79.5685C65.275 74.8826 61.6294 44.6382 59.534 29.3511H59.5299Z"
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@
|
|||
@import "components/attribute-control/attribute-skeleton.scss";
|
||||
@import "components/checkbox-control/style.scss";
|
||||
@import "components/add-products-modal/style.scss";
|
||||
@import "components/advice-card/style.scss";
|
||||
|
||||
/* Field Blocks */
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue