diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlock.js index f5a512707..b80d8f253 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlock.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlock.js @@ -1,11 +1,37 @@ import classNames from 'classnames'; +import { Description, Header, Title, TitleExtra, Content } from './Elements'; -const SettingsBlock = ( { className, children, separatorAndGap = true } ) => { +const SettingsBlock = ( { + className, + children, + title, + titleSuffix, + headerDescription, + description, + horizontalLayout = false, + separatorAndGap = true, +} ) => { const blockClassName = classNames( 'ppcp-r-settings-block', className, { 'ppcp--no-gap': ! separatorAndGap, + 'ppcp--horizontal': horizontalLayout, } ); - return
{ children }
; + return ( +
+
+ + { title } <TitleExtra>{ titleSuffix }</TitleExtra> + + { headerDescription } +
+ + + { children } + + { description } + +
+ ); }; export default SettingsBlock; diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js index 812ae0d3d..9e01078cf 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js @@ -8,7 +8,7 @@ const ButtonSettingsBlock = ( { title, description, ...props } ) => ( title={ title } headerDescription={ description } horizontalLayout={ true } - className="ppcp-r-settings-block__button" + className="ppcp--button-block" { ...props } >