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

Update the Settings UI design to match the Figma files

Browse source
This commit is contained in:
Daniel Dudzic 2024-12-08 09:33:49 +01:00
parent 7bf579c508
commit 390a3f69f8
No known key found for this signature in database
GPG key ID: 31B40D33E3465483
41 changed files with 1887 additions and 1541 deletions
Download patch file Download diff file Expand all files Collapse all files

46
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js
View file

@ -1,26 +1,50 @@
import data from '../../utils/data';
import { Content, ContentWrapper } from './SettingsBlocks';
const SettingsCard = ( props ) => {
let className = 'ppcp-r-settings-card';
const SettingsCard = ( {
className: extraClassName,
title,
description,
children,
contentItems,
contentContainer = true,
} ) => {
const className = [ 'ppcp-r-settings-card', extraClassName ]
.filter( Boolean )
.join( ' ' );
const renderContent = () => {
// If contentItems array is provided, wrap each item in Content component
if ( contentItems ) {
return (
<ContentWrapper>
{ contentItems.map( ( item, index ) => (
<Content key={ index }>{ item }</Content>
) ) }
</ContentWrapper>
);
}
// Otherwise handle regular children with contentContainer prop
if ( contentContainer ) {
return <Content>{ children }</Content>;
}
return children;
};
if ( props?.className ) {
className += ' ' + props.className;
}
return (
<div className={ className }>
<div className="ppcp-r-settings-card__header">
<div className="ppcp-r-settings-card__content-inner">
<span className="ppcp-r-settings-card__title">
{ props.title }
{ title }
</span>
<p className="ppcp-r-settings-card__description">
{ props.description }
{ description }
</p>
</div>
</div>
<div className="ppcp-r-settings-card__content">
{ props.children }
</div>
{ renderContent() }
</div>
);
};