@financial-times/n-conversion-forms 20.3.1 → 20.3.5

package/components/delivery-start-date.jsx

@@ -42,7 +42,9 @@ export function DeliveryStartDate ({
 			htmlFor={inputProps.id}
 		>
 			<span className="o-forms-title">
-				<span className="o-forms-title__main" id="start-date-picker-title-span">Delivery start date</span>
+				<span className="o-forms-title__main" id="start-date-picker-title-span">
+					Delivery start date
+				</span>
 				<span className="o-forms-title__prompt">
 					Earliest available delivery date: {date}
 				</span>

package/components/education-job-title.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function EducationJobTitle({
+export function EducationJobTitle ({
 	value = '',
 	isDisabled = false,
 	hasError = false,

package/components/email.jsx

@@ -79,5 +79,5 @@ Email.propTypes = {
 	value: PropTypes.string,
 	isEducationalLicence: PropTypes.bool,
 	isB2cPartnershipLicence: PropTypes.bool,
-	showTitle: PropTypes.bool
+	showTitle: PropTypes.bool,
 };

package/components/error-page.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export function ErrorPage({
+export function ErrorPage ({
 	children,
 	header = 'Sorry, something went wrong',
 	message = 'Speak to our Customer Care team now so we can help.',

package/components/fieldset.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function Fieldset({
+export function Fieldset ({
 	children = null,
 	name = null,
 	legend = null,

package/components/first-name.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function FirstName({
+export function FirstName ({
 	dataTrackable = 'field-name',
 	errorText = 'Please enter your first name',
 	fieldId = 'firstNameField',

package/components/form.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export function Form({ children, action = '', method = 'POST' }) {
+export function Form ({ children, action = '', method = 'POST' }) {
 	return (
 		<div className="ncf__wrapper">
 			<form className="ncf" action={action} method={method} noValidate>

package/components/google-sign-in.jsx

@@ -1,13 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export function GoogleSignIn({ signInRedirectUrl }) {
-
+export function GoogleSignIn ({ signInRedirectUrl }) {
 	return (
 		<>
-			<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"></link>
+			<link
+				href="https://fonts.googleapis.com/css?family=Roboto"
+				rel="stylesheet"
+			></link>
 			<base target="_parent" />
-			<a className="google_button" href={signInRedirectUrl}>Sign in with Google</a>
+			<a className="google_button" href={signInRedirectUrl}>
+				Sign in with Google
+			</a>
 		</>
 	);
 }

package/components/google-sign-in.stories.js

@@ -8,5 +8,6 @@ export default {
 
 export const Basic = (args) => <GoogleSignIn {...args} />;
 Basic.args = {
-	signInRedirectUrl: 'https://social-login-svc-eu-test.memb.ft.com/login/google',
+	signInRedirectUrl:
+		'https://social-login-svc-eu-test.memb.ft.com/login/google',
 };

package/components/graduation-date.jsx

@@ -40,7 +40,7 @@ export const Compliance = () => (
 	</div>
 );
 
-export function GraduationDate({
+export function GraduationDate ({
 	value,
 	isDisabled = false,
 	isRequired = false,

package/components/graduation-date.spec.js

@@ -76,15 +76,7 @@ describe('GraduationDate', () => {
 			.map((node) => node.prop('value'));
 
 		expect(values).toEqual([
-			2016,
-			2017,
-			2018,
-			2019,
-			2020,
-			2021,
-			2022,
-			2023,
-			2024,
+			2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024,
 		]);
 
 		jest.restoreAllMocks();

package/components/industry.jsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { demographics } from 'n-common-static-data';
 const defaultOptions = demographics.industries.industries;
 
-export function Industry({
+export function Industry ({
 	value,
 	isDisabled = false,
 	hasError = false,
@@ -23,7 +23,7 @@ export function Industry({
 
 	const fieldTitleClassName = classNames([
 		'o-forms-title',
-		{ 'o-forms-field--optional': !isRequired }
+		{ 'o-forms-field--optional': !isRequired },
 	]);
 
 	return (

package/components/industry.spec.js

@@ -88,6 +88,8 @@ describe('Industry', () => {
 		const props = { isRequired: false };
 		const component = mount(Industry(props));
 
-		expect(component.find('.o-forms-title.o-forms-field--optional').length).toEqual(1);
+		expect(
+			component.find('.o-forms-title.o-forms-field--optional').length
+		).toEqual(1);
 	});
 });

package/components/job-title.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function JobTitle({
+export function JobTitle ({
 	value = '',
 	isDisabled = false,
 	hasError = false,
@@ -19,7 +19,7 @@ export function JobTitle({
 
 	const fieldTitleClassName = classNames([
 		'o-forms-title',
-		{ 'o-forms-field--optional': !isRequired }
+		{ 'o-forms-field--optional': !isRequired },
 	]);
 
 	return (

package/components/job-title.spec.js

@@ -63,6 +63,8 @@ describe('JobTitle', () => {
 		const props = { isRequired: false };
 		const component = mount(JobTitle(props));
 
-		expect(component.find('.o-forms-title.o-forms-field--optional').length).toEqual(1);
+		expect(
+			component.find('.o-forms-title.o-forms-field--optional').length
+		).toEqual(1);
 	});
 });

package/components/last-name.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function LastName({
+export function LastName ({
 	dataTrackable = 'field-lastname',
 	errorText = 'Please enter your last name',
 	fieldId = 'lastNameField',

package/components/licence-confirmation.jsx

@@ -7,9 +7,8 @@ export function LicenceConfirmation ({
 	duration = null,
 	isEducationalLicence = false,
 	contentId = '',
-	ctaElement=null,
+	ctaElement = null,
 }) {
-
 	const readingLinkProps = {
 		href: contentId === '' ? '/' : `/content/${contentId}`,
 		className: 'ncf__link',
@@ -44,10 +43,13 @@ export function LicenceConfirmation ({
 				content.
 			</p>
 
-			{ctaElement ||
+			{ctaElement || (
 				<p className="ncf__paragraph ncf__center">
-					<a className="ncf__button ncf__button--submit" href="/myft">Go to myFT</a>
-				</p>}
+					<a className="ncf__button ncf__button--submit" href="/myft">
+						Go to myFT
+					</a>
+				</p>
+			)}
 
 			<p className="ncf__paragraph ncf__center">
 				<a {...readingLinkProps}>Start reading</a>

package/components/licence-confirmation.stories.js

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

package/components/licence-header.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { LicenceSignIn } from './licence-sign-in';
 import { LicenceTitle } from './licence-title';
 
-export function LicenceHeader(props) {
+export function LicenceHeader (props) {
 	const {
 		displayName = '',
 		isTrial = false,
@@ -11,7 +11,7 @@ export function LicenceHeader(props) {
 		welcomeText = '',
 		url = '',
 	} = props;
-	function createMarkup(text) {
+	function createMarkup (text) {
 		return { __html: text };
 	}
 

package/components/licence-sign-in.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export function LicenceSignIn({ displayName = '', url = '' }) {
+export function LicenceSignIn ({ displayName = '', url = '' }) {
 	return (
 		<div className="ncf__center">
 			{renderSignInTitle(displayName)}
@@ -19,7 +19,7 @@ export function LicenceSignIn({ displayName = '', url = '' }) {
 	);
 }
 
-function renderSignInTitle(displayName) {
+function renderSignInTitle (displayName) {
 	let signInTitle;
 
 	if (displayName !== '') {

package/components/licence-title.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export function LicenceTitle({
+export function LicenceTitle ({
 	displayName = '',
 	isTrial = false,
 	isB2cPartnershipLicence = false,
@@ -21,7 +21,7 @@ export function LicenceTitle({
 	}
 }
 
-function renderB2BTitle(displayName) {
+function renderB2BTitle (displayName) {
 	if (!displayName) {
 		return (
 			<h1 className="ncf__header ncf__center">Join your FT.com subscription</h1>

package/components/lite-sub-confirmation.jsx

@@ -6,18 +6,14 @@ const PREMIUM_OFFER = 'P2';
 
 const isPremium = (productCode) => productCode === PREMIUM_OFFER;
 
-const DetailsMobileView = ({details}) => (
+const DetailsMobileView = ({ details }) => (
 	<dl className="ncf__list ncf__lite-sub__details ncf__lite-sub-confirmation--hidden-md ncf__lite-sub-confirmation--hidden-lg">
-		{
-			details.map((detail, index) =>
-				(
-					<React.Fragment key={index}>
-						<dt className="ncf__list-title">{detail.title}</dt>
-						<dd className="ncf__list-data">{detail.data}</dd>
-					</React.Fragment>
-				)
-			)
-		}
+		{details.map((detail, index) => (
+			<React.Fragment key={index}>
+				<dt className="ncf__list-title">{detail.title}</dt>
+				<dd className="ncf__list-data">{detail.data}</dd>
+			</React.Fragment>
+		))}
 	</dl>
 );
 
@@ -27,59 +23,113 @@ export function LiteSubConfirmation ({
 	subscriptionAmount = '',
 	email = EMAIL_DEFAULT_TEXT,
 	details = [],
-
 }) {
 	const detailElements = details && (
 		<React.Fragment>
 			<h2 className="ncf__header2--afterline">Your billing details</h2>
 			<dl className="ncf__list ncf__lite-sub-confirmation--hidden-sm">
-				{
-					details.map((detail, index) =>
-						(
-							<React.Fragment key={index}>
-								<dt className="ncf__list-title">{detail.title}</dt>
-								<dd className="ncf__list-data">{detail.data}</dd>
-							</React.Fragment>
-						)
-					)
-				}
+				{details.map((detail, index) => (
+					<React.Fragment key={index}>
+						<dt className="ncf__list-title">{detail.title}</dt>
+						<dd className="ncf__list-data">{detail.data}</dd>
+					</React.Fragment>
+				))}
 			</dl>
-			<DetailsMobileView details={details}/>
+			<DetailsMobileView details={details} />
 		</React.Fragment>
 	);
 
-
 	return (
 		<div className="ncf ncf__wrapper">
 			<div className="ncf__center">
 				<div className="ncf__icon ncf__icon--tick ncf__icon--large"></div>
-				<p className="ncf__paragraph--reduced-padding ncf__paragraph--subscription-confirmation">You&apos;ve been upgraded to:</p>
-				<h1 className="ncf__header ncf__header--confirmation">{isPremium(productCode) ? 'Premium Digital' : 'Standard Digital'}</h1>
+				<p className="ncf__paragraph--reduced-padding ncf__paragraph--subscription-confirmation">
+					You&apos;ve been upgraded to:
+				</p>
+				<h1 className="ncf__header ncf__header--confirmation">
+					{isPremium(productCode) ? 'Premium Digital' : 'Standard Digital'}
+				</h1>
 			</div>
-			<p className="ncf__paragraph">Thank you for choosing to subscribe to <strong>{offerName}</strong>. We are not quite ready to deliver this type of subscription, so we have upgraded you to a {isPremium(productCode) ? 'Premium' : 'Digital'} 3 month subscription at no additional cost.</p>
-			<p className="ncf__paragraph">For {subscriptionAmount} a month, here&apos;s what your subscription covers:</p>
+			<p className="ncf__paragraph">
+				Thank you for choosing to subscribe to <strong>{offerName}</strong>. We
+				are not quite ready to deliver this type of subscription, so we have
+				upgraded you to a {isPremium(productCode) ? 'Premium' : 'Digital'} 3
+				month subscription at no additional cost.
+			</p>
+			<p className="ncf__paragraph">
+				For {subscriptionAmount} a month, here&apos;s what your subscription
+				covers:
+			</p>
 			<ul className="ncf__unordered-list">
-				<li>Access to stories from over 600 journalists in 50+ countries covering markets, politics, business, tech and more</li>
-				<li>FirstFT: a daily newsletter with the global stories you need to know</li>
+				<li>
+					Access to stories from over 600 journalists in 50+ countries covering
+					markets, politics, business, tech and more
+				</li>
+				<li>
+					FirstFT: a daily newsletter with the global stories you need to know
+				</li>
 				<li>Share 10 articles per month with colleagues, family and friends</li>
 			</ul>
-			<p className="ncf__paragraph">However, if you would like to cancel your subscription, please contact our <a className="ncf__link ncf__link--external" href="https://help.ft.com/contact/" target="_blank" rel="noopener noreferrer">customer care team</a> and they will arrange this for you.</p>
+			<p className="ncf__paragraph">
+				However, if you would like to cancel your subscription, please contact
+				our{' '}
+				<a
+					className="ncf__link ncf__link--external"
+					href="https://help.ft.com/contact/"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					customer care team
+				</a>{' '}
+				and they will arrange this for you.
+			</p>
 			<p className="ncf__center">
-				<a href="/" className="ncf__button ncf__button--submit ncf__button--margin ncf__lite-sub-confirmation--lite-sub-cta">Go to FT.com</a>
+				<a
+					href="/"
+					className="ncf__button ncf__button--submit ncf__button--margin ncf__lite-sub-confirmation--lite-sub-cta"
+				>
+					Go to FT.com
+				</a>
 			</p>
 			<p className="ncf__paragraph">
-				We&apos;ve sent confirmation to {email}. Make sure you check your spam folder if you don’t receive it.
+				We&apos;ve sent confirmation to {email}. Make sure you check your spam
+				folder if you don’t receive it.
 			</p>
 			<p className="ncf__paragraph">
-				Here&apos;s a summary of your {isPremium(productCode) ? 'Premium Digital' : 'Standard Digital'} subscription:
+				Here&apos;s a summary of your{' '}
+				{isPremium(productCode) ? 'Premium Digital' : 'Standard Digital'}{' '}
+				subscription:
 			</p>
 
-			{ detailElements}
+			{detailElements}
 
 			<div className="ncf__headed-paragraph">
 				<h3 className="ncf__header">Something not right?</h3>
 				<p className="ncf__paragraph">
-					Go to your <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</a> to view or edit your account. If you need to get in touch call us on <a href="tel:+18556852372" className="ncf__link ncf__link--external">+1 855 685 2372</a>. Or <a className="ncf__link ncf__link--external" href="https://help.ft.com/contact/" target="_blank" rel="noopener noreferrer">contact us</a> for additional support.
+					Go to your{' '}
+					<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
+					</a>{' '}
+					to view or edit your account. If you need to get in touch call us on{' '}
+					<a href="tel:+18556852372" className="ncf__link ncf__link--external">
+						+1 855 685 2372
+					</a>
+					. Or{' '}
+					<a
+						className="ncf__link ncf__link--external"
+						href="https://help.ft.com/contact/"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						contact us
+					</a>{' '}
+					for additional support.
 				</p>
 			</div>
 		</div>
@@ -91,8 +141,10 @@ LiteSubConfirmation.propTypes = {
 	subscriptionAmount: PropTypes.string.isRequired,
 	productCode: PropTypes.string,
 	email: PropTypes.string,
-	details: PropTypes.arrayOf(PropTypes.shape({
-		title: PropTypes.string.isRequired,
-		data: PropTypes.string.isRequired,
-	})),
+	details: PropTypes.arrayOf(
+		PropTypes.shape({
+			title: PropTypes.string.isRequired,
+			data: PropTypes.string.isRequired,
+		})
+	),
 };

package/components/lite-sub-confirmation.stories.js

@@ -6,8 +6,8 @@ export default {
 	component: LiteSubConfirmation,
 	argTypes: {
 		details: { control: 'array' },
-		offerType: { control: 'string'},
-		offerName: { control: 'string'},
+		offerType: { control: 'string' },
+		offerName: { control: 'string' },
 	},
 };
 
@@ -26,7 +26,7 @@ Basic.args = {
 		{
 			title: 'Payment method',
 			data: 'Credit / Debit Card',
-		}
+		},
 	],
 	offerName: 'Standard',
 	subscriptionAmount: '$5',

package/components/loader.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function Loader({ children, showLoader, title, inElement }) {
+export function Loader ({ children, showLoader, title, inElement }) {
 	const label = title ? (
 		<div className="ncf__loader__content__title" id="loader-aria-label">
 			{title}

package/components/message.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function Message({
+export function Message ({
 	title,
 	message,
 	additional = [],

package/components/message.spec.jsx

@@ -50,7 +50,7 @@ describe('Message', () => {
 		const props = {
 			title: 'Reggatta de Blanc',
 			message: 'My message in a bottle',
-			actions: [{...ACTION_MOCK, isSecondary: true}],
+			actions: [{ ...ACTION_MOCK, isSecondary: true }],
 		};
 
 		expect(Message).toRenderCorrectly(props);

package/components/organisation.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function Organisation({
+export function Organisation ({
 	dataTrackable = 'organization',
 	errorText = 'Please enter your organisation',
 	fieldId = 'organisationField',

package/components/package-change.jsx

@@ -1,16 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export function PackageChange({ changePackageUrl, currentPackage, packageDescription }) {
+export function PackageChange ({
+	changePackageUrl,
+	currentPackage,
+	packageDescription,
+}) {
 	return (
 		<div className="ncf__package-change">
 			<div className="ncf__package-change__package">
 				<div className="ncf__package-change__content">
 					<p>
-						You have chosen <span className="ncf__strong">{currentPackage}</span>
+						You have chosen{' '}
+						<span className="ncf__strong">{currentPackage}</span>
 					</p>
-					{packageDescription && <p className="ncf__package-change__content__description">{packageDescription}</p>}
-				</div>	
+					{packageDescription && (
+						<p className="ncf__package-change__content__description">
+							{packageDescription}
+						</p>
+					)}
+				</div>
 				<div className="ncf__package-change__actions">
 					<a
 						href={changePackageUrl}

package/components/password.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export function Password({
+export function Password ({
 	unknownUser = false,
 	hasError = false,
 	pattern = null,

package/components/payment-term.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-export function PaymentTerm({
+export function PaymentTerm ({
 	fieldId = 'paymentTermField',
 	inputName = 'paymentTerm',
 	isPrintOrBundle = false,

package/components/payment-type.jsx

@@ -13,7 +13,7 @@ const PaypalCustomerCareMessage = () => {
 				<div className="o-message__container">
 					<div className="o-message__content">
 						<p className="o-message__content-main">
-							If you'd like to change your payment method to Paypal please{' '}
+							If you{'\''}d like to change your payment method to Paypal please{' '}
 							<a
 								className="o-message__actions__secondary"
 								href="https://help.ft.com"
@@ -29,7 +29,7 @@ const PaypalCustomerCareMessage = () => {
 	);
 };
 
-export function PaymentType({
+export function PaymentType ({
 	enableApplepay = false,
 	enableCreditcard = false,
 	enableDirectdebit = false,
@@ -250,8 +250,11 @@ export function PaymentType({
 
 				{isSingleTerm && (
 					<>
-						<label className='o-forms-input o-forms-input--checkbox o-forms-input--suffix ncf__payment-type-pay-faster-next-time-checkbox' htmlFor="payFasterNextTime">
-							<input {...inputCheckProps}/>
+						<label
+							className="o-forms-input o-forms-input--checkbox o-forms-input--suffix ncf__payment-type-pay-faster-next-time-checkbox"
+							htmlFor="payFasterNextTime"
+						>
+							<input {...inputCheckProps} />
 							<span className="o-forms-input__label">
 								Use these details to pay faster next time
 							</span>

package/components/personal-title.jsx

@@ -83,4 +83,3 @@ PersonalTitle.propTypes = {
 	fieldLabel: PropTypes.string,
 	isRequired: PropTypes.bool,
 };
-