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

♻️ Make Separator component more generic

Browse source
This commit is contained in:
Philipp Stracker 2024-11-21 17:41:49 +01:00
parent 65814f51e9
commit 3fa823ee02
No known key found for this signature in database
4 changed files with 35 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

38
modules/ppcp-settings/resources/js/Components/ReusableComponents/Separator.js
View file

@ -1,24 +1,32 @@
const Separator = ( props ) => {
let separatorClass = 'ppcp-r-separator';
const Separator = ( { className = '', text = '', withLine = true } ) => {
const separatorClass = [ 'ppcp-r-separator' ];
const innerClass = withLine
? 'ppcp-r-separator__line'
: 'ppcp-r-separator__space';
if ( props?.className ) {
separatorClass += ' ' + props.className;
if ( className ) {
separatorClass.push( className );
}
if ( props.text ) {
return (
<div className={ separatorClass }>
<span className="ppcp-r-separator__line ppcp-r-separator__line--before"></span>
const getClass = ( type ) => `${ innerClass } ${ innerClass }--${ type }`;
<span className="ppcp-r-separator__text">{ props.text }</span>
<span className="ppcp-r-separator__line ppcp-r-separator__line--after"></span>
</div>
);
}
const renderSeparator = () => {
if ( text ) {
return (
<>
<span className={ getClass( 'before' ) }></span>
<span className="ppcp-r-separator__text">{ text }</span>
<span className={ getClass( 'after' ) }></span>
</>
);
}
return <span className={ getClass( 'full' ) }></span>;
};
return (
<div className={ separatorClass }>
<span className="ppcp-r-separator__line ppcp-r-separator__line--before"></span>
<div className={ separatorClass.join( ' ' ) }>
{ renderSeparator() }
</div>
);
};

2
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AdvancedOptionsForm.js
View file

@ -122,7 +122,7 @@ const AdvancedOptionsForm = ( { setCompleted } ) => {
{ __( 'Connect Account', 'woocommerce-paypal-payments' ) }
</Button>
</SettingsToggleBlock>
<Separator className="ppcp-r-page-welcome-mode-separator" />
<Separator withLine={ false } />
<SettingsToggleBlock
label={
__( 'Manually Connect', 'woocommerce-paypal-payments' ) +