✨ Make some generic UI components themeable

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

@@ -19,6 +19,8 @@ export const PayPalCheckbox = ( {
 		}
 	}
 
+	const className = classNames( { 'is-disabled': disabled } );
+
 	const onChange = ( newState ) => {
 		let newValue;
 
@@ -36,16 +38,14 @@ export const PayPalCheckbox = ( {
 	};
 
 	return (
-		<div className="ppcp-r__checkbox">
-			{ /* todo: Can we remove the wrapper div? */ }
-			<CheckboxControl
-				label={ label ?? '' }
-				value={ value }
-				checked={ isChecked }
-				disabled={ disabled }
-				onChange={ onChange }
-			/>
-		</div>
+		<CheckboxControl
+			label={ label }
+			value={ value }
+			checked={ isChecked }
+			disabled={ disabled }
+			onChange={ onChange }
+			className={ className }
+		/>
 	);
 };
 
@@ -58,6 +58,8 @@ export const CheckboxGroup = ( { options, value, onChange } ) => (
 				value={ checkbox.value }
 				checked={ checkbox.checked }
 				disabled={ checkbox.disabled }
+				description={ checkbox.description }
+				tooltip={ checkbox.tooltip }
 				currentValue={ value }
 				changeCallback={ onChange }
 			/>

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

@@ -1,9 +1,20 @@
+import classNames from 'classnames';
+
 // Block Elements
-export const Title = ( { children, className = '' } ) => (
-	<span className={ `ppcp-r-settings-block__title ${ className }`.trim() }>
-		{ children }
-	</span>
-);
+export const Title = ( {
+	children,
+	altStyle = false,
+	big = false,
+	className = '',
+} ) => {
+	className = classNames( 'ppcp-r-settings-block__title', className, {
+		'style-alt': altStyle,
+		'style-big': big,
+	} );
+
+	return <span className={ className }>{ children }</span>;
+};
+
 export const TitleWrapper = ( { children } ) => (
 	<span className="ppcp-r-settings-block__title-wrapper">{ children }</span>
 );
@@ -14,13 +25,25 @@ export const SupplementaryLabel = ( { children } ) => (
 	</span>
 );
 
-export const Description = ( { children, className = '' } ) => (
-	<span
-		className={ `ppcp-r-settings-block__description ${ className }`.trim() }
-	>
-		{ children }
-	</span>
-);
+export const Description = ( { children, asHtml = false, className = '' } ) => {
+	// Don't output anything if description is empty.
+	if ( ! children ) {
+		return null;
+	}
+
+	className = classNames( 'ppcp-r-settings-block__description', className );
+
+	if ( ! asHtml ) {
+		return <span className={ className }>{ children }</span>;
+	}
+
+	return (
+		<span
+			className={ className }
+			dangerouslySetInnerHTML={ { __html: children } }
+		/>
+	);
+};
 
 export const Action = ( { children } ) => (
 	<div className="ppcp-r-settings-block__action">{ children }</div>