From 2a9766fc76e4d2221a3a99f3b130707e5b941fc6 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Mon, 9 Dec 2024 14:43:27 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Reuse=20the=20generic=20Ac?=
 =?UTF-8?q?cordion=20for=20settings?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../css/components/screens/_settings.scss     | 29 +-------
 .../screens/settings/_block-accordion.scss    | 38 ++++++++++
 .../SettingsBlocks/AccordionSettingsBlock.js  | 69 +++++++------------
 3 files changed, 63 insertions(+), 73 deletions(-)
 create mode 100644 modules/ppcp-settings/resources/css/components/screens/settings/_block-accordion.scss

diff --git a/modules/ppcp-settings/resources/css/components/screens/_settings.scss b/modules/ppcp-settings/resources/css/components/screens/_settings.scss
index 8cf4fe593..b98a5f7e1 100644
--- a/modules/ppcp-settings/resources/css/components/screens/_settings.scss
+++ b/modules/ppcp-settings/resources/css/components/screens/_settings.scss
@@ -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;
diff --git a/modules/ppcp-settings/resources/css/components/screens/settings/_block-accordion.scss b/modules/ppcp-settings/resources/css/components/screens/settings/_block-accordion.scss
new file mode 100644
index 000000000..c77a3eb91
--- /dev/null
+++ b/modules/ppcp-settings/resources/css/components/screens/settings/_block-accordion.scss
@@ -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;
+			}
+		}
+	}
+}
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/AccordionSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/AccordionSettingsBlock.js
index a39585ca9..8a953c805 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/AccordionSettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/AccordionSettingsBlock.js
@@ -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;