woocommerce-paypal-payments/modules/ppcp-settings/resources/js/Components/ReusableComponents/BadgeBox.js

import data from '../../utils/data';
import TitleBadge, { TITLE_BADGE_INFO } from "./TitleBadge";
import { __ } from "@wordpress/i18n";

const BadgeBox = ( props ) => {
    const titleSize = props.titleType && props.titleType === BADGE_BOX_TITLE_BIG ? BADGE_BOX_TITLE_BIG : BADGE_BOX_TITLE_SMALL

    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 ? `${ 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>

                    { props.imageBadge && (
                        <span className="ppcp-r-badge-box__title-image-badge">
                            { props.imageBadge.map( ( badge ) => data().getImage( badge ) ) }
                        </span>
                ) }

                { props.textBadge && (
                    <TitleBadge type={ TITLE_BADGE_INFO } text={ props.textBadge }/>
                ) }
            </span>
            <div className="ppcp-r-badge-box__description">
                { props?.description && (
                    <p
                        className="ppcp-r-badge-box__description"
                        dangerouslySetInnerHTML={ { __html: props.description, } }
                    ></p>
                ) }
            </div>
        </div>
    );
};

export const BADGE_BOX_TITLE_BIG = 'big';
export const BADGE_BOX_TITLE_SMALL = 'small';
export default BadgeBox;