@financial-times/n-conversion-forms 28.1.4 → 28.3.0

package/components/__snapshots__/position.spec.js.snap

@@ -32,29 +32,41 @@ exports[`Position can render a disable select 1`] = `
         Broker/Trader/Advisor
       </option>
       <option value="BU">
-        Business School Academic
+        Academic
       </option>
       <option value="CP">
-        CEO/president/Chairman
+        CEO/President/Chairperson
       </option>
       <option value="CS">
         Consultant
       </option>
-      <option value="DT">
+      <option value="CL">
+        C-Suite
+      </option>
+      <option value="GI">
         Diplomat/Sen Govt Officer
       </option>
       <option value="OE">
-        Exec Mgmt (EVP/SVP/MD)
+        Executive Management
       </option>
       <option value="GI">
         Gov&#x27;t/Int&#x27;l org official
       </option>
+      <option value="IN">
+        Intern/Trainee/Student
+      </option>
+      <option value="DH">
+        VP/Director
+      </option>
       <option value="MB">
         MBA Student
       </option>
       <option value="MA">
         Manager/Supervisor
       </option>
+      <option value="NW">
+        Not working
+      </option>
       <option value="OT">
         Other
       </option>
@@ -62,11 +74,14 @@ exports[`Position can render a disable select 1`] = `
         Other C Level (CFO/COO/CIO/CMO)
       </option>
       <option value="OP">
-        Owner/Partner/Proprietor
+        Founder/Owner
       </option>
       <option value="PO">
         Politician/Government Minister
       </option>
+      <option value="PA">
+        Partner/Principal
+      </option>
       <option value="PR">
         Professional
       </option>
@@ -82,8 +97,11 @@ exports[`Position can render a disable select 1`] = `
       <option value="TS">
         Technical/Business Specialist
       </option>
-      <option value="DH">
-        VP/Director
+      <option value="VP">
+        Vice President
+      </option>
+      <option value="DR">
+        Director
       </option>
     </select>
     <span class="o-forms-input__error">
@@ -124,29 +142,41 @@ exports[`Position can render an error message 1`] = `
         Broker/Trader/Advisor
       </option>
       <option value="BU">
-        Business School Academic
+        Academic
       </option>
       <option value="CP">
-        CEO/president/Chairman
+        CEO/President/Chairperson
       </option>
       <option value="CS">
         Consultant
       </option>
-      <option value="DT">
+      <option value="CL">
+        C-Suite
+      </option>
+      <option value="GI">
         Diplomat/Sen Govt Officer
       </option>
       <option value="OE">
-        Exec Mgmt (EVP/SVP/MD)
+        Executive Management
       </option>
       <option value="GI">
         Gov&#x27;t/Int&#x27;l org official
       </option>
+      <option value="IN">
+        Intern/Trainee/Student
+      </option>
+      <option value="DH">
+        VP/Director
+      </option>
       <option value="MB">
         MBA Student
       </option>
       <option value="MA">
         Manager/Supervisor
       </option>
+      <option value="NW">
+        Not working
+      </option>
       <option value="OT">
         Other
       </option>
@@ -154,11 +184,14 @@ exports[`Position can render an error message 1`] = `
         Other C Level (CFO/COO/CIO/CMO)
       </option>
       <option value="OP">
-        Owner/Partner/Proprietor
+        Founder/Owner
       </option>
       <option value="PO">
         Politician/Government Minister
       </option>
+      <option value="PA">
+        Partner/Principal
+      </option>
       <option value="PR">
         Professional
       </option>
@@ -174,8 +207,11 @@ exports[`Position can render an error message 1`] = `
       <option value="TS">
         Technical/Business Specialist
       </option>
-      <option value="DH">
-        VP/Director
+      <option value="VP">
+        Vice President
+      </option>
+      <option value="DR">
+        Director
       </option>
     </select>
     <span class="o-forms-input__error">
