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

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>

package/components/registration-confirmation.jsx

@@ -55,6 +55,7 @@ export function RegistrationConfirmation({
 				<div
 					className="ncf__confirmation__professional-subscription-check-banner"
 					data-trackable="professional-subscription-check-banner"
+					data-o3-brand="professional"
 				>
 					<div className="ncf__confirmation__professional-subscription-check-banner-header">
 						<h2 className="ncf__confirmation__professional-subscription-check-banner-title">
@@ -85,8 +86,9 @@ export function RegistrationConfirmation({
 
 					<a
 						href={professionalSubscriptionCheckRequestUrl}
-						className="ncf__button ncf__button--professional-inverse"
+						className="ncf__button o3-button o3-button--primary"
 						data-trackable="professional-subscription-check-banner-request"
+						data-o3-theme="inverse"
 					>
 						Check if your organisation subscribes
 					</a>
@@ -154,7 +156,7 @@ export function RegistrationConfirmation({
 					</p>
 					<a
 						href="/myft"
-						className="margin-top-x4 ncf__button ncf__button--secondary"
+						className="margin-top-x4 ncf__button o3-button o3-button--secondary"
 						data-trackable="register-personalise-my-alerts"
 					>
 						Personalise my alerts
@@ -165,7 +167,7 @@ export function RegistrationConfirmation({
 			<a
 				href={returnUrl}
 				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"
 			>
 				Start reading

package/components/responsibility.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { demographics } from 'n-common-static-data';
 
 export function Responsibility({
 	value,
@@ -11,7 +10,7 @@ export function Responsibility({
 	fieldId = 'responsibilityField',
 	selectId = 'responsibility',
 	selectName = 'responsibility',
-	options = demographics.responsibilities.responsibilities,
+	options = [],
 	fieldLabel = 'Which best describes your job responsibility?',
 }) {
 	const inputWrapperClassName = classNames([

package/components/responsibility.spec.js

@@ -1,7 +1,12 @@
 import { Responsibility } from './index';
 import { expectToRenderCorrectly } from '../test-jest/helpers/expect-to-render-correctly';
-import { demographics } from '../helpers/demographics';
-const B2CResponsibilities = demographics.responsibilities.responsibilities;
+const B2CResponsibilities = [
+	{
+		description: 'Dummy description',
+		code: 'DUM',
+		status: 'active',
+	},
+];
 
 import Enzyme, { mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';

package/components/submit.jsx

@@ -33,7 +33,7 @@ export function Submit({
 
 			<button
 				id={id}
-				className="ncf__button ncf__button--submit"
+				className="ncf__button o3-button o3-button--primary"
 				data-trackable="submit"
 				type="submit"
 				disabled={isDisabled}

package/components/subscription-confirmation-with-payment-link.jsx

@@ -42,7 +42,7 @@ export function SubscriptionConfirmationWithPaymentLink({
 							readOnly
 							className="subscription-active-with-payment-link__input"
 						/>
-						<button className="subscription-active-with-payment-link__button">
+						<button className="subscription-active-with-payment-link__button o3-button o3-button--primary subscription-active-with-payment-link__button--ft-pink">
 							Copy
 						</button>
 					</div>

package/dist/accept-terms-business.jsx

@@ -37,9 +37,8 @@ function AcceptTermsBusiness(_ref) {
   var b2bTerms = isB2b ? /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
     className: "terms-b2b"
   }, "By submitting this form, you indicate your consent to also being contacted by Financial Times by email, post, or phone about our other products, services or special offers unless you untick this box.")) : /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "terms-default"
+    className: "terms-default o3-type-body-base"
   }, "I confirm I am 16 years or older and have read and agree to the", ' ', /*#__PURE__*/_react["default"].createElement("a", {
-    className: "ncf__link--external",
     href: "http://help.ft.com/help/legal-privacy/terms-conditions/",
     target: isEmbedded ? '_top' : '_blank',
     rel: "noopener noreferrer",
@@ -55,7 +54,7 @@ function AcceptTermsBusiness(_ref) {
     className: "terms-corp-signup"
   }, "This trial is to demonstrate the value of a group subscription and we\u2019ll contact you during your trial.")));
   return /*#__PURE__*/_react["default"].createElement("div", divProps, /*#__PURE__*/_react["default"].createElement("ul", {
-    className: "o-typography-list ncf__accept-terms-list"
+    className: "ncf__accept-terms-list"
   }, b2bTerms, corpSignupTerms), /*#__PURE__*/_react["default"].createElement("label", {
     className: labelClassName,
     htmlFor: "termsAcceptance"

package/dist/accept-terms-business.spec.jsx

@@ -26,7 +26,7 @@ describe('AcceptTermsPrivacyPolicy', function () {
       isEmbedded: false
     };
     var component = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_index.AcceptTermsBusiness, props));
-    var externalLink = component.find('.ncf__link--external');
+    var externalLink = component.find('[data-trackable="terms-and-conditions"]');
     expect(externalLink.prop('target')).toBe('_blank');
   });
   it('renders the trial terms when isTrial prop is true', function () {

package/dist/accept-terms-privacy-policy.jsx

@@ -37,9 +37,8 @@ function AcceptTermsPrivacyPolicy(_ref) {
     className: labelClassName,
     htmlFor: "termsAcceptance"
   }, /*#__PURE__*/_react["default"].createElement("input", inputProps), /*#__PURE__*/_react["default"].createElement("span", {
-    className: "o-forms-input__label"
+    className: "o-forms-input__label o3-type-body-base"
   }, "I confirm that I am 16 years or older and agree to the full", ' ', /*#__PURE__*/_react["default"].createElement("a", {
-    className: "ncf__link--external",
     href: "http://help.ft.com/help/legal-privacy/terms-conditions/",
     target: isEmbedded ? '_top' : '_blank',
     rel: "noopener noreferrer",
@@ -49,15 +48,13 @@ function AcceptTermsPrivacyPolicy(_ref) {
   }, "Please accept our terms & conditions")), children && /*#__PURE__*/_react["default"].createElement("div", {
     className: "children-container"
   }, children), /*#__PURE__*/_react["default"].createElement("span", {
-    className: "consent-text--bottom"
+    className: "consent-text--bottom o3-type-body-base"
   }, "For more information about how we use your data, please refer to our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
-    className: "ncf__link--external",
     href: "https://help.ft.com/legal-privacy/privacy-policy/",
     target: "_blank",
     rel: "noopener noreferrer",
     "data-trackable": "privacy-policy-info"
   }, "privacy"), ' ', "and\xA0", /*#__PURE__*/_react["default"].createElement("a", {
-    className: "ncf__link--external",
     href: "https://help.ft.com/legal-privacy/cookies/",
     target: "_blank",
     rel: "noopener noreferrer",

package/dist/accept-terms-subscription.jsx

@@ -52,24 +52,22 @@ function AcceptTermsSubscription(_ref) {
     required: true
   };
   var autoRenewingTerms = !isSingleTerm && /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "terms-auto-renew"
+    className: "terms-auto-renew 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", ' ', /*#__PURE__*/_react["default"].createElement("a", {
-    className: "ncf__link--external",
     href: "https://help.ft.com/help/contact-us/",
     target: isEmbedded ? '_top' : '_blank',
     rel: "noopener noreferrer"
   }, "customer care through chat, phone or email"), "."));
   if (isTermedSubscriptionTermType) {
     return /*#__PURE__*/_react["default"].createElement("div", divProps, /*#__PURE__*/_react["default"].createElement("ul", {
-      className: "o-typography-list ncf__accept-terms-list"
+      className: "o3-typography-ul ncf__accept-terms-list"
     }, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
       className: "terms-transition terms-transition--immediate"
     }, "I give consent for the chosen payment method to be charged automatically.")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
       className: "terms-transition terms-transition--immediate"
     }, "By placing your order subject to the Terms & Conditions (save for section 2) referred to below, you are waiving your statutory right to cancel our contract within 14 days of payment. Your payment is a one-time payment collected at the time of checkout, and unsubscribing or cancelling at any point (whether before or after the 14-day period) will not entitle you to a refund.")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
-      className: "terms-transition"
+      className: "terms-transition o3-type-body-base"
     }, "Please see here for the complete", ' ', /*#__PURE__*/_react["default"].createElement("a", {
-      className: "ncf__link--external",
       href: "http://help.ft.com/help/legal-privacy/terms-conditions/",
       target: "_blank",
       rel: "noopener noreferrer"
@@ -87,9 +85,8 @@ function AcceptTermsSubscription(_ref) {
   }, "By placing my order, my subscription will start immediately and I am aware and agree that I will therefore lose my statutory right to cancel my subscription within 14 days of acceptance of my order. Any notice of cancellation that I provide will only take effect at the end of my subscription period and previously paid amounts are non-refundable, except in the event that there is a fault in the provision of the services.")) : /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
     className: "terms-transition terms-transition--other"
   }, "By placing my order, I acknowledge that my subscription will start", isSingleTerm ? ' and the chosen payment method will be charged ' : ' ', "on the date given above. Any cancellation notice received after that date will take effect at the end of my subscription term and previously paid amounts are non-refundable.")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "terms-transition"
+    className: "terms-transition o3-type-body-base"
   }, "Find out more about our cancellation policy in our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
-    className: "ncf__link--external",
     href: "http://help.ft.com/help/legal-privacy/terms-conditions/",
     target: "_blank",
     rel: "noopener noreferrer"
@@ -101,9 +98,8 @@ function AcceptTermsSubscription(_ref) {
   var printTerms = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
     className: "terms-print"
   }, printSignupTermText)), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "terms-print"
+    className: "terms-print o3-type-body-base"
   }, "Find out more about your delivery start date in our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
-    className: "ncf__link--external",
     href: "http://help.ft.com/help/legal-privacy/terms-conditions/",
     target: isEmbedded ? '_top' : '_blank',
     rel: "noopener noreferrer"
@@ -111,16 +107,15 @@ function AcceptTermsSubscription(_ref) {
   var nonPrintTerms = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
     className: "terms-signup"
   }, "By placing my order, my subscription will start immediately and I am aware and agree that I will therefore lose my statutory right to cancel my subscription within 14 days of acceptance of my order. Any notice of cancellation that I provide will only take effect at the end of my subscription period and previously paid amounts are non-refundable, except in the event that there is a fault in the provision of the services.")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "terms-signup"
+    className: "terms-signup o3-type-body-base"
   }, "Find out more about our cancellation policy in our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
-    className: "ncf__link--external",
     href: "https://help.ft.com/legal-privacy/terms-and-conditions/",
     target: isEmbedded ? '_top' : '_blank',
     rel: "noopener noreferrer"
   }, "Terms & Conditions"), ".")));
   var signupTerms = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isPrintProduct ? printTerms : nonPrintTerms);
   return /*#__PURE__*/_react["default"].createElement("div", divProps, /*#__PURE__*/_react["default"].createElement("ul", {
-    className: "o-typography-list ncf__accept-terms-list"
+    className: "ncf__accept-terms-list"
   }, autoRenewingTerms, transitionTerms, signupTerms, deferredBillingTerms), /*#__PURE__*/_react["default"].createElement("label", {
     className: labelClassName,
     htmlFor: "termsAcceptance"

package/dist/accept-terms.jsx

@@ -73,15 +73,13 @@ function AcceptTerms(_ref) {
   var privacyPolicyTerms = /*#__PURE__*/_react["default"].createElement("div", {
     className: "privacy-policy-terms"
   }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "consent-text--".concat(privacyPoliciesPosition)
+    className: "o3-type-body-base consent-text--".concat(privacyPoliciesPosition)
   }, "For more information about how we use your data, please refer to our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
-    className: "ncf__link--external",
     href: "https://help.ft.com/legal-privacy/privacy-policy/",
     target: "_blank",
     rel: "noopener noreferrer",
     "data-trackable": "privacy-policy-info"
   }, "privacy"), ' ', "and\xA0", /*#__PURE__*/_react["default"].createElement("a", {
-    className: "ncf__link--external",
     href: "https://help.ft.com/legal-privacy/cookies/",
     target: "_blank",
     rel: "noopener noreferrer",
@@ -90,9 +88,8 @@ function AcceptTerms(_ref) {
     className: labelClassName,
     htmlFor: "termsAcceptance"
   }, /*#__PURE__*/_react["default"].createElement("input", inputProps), /*#__PURE__*/_react["default"].createElement("span", {
-    className: "o-forms-input__label"
+    className: "o-forms-input__label o3-type-body-base"
   }, "I confirm that I am ", ageRestriction, " years or older and agree to the full", ' ', /*#__PURE__*/_react["default"].createElement("a", {
-    className: "ncf__link--external",
     href: "http://help.ft.com/help/legal-privacy/terms-conditions/",
     target: isEmbedded ? '_top' : '_blank',
     rel: "noopener noreferrer",
@@ -105,9 +102,8 @@ function AcceptTerms(_ref) {
   var b2bTerms = isB2b ? /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
     className: "terms-b2b"
   }, "By submitting this form, you indicate your consent to also being contacted by Financial Times by email, post, or phone about our other products, services or special offers unless you untick this box.")) : /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "terms-default"
+    className: "terms-default o3-type-body-base"
   }, "I confirm I am ", ageRestriction, " years or older and have read and agree to the", ' ', /*#__PURE__*/_react["default"].createElement("a", {
-    className: "ncf__link--external",
     href: "http://help.ft.com/help/legal-privacy/terms-conditions/",
     target: isEmbedded ? '_top' : '_blank',
     rel: "noopener noreferrer",
@@ -123,9 +119,8 @@ function AcceptTerms(_ref) {
     className: "terms-corp-signup"
   }, "This trial is to demonstrate the value of a group subscription and we\u2019ll contact you during your trial.")));
   var transitionTerms = isTransition && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !isSingleTerm && /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "terms-transition"
+    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", ' ', /*#__PURE__*/_react["default"].createElement("a", {
-    className: "ncf__link--external",
     href: "https://help.ft.com/help/contact-us/",
     target: "_blank",
     rel: "noopener noreferrer"
@@ -134,9 +129,8 @@ function AcceptTerms(_ref) {
   }, "By placing my order, my subscription will start immediately and I am aware and agree that I will therefore lose my statutory right to cancel my subscription within 14 days of acceptance of my order. Any notice of cancellation that I provide will only take effect at the end of my subscription period and previously paid amounts are non-refundable, except in the event that there is a fault in the provision of the services.")) : /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
     className: "terms-transition terms-transition--other"
   }, "By placing my order, I acknowledge that my subscription will start", isSingleTerm ? ' and the chosen payment method will be charged ' : ' ', "on the date given above. Any cancellation notice received after that date will take effect at the end of my subscription term and previously paid amounts are non-refundable.")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "terms-transition"
