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

♻️ Reuse the generic Accordion for settings

Browse source
This commit is contained in:
Philipp Stracker 2024-12-09 14:43:27 +01:00
parent 1b557f1619
commit 2a9766fc76
No known key found for this signature in database
3 changed files with 63 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

29
modules/ppcp-settings/resources/css/components/screens/_settings.scss
View file

@ -1,3 +1,5 @@
@import "./settings/block-accordion";
// Container and Tab Settings // Container and Tab Settings
.ppcp-r-tabs.settings, .ppcp-r-tabs.settings,
.ppcp-r-container--settings { .ppcp-r-container--settings {
@ -275,7 +277,6 @@
align-items: center; align-items: center;
} }
&.ppcp-r-settings-block__accordion,
&.ppcp-r-settings-block__feature { &.ppcp-r-settings-block__feature {
.ppcp-r-settings-block__title { .ppcp-r-settings-block__title {
@include font(13, 20, 600); @include font(13, 20, 600);
@ -283,11 +284,6 @@
text-transform: none; text-transform: none;
} }
.ppcp-r-settings-block--accordion__title {
@include font(14, 20, 600);
}
.ppcp-r-settings-block--accordion__description,
.ppcp-r-settings-block__feature__description { .ppcp-r-settings-block__feature__description {
color: $color-gray-700; color: $color-gray-700;
@include font(13, 20, 400); @include font(13, 20, 400);
@ -524,27 +520,6 @@
} }
} }
.ppcp-r-settings-block__accordion {
.ppcp-r-settings-block--accordion__header {
gap: 4px;
}
&.ppcp-r-settings-block--content-visible .ppcp-r-settings-block--accordion__header {
margin-bottom: 24px;
}
&.ppcp-r-settings-block {
gap: 0;
.ppcp-r-settings-block:not(:last-child) {
&:not(.ppcp-r__radio-content-additional .ppcp-r-settings-block) {
padding-bottom: 32px;
margin-bottom: 32px;
border-bottom: 1px solid $color-divider;
}
}
}
}
.ppcp-r-settings-block--toggle-content { .ppcp-r-settings-block--toggle-content {
.ppcp-r-settings-block__content { .ppcp-r-settings-block__content {
margin-top: 32px; margin-top: 32px;

38
modules/ppcp-settings/resources/css/components/screens/settings/_block-accordion.scss Normal file
View file

@ -0,0 +1,38 @@
.ppcp-r-settings-block__accordion {
> .ppcp-r-accordion {
width: 100%;
.ppcp-r-accordion__toggler {
width: 100%;
margin: 0;
text-align: unset;
}
}
&.ppcp-r-settings-block {
gap: 0;
.ppcp-r-settings-block__title {
@include font(13, 20, 600);
color: $color-text-text;
text-transform: none;
}
.ppcp-r-settings-block--accordion__title {
@include font(14, 20, 600);
}
.ppcp-r-settings-block--accordion__description {
color: $color-gray-700;
@include font(13, 20, 400);
}
.ppcp-r-settings-block:not(:last-child) {
&:not(.ppcp-r__radio-content-additional .ppcp-r-settings-block) {
padding-bottom: 32px;
margin-bottom: 32px;
border-bottom: 1px solid $color-divider;
}
}
}
}

53
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/AccordionSettingsBlock.js
View file

@ -1,5 +1,4 @@
import { useState } from '@wordpress/element'; import Accordion from '../AccordionSection';
import data from '../../../utils/data';
import SettingsBlock from './SettingsBlock'; import SettingsBlock from './SettingsBlock';
import { import {
Header, Header,
@ -9,48 +8,26 @@ import {
TitleWrapper, TitleWrapper,
} from './SettingsBlockElements'; } from './SettingsBlockElements';
const AccordionSettingsBlock = ( { title, description, ...props } ) => { const SettingsAccordion = ( { title, description, children, ...props } ) => (
const [ isVisible, setIsVisible ] = useState( false );
return (
<SettingsBlock <SettingsBlock
{ ...props } { ...props }
className={ `ppcp-r-settings-block__accordion ${ className="ppcp-r-settings-block__accordion"
isVisible ? 'ppcp-r-settings-block--content-visible' : ''
}` }
components={ [ components={ [
() => ( () => (
<> <Accordion
<Header className="ppcp-r-settings-block--accordion__header"> title={ title }
<TitleWrapper> description={ description }
<Title className="ppcp-r-settings-block--accordion__title"> Header={ Header }
{ title } TitleWrapper={ TitleWrapper }
</Title> Title={ Title }
<Action> Action={ Action }
<div Description={ Description }
className="ppcp-r-settings-block__toggle-content"
onClick={ () =>
setIsVisible( ! isVisible )
}
> >
{ data().getImage( { children }
'icon-arrow-down.svg' </Accordion>
) }
</div>
</Action>
</TitleWrapper>
<Description className="ppcp-r-settings-block--accordion__description">
{ description }
</Description>
</Header>
{ isVisible && props.children && (
<>{ props.children }</>
) }
</>
), ),
] } ] }
/> />
); );
};
export default AccordionSettingsBlock; export default SettingsAccordion;