Merge branch 'trunk' of github.com:woocommerce/woocommerce-paypal-pay…

…ments into PCP-4094-redux-store-for-settings

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

@@ -54,4 +54,9 @@ $card-vertical-gap: 48px;
 	--color-gray-200: #{$color-gray-200};
 	--color-gray-100: #{$color-gray-100};
 	--color-gradient-dark: #{$color-gradient-dark};
+
+	--color-text-title: #{$color-gray-900};
+	--color-text-main: #{$color-text-text};
+	--color-text-teriary: #{$color-text-tertiary};
+	--color-text-description: #{$color-gray-700};
 }

modules/ppcp-settings/resources/css/components/_reusable.scss

@@ -0,0 +1,19 @@
+@import "./reusable-components/payment-method-item";
+@import './reusable-components/accordion-section';
+@import './reusable-components/badge-box';
+@import './reusable-components/busy-state';
+@import './reusable-components/button';
+@import './reusable-components/fields';
+@import './reusable-components/navigation';
+@import './reusable-components/onboarding-header';
+@import './reusable-components/payment-method-icons';
+@import './reusable-components/select-box';
+@import './reusable-components/separator';
+@import './reusable-components/settings-block';
+@import './reusable-components/settings-card';
+@import './reusable-components/settings-toggle-block';
+@import './reusable-components/settings-wrapper';
+@import './reusable-components/spinner-overlay';
+@import './reusable-components/tab-navigation';
+@import './reusable-components/title-badge';
+@import './reusable-components/welcome-docs';

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

