@financial-times/n-conversion-forms 26.0.0 → 27.0.0

package/helpers/supportedCountries.js

@@ -0,0 +1,76 @@
+const { flattenObj } = require('./utilities');
+const { printRegions } = require('./constants');
+
+const supportedCountriesMasterList = {
+	cemeaV1: {
+		AUT: 'Austria',
+		ARE: 'United Arab Emirates',
+		BEL: 'Belgium',
+		BGR: 'Bulgaria',
+		HRV: 'Croatia',
+		CZE: 'Czechia',
+		DNK: 'Denmark',
+		FIN: 'Finland',
+		DEU: 'Germany',
+		GRC: 'Greece',
+		HUN: 'Hungary',
+		ISL: 'Iceland',
+		ITA: 'Italy',
+		LIE: 'Liechtenstein',
+		LTU: 'Lithuania',
+		NLD: 'Netherlands',
+		NOR: 'Norway',
+		POL: 'Poland',
+		PRT: 'Portugal',
+		QAT: 'Qatar',
+		ROU: 'Romania',
+		RUS: 'Russian Federation',
+		SVK: 'Slovakia',
+		SVN: 'Slovenia',
+		ZAF: 'South Africa',
+		ESP: 'Spain',
+		SWE: 'Sweden',
+		CHE: 'Switzerland'
+	},
+	cemeaV2: { FRA: 'France', LUX: 'Luxembourg', MCO: 'Monaco' },
+	apac: {
+		CHN: 'China',
+		HKG: 'Hong Kong',
+		IND: 'India',
+		IDN: 'Indonesia',
+		JPN: 'Japan',
+		KOR: 'Korea, Republic of',
+		MYS: 'Malaysia',
+		PHL: 'Philippines',
+		SGP: 'Singapore',
+		TWN: 'Taiwan, Province of China',
+		THA: 'Thailand'
+	},
+	other: {
+		GBR: 'United Kingdom',
+		USA: 'United States',
+		CAN: 'Canada'
+	}
+};
+
+const cemeaV1ISO = Object.keys(supportedCountriesMasterList.cemeaV1);
+const cemeaV2ISO = Object.keys(supportedCountriesMasterList.cemeaV2);
+const apacISO = Object.keys(supportedCountriesMasterList.apac);
+
+const countriesSupported = flattenObj(supportedCountriesMasterList);
+const countriesSupportedISO = Object.keys(countriesSupported);
+
+const identifyFTShippingZone = (country) => {
+	if (cemeaV1ISO.includes(country)) {
+		return printRegions.cemeaV1;
+	}
+	if (cemeaV2ISO.includes(country)) {
+		return printRegions.cemeaV2;
+	}
+	if (apacISO.includes(country)) {
+		return printRegions.apac;
+	}
+	return country;
+};
+
+module.exports = { cemeaV1ISO, cemeaV2ISO, apacISO, countriesSupported, countriesSupportedISO, identifyFTShippingZone };

package/helpers/supportedPostcodeExamples.js

@@ -0,0 +1,57 @@
+const { flattenObj } = require('./utilities');
+
+const supportedPostcodeExamples = {
+	cemeaV1: {
+		AUT: '17087',
+		ARE: '', //match anything
+		BEL: '6596',
+		BGR: '4000',
+		HRV: '10000',
+		CZE: '00 100',
+		DNK: '1819',
+		FIN: '39500',
+		DEU: '17087',
+		GRC: '241 00',
+		HUN: '3821',
+		ISL: '60411',
+		ITA: '23844',
+		LIE: '9480',
+		LTU: 'LT-12345',
+		NLD: '6971 HJ',
+		NOR: '1608',
+		POL: '43-190',
+		PRT: '2525-517',
+		QAT: '',//match anything
+		ROU: '71234',
+		RUS: '191028',
+		SVK: '98401',
+		SVN: '8263',
+		ZAF: '5189',
+		ESP: '37752',
+		SWE: '260 38',
+		CHE: '9424'
+	},
+	cemeaV2: { FRA: '95000', LUX: '1009', MCO: '98000' },
+	apac: {
+		CHN: '610000',
+		HKG: '', //match anything
+		IND: '401107',
+		IDN: '55165',
+		JPN: '100-0001',
+		KOR: '46500',
+		MYS: '59100',
+		PHL: '2799',
+		SGP: '58416',
+		TWN: '100',
+		THA: '10330'
+	},
+	other: {
+		GBR: 'EC4M 9BT',
+		USA: '60411',
+		CAN: 'M5H 3E5'
+	}
+};
+
+const allSupportedPostcodeExamples = flattenObj(supportedPostcodeExamples);
+
+module.exports = { allSupportedPostcodeExamples };

