@financial-times/n-conversion-forms 41.0.4 → 41.1.0

package/.toolkitstate/ci.json

@@ -1,7 +1,7 @@
 {
   "branch": "",
   "repo": "n-conversion-forms",
-  "version": "028ebcce5ada092046618b69deb793c2d6407133",
-  "tag": "v41.0.4",
-  "buildNumber": "15627"
+  "version": "934904541de6ceb44cf85d8171392787478cd084",
+  "tag": "v41.1.0",
+  "buildNumber": "15757"
 }

package/README.md

@@ -345,7 +345,7 @@ You can add some custom validation functionality as follows:
 
 ```js
 validation.addCustomValidation({
-	errorMessage: 'Custom error message here.',
+	errorMessage: 'Custom error message here.',  // can be a string or a function return that returns a string
 	field: domElementToValidate,
 	validator: () => {
 		// Custom validation code here. *Must* return truthy or falsey.
@@ -355,6 +355,20 @@ validation.addCustomValidation({
 
 If the validation fails, the field will look like it usually does when validation fails with your specified message displayed underneath.
 
+### YearOfBirth
+
+The Year of Birth utility provides a more friendly way to get the value in the input field and add event listener on blur.
+
+```js
+const yearOfBirth = new YearOfBirth(document));
+// Get the value in the input field
+const yearOfBirthInputValue = yearOfBirth.getYearOfBirth();
+// add event listener to the input field on blur
+yearOfBirth.handleYearOfBirthBlur(() => {
+	doSomething();
+});
+```
+
 ### Zuora
 
 The Zuora utility aims to wrap the Zuora client side library to make it more user friendly.

package/components/__snapshots__/year-of-birth.spec.js.snap

@@ -0,0 +1,200 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`YearOfBirth render a year of birth input with default value 1`] = `
+<label id="yearOfBirthField"
+       for="yearOfBirth"
+       class="o-forms-field ncf__validation-error"
+       data-validate="required,number"
+>
+  <span class="o-forms-title">
+    <span class="o-forms-title__main">
+      Year of birth
+    </span>
+    <span class="o-forms-title__prompt">
+    </span>
+  </span>
+  <span class="o-forms-input o-forms-input--text">
+    <input type="number"
+           id="yearOfBirth"
+           name="yearOfBirth"
+           placeholder="YYYY"
+           autocomplete="bday-year"
+           minlength="4"
+           maxlength="4"
+           data-trackable="year-of-birth"
+           aria-required="true"
+           required
+           value="2001"
+    >
+    <span class="o-forms-input__error">
+      Please enter a valid year of birth
+    </span>
+  </span>
+</label>
+`;
+
+exports[`YearOfBirth render a year of birth input with disabled field 1`] = `
+<label id="yearOfBirthField"
+       for="yearOfBirth"
+       class="o-forms-field ncf__validation-error"
+       data-validate="required,number"
+>
+  <span class="o-forms-title">
+    <span class="o-forms-title__main">
+      Year of birth
+    </span>
+    <span class="o-forms-title__prompt">
+    </span>
+  </span>
+  <span class="o-forms-input o-forms-input--text">
+    <input type="number"
+           id="yearOfBirth"
+           name="yearOfBirth"
+           placeholder="YYYY"
+           autocomplete="bday-year"
+           minlength="4"
+           maxlength="4"
+           data-trackable="year-of-birth"
+           aria-required="true"
+           required
+           disabled
+           value="2001"
+    >
+    <span class="o-forms-input__error">
+      Please enter a valid year of birth
+    </span>
+  </span>
+</label>
+`;
+
+exports[`YearOfBirth renders a year of birth input with custom prompt 1`] = `
+<label id="yearOfBirthField"
+       for="yearOfBirth"
+       class="o-forms-field ncf__validation-error"
+       data-validate="required,number"
+>
+  <span class="o-forms-title">
+    <span class="o-forms-title__main">
+      Year of birth
+    </span>
+    <span class="o-forms-title__prompt">
+      This helps us ensure people of all ages find value in the FT
+    </span>
+  </span>
+  <span class="o-forms-input o-forms-input--text">
+    <input type="number"
+           id="yearOfBirth"
+           name="yearOfBirth"
+           placeholder="YYYY"
+           autocomplete="bday-year"
+           minlength="4"
+           maxlength="4"
+           data-trackable="year-of-birth"
+           aria-required="true"
+           required
+           value
+    >
+    <span class="o-forms-input__error">
+      Please enter a valid year of birth
+    </span>
+  </span>
+</label>
+`;
+
+exports[`YearOfBirth renders a year of birth input with default error message 1`] = `
+<label id="yearOfBirthField"
+       for="yearOfBirth"
+       class="o-forms-field ncf__validation-error"
+       data-validate="required,number"
+>
+  <span class="o-forms-title">
+    <span class="o-forms-title__main">
+      Year of birth
+    </span>
+    <span class="o-forms-title__prompt">
+    </span>
+  </span>
+  <span class="o-forms-input o-forms-input--text o-forms-input--invalid">
+    <input type="number"
+           id="yearOfBirth"
+           name="yearOfBirth"
+           placeholder="YYYY"
+           autocomplete="bday-year"
+           minlength="4"
+           maxlength="4"
+           data-trackable="year-of-birth"
+           aria-required="true"
+           required
+           value
+    >
+    <span class="o-forms-input__error">
+      Please enter a valid year of birth
+    </span>
+  </span>
+</label>
+`;
+
+exports[`YearOfBirth renders a year of birth input with default params 1`] = `
+<label id="yearOfBirthField"
+       for="yearOfBirth"
+       class="o-forms-field ncf__validation-error"
+       data-validate="required,number"
+>
+  <span class="o-forms-title">
+    <span class="o-forms-title__main">
+      Year of birth
+    </span>
+    <span class="o-forms-title__prompt">
+    </span>
+  </span>
+  <span class="o-forms-input o-forms-input--text">
+    <input type="number"
+           id="yearOfBirth"
+           name="yearOfBirth"
+           placeholder="YYYY"
+           autocomplete="bday-year"
+           minlength="4"
+           maxlength="4"
+           data-trackable="year-of-birth"
+           aria-required="true"
+           required
+           value
+    >
+    <span class="o-forms-input__error">
+      Please enter a valid year of birth
+    </span>
+  </span>
+</label>
+`;
+
+exports[`YearOfBirth renders an optional year of birth input 1`] = `
+<label id="yearOfBirthField"
+       for="yearOfBirth"
+       class="o-forms-field ncf__validation-error"
+       data-validate="required,number"
+>
+  <span class="o-forms-title o-forms-field--optional">
+    <span class="o-forms-title__main">
+      Year of birth
+    </span>
+    <span class="o-forms-title__prompt">
+    </span>
+  </span>
+  <span class="o-forms-input o-forms-input--text">
+    <input type="number"
+           id="yearOfBirth"
+           name="yearOfBirth"
+           placeholder="YYYY"
+           autocomplete="bday-year"
+           minlength="4"
+           maxlength="4"
+           data-trackable="year-of-birth"
+           aria-required="false"
+           value
+    >
+    <span class="o-forms-input__error">
+      Please enter a valid year of birth
+    </span>
+  </span>
+</label>
+`;

package/components/index.js

@@ -57,3 +57,4 @@ 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/industry.spec.js

@@ -1,8 +1,7 @@
 import { Industry } from './index';
 import { expectToRenderCorrectly } from '../test-jest/helpers/expect-to-render-correctly';
-import { demographics } from 'n-common-static-data';
+import { demographics } from '../helpers/demographics';
 const defaultOptions = demographics.industries.industries;
-
 import Enzyme, { mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 Enzyme.configure({ adapter: new Adapter() });

package/components/position.spec.js

@@ -1,6 +1,6 @@
 import { Position } from './index';
 import { expectToRenderCorrectly } from '../test-jest/helpers/expect-to-render-correctly';
-import { demographics } from 'n-common-static-data';
+import { demographics } from '../helpers/demographics';
 const B2CPositions = demographics.positions.positions;
 
 import Enzyme, { mount } from 'enzyme';

package/components/responsibility.spec.js

@@ -1,6 +1,6 @@
 import { Responsibility } from './index';
 import { expectToRenderCorrectly } from '../test-jest/helpers/expect-to-render-correctly';
-import { demographics } from 'n-common-static-data';
+import { demographics } from '../helpers/demographics';
 const B2CResponsibilities = demographics.responsibilities.responsibilities;
 
 import Enzyme, { mount } from 'enzyme';

package/components/year-of-birth.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export function YearOfBirth({
+	hasError = false,
+	customErrorMessage = '',
+	isDisabled = false,
+	isRequired = true,
+	value = '',
+	prompt = '',
+	fieldId = 'yearOfBirthField',
+	inputId = 'yearOfBirth',
+	inputName = 'yearOfBirth',
+	fieldLabel = 'Year of birth',
+	dataTrackable = 'year-of-birth',
+}) {
+	const inputWrapperClassNames = classNames([
+		'o-forms-input',
+		'o-forms-input--text',
+		{ 'o-forms-input--invalid': hasError },
+	]);
+
+	const fieldTitleClassName = classNames([
+		'o-forms-title',
+		{ 'o-forms-field--optional': !isRequired },
+	]);
+
+	return (
+		<label
+			id={fieldId}
+			htmlFor={inputId}
+			className="o-forms-field ncf__validation-error"
+			data-validate="required,number"
+		>
+			<span className={fieldTitleClassName}>
+				<span className="o-forms-title__main">{fieldLabel}</span>
+				<span className="o-forms-title__prompt">{prompt}</span>
+			</span>
+			<span className={inputWrapperClassNames}>
+				<input
+					type="number"
+					id={inputId}
+					name={inputName}
+					placeholder="YYYY"
+					autoComplete="bday-year"
+					minLength="4"
+					maxLength="4"
+					data-trackable={dataTrackable}
+					aria-required={isRequired}
+					required={isRequired}
+					disabled={isDisabled}
+					defaultValue={value}
+				/>
+				<span className="o-forms-input__error">
+					{customErrorMessage || 'Please enter a valid year of birth'}
+				</span>
+			</span>
+		</label>
+	);
+}
+
+YearOfBirth.propTypes = {
+	hasError: PropTypes.bool,
+	customErrorMessage: PropTypes.string,
+	isDisabled: PropTypes.bool,
+	isRequired: PropTypes.bool,
+	value: PropTypes.string,
+	prompt: PropTypes.string,
+	fieldId: PropTypes.string,
+	inputId: PropTypes.string,
+	inputName: PropTypes.string,
+	fieldLabel: PropTypes.string,
+	dataTrackable: PropTypes.string,
+};

package/components/year-of-birth.spec.js

@@ -0,0 +1,53 @@
+import { YearOfBirth } from './index';
+import { expectToRenderCorrectly } from '../test-jest/helpers/expect-to-render-correctly';
+
+expect.extend(expectToRenderCorrectly);
+
+describe('YearOfBirth', () => {
+	it('renders a year of birth input with default params', () => {
+		const props = {};
+
+		expect(YearOfBirth).toRenderCorrectly(props);
+	});
+
+	it(`renders a year of birth input with custom prompt`, () => {
+		const props = {
+			prompt: 'This helps us ensure people of all ages find value in the FT',
+		};
+
+		expect(YearOfBirth).toRenderCorrectly(props);
+	});
+
+	it(`renders a year of birth input with default error message`, () => {
+		const props = {
+			hasError: true,
+		};
+
+		expect(YearOfBirth).toRenderCorrectly(props);
+	});
+
+	it(`renders an optional year of birth input`, () => {
+		const props = {
+			isRequired: false,
+		};
+
+		expect(YearOfBirth).toRenderCorrectly(props);
+	});
+
+	it('render a year of birth input with default value', () => {
+		const props = {
+			value: '2001',
+		};
+
+		expect(YearOfBirth).toRenderCorrectly(props);
+	});
+
+	it('render a year of birth input with disabled field', () => {
+		const props = {
+			value: '2001',
+			isDisabled: true,
+		};
+
+		expect(YearOfBirth).toRenderCorrectly(props);
+	});
+});

package/components/year-of-birth.stories.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { YearOfBirth } from './year-of-birth';
+
+export default {
+	title: 'Year of Birth',
+	component: YearOfBirth,
+};
+
+export const Basic = (args) => <YearOfBirth {...args} />;
+Basic.args = {
+	isRequired: true,
+	value: '1980',
+	prompt: 'This helps us ensure people of all ages find value in the FT',
+	fieldLabel: 'Year of birth',
+};

package/dist/index.js

@@ -357,6 +357,12 @@ Object.defineProperty(exports, "TrialBanner", {
     return _trialBanner.TrialBanner;
   }
 });
+Object.defineProperty(exports, "YearOfBirth", {
+  enumerable: true,
+  get: function get() {
+    return _yearOfBirth.YearOfBirth;
+  }
+});
 var _acceptTerms = require("./accept-terms");
 var _acceptTermsPrivacyPolicy = require("./accept-terms-privacy-policy");
 var _acceptTermsSubscription = require("./accept-terms-subscription");
@@ -415,4 +421,5 @@ var _educationJobTitle = require("./education-job-title");
 var _graduationDate = require("./graduation-date");
 var _googleSignIn = require("./google-sign-in");
 var _textInput = require("./text-input");
-var _deferredBillingTerms = require("./deferred-billing-terms");
+var _deferredBillingTerms = require("./deferred-billing-terms");
+var _yearOfBirth = require("./year-of-birth");

package/dist/year-of-birth.jsx

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.YearOfBirth = YearOfBirth;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+function YearOfBirth(_ref) {
+  var _ref$hasError = _ref.hasError,
+    hasError = _ref$hasError === void 0 ? false : _ref$hasError,
+    _ref$customErrorMessa = _ref.customErrorMessage,
+    customErrorMessage = _ref$customErrorMessa === void 0 ? '' : _ref$customErrorMessa,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isRequired = _ref.isRequired,
+    isRequired = _ref$isRequired === void 0 ? true : _ref$isRequired,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? '' : _ref$value,
+    _ref$prompt = _ref.prompt,
+    prompt = _ref$prompt === void 0 ? '' : _ref$prompt,
+    _ref$fieldId = _ref.fieldId,
+    fieldId = _ref$fieldId === void 0 ? 'yearOfBirthField' : _ref$fieldId,
+    _ref$inputId = _ref.inputId,
+    inputId = _ref$inputId === void 0 ? 'yearOfBirth' : _ref$inputId,
+    _ref$inputName = _ref.inputName,
+    inputName = _ref$inputName === void 0 ? 'yearOfBirth' : _ref$inputName,
+    _ref$fieldLabel = _ref.fieldLabel,
+    fieldLabel = _ref$fieldLabel === void 0 ? 'Year of birth' : _ref$fieldLabel,
+    _ref$dataTrackable = _ref.dataTrackable,
+    dataTrackable = _ref$dataTrackable === void 0 ? 'year-of-birth' : _ref$dataTrackable;
+  var inputWrapperClassNames = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--text', {
+    'o-forms-input--invalid': hasError
+  }]);
+  var fieldTitleClassName = (0, _classnames["default"])(['o-forms-title', {
+    'o-forms-field--optional': !isRequired
+  }]);
+  return /*#__PURE__*/_react["default"].createElement("label", {
+    id: fieldId,
+    htmlFor: inputId,
+    className: "o-forms-field ncf__validation-error",
+    "data-validate": "required,number"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: fieldTitleClassName
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__main"
+  }, fieldLabel), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__prompt"
+  }, prompt)), /*#__PURE__*/_react["default"].createElement("span", {
+    className: inputWrapperClassNames
+  }, /*#__PURE__*/_react["default"].createElement("input", {
+    type: "number",
+    id: inputId,
+    name: inputName,
+    placeholder: "YYYY",
+    autoComplete: "bday-year",
+    minLength: "4",
+    maxLength: "4",
+    "data-trackable": dataTrackable,
+    "aria-required": isRequired,
+    required: isRequired,
+    disabled: isDisabled,
+    defaultValue: value
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-input__error"
+  }, customErrorMessage || 'Please enter a valid year of birth')));
+}
+YearOfBirth.propTypes = {
+  hasError: _propTypes["default"].bool,
+  customErrorMessage: _propTypes["default"].string,
+  isDisabled: _propTypes["default"].bool,
+  isRequired: _propTypes["default"].bool,
+  value: _propTypes["default"].string,
+  prompt: _propTypes["default"].string,
+  fieldId: _propTypes["default"].string,
+  inputId: _propTypes["default"].string,
+  inputName: _propTypes["default"].string,
+  fieldLabel: _propTypes["default"].string,
+  dataTrackable: _propTypes["default"].string
+};

package/helpers/demographics.js

@@ -1,3 +1,606 @@
-const { demographics } = require('n-common-static-data');
+const demographics = {
+	industries: {
+		industries: [
+			{
+				description: 'Accountancy & tax advisory',
+				code: 'ACC',
+				status: 'active',
+			},
+			{
+				description: 'Banking',
+				code: 'BKG',
+				status: 'active',
+			},
+			{
+				description: 'Financial services',
+				code: 'FSE',
+				status: 'active',
+			},
+			{
+				description: 'Comms/Publishing/Media',
+				code: 'MAP',
+				status: 'active',
+			},
+			{
+				description: 'Govt/public service/NGO',
+				code: 'GPV',
+				status: 'active',
+			},
+			{
+				description: 'Education/Academia',
+				code: 'EDU',
+				status: 'active',
+			},
+			{
+				description: 'IT/computing',
+				code: 'IT',
+				status: 'active',
+			},
+			{
+				description: 'Telecommunications',
+				code: 'TEL',
+				status: 'active',
+			},
+			{
+				description: 'Industrial goods & services',
+				code: 'MAN',
+				status: 'active',
+			},
+			{
+				description: 'Consulting/business services',
+				code: 'BSE',
+				status: 'active',
+			},
+			{
+				description: 'Trade/import/export',
+				code: 'TIE',
+				status: 'active',
+			},
+			{
+				description: 'Chemicals',
+				code: 'PHC',
+				status: 'active',
+			},
+			{
+				description: 'Transport/logistics',
+				code: 'TRL',
+				status: 'active',
+			},
+			{
+				description: 'Travel & leisure',
+				code: 'TRV',
+				status: 'active',
+			},
+			{
+				description: 'Engineering/construction',
+				code: 'ENC',
+				status: 'active',
+			},
+			{
+				description: 'Oil/gas/mining',
+				code: 'OGM',
+				status: 'active',
+			},
+			{
+				description: 'Legal services',
+				code: 'LAW',
+				status: 'active',
+			},
+			{
+				description: 'Personal & household goods',
+				code: 'RET',
+				status: 'active',
+			},
+			{
+				description: 'N/A',
+				code: 'OTH',
+				status: 'active',
+			},
+			{
+				description: 'Property',
+				code: 'REA',
+				status: 'active',
+			},
+			{
+				description: 'IT/Tech/Telecoms',
+				code: 'ITT',
+				status: 'active',
+			},
+			{
+				description: 'Energy/utilities',
+				code: 'ENU',
+				status: 'active',
+			},
+			{
+				description: 'Aerospace & defence',
+				code: 'DEF',
+				status: 'active',
+			},
+			{
+				description: 'Automobiles',
+				code: 'CAR',
+				status: 'active',
+			},
+			{
+				description: 'Basic resources/mining',
+				code: 'RES',
+				status: 'active',
+			},
+			{
+				description: 'Health & pharmaceuticals',
+				code: 'HEA',
+				status: 'active',
+			},
+			{
+				description: 'Food & beverages',
+				code: 'FOO',
+				status: 'active',
+			},
+			{
+				description: 'Fund/asset management',
+				code: 'FAM',
+				status: 'active',
+			},
+			{
+				description: 'Insurance',
+				code: 'INS',
+				status: 'active',
+			},
+			{
+				description: 'Retail',
+				code: 'RTL',
+				status: 'active',
+			},
+			{
+				description: 'Apparel and Fashion',
+				code: 'APF',
+				status: 'active',
+			},
+			{
+				description: 'Biotechnology',
+				code: 'BIO',
+				status: 'active',
+			},
+			{
+				description: 'Capital Markets',
+				code: 'CAP',
+				status: 'active',
+			},
+			{
+				description: 'Computer Games',
+				code: 'GAM',
+				status: 'active',
+			},
+			{
+				description: 'Cosmetics',
+				code: 'COS',
+				status: 'active',
+			},
+			{
+				description: 'Design',
+				code: 'DES',
+				status: 'active',
+			},
+			{
+				description: 'Electrical/Electronic Manufacturing',
+				code: 'ELE',
+				status: 'active',
+			},
+			{
+				description: 'Environmental Services',
+				code: 'ENV',
+				status: 'active',
+			},
+			{
+				description: 'Executive Office',
+				code: 'EXE',
+				status: 'active',
+			},
+			{
+				description: 'Hospitality',
+				code: 'HOS',
+				status: 'active',
+			},
+			{
+				description: 'Import and Export',
+				code: 'IAE',
+				status: 'active',
+			},
+			{
+				description: 'Investment banking',
+				code: 'INV',
+				status: 'active',
+			},
+			{
+				description: 'Luxury goods and jewelry',
+				code: 'LUX',
+				status: 'active',
+			},
+			{
+				description: 'Management consultancy',
+				code: 'MNG',
+				status: 'active',
+			},
+			{
+				description: 'Mental Healthcare',
+				code: 'MEN',
+				status: 'active',
+			},
+			{
+				description: 'Mining and Metals',
+				code: 'MET',
+				status: 'active',
+			},
+			{
+				description: 'Outsourcing/Offshoring',
+				code: 'OUT',
+				status: 'active',
+			},
+			{
+				description: 'Philanthropy',
+				code: 'PHL',
+				status: 'active',
+			},
+			{
+				description: 'Plastics',
+				code: 'PLA',
+				status: 'active',
+			},
+			{
+				description: 'Political organisation',
+				code: 'POL',
+				status: 'active',
+			},
+			{
+				description: 'Public Policy',
+				code: 'PUB',
+				status: 'active',
+			},
+			{
+				description: 'Public Relations and communications',
+				code: 'REL',
+				status: 'active',
+			},
+			{
+				description: 'Renewables and environment',
+				code: 'REN',
+				status: 'active',
+			},
+			{
+				description: 'Shipbuilding',
+				code: 'SHI',
+				status: 'active',
+			},
+			{
+				description: 'Sporting Goods',
+				code: 'SPG',
+				status: 'active',
+			},
+			{
+				description: 'Sports',
+				code: 'SPO',
+				status: 'active',
+			},
+			{
+				description: 'Staffing and recruiting',
+				code: 'STA',
+				status: 'active',
+			},
+			{
+				description: 'Tobacco',
+				code: 'TOB',
+				status: 'active',
+			},
+			{
+				description: 'Venture capital and private equity',
+				code: 'VEN',
+				status: 'active',
+			},
+		],
+	},
+	positions: {
+		positions: [
+			{
+				description: 'Academic',
+				code: 'BU',
+				status: 'active',
+			},
+			{
+				description: 'Analyst',
+				code: 'AN',
+				status: 'active',
+			},
+			{
+				description: 'Consultant',
+				code: 'CS',
+				status: 'active',
+			},
+			{
+				description: 'Associate',
+				code: 'AS',
+				status: 'active',
+			},
+			{
+				description: 'Broker/Trader/Advisor',
+				code: 'BR',
+				status: 'active',
+			},
+			{
+				description: 'CEO/President/Chairperson',
+				code: 'CP',
+				status: 'active',
+			},
+			{
+				description: 'C-Suite',
+				code: 'CL',
+				status: 'active',
+			},
+			{
+				description: 'Director',
+				code: 'DR',
+				status: 'active',
+			},
+			{
+				description: 'Diplomat/Sen Govt Officer',
+				code: 'GI',
+				status: 'active',
+			},
+			{
+				description: 'Intern/Trainee/Student',
+				code: 'IN',
+				status: 'active',
+			},
+			{
+				description: 'Manager/Supervisor',
+				code: 'MA',
+				status: 'active',
+			},
+			{
+				description: 'MBA Student',
+				code: 'MB',
+				status: 'active',
+			},
+			{
+				description: 'Not working',
+				code: 'NW',
+				status: 'active',
+			},
+			{
+				description: 'Executive Management',
+				code: 'OE',
+				status: 'active',
+			},
+			{
+				description: 'Other',
+				code: 'OT',
+				status: 'active',
+			},
+			{
+				description: 'Founder/Owner',
+				code: 'OP',
+				status: 'active',
+			},
+			{
+				description: 'Partner/Principal',
+				code: 'PA',
+				status: 'active',
+			},
+			{
+				description: 'Programme/Project Manager',
+				code: 'PM',
+				status: 'active',
+			},
+			{
+				description: 'Politician/Government Minister',
+				code: 'PO',
+				status: 'active',
+			},
+			{
+				description: 'Senior Manager/Dept Head',
+				code: 'SM',
+				status: 'active',
+			},
+			{
+				description: 'Technical/Business Specialist',
+				code: 'TS',
+				status: 'active',
+			},
+			{
+				description: 'Vice President',
+				code: 'VP',
+				status: 'active',
+			},
+		],
+	},
+	responsibilities: {
+		responsibilities: [
+			{
+				description: 'Finance',
+				code: 'FIN',
+				status: 'active',
+			},
+			{
+				description: 'Marketing',
+				code: 'MKT',
+				status: 'active',
+			},
+			{
+				description: 'Strategy',
+				code: 'CPL',
+				status: 'active',
+			},
+			{
+				description: 'Legal',
+				code: 'LEG',
+				status: 'active',
+			},
+			{
+				description: 'Human resources',
+				code: 'PAT',
+				status: 'active',
+			},
+			{
+				description: 'Administration',
+				code: 'ADL',
+				status: 'active',
+			},
+			{
+				description: 'Financial Advisor',
+				code: 'IFA',
+				status: 'active',
+			},
+			{
+				description: 'Data & Analytics',
+				code: 'RAD',
+				status: 'active',
+			},
+			{
+				description: 'Sales & business development',
+				code: 'SAL',
+				status: 'active',
+			},
+			{
+				description: 'Not working',
+				code: 'NOT',
+				status: 'active',
+			},
+			{
+				description: 'Portfolio management',
+				code: 'MON',
+				status: 'active',
+			},
+			{
+				description: 'Investments',
+				code: 'PRI',
+				status: 'active',
+			},
+			{
+				description: 'Student',
+				code: 'STU',
+				status: 'active',
+			},
+			{
+				description: 'Information technology',
+				code: 'TEC',
+				status: 'active',
+			},
+			{
+				description: 'Purchasing & procurement',
+				code: 'BUY',
+				status: 'active',
+			},
+			{
+				description: 'Knowledge & information management',
+				code: 'KNO',
+				status: 'active',
+			},
+			{
+				description: 'Operations',
+				code: 'OPS',
+				status: 'active',
+			},
+			{
+				description: 'Product management',
+				code: 'PRO',
+				status: 'active',
+			},
+			{
+				description: 'Risk & compliance',
+				code: 'RSK',
+				status: 'active',
+			},
+			{
+				description: 'Accounting',
+				code: 'ACC',
+				status: 'active',
+			},
+			{
+				description: 'Arts & design',
+				code: 'ART',
+				status: 'active',
+			},
+			{
+				description: 'Community & social services',
+				code: 'COM',
+				status: 'active',
+			},
+			{
+				description: 'Consulting',
+				code: 'COS',
+				status: 'active',
+			},
+			{
+				description: 'Engineering',
+				code: 'ENG',
+				status: 'active',
+			},
+			{
+				description: 'Facilities',
+				code: 'FAC',
+				status: 'active',
+			},
+			{
+				description: 'Healthcare services',
+				code: 'HEA',
+				status: 'active',
+			},
+			{
+				description: 'Media & communication',
+				code: 'MED',
+				status: 'active',
+			},
+			{
+				description: 'Program and project management',
+				code: 'PMN',
+				status: 'active',
+			},
+			{
+				description: 'Real Estate',
+				code: 'REA',
+				status: 'active',
+			},
+			{
+				description: 'Research',
+				code: 'RSR',
+				status: 'active',
+			},
+			{
+				description: 'Support',
+				code: 'SUP',
+				status: 'active',
+			},
+			{
+				description: 'Teaching & training',
+				code: 'TEA',
+				status: 'active',
+			},
+			{
+				description: 'ESG (Env’tl, Social & Corp. Governance)',
+				code: 'ESG',
+				status: 'active',
+			},
+			{
+				description: 'Fund management',
+				code: 'FUM',
+				status: 'active',
+			},
+			{
+				description: 'Learning & Development',
+				code: 'LEA',
+				status: 'active',
+			},
+			{
+				description: 'Policy making',
+				code: 'POL',
+				status: 'active',
+			},
+			{
+				description: 'Quantitative Analysis',
+				code: 'QUA',
+				status: 'active',
+			},
+		],
+	},
+};
 
 module.exports = { demographics };

package/helpers/index.js

@@ -13,6 +13,5 @@ module.exports = {
 		.supportedPostcodeValidators,
 	allSupportedPostcodeExamples: require('./supportedPostcodeExamples')
 		.allSupportedPostcodeExamples,
-	demographics: require('./demographics').demographics,
 	billingCountries: require('./billing-countries').billingCountries,
 };

package/helpers/index.spec.js

@@ -14,11 +14,6 @@ describe('helpers', () => {
 		expect(helpers['billingCountries']).toHaveProperty('countries');
 	});
 
-	it('export demographics', () => {
-		expect(helpers).toHaveProperty('demographics');
-		expect(helpers['demographics']).toHaveProperty('industries');
-	});
-
 	it('export cemeaV1ISO', () => {
 		expect(helpers).toHaveProperty('cemeaV1ISO');
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-conversion-forms",
-  "version": "41.0.4",
+  "version": "41.1.0",
   "description": "Containing jsx components and styles for forms included on Accounts and Acquisition apps (next-signup, next-profile, next-retention, etc).",
   "main": "./dist/index.js",
   "scripts": {

package/utils/validation.js

@@ -13,7 +13,11 @@ class Validation {
 	 * @param {boolean} [mutePromptBeforeLeaving=false] (default: false) Whether to prompt the user before leaving if there have been changes in any of the fields.
 	 * @param {FormsOptions} [formsOptions={}] Options object for Origami Forms: https://github.com/Financial-Times/origami/blob/main/components/o-forms/src/js/forms.js
 	 */
-	constructor({ mutePromptBeforeLeaving, formsOptions } = {}) {
+	constructor({
+		mutePromptBeforeLeaving,
+		formsOptions,
+		debounceInterval = 1500,
+	} = {}) {
 		this.$form = document.querySelector('form.ncf');
 		this.oForms = OForms.init(this.$form, formsOptions);
 		this.$requiredEls = this.oForms.formInputs.filter(
@@ -24,6 +28,7 @@ class Validation {
 		this.formSubmit = false;
 		this.mutePromptBeforeLeaving = mutePromptBeforeLeaving || false;
 		this.customValidation = new Map();
+		this.debounceInterval = debounceInterval;
 	}
 
 	/**
@@ -78,7 +83,7 @@ class Validation {
 	 *
 	 * @param {DOMElement} field The field the custom validation is being added on to.
 	 * @param {Function} validator The function that will be run to determine whether the field is valid (needs to return `true` or `false`).
-	 * @param {String} errorMessage The error message to display to the user should the validation fail.
+	 * @param {String | Function} errorMessage The error message to display to the user should the validation fail.
 	 */
 	addCustomValidation({ field, validator, errorMessage }) {
 		if (this.customValidation.get(field.name)) {
@@ -91,7 +96,10 @@ class Validation {
 
 			$message.id = id;
 			$message.className = 'o-forms-input__error ncf__custom-validation-error';
-			$message.innerHTML = errorMessage;
+			$message.innerHTML =
+				typeof errorMessage === 'function'
+					? await errorMessage()
+					: errorMessage;
 
 			const isValid = await validator();
 			if (!isValid) {
@@ -116,25 +124,34 @@ class Validation {
 		$field.setCustomValidity($message);
 
 		const $parent = $field.parentNode;
-		const $oFormsErrorText = $parent.querySelector('.o-forms-input__error');
+		// Get the default o-forms error element that is not created by the custom validtion (if any)
+		// so we can hide it and show our custom error message.
+		const $oFormsErrorText = $parent.querySelector(
+			':not(.ncf__custom-validation-error).o-forms-input__error'
+		);
 
+		// Highlight the field with red outline
 		$parent.classList.remove('o-forms-input--valid');
 		$parent.classList.add('o-forms-input--invalid');
 
-		if (!document.querySelector(`#custom-validation-for-${$field.name}`)) {
+		// Get the existing custom error element
+		// If it doesn't exist, append the new error element to the input field
+		// Otherwise, update the error message
+		const existingErrorEl = document.querySelector(
+			`#custom-validation-for-${$field.name}`
+		);
+		if (!existingErrorEl) {
 			// In order for this error to hang around after normal oForms validation happens it
-			// 	needs to exist outside the context of the field.
+			// needs to exist outside the context of the field.
 			$parent.insertBefore($message, $field.nextSibling);
+		} else {
+			// else modify the error message inside the existing customer error element
+			existingErrorEl.innerHTML = $message.innerHTML;
 		}
 
