@financial-times/n-conversion-forms 40.0.2 → 41.0.0

package/components/province.jsx

@@ -1,84 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { canadianProvinces } from 'n-common-static-data';
-const defaultProvinces = canadianProvinces.provinces;
-
-export function Province({
-	value,
-	fieldId = 'provinceField',
-	selectId = 'province',
-	hasError = false,
-	isHidden = false,
-	isBillingProvince = false,
-	isDisabled = false,
-	provinces = defaultProvinces,
-}) {
-	const fieldClassNames = classNames([
-		'o-forms-field',
-		{ ncf__hidden: isHidden },
-	]);
-
-	const inputWrapperClassNames = classNames([
-		'o-forms-input',
-		'o-forms-input--select',
-		{ 'o-forms-input--invalid': hasError },
-	]);
-
-	return (
-		<label
-			id={fieldId}
-			className={fieldClassNames}
-			data-validate="required"
-			htmlFor={selectId}
-		>
-			<span className="o-forms-title">
-				<span className="o-forms-title__main">
-					{isBillingProvince ? 'Billing ' : ''}Province
-				</span>
-			</span>
-			<span className={inputWrapperClassNames}>
-				<select
-					id={selectId}
-					aria-required="true"
-					required
-					name={isBillingProvince ? 'billingProvince' : 'province'}
-					data-trackable="field-province"
-					disabled={isDisabled}
-					defaultValue={value}
-				>
-					<option disabled value="">
-						Please select a province
-					</option>
-
-					{provinces.map(({ code, name }) => {
-						return (
-							<option key={code} value={code}>
-								{name}
-							</option>
-						);
-					})}
-				</select>
-				<span className="o-forms-input__error">
-					Please select your province.
-				</span>
-			</span>
-		</label>
-	);
-}
-
-Province.propTypes = {
-	value: PropTypes.string,
-	fieldId: PropTypes.string,
-	selectId: PropTypes.string,
-	hasError: PropTypes.bool,
-	isHidden: PropTypes.bool,
-	isBillingProvince: PropTypes.bool,
-	isDisabled: PropTypes.bool,
-	provinces: PropTypes.arrayOf(
-		PropTypes.shape({
-			code: PropTypes.string,
-			name: PropTypes.string,
-		})
-	),
-};

package/components/province.spec.js

@@ -1,96 +0,0 @@
-import { Province } from './index';
-import { expectToRenderCorrectly } from '../test-jest/helpers/expect-to-render-correctly';
-import { canadianProvinces } from 'n-common-static-data';
-const defaultProvinces = canadianProvinces.provinces;
-
-import Enzyme, { mount } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-Enzyme.configure({ adapter: new Adapter() });
-
-expect.extend(expectToRenderCorrectly);
-
-describe('Province', () => {
-	it('render a select with a label', () => {
-		const props = {
-			provinces: defaultProvinces,
-		};
-
-		expect(Province).toRenderCorrectly(props);
-	});
-
-	it('can render an initial selected value', () => {
-		const props = {
-			provinces: defaultProvinces,
-			value: 'AB',
-		};
-
-		expect(Province).toRenderCorrectly(props);
-	});
-
-	it('can render a disabled select', () => {
-		const props = {
-			provinces: defaultProvinces,
-			isDisabled: true,
-		};
-
-		expect(Province).toRenderCorrectly(props);
-	});
-
-	it('can render an error message', () => {
-		const props = {
-			provinces: defaultProvinces,
-			hasError: true,
-		};
-
-		expect(Province).toRenderCorrectly(props);
-	});
-
-	it('can apply class to hide the component', () => {
-		const props = {
-			provinces: defaultProvinces,
-			isHidden: true,
-		};
-
-		expect(Province).toRenderCorrectly(props);
-	});
-
-	it('can override ID for field', () => {
-		const props = {
-			fieldId: 'fieldID',
-		};
-		const component = mount(Province(props));
-		const field = component.find('#fieldID');
-
-		expect(field.exists()).toBe(true);
-	});
-
-	it('can override ID for select', () => {
-		const props = {
-			selectId: 'selectId',
-		};
-		const component = mount(Province(props));
-		const select = component.find('select#selectId');
-
-		expect(select.exists()).toBe(true);
-	});
-
-	it('applies context-specific name if is billing province', () => {
-		const props = {
-			isBillingProvince: true,
-		};
-		const component = mount(Province(props));
-		const selectElementName = component.find('select#province').prop('name');
-
-		expect(selectElementName).toBe('billingProvince');
-	});
-
-	it('applies context-specific name if is not billing province', () => {
-		const props = {
-			isBillingProvince: false,
-		};
-		const component = mount(Province(props));
-		const selectElementName = component.find('select#province').prop('name');
-
-		expect(selectElementName).toBe('province');
-	});
-});