package/helpers/supportedPostcodeValidators.js

@@ -0,0 +1,53 @@
+const supportedPostcodeValidators = {
+	cemeaV1: {
+		AUT: /^\\d{4}$/,
+		ARE: /.*$/, //match anything
+		BEL: /^\\d{4}$/,
+		BGR: /^\\d{4}$/,
+		HRV: /^\\d{5}$/,
+		CZE: /^\\d{5}\\s\\(\\d{3}\\s\\d{2}\\)$/,
+		DNK: /^\\d{4}$/,
+		FIN: /^\\d{5}$/,
+		DEU: /^\\d{5}$/,
+		GRC: /^\\d{3}\\s{0,1}\\d{2}$/,
+		HUN: /^\\d{4}$/,
+		ISL: /^\\d{3}$/,
+		ITA: /^\\d{5}$/,
+		LIE: /^\\d{4}$/,
+		LTU: /^[Ll][Tt][- ]{0,1}\\d{5}$/,
+		NLD: /^\\d{4}\\s{0,1}[A-Za-z]{2}$/,
+		NOR: /^\\d{4}$/,
+		POL: /^\\d{2}[- ]{0,1}\\d{3}$/,
+		PRT: /^\\d{4}$/,
+		QAT: /.*$/,//match anything
+		ROU: /^\\d{6}$/,
+		RUS: /^\\d{6}$/,
+		SVK: /^\\d{5}\\s\\(\\d{3}\\s\\d{2}\\)$/,
+		SVN: /^([Ss][Ii][- ]{0,1}){0,1}\\d{4}$/,
+		ZAF: /^\\d{4}$/,
+		ESP: /^\\d{5}$/,
+		SWE: /^\\d{3}\\s*\\d{2}$/,
+		CHE: /^\\d{4}$/
+	},
+	cemeaV2: { FRA: /^[0-9]{5}$/, LUX: /^\\d{4}$/, MCO: /^980\\d{2}$/ },
+	apac: {
+		CHN: /^\\d{6}$/,
+		HKG: /.*$/, //match anything
+		IND: /^\\d{6}$/,
+		IDN: /^\\d{5}$/,
+		JPN: /^\\d{7}\\s\\(\\d{3}-\\d{4}\\)$/,
+		KOR: /^\\d{6}\\s\\(\\d{3}-\\d{3}\\)$/,
+		MYS: /^\\d{5}$/,
+		PHL: /^\\d{4}$/,
+		SGP: /^\\d{2}$/,
+		TWN: /^\\d{5}$/,
+		THA: /^\\d{5}$/
+	},
+	other: {
+		GBR: /^[A-Za-z]{1,2}[0-9][0-9A-Za-z]?[\s-]?[0-9][A-Za-z]{2}$/,
+		USA: /^[0-9]{5}$/,
+		CAN: /^[A-Za-z]\d[A-Za-z][\s-]?\d[A-Za-z]\d$/
+	}
+};
+
+module.exports = { supportedPostcodeValidators };

package/helpers/utilities.js

@@ -0,0 +1,14 @@
+//Recursively flattens a nested object.
+//For example: input: {a:{b:1}}  -> output: {b:1}
+const flattenObj = (obj, out={}) => {
+	Object.keys(obj).forEach(key => {
+		if (typeof obj[key] === 'object') {
+			out = flattenObj(obj[key], out); //recursively call for nesteds
+		} else {
+			out[key] = obj[key]; //direct assign for values
+		}
+	});
+	return out;
+};
+
+module.exports = { flattenObj };

