woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 17:51:41 +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
.ppcp-r-tabs.settings,
.ppcp-r-container--settings {
@ -275,7 +277,6 @@
align-items: center;
}
&.ppcp-r-settings-block__accordion,
&.ppcp-r-settings-block__feature {
.ppcp-r-settings-block__title {
@include font(13, 20, 600);
@ -283,11 +284,6 @@
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 {
color: $color-gray-700;
@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__content {
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;
}
}
}
}

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

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