From 7dc6c77a35b058474c1577bfd0375605d14c5b69 Mon Sep 17 00:00:00 2001 From: Rasmy Nguyen Date: Tue, 23 Jan 2024 13:44:09 -0500 Subject: [PATCH 01/13] feat(modal-checkout): add ui to thankyou --- includes/class-modal-checkout.php | 2 +- src/modal-checkout/checkout.scss | 3 + src/modal-checkout/templates/thankyou.php | 80 ++++++++--------------- src/shared/sass/_boxes.scss | 44 +++++++++++++ src/shared/sass/_buttons.scss | 61 +++++++++++++++++ src/shared/sass/variables/_colors.scss | 34 ++++++++++ src/shared/sass/variables/_fonts.scss | 18 +++++ src/shared/sass/variables/_index.scss | 4 ++ src/shared/sass/variables/_misc.scss | 38 +++++++++++ src/shared/sass/variables/_spacing.scss | 13 ++++ 10 files changed, 242 insertions(+), 55 deletions(-) create mode 100644 src/shared/sass/_boxes.scss create mode 100644 src/shared/sass/_buttons.scss create mode 100644 src/shared/sass/variables/_colors.scss create mode 100644 src/shared/sass/variables/_fonts.scss create mode 100644 src/shared/sass/variables/_index.scss create mode 100644 src/shared/sass/variables/_misc.scss create mode 100644 src/shared/sass/variables/_spacing.scss diff --git a/includes/class-modal-checkout.php b/includes/class-modal-checkout.php index 178c258d9..56e762c00 100644 --- a/includes/class-modal-checkout.php +++ b/includes/class-modal-checkout.php @@ -834,7 +834,7 @@ private static function render_after_success_button() { href="" target="_top" - class="button newspack-modal-newsletters__button" + class="newspack-blocks-ui__button newspack-ui__button--primary newspack-ui__button--wide" > diff --git a/src/modal-checkout/checkout.scss b/src/modal-checkout/checkout.scss index d6bfff2d3..355d39b0a 100644 --- a/src/modal-checkout/checkout.scss +++ b/src/modal-checkout/checkout.scss @@ -1,3 +1,6 @@ +@use '../shared/sass/boxes'; +@use '../shared/sass/buttons'; + /* stylelint-disable-next-line */ #newspack_modal_checkout { padding: 24px; diff --git a/src/modal-checkout/templates/thankyou.php b/src/modal-checkout/templates/thankyou.php index 305b9c520..ccba484e4 100644 --- a/src/modal-checkout/templates/thankyou.php +++ b/src/modal-checkout/templates/thankyou.php @@ -47,67 +47,39 @@ function newspack_blocks_replace_login_with_order_summary() { return; } - $is_success = ! $order->has_status( 'failed' ); - $order_item_name = array_values( $order->get_items() )[0]->get_name(); - + $is_success = ! $order->has_status( 'failed' ); ?>
-

- +
+

+ + + +

+
+ -

- -

- -

- - - - -

+
+

+ +

+ +

+ + + + +

+
- - - - - *:first-child { + margin-top: 0; + } + + > *:last-child { + margin-bottom: 0; + } + } +} + diff --git a/src/shared/sass/_buttons.scss b/src/shared/sass/_buttons.scss new file mode 100644 index 000000000..940d62ce3 --- /dev/null +++ b/src/shared/sass/_buttons.scss @@ -0,0 +1,61 @@ +@use './variables'; + +.newspack-blocks-ui { + &__button { + align-items: center; + border: 0; + border-radius: var( --newspack-ui-border-radius-small ); + display: inline-flex; + font-family: var( --newspack-ui-font-family ); + font-size: var( --newspack-ui-font-size-small ); + font-weight: 600; + gap: var( --newspack-ui-spacer-2 ); + justify-content: center; + line-height: var( --newspack-ui-line-height-large ); + margin-bottom: var( --newspack-ui-spacer-base ); + padding: var( --newspack-ui-spacer-2 ) var( --newspack-ui-spacer-3 ); // TODO: correct this + transition: background-color 150ms ease-in-out; + + &:disabled { + background: var( --newspack-ui-color-gray-100 ) !important; + color: var( --newspack-ui-color-text-med-contrast ) !important; + cursor: default; + } + + &--wide { + display: flex; + width: 100%; + } + + &--primary { + background: var( --newspack-ui-color-button-bg ); + color: var( --newspack-ui-color-button-text ); + + &:hover { + background: var( --newspack-ui-color-button-bg-hover ); + } + } + + &--secondary { + background: transparent; + border: 1px solid var( --newspack-ui-color-border ); + color: var( --newspack-ui-color-text-high-contrast ); + padding: calc( var( --newspack-ui-spacer-2 ) - 1px ) + calc( var( --newspack-ui-spacer-3 ) - 1px ); + + &:hover { + background: var( --newspack-ui-color-gray-100 ); + } + } + + &--tertiary { + background: transparent; + color: var( --newspack-ui-color-text-high-contrast ); + + &:hover { + background: var( --newspack-ui-color-gray-100 ); + } + } + } +} + diff --git a/src/shared/sass/variables/_colors.scss b/src/shared/sass/variables/_colors.scss new file mode 100644 index 000000000..f9588a4cb --- /dev/null +++ b/src/shared/sass/variables/_colors.scss @@ -0,0 +1,34 @@ +:root { + // Grays - notes from the Gutenberg styles. + // TODO: Import from 'wordpress/base-styles/colors' ? + --newspack-ui-color-black: #000; // Use only when you truly need pure black. For UI, use $gray-900. + --newspack-ui-color-gray-900: #1e1e1e; + --newspack-ui-color-gray-800: #2f2f2f; + --newspack-ui-color-gray-700: #757575; // Meets 4.6:1 text contrast against white. + --newspack-ui-color-gray-600: #949494; // Meets 3:1 UI or large text contrast against white. + --newspack-ui-color-gray-400: #ccc; + --newspack-ui-color-gray-300: #ddd; // Used for most borders. + --newspack-ui-color-gray-200: #e0e0e0; // Used sparingly for light borders. + --newspack-ui-color-gray-100: #f0f0f0; // Used for light gray backgrounds. + --newspack-ui-color-white: #fff; + + // Alert colors + --newpsack-ui-color-alert-yellow: #f0b849; + --newspack-ui-color-alert-green: #4ab866; + --newspack-ui-color-alert-red: #cc1818; + // --newpsack-ui-color-alert-yellow-bg: TBD + --newspack-ui-color-alert-green-bg: #edfaef; + --newpsack-ui-color-alert-red-bg: #fcf0f1; + + // Specific assignments - general: + --newspack-ui-color-text-high-contrast: var( --newspack-ui-color-gray-900 ); + --newspack-ui-color-text-med-contrast: var( --newspack-ui-color-gray-700 ); + --newspack-ui-color-border: var( --newspack-ui-color-gray-300 ); + --newspack-ui-color-body-bg: var( --newspack-ui-color-white ); + + // Specific assignments - form elements + --newspack-ui-color-button-bg: var( --newspack-ui-color-gray-900 ); + --newspack-ui-color-button-bg-hover: var( --newspack-ui-color-gray-800 ); // TODO: Replace w/correct value. + --newspack-ui-color-button-text: var( --newspack-ui-color-white ); + --newspack-ui-color-radio-bg: var( --newspack-ui-color-gray-900 ); +} diff --git a/src/shared/sass/variables/_fonts.scss b/src/shared/sass/variables/_fonts.scss new file mode 100644 index 000000000..910d29de3 --- /dev/null +++ b/src/shared/sass/variables/_fonts.scss @@ -0,0 +1,18 @@ +:root { + // Fonts + --newspack-ui-font-family: system-ui, sans-serif; + + // TODO: the base size for the modals is 16px, with small text/labels at 14px; + // The My Account designs appear to use 16px for most labels + // Should we have a in-modal vs. non-modal set of font sizes? + --newspack-ui-font-size-large: 20px; + --newspack-ui-font-size-medium: 16px; // modal baseline + --newspack-ui-font-size-small: 14px; // modal small + --newspack-ui-font-weight-strong: 600; + + // Line heights - TODO: sort this out: + --newspack-ui-line-height-large: 1.7143; // inputs, buttons + --newspack-ui-line-height-medium: 1.5; // 16px font size + --newspack-ui-line-height-small: 1.4286; // 14px font sizes +} + diff --git a/src/shared/sass/variables/_index.scss b/src/shared/sass/variables/_index.scss new file mode 100644 index 000000000..1b7a8f26c --- /dev/null +++ b/src/shared/sass/variables/_index.scss @@ -0,0 +1,4 @@ +@use './colors'; +@use './fonts'; +@use './spacing'; +@use './misc'; diff --git a/src/shared/sass/variables/_misc.scss b/src/shared/sass/variables/_misc.scss new file mode 100644 index 000000000..d4e63b4e8 --- /dev/null +++ b/src/shared/sass/variables/_misc.scss @@ -0,0 +1,38 @@ +$mobile_width: 600px; +$tablet_width: 782px; +$desktop_width: 1168px; +$wide_width: 1379px; + +$font__size_base: 20px; +$font__size-ratio: 1.125; + +$font__size-xxxs: 1em * 0.5; // 10px +$font__size-xxs: 1em * 0.6; // 12px +$font__size-xs: 1em * 0.7; // 14px +$font__size-sm: 1em * 0.8; // 16px +// $font__size_base: 1em * 1; // 20px +$font__size-md: 1em * 1.2; // 24px +$font__size-lg: 1em * 1.4; // 28px +$font__size-xl: 1em * 1.8; // 36px +$font__size-xxl: 1em * 2.2; // 44px +$font__size-xxxl: 1em * 2.8; // 56px +$font__size-xxxxl: 1em * 3.2; // 64px + +$font__line-height-body: 1.6; +$font__line-height-pre: 1.6; +$font__line-height-heading: 1.2; +$font__line-height-double: 2 * $font__line-height-heading; + +$color__border: #ccc; + +// TODO: Some misc styles that need a home! +:root { + // Modal widths + --newspack-ui-modal-width-large: 964px; + --newspack-ui-modal-width-medium: 600px; + --newspack-ui-modal-width-small: 368px; + + // Border radius - not ems because the font size of the element itself caused a cascade. + --newspack-ui-border-radius: 6px; + --newspack-ui-border-radius-small: 5px; +} diff --git a/src/shared/sass/variables/_spacing.scss b/src/shared/sass/variables/_spacing.scss new file mode 100644 index 000000000..530dffeca --- /dev/null +++ b/src/shared/sass/variables/_spacing.scss @@ -0,0 +1,13 @@ +:root { + // Spacing - not ems because the font size of the element itself caused a cascade + --newspack-ui-spacer-base: 8px; + --newspack-ui-spacer-2: calc( var( --newspack-ui-spacer-base ) * 1.5 ); // 12px + --newspack-ui-spacer-3: calc( var( --newspack-ui-spacer-base ) * 2 ); // 16px + --newspack-ui-spacer-4: calc( var( --newspack-ui-spacer-base ) * 2.5 ); // 20px + --newspack-ui-spacer-5: calc( var( --newspack-ui-spacer-base ) * 3 ); // 24px + --newspack-ui-spacer-6: calc( var( --newspack-ui-spacer-base ) * 4 ); // 32px - TODO: clamp? + --newspack-ui-spacer-7: calc( var( --newspack-ui-spacer-base ) * 5 ); // 40px - TODO: clamp? + --newspack-ui-spacer-8: calc( var( --newspack-ui-spacer-base ) * 6 ); // 48px - TODO: clamp? + --newspack-ui-spacer-9: calc( var( --newspack-ui-spacer-base ) * 8 ); // 64px - TODO: clamp? +} + From fc01e3cd288a4dafda5501a4c17270d06457d198 Mon Sep 17 00:00:00 2001 From: Rasmy Nguyen Date: Tue, 23 Jan 2024 18:22:48 -0500 Subject: [PATCH 02/13] feat(modal-checkout): remove redundant styles --- includes/class-modal-checkout.php | 8 +- src/blocks/checkout-button/block.json | 2 +- src/blocks/donate/block.json | 2 +- src/modal-checkout/index.js | 4 - src/modal-checkout/modal.js | 5 -- src/modal-checkout/templates/thankyou-v2.php | 84 ++++++++++++++++++++ src/modal-checkout/templates/thankyou.php | 80 +++++++++++++------ src/shared/sass/_boxes.scss | 44 ---------- src/shared/sass/_buttons.scss | 61 -------------- src/shared/sass/variables/_colors.scss | 34 -------- src/shared/sass/variables/_fonts.scss | 18 ----- src/shared/sass/variables/_index.scss | 4 - src/shared/sass/variables/_misc.scss | 38 --------- src/shared/sass/variables/_spacing.scss | 13 --- 14 files changed, 145 insertions(+), 252 deletions(-) create mode 100644 src/modal-checkout/templates/thankyou-v2.php delete mode 100644 src/shared/sass/_boxes.scss delete mode 100644 src/shared/sass/_buttons.scss delete mode 100644 src/shared/sass/variables/_colors.scss delete mode 100644 src/shared/sass/variables/_fonts.scss delete mode 100644 src/shared/sass/variables/_index.scss delete mode 100644 src/shared/sass/variables/_misc.scss delete mode 100644 src/shared/sass/variables/_spacing.scss diff --git a/includes/class-modal-checkout.php b/includes/class-modal-checkout.php index 56e762c00..d2f92ab18 100644 --- a/includes/class-modal-checkout.php +++ b/includes/class-modal-checkout.php @@ -54,6 +54,7 @@ public static function init() { add_action( 'woocommerce_checkout_before_customer_details', [ __CLASS__, 'render_before_customer_details' ] ); add_filter( 'woocommerce_enable_order_notes_field', [ __CLASS__, 'enable_order_notes_field' ] ); add_action( 'woocommerce_checkout_process', [ __CLASS__, 'wcsg_apply_gift_subscription' ] ); + add_filter( 'woocommerce_order_received_verify_known_shoppers', '__return_false' ); /** Custom handling for registered users. */ add_filter( 'woocommerce_checkout_customer_id', [ __CLASS__, 'associate_existing_user' ] ); @@ -572,14 +573,15 @@ public static function wc_get_template( $located, $template_name ) { return $located; } - $custom_templates = [ + $is_newspack_plugin_active = class_exists( '\Newspack\Newspack_UI' ); + $custom_templates = [ 'checkout/form-checkout.php' => 'src/modal-checkout/templates/form-checkout.php', - 'checkout/thankyou.php' => 'src/modal-checkout/templates/thankyou.php', 'checkout/form-coupon.php' => 'src/modal-checkout/templates/form-coupon.php', 'checkout/form-gift-subscription.php' => 'src/modal-checkout/templates/form-gift-subscription.php', + 'checkout/thankyou.php' => 'src/modal-checkout/templates/' . ( $is_newspack_plugin_active ? 'thankyou-v2' : 'thankyou' ) . '.php', // Replace the login form with the order summary if using the modal checkout. This is // for the case where the reader used an existing email address. - 'global/form-login.php' => 'src/modal-checkout/templates/thankyou.php', + 'global/form-login.php' => 'src/modal-checkout/templates/' . ( $is_newspack_plugin_active ? 'thankyou-v2' : 'thankyou' ) . '.php', ]; // Only show the woocommerce-subscriptions-gifting fields when we want to. diff --git a/src/blocks/checkout-button/block.json b/src/blocks/checkout-button/block.json index dee914c43..be761653d 100644 --- a/src/blocks/checkout-button/block.json +++ b/src/blocks/checkout-button/block.json @@ -41,7 +41,7 @@ }, "afterSuccessButtonLabel": { "type": "string", - "default": "Continue browsing" + "default": "Continue" }, "afterSuccessURL": { "type": "string" diff --git a/src/blocks/donate/block.json b/src/blocks/donate/block.json index a4778eef3..d5656ba16 100644 --- a/src/blocks/donate/block.json +++ b/src/blocks/donate/block.json @@ -84,7 +84,7 @@ }, "afterSuccessButtonLabel": { "type": "string", - "default": "Continue browsing" + "default": "Continue" }, "afterSuccessURL": { "type": "string" diff --git a/src/modal-checkout/index.js b/src/modal-checkout/index.js index 8215ce142..7b267d1ba 100644 --- a/src/modal-checkout/index.js +++ b/src/modal-checkout/index.js @@ -1,8 +1,4 @@ /* globals newspackBlocksModalCheckout, jQuery, wc_checkout_params */ -/** - * Style dependencies - */ -import './checkout.scss'; ( function ( $ ) { if ( ! $ ) { diff --git a/src/modal-checkout/modal.js b/src/modal-checkout/modal.js index 45525cb98..85852a611 100644 --- a/src/modal-checkout/modal.js +++ b/src/modal-checkout/modal.js @@ -1,8 +1,3 @@ -/** - * Internal dependencies - */ -import './modal.scss'; - /** * Specify a function to execute when the DOM is fully loaded. * diff --git a/src/modal-checkout/templates/thankyou-v2.php b/src/modal-checkout/templates/thankyou-v2.php new file mode 100644 index 000000000..224cee749 --- /dev/null +++ b/src/modal-checkout/templates/thankyou-v2.php @@ -0,0 +1,84 @@ +get_order_key(), $key ); // Validate order key to prevent CSRF. + + // Handle the newsletter signup form. + $newsletter_confirmation = \Newspack_Blocks\Modal_Checkout::confirm_newsletter_signup(); + $is_error = \is_wp_error( $newsletter_confirmation ); + $no_selected_lists = $is_error && 'newspack_no_lists_selected' === $newsletter_confirmation->get_error_code(); + if ( true === $newsletter_confirmation || $no_selected_lists ) { + echo \Newspack_Blocks\Modal_Checkout::render_newsletter_confirmation( $no_selected_lists ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped + return; + } elseif ( $is_error ) { + echo esc_html( $newsletter_confirmation->get_error_message() ); + return; + } + + if ( ! $is_valid ) { + return; + } + + $is_success = ! $order->has_status( 'failed' ); + ?> + +
+ +
+

+ + + +

+ +
+ +
+

+ +

+ + + + + +
+ +
+ has_status( 'failed' ); + $is_success = ! $order->has_status( 'failed' ); + $order_item_name = array_values( $order->get_items() )[0]->get_name(); + ?>
-
-

- - - -

-
- +

+
    +
  • + + get_date_created() ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> +
    • + + get_billing_email() ) : ?> + + + +
  • + + get_formatted_order_total(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> +
    • + + get_payment_method_title() ) : ?> +
  • + + get_payment_method_title() ); ?> +
    • + + +
  • + + +
    • + +
  • + + get_order_number(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> +
    • +
-
-

- -

- -

- - - - -

-
+

+ +

+ +

+ + + + +

+ + + + + *:first-child { - margin-top: 0; - } - - > *:last-child { - margin-bottom: 0; - } - } -} - diff --git a/src/shared/sass/_buttons.scss b/src/shared/sass/_buttons.scss deleted file mode 100644 index 940d62ce3..000000000 --- a/src/shared/sass/_buttons.scss +++ /dev/null @@ -1,61 +0,0 @@ -@use './variables'; - -.newspack-blocks-ui { - &__button { - align-items: center; - border: 0; - border-radius: var( --newspack-ui-border-radius-small ); - display: inline-flex; - font-family: var( --newspack-ui-font-family ); - font-size: var( --newspack-ui-font-size-small ); - font-weight: 600; - gap: var( --newspack-ui-spacer-2 ); - justify-content: center; - line-height: var( --newspack-ui-line-height-large ); - margin-bottom: var( --newspack-ui-spacer-base ); - padding: var( --newspack-ui-spacer-2 ) var( --newspack-ui-spacer-3 ); // TODO: correct this - transition: background-color 150ms ease-in-out; - - &:disabled { - background: var( --newspack-ui-color-gray-100 ) !important; - color: var( --newspack-ui-color-text-med-contrast ) !important; - cursor: default; - } - - &--wide { - display: flex; - width: 100%; - } - - &--primary { - background: var( --newspack-ui-color-button-bg ); - color: var( --newspack-ui-color-button-text ); - - &:hover { - background: var( --newspack-ui-color-button-bg-hover ); - } - } - - &--secondary { - background: transparent; - border: 1px solid var( --newspack-ui-color-border ); - color: var( --newspack-ui-color-text-high-contrast ); - padding: calc( var( --newspack-ui-spacer-2 ) - 1px ) - calc( var( --newspack-ui-spacer-3 ) - 1px ); - - &:hover { - background: var( --newspack-ui-color-gray-100 ); - } - } - - &--tertiary { - background: transparent; - color: var( --newspack-ui-color-text-high-contrast ); - - &:hover { - background: var( --newspack-ui-color-gray-100 ); - } - } - } -} - diff --git a/src/shared/sass/variables/_colors.scss b/src/shared/sass/variables/_colors.scss deleted file mode 100644 index f9588a4cb..000000000 --- a/src/shared/sass/variables/_colors.scss +++ /dev/null @@ -1,34 +0,0 @@ -:root { - // Grays - notes from the Gutenberg styles. - // TODO: Import from 'wordpress/base-styles/colors' ? - --newspack-ui-color-black: #000; // Use only when you truly need pure black. For UI, use $gray-900. - --newspack-ui-color-gray-900: #1e1e1e; - --newspack-ui-color-gray-800: #2f2f2f; - --newspack-ui-color-gray-700: #757575; // Meets 4.6:1 text contrast against white. - --newspack-ui-color-gray-600: #949494; // Meets 3:1 UI or large text contrast against white. - --newspack-ui-color-gray-400: #ccc; - --newspack-ui-color-gray-300: #ddd; // Used for most borders. - --newspack-ui-color-gray-200: #e0e0e0; // Used sparingly for light borders. - --newspack-ui-color-gray-100: #f0f0f0; // Used for light gray backgrounds. - --newspack-ui-color-white: #fff; - - // Alert colors - --newpsack-ui-color-alert-yellow: #f0b849; - --newspack-ui-color-alert-green: #4ab866; - --newspack-ui-color-alert-red: #cc1818; - // --newpsack-ui-color-alert-yellow-bg: TBD - --newspack-ui-color-alert-green-bg: #edfaef; - --newpsack-ui-color-alert-red-bg: #fcf0f1; - - // Specific assignments - general: - --newspack-ui-color-text-high-contrast: var( --newspack-ui-color-gray-900 ); - --newspack-ui-color-text-med-contrast: var( --newspack-ui-color-gray-700 ); - --newspack-ui-color-border: var( --newspack-ui-color-gray-300 ); - --newspack-ui-color-body-bg: var( --newspack-ui-color-white ); - - // Specific assignments - form elements - --newspack-ui-color-button-bg: var( --newspack-ui-color-gray-900 ); - --newspack-ui-color-button-bg-hover: var( --newspack-ui-color-gray-800 ); // TODO: Replace w/correct value. - --newspack-ui-color-button-text: var( --newspack-ui-color-white ); - --newspack-ui-color-radio-bg: var( --newspack-ui-color-gray-900 ); -} diff --git a/src/shared/sass/variables/_fonts.scss b/src/shared/sass/variables/_fonts.scss deleted file mode 100644 index 910d29de3..000000000 --- a/src/shared/sass/variables/_fonts.scss +++ /dev/null @@ -1,18 +0,0 @@ -:root { - // Fonts - --newspack-ui-font-family: system-ui, sans-serif; - - // TODO: the base size for the modals is 16px, with small text/labels at 14px; - // The My Account designs appear to use 16px for most labels - // Should we have a in-modal vs. non-modal set of font sizes? - --newspack-ui-font-size-large: 20px; - --newspack-ui-font-size-medium: 16px; // modal baseline - --newspack-ui-font-size-small: 14px; // modal small - --newspack-ui-font-weight-strong: 600; - - // Line heights - TODO: sort this out: - --newspack-ui-line-height-large: 1.7143; // inputs, buttons - --newspack-ui-line-height-medium: 1.5; // 16px font size - --newspack-ui-line-height-small: 1.4286; // 14px font sizes -} - diff --git a/src/shared/sass/variables/_index.scss b/src/shared/sass/variables/_index.scss deleted file mode 100644 index 1b7a8f26c..000000000 --- a/src/shared/sass/variables/_index.scss +++ /dev/null @@ -1,4 +0,0 @@ -@use './colors'; -@use './fonts'; -@use './spacing'; -@use './misc'; diff --git a/src/shared/sass/variables/_misc.scss b/src/shared/sass/variables/_misc.scss deleted file mode 100644 index d4e63b4e8..000000000 --- a/src/shared/sass/variables/_misc.scss +++ /dev/null @@ -1,38 +0,0 @@ -$mobile_width: 600px; -$tablet_width: 782px; -$desktop_width: 1168px; -$wide_width: 1379px; - -$font__size_base: 20px; -$font__size-ratio: 1.125; - -$font__size-xxxs: 1em * 0.5; // 10px -$font__size-xxs: 1em * 0.6; // 12px -$font__size-xs: 1em * 0.7; // 14px -$font__size-sm: 1em * 0.8; // 16px -// $font__size_base: 1em * 1; // 20px -$font__size-md: 1em * 1.2; // 24px -$font__size-lg: 1em * 1.4; // 28px -$font__size-xl: 1em * 1.8; // 36px -$font__size-xxl: 1em * 2.2; // 44px -$font__size-xxxl: 1em * 2.8; // 56px -$font__size-xxxxl: 1em * 3.2; // 64px - -$font__line-height-body: 1.6; -$font__line-height-pre: 1.6; -$font__line-height-heading: 1.2; -$font__line-height-double: 2 * $font__line-height-heading; - -$color__border: #ccc; - -// TODO: Some misc styles that need a home! -:root { - // Modal widths - --newspack-ui-modal-width-large: 964px; - --newspack-ui-modal-width-medium: 600px; - --newspack-ui-modal-width-small: 368px; - - // Border radius - not ems because the font size of the element itself caused a cascade. - --newspack-ui-border-radius: 6px; - --newspack-ui-border-radius-small: 5px; -} diff --git a/src/shared/sass/variables/_spacing.scss b/src/shared/sass/variables/_spacing.scss deleted file mode 100644 index 530dffeca..000000000 --- a/src/shared/sass/variables/_spacing.scss +++ /dev/null @@ -1,13 +0,0 @@ -:root { - // Spacing - not ems because the font size of the element itself caused a cascade - --newspack-ui-spacer-base: 8px; - --newspack-ui-spacer-2: calc( var( --newspack-ui-spacer-base ) * 1.5 ); // 12px - --newspack-ui-spacer-3: calc( var( --newspack-ui-spacer-base ) * 2 ); // 16px - --newspack-ui-spacer-4: calc( var( --newspack-ui-spacer-base ) * 2.5 ); // 20px - --newspack-ui-spacer-5: calc( var( --newspack-ui-spacer-base ) * 3 ); // 24px - --newspack-ui-spacer-6: calc( var( --newspack-ui-spacer-base ) * 4 ); // 32px - TODO: clamp? - --newspack-ui-spacer-7: calc( var( --newspack-ui-spacer-base ) * 5 ); // 40px - TODO: clamp? - --newspack-ui-spacer-8: calc( var( --newspack-ui-spacer-base ) * 6 ); // 48px - TODO: clamp? - --newspack-ui-spacer-9: calc( var( --newspack-ui-spacer-base ) * 8 ); // 64px - TODO: clamp? -} - From 7adeceea90944b0cf9d5a9911e3cb41bba59c094 Mon Sep 17 00:00:00 2001 From: Rasmy Nguyen Date: Tue, 23 Jan 2024 19:01:30 -0500 Subject: [PATCH 03/13] feat(modal-checkout): update thankyou form classes --- includes/class-modal-checkout.php | 36 +++++++------ src/modal-checkout/modal.js | 4 +- src/modal-checkout/templates/thankyou-v2.php | 53 +++++++++----------- 3 files changed, 44 insertions(+), 49 deletions(-) diff --git a/includes/class-modal-checkout.php b/includes/class-modal-checkout.php index d2f92ab18..75a628d2e 100644 --- a/includes/class-modal-checkout.php +++ b/includes/class-modal-checkout.php @@ -290,23 +290,21 @@ public static function render_modal_markup() { */ $title = apply_filters( 'newspack_blocks_modal_checkout_title', __( 'Complete your transaction', 'newspack-blocks' ) ); ?> -
-
-
-

- - - - -
-
- -
-
+
+
+

+ + + + +
+
+ +
diff --git a/src/modal-checkout/modal.js b/src/modal-checkout/modal.js index 85852a611..0510e4eab 100644 --- a/src/modal-checkout/modal.js +++ b/src/modal-checkout/modal.js @@ -44,13 +44,13 @@ function closeCheckout() { window.newspackCloseModalCheckout = closeCheckout; -const MODAL_CLASSNAME_BASE = '.newspack-blocks-modal'; +const MODAL_CLASSNAME_BASE = '.newspack-ui__modal'; domReady( () => { /** * Initialize modal checkout. */ - const modalCheckout = document.querySelector( '.newspack-blocks-checkout-modal' ); + const modalCheckout = document.querySelector( '#newspack-blocks-checkout-modal' ); if ( ! modalCheckout ) { return; } diff --git a/src/modal-checkout/templates/thankyou-v2.php b/src/modal-checkout/templates/thankyou-v2.php index 224cee749..af69c3d60 100644 --- a/src/modal-checkout/templates/thankyou-v2.php +++ b/src/modal-checkout/templates/thankyou-v2.php @@ -50,35 +50,32 @@ function newspack_blocks_replace_login_with_order_summary() { $is_success = ! $order->has_status( 'failed' ); ?> -
- -
-

- - - -

- -
- -
-

- -

- - - - - -
+ +
+

+ + + +

+
+ + +
+

+ +

+
+ + + -
- Date: Wed, 24 Jan 2024 10:52:06 -0500 Subject: [PATCH 04/13] feat(modal-checkout): fix visibility toggling --- includes/class-modal-checkout.php | 4 +- src/modal-checkout/modal.js | 9 ++- src/modal-checkout/modal.scss | 100 +++++------------------------- 3 files changed, 23 insertions(+), 90 deletions(-) diff --git a/includes/class-modal-checkout.php b/includes/class-modal-checkout.php index 75a628d2e..629df46c3 100644 --- a/includes/class-modal-checkout.php +++ b/includes/class-modal-checkout.php @@ -293,12 +293,12 @@ public static function render_modal_markup() {

- +