Merge pull request #2987 from woocommerce/PCP-4095-redux-store-for-st…

…yles Add Redux store for "Styling" tab (4095)
woocommerce · Jan 20, 2025 · 339d34e · 339d34e
2 parents addc523 + 77ed657
commit 339d34e
Show file tree

Hide file tree

Showing 62 changed files with 2,441 additions and 1,008 deletions.
diff --git a/modules/ppcp-settings/resources/css/_mixins.scss b/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.3;
+			cursor: default;
+		}
+	}
+}
diff --git a/modules/ppcp-settings/resources/css/_variables.scss b/modules/ppcp-settings/resources/css/_variables.scss
@@ -55,6 +55,8 @@ $card-vertical-gap: 48px;
 	--color-gray-100: #{$color-gray-100};
 	--color-gradient-dark: #{$color-gradient-dark};
 
+	--color-preview-background: #FAF8F5;
+	--color-separators: #{$color-gray-200};
 	--color-text-title: #{$color-gray-900};
 	--color-text-main: #{$color-text-text};
 	--color-text-teriary: #{$color-text-tertiary};

diff --git a/modules/ppcp-settings/resources/css/components/_reusable.scss b/modules/ppcp-settings/resources/css/components/_reusable.scss
@@ -4,6 +4,7 @@
 @import './reusable-components/busy-state';
 @import './reusable-components/button';
 @import './reusable-components/fields';
+@import './reusable-components/hstack';
 @import './reusable-components/navigation';
 @import './reusable-components/onboarding-header';
 @import './reusable-components/payment-method-icons';

diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_fields.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_fields.scss
@@ -1,88 +1,67 @@
-.ppcp-r {
+.ppcp-r__radio-value {
+	@include hide-input-field;
 
-	&__radio-value {
-		@include hide-input-field;
-
-		&:checked + .ppcp-r__radio-presentation {
-			position: relative;
-
-			&::before {
-				content: '';
-				width: 12px;
-				height: 12px;
-				border-radius: 12px;
-				background-color: $color-blueberry;
-				display: block;
-				position: absolute;
-				transform: translate(-50%, -50%);
-				left: 50%;
-				top: 50%;
-			}
-		}
-	}
-
-	&__checkbox {
+	&:checked + .ppcp-r__radio-presentation {
 		position: relative;
 
-		input {
-			margin: 0;
-			border-color: $color-gray-600;
-
-			&:checked {
-				background-color: $color-blueberry;
-				border-color:$color-blueberry;
-			}
-		}
-
-		.components-checkbox-control__input-container {
-			margin: 0;
-		}
-
-		.components-base-control__field {
-			margin: 0;
+		&::before {
+			content: '';
+			width: 12px;
+			height: 12px;
+			border-radius: 12px;
+			background-color: $color-blueberry;
+			display: block;
+			position: absolute;
+			transform: translate(-50%, -50%);
+			left: 50%;
+			top: 50%;
 		}
 	}
+}
 
-	&__radio-presentation {
-		@include fake-input-field(20px);
-	}
-
-	&__checkbox-presentation {
-		@include fake-input-field(2px);
-	}
+.ppcp-r__radio-presentation {
+	@include fake-input-field(20px);
+}
 
-	&__radio-wrapper {
-		display: flex;
-		gap: 18px;
-		align-items: center;
-		position: relative;
+.ppcp-r__checkbox-presentation {
+	@include fake-input-field(2px);
+}
 
-		label {
-			@include font(13, 20, 400);
-			color: $color-gray-800;
-		}
-	}
+.ppcp-r__radio-wrapper {
+	display: flex;
+	gap: 18px;
+	align-items: center;
+	position: relative;
 
-	&__radio-description {
+	label {
 		@include font(13, 20, 400);
-		margin: 0;
 		color: $color-gray-800;
 	}
+}
 
-	&__radio-content-additional {
-		padding-left: 38px;
-		padding-top: 18px;
-	}
+.ppcp-r__radio-description {
+	@include font(13, 20, 400);
+	margin: 0;
+	color: $color-gray-800;
 }
 
-.components-base-control {
-	&__label {
-		color: $color-gray-900;
+.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;
 	}
 
-	&__input {
+	.components-base-control__input {
 		border: 1px solid $color-gray-700;
 		border-radius: 2px;
 		box-shadow: none;
@@ -91,30 +70,59 @@
 			border-color: $color-blueberry;
 		}
 	}
-}
 
+	.components-base-control__help {
+		margin-bottom: 0;
+	}
 
-input[type='text'] {
-	padding: 7px 11px;
-	@include font(14, 20, 400);
-	@include primaryFont;
-	border-radius: 2px;
-}
+	// Text input fields.
+	input[type='text'] {
+		@include font(14, 20, 400);
+		@include primaryFont;
+		padding: 7px 11px;
+		border-radius: 2px;
+	}
 
-select {
-	padding: 7px 27px 7px 11px;
-	@include font(14, 20, 400);
-}
+	// Select lists.
+	select {
+		@include font(14, 20, 400);
+		padding: 7px 27px 7px 11px;
+	}
 
-.components-form-toggle.is-checked > .components-form-toggle__track {
-	background-color: $color-blueberry;
-}
+	// Checkboxes.
+	.components-checkbox-control {
+		position: relative;
 
-.ppcp-r-vertical-text-control {
-	.components-base-control__field {
-		display: flex;
-		flex-direction: column;
-		gap: 0;
-		margin: 0;
+		input {
+			margin: 0;
+			border-color: $color-gray-600;
+
+			&:checked {
+				background-color: $color-blueberry;
+				border-color: $color-blueberry;
+			}
+		}
+
+		.components-checkbox-control__input-container {
+			margin: 0;
+		}
+
+		.components-base-control__field {
+			margin: 0;
+		}
+	}
+
+	// Custom styles.
+	.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;
+		}
 	}
 }
diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_hstack.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_hstack.scss
@@ -0,0 +1,20 @@
+.components-flex {
+	display: flex;
+	-webkit-box-align: stretch;
+	align-items: stretch;
+	flex-direction: column;
+	-webkit-box-pack: center;
+	justify-content: center;
+
+	.components-h-stack {
+		flex-direction: row;
+		justify-content: flex-start;
+		gap: 32px;
+	}
+
+	// Fix layout for checkboxes inside a flex-stack.
+	.components-checkbox-control >.components-base-control__field > .components-flex {
+		flex-direction: row;
+		gap: 12px;
+	}
+}
diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss b/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);
 
 	&.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) {
-			padding-bottom: 6px;
+		&:not(:last-child) {
+			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;
@@ -88,9 +97,18 @@
 		margin-left: 5px;
 	}
 
+	.ppcp-r-settings-block__action {
+		display: flex;
+		align-items: center;
+
+		.components-flex {
+			row-gap: 0;
+		}
+	}
+
 	+ .ppcp-r-settings-block:not(.no-gap) {
-		margin-top: 32px;
-		padding-top: 32px;
+		margin-top: var(--block-separator-gap, 32px);
+		padding-top: var(--block-separator-gap, 32px);
 		border-top: 1px solid var(--color-gray-200);
 	}