diff --git a/client/__tests__/__snapshots__/main.test.tsx.snap b/client/__tests__/__snapshots__/main.test.tsx.snap
index 932bb9dc7..9e6418990 100644
--- a/client/__tests__/__snapshots__/main.test.tsx.snap
+++ b/client/__tests__/__snapshots__/main.test.tsx.snap
@@ -310,10 +310,12 @@ exports[`Main renders something 1`] = `
-webkit-text-decoration: none;
text-decoration: none;
white-space: nowrap;
- font-family: GuardianTextSans,Guardian Text Sans Web,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
+ vertical-align: middle;
+ font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-size: 1.0625rem;
line-height: 1.3;
font-weight: 700;
+ font-style: normal;
--source-text-decoration-thickness: 2px;
height: 36px;
min-height: 36px;
@@ -413,15 +415,17 @@ html:not(.src-focus-disabled) .emotion-60:focus {
align-items: center;
height: 44px;
padding-left: 8px;
- font-family: GuardianTextSans,Guardian Text Sans Web,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
+ font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-size: 0.9375rem;
line-height: 1.3;
font-weight: 700;
+ font-style: normal;
--source-text-decoration-thickness: 2px;
color: #FFFFFF;
background-color: #052962;
-webkit-text-decoration: none;
text-decoration: none;
+ white-space: nowrap;
}
.emotion-63 :hover {
diff --git a/client/__tests__/components/helpCentre/__snapshots__/helpCentreContactOptions.test.tsx.snap b/client/__tests__/components/helpCentre/__snapshots__/helpCentreContactOptions.test.tsx.snap
index 381cfe6c9..9af0d6735 100644
--- a/client/__tests__/components/helpCentre/__snapshots__/helpCentreContactOptions.test.tsx.snap
+++ b/client/__tests__/components/helpCentre/__snapshots__/helpCentreContactOptions.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`HelpCentreContactOptions Help Centre landing page Help Centre article (
.emotion-0 {
border-top: 1px solid #DCDCDC;
margin-top: 30px;
- font-family: GH Guardian Headline,Guardian Egyptian Web,Georgia,serif;
+ font-family: "GH Guardian Headline","Guardian Egyptian Web",Georgia,serif;
font-size: 1.75rem;
line-height: 1.15;
font-weight: 700;
@@ -44,7 +44,7 @@ exports[`HelpCentreContactOptions Help Centre landing page Help Centre article (
}
.emotion-2 {
- font-family: GuardianTextSans,Guardian Text Sans Web,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
+ font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-size: 1.0625rem;
line-height: 1.3;
font-weight: 400;
@@ -106,7 +106,7 @@ exports[`HelpCentreContactOptions Help Centre landing page Help Centre article (
}
.emotion-5 {
- font-family: GuardianTextSans,Guardian Text Sans Web,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
+ font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-size: 1.0625rem;
line-height: 1.3;
font-weight: 400;
@@ -115,7 +115,7 @@ exports[`HelpCentreContactOptions Help Centre landing page Help Centre article (
}
.emotion-6 {
- font-family: GuardianTextSans,Guardian Text Sans Web,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
+ font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-size: 1.0625rem;
line-height: 1.3;
font-weight: 700;
@@ -124,7 +124,7 @@ exports[`HelpCentreContactOptions Help Centre landing page Help Centre article (
}
.emotion-7 {
- font-family: GuardianTextSans,Guardian Text Sans Web,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
+ font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-size: 1.0625rem;
line-height: 1.3;
font-weight: 400;
@@ -133,7 +133,7 @@ exports[`HelpCentreContactOptions Help Centre landing page Help Centre article (
}
.emotion-8 {
- font-family: GuardianTextSans,Guardian Text Sans Web,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
+ font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-size: 1.0625rem;
line-height: 1.3;
font-weight: 400;
@@ -156,7 +156,7 @@ exports[`HelpCentreContactOptions Help Centre landing page Help Centre article (
}
.emotion-12 {
- font-family: GuardianTextSans,Guardian Text Sans Web,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
+ font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-size: 1.0625rem;
line-height: 1.3;
font-weight: 400;
@@ -402,7 +402,7 @@ exports[`HelpCentreContactOptions Help Centre landing page with live chat featur
.emotion-0 {
border-top: 1px solid #DCDCDC;
margin-top: 30px;
- font-family: GH Guardian Headline,Guardian Egyptian Web,Georgia,serif;
+ font-family: "GH Guardian Headline","Guardian Egyptian Web",Georgia,serif;
font-size: 1.75rem;
line-height: 1.15;
font-weight: 700;
@@ -441,7 +441,7 @@ exports[`HelpCentreContactOptions Help Centre landing page with live chat featur
}
.emotion-2 {
- font-family: GuardianTextSans,Guardian Text Sans Web,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
+ font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-size: 1.0625rem;
line-height: 1.3;
font-weight: 400;
@@ -503,7 +503,7 @@ exports[`HelpCentreContactOptions Help Centre landing page with live chat featur
}
.emotion-5 {
- font-family: GuardianTextSans,Guardian Text Sans Web,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
+ font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-size: 1.0625rem;
line-height: 1.3;
font-weight: 400;
@@ -512,7 +512,7 @@ exports[`HelpCentreContactOptions Help Centre landing page with live chat featur
}
.emotion-6 {
- font-family: GuardianTextSans,Guardian Text Sans Web,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
+ font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-size: 1.0625rem;
line-height: 1.3;
font-weight: 700;
@@ -521,7 +521,7 @@ exports[`HelpCentreContactOptions Help Centre landing page with live chat featur
}
.emotion-7 {
- font-family: GuardianTextSans,Guardian Text Sans Web,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
+ font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-size: 1.0625rem;
line-height: 1.3;
font-weight: 400;
@@ -530,7 +530,7 @@ exports[`HelpCentreContactOptions Help Centre landing page with live chat featur
}
.emotion-8 {
- font-family: GuardianTextSans,Guardian Text Sans Web,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
+ font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-size: 1.0625rem;
line-height: 1.3;
font-weight: 400;
@@ -553,7 +553,7 @@ exports[`HelpCentreContactOptions Help Centre landing page with live chat featur
}
.emotion-12 {
- font-family: GuardianTextSans,Guardian Text Sans Web,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
+ font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-size: 1.0625rem;
line-height: 1.3;
font-weight: 400;
@@ -799,7 +799,7 @@ exports[`HelpCentreContactOptions Help Centre landing page with live chat featur
.emotion-0 {
border-top: 1px solid #DCDCDC;
margin-top: 30px;
- font-family: GH Guardian Headline,Guardian Egyptian Web,Georgia,serif;
+ font-family: "GH Guardian Headline","Guardian Egyptian Web",Georgia,serif;
font-size: 1.75rem;
line-height: 1.15;
font-weight: 700;
@@ -820,7 +820,7 @@ exports[`HelpCentreContactOptions Help Centre landing page with live chat featur
Still can’t find what you’re looking for?
,
.emotion-0 {
- font-family: GuardianTextSans,Guardian Text Sans Web,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
+ font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-size: 1.0625rem;
line-height: 1.3;
font-weight: 400;
@@ -852,7 +852,7 @@ exports[`HelpCentreContactOptions Help Centre landing page with live chat featur
}
.emotion-0 a {
- font-family: GuardianTextSans,Guardian Text Sans Web,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
+ font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-size: 0.9375rem;
line-height: 1.3;
font-weight: 400;
@@ -896,7 +896,7 @@ exports[`HelpCentreContactOptions Help Centre landing page with live chat featur
-ms-flex-direction: column;
flex-direction: column;
border: 1px solid #DCDCDC;
- font-family: GuardianTextSans,Guardian Text Sans Web,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
+ font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-size: 1.0625rem;
line-height: 1.3;
font-weight: 400;
@@ -910,7 +910,7 @@ exports[`HelpCentreContactOptions Help Centre landing page with live chat featur
}
.emotion-3 {
- font-family: GuardianTextSans,Guardian Text Sans Web,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
+ font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-size: 1.25rem;
line-height: 1.3;
font-weight: 700;
@@ -1006,10 +1006,12 @@ exports[`HelpCentreContactOptions Help Centre landing page with live chat featur
-webkit-text-decoration: none;
text-decoration: none;
white-space: nowrap;
- font-family: GuardianTextSans,Guardian Text Sans Web,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
+ vertical-align: middle;
+ font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-size: 1.0625rem;
line-height: 1.3;
font-weight: 700;
+ font-style: normal;
--source-text-decoration-thickness: 2px;
height: 44px;
min-height: 44px;
@@ -1076,7 +1078,7 @@ html:not(.src-focus-disabled) .emotion-7:focus {
}
.emotion-15 {
- font-family: GuardianTextSans,Guardian Text Sans Web,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
+ font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-size: 1.25rem;
line-height: 1.3;
font-weight: 700;
@@ -1108,7 +1110,7 @@ html:not(.src-focus-disabled) .emotion-7:focus {
.emotion-17 {
display: none;
- font-family: GuardianTextSans,Guardian Text Sans Web,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
+ font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-size: 1.0625rem;
line-height: 1.3;
font-weight: 400;
@@ -1142,7 +1144,7 @@ html:not(.src-focus-disabled) .emotion-7:focus {
}
.emotion-20 {
- font-family: GuardianTextSans,Guardian Text Sans Web,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
+ font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-size: 1.0625rem;
line-height: 1.3;
font-weight: 400;
@@ -1204,7 +1206,7 @@ html:not(.src-focus-disabled) .emotion-7:focus {
}
.emotion-23 {
- font-family: GuardianTextSans,Guardian Text Sans Web,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
+ font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-size: 1.0625rem;
line-height: 1.3;
font-weight: 400;
@@ -1227,7 +1229,7 @@ html:not(.src-focus-disabled) .emotion-7:focus {
}
.emotion-27 {
- font-family: GuardianTextSans,Guardian Text Sans Web,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
+ font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-size: 1.0625rem;
line-height: 1.3;
font-weight: 400;
@@ -1291,7 +1293,7 @@ html:not(.src-focus-disabled) .emotion-7:focus {
.emotion-46 {
margin: 0;
- font-family: GuardianTextSans,Guardian Text Sans Web,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
+ font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-size: 0.9375rem;
line-height: 1.3;
font-weight: 700;
@@ -1299,7 +1301,7 @@ html:not(.src-focus-disabled) .emotion-7:focus {
}
.emotion-47 {
- font-family: GuardianTextSans,Guardian Text Sans Web,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
+ font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-size: 0.9375rem;
line-height: 1.3;
font-weight: 400;
diff --git a/client/components/mma/accountoverview/ProductCard.tsx b/client/components/mma/accountoverview/ProductCard.tsx
index 6986cbfe7..20ee62796 100644
--- a/client/components/mma/accountoverview/ProductCard.tsx
+++ b/client/components/mma/accountoverview/ProductCard.tsx
@@ -1,10 +1,10 @@
-import { css, ThemeProvider } from '@emotion/react';
+import { css } from '@emotion/react';
import { palette, textSans } from '@guardian/source-foundations';
import {
Button,
- buttonThemeReaderRevenueBrand,
Stack,
SvgInfoRound,
+ themeButtonReaderRevenueBrand,
} from '@guardian/source-react-components';
import { InfoSummary } from '@guardian/source-react-components-development-kitchen';
import { useNavigate } from 'react-router';
@@ -352,27 +352,23 @@ export const ProductCard = ({
)}
{showSwitchButton && (
-
+ navigate(`/switch`, {
+ state: {
+ productDetail: productDetail,
+ user: user,
+ },
+ })
+ }
>
-
-
+ Change to all-access digital
+
)}
@@ -385,7 +381,7 @@ export const ProductCard = ({
- - {atob('TFBQRlJFRTZHTFRY')}
+ - {window.atob('TFBQRlJFRTZHTFRY')}
-
gives you 6 free tickets each year (1
per event)
@@ -394,7 +390,7 @@ export const ProductCard = ({
- - {atob('TFBQMjAyR0xUWA==')}
+ - {window.atob('TFBQMjAyR0xUWA==')}
-
gives you 20% off an extra 2 tickets per
event
diff --git a/client/components/mma/accountoverview/updateAmount/SupporterPlusUpdateAmountForm.tsx b/client/components/mma/accountoverview/updateAmount/SupporterPlusUpdateAmountForm.tsx
index 0a80087e4..f14c3b565 100644
--- a/client/components/mma/accountoverview/updateAmount/SupporterPlusUpdateAmountForm.tsx
+++ b/client/components/mma/accountoverview/updateAmount/SupporterPlusUpdateAmountForm.tsx
@@ -1,14 +1,14 @@
-import { css, ThemeProvider } from '@emotion/react';
+import { css } from '@emotion/react';
import { palette, space, textSans, until } from '@guardian/source-foundations';
import {
Button,
- buttonThemeReaderRevenueBrand,
ChoiceCard,
ChoiceCardGroup,
InlineError,
Link,
SvgInfoRound,
TextInput,
+ themeButtonReaderRevenueBrand,
} from '@guardian/source-react-components';
import { useEffect, useState } from 'react';
import type { PaidSubscriptionPlan } from '../../../../../shared/productResponse';
@@ -323,17 +323,14 @@ export const SupporterPlusUpdateAmountForm = (
buttonContainerCss,
]}
>
-
-
-
+ Change amount
+
-
-
-
+
{hasDiscountFailed && (
{
)}
-
-
-
+
@@ -194,21 +191,18 @@ export const SaveOptions = () => {
benefits={benefitsConfiguration['contributions']}
/>
-
+ navigate('../switch-offer', {
+ state: { ...routerState },
+ })
+ }
>
-
- navigate('../switch-offer', {
- state: { ...routerState },
- })
- }
- >
- Become a recurring contributor
-
-
+ Become a recurring contributor
+
diff --git a/client/components/mma/paymentUpdate/PaymentDetailUpdateConfirmation.tsx b/client/components/mma/paymentUpdate/PaymentDetailUpdateConfirmation.tsx
index 52dc9deea..6f2c412b6 100644
--- a/client/components/mma/paymentUpdate/PaymentDetailUpdateConfirmation.tsx
+++ b/client/components/mma/paymentUpdate/PaymentDetailUpdateConfirmation.tsx
@@ -1,4 +1,4 @@
-import { css, ThemeProvider } from '@emotion/react';
+import { css } from '@emotion/react';
import {
from,
headline,
@@ -9,8 +9,8 @@ import {
} from '@guardian/source-foundations';
import {
Button,
- buttonThemeReaderRevenueBrand,
LinkButton,
+ themeButtonReaderRevenueBrand,
} from '@guardian/source-react-components';
import { InfoSummary } from '@guardian/source-react-components-development-kitchen';
import { useContext } from 'react';
@@ -388,14 +388,13 @@ export const PaymentMethodUpdated = ({
You are helping to support independent journalism.
{isFromApp ? (
-
-
- Return to the app
-
-
+
+ Return to the app
+
) : (
One last step ...
-
-
- Activate full app access now
-
-
+
+ Activate full app access now
+
If you don’t complete this step, you may be unable to access the
diff --git a/client/components/mma/switch/options/SwitchOptions.tsx b/client/components/mma/switch/options/SwitchOptions.tsx
index 1bba5c567..5649a6ef6 100644
--- a/client/components/mma/switch/options/SwitchOptions.tsx
+++ b/client/components/mma/switch/options/SwitchOptions.tsx
@@ -1,9 +1,9 @@
-import { css, ThemeProvider } from '@emotion/react';
+import { css } from '@emotion/react';
import { palette, space, textSans, until } from '@guardian/source-foundations';
import {
Button,
- buttonThemeReaderRevenueBrand,
Stack,
+ themeButtonReaderRevenueBrand,
} from '@guardian/source-react-components';
import { ErrorSummary } from '@guardian/source-react-components-development-kitchen';
import { useContext, useEffect, useRef, useState } from 'react';
@@ -259,21 +259,20 @@ export const SwitchOptions = () => {
css={[buttonContainerCss, buttonIsStuck && buttonStuckCss]}
ref={buttonContainerRef}
>
-
-
- navigate('review', {
- state: routerState,
- })
- }
- >
- {isAboveThreshold
- ? 'Add extras'
- : `Upgrade to ${mainPlan.currency}${threshold} per ${mainPlan.billingPeriod}`}
-
-
+
+ navigate('review', {
+ state: routerState,
+ })
+ }
+ >
+ {isAboveThreshold
+ ? 'Add extras'
+ : `Upgrade to ${mainPlan.currency}${threshold} per ${mainPlan.billingPeriod}`}
+
diff --git a/client/components/mma/switch/review/SwitchReview.tsx b/client/components/mma/switch/review/SwitchReview.tsx
index 6030a212e..eec2ddf4e 100644
--- a/client/components/mma/switch/review/SwitchReview.tsx
+++ b/client/components/mma/switch/review/SwitchReview.tsx
@@ -1,11 +1,11 @@
-import { css, ThemeProvider } from '@emotion/react';
+import { css } from '@emotion/react';
import { from, palette, space, textSans } from '@guardian/source-foundations';
import {
Button,
- buttonThemeReaderRevenueBrand,
Stack,
SvgClock,
SvgCreditCard,
+ themeButtonReaderRevenueBrand,
} from '@guardian/source-react-components';
import { useContext, useState } from 'react';
import { Navigate, useLocation, useNavigate } from 'react-router';
@@ -296,20 +296,19 @@ export const SwitchReview = () => {
-
-
- confirmSwitch(
- previewResponse.amountPayableToday,
- previewResponse.checkChargeAmountBeforeUpdate,
- )
- }
- >
- Confirm {isAboveThreshold ? 'change' : 'upgrade'}
-
-
+
+ confirmSwitch(
+ previewResponse.amountPayableToday,
+ previewResponse.checkChargeAmountBeforeUpdate,
+ )
+ }
+ >
+ Confirm {isAboveThreshold ? 'change' : 'upgrade'}
+
)}
-
-
- Confirm {increaseText} to {currencySymbol}
- {formatAmount(chosenAmount)}/{mainPlan.billingPeriod}
-
-
+
+ Confirm {increaseText} to {currencySymbol}
+ {formatAmount(chosenAmount)}/{mainPlan.billingPeriod}
+
{confirmationError && (
diff --git a/client/components/mma/upgrade/UpgradeSupportAmountForm.tsx b/client/components/mma/upgrade/UpgradeSupportAmountForm.tsx
index f735e124f..8a9466614 100644
--- a/client/components/mma/upgrade/UpgradeSupportAmountForm.tsx
+++ b/client/components/mma/upgrade/UpgradeSupportAmountForm.tsx
@@ -1,12 +1,12 @@
-import { css, ThemeProvider } from '@emotion/react';
+import { css } from '@emotion/react';
import { space } from '@guardian/source-foundations';
import {
Button,
- buttonThemeReaderRevenueBrand,
ChoiceCard,
ChoiceCardGroup,
Stack,
TextInput,
+ themeButtonReaderRevenueBrand,
} from '@guardian/source-react-components';
import type { Dispatch, SetStateAction } from 'react';
import { useContext, useEffect, useState } from 'react';
@@ -235,21 +235,18 @@ export const UpgradeSupportAmountForm = ({
!errorMessage &&
!!chosenAmount && (
- {
+ setContinuedToConfirmation(true);
+ scrollToConfirmChange();
+ }}
>
- {
- setContinuedToConfirmation(true);
- scrollToConfirmChange();
- }}
- >
- Continue with {currencySymbol}
- {formatAmount(chosenAmount)}/
- {mainPlan.billingPeriod}
-
-
+ Continue with {currencySymbol}
+ {formatAmount(chosenAmount)}/
+ {mainPlan.billingPeriod}
+
)}
diff --git a/client/components/shared/SupportTheGuardianButton.tsx b/client/components/shared/SupportTheGuardianButton.tsx
index 6a9d42b3a..5935fbb13 100644
--- a/client/components/shared/SupportTheGuardianButton.tsx
+++ b/client/components/shared/SupportTheGuardianButton.tsx
@@ -1,11 +1,10 @@
import url from 'url';
-import { ThemeProvider } from '@emotion/react';
import {
- buttonThemeDefault,
- buttonThemeReaderRevenueBrand,
- buttonThemeReaderRevenueBrandAlt,
LinkButton,
SvgArrowRightStraight,
+ themeButton,
+ themeButtonReaderRevenueBrand,
+ themeButtonReaderRevenueBrandAlt,
} from '@guardian/source-react-components';
import { conf } from '../../../server/config';
import { trackEvent } from '../../utilities/analytics';
@@ -56,31 +55,30 @@ export const SupportTheGuardianButton = (
props: SupportTheGuardianButtonProps,
) => {
const mapThemes = {
- default: buttonThemeDefault,
- brand: buttonThemeReaderRevenueBrand,
- brandAlt: buttonThemeReaderRevenueBrandAlt,
+ default: themeButton,
+ brand: themeButtonReaderRevenueBrand,
+ brandAlt: themeButtonReaderRevenueBrandAlt,
};
const theme = mapThemes[props.theme ?? 'default'];
return (
-
- }
- iconSide="right"
- nudgeIcon={true}
- size={props.size}
- onClick={() => {
- trackEvent({
- eventCategory: 'href',
- eventAction: 'support_the_guardian',
- eventLabel: 'support_from_' + props.supportReferer,
- });
- }}
- >
- {props.alternateButtonText || 'Support the Guardian'}
-
-
+ }
+ iconSide="right"
+ nudgeIcon={true}
+ size={props.size}
+ onClick={() => {
+ trackEvent({
+ eventCategory: 'href',
+ eventAction: 'support_the_guardian',
+ eventLabel: 'support_from_' + props.supportReferer,
+ });
+ }}
+ >
+ {props.alternateButtonText || 'Support the Guardian'}
+
);
};
diff --git a/package.json b/package.json
index ee4575f87..bc7875bc9 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
"@emotion/jest": "11.9.1",
"@guardian/eslint-config-typescript": "9.0.2",
"@guardian/eslint-plugin-source-foundations": "17.0.1",
- "@guardian/eslint-plugin-source-react-components": "21.0.1",
+ "@guardian/eslint-plugin-source-react-components": "24.0.1",
"@guardian/node-riffraff-artifact": "0.2.2",
"@guardian/prettier": "1.0.0",
"@guardian/tsconfig": "0.1.6",
@@ -149,9 +149,9 @@
"@guardian/ab-react": "2.0.1",
"@guardian/commercial": "17.9.0",
"@guardian/libs": "16.1.0",
- "@guardian/source-foundations": "13.2.0",
- "@guardian/source-react-components": "16.0.1",
- "@guardian/source-react-components-development-kitchen": "14.0.2",
+ "@guardian/source-foundations": "16.0.0",
+ "@guardian/source-react-components": "25.0.0",
+ "@guardian/source-react-components-development-kitchen": "21.0.0",
"@okta/jwt-verifier": "3.0.1",
"@sentry/browser": "5.22.3",
"@sentry/node": "5.22.3",
diff --git a/yarn.lock b/yarn.lock
index 3e897c719..d331836e5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2978,13 +2978,13 @@
"@typescript-eslint/parser" "6.18.0"
eslint-plugin-import "2.29.1"
-"@guardian/eslint-plugin-source-react-components@21.0.1":
- version "21.0.1"
- resolved "https://registry.yarnpkg.com/@guardian/eslint-plugin-source-react-components/-/eslint-plugin-source-react-components-21.0.1.tgz#d709a9a559e3b68aae0a8de67414266316707840"
- integrity sha512-erMqLMhgGbzJAjViZMNtE8DjrpJuRurreBBeuttbaxrIE3eKX2p3QTYJKxE0fqAyIRhTCV3/M+sil9RTifN1Xw==
+"@guardian/eslint-plugin-source-react-components@24.0.1":
+ version "24.0.1"
+ resolved "https://registry.yarnpkg.com/@guardian/eslint-plugin-source-react-components/-/eslint-plugin-source-react-components-24.0.1.tgz#e70ce2b8e249bb6790d10be2e3c91223a6c802d1"
+ integrity sha512-2opgruOKoCp1tAW2vdhl+UpHq2osoN4DAQqrtNsWUCqXtdqAxsXLM9jWqwUzTY68EjFoqg3whxJrbFYWByILCQ==
dependencies:
- "@typescript-eslint/eslint-plugin" "6.18.0"
- "@typescript-eslint/parser" "6.18.0"
+ "@typescript-eslint/eslint-plugin" "6.21.0"
+ "@typescript-eslint/parser" "6.21.0"
"@guardian/libs@16.1.0":
version "16.1.0"
@@ -3043,22 +3043,22 @@
resolved "https://registry.yarnpkg.com/@guardian/prettier/-/prettier-1.0.0.tgz#a5dd832e2ce31c6f723f0af77fe116b32b4695ff"
integrity sha512-srnhPn3hcSv14mDotFQN0CfN3k8MaGsXdK8BXAG95QQxM69Ybi16o4/Xqe361fwDEp7m+9jf03sETcMi8WsDlA==
-"@guardian/source-foundations@13.2.0":
- version "13.2.0"
- resolved "https://registry.yarnpkg.com/@guardian/source-foundations/-/source-foundations-13.2.0.tgz#ef2da59a089f83606b9afd333d5f02c77cd882b5"
- integrity sha512-HKgpuzk00+JiqLB2cMln5gJXvu1lQ2OcfqX8s7w0kPdnC3cSBw/emziM3bx4ib3GXs5CMjQb6g3rhGy/DCjLKg==
+"@guardian/source-foundations@16.0.0":
+ version "16.0.0"
+ resolved "https://registry.yarnpkg.com/@guardian/source-foundations/-/source-foundations-16.0.0.tgz#dd4821dffa8aabcfb21d3fc76b0f416bf67aa577"
+ integrity sha512-bdRcJTEJ6tGmibGRwhQcY70NMACHCcsnNsiWRwW1fSPpvcAuR4xvXmn3UlaL1U/RO4Yk1YvJjPiV/n9WHnjbjQ==
dependencies:
mini-svg-data-uri "1.4.4"
-"@guardian/source-react-components-development-kitchen@14.0.2":
- version "14.0.2"
- resolved "https://registry.yarnpkg.com/@guardian/source-react-components-development-kitchen/-/source-react-components-development-kitchen-14.0.2.tgz#c8bab2cf21717b5c857dad075bca8a12112c0b13"
- integrity sha512-F5nDwRuekC9ZUSEy+FdXMnke/q/rYi4Mple2t1rv6d61oHsOnnGxReQtfPYyVnYv5zGYo8phlOtLGstSQg3DRQ==
+"@guardian/source-react-components-development-kitchen@21.0.0":
+ version "21.0.0"
+ resolved "https://registry.yarnpkg.com/@guardian/source-react-components-development-kitchen/-/source-react-components-development-kitchen-21.0.0.tgz#8f428c9506289fd8e26dd6381f9f82158547f8f4"
+ integrity sha512-rhh9wv9PsNqkOJGWWc7iqoGvhvPPYaKDA3TF6xIpV6KVQAuESIkBmL7NrbEyBO2btStJ6UMTtGd0kpCZPrRr5Q==
-"@guardian/source-react-components@16.0.1":
- version "16.0.1"
- resolved "https://registry.yarnpkg.com/@guardian/source-react-components/-/source-react-components-16.0.1.tgz#24d4c4081e6a293a101b3217b598fccf151b04bd"
- integrity sha512-M/zrs+G5NqykicECNf803B9815tVkPfazwmYsGfrDdKGptBmLhcofGlpC/MGdKiJ9lTlOQBieUyZ2y6i2mBJyQ==
+"@guardian/source-react-components@25.0.0":
+ version "25.0.0"
+ resolved "https://registry.yarnpkg.com/@guardian/source-react-components/-/source-react-components-25.0.0.tgz#c4c8ac53b92a7ed4ebde6823c8f7d80151f8375a"
+ integrity sha512-9llnT6DUiLmdhklciMO75SBC9DbBqLw+jBWxhu60J+uAyw7B2WqG9Bmk8wPBCSrRe4hNvsosJyVMI+KiRb48Bw==
"@guardian/tsconfig@0.1.6":
version "0.1.6"
@@ -5575,6 +5575,23 @@
semver "^7.5.4"
ts-api-utils "^1.0.1"
+"@typescript-eslint/eslint-plugin@6.21.0":
+ version "6.21.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz#30830c1ca81fd5f3c2714e524c4303e0194f9cd3"
+ integrity sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==
+ dependencies:
+ "@eslint-community/regexpp" "^4.5.1"
+ "@typescript-eslint/scope-manager" "6.21.0"
+ "@typescript-eslint/type-utils" "6.21.0"
+ "@typescript-eslint/utils" "6.21.0"
+ "@typescript-eslint/visitor-keys" "6.21.0"
+ debug "^4.3.4"
+ graphemer "^1.4.0"
+ ignore "^5.2.4"
+ natural-compare "^1.4.0"
+ semver "^7.5.4"
+ ts-api-utils "^1.0.1"
+
"@typescript-eslint/parser@6.18.0":
version "6.18.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-6.18.0.tgz#d494161d64832e869f0a6acc6000a2cdff858383"
@@ -5586,6 +5603,17 @@
"@typescript-eslint/visitor-keys" "6.18.0"
debug "^4.3.4"
+"@typescript-eslint/parser@6.21.0":
+ version "6.21.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-6.21.0.tgz#af8fcf66feee2edc86bc5d1cf45e33b0630bf35b"
+ integrity sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==
+ dependencies:
+ "@typescript-eslint/scope-manager" "6.21.0"
+ "@typescript-eslint/types" "6.21.0"
+ "@typescript-eslint/typescript-estree" "6.21.0"
+ "@typescript-eslint/visitor-keys" "6.21.0"
+ debug "^4.3.4"
+
"@typescript-eslint/scope-manager@5.60.0":
version "5.60.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.60.0.tgz#ae511967b4bd84f1d5e179bb2c82857334941c1c"
@@ -5602,6 +5630,14 @@
"@typescript-eslint/types" "6.18.0"
"@typescript-eslint/visitor-keys" "6.18.0"
+"@typescript-eslint/scope-manager@6.21.0":
+ version "6.21.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz#ea8a9bfc8f1504a6ac5d59a6df308d3a0630a2b1"
+ integrity sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==
+ dependencies:
+ "@typescript-eslint/types" "6.21.0"
+ "@typescript-eslint/visitor-keys" "6.21.0"
+
"@typescript-eslint/type-utils@6.18.0":
version "6.18.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-6.18.0.tgz#a492da599da5c38c70aa9ff9bfb473961b8ae663"
@@ -5612,6 +5648,16 @@
debug "^4.3.4"
ts-api-utils "^1.0.1"
+"@typescript-eslint/type-utils@6.21.0":
+ version "6.21.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-6.21.0.tgz#6473281cfed4dacabe8004e8521cee0bd9d4c01e"
+ integrity sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==
+ dependencies:
+ "@typescript-eslint/typescript-estree" "6.21.0"
+ "@typescript-eslint/utils" "6.21.0"
+ debug "^4.3.4"
+ ts-api-utils "^1.0.1"
+
"@typescript-eslint/types@5.60.0":
version "5.60.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.60.0.tgz#3179962b28b4790de70e2344465ec97582ce2558"
@@ -5622,6 +5668,11 @@
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.18.0.tgz#ffce610a1540c17cf7d8ecf2bb34b8b0e2e77101"
integrity sha512-/RFVIccwkwSdW/1zeMx3hADShWbgBxBnV/qSrex6607isYjj05t36P6LyONgqdUrNLl5TYU8NIKdHUYpFvExkA==
+"@typescript-eslint/types@6.21.0":
+ version "6.21.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.21.0.tgz#205724c5123a8fef7ecd195075fa6e85bac3436d"
+ integrity sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==
+
"@typescript-eslint/typescript-estree@5.60.0":
version "5.60.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.60.0.tgz#4ddf1a81d32a850de66642d9b3ad1e3254fb1600"
@@ -5649,6 +5700,20 @@
semver "^7.5.4"
ts-api-utils "^1.0.1"
+"@typescript-eslint/typescript-estree@6.21.0":
+ version "6.21.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz#c47ae7901db3b8bddc3ecd73daff2d0895688c46"
+ integrity sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==
+ dependencies:
+ "@typescript-eslint/types" "6.21.0"
+ "@typescript-eslint/visitor-keys" "6.21.0"
+ debug "^4.3.4"
+ globby "^11.1.0"
+ is-glob "^4.0.3"
+ minimatch "9.0.3"
+ semver "^7.5.4"
+ ts-api-utils "^1.0.1"
+
"@typescript-eslint/utils@6.18.0":
version "6.18.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-6.18.0.tgz#4d07c9c08f84b9939a1aca7aef98c8f378936142"
@@ -5662,6 +5727,19 @@
"@typescript-eslint/typescript-estree" "6.18.0"
semver "^7.5.4"
+"@typescript-eslint/utils@6.21.0":
+ version "6.21.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-6.21.0.tgz#4714e7a6b39e773c1c8e97ec587f520840cd8134"
+ integrity sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==
+ dependencies:
+ "@eslint-community/eslint-utils" "^4.4.0"
+ "@types/json-schema" "^7.0.12"
+ "@types/semver" "^7.5.0"
+ "@typescript-eslint/scope-manager" "6.21.0"
+ "@typescript-eslint/types" "6.21.0"
+ "@typescript-eslint/typescript-estree" "6.21.0"
+ semver "^7.5.4"
+
"@typescript-eslint/utils@^5.10.0":
version "5.60.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.60.0.tgz#4667c5aece82f9d4f24a667602f0f300864b554c"
@@ -5692,6 +5770,14 @@
"@typescript-eslint/types" "6.18.0"
eslint-visitor-keys "^3.4.1"
+"@typescript-eslint/visitor-keys@6.21.0":
+ version "6.21.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz#87a99d077aa507e20e238b11d56cc26ade45fe47"
+ integrity sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==
+ dependencies:
+ "@typescript-eslint/types" "6.21.0"
+ eslint-visitor-keys "^3.4.1"
+
"@webassemblyjs/ast@1.11.1":
version "1.11.1"
resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"