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

Adjust styles, add fonts

Browse source
This commit is contained in:
Narek Zakarian 2024-11-05 17:54:47 +04:00
parent 6d078fcf5d
commit d62a7c8282
No known key found for this signature in database
GPG key ID: 07AFD7E7A9C164A7
13 changed files with 104 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,27 +3,31 @@ import TitleBadge, {TITLE_BADGE_INFO} from "./TitleBadge";
import {__} from "@wordpress/i18n";
const BadgeBox = ( props ) => {
const titleTag = props.titleTag ?? 'h3';
const TitleTag = titleTag;
return (
<div className="ppcp-r-text-badge-box">
<span className="ppcp-r-text-badge-box__title">
{props.title}
const titleSize = props.titleType && props.titleType === BADGE_BOX_TITLE_BIG ? BADGE_BOX_TITLE_BIG : BADGE_BOX_TITLE_SMALL
{props.imageBadge && (
<span className="ppcp-r-title-image-badge">
{props.imageBadge.map((badge) => data().getImage(badge))}
</span>
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-text-badge-box__description">
<div className="ppcp-r-badge-box__description">
{props?.description && (
<p
className="ppcp-r-text-badge-box__description"
className="ppcp-r-badge-box__description"
dangerouslySetInnerHTML={{
__html: props.description,
}}
@ -34,4 +38,6 @@ const BadgeBox = ( props ) => {
);
};
export const BADGE_BOX_TITLE_BIG = 'big';
export const BADGE_BOX_TITLE_SMALL = 'small';
export default BadgeBox;