+    className: "terms-transition o3-type-body-base"
   }, "Find out more about our cancellation policy in our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
-    className: "ncf__link--external",
     href: "http://help.ft.com/help/legal-privacy/terms-conditions/",
     target: "_blank",
     rel: "noopener noreferrer"
@@ -145,25 +139,22 @@ function AcceptTerms(_ref) {
   var signupTerms = isSignup && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isPrintProduct ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
     className: "terms-print"
   }, printSignupTermText)), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "terms-print"
+    className: "terms-print o3-type-body-base"
   }, "Find out more about your delivery start date in our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
-    className: "ncf__link--external",
     href: "http://help.ft.com/help/legal-privacy/terms-conditions/",
     target: isEmbedded ? '_top' : '_blank',
     rel: "noopener noreferrer"
   }, "Terms & Conditions"), "."))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "terms-signup"
+    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", ' ', /*#__PURE__*/_react["default"].createElement("a", {
-    className: "ncf__link--external",
     href: "https://help.ft.com/help/contact-us/",
     target: isEmbedded ? '_top' : '_blank',
     rel: "noopener noreferrer"
   }, "customer care through chat, phone or email"), ".")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
     className: "terms-signup"
   }, "By placing my order, my subscription will start immediately and I am aware and agree that I will therefore lose my statutory right to cancel my subscription within 14 days of acceptance of my order. Any notice of cancellation that I provide will only take effect at the end of my subscription period and previously paid amounts are non-refundable, except in the event that there is a fault in the provision of the services.")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "terms-signup"