package/jest.config.js

@@ -1,12 +1,19 @@
 module.exports = {
-	testPathIgnorePatterns: ['/node_modules/', '/cypress/', '/test/'],
+	testPathIgnorePatterns: [
+		'/node_modules/',
+		'/cypress/',
+		'/test/',
+	],
 	transform: {
 		'.(js|jsx)': '@sucrase/jest-plugin',
 	},
 	testMatch: [
 		'**/components/**/?(*.)+(spec|test).[tj]s?(x)',
+		'**/helpers/**/?(*.)+(spec|test).[tj]s?(x)',
 		'**/utils/**/?(*.)+(spec|test).[tj]s?(x)',
 	],
 	snapshotSerializers: ['jest-serializer-html'],
 	setupFilesAfterEnv: ['<rootDir>/test-jest/helpers/setup.js'],
+	resolver: '@financial-times/jest-browser-resolver',
+	transformIgnorePatterns: ['/node_modules//(?!(@financial-times)/)'],
 };

package/main.scss

@@ -0,0 +1,461 @@
+@import '@financial-times/o-icons/main';
+@import '@financial-times/o-colors/main';
+@import '@financial-times/o-normalise/main';
+@import '@financial-times/o-typography/main';
+@import '@financial-times/o-forms/main';
+@import '@financial-times/o-buttons/main';
+@import '@financial-times/o-message/main';
+@import '@financial-times/o-icons/main';
+@import '@financial-times/o-stepped-progress/main';
+@import '@financial-times/o-fonts/main';
+@import './styles/package-change';
+@import './styles/payment-term';
+@import './styles/payment-type';
+@import './styles/loader';
+@import './styles/accept-terms';
+@import './styles/message';
+@import './styles/continue-reading';
+@import './styles/banner';
+@import './styles/customer-care';
+@import './styles/forms-additional-field-information';
+@import './styles/error';
+@import './styles/graduation-date';
+@import './styles/lite-subs-confirmation';
+@import './styles/google-sign-in';
+@import './styles/confirmation';
+
+@include oTypography();
+@include oFonts();
+@include oForms(
+	$opts: (
+		'elements': (
+			'text',
+			'password',
+			'checkbox',
+			'select',
+			'radio-box',
+			'radio-round',
+			'textarea',
+		),
+		'features': (
+			'disabled',
+			'inline',
+			'right',
+			'suffix',
+			'error-summary',
+		),
+	)
+);
+@include oMessage();
+@include oSteppedProgress();
+
+// Custom styles
+.ncf {
+	@include oTypographySans($scale: 0);
+
+	&__divider-horizontal {
+		margin: 0 0 16px;
+		height: 0;
+		left: 0;
+		top: 0;
+		border-top: thin solid rgba(0, 0, 0, 0.15);
+	}
+
+	&__wrapper {
+		background: oColorsByName('white');
+		padding: 20px;
+
+		@include oGridRespondTo($from: S) {
+			padding: 50px;
+		}
+	}
+
+	&__margin {
+		margin: 20px 0;
+
+		@include oGridRespondTo($from: S) {
+			margin: 50px;
+		}
+	}
+
+	&__stepped-progress {
+		margin: 0 20px;
+
+		@include oGridRespondTo($from: S) {
+			margin: 0;
+		}
+	}
+
+	&__message {
+		margin: 0 0 oSpacingByName('s6');
+
+		@include oGridRespondTo($from: S) {
+			margin: 0 0 oSpacingByName('s3');
+		}
+	}
+
+	&__light-licence-text {
+		font-weight: lighter;
+	}
+
+	&__bold-licence-text {
+		font-weight: bold;
+	}
+
+	&__paragraph {
+		padding: oSpacingByName('s4') 0;
+		margin: 0;
+
+		&--reduced-padding {
+			padding: 0;
+		}
+
+		&--subscription-confirmation {
+			margin: oSpacingByName('s4') 0 oSpacingByName('s2');
+		}
+	}
+
+	&__fieldset {
+		border: 0;
+		margin: 0 0 10px;
+		min-inline-size: auto;
+		padding: 0;
+
+		.ncf__header {
+			margin: 0;
+		}
+	}
+
+	&__legend {
+		@include oTypographySans($weight: 'semibold', $include-font-family: false);
+		padding: 0;
+	}
+
+	&__fieldset-descriptor {
+		margin: 0;
+		@include oTypographySans($scale: -1, $include-font-family: false);
+	}
+
+	&__fields:not(:first-child) {
+		margin-top: oSpacingByName('s3');
+	}
+
+	&__field {
+		&--center {
+			text-align: center;
+		}
+
+		&--flex {
+			display: flex;
+			justify-content: space-between;
+		}
+
+		&--min-content {
+			grid-template-columns: 1fr min-content min-content;
+		}
+
+		&--full-width-buttons {
+			display: flex;
+			justify-content: space-between;
+			padding-left: 0;
+			padding-right: 0;
+
+			.ncf__button {
+				flex: 1;
+
+				+ .ncf__button {
+					margin-left: 20px;
+				}
+			}
+		}
+	}
+
+	&__terms {
+		@include oTypographySans($scale: 0);
+		color: oColorsByName('black-80');
+
+		&--small {
+			@include oTypographySans($scale: -1);
+		}
+	}
+
+	&__header {
+		@include oTypographyHeading($level: 3);
+
+		&--confirmation {
+			@include oTypographySerif($scale: 3);
+			margin: oSpacingByName('s6') 0;
+		}
+	}
+
+	&__headed-paragraph {
+		.ncf__header {
+			@include oTypographySans($scale: 2, $include-font-family: false);
+			padding: 0;
+			margin: 0 0 oSpacingByName('s1');
+		}
+
+		.ncf__paragraph {
+			padding: 0;
+		}
+	}
+
+	&__header2 {
+		&--afterline {
+			@include oTypographySans(
+				$scale: 1,
+				$include-font-family: false,
+				$weight: 'semibold'
+			);
+
+			&:after {
+				padding-top: oSpacingByName('s3');
+				padding-bottom: 0;
+				content: '';
+				display: block;
+				width: 90px;
+				border-bottom: oSpacingByName('s1') solid oColorsByName('black');
+			}
+		}
+	}
+
+	&__link {
+		@include oTypographyLink;
+	}
+
+	&__link--external {
+		@include oTypographyLink($external: true);
+	}
+
+	&__button {
+		&--submit {
+			@include oButtonsContent(
+				$opts: (
+					'size': 'big',
+					'type': 'primary',
+				)
+			);
+		}
+
+		&--mono {
+			@include oButtonsContent(
+				$opts: (
+					'type': 'secondary',
+					'theme': 'mono',
+				)
+			);
+		}
+
+		&--inverse {
+			@include oButtonsContent(
+				$opts: (
+					'size': 'big',
+					'theme': 'inverse',
+					'type': 'secondary',
+				)
+			);
+		}
+
+		&--secondary {
+			@include oButtonsContent(
+				$opts: (
+					'size': 'big',
+					'type': 'secondary',
+				)
+			);
+		}
+
+		&--google {
+			@include oButtonsContent(
+				$opts: (
+					'size': 'big',
+					'type': 'secondary',
+				)
+			);
+			background-color: oColorsByName('white');
+			padding-left: 40px;
+
+			&::before {
+				content: '';
+				background: transparent
+					url('https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fwww.ft.com%2F__assets%2Fcreatives%2FG_active_focused_pressed.svg?source=m-login&width=20&height=20&format=svg')
+					no-repeat;
+				position: absolute;
+				left: 10px;
+				width: 18px;
+				height: 18px;
+			}
+		}
+
+		&--baseline {
+			vertical-align: baseline;
+		}
+
+		&--mid-width {
+			width: 30%;
+		}
+
+		&--margin {
+			margin: 20px 0;
+		}
+	}
+
+	&__center {
+		text-align: center;
+	}
+
+	&__strong {
+		font-weight: oFontsWeight('semibold');
+	}
+
+	&__regular {
+		font-weight: oFontsWeight('regular');
+	}
+
+	&__icon {
+		background: oColorsByName('paper');
+		border: 2px solid oColorsByName('black-40');
+		border-radius: 9999px;
+		display: block;
+		height: 20px;
+		margin: 0 auto;
+		width: 20px;
+	}
+
+	&__icon--tick {
+		background: oColorsByName('teal');
+		border-color: oColorsByName('teal');
+		&::before {
+			@include oIconsContent(
+				$icon-name: 'tick',
+				$color: oColorsByName('white'),
+				$size: 20
+			);
+			content: '';
+			color: oColorsByName('white');
+		}
+	}
+
+	&__icon--phone {
+		background: oColorsByName('teal');
+		border-color: oColorsByName('teal');
+		&::before {
+			@include oIconsContent(
+				$icon-name: 'phone',
+				$color: oColorsByName('white'),
+				$size: 20
+			);
+			content: '';
+			color: oColorsByName('white');
+		}
+	}
+
+	&__icon--error {
+		background: oColorsByName('crimson');
+		border-color: oColorsByName('crimson');
+		&::before {
+			@include oIconsContent(
+				$icon-name: 'warning',
+				$color: oColorsByName('white'),
+				$size: 20
+			);
+			content: '';
+			color: oColorsByName('white');
+		}
+	}
+
+	&__icon--inline-edit {
+		@include oIconsContent(
+			$icon-name: 'edit',
+			$color: oColorsByName('black'),
+			$size: 20
+		);
+		border: 0;
+		vertical-align: middle;
+	}
+
+	&__icon--large {
+		width: 40px;
+		height: 40px;
+		&::before {
+			width: 40px;
+			height: 40px;
+		}
+	}
+
+	&__icon-download {
+		@include oIconsContent(
+			$icon-name: 'download',
+			$color: oColorsByName('black-70'),
+			$size: 32
+		);
+		border: 0;
+		vertical-align: middle;
+	}
+
+	&__list {
+		&-title,
+		&-data {
+			width: calc(50% - 10px);
+			margin: 8px 0;
+			display: inline-block;
+			vertical-align: middle;
+		}
+		&-description {
+			margin: -10px 0 10px;
+			@include oTypographySans($scale: -1, $include-font-family: false);
+		}
+
+		&-title {
+			font-weight: oFontsWeight('semibold');
+		}
+	}
+
+	&__delivery-option {
+		@include bigRadioButton($className: '.ncf__delivery-option');
+	}
+
+	&__delivery-option--single {
+		.ncf__delivery-option__label {
+			// We need to hide the radio button if this the sole delivery option
+			&::after,
+			&::before {
+				display: none;
+			}
+		}
+	}
+
+	&__unordered-list {
+		padding-inline-start: 25px;
+		> li {
+			margin-bottom: oSpacingByName('s3');
+		}
+	}
+
+	@include ncfMessage();
+	@include ncfPackageChange();
+	@include ncfPaymentTerm();
+	@include ncfPaymentType();
+	@include ncfLoader();
+	@include ncfContinueReading();
+	@include ncfBanner();
+	@include ncfCustomerCarePanel();
+	@include ncfAcceptTermsList();
+	@include ncfGraduationDate();
+	@include ncfLiteSubsConfirmation();
+	@include ncfConfirmation();
+
+	&__hidden {
+		display: none !important;
+	}
+
+	.o-normalise-visually-hidden {
+		@include oNormaliseVisuallyHidden;
+	}
+}
+
+@include ncfGoogleSignIn();
+
+.ncf__password-field .ncf__password-field--show-password {
+	margin-top: 7px;
+}