package/components/province.stories.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import { Province } from './province';
-
-export default {
-	title: 'Province',
-	component: Province,
-};
-
-export const Basic = (args) => <Province {...args} />;
-Basic.args = {
-	provinces: [
-		{
-			code: 'AB',
-			name: 'Alberta',
-		},
-		{
-			code: 'BC',
-			name: 'British Columbia',
-		},
-	],
-};

package/components/state.jsx

@@ -1,83 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { americanStates } from 'n-common-static-data';
-const defaultStates = americanStates.states;
-
-export function State({
-	value,
-	fieldId = 'stateField',
-	selectId = 'state',
-	hasError = false,
-	isHidden = false,
-	isBillingState = false,
-	isDisabled = false,
-	states = defaultStates,
-}) {
-	const fieldClassNames = classNames([
-		'o-forms-field',
-		{ ncf__hidden: isHidden },
-	]);
-
-	const inputWrapperClassNames = classNames([
-		'o-forms-input',
-		'o-forms-input--select',
-		{ 'o-forms-input--invalid': hasError },
-	]);
-
-	return (
-		<label
-			id={fieldId}
-			className={fieldClassNames}
-			data-validate="required"
-			htmlFor={selectId}
-		>
-			<span className="o-forms-title">
-				<span className="o-forms-title__main">
-					{isBillingState ? 'Billing ' : ''}State
-				</span>
-			</span>
-
-			<span className={inputWrapperClassNames}>
-				<select
-					id={selectId}
-					aria-required="true"
-					required
-					name={isBillingState ? 'billingState' : 'state'}
-					data-trackable="field-state"
-					disabled={isDisabled}
-					defaultValue={value}
-				>
-					<option disabled value="">
-						Please select a state
-					</option>
-
-					{states.map(({ code, name }) => {
-						return (
-							<option key={code} value={code}>
-								{name}
-							</option>
-						);
-					})}
-				</select>
-				<span className="o-forms-input__error">Please select your state</span>
-			</span>
-		</label>
-	);
-}
-
-State.propTypes = {
-	value: PropTypes.string,
-	fieldId: PropTypes.string,
-	selectId: PropTypes.string,
-	hasError: PropTypes.bool,
-	isHidden: PropTypes.bool,
-	isBillingState: PropTypes.bool,
-	isDisabled: PropTypes.bool,
-	states: PropTypes.arrayOf(
-		PropTypes.shape({
-			code: PropTypes.string,
-			name: PropTypes.string,
-		})
-	),
-};

package/components/state.spec.js

@@ -1,96 +0,0 @@
-import { State } from './index';
-import { expectToRenderCorrectly } from '../test-jest/helpers/expect-to-render-correctly';
-import { americanStates } from 'n-common-static-data';
-const defaultStates = americanStates.states;
-
-import Enzyme, { mount } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-Enzyme.configure({ adapter: new Adapter() });
-
-expect.extend(expectToRenderCorrectly);
-
-describe('State', () => {
-	it('render a select with a label', () => {
-		const props = {
-			states: defaultStates,
-		};
-
-		expect(State).toRenderCorrectly(props);
-	});
-
-	it('can render an initial selected value', () => {
-		const props = {
-			states: defaultStates,
-			value: 'AL',
-		};
-
-		expect(State).toRenderCorrectly(props);
-	});
-
-	it('can render a disabled select', () => {
-		const props = {
-			states: defaultStates,
-			isDisabled: true,
-		};
-
-		expect(State).toRenderCorrectly(props);
-	});
-
-	it('can render an error message', () => {
-		const props = {
-			states: defaultStates,
-			hasError: true,
-		};
-
-		expect(State).toRenderCorrectly(props);
-	});
-
-	it('can apply class to hide the component', () => {
-		const props = {
-			states: defaultStates,
-			isHidden: true,
-		};
-
-		expect(State).toRenderCorrectly(props);
-	});
-
-	it('can override ID for field', () => {
-		const props = {
-			fieldId: 'fieldID',
-		};
-		const component = mount(State(props));
-		const field = component.find('#fieldID');
-
-		expect(field.exists()).toBe(true);
-	});
-
-	it('can override ID for select', () => {
-		const props = {
-			selectId: 'selectId',
-		};
-		const component = mount(State(props));
-		const select = component.find('select#selectId');
-
-		expect(select.exists()).toBe(true);
-	});
-
-	it('applies context-specific name if is billing state', () => {
-		const props = {
-			isBillingState: true,
-		};
-		const component = mount(State(props));
-		const selectElementName = component.find('select#state').prop('name');
-
-		expect(selectElementName).toBe('billingState');
-	});
-
-	it('applies context-specific name if is not billing state', () => {
-		const props = {
-			isBillingState: false,
-		};
-		const component = mount(State(props));
-		const selectElementName = component.find('select#state').prop('name');
-
-		expect(selectElementName).toBe('state');
-	});
-});