+    className: "terms-signup o3-type-body-base"
   }, "Find out more about our cancellation policy in our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
-    className: "ncf__link--external",
     href: "https://help.ft.com/legal-privacy/terms-and-conditions/",
     target: isEmbedded ? '_top' : '_blank',
     rel: "noopener noreferrer"
@@ -174,9 +165,8 @@ function AcceptTerms(_ref) {
   var b2cPartnershipTerms = /*#__PURE__*/_react["default"].createElement("label", {
     className: [labelClassName, 'checkbox-two-lines'].join(' ')
   }, /*#__PURE__*/_react["default"].createElement("input", inputProps), /*#__PURE__*/_react["default"].createElement("span", {
-    className: "o-forms-input__label"
+    className: "o-forms-input__label o3-type-body-base"
   }, "I confirm I am ", ageRestriction, " years or older and have read and agree to the", ' ', /*#__PURE__*/_react["default"].createElement("a", {
-    className: "ncf__link--external",
     href: "http://help.ft.com/help/legal-privacy/terms-conditions/",
     target: isEmbedded ? '_top' : '_blank',
     rel: "noopener noreferrer",
@@ -185,7 +175,7 @@ function AcceptTerms(_ref) {
     className: "o-forms-input__error"
   }, "Please accept our terms & conditions"));
   return /*#__PURE__*/_react["default"].createElement("div", divProps, isB2cPartnership ? b2cPartnershipTerms : withPrivacyPolicyTerms ? privacyPolicyTerms : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("ul", {
-    className: "o-typography-list ncf__accept-terms-list"
+    className: "ncf__accept-terms-list"
   }, b2bTerms, corpSignupTerms, transitionTerms, signupTerms, deferredBillingTerms), /*#__PURE__*/_react["default"].createElement("label", {
     className: labelClassName,
     htmlFor: "termsAcceptance"

package/dist/b2c-partnership-confirmation.jsx

@@ -18,12 +18,10 @@ function B2CPartnershipConfirmation(_ref) {
     _ref$productCode = _ref.productCode,
     productCode = _ref$productCode === void 0 ? null : _ref$productCode;
   var readingLinkProps = {
-    href: '/',
-    className: 'ncf__link'
+    href: '/'
   };
   var customerCareProps = {
-    href: 'https://help.ft.com/',
-    className: 'ncf__link'
+    href: 'https://help.ft.com/'
   };
 
   // Welcome to your Standard access
@@ -48,14 +46,14 @@ function B2CPartnershipConfirmation(_ref) {
   }, "Explore the homepage & enjoy your unlimited access & exclusive content."), ctaElement || /*#__PURE__*/_react["default"].createElement("p", {
     className: "ncf__paragraph ncf__center"
   }, /*#__PURE__*/_react["default"].createElement("a", {
-    className: "ncf__button ncf__button--submit",
+    className: "ncf__button o3-button o3-button--primary",
     href: "/myft"
   }, "Go to myFT")), /*#__PURE__*/_react["default"].createElement("p", {
-    className: "ncf__paragraph ncf__center"
+    className: "ncf__paragraph ncf__center o3-type-body-base"
   }, /*#__PURE__*/_react["default"].createElement("a", readingLinkProps, "Start reading")), /*#__PURE__*/_react["default"].createElement("p", {
     className: "ncf__paragraph"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "ncf__strong"
+    className: "ncf__strong o3-type-body-base"
   }, "Can we help?"), "For any queries about your Premium subscription please", ' ', /*#__PURE__*/_react["default"].createElement("a", customerCareProps, "contact Customer Care"), "."));
 }
 B2CPartnershipConfirmation.propTypes = {

package/dist/confirmation.jsx

@@ -62,7 +62,7 @@ function Confirmation(_ref) {
     "data-trackable": "dd-mandate-link",
     id: "encryptedMandateLink"
   }, "direct debit mandate"), /*#__PURE__*/_react["default"].createElement("i", {
-    className: "ncf__icon-download"
+    className: "ncf__icon--download"
   })));
   return /*#__PURE__*/_react["default"].createElement("div", containerDivProps, /*#__PURE__*/_react["default"].createElement("div", {
     className: "ncf__center"
@@ -85,20 +85,17 @@ function Confirmation(_ref) {
   }, /*#__PURE__*/_react["default"].createElement("h3", {
     className: "ncf__header"
   }, "Something not right?"), /*#__PURE__*/_react["default"].createElement("p", {
-    className: "ncf__paragraph"
+    className: "ncf__paragraph o3-type-body-base"
   }, "Go to your", ' ', /*#__PURE__*/_react["default"].createElement("a", {
-    className: "ncf__link ncf__link--external",
     href: "https://www.ft.com/myaccount/personal-details",
     target: "_blank",
     rel: "noopener noreferrer",
     "data-trackable": "yourAccount"
   }, "account settings"), ' ', "to view or edit your account. If you need to get in touch call us on", ' ', /*#__PURE__*/_react["default"].createElement("a", {
-    href: "tel:+442077556248",
-    className: "ncf__link ncf__link--external"
+    href: "tel:+442077556248"
   }, "+44 (0) 207 755 6248"), ". Or contact us for additional support.")), /*#__PURE__*/_react["default"].createElement("p", {
-    className: "ncf__paragraph"
+    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 ', /*#__PURE__*/_react["default"].createElement("a", {
-    className: "ncf__link ncf__link--external",
     href: "http://help.ft.com/help/legal-privacy/terms-conditions/",
     target: "_top",
     rel: "noopener"

package/dist/continue-reading.jsx

@@ -27,7 +27,7 @@ function ContinueReading(_ref) {
   }, isEmbedded && {
     target: '_top'
   }), {}, {
-    className: 'ncf__button ncf__button--secondary'
+    className: 'ncf__button o3-button o3-button--secondary'
   });
   var linkElement = link && /*#__PURE__*/_react["default"].createElement("p", {
     className: "ncf__center"

package/dist/customer-care.jsx

@@ -33,15 +33,14 @@ function CustomerCare(_ref) {
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "ncf__icon ncf__icon--phone ncf__icon--large"
   }), /*#__PURE__*/_react["default"].createElement("p", null, "International Toll Free Number"), /*#__PURE__*/_react["default"].createElement("p", {
-    className: "ncf__customer-care__phone"
+    className: "ncf__customer-care__phone o3-type-body-base"
   }, /*#__PURE__*/_react["default"].createElement("a", {
     id: "customer-care-international-number",
-    className: "ncf__header ncf__link",
+    className: "ncf__header",
     href: "tel:+80007056477"
   }, "+ 800 0705 6477"))), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "ncf__paragraph"
+    className: "ncf__paragraph o3-type-body-base"
   }, /*#__PURE__*/_react["default"].createElement("a", {
-    className: "ncf__link",
     href: "https://help.ft.com/help/contact-us/"
   }, "Find a local phone number")));
 }

