woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-07 19:54: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

13
modules/ppcp-settings/resources/css/components/reusable-components/_separator.scss
View file

@ -2,13 +2,22 @@
display: flex; display: flex;
align-items: center; align-items: center;
&__space,
&__line { &__line {
height: 1px; margin: 0;
background-color: $color-gray-600;
display: block; display: block;
width: 100%; width: 100%;
} }
&__line {
background-color: $color-gray-600;
height: 1px;
}
&__space {
margin-bottom: 48px;
}
&__text { &__text {
color: $color-gray; color: $color-gray;
@include font(12, 24, 500, 0.8px); @include font(12, 24, 500, 0.8px);

8
modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss
View file

@ -20,14 +20,6 @@
margin: 0 0 16px 0; margin: 0 0 16px 0;
} }
.ppcp-r-page-welcome-mode-separator {
margin: 0 0 48px 0;
.ppcp-r-separator__line {
background-color: $color-gray-300;
}
}
.components-base-control__field { .components-base-control__field {
margin: 0 0 24px 0; margin: 0 0 24px 0;
} }

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

@ -1,24 +1,32 @@
const Separator = ( props ) => { const Separator = ( { className = '', text = '', withLine = true } ) => {
let separatorClass = 'ppcp-r-separator'; const separatorClass = [ 'ppcp-r-separator' ];
const innerClass = withLine
? 'ppcp-r-separator__line'
: 'ppcp-r-separator__space';
if ( props?.className ) { if ( className ) {
separatorClass += ' ' + props.className; separatorClass.push( className );
} }
if ( props.text ) { const getClass = ( type ) => `${ innerClass } ${ innerClass }--${ type }`;
return (
<div className={ separatorClass }>
<span className="ppcp-r-separator__line ppcp-r-separator__line--before"></span>
<span className="ppcp-r-separator__text">{ props.text }</span> const renderSeparator = () => {
<span className="ppcp-r-separator__line ppcp-r-separator__line--after"></span> if ( text ) {
</div> 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 ( return (
<div className={ separatorClass }> <div className={ separatorClass.join( ' ' ) }>
<span className="ppcp-r-separator__line ppcp-r-separator__line--before"></span> { renderSeparator() }
</div> </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' ) } { __( 'Connect Account', 'woocommerce-paypal-payments' ) }
</Button> </Button>
</SettingsToggleBlock> </SettingsToggleBlock>
<Separator className="ppcp-r-page-welcome-mode-separator" /> <Separator withLine={ false } />
<SettingsToggleBlock <SettingsToggleBlock
label={ label={
__( 'Manually Connect', 'woocommerce-paypal-payments' ) + __( 'Manually Connect', 'woocommerce-paypal-payments' ) +