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

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,

package/dist/country.js

@@ -10,7 +10,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _countries = require("../utils/countries");
 function Country(_ref) {
-  var _ref$fieldId = _ref.fieldId,
+  var additionalFieldInformation = _ref.additionalFieldInformation,
+    _ref$dataTrackable = _ref.dataTrackable,
+    dataTrackable = _ref$dataTrackable === void 0 ? 'field-country' : _ref$dataTrackable,
+    _ref$fieldId = _ref.fieldId,
     fieldId = _ref$fieldId === void 0 ? 'countryField' : _ref$fieldId,
     _ref$filterList = _ref.filterList,
     filterList = _ref$filterList === void 0 ? [] : _ref$filterList,
@@ -22,19 +25,22 @@ function Country(_ref) {
     isB2b = _ref$isB2b === void 0 ? false : _ref$isB2b,
     _ref$isDisabled = _ref.isDisabled,
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isPlaceholderDis = _ref.isPlaceholderDisabled,
+    isPlaceholderDisabled = _ref$isPlaceholderDis === void 0 ? false : _ref$isPlaceholderDis,
     value = _ref.value,
-    additionalFieldInformation = _ref.additionalFieldInformation;
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "Country".concat(isB2b ? '/Region' : '') : _ref$label,
+    _ref$errorText = _ref.errorText,
+    errorText = _ref$errorText === void 0 ? "Please select your country".concat(isB2b ? '/region' : '') : _ref$errorText;
   var selectWrapperClassName = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--select', {
     'o-forms-input--invalid': hasError
   }]);
-  var label = "Country".concat(isB2b ? '/Region' : '');
-  var error = "Please select your country".concat(isB2b ? '/region' : '');
   var selectProps = {
     id: inputId,
     'aria-required': true,
     required: true,
-    name: 'country',
-    'data-trackable': 'field-country',
+    name: inputId,
+    'data-trackable': dataTrackable,
     disabled: isDisabled
   };
   var countries = (0, _countries.getCountries)({
@@ -58,7 +64,8 @@ function Country(_ref) {
   };
   var createSelect = function createSelect(countries) {
     return /*#__PURE__*/_react["default"].createElement("select", selectProps, /*#__PURE__*/_react["default"].createElement("option", {
-      value: ""
+      value: "",
+      disabled: isPlaceholderDisabled
     }, "Please select a country", isB2b ? '/region' : ''), countries.map(function (country) {
       return country.label ? createOptGroup(country) : createOption(country);
     }));
@@ -68,7 +75,7 @@ function Country(_ref) {
   }]);
   return /*#__PURE__*/_react["default"].createElement("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
   }, /*#__PURE__*/_react["default"].createElement("span", {
@@ -79,17 +86,21 @@ function Country(_ref) {
     className: selectWrapperClassName
   }, createSelect(countries), /*#__PURE__*/_react["default"].createElement("span", {
     className: fieldErrorClassNames
-  }, error), additionalFieldInformation ? /*#__PURE__*/_react["default"].createElement("p", {
+  }, errorText), additionalFieldInformation ? /*#__PURE__*/_react["default"].createElement("p", {
     className: "additional-field-information"
   }, additionalFieldInformation) : null));
 }
 Country.propTypes = {
+  additionalFieldInformation: _propTypes["default"].node,
+  dataTrackable: _propTypes["default"].string,
+  errorText: _propTypes["default"].string,
   fieldId: _propTypes["default"].string,
   filterList: _propTypes["default"].arrayOf(_propTypes["default"].string),
   hasError: _propTypes["default"].bool,
   inputId: _propTypes["default"].string,
   isB2b: _propTypes["default"].bool,
   isDisabled: _propTypes["default"].bool,
-  value: _propTypes["default"].string,
-  additionalFieldInformation: _propTypes["default"].node
+  isPlaceholderDisabled: _propTypes["default"].bool,
+  label: _propTypes["default"].string,
+  value: _propTypes["default"].string
 };

package/package.json

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