@@ -0,0 +1,176 @@
+/*
+ Styles the `SettingsBlock` and all its derived components.
+ */
+.ppcp-r-settings-block {
+	display: flex;
+	flex-direction: column;
+	gap: 16px 0;
+
+	&.ppcp-r-settings-block__input,
+	&.ppcp-r-settings-block__select {
+		gap: 6px 0;
+	}
+
+	.ppcp-r-settings-block__header {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+
+		&:not(:last-child):not(.ppcp-r-settings-block--accordion__header) {
+			padding-bottom: 6px;
+		}
+	}
+
+	.ppcp-r-settings-block__title {
+		@include font(11, 22, 600);
+		color: var(--color-text-title);
+		display: block;
+		text-transform: uppercase;
+
+		.ppcp-r-title-badge {
+			text-transform: none;
+			margin-left: 6px;
+		}
+	}
+
+	.ppcp-r-settings-block__title-wrapper {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	&.ppcp-r-settings-block__feature {
+		.ppcp-r-settings-block__title {
+			@include font(13, 20, 600);
+			color: var(--color-text-main);
+			text-transform: none;
+		}
+
+		.ppcp-r-settings-block__feature__description {
+			@include font(13, 20, 400);
+			color: var(--color-text-description);
+		}
+	}
+
+	&.ppcp-r-settings-block__toggle {
+		display: flex;
+		flex-direction: row;
+
+		.ppcp-r-settings-block__title {
+			@include font(13, 20, 400);
+			color: var(--color-text-main);
+			text-transform: none;
+		}
+	}
+
+	.ppcp-r-settings-block__description {
+		@include font(13, 20, 400);
+		margin: 0;
+		color: var(--color-text-description);
+
+		&:not(:last-child) {
+			padding-bottom: 1em;
+		}
+
+		a {
+			color: var(--color-blueberry);
+		}
+
+		strong {
+			color: var(--color-gray-800);
+		}
+	}
+
+	.ppcp-r-settings-block__supplementary-title-label {
+		@include font(13, 20, 400);
+		color: var(--color-text-teriary);
+		text-transform: none;
+		margin-left: 5px;
+	}
+
+	+ .ppcp-r-settings-block:not(.no-gap) {
+		margin-top: 32px;
+		padding-top: 32px;
+		border-top: 1px solid var(--color-gray-200);
+	}
+
+	// Types
+	&--toggle-content {
+		&.ppcp-r-settings-block--content-visible {
+			.ppcp-r-settings-block__toggle-content {
+				transform: rotate(180deg);
+			}
+		}
+
+		.ppcp-r-settings-block__header {
+			user-select: none;
+
+			&:hover {
+				cursor: pointer;
+			}
+		}
+	}
+
+	&--sandbox-connected {
+		.ppcp-r-settings-block__content {
+			margin-top: 24px;
+		}
+
+		.ppcp-r-connection-status__data {
+			margin-bottom: 20px;
+		}
+	}
+
+	&--connect-sandbox {
+		button.components-button {
+			@include small-button;
+		}
+
+		.ppcp-r__radio-content-additional {
+			@include vertical-layout-event-gap(24px);
+			align-items: flex-start;
+
+			.ppcp-r-vertical-text-control,
+			input[type='text'] {
+				width: 100%;
+			}
+		}
+	}
+}
+
+.ppcp-r-settings-block {
+	&--order-intent,
+	&--save-payment-methods {
+		@include vertical-layout-event-gap(24px);
+
+		> .ppcp-r-settings-block__content {
+			@include vertical-layout-event-gap(24px);
+		}
+	}
+}
+
+.ppcp-r-settings-block--toggle-content {
+	.ppcp-r-settings-block__content {
+		margin-top: 32px;
+	}
+}
+
+.ppcp-r-settings-block__button {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	gap: 50px;
+}
+
+.ppcp-r-settings-block__accordion {
+	> .ppcp-r-accordion {
+		width: 100%;
+
+		.ppcp-r-accordion__toggler {
+			width: 100%;
+			margin: 0;
+			text-align: unset;
+		}
+	}
+}

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

@@ -0,0 +1,63 @@
+/*
+ Styles the `SettingsCard` layout component.
+
+ This is a 2-column row that displays a title + description on the
+ left side, and a "card" with settings content on the right side.
+ */
+.ppcp-r-settings-card {
+
+	// -- Theming
+
+	--card-width-header: 100%;
+	--card-width-content: 100%;
+	--card-gap: 0;
+	--card-layout: block;
+
+	@media screen and (min-width: 960px) {
+		--card-width-header: 280px;
+		--card-width-content: 610px;
+		--card-gap: 48px;
+		--card-layout: flex;
+	}
+
+	// -- Styling
+
+	display: var(--card-layout);
+	gap: var(--card-gap);
+	margin: 0 0 var(--card-gap) 0;
+
+	.ppcp-r-settings-card__header {
+		display: var(--card-layout);
+		width: var(--card-width-header);
+		flex: 0 0 var(--card-width-header);
+		gap: 18px;
+		padding-bottom: 18px;
+	}
+
+	.ppcp-r-settings-card__content-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 24px;
+	}
+
+	.ppcp-r-settings-card__content {
+		flex: 1;
+		max-width: var(--card-width-content);
+		border: 1px solid var(--color-gray-200);
+		border-radius: 4px;
+		padding: 24px;
+	}
+
+	.ppcp-r-settings-card__title {
+		@include font(13, 24, 600);
+		color: var(--color-text-main);
+		margin: 0 0 4px 0;
+		display: block;
+	}
+
+	.ppcp-r-settings-card__description {
+		@include font(13, 20, 400);
+		color: var(--color-text-teriary);
+		margin: 0;
+	}
+}

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

@@ -26,60 +26,4 @@
 			border-bottom: 1px solid $color-gray-200;
 		}
 	}
-
-	&-settings-card {
-		@media screen and (min-width: 960px) {
-			display: flex;
-			gap: 48px;
-		}
-
-		@media screen and (max-width: 480px) {
-			padding: 24px;
-		}
-
-		&__content-wrapper {
-			display: flex;
-			flex-direction: column;
-			gap: 24px;
-		}
-
-		&__header {
-			display: flex;
-			gap: 18px;
-			padding-bottom: 18px;
-			border-bottom: 2px solid $color-gray-700;
-			margin-bottom: 32px;
-
-			@media screen and (min-width: 960px) {
-				width: 280px;
-				flex-shrink: 0;
-				border-bottom: none;
-				margin-bottom: 0;
-				padding-bottom: 0;
-			}
-		}
-
-		&__content {
-			border: 1px solid $color-gray-200;
-			border-radius: 4px;
-			padding: 24px;
-			@media screen and (min-width: 960px) {
-				flex: 1;
-			}
-		}
-
-		&__title {
-			@include font(13, 24, 600);
-			color: $color-text-text;
-			margin: 0 0 4px 0;
-			display: block;
-		}
-
-
-		&__description {
-			@include font(13, 20, 400);
-			color: $color-text-tertiary;
-			margin: 0;
-		}
-	}
 }