@@ -216,31 +252,43 @@ exports[`Position can render an initial selected value 1`] = `
         Broker/Trader/Advisor
       </option>
       <option value="BU">
-        Business School Academic
+        Academic
       </option>
       <option selected
               value="CP"
       >
-        CEO/president/Chairman
+        CEO/President/Chairperson
       </option>
       <option value="CS">
         Consultant
       </option>
-      <option value="DT">
+      <option value="CL">
+        C-Suite
+      </option>
+      <option value="GI">
         Diplomat/Sen Govt Officer
       </option>
       <option value="OE">
-        Exec Mgmt (EVP/SVP/MD)
+        Executive Management
       </option>
       <option value="GI">
         Gov&#x27;t/Int&#x27;l org official
       </option>
+      <option value="IN">
+        Intern/Trainee/Student
+      </option>
+      <option value="DH">
+        VP/Director
+      </option>
       <option value="MB">
         MBA Student
       </option>
       <option value="MA">
         Manager/Supervisor
       </option>
+      <option value="NW">
+        Not working
+      </option>
       <option value="OT">
         Other
       </option>
@@ -248,11 +296,14 @@ exports[`Position can render an initial selected value 1`] = `
         Other C Level (CFO/COO/CIO/CMO)
       </option>
       <option value="OP">
-        Owner/Partner/Proprietor
+        Founder/Owner
       </option>
       <option value="PO">
         Politician/Government Minister
       </option>
+      <option value="PA">
+        Partner/Principal
+      </option>
       <option value="PR">
         Professional
       </option>
@@ -268,8 +319,11 @@ exports[`Position can render an initial selected value 1`] = `
       <option value="TS">
         Technical/Business Specialist
       </option>
-      <option value="DH">
-        VP/Director
+      <option value="VP">
+        Vice President
+      </option>
+      <option value="DR">
+        Director
       </option>
     </select>
     <span class="o-forms-input__error">
@@ -310,29 +364,41 @@ exports[`Position render a select with a label 1`] = `
         Broker/Trader/Advisor
       </option>
       <option value="BU">
-        Business School Academic
+        Academic
       </option>
       <option value="CP">
-        CEO/president/Chairman
+        CEO/President/Chairperson
       </option>
       <option value="CS">
         Consultant
       </option>
-      <option value="DT">
+      <option value="CL">
+        C-Suite
+      </option>
+      <option value="GI">
         Diplomat/Sen Govt Officer
       </option>
       <option value="OE">
-        Exec Mgmt (EVP/SVP/MD)
+        Executive Management
       </option>
       <option value="GI">
         Gov&#x27;t/Int&#x27;l org official
       </option>
+      <option value="IN">
+        Intern/Trainee/Student
+      </option>
+      <option value="DH">
+        VP/Director
+      </option>
       <option value="MB">
         MBA Student
       </option>
       <option value="MA">
         Manager/Supervisor
       </option>
+      <option value="NW">
+        Not working
+      </option>
       <option value="OT">
         Other
       </option>
@@ -340,11 +406,14 @@ exports[`Position render a select with a label 1`] = `
         Other C Level (CFO/COO/CIO/CMO)
       </option>
       <option value="OP">
-        Owner/Partner/Proprietor
+        Founder/Owner
       </option>
       <option value="PO">
         Politician/Government Minister
       </option>
+      <option value="PA">
+        Partner/Principal
+      </option>
       <option value="PR">
         Professional
       </option>
@@ -360,8 +429,11 @@ exports[`Position render a select with a label 1`] = `
       <option value="TS">
         Technical/Business Specialist
       </option>
-      <option value="DH">
-        VP/Director
+      <option value="VP">
+        Vice President
+      </option>
+      <option value="DR">
+        Director
       </option>
     </select>
     <span class="o-forms-input__error">

package/components/accept-terms.stories.js

