@financial-times/n-conversion-forms 41.3.2 → 42.0.0

package/components/accept-terms.jsx

@@ -53,10 +53,11 @@ export function AcceptTerms({
 
 	const privacyPolicyTerms = (
 		<div className="privacy-policy-terms">
-			<span className={`consent-text--${privacyPoliciesPosition}`}>
+			<span
+				className={`o3-type-body-base consent-text--${privacyPoliciesPosition}`}
+			>
 				For more information about how we use your data, please refer to our{' '}
 				<a
-					className="ncf__link--external"
 					href="https://help.ft.com/legal-privacy/privacy-policy/"
 					target="_blank"
 					rel="noopener noreferrer"
@@ -66,7 +67,6 @@ export function AcceptTerms({
 				</a>{' '}
 				and&nbsp;
 				<a
-					className="ncf__link--external"
 					href="https://help.ft.com/legal-privacy/cookies/"
 					target="_blank"
 					rel="noopener noreferrer"
@@ -79,11 +79,10 @@ export function AcceptTerms({
 			{!hideConfirmTermsAndConditions && (
 				<label className={labelClassName} htmlFor="termsAcceptance">
 					<input {...inputProps} />
-					<span className="o-forms-input__label">
+					<span className="o-forms-input__label o3-type-body-base">
 						I confirm that I am {ageRestriction} years or older and agree to the
 						full{' '}
 						<a
-							className="ncf__link--external"
 							href="http://help.ft.com/help/legal-privacy/terms-conditions/"
 							target={isEmbedded ? '_top' : '_blank'}
 							rel="noopener noreferrer"
@@ -112,11 +111,10 @@ export function AcceptTerms({
 		</li>
 	) : (
 		<li>
-			<span className="terms-default">
+			<span className="terms-default o3-type-body-base">
 				I confirm I am {ageRestriction} years or older and have read and agree
 				to the{' '}
 				<a
-					className="ncf__link--external"
 					href="http://help.ft.com/help/legal-privacy/terms-conditions/"
 					target={isEmbedded ? '_top' : '_blank'}
 					rel="noopener noreferrer"
@@ -168,12 +166,11 @@ export function AcceptTerms({
 		<>
 			{!isSingleTerm && (
 				<li>
-					<span className="terms-transition">
+					<span className="terms-transition o3-type-body-base">
 						I give consent for my chosen payment method to be charged
 						automatically at the end of each subscription term until I cancel it
 						by contacting{' '}
 						<a
-							className="ncf__link--external"
 							href="https://help.ft.com/help/contact-us/"
 							target="_blank"
 							rel="noopener noreferrer"
@@ -210,10 +207,9 @@ export function AcceptTerms({
 				</li>
 			)}
 			<li>
-				<span className="terms-transition">
+				<span className="terms-transition o3-type-body-base">
 					Find out more about our cancellation policy in our{' '}
 					<a
-						className="ncf__link--external"
 						href="http://help.ft.com/help/legal-privacy/terms-conditions/"
 						target="_blank"
 						rel="noopener noreferrer"
@@ -238,10 +234,9 @@ export function AcceptTerms({
 						<span className="terms-print">{printSignupTermText}</span>
 					</li>
 					<li>
-						<span className="terms-print">
+						<span className="terms-print o3-type-body-base">
 							Find out more about your delivery start date in our{' '}
 							<a
-								className="ncf__link--external"
 								href="http://help.ft.com/help/legal-privacy/terms-conditions/"
 								target={isEmbedded ? '_top' : '_blank'}
 								rel="noopener noreferrer"
@@ -255,12 +250,11 @@ export function AcceptTerms({
 			) : (
 				<>
 					<li>
-						<span className="terms-signup">
+						<span className="terms-signup o3-type-body-base">
 							I give consent for my chosen payment method to be charged
 							automatically at the end of each subscription term until I cancel
 							it by contacting{' '}
 							<a
-								className="ncf__link--external"
 								href="https://help.ft.com/help/contact-us/"
 								target={isEmbedded ? '_top' : '_blank'}
 								rel="noopener noreferrer"
@@ -282,10 +276,9 @@ export function AcceptTerms({
 						</span>
 					</li>
 					<li>
-						<span className="terms-signup">
+						<span className="terms-signup o3-type-body-base">
 							Find out more about our cancellation policy in our{' '}
 							<a
-								className="ncf__link--external"
 								href="https://help.ft.com/legal-privacy/terms-and-conditions/"
 								target={isEmbedded ? '_top' : '_blank'}
 								rel="noopener noreferrer"
@@ -312,11 +305,10 @@ export function AcceptTerms({
 	const b2cPartnershipTerms = (
 		<label className={[labelClassName, 'checkbox-two-lines'].join(' ')}>
 			<input {...inputProps} />
-			<span className="o-forms-input__label">
+			<span className="o-forms-input__label o3-type-body-base">
 				I confirm I am {ageRestriction} years or older and have read and agree
 				to the{' '}
 				<a
-					className="ncf__link--external"
 					href="http://help.ft.com/help/legal-privacy/terms-conditions/"
 					target={isEmbedded ? '_top' : '_blank'}
 					rel="noopener noreferrer"
@@ -340,7 +332,7 @@ export function AcceptTerms({
 				privacyPolicyTerms
 			) : (
 				<>
-					<ul className="o-typography-list ncf__accept-terms-list">
+					<ul className="ncf__accept-terms-list">
 						{b2bTerms}
 						{corpSignupTerms}
 						{transitionTerms}

package/components/b2c-partnership-confirmation.jsx

@@ -13,12 +13,10 @@ export function B2CPartnershipConfirmation({
 }) {
 	const readingLinkProps = {
 		href: '/',
-		className: 'ncf__link',
 	};
 
 	const customerCareProps = {
 		href: 'https://help.ft.com/',
-		className: 'ncf__link',
 	};
 
 	// Welcome to your Standard access
@@ -51,18 +49,18 @@ export function B2CPartnershipConfirmation({
 
 			{ctaElement || (
 				<p className="ncf__paragraph ncf__center">
-					<a className="ncf__button ncf__button--submit" href="/myft">
+					<a className="ncf__button o3-button o3-button--primary" href="/myft">
 						Go to myFT
 					</a>
 				</p>
 			)}
 
-			<p className="ncf__paragraph ncf__center">
+			<p className="ncf__paragraph ncf__center o3-type-body-base">
 				<a {...readingLinkProps}>Start reading</a>
 			</p>
 
 			<p className="ncf__paragraph">
-				<div className="ncf__strong">Can we help?</div>
+				<div className="ncf__strong o3-type-body-base">Can we help?</div>
 				For any queries about your Premium subscription please{' '}
 				<a {...customerCareProps}>contact Customer Care</a>.
 			</p>

package/components/confirmation.jsx

@@ -53,7 +53,7 @@ export function Confirmation({
 				>
 					direct debit mandate
 				</a>
-				<i className="ncf__icon-download"></i>
+				<i className="ncf__icon--download"></i>
 			</p>
 		</div>
 	);
@@ -98,10 +98,9 @@ export function Confirmation({
 
 			<div className="ncf__headed-paragraph">
 				<h3 className="ncf__header">Something not right?</h3>
-				<p className="ncf__paragraph">
+				<p className="ncf__paragraph o3-type-body-base">
 					Go to your{' '}
 					<a
-						className="ncf__link ncf__link--external"
 						href="https://www.ft.com/myaccount/personal-details"
 						target="_blank"
 						rel="noopener noreferrer"
@@ -110,19 +109,16 @@ export function Confirmation({
 						account settings
 					</a>{' '}
 					to view or edit your account. If you need to get in touch call us on{' '}
-					<a href="tel:+442077556248" className="ncf__link ncf__link--external">
-						+44 (0) 207 755 6248
-					</a>
-					. Or contact us for additional support.
+					<a href="tel:+442077556248">+44 (0) 207 755 6248</a>. Or contact us
+					for additional support.
 				</p>
 			</div>
-			<p className="ncf__paragraph">
+			<p className="ncf__paragraph o3-type-body-base">
 				{!isTermedSubscriptionTermType
 					? 'We will automatically renew your subscription using the payment method provided unless you cancel before your renewal date. '
 					: ''}
 				{'See our '}
 				<a
-					className="ncf__link ncf__link--external"
 					href="http://help.ft.com/help/legal-privacy/terms-conditions/"
 					target="_top"
 					rel="noopener"

package/components/confirmation.stories.js

@@ -13,7 +13,7 @@ const nextActionTop = (
 	<p className="ncf__center">
 		<a
 			href="/myft/"
-			className="ncf__button ncf__button--submit ncf__button--margin"
+			className="ncf__button o3-button o3-button--primary ncf__button--margin"
 		>
 			An example child: this is the tailor my experience button
 		</a>
@@ -25,15 +25,13 @@ const nextActionBottom = (
 		<div>
 			<a
 				href={'/contentuuid'}
-				className="ncf__button ncf__button--submit ncf__button--margin"
+				className="ncf__button o3-button o3-button--primary ncf__button--margin"
 			>
 				Return to your article
 			</a>
 		</div>
-		<div>
-			<a href="/" className="ncf__link">
-				Explore the FT
-			</a>
+		<div className="o3-type-body-base">
+			<a href="/">Explore the FT</a>
 		</div>
 	</div>
 );

package/components/continue-reading.jsx

@@ -17,7 +17,7 @@ export function ContinueReading({
 	const aTagProps = {
 		href: link,
 		...(isEmbedded && { target: '_top' }),
-		className: 'ncf__button ncf__button--secondary',
+		className: 'ncf__button o3-button o3-button--secondary',
 	};
 
 	const linkElement = link && (

package/components/customer-care.jsx

@@ -30,10 +30,10 @@ export function CustomerCare({
 			<div className="ncf__paragraph">
 				<div className="ncf__icon ncf__icon--phone ncf__icon--large"></div>
 				<p>International Toll Free Number</p>
-				<p className="ncf__customer-care__phone">
+				<p className="ncf__customer-care__phone o3-type-body-base">
 					<a
 						id="customer-care-international-number"
-						className="ncf__header ncf__link"
+						className="ncf__header"
 						href="tel:+80007056477"
 					>
 						+ 800 0705 6477
@@ -41,8 +41,8 @@ export function CustomerCare({
 				</p>
 			</div>
 
-			<div className="ncf__paragraph">
-				<a className="ncf__link" href="https://help.ft.com/help/contact-us/">
+			<div className="ncf__paragraph o3-type-body-base">
+				<a href="https://help.ft.com/help/contact-us/">
 					Find a local phone number
 				</a>
 			</div>

package/components/debug.jsx

@@ -15,23 +15,23 @@ export function Debug({
 	// entirely this component should be rethought.
 	const testEnvironment = `
 		<span class="ncf__debug-environment">
-			<a class="ncf__button ncf__button--debug ncf__button--inverse ncf__debug-button--test" onclick="setTestEnvironment('off');"><strong>TEST</strong> relax you are using the test API</a>
+			<a class="ncf__button ncf__button--debug o3-button o3-button--secondary ncf__debug-button--test"   data-o3-theme="inverse"onclick="setTestEnvironment('off');"><strong>TEST</strong> relax you are using the test API</a>
 		</span>
 	`;
 	const productionEnvironment = `
 		<span class="ncf__debug-environment">
-			<a class="ncf__button ncf__button--debug ncf__button--inverse ncf__debug-button--production" onclick="setTestEnvironment('on');"><strong>PRODUCTION</strong> careful you are using the production API</a>
+			<a class="ncf__button ncf__button--debug o3-button o3-button--secondary ncf__debug-button--production" data-o3-theme="inverse" onclick="setTestEnvironment('on');"><strong>PRODUCTION</strong> careful you are using the production API</a>
 		</span>
 	`;
 	const testCards = `
-		<button id="ncf-copy-visa-checkout-card" class="ncf__button ncf__button--debug ncf__button--inverse" onclick="copyToClipboard('checkoutVisa');" title="Copy Checkout Visa test card number to clipboard">EU Visa (cvv:100)</button>
-		<button id="ncf-copy-visa-checkout-3ds" class="ncf__button ncf__button--debug ncf__button--inverse" onclick="copyToClipboard('checkout3dsChallenge');" title="Copy Checkout challenge code -Checkout1!- to clipboard">EU 3ds challenge</button>
-		<button id="ncf-copy-visa-chase-card" class="ncf__button ncf__button--debug ncf__button--inverse" onclick="copyToClipboard('chaseVisa');" title="Copy Chase card number to clipboard">US Visa (exp:1230,cvv:111)</button>
-		<button id="ncf-link-checkout-cards" class="ncf__button ncf__button--debug ncf__button--inverse" onclick="window.open('https://www.checkout.com/docs/testing/test-card-numbers#Credit_cards', '_blank');" title="Checkout test cards documentation">Doc:Checkout</button>
+		<button id="ncf-copy-visa-checkout-card" class="ncf__button ncf__button--debug o3-button o3-button--secondary" data-o3-theme="inverse" onclick="copyToClipboard('checkoutVisa');" title="Copy Checkout Visa test card number to clipboard">EU Visa (cvv:100)</button>
+		<button id="ncf-copy-visa-checkout-3ds" class="ncf__button ncf__button--debug o3-button o3-button--secondary" data-o3-theme="inverse" onclick="copyToClipboard('checkout3dsChallenge');" title="Copy Checkout challenge code -Checkout1!- to clipboard">EU 3ds challenge</button>
+		<button id="ncf-copy-visa-chase-card" class="ncf__button ncf__button--debug o3-button o3-button--secondary" data-o3-theme="inverse" onclick="copyToClipboard('chaseVisa');" title="Copy Chase card number to clipboard">US Visa (exp:1230,cvv:111)</button>
+		<button id="ncf-link-checkout-cards" class="ncf__button ncf__button--debug o3-button o3-button--secondary" data-o3-theme="inverse" onclick="window.open('https://www.checkout.com/docs/testing/test-card-numbers#Credit_cards', '_blank');" title="Checkout test cards documentation">Doc:Checkout</button>
 	`;
 	const linksString = Object.keys(links).map(
 		(link) =>
-			`<a key=${link} class="ncf__button ncf__button--inverse ncf__link" href="${links[link]}">${link}</a>`
+			`<a key=${link} class="ncf__button o3-button o3-button--secondary" data-o3-theme="inverse" href="${links[link]}">${link}</a>`
 	);
 
 	// Builds a Country dropdown component to allow the user to select a country and reload the page with the selected country
@@ -57,7 +57,7 @@ export function Debug({
 		''
 	);
 	const countriesDropDown = `
-		<select class="ncf__button ncf__button--debug ncf__button--inverse ncf__button--max-width" id="ncf-country" onchange="reloadWithSelectedCountry();">
+		<select class="ncf__button ncf__button--debug o3-button o3-button--secondary ncf__button--max-width" data-o3-theme="inverse" id="ncf-country" onchange="reloadWithSelectedCountry();">
 			<option value="">Change country</option>
 			<hr />
 			${optionsToRender}
@@ -65,10 +65,10 @@ export function Debug({
 	`;
 
 	const helpers = `
-		<span class="ncf__debug-helpers">
-			<button class="ncf__button ncf__button--debug ncf__button--inverse" onclick="logout();" title="Logout and refresh">Logout</button>
-			<button class="ncf__button ncf__button--debug ncf__button--inverse" onclick="fillForm();" title="Fill form with debug data">Fill</button>
-			<button class="ncf__button ncf__button--debug ncf__button--inverse" onclick="fillForm(); submitForm();" title="Fill form with debug data and submit">Fill &amp; Submit</button>
+		<span class="ncf__debug-helpers o3-type-body-base">
+			<button class="ncf__button ncf__button--debug o3-button o3-button--secondary" data-o3-theme="inverse" onclick="logout();" title="Logout and refresh">Logout</button>
+			<button class="ncf__button ncf__button--debug o3-button o3-button--secondary" data-o3-theme="inverse" onclick="fillForm();" title="Fill form with debug data">Fill</button>
+			<button class="ncf__button ncf__button--debug o3-button o3-button--secondary" data-o3-theme="inverse" onclick="fillForm(); submitForm();" title="Fill form with debug data and submit">Fill &amp; Submit</button>
 			${countriesDropDown}
 			${isTest ? testCards : ''}
 			${links.length ? linksString : ''}

package/components/deferred-billing-terms.jsx

@@ -38,11 +38,10 @@ export function DeferredBillingTerms({
 		isDeferredBilling && (
 			<>
 				<p className={labelClassName}>
-					<span className="ncf__paragraph">
+					<span className="ncf__paragraph o3-type-body-base">
 						I confirm I am {CONSENT_AGE} years or older and have read and agree
 						to the{' '}
 						<a
-							className="ncf__link--external"
 							href="https://help.ft.com/legal-privacy/terms-and-conditions/"
 							title="FT Legal Terms and Conditions help page"
 							target="_blank"
@@ -70,10 +69,9 @@ export function DeferredBillingTerms({
 					</span>
 				</p>
 				<p className={labelClassName}>
-					<span className="ncf__paragraph">
+					<span className="ncf__paragraph o3-type-body-base">
 						Find out more about our cancellation policy in our{' '}
 						<a
-							className="ncf__link--external"
 							href="https://help.ft.com/legal-privacy/terms-and-conditions/"
 							title="FT Legal Terms and Conditions help page"
 							target="_blank"
@@ -86,12 +84,11 @@ export function DeferredBillingTerms({
 					</span>
 				</p>
 				<p className={labelClassName}>
-					<span className="ncf__paragraph">
+					<span className="ncf__paragraph o3-type-body-base">
 						Please note that if you fail to make payment for your Deferred
 						Billing Plan within the due date your subscription will be
 						automatically cancelled.{' '}
 						<a
-							className="ncf__link--external"
 							href="https://help.ft.com/legal-privacy/terms-and-conditions/"
 							title="FT Legal Terms and Conditions help page"
 							target="_blank"

package/components/error-page.jsx

@@ -14,18 +14,18 @@ export function ErrorPage({
 				<p id="error-message">{message}</p>
 			</div>
 			<div className="ncf__error-page__content">{children}</div>
-			<div className="ncf__paragraph">
+			<div className="ncf__paragraph o3-type-body-base">
 				<p>International Toll Free Number</p>
 				<a
 					id="error-international-number"
-					className="ncf__header ncf__link"
+					className="ncf__header"
 					href="tel:+80007056477"
 				>
 					+ 800 0705 6477
 				</a>
 			</div>
-			<div className="ncf__paragraph">
-				<a className="ncf__link" href="https://help.ft.com/help/contact-us/">
+			<div className="ncf__paragraph o3-type-body-base">
+				<a href="https://help.ft.com/help/contact-us/">
 					Find a local phone number
 				</a>
 			</div>

package/components/fieldset.jsx

@@ -18,7 +18,7 @@ export function Fieldset({
 
 	const legendClassName = classNames([
 		'ncf__legend',
-		{ 'o-normalise-visually-hidden': hideLegend },
+		{ 'o3-visually-hidden': hideLegend },
 	]);
 
 	const legendElement = legend ? (

package/components/ft-edit-registration-confirmation.jsx

@@ -32,7 +32,7 @@ export function FTEditRegistrationConfirmation({
 			<a
 				href={hubUrl}
 				target="_parent"
-				className=" ncf__confirmation--finish ncf__button ncf__button--submit"
+				className=" ncf__confirmation--finish ncf__button o3-button o3-button--primary"
 				data-trackable="register-finish-head-to-ft-edit-hub"
 			>
 				Explore FT Edit
@@ -42,7 +42,7 @@ export function FTEditRegistrationConfirmation({
 				<a
 					href={articleUrl}
 					target="_parent"
-					className=" ncf__confirmation--finish-article-read ncf__button ncf__button--secondary reduce-bottom-spacing"
+					className=" ncf__confirmation--finish-article-read ncf__button o3-button o3-button--secondary reduce-bottom-spacing"
 					data-trackable="register-finish-head-to-article"
 				>
 					Continue reading

package/components/graduation-date.jsx

@@ -10,12 +10,11 @@ const getMonthNameByIndex = (index) => {
 
 export const Compliance = () => (
 	<div id="graduationDateCompliance" className="ncf__field ncf__gd-compliance">
-		<p>
+		<p className="o3-type-body-base">
 			We use the information you provide, and may share it with your
 			institution, for the purposes of administering your institution&apos;s
 			licence for{' '}
 			<a
-				className="ncf__link--external"
 				href="https://ft.com/"
 				title="Financial Times"
 				target="_blank"
@@ -24,11 +23,10 @@ export const Compliance = () => (
 				FT.com.{' '}
 			</a>
 		</p>
-		<p>
+		<p className="o3-type-body-base">
 			We may also use it to ensure our communications to you are more relevant.
 			If you do not wish us to do so, you can amend your preferences at any time{' '}
 			<a
-				className="ncf__link--external"
 				href="http://www.ft.com/myft/alerts/"
 				title="Financial Times"
 				target="_blank"

package/components/index.js

@@ -54,7 +54,6 @@ export { Submit } from './submit';
 export { TrialBanner } from './trial-banner';
 export { EducationJobTitle } from './education-job-title';
 export { GraduationDate } from './graduation-date';
-export { GoogleSignIn } from './google-sign-in';
 export { TextInput } from './text-input';
 export { DeferredBillingTerms } from './deferred-billing-terms';
 export { YearOfBirth } from './year-of-birth';

package/components/licence-confirmation.jsx

@@ -12,7 +12,6 @@ export function LicenceConfirmation({
 }) {
 	const readingLinkProps = {
 		href: contentId === '' ? '/' : `/content/${contentId}`,
-		className: 'ncf__link',
 		...(isEmbedded && { target: '_top' }),
 	};
 
@@ -50,13 +49,13 @@ export function LicenceConfirmation({
 			)}
 			{ctaElement || (
 				<p className="ncf__paragraph ncf__center">
-					<a className="ncf__button ncf__button--submit" href="/myft">
+					<a className="ncf__button o3-button o3-button--primary" href="/myft">
 						Go to myFT
 					</a>
 				</p>
 			)}
 
-			<p className="ncf__paragraph ncf__center">
+			<p className="ncf__paragraph ncf__center o3-type-body-base">
 				<a {...readingLinkProps}>Go to homepage</a>
 			</p>
 		</div>

package/components/licence-confirmation.stories.js

@@ -8,7 +8,7 @@ export default {
 
 const goToMyFtElement = (
 	<p className="ncf__paragraph ncf__center">
-		<a className="ncf__button ncf__button--submit" href="/myft">
+		<a className="ncf__button o3-button o3-button--primary" href="/myft">
 			Go to myFT
 		</a>
 	</p>

package/components/licence-sign-in.jsx

@@ -9,7 +9,7 @@ export function LicenceSignIn({ displayName = '', url = '' }) {
 				<div>
 					<a
 						href={url}
-						className="ncf__button--secondary ncf__button--mid-width"
+						className="o3-button o3-button--secondary ncf__button--mid-width"
 					>
 						Sign in
 					</a>

package/components/loader.jsx

@@ -4,7 +4,10 @@ import classNames from 'classnames';
 
 export function Loader({ children, showLoader, title, inElement }) {
 	const label = title ? (
-		<div className="ncf__loader__content__title" id="loader-aria-label">
+		<div
+			className="ncf__loader__content__title o3-type-title-md"
+			id="loader-aria-label"
+		>
 			{title}
 		</div>
 	) : (

package/components/package-change.jsx

@@ -8,23 +8,22 @@ export function PackageChange({
 }) {
 	return (
 		<div className="ncf__package-change">
-			<div className="ncf__package-change__package">
+			<div className="ncf__package-change__package o3-type-body-lg">
 				<div className="ncf__package-change__content">
 					<p>
 						You have chosen{' '}
 						<span className="ncf__strong">{currentPackage}</span>
 					</p>
 					{packageDescription && (
-						<p className="ncf__package-change__content__description">
-							{packageDescription}
-						</p>
+						<p className="o3-type-body-base">{packageDescription}</p>
 					)}
 				</div>
 				<div className="ncf__package-change__actions">
 					<a
 						href={changePackageUrl}
-						className="ncf__button ncf__button--mono ncf__button--baseline"
+						className="ncf__button o3-button o3-button--secondary ncf__button--baseline"
 						data-trackable="change"
+						data-o3-theme="mono"
 					>
 						Change
 					</a>

package/components/payment-term.jsx

@@ -245,7 +245,7 @@ export function PaymentTerm({
 											option.amount,
 											option.currency,
 											option.value
-									  )
+										)
 							)}
 							{nameMap['custom'].renewsText(getTimeFromPeriod(option.value))}
 						</div>
@@ -354,10 +354,9 @@ export function PaymentTerm({
 			{showLegal && (
 				<div className="ncf__payment-term__legal">
 					{isTermedSubscriptionTermType ? (
-						<p>
+						<p className="o3-type-body-base">
 							Find out more about our cancellation policy in our{' '}
 							<a
-								className="ncf__link--external"
 								href="https://help.ft.com/legal-privacy/terms-and-conditions/"
 								title="FT Legal Terms and Conditions help page"
 								target="_blank"
@@ -374,12 +373,11 @@ export function PaymentTerm({
 								subscription using the payment method provided unless you cancel
 								before your renewal date.
 							</p>
-							<p>
+							<p className="o3-type-body-base">
 								We will notify you at least 14 days in advance of any changes to
 								the price in your subscription that would apply upon next
 								renewal. Find out more about our cancellation policy in our{' '}
 								<a
-									className="ncf__link--external"
 									href="https://help.ft.com/legal-privacy/terms-and-conditions/"
 									title="FT Legal Terms and Conditions help page"
 									target="_blank"

package/components/proceed-with-payment-link.jsx

@@ -7,12 +7,18 @@ export function ProceedWithPaymentLink({
 	description,
 	listItems = [],
 	children = (
-		<button className="proceed-with-payment-link__button">Proceed</button>
+		<button className="proceed-with-payment-link__button o3-button o3-button--primary">
+			Proceed
+		</button>
 	),
 }) {
 	return (
 		<div id={id} className="proceed-with-payment-link o-forms-field">
-			{title && <h2 className="proceed-with-payment-link__heading">{title}</h2>}
+			{title && (
+				<h2 className="proceed-with-payment-link__heading o3-type-title-lg">
+					{title}
+				</h2>
+			)}
 			{description && (
 				<p className="proceed-with-payment-link__description">{description}</p>
 			)}

package/components/proceed-with-payment-link.stories.js

@@ -14,7 +14,7 @@ export default {
 
 export const Basic = (args) => (
 	<ProceedWithPaymentLink {...args}>
-		<button className="proceed-with-payment-link__button">
+		<button className="proceed-with-payment-link__button o3-button o3-button--primary">
 			{args.buttonText}
 		</button>
 	</ProceedWithPaymentLink>