♻️ Organize some reusable components

modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Action.js

@@ -0,0 +1,5 @@
+const Action = ( { children } ) => (
+	<div className="ppcp-r-settings-block__action">{ children }</div>
+);
+
+export default Action;

modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Content.js

@@ -0,0 +1,16 @@
+import classNames from 'classnames';
+
+const Content = ( { children, className = '', id = '' } ) => {
+	const elementClasses = classNames(
+		'ppcp-r-settings-card__content',
+		className
+	);
+
+	return (
+		<div id={ id } className={ elementClasses }>
+			{ children }
+		</div>
+	);
+};
+
+export default Content;

modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/ContentWrapper.js

@@ -0,0 +1,5 @@
+const ContentWrapper = ( { children } ) => (
+	<div className="ppcp-r-settings-card__content-wrapper">{ children }</div>
+);
+
+export default ContentWrapper;

modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Description.js

@@ -0,0 +1,26 @@
+import classNames from 'classnames';
+
+const Description = ( { children, asHtml = false, className = '' } ) => {
+	// Don't output anything if description is empty.
+	if ( ! children ) {
+		return null;
+	}
+
+	const elementClasses = classNames(
+		'ppcp-r-settings-block__description',
+		className
+	);
+
+	if ( ! asHtml ) {
+		return <span className={ elementClasses }>{ children }</span>;
+	}
+
+	return (
+		<span
+			className={ elementClasses }
+			dangerouslySetInnerHTML={ { __html: children } }
+		/>
+	);
+};
+
+export default Description;

modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Header.js

@@ -0,0 +1,12 @@
+import classNames from 'classnames';
+
+const Header = ( { children, className = '' } ) => {
+	const elementClasses = classNames(
+		'ppcp-r-settings-block__header',
+		className
+	);
+
+	return <div className={ elementClasses }>{ children }</div>;
+};
+
+export default Header;

modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/SupplementaryLabel.js

@@ -0,0 +1,7 @@
+const SupplementaryLabel = ( { children } ) => (
+	<span className="ppcp-r-settings-block__supplementary-title-label">
+		{ children }
+	</span>
+);
+
+export default SupplementaryLabel;

modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Title.js

@@ -0,0 +1,21 @@
+import classNames from 'classnames';
+
+const Title = ( {
+	children,
+	altStyle = false,
+	big = false,
+	className = '',
+} ) => {
+	const elementClasses = classNames(
+		'ppcp-r-settings-block__title',
+		className,
+		{
+			'style-alt': altStyle,
+			'style-big': big,
+		}
+	);
+
+	return <span className={ elementClasses }>{ children }</span>;
+};
+
+export default Title;

modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/TitleWrapper.js

@@ -0,0 +1,5 @@
+const TitleWrapper = ( { children } ) => (
+	<span className="ppcp-r-settings-block__title-wrapper">{ children }</span>
+);
+
+export default TitleWrapper;

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

@@ -0,0 +1,8 @@
+export { default as Action } from './Action';
+export { default as Content } from './Content';
+export { default as ContentWrapper } from './ContentWrapper';
+export { default as Description } from './Description';
+export { default as Header } from './Header';
+export { default as SupplementaryLabel } from './SupplementaryLabel';
+export { default as Title } from './Title';
+export { default as TitleWrapper } from './TitleWrapper';