woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 10:55:00 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

♻️ Slightly improve the BadgeBox component

Browse source
This commit is contained in:
Philipp Stracker 2025-01-14 12:04:20 +01:00
parent 9d494a4a0c
commit 07a6287cf7
No known key found for this signature in database
1 changed files with 40 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

58
modules/ppcp-settings/resources/js/Components/ReusableComponents/BadgeBox.js
View file

@ -1,40 +1,62 @@
import data from '../../utils/data';
const BadgeBox = ( props ) => {
const titleSize =
props.titleType && props.titleType === BADGE_BOX_TITLE_BIG
? BADGE_BOX_TITLE_BIG
: BADGE_BOX_TITLE_SMALL;
const ImageBadge = ( { images } ) => {
if ( ! images || ! images.length ) {
return null;
}
return (
<BadgeContent>
<span className="ppcp-r-badge-box__title-image-badge">
{ images.map( ( badge ) => data().getImage( badge ) ) }
</span>
</BadgeContent>
);
};
// If `children` is not empty, it's output and wrapped in spaces.
const BadgeContent = ( { children } ) => {
if ( ! children ) {
return null;
}
return <> { children } </>;
};
const BadgeBox = ( {
title,
textBadge,
imageBadge = [],
titleType = BADGE_BOX_TITLE_BIG,
description = '',
} ) => {
let titleSize = BADGE_BOX_TITLE_SMALL;
if ( BADGE_BOX_TITLE_BIG === titleType ) {
titleSize = BADGE_BOX_TITLE_BIG;
}
const titleTextClassName =
'ppcp-r-badge-box__title-text ' +
`ppcp-r-badge-box__title-text--${ titleSize }`;
const titleBaseClassName = 'ppcp-r-badge-box__title';
const titleClassName = props.imageBadge
const titleClassName = imageBadge.length
? `${ titleBaseClassName } ppcp-r-badge-box__title--has-image-badge`
: titleBaseClassName;
return (
<div className="ppcp-r-badge-box">
<span className={ titleClassName }>
<span className={ titleTextClassName }>{ props.title }</span>
<span className={ titleTextClassName }>{ title }</span>
{ props.imageBadge && (
<span className="ppcp-r-badge-box__title-image-badge">
{ props.imageBadge.map( ( badge ) =>
data().getImage( badge )
) }
</span>
) }
{ props.textBadge }
<ImageBadge images={ imageBadge } />
<BadgeContent>{ textBadge }</BadgeContent>
</span>
<div className="ppcp-r-badge-box__description">
{ props?.description && (
{ description && (
<p
className="ppcp-r-badge-box__description"
dangerouslySetInnerHTML={ {
__html: props.description,
__html: description,
} }
></p>
) }