🚚 Move AccordionSettingsBlock up one level

modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlockAccordion.js

@@ -1,14 +1,19 @@
-import Accordion from '../AccordionSection';
-import SettingsBlock from '../SettingsBlock';
-import { Header, Title, Action, Description, TitleWrapper } from '../Elements';
+import Accordion from './AccordionSection';
+import SettingsBlock from './SettingsBlock';
+import { Header, Title, Action, Description, TitleWrapper } from './Elements';
 
-const SettingsAccordion = ( { title, description, children, ...props } ) => (
+const SettingsBlockAccordion = ( {
+	title,
+	description,
+	children,
+	...props
+} ) => (
 	<SettingsBlock { ...props } className="ppcp-r-settings-block__accordion">
 		<Accordion
 			title={ title }
 			description={ description }
 			Header={ Header }
-			TitleWrapper={ TitleWrapper }
+			TitleWrapper={ TitleWrapper SettingsBlockAccordion}
 			Title={ Title }
 			Action={ Action }
 			Description={ Description }
@@ -18,4 +23,4 @@ const SettingsAccordion = ( { title, description, children, ...props } ) => (
 	</SettingsBlock>
 );
 
-export default SettingsAccordion;
+export default SettingsBlockAccordion;

modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/index.js

@@ -1,6 +1,5 @@
 export { default as ButtonSettingsBlock } from './ButtonSettingsBlock';
 export { default as SelectSettingsBlock } from './SelectSettingsBlock';
-export { default as AccordionSettingsBlock } from './AccordionSettingsBlock';
 export { default as RadioSettingsBlock } from './RadioSettingsBlock';
 export { default as PaymentMethodsBlock } from './PaymentMethodsBlock';
 export { default as PaymentMethodItemBlock } from './PaymentMethodItemBlock';

modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/ConnectionDetails.js

@@ -2,10 +2,10 @@ import { __, sprintf } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 
 import {
-	AccordionSettingsBlock,
 	ControlTextInput,
 	RadioSettingsBlock,
 } from '../../../../ReusableComponents/SettingsBlocks';
+import SettingsBlockAccordion from '../../../../ReusableComponents/SettingsBlockAccordion';
 
 const ConnectionDetails = ( { settings, updateFormValue } ) => {
 	const isSandbox = settings.sandboxConnected;
@@ -17,7 +17,7 @@ const ConnectionDetails = ( { settings, updateFormValue } ) => {
 	const modeKey = isSandbox ? 'productionMode' : 'sandboxMode';
 
 	return (
-		<AccordionSettingsBlock
+		<SettingsBlockAccordion
 			title={ modeConfig.title }
 			description={ modeConfig.description }
 		>
@@ -31,7 +31,7 @@ const ConnectionDetails = ( { settings, updateFormValue } ) => {
 					callback: updateFormValue,
 				} }
 			/>
-		</AccordionSettingsBlock>
+		</SettingsBlockAccordion>
 	);
 };
 

modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/OtherSettings.js

@@ -1,8 +1,6 @@
 import { __ } from '@wordpress/i18n';
-import {
-	AccordionSettingsBlock,
-	SelectSettingsBlock,
-} from '../../../../ReusableComponents/SettingsBlocks';
+import { SelectSettingsBlock } from '../../../../ReusableComponents/SettingsBlocks';
+import SettingsBlockAccordion from '../../../../ReusableComponents/SettingsBlockAccordion';
 
 const creditCardExamples = [
 	{ value: '', label: __( 'Select', 'woocommerce-paypal-payments' ) },
@@ -24,7 +22,7 @@ const creditCardExamples = [
 
 const OtherSettings = ( { settings, updateFormValue } ) => {
 	return (
-		<AccordionSettingsBlock
+		<SettingsBlockAccordion
 			title={ __(
 				'Other payment method settings',
 				'woocommerce-paypal-payments'
@@ -52,7 +50,7 @@ const OtherSettings = ( { settings, updateFormValue } ) => {
 				} }
 				order={ [ 'title', 'description', 'action' ] }
 			/>
-		</AccordionSettingsBlock>
+		</SettingsBlockAccordion>
 	);
 };
 

modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/PaypalSettings.js

@@ -1,16 +1,16 @@
 import { __ } from '@wordpress/i18n';
 import {
-	AccordionSettingsBlock,
 	RadioSettingsBlock,
 	ControlToggleButton,
 	ControlTextInput,
 	SelectSettingsBlock,
 } from '../../../../ReusableComponents/SettingsBlocks';
 import SettingsBlock from '../../../../ReusableComponents/SettingsBlock';
+import SettingsBlockAccordion from '../../../../ReusableComponents/SettingsBlockAccordion';
 
 const PaypalSettings = ( { updateFormValue, settings } ) => {
 	return (
-		<AccordionSettingsBlock
+		<SettingsBlockAccordion
 			className="ppcp-r-settings-block--settings"
 			title={ __( 'PayPal Settings', 'woocommerce-paypal-payments' ) }
 			description={ __(
@@ -189,7 +189,7 @@ const PaypalSettings = ( { updateFormValue, settings } ) => {
 				} }
 				order={ [ 'title', 'description', 'action' ] }
 			/>
-		</AccordionSettingsBlock>
+		</SettingsBlockAccordion>
 	);
 };
 

modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/Troubleshooting.js

@@ -5,19 +5,17 @@ import {
 	Header,
 	Title,
 } from '../../../../../ReusableComponents/Elements';
-import {
-	AccordionSettingsBlock,
-	ControlToggleButton,
-} from '../../../../../ReusableComponents/SettingsBlocks';
+import { ControlToggleButton } from '../../../../../ReusableComponents/SettingsBlocks';
 import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock';
 
 import SimulationBlock from './SimulationBlock';
 import ResubscribeBlock from './ResubscribeBlock';
 import HooksTableBlock from './HooksTableBlock';
+import SettingsBlockAccordion from '../../../../../ReusableComponents/SettingsBlockAccordion';
 
 const Troubleshooting = ( { updateFormValue, settings } ) => {
 	return (
-		<AccordionSettingsBlock
+		<SettingsBlockAccordion
 			className="ppcp-r-settings-block--troubleshooting"
 			title={ __( 'Troubleshooting', 'woocommerce-paypal-payments' ) }
 			description={ __(
@@ -65,7 +63,7 @@ const Troubleshooting = ( { updateFormValue, settings } ) => {
 				<ResubscribeBlock />
 				<SimulationBlock />
 			</SettingsBlock>
-		</AccordionSettingsBlock>
+		</SettingsBlockAccordion>
 	);
 };