package/dist/debug.jsx

@@ -22,11 +22,11 @@ function Debug(_ref) {
   // along with onclick handlers, styles and javascript. JSX will escape and
   // modify the HTML which we do not want. Once our applications are on JSX
   // entirely this component should be rethought.
-  var testEnvironment = "\n\t\t<span class=\"ncf__debug-environment\">\n\t\t\t<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>\n\t\t</span>\n\t";
-  var productionEnvironment = "\n\t\t<span class=\"ncf__debug-environment\">\n\t\t\t<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>\n\t\t</span>\n\t";
-  var testCards = "\n\t\t<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>\n\t\t<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>\n\t\t<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>\n\t\t<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>\n\t";
+  var testEnvironment = "\n\t\t<span class=\"ncf__debug-environment\">\n\t\t\t<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>\n\t\t</span>\n\t";
+  var productionEnvironment = "\n\t\t<span class=\"ncf__debug-environment\">\n\t\t\t<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>\n\t\t</span>\n\t";
+  var testCards = "\n\t\t<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>\n\t\t<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>\n\t\t<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>\n\t\t<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>\n\t";
   var linksString = Object.keys(links).map(function (link) {
-    return "<a key=".concat(link, " class=\"ncf__button ncf__button--inverse ncf__link\" href=\"").concat(links[link], "\">").concat(link, "</a>");
+    return "<a key=".concat(link, " class=\"ncf__button o3-button o3-button--secondary\" data-o3-theme=\"inverse\" href=\"").concat(links[link], "\">").concat(link, "</a>");
   });
 
   // Builds a Country dropdown component to allow the user to select a country and reload the page with the selected country
@@ -46,8 +46,8 @@ function Debug(_ref) {
   var optionsToRender = filteredCountries.reduce(function (options, country) {
     return "".concat(options, " ").concat(country.label ? createOptGroup(country) : createOption(country));
   }, '');
-  var countriesDropDown = "\n\t\t<select class=\"ncf__button ncf__button--debug ncf__button--inverse ncf__button--max-width\" id=\"ncf-country\" onchange=\"reloadWithSelectedCountry();\">\n\t\t\t<option value=\"\">Change country</option>\n\t\t\t<hr />\n\t\t\t".concat(optionsToRender, "\n\t\t</select>\n\t");
-  var helpers = "\n\t\t<span class=\"ncf__debug-helpers\">\n\t\t\t<button class=\"ncf__button ncf__button--debug ncf__button--inverse\" onclick=\"logout();\" title=\"Logout and refresh\">Logout</button>\n\t\t\t<button class=\"ncf__button ncf__button--debug ncf__button--inverse\" onclick=\"fillForm();\" title=\"Fill form with debug data\">Fill</button>\n\t\t\t<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>\n\t\t\t".concat(countriesDropDown, "\n\t\t\t").concat(isTest ? testCards : '', "\n\t\t\t").concat(links.length ? linksString : '', "\n\t\t</span>\n\t");
+  var countriesDropDown = "\n\t\t<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();\">\n\t\t\t<option value=\"\">Change country</option>\n\t\t\t<hr />\n\t\t\t".concat(optionsToRender, "\n\t\t</select>\n\t");
+  var helpers = "\n\t\t<span class=\"ncf__debug-helpers o3-type-body-base\">\n\t\t\t<button class=\"ncf__button ncf__button--debug o3-button o3-button--secondary\" data-o3-theme=\"inverse\" onclick=\"logout();\" title=\"Logout and refresh\">Logout</button>\n\t\t\t<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>\n\t\t\t<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>\n\t\t\t".concat(countriesDropDown, "\n\t\t\t").concat(isTest ? testCards : '', "\n\t\t\t").concat(links.length ? linksString : '', "\n\t\t</span>\n\t");
   var html = {
     __html: "".concat(isTest ? testEnvironment : productionEnvironment).concat(showHelpers ? helpers : '')
   };

package/dist/deferred-billing-terms.jsx

@@ -53,9 +53,8 @@ function DeferredBillingTerms(_ref) {
   return isDeferredBilling && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("p", {
     className: labelClassName
   }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "ncf__paragraph"
+    className: "ncf__paragraph o3-type-body-base"
   }, "I confirm I am ", CONSENT_AGE, " years or older and have read and agree to the", ' ', /*#__PURE__*/_react["default"].createElement("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",
@@ -72,9 +71,8 @@ function DeferredBillingTerms(_ref) {
   }, "By placing my order, I acknowledge that my subscription will start on the date given above. Any cancellation notice received after that date will take effect at the end of my subscription term and previously paid amounts are non-refundable.")), /*#__PURE__*/_react["default"].createElement("p", {
     className: labelClassName
   }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "ncf__paragraph"
+    className: "ncf__paragraph o3-type-body-base"
   }, "Find out more about our cancellation policy in our", ' ', /*#__PURE__*/_react["default"].createElement("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",
@@ -83,9 +81,8 @@ function DeferredBillingTerms(_ref) {
   }, "Terms & Conditions"), ".")), /*#__PURE__*/_react["default"].createElement("p", {
     className: labelClassName
   }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "ncf__paragraph"
+    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.", ' ', /*#__PURE__*/_react["default"].createElement("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/dist/error-page.jsx

@@ -26,15 +26,14 @@ function ErrorPage(_ref) {
   }, message)), /*#__PURE__*/_react["default"].createElement("div", {
     className: "ncf__error-page__content"
   }, children), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "ncf__paragraph"
