diff --git a/modules/ppcp-settings/resources/css/_variables.scss b/modules/ppcp-settings/resources/css/_variables.scss
index 10f427ea9..5ccf191e5 100644
--- a/modules/ppcp-settings/resources/css/_variables.scss
+++ b/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};
}
diff --git a/modules/ppcp-settings/resources/css/components/_reusable.scss b/modules/ppcp-settings/resources/css/components/_reusable.scss
new file mode 100644
index 000000000..4d4f5c1ba
--- /dev/null
+++ b/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';
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
new file mode 100644
index 000000000..829be1977
--- /dev/null
+++ b/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 {
+ 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;
+ }
+ }
+}
diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-card.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-card.scss
new file mode 100644
index 000000000..634e3a8b7
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss
index a13df6e77..342e4be1d 100644
--- a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss
+++ b/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;
- }
- }
}
diff --git a/modules/ppcp-settings/resources/css/components/screens/_settings.scss b/modules/ppcp-settings/resources/css/components/screens/_settings.scss
index 4315d3f1a..c5b10be9c 100644
--- a/modules/ppcp-settings/resources/css/components/screens/_settings.scss
+++ b/modules/ppcp-settings/resources/css/components/screens/_settings.scss
@@ -1,4 +1,5 @@
-@import "./settings/block-accordion";
+@import './settings/input';
+@import './settings/tab-styling';
// Container and Tab Settings
.ppcp-r-tabs.settings,
@@ -245,310 +246,3 @@
gap: 48px;
}
-// Settings Card and Block Styles
-.ppcp-r-settings-card {
- margin: 0 0 48px 0;
-}
-
-.ppcp-r-settings-card__content {
- > .ppcp-r-settings-block {
- &:not(:last-child) {
- border-bottom: 1px solid $color-divider;
- }
- }
-}
-
-.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: $color-gray-900;
- 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: $color-text-text;
- text-transform: none;
- }
-
- .ppcp-r-settings-block__feature__description {
- color: $color-gray-700;
- @include font(13, 20, 400);
- }
- }
-
- &.ppcp-r-settings-block__toggle {
- display: flex;
- flex-direction: row;
-
- .ppcp-r-settings-block__title {
- color: $color-text-text;
- @include font(13, 20, 400);
- text-transform: none;
- }
- }
-
- .ppcp-r-settings-block__description {
- margin: 0;
- @include font(13, 20, 400);
- color: $color-gray-800;
-
- &:not(:last-child) {
- padding-bottom: 1em;
- }
-
- a {
- color: $color-blueberry;
- }
-
- strong {
- color: $color-gray-800;
- }
- }
-
- .ppcp-r-settings-block__supplementary-title-label {
- @include font(13, 20, 400);
- color: $color-text-tertiary;
- text-transform: none;
- margin-left: 5px;
- }
-
- // 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 {
- .ppcp-r-vertical-text-control {
- width: 100%;
- }
-
- @include vertical-layout-event-gap(24px);
- align-items: flex-start;
-
- input[type='text'] {
- width: 100%;
- }
- }
- }
-
- &--troubleshooting,
- &--settings {
- > .ppcp-r-settings-block__content > *:not(:last-child) {
- padding-bottom: 32px;
- margin-bottom: 32px;
- border-bottom: 1px solid $color-gray-500;
- }
- }
-
- // Fields
- input[type='text'] {
- border-color: $color-gray-700;
- width: 100%;
- max-width: 100%;
- color: $color-gray-800;
-
- &::placeholder {
- color: $color-gray-700;
- }
- }
-
- // MultiSelect control
- .ppcp-r {
- &__radio-wrapper {
- align-items: flex-start;
- gap: 12px;
- }
-
- &__radio-content {
- display: flex;
- flex-direction: column;
- gap: 4px;
-
- label {
- font-weight: 600;
- }
- }
-
- &__radio-content-additional {
- padding-left: 32px;
- }
-
- // Select control styles
- &__control {
- border-radius: 2px;
- border-color: $color-gray-700;
- min-height: auto;
- padding: 0;
- }
-
- &__input-container {
- padding: 0;
- margin: 0;
- }
-
- &__value-container {
- padding: 0 0 0 7px;
- }
-
- &__indicator {
- padding: 5px;
- }
-
- &__indicator-separator {
- display: none;
- }
-
- &__value-container--has-value {
- .ppcp-r__single-value {
- color: $color-gray-800;
- }
- }
-
- &__placeholder,
- &__single-value {
- @include font(13, 20, 400);
- }
-
- &__option {
- &--is-selected {
- background-color: $color-gray-200;
- }
- }
- }
-}
-
-// Hooks table
-.ppcp-r-table {
- &__hooks-url {
- width: 70%;
- padding-right: 20%;
- text-align: left;
- vertical-align: top;
- }
-
- &__hooks-events {
- vertical-align: top;
- text-align: left;
- width: 40%;
-
- span {
- display: block;
- }
- }
-
- td.ppcp-r-table__hooks-url,
- td.ppcp-r-table__hooks-events {
- padding-top: 12px;
- color: $color-gray-800;
- @include font(14, 20, 400);
-
- span {
- color: inherit;
- @include font(14, 20, 400);
- }
- }
-
- th.ppcp-r-table__hooks-url,
- th.ppcp-r-table__hooks-events {
- @include font(14, 20, 700);
- color: $color-gray-800;
- border-bottom: 1px solid $color-gray-600;
- padding-bottom: 4px;
- }
-}
-
-// Settings specific styles
-.ppcp-r-settings-card--common-settings .ppcp-r-settings-card__content,
-.ppcp-r-settings-card--expert-settings .ppcp-r-settings-card__content {
- > .ppcp-r-settings-block {
- &:not(:last-child) {
- padding-bottom: 32px;
- margin-bottom: 32px;
- }
- }
-}
-
-.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;
-}
diff --git a/modules/ppcp-settings/resources/css/components/screens/settings/_block-accordion.scss b/modules/ppcp-settings/resources/css/components/screens/settings/_block-accordion.scss
deleted file mode 100644
index c77a3eb91..000000000
--- a/modules/ppcp-settings/resources/css/components/screens/settings/_block-accordion.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-.ppcp-r-settings-block__accordion {
- > .ppcp-r-accordion {
- width: 100%;
-
- .ppcp-r-accordion__toggler {
- width: 100%;
- margin: 0;
- text-align: unset;
- }
- }
-
- &.ppcp-r-settings-block {
- gap: 0;
-
- .ppcp-r-settings-block__title {
- @include font(13, 20, 600);
- color: $color-text-text;
- text-transform: none;
- }
-
- .ppcp-r-settings-block--accordion__title {
- @include font(14, 20, 600);
- }
-
- .ppcp-r-settings-block--accordion__description {
- color: $color-gray-700;
- @include font(13, 20, 400);
- }
-
- .ppcp-r-settings-block:not(:last-child) {
- &:not(.ppcp-r__radio-content-additional .ppcp-r-settings-block) {
- padding-bottom: 32px;
- margin-bottom: 32px;
- border-bottom: 1px solid $color-divider;
- }
- }
- }
-}
diff --git a/modules/ppcp-settings/resources/css/components/screens/settings/_input.scss b/modules/ppcp-settings/resources/css/components/screens/settings/_input.scss
new file mode 100644
index 000000000..d71a52150
--- /dev/null
+++ b/modules/ppcp-settings/resources/css/components/screens/settings/_input.scss
@@ -0,0 +1,77 @@
+// Fields
+.ppcp-r {
+ input[type='text'] {
+ border-color: $color-gray-700;
+ width: 100%;
+ max-width: 100%;
+ color: $color-gray-800;
+
+ &::placeholder {
+ color: $color-gray-700;
+ }
+ }
+}
+
+// MultiSelect control
+.ppcp-r {
+ &__radio-wrapper {
+ align-items: flex-start;
+ gap: 12px;
+ }
+
+ &__radio-content {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+
+ label {
+ font-weight: 600;
+ }
+ }
+
+ &__radio-content-additional {
+ padding-left: 32px;
+ }
+
+ // Select control styles
+ &__control {
+ border-radius: 2px;
+ border-color: $color-gray-700;
+ min-height: auto;
+ padding: 0;
+ }
+
+ &__input-container {
+ padding: 0;
+ margin: 0;
+ }
+
+ &__value-container {
+ padding: 0 0 0 7px;
+ }
+
+ &__indicator {
+ padding: 5px;
+ }
+
+ &__indicator-separator {
+ display: none;
+ }
+
+ &__value-container--has-value {
+ .ppcp-r__single-value {
+ color: $color-gray-800;
+ }
+ }
+
+ &__placeholder,
+ &__single-value {
+ @include font(13, 20, 400);
+ }
+
+ &__option {
+ &--is-selected {
+ background-color: $color-gray-200;
+ }
+ }
+}
diff --git a/modules/ppcp-settings/resources/css/components/screens/overview/_tab-styling.scss b/modules/ppcp-settings/resources/css/components/screens/settings/_tab-styling.scss
similarity index 100%
rename from modules/ppcp-settings/resources/css/components/screens/overview/_tab-styling.scss
rename to modules/ppcp-settings/resources/css/components/screens/settings/_tab-styling.scss
diff --git a/modules/ppcp-settings/resources/css/style.scss b/modules/ppcp-settings/resources/css/style.scss
index 56fe55a62..0875dcad5 100644
--- a/modules/ppcp-settings/resources/css/style.scss
+++ b/modules/ppcp-settings/resources/css/style.scss
@@ -3,26 +3,9 @@
#ppcp-settings-container {
@import './global';
- @import './components/reusable-components/busy-state';
- @import './components/reusable-components/button';
- @import './components/reusable-components/separator';
- @import './components/reusable-components/onboarding-header';
- @import './components/reusable-components/settings-toggle-block';
- @import './components/reusable-components/payment-method-icons';
- @import "./components/reusable-components/payment-method-item";
- @import './components/reusable-components/settings-wrapper';
- @import './components/reusable-components/select-box';
- @import './components/reusable-components/tab-navigation';
- @import './components/reusable-components/navigation';
- @import './components/reusable-components/fields';
- @import './components/reusable-components/title-badge';
- @import './components/reusable-components/accordion-section';
- @import './components/reusable-components/badge-box';
- @import './components/reusable-components/spinner-overlay';
- @import './components/reusable-components/welcome-docs';
+ @import './components/reusable';
@import './components/screens/onboarding';
@import './components/screens/settings';
- @import './components/screens/overview/tab-styling';
@import './components/app';
}
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlock.js
index 768fa9387..2ded62c11 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlock.js
@@ -1,9 +1,9 @@
-const SettingsBlock = ( { className, children } ) => {
- const blockClassName = [ 'ppcp-r-settings-block', className ].filter(
- Boolean
- );
+import classNames from 'classnames';
- return { children }
;
+const SettingsBlock = ( { className, children } ) => {
+ const blockClassName = classNames( 'ppcp-r-settings-block', className );
+
+ return { children }
;
};
export default SettingsBlock;
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js
index a72253301..f209daec1 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js
@@ -1,3 +1,5 @@
+import classNames from 'classnames';
+
import { Content, ContentWrapper } from './SettingsBlocks';
const SettingsCard = ( {
@@ -9,9 +11,7 @@ const SettingsCard = ( {
contentItems,
contentContainer = true,
} ) => {
- const className = [ 'ppcp-r-settings-card', extraClassName ]
- .filter( Boolean )
- .join( ' ' );
+ const className = classNames( 'ppcp-r-settings-card', extraClassName );
const renderContent = () => {
// If contentItems array is provided, wrap each item in Content component