-		if (
-			$oFormsErrorText &&
-			$oFormsErrorText.parentNode.className.indexOf(
-				'ncf__custom-validation-error'
-			) === -1
-		) {
-			// If there's an oForms error we need to hide it so that we can use the `o-forms-input--invalid` class
-			//  on the container to highlight the field as invalid.
+		// If there's an oForms error we need to hide it so that we can use the `o-forms-input--invalid` class
+		// on the container to highlight the field as invalid.
+		if ($oFormsErrorText) {
 			$oFormsErrorText.style.display = 'none';
 		}
 	}
@@ -150,12 +167,15 @@ class Validation {
 			`#custom-validation-for-${$field.name}`
 		);
 		const $oFormsErrorText = $field.parentNode.querySelector(
-			'.o-forms-input__error'
+			':not(.ncf__custom-validation-error).o-forms-input__error'
 		);
 
+		// Remove the custom error element
 		if ($message) {
 			$message.parentNode.removeChild($message);
 		}
+		// Reset the display style of the default oForms error element
+		// so it can be toggled by oForms
 		if ($oFormsErrorText) {
 			$oFormsErrorText.style.display = null;
 		}
@@ -180,7 +200,7 @@ class Validation {
 
 			setTimeout(() => {
 				delete this.debounceCustomValidation;
-			}, 1500);
+			}, this.debounceInterval);
 		}
 
 		return !document.querySelector('.ncf__custom-validation-error');

package/utils/year-of-birth.js

@@ -0,0 +1,24 @@
+class YearOfBirth {
+	constructor(element) {
+		if (!element) {
+			throw new Error('Please supply a DOM element');
+		}
+
+		this.element = element;
+		this.$yearOfBirth = element.querySelector('.ncf #yearOfBirth');
+
+		if (!this.$yearOfBirth) {
+			throw new Error('Please include the year of birth partial on the page');
+		}
+	}
+
+	handleYearOfBirthBlur(callback = () => {}) {
+		return this.$yearOfBirth.addEventListener('blur', callback);
+	}
+
+	getYearOfBirth() {
+		return this.$yearOfBirth.value;
+	}
+}
+
+module.exports = YearOfBirth;