+    className: "ncf__paragraph o3-type-body-base"
   }, /*#__PURE__*/_react["default"].createElement("p", null, "International Toll Free Number"), /*#__PURE__*/_react["default"].createElement("a", {
     id: "error-international-number",
-    className: "ncf__header ncf__link",
+    className: "ncf__header",
     href: "tel:+80007056477"
   }, "+ 800 0705 6477")), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "ncf__paragraph"
+    className: "ncf__paragraph o3-type-body-base"
   }, /*#__PURE__*/_react["default"].createElement("a", {
-    className: "ncf__link",
     href: "https://help.ft.com/help/contact-us/"
   }, "Find a local phone number")));
 }

package/dist/fieldset.jsx

@@ -32,7 +32,7 @@ function Fieldset(_ref) {
     className: 'ncf__fieldset'
   });
   var legendClassName = (0, _classnames["default"])(['ncf__legend', {
-    'o-normalise-visually-hidden': hideLegend
+    'o3-visually-hidden': hideLegend
   }]);
   var legendElement = legend ? /*#__PURE__*/_react["default"].createElement("legend", {
     className: legendClassName

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

@@ -35,12 +35,12 @@ function FTEditRegistrationConfirmation(_ref) {
   }, "Enjoy 30 days of great journalism. We\u2019ve sent confirmation to", /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("strong", null, email), "."))), /*#__PURE__*/_react["default"].createElement("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"), articleUrl && /*#__PURE__*/_react["default"].createElement("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/dist/graduation-date.jsx

@@ -19,14 +19,16 @@ var Compliance = exports.Compliance = function Compliance() {
   return /*#__PURE__*/_react["default"].createElement("div", {
     id: "graduationDateCompliance",
     className: "ncf__field ncf__gd-compliance"
-  }, /*#__PURE__*/_react["default"].createElement("p", null, "We use the information you provide, and may share it with your institution, for the purposes of administering your institution's licence for", ' ', /*#__PURE__*/_react["default"].createElement("a", {
-    className: "ncf__link--external",
+  }, /*#__PURE__*/_react["default"].createElement("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's licence for", ' ', /*#__PURE__*/_react["default"].createElement("a", {
     href: "https://ft.com/",
     title: "Financial Times",
     target: "_blank",
     rel: "noopener noreferrer"
-  }, "FT.com.", ' ')), /*#__PURE__*/_react["default"].createElement("p", null, "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", ' ', /*#__PURE__*/_react["default"].createElement("a", {
-    className: "ncf__link--external",
+  }, "FT.com.", ' ')), /*#__PURE__*/_react["default"].createElement("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", ' ', /*#__PURE__*/_react["default"].createElement("a", {
     href: "http://www.ft.com/myft/alerts/",
     title: "Financial Times",
     target: "_blank",