package/components/state.stories.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import { State } from './state';
-
-export default {
-	title: 'State',
-	component: State,
-};
-
-export const Basic = (args) => <State {...args} />;
-Basic.args = {
-	states: [
-		{
-			code: 'AL',
-			name: 'Alabama',
-		},
-		{
-			code: 'AK',
-			name: 'Alaska',
-		},
-		{
-			code: 'AZ',
-			name: 'Arizona',
-		},
-	],
-};

package/dist/state.jsx

@@ -1,80 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.State = State;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _nCommonStaticData = require("n-common-static-data");
-var defaultStates = _nCommonStaticData.americanStates.states;
-function State(_ref) {
-  var value = _ref.value,
-    _ref$fieldId = _ref.fieldId,
-    fieldId = _ref$fieldId === void 0 ? 'stateField' : _ref$fieldId,
-    _ref$selectId = _ref.selectId,
-    selectId = _ref$selectId === void 0 ? 'state' : _ref$selectId,
-    _ref$hasError = _ref.hasError,
-    hasError = _ref$hasError === void 0 ? false : _ref$hasError,
-    _ref$isHidden = _ref.isHidden,
-    isHidden = _ref$isHidden === void 0 ? false : _ref$isHidden,
-    _ref$isBillingState = _ref.isBillingState,
-    isBillingState = _ref$isBillingState === void 0 ? false : _ref$isBillingState,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    _ref$states = _ref.states,
-    states = _ref$states === void 0 ? defaultStates : _ref$states;
-  var fieldClassNames = (0, _classnames["default"])(['o-forms-field', {
-    ncf__hidden: isHidden
-  }]);
-  var inputWrapperClassNames = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--select', {
-    'o-forms-input--invalid': hasError
-  }]);
-  return /*#__PURE__*/_react["default"].createElement("label", {
-    id: fieldId,
-    className: fieldClassNames,
-    "data-validate": "required",
-    htmlFor: selectId
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "o-forms-title"
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "o-forms-title__main"
-  }, isBillingState ? 'Billing ' : '', "State")), /*#__PURE__*/_react["default"].createElement("span", {
-    className: inputWrapperClassNames
-  }, /*#__PURE__*/_react["default"].createElement("select", {
-    id: selectId,
-    "aria-required": "true",
-    required: true,
-    name: isBillingState ? 'billingState' : 'state',
-    "data-trackable": "field-state",
-    disabled: isDisabled,
-    defaultValue: value
-  }, /*#__PURE__*/_react["default"].createElement("option", {
-    disabled: true,
-    value: ""
-  }, "Please select a state"), states.map(function (_ref2) {
-    var code = _ref2.code,
-      name = _ref2.name;
-    return /*#__PURE__*/_react["default"].createElement("option", {
-      key: code,
-      value: code
-    }, name);
-  })), /*#__PURE__*/_react["default"].createElement("span", {
-    className: "o-forms-input__error"
-  }, "Please select your state")));
-}
-State.propTypes = {
-  value: _propTypes["default"].string,
-  fieldId: _propTypes["default"].string,
-  selectId: _propTypes["default"].string,
-  hasError: _propTypes["default"].bool,
-  isHidden: _propTypes["default"].bool,
-  isBillingState: _propTypes["default"].bool,
-  isDisabled: _propTypes["default"].bool,
-  states: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    code: _propTypes["default"].string,
-    name: _propTypes["default"].string
-  }))
-};

package/utils/province.js

@@ -1,9 +0,0 @@
-const FormElement = require('./form-element');
-
-class Province extends FormElement {
-	constructor(document) {
-		super(document, '.ncf #provinceField');
-	}
-}
-
-module.exports = Province;

package/utils/state.js

@@ -1,9 +0,0 @@
-const FormElement = require('./form-element');
-
-class State extends FormElement {
-	constructor(document) {
-		super(document, '.ncf #stateField');
-	}
-}
-
-module.exports = State;