@@ -31,7 +31,6 @@ export default {
 		isTransition: { control: 'boolean' },
 		isPrintProduct: { control: 'boolean' },
 		isSingleTerm: { control: 'boolean' },
-		isNewDigitalBuyFlowConsent: { control: 'boolean' },
 		hideConfirmTermsAndConditions: { control: 'boolean' },
 		isDeferredBilling: { control: 'boolean' },
 		children: {

package/components/billing-country.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { getCountries } from '../utils/countries';
+import { Country } from './country';
 
 export function BillingCountry({
 	fieldId = 'billingCountryField',
@@ -11,58 +10,19 @@ export function BillingCountry({
 	isDisabled = false,
 	value,
 }) {
-	const selectWrapperClassName = classNames([
-		'o-forms-input',
-		'o-forms-input--select',
-		{ 'o-forms-input--invalid': hasError },
-	]);
-	const props = {
-		id: inputId,
-		className: 'js-field__input js-item__value',
-		'aria-required': true,
-		required: true,
-		name: inputId,
-		'data-trackable': 'field-billing-country',
-		disabled: isDisabled,
-	};
-	const countries = getCountries({ filter: filterList, value });
-
-	const createOption = (country) => (
-		<option key={country.code} value={country.code} selected={country.selected}>
-			{country.name}
-		</option>
-	);
-	const createOptGroup = (country) => (
-		<optgroup key={country.label} label={country.label}>
-			{country.countries.map((country) => createOption(country))}
-		</optgroup>
-	);
-	const createSelect = (countries) => (
-		<select {...props}>
-			<option value="" disabled>
-				Please select a country
-			</option>
-			{countries.map((country) =>
-				country.label ? createOptGroup(country) : createOption(country)
-			)}
-		</select>
-	);
-
 	return (
-		<label
-			id={fieldId}
-			className="o-forms-field"
-			data-validate="required"
-			htmlFor={inputId}
-		>
-			<span className="o-forms-title">
-				<span className="o-forms-title__main">Billing Country</span>
-			</span>
-			<span className={selectWrapperClassName}>
-				{createSelect(countries)}
-				<span className="o-forms-input__error">Please select your country</span>
-			</span>
-		</label>
+		<Country
+			dataTrackable="field-billing-country"
+			fieldId={fieldId}
+			filterList={filterList}
+			hasError={hasError}
+			inputId={inputId}
+			isB2b={false}
+			isDisabled={isDisabled}
+			isPlaceholderDisabled={true}
+			label="Billing Country"
+			value={value}
+		/>
 	);
 }
 

package/components/billing-country.spec.js

@@ -3,7 +3,7 @@ import { expectToRenderCorrectly } from '../test-jest/helpers/expect-to-render-c
 
 expect.extend(expectToRenderCorrectly);
 
-describe('Country', () => {
+describe('BillingCountry', () => {
 	it('renders with default props', () => {
 		const props = {};
 

package/components/country.jsx

@@ -4,28 +4,30 @@ import classNames from 'classnames';
 import { getCountries } from '../utils/countries';
 
 export function Country({
+	additionalFieldInformation,
+	dataTrackable = 'field-country',
 	fieldId = 'countryField',
 	filterList = [],
 	hasError = false,
 	inputId = 'country',
 	isB2b = false,
 	isDisabled = false,
+	isPlaceholderDisabled = false,
 	value,
-	additionalFieldInformation,
+	label = `Country${isB2b ? '/Region' : ''}`,
+	errorText = `Please select your country${isB2b ? '/region' : ''}`,
 }) {
 	const selectWrapperClassName = classNames([
 		'o-forms-input',
 		'o-forms-input--select',
 		{ 'o-forms-input--invalid': hasError },
 	]);
-	const label = `Country${isB2b ? '/Region' : ''}`;
-	const error = `Please select your country${isB2b ? '/region' : ''}`;
 	const selectProps = {
 		id: inputId,
 		'aria-required': true,
 		required: true,
-		name: 'country',
-		'data-trackable': 'field-country',
+		name: inputId,
+		'data-trackable': dataTrackable,
 		disabled: isDisabled,
 	};
 	const countries = getCountries({ filter: filterList, value });
@@ -42,7 +44,9 @@ export function Country({
 	);
 	const createSelect = (countries) => (
 		<select {...selectProps}>
-			<option value="">Please select a country{isB2b ? '/region' : ''}</option>
+			<option value="" disabled={isPlaceholderDisabled}>
+				Please select a country{isB2b ? '/region' : ''}
+			</option>
 			{countries.map((country) =>
 				country.label ? createOptGroup(country) : createOption(country)
 			)}
@@ -60,7 +64,7 @@ export function Country({
 	return (
 		<label
 			id={fieldId}
-			className="o-forms-field js-unknown-user-field ncf__validation-error"
+			className="o-forms-field ncf__validation-error"
 			data-validate="required"
 			htmlFor={selectProps.id}
 		>
@@ -69,7 +73,7 @@ export function Country({
 			</span>
 			<span className={selectWrapperClassName}>
 				{createSelect(countries)}
-				<span className={fieldErrorClassNames}>{error}</span>
+				<span className={fieldErrorClassNames}>{errorText}</span>
 				{additionalFieldInformation ? (
 					<p className="additional-field-information">
 						{additionalFieldInformation}
@@ -81,12 +85,16 @@ export function Country({
 }
 
 Country.propTypes = {
+	additionalFieldInformation: PropTypes.node,
+	dataTrackable: PropTypes.string,
+	errorText: PropTypes.string,
 	fieldId: PropTypes.string,
 	filterList: PropTypes.arrayOf(PropTypes.string),
 	hasError: PropTypes.bool,
 	inputId: PropTypes.string,
 	isB2b: PropTypes.bool,
 	isDisabled: PropTypes.bool,
+	isPlaceholderDisabled: PropTypes.bool,
+	label: PropTypes.string,
 	value: PropTypes.string,
-	additionalFieldInformation: PropTypes.node,
 };

package/components/country.spec.js

@@ -18,6 +18,14 @@ describe('Country', () => {
 		expect(Country).toRenderCorrectly(props);
 	});
 
+	it('renders with dataTrackable', () => {
+		const props = {
+			dataTrackable: 'some-trackable',
+		};
+
+		expect(Country).toRenderCorrectly(props);
+	});
+
 	it('renders with large filterList', () => {
 		const props = {
 			filterList: [
@@ -78,4 +86,28 @@ describe('Country', () => {
 
 		expect(Country).toRenderCorrectly(props);
 	});
+
+	it('renders with inputId', () => {
+		const props = {
+			inputId: 'some-other-name',
+		};
+
+		expect(Country).toRenderCorrectly(props);
+	});
+
+	it('renders with label', () => {
+		const props = {
+			label: 'Some Label',
+		};
+
+		expect(Country).toRenderCorrectly(props);
+	});
+
+	it('renders with errorText', () => {
+		const props = {
+			errorText: 'Some Error Text',
+		};
+
+		expect(Country).toRenderCorrectly(props);
+	});
 });

package/dist/billing-country.js

@@ -7,8 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.BillingCountry = BillingCountry;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _countries = require("../utils/countries");
+var _country = require("./country");
 function BillingCountry(_ref) {
   var _ref$fieldId = _ref.fieldId,
     fieldId = _ref$fieldId === void 0 ? 'billingCountryField' : _ref$fieldId,
@@ -21,59 +20,18 @@ function BillingCountry(_ref) {
     _ref$isDisabled = _ref.isDisabled,
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     value = _ref.value;
-  var selectWrapperClassName = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--select', {
-    'o-forms-input--invalid': hasError
-  }]);
-  var props = {
-    id: inputId,
-    className: 'js-field__input js-item__value',
-    'aria-required': true,
-    required: true,
-    name: inputId,
-    'data-trackable': 'field-billing-country',
-    disabled: isDisabled
-  };
-  var countries = (0, _countries.getCountries)({
-    filter: filterList,
+  return /*#__PURE__*/_react["default"].createElement(_country.Country, {
+    dataTrackable: "field-billing-country",
+    fieldId: fieldId,
+    filterList: filterList,
+    hasError: hasError,
+    inputId: inputId,
+    isB2b: false,
+    isDisabled: isDisabled,
+    isPlaceholderDisabled: true,
+    label: "Billing Country",
     value: value
   });
-  var createOption = function createOption(country) {
-    return /*#__PURE__*/_react["default"].createElement("option", {
-      key: country.code,
-      value: country.code,
-      selected: country.selected
-    }, country.name);
-  };
-  var createOptGroup = function createOptGroup(country) {
-    return /*#__PURE__*/_react["default"].createElement("optgroup", {
-      key: country.label,
-      label: country.label
-    }, country.countries.map(function (country) {
-      return createOption(country);
-    }));
-  };
-  var createSelect = function createSelect(countries) {
-    return /*#__PURE__*/_react["default"].createElement("select", props, /*#__PURE__*/_react["default"].createElement("option", {
-      value: "",
-      disabled: true
-    }, "Please select a country"), countries.map(function (country) {
-      return country.label ? createOptGroup(country) : createOption(country);
-    }));
-  };
-  return /*#__PURE__*/_react["default"].createElement("label", {
-    id: fieldId,
-    className: "o-forms-field",
-    "data-validate": "required",
-    htmlFor: inputId
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "o-forms-title"
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "o-forms-title__main"
-  }, "Billing Country")), /*#__PURE__*/_react["default"].createElement("span", {
-    className: selectWrapperClassName
-  }, createSelect(countries), /*#__PURE__*/_react["default"].createElement("span", {
-    className: "o-forms-input__error"
-  }, "Please select your country")));
 }
 BillingCountry.propTypes = {
   fieldId: _propTypes["default"].string,