Modify PluginCardBody to accept className, and change description type.
This commit is contained in:
parent
36cdf7fed5
commit
02ce7cccc5
|
@ -1,3 +1,8 @@
|
||||||
|
/**
|
||||||
|
* External dependencies
|
||||||
|
*/
|
||||||
|
import classnames from 'classnames';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Internal dependencies
|
* Internal dependencies
|
||||||
*/
|
*/
|
||||||
|
@ -5,6 +10,7 @@ import { CardBody } from '~/marketing/components';
|
||||||
import './PluginCardBody.scss';
|
import './PluginCardBody.scss';
|
||||||
|
|
||||||
type PluginCardBodyProps = {
|
type PluginCardBodyProps = {
|
||||||
|
className?: string;
|
||||||
icon: JSX.Element;
|
icon: JSX.Element;
|
||||||
name: string;
|
name: string;
|
||||||
|
|
||||||
|
@ -13,7 +19,7 @@ type PluginCardBodyProps = {
|
||||||
*/
|
*/
|
||||||
pills?: Array< JSX.Element >;
|
pills?: Array< JSX.Element >;
|
||||||
|
|
||||||
description: string;
|
description: React.ReactNode;
|
||||||
button?: JSX.Element;
|
button?: JSX.Element;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -21,6 +27,7 @@ type PluginCardBodyProps = {
|
||||||
* Renders a CardBody layout component to display plugin info and button.
|
* Renders a CardBody layout component to display plugin info and button.
|
||||||
*/
|
*/
|
||||||
export const PluginCardBody: React.FC< PluginCardBodyProps > = ( {
|
export const PluginCardBody: React.FC< PluginCardBodyProps > = ( {
|
||||||
|
className,
|
||||||
icon,
|
icon,
|
||||||
name,
|
name,
|
||||||
pills,
|
pills,
|
||||||
|
@ -28,7 +35,12 @@ export const PluginCardBody: React.FC< PluginCardBodyProps > = ( {
|
||||||
button,
|
button,
|
||||||
} ) => {
|
} ) => {
|
||||||
return (
|
return (
|
||||||
<CardBody className="woocommerce_marketing_plugin_card_body">
|
<CardBody
|
||||||
|
className={ classnames(
|
||||||
|
'woocommerce_marketing_plugin_card_body',
|
||||||
|
className
|
||||||
|
) }
|
||||||
|
>
|
||||||
<div className="woocommerce_marketing_plugin_card_body__icon">
|
<div className="woocommerce_marketing_plugin_card_body__icon">
|
||||||
{ icon }
|
{ icon }
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue