Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add legends and secure checkout SVG to checkout #6002

Merged
merged 3 commits into from
May 15, 2024

Conversation

jamesgorrie
Copy link
Contributor

@jamesgorrie jamesgorrie commented May 14, 2024

Part of #5722

  • Uses and displays legends for Contribution checkout
  • Adds Secure checkout SVG to payment details fieldset

I know that the 1., 2., n. won't work when we have delivery fields, I will reach out to Helene and see if there is a generic design solution to this.

Worth avoiding whitedspace check in the diff.

before after
Screenshot 2024-05-14 at 15 44 26 Screenshot 2024-05-14 at 15 44 11

Copy link
Contributor

github-actions bot commented May 14, 2024

Size Change: +13 B (0%)

Total Size: 1.98 MB

ℹ️ View Unchanged
Filename Size Change
./public/compiled-assets/javascripts/[countryGroupId]/router.js 186 kB +13 B (+0.01%)
./public/compiled-assets/javascripts/ausMomentMap.js 107 kB 0 B
./public/compiled-assets/javascripts/contributionsRedirectStyles.js 20 B 0 B
./public/compiled-assets/javascripts/digitalSubscriptionLandingPage.js 217 kB 0 B
./public/compiled-assets/javascripts/downForMaintenancePage.js 68.1 kB 0 B
./public/compiled-assets/javascripts/error404Page.js 68 kB 0 B
./public/compiled-assets/javascripts/error500Page.js 68 kB 0 B
./public/compiled-assets/javascripts/favicons.js 616 B 0 B
./public/compiled-assets/javascripts/paperSubscriptionCheckoutPage.js 168 kB 0 B
./public/compiled-assets/javascripts/paperSubscriptionLandingPage.js 84.8 kB 0 B
./public/compiled-assets/javascripts/payPalErrorPage.js 66.6 kB 0 B
./public/compiled-assets/javascripts/payPalErrorPageStyles.js 20 B 0 B
./public/compiled-assets/javascripts/promotionTerms.js 71.3 kB 0 B
./public/compiled-assets/javascripts/subscriptionsLandingPage.js 70.4 kB 0 B
./public/compiled-assets/javascripts/subscriptionsRedemptionPage.js 124 kB 0 B
./public/compiled-assets/javascripts/supporterPlusLandingPage.js 285 kB 0 B
./public/compiled-assets/javascripts/unsupportedBrowserStyles.js 20 B 0 B
./public/compiled-assets/javascripts/weeklySubscriptionCheckoutPage.js 189 kB 0 B
./public/compiled-assets/javascripts/weeklySubscriptionLandingPage.js 85.1 kB 0 B
./public/compiled-assets/webpack/385.js 81.8 kB 0 B
./public/compiled-assets/webpack/735.js 2 kB 0 B
./public/compiled-assets/webpack/775.js 18 kB 0 B
./public/compiled-assets/webpack/864.js 18.3 kB 0 B
./public/compiled-assets/webpack/991.js 2.16 kB 0 B

compressed-size-action

@@ -695,8 +696,8 @@ function CheckoutComponent({ geoId }: Props) {
>
<Box cssOverrides={shorterBoxMargin}>
<BoxContents>
<div css={personalDetailsFieldGroupStyles(true)}>
<h2 css={personalDetailsHeader}>Your details</h2>
<fieldset css={fieldset}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As this css is related to a single fieldset and not all, would its be worth giving it a longer name like fieldsetPersonalDetails?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've added this to payment fields too - but I am not sure we should as the CSS is using first-of-type, so I might try a refactor post-merge (so we can start demoing this).

Copy link
Contributor

@paul-daniel-dempsey paul-daniel-dempsey left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice use of <fieldset> to group related items in a box and <legend> to apply caption. Much improvement on <div>, will have to remember to use these more approriate tags

@jamesgorrie
Copy link
Contributor Author

will have to remember to use these more approriate tags

@paul-daniel-dempsey it's because forms drive so much interactivity on the web. Always work looking at MDN for reference!

@jamesgorrie jamesgorrie merged commit 8261242 into main May 15, 2024
15 checks passed
@jamesgorrie jamesgorrie deleted the generic-checkout-design branch May 15, 2024 07:25
@prout-bot
Copy link

Seen on PROD (merged by @jamesgorrie 10 minutes and 51 seconds ago)

Sentry Release: support-client-side, support

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants