✨ Make some generic UI components themeable

modules/ppcp-settings/resources/css/_mixins.scss

@@ -43,3 +43,14 @@
 	display: flex;
 	gap: $gap;
 }
+
+@mixin disabled-state($control-type) {
+	.components-#{$control-type}-control.is-disabled {
+		.components-#{$control-type}-control__input,
+		.components-#{$control-type}-control__label,
+		.components-base-control__help {
+			opacity: 0.5;
+			cursor: default;
+		}
+	}
+}

modules/ppcp-settings/resources/css/components/reusable-components/_fields.scss

@@ -1,27 +1,96 @@
-.ppcp-r {
+.ppcp-r__radio-value {
+	@include hide-input-field;
 
-	&__radio-value {
+	&:checked + .ppcp-r__radio-presentation {
-		@include hide-input-field;
+		position: relative;
 
-		&:checked + .ppcp-r__radio-presentation {
+		&::before {
-			position: relative;
+			content: '';
+			width: 12px;
+			height: 12px;
+			border-radius: 12px;
+			background-color: $color-blueberry;
+			display: block;
+			position: absolute;
+			transform: translate(-50%, -50%);
+			left: 50%;
+			top: 50%;
+		}
+	}
+}
 
-			&::before {
+.ppcp-r__radio-presentation {
-				content: '';
+	@include fake-input-field(20px);
-				width: 12px;
+}
-				height: 12px;
+
-				border-radius: 12px;
+.ppcp-r__checkbox-presentation {
-				background-color: $color-blueberry;
+	@include fake-input-field(2px);
-				display: block;
+}
-				position: absolute;
+
-				transform: translate(-50%, -50%);
+.ppcp-r__radio-wrapper {
-				left: 50%;
+	display: flex;
-				top: 50%;
+	gap: 18px;
-			}
+	align-items: center;
+	position: relative;
+
+	label {
+		@include font(13, 20, 400);
+		color: $color-gray-800;
+	}
+}
+
+.ppcp-r__radio-description {
+	@include font(13, 20, 400);
+	margin: 0;
+	color: $color-gray-800;
+}
+
+.ppcp-r__radio-content-additional {
+	padding-left: 38px;
+	padding-top: 18px;
+}
+
+
+.ppcp-r-app {
+	@include disabled-state('base');
+	@include disabled-state('checkbox');
+
+	.components-base-control__label {
+		@include font(13, 16, 600);
+		color: $color-gray-900;
+		text-transform: none;
+	}
+
+	.components-base-control__input {
+		border: 1px solid $color-gray-700;
+		border-radius: 2px;
+		box-shadow: none;
+
+		&:focus {
+			border-color: $color-blueberry;
 		}
 	}
 
-	&__checkbox {
+	.components-base-control__help {
+		margin-bottom: 0;
+	}
+
+	// Text input fields.
+	input[type='text'] {
+		@include font(14, 20, 400);
+		@include primaryFont;
+		padding: 7px 11px;
+		border-radius: 2px;
+	}
+
+	// Select lists.
+	select {
+		@include font(14, 20, 400);
+		padding: 7px 27px 7px 11px;
+	}
+
+	// Checkboxes.
+	.components-checkbox-control {
 		position: relative;
 
 		input {
@@ -30,7 +99,7 @@
 
 			&:checked {
 				background-color: $color-blueberry;
-				border-color:$color-blueberry;
+				border-color: $color-blueberry;
 			}
 		}
 
@@ -43,78 +112,17 @@
 		}
 	}
 
-	&__radio-presentation {
+	// Custom styles.
-		@include fake-input-field(20px);
+	.components-form-toggle.is-checked > .components-form-toggle__track {
+		background-color: $color-blueberry;
 	}
 
-	&__checkbox-presentation {
+	.ppcp-r-vertical-text-control {
-		@include fake-input-field(2px);
+		.components-base-control__field {
-	}
+			display: flex;
-
+			flex-direction: column;
-	&__radio-wrapper {
+			gap: 0;
-		display: flex;
+			margin: 0;
-		gap: 18px;
-		align-items: center;
-		position: relative;
-
-		label {
-			@include font(13, 20, 400);
-			color: $color-gray-800;
-		}
-	}
-
-	&__radio-description {
-		@include font(13, 20, 400);
-		margin: 0;
-		color: $color-gray-800;
-	}
-
-	&__radio-content-additional {
-		padding-left: 38px;
-		padding-top: 18px;
-	}
-}
-
-.components-base-control {
-	&__label {
-		color: $color-gray-900;
-		@include font(13, 16, 600);
-		text-transform: none;
-	}
-
-	&__input {
-		border: 1px solid $color-gray-700;
-		border-radius: 2px;
-		box-shadow: none;
-
-		&:focus {
-			border-color: $color-blueberry;
 		}
 	}
 }
-
-
-input[type='text'] {
-	padding: 7px 11px;
-	@include font(14, 20, 400);
-	@include primaryFont;
-	border-radius: 2px;
-}
-
-select {
-	padding: 7px 27px 7px 11px;
-	@include font(14, 20, 400);
-}
-
-.components-form-toggle.is-checked > .components-form-toggle__track {
-	background-color: $color-blueberry;
-}
-
-.ppcp-r-vertical-text-control {
-	.components-base-control__field {
-		display: flex;
-		flex-direction: column;
-		gap: 0;
-		margin: 0;
-	}
-}

modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss

@@ -4,7 +4,7 @@
 .ppcp-r-settings-block {
 	display: flex;
 	flex-direction: column;
-	gap: 16px 0;
+	gap: var(--block-item-gap, 16px) 0;
 
 	&.ppcp-r-settings-block__input,
 	&.ppcp-r-settings-block__select {
@@ -16,8 +16,8 @@
 		flex-direction: column;
 		gap: 6px;
 
-		&:not(:last-child):not(.ppcp-r-settings-block--accordion__header) {
+		&:not(:last-child) {
-			padding-bottom: 6px;
+			padding-bottom: var(--block-header-gap, 6px);
 		}
 	}
 
@@ -27,6 +27,15 @@
 		display: block;
 		text-transform: uppercase;
 
+		&.style-alt {
+			@include font(14, 16, 600);
+			text-transform: none;
+		}
+
+		&.style-big {
+			@include font(16, 20, 600);
+		}
+
 		.ppcp-r-title-badge {
 			text-transform: none;
 			margin-left: 6px;
@@ -89,8 +98,8 @@
 	}
 
 	+ .ppcp-r-settings-block:not(.no-gap) {
-		margin-top: 32px;
+		margin-top: var(--block-separator-gap, 32px);
-		padding-top: 32px;
+		padding-top: var(--block-separator-gap, 32px);
 		border-top: 1px solid var(--color-gray-200);
 	}
 

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">
+		<CheckboxControl
-			{ /* todo: Can we remove the wrapper div? */ }
+			label={ label }
-			<CheckboxControl
+			value={ value }
-				label={ label ?? '' }
+			checked={ isChecked }
-				value={ value }
+			disabled={ disabled }
-				checked={ isChecked }
+			onChange={ onChange }
-				disabled={ disabled }
+			className={ className }
-				onChange={ onChange }
+		/>
-			/>
-		</div>
 	);
 };
 
@@ -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 = '' } ) => (
+export const Title = ( {
-	<span className={ `ppcp-r-settings-block__title ${ className }`.trim() }>
+	children,
-		{ children }
+	altStyle = false,
-	</span>
+	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 = '' } ) => (
+export const Description = ( { children, asHtml = false, className = '' } ) => {
-	<span
+	// Don't output anything if description is empty.
-		className={ `ppcp-r-settings-block__description ${ className }`.trim() }
+	if ( ! children ) {
-	>
+		return null;
-		{ children }
+	}
-	</span>
+
-);
+	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>