@financial-times/n-conversion-forms 28.1.0 → 28.1.2

package/build-state/npm-shrinkwrap.json

@@ -29267,23 +29267,6 @@
       "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
       "dev": true
     },
-    "node_modules/snyk/node_modules/esprima": {
-      "version": "4.0.1",
-      "extraneous": true,
-      "license": "BSD-2-Clause",
-      "bin": {
-        "esparse": "bin/esparse.js",
-        "esvalidate": "bin/esvalidate.js"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/snyk/node_modules/inherits": {
-      "version": "2.0.4",
-      "extraneous": true,
-      "license": "ISC"
-    },
     "node_modules/snyk/node_modules/is-fullwidth-code-point": {
       "version": "2.0.0",
       "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
@@ -29307,13 +29290,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/snyk/node_modules/prelude-ls": {
-      "version": "1.1.2",
-      "extraneous": true,
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
     "node_modules/snyk/node_modules/proxy-agent": {
       "version": "3.1.0",
       "bundleDependencies": [
@@ -29949,17 +29925,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/snyk/node_modules/type-check": {
-      "version": "0.3.2",
-      "extraneous": true,
-      "license": "MIT",
-      "dependencies": {
-        "prelude-ls": "~1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
     "node_modules/snyk/node_modules/uuid": {
       "version": "3.4.0",
       "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
@@ -55210,14 +55175,6 @@
           "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
           "dev": true
         },
-        "esprima": {
-          "version": "4.0.1",
-          "extraneous": true
-        },
-        "inherits": {
-          "version": "2.0.4",
-          "extraneous": true
-        },
         "is-fullwidth-code-point": {
           "version": "2.0.0",
           "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
@@ -55236,10 +55193,6 @@
           "version": "2.1.2",
           "dev": true
         },
-        "prelude-ls": {
-          "version": "1.1.2",
-          "extraneous": true
-        },
         "proxy-agent": {
           "version": "3.1.0",
           "bundled": true,
@@ -55711,13 +55664,6 @@
             "ansi-regex": "^4.1.0"
           }
         },
-        "type-check": {
-          "version": "0.3.2",
-          "extraneous": true,
-          "requires": {
-            "prelude-ls": "~1.1.2"
-          }
-        },
         "uuid": {
           "version": "3.4.0",
           "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",

package/components/__snapshots__/accept-terms.spec.js.snap

@@ -5,58 +5,56 @@ exports[`AcceptTerms renders appropriately if a isAuthFirstAccount 1`] = `
      class="o-forms-field o-layout-typography ncf__validation-error"
      data-validate="required,checked"
 >
-  <ul class="o-typography-list ncf__accept-terms-list">
-    <li>
-      <span class="terms-auth-first-step">
-        For more information about how we use your data, please refer to our
-        <a class="ncf__link--external"
-           href="https://help.ft.com/legal-privacy/privacy-policy/"
-           target="_blank"
-           rel="noopener noreferrer"
-           data-trackable="privacy-policy-info"
-        >
-          privacy
-        </a>
-        and 
-        <a class="ncf__link--external"
-           href="https://help.ft.com/legal-privacy/cookies/"
-           target="_blank"
-           rel="noopener noreferrer"
-           data-trackable="cookies-info"
-        >
-          cookie
-        </a>
-        policies.
-      </span>
-    </li>
-  </ul>
-  <label class="o-forms-input o-forms-input--checkbox"
-         for="termsAcceptance"
-  >
-    <input type="checkbox"
-           id="termsAcceptance"
-           name="termsAcceptance"
-           value="true"
-           data-trackable="field-terms"
-           aria-required="true"
-           required
-    >
-    <span class="o-forms-input__label terms-auth-first-step">
-      I confirm that I am 16 years or older and agree to the full
+  <div class="auth-first-step-terms">
+    <span class="consent-text--top">
+      For more information about how we use your data, please refer to our
       <a class="ncf__link--external"
-         href="http://help.ft.com/help/legal-privacy/terms-conditions/"
+         href="https://help.ft.com/legal-privacy/privacy-policy/"
          target="_blank"
          rel="noopener noreferrer"
-         data-trackable="terms-and-conditions"
+         data-trackable="privacy-policy-info"
       >
-        Terms &amp; Conditions
+        privacy
       </a>
-      .
+      and 
+      <a class="ncf__link--external"
+         href="https://help.ft.com/legal-privacy/cookies/"
+         target="_blank"
+         rel="noopener noreferrer"
+         data-trackable="cookies-info"
+      >
+        cookie
+      </a>
+      policies.
     </span>
-    <p class="o-forms-input__error">
-      Please accept our terms &amp; conditions
-    </p>
-  </label>
+    <label class="o-forms-input o-forms-input--checkbox"
+           for="termsAcceptance"
+    >
+      <input type="checkbox"
+             id="termsAcceptance"
+             name="termsAcceptance"
+             value="true"
+             data-trackable="field-terms"
+             aria-required="true"
+             required
+      >
+      <span class="o-forms-input__label">
+        I confirm that I am 16 years or older and agree to the full
+        <a class="ncf__link--external"
+           href="http://help.ft.com/help/legal-privacy/terms-conditions/"
+           target="_blank"
+           rel="noopener noreferrer"
+           data-trackable="terms-and-conditions"
+        >
+          Terms &amp; Conditions
+        </a>
+        .
+      </span>
+      <p class="o-forms-input__error">
+        Please accept our terms &amp; conditions
+      </p>
+    </label>
+  </div>
 </div>
 `;
 

package/components/accept-terms.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 const DEFAULT_AGE_RESTRICTION = '16';
+const DEFAULT_PRIVACY_POLICIES_POSITION = 'top';
 
 export function AcceptTerms({
 	isAuthFirstAccount = false,
@@ -24,6 +25,8 @@ export function AcceptTerms({
 	isSingleTerm = false,
 	isDeferredBilling = false,
 	hideConfirmTermsAndConditions = false,
+	children,
+	privacyPoliciesPosition = DEFAULT_PRIVACY_POLICIES_POSITION,
 }) {
 	const divProps = {
 		id: 'acceptTermsField',
@@ -36,7 +39,9 @@ export function AcceptTerms({
 	const labelClassName = classNames([
 		'o-forms-input',
 		'o-forms-input--checkbox',
-		{ 'o-forms-input--invalid': hasError },
+		{
+			'o-forms-input--invalid': hasError,
+		},
 	]);
 
 	const inputProps = {
@@ -51,41 +56,34 @@ export function AcceptTerms({
 	};
 
 	const authFirstStepTerms = (
-		<>
-			{
-				<ul className="o-typography-list ncf__accept-terms-list">
-					<li>
-						<span className="terms-auth-first-step">
-							For more information about how we use your data, please refer to
-							our{' '}
-							<a
-								className="ncf__link--external"
-								href="https://help.ft.com/legal-privacy/privacy-policy/"
-								target="_blank"
-								rel="noopener noreferrer"
-								data-trackable="privacy-policy-info"
-							>
-								privacy
-							</a>{' '}
-							and&nbsp;
-							<a
-								className="ncf__link--external"
-								href="https://help.ft.com/legal-privacy/cookies/"
-								target="_blank"
-								rel="noopener noreferrer"
-								data-trackable="cookies-info"
-							>
-								cookie
-							</a>{' '}
-							policies.
-						</span>
-					</li>
-				</ul>
-			}
+		<div className="auth-first-step-terms">
+			<span className={`consent-text--${privacyPoliciesPosition}`}>
+				For more information about how we use your data, please refer to our{' '}
+				<a
+					className="ncf__link--external"
+					href="https://help.ft.com/legal-privacy/privacy-policy/"
+					target="_blank"
+					rel="noopener noreferrer"
+					data-trackable="privacy-policy-info"
+				>
+					privacy
+				</a>{' '}
+				and&nbsp;
+				<a
+					className="ncf__link--external"
+					href="https://help.ft.com/legal-privacy/cookies/"
+					target="_blank"
+					rel="noopener noreferrer"
+					data-trackable="cookies-info"
+				>
+					cookie
+				</a>{' '}
+				policies.
+			</span>
 			{!hideConfirmTermsAndConditions && (
 				<label className={labelClassName} htmlFor="termsAcceptance">
 					<input {...inputProps} />
-					<span className="o-forms-input__label terms-auth-first-step">
+					<span className="o-forms-input__label">
 						I confirm that I am {ageRestriction} years or older and agree to the
 						full{' '}
 						<a
@@ -104,7 +102,8 @@ export function AcceptTerms({
 					</p>
 				</label>
 			)}
-		</>
+			{children && <div className="children-container">{children}</div>}
+		</div>
 	);
 
 	const registerTerms = (
@@ -416,4 +415,9 @@ AcceptTerms.propTypes = {
 	isSingleTerm: PropTypes.bool,
 	isDeferredBilling: PropTypes.bool,
 	hideConfirmTermsAndConditions: PropTypes.bool,
+	children: PropTypes.oneOfType([
+		PropTypes.arrayOf(PropTypes.node),
+		PropTypes.node,
+	]),
+	privacyPoliciesPosition: PropTypes.oneOf(['top', 'bottom']),
 };

package/components/accept-terms.stories.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { AcceptTerms } from './accept-terms';
+import { Submit } from './submit';
 
 export default {
 	title: 'Basic Accept Terms',
@@ -11,7 +12,12 @@ export default {
 				options: ['immediate', 'endOfTerm'],
 			},
 		},
-		isAuthFirstAccount: { control: 'boolean' },
+		isAuthFirstAccount: {
+			control: 'boolean',
+			table: {
+				type: { summary: 'Show new buy flow design' },
+			},
+		},
 		isAuthFirstPayment: { control: 'boolean' },
 		hasError: { control: 'boolean' },
 		isSignup: { control: 'boolean' },
@@ -28,6 +34,21 @@ export default {
 		isNewDigitalBuyFlowConsent: { control: 'boolean' },
 		hideConfirmTermsAndConditions: { control: 'boolean' },
 		isDeferredBilling: { control: 'boolean' },
+		children: {
+			control: false,
+			table: {
+				type: { summary: "Only rendered when 'isAuthFirstAccount' is true" },
+			},
+		},
+		privacyPoliciesPosition: {
+			options: ['top', 'bottom'],
+			control: {
+				type: 'inline-radio',
+			},
+			table: {
+				type: { summary: "Placement of the 'Privacy Policies' text" },
+			},
+		},
 	},
 };
 
@@ -44,3 +65,19 @@ NewBuyFlowEmailVerification.args = {
 	isAuthFirstAccount: true,
 	hideConfirmTermsAndConditions: true,
 };
+
+export const NewBuyFlowWithChildren = (args) => (
+	<AcceptTerms {...args}>
+		<Submit />
+	</AcceptTerms>
+);
+NewBuyFlowWithChildren.args = {
+	isAuthFirstAccount: true,
+	privacyPoliciesPosition: 'bottom',
+};
+NewBuyFlowWithChildren.parameters = {
+	controls: {
+		include: ['privacyPoliciesPosition', 'isAuthFirstAccount', 'children'],
+		expanded: true,
+	},
+};

package/dist/accept-terms.js

@@ -12,6 +12,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var DEFAULT_AGE_RESTRICTION = '16';
+var DEFAULT_PRIVACY_POLICIES_POSITION = 'top';
 function AcceptTerms(_ref) {
   var _ref$isAuthFirstAccou = _ref.isAuthFirstAccount,
     isAuthFirstAccount = _ref$isAuthFirstAccou === void 0 ? false : _ref$isAuthFirstAccou,
@@ -50,7 +51,10 @@ function AcceptTerms(_ref) {
     _ref$isDeferredBillin = _ref.isDeferredBilling,
     isDeferredBilling = _ref$isDeferredBillin === void 0 ? false : _ref$isDeferredBillin,
     _ref$hideConfirmTerms = _ref.hideConfirmTermsAndConditions,
-    hideConfirmTermsAndConditions = _ref$hideConfirmTerms === void 0 ? false : _ref$hideConfirmTerms;
+    hideConfirmTermsAndConditions = _ref$hideConfirmTerms === void 0 ? false : _ref$hideConfirmTerms,
+    children = _ref.children,
+    _ref$privacyPoliciesP = _ref.privacyPoliciesPosition,
+    privacyPoliciesPosition = _ref$privacyPoliciesP === void 0 ? DEFAULT_PRIVACY_POLICIES_POSITION : _ref$privacyPoliciesP;
   var divProps = _objectSpread(_objectSpread({
     id: 'acceptTermsField',
     className: 'o-forms-field o-layout-typography ncf__validation-error',
@@ -74,10 +78,10 @@ function AcceptTerms(_ref) {
   }, isChecked && {
     defaultChecked: true
   });
-  var authFirstStepTerms = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("ul", {
-    className: "o-typography-list ncf__accept-terms-list"
-  }, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "terms-auth-first-step"
+  var authFirstStepTerms = /*#__PURE__*/_react["default"].createElement("div", {
+    className: "auth-first-step-terms"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "consent-text--".concat(privacyPoliciesPosition)
   }, "For more information about how we use your data, please refer to our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
     className: "ncf__link--external",
     href: "https://help.ft.com/legal-privacy/privacy-policy/",
@@ -90,11 +94,11 @@ function AcceptTerms(_ref) {
     target: "_blank",
     rel: "noopener noreferrer",
     "data-trackable": "cookies-info"
-  }, "cookie"), ' ', "policies."))), !hideConfirmTermsAndConditions && /*#__PURE__*/_react["default"].createElement("label", {
+  }, "cookie"), ' ', "policies."), !hideConfirmTermsAndConditions && /*#__PURE__*/_react["default"].createElement("label", {
     className: labelClassName,
     htmlFor: "termsAcceptance"
   }, /*#__PURE__*/_react["default"].createElement("input", inputProps), /*#__PURE__*/_react["default"].createElement("span", {
-    className: "o-forms-input__label terms-auth-first-step"
+    className: "o-forms-input__label"
   }, "I confirm that I am ", ageRestriction, " years or older and agree to the full", ' ', /*#__PURE__*/_react["default"].createElement("a", {
     className: "ncf__link--external",
     href: "http://help.ft.com/help/legal-privacy/terms-conditions/",
@@ -103,7 +107,9 @@ function AcceptTerms(_ref) {
     "data-trackable": "terms-and-conditions"
   }, "Terms & Conditions"), "."), /*#__PURE__*/_react["default"].createElement("p", {
     className: "o-forms-input__error"
-  }, "Please accept our terms & conditions")));
+  }, "Please accept our terms & conditions")), children && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "children-container"
+  }, children));
   var registerTerms = /*#__PURE__*/_react["default"].createElement("label", {
     className: labelClassName,
     htmlFor: "termsAcceptance"
@@ -230,5 +236,7 @@ AcceptTerms.propTypes = {
   specialTerms: _propTypes["default"].string,
   isSingleTerm: _propTypes["default"].bool,
   isDeferredBilling: _propTypes["default"].bool,
-  hideConfirmTermsAndConditions: _propTypes["default"].bool
+  hideConfirmTermsAndConditions: _propTypes["default"].bool,
+  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]),
+  privacyPoliciesPosition: _propTypes["default"].oneOf(['top', 'bottom'])
 };

package/helpers/billing-countries.js

@@ -1,3 +1,3 @@
-import { billingCountries } from 'n-common-static-data';
+const { billingCountries } = require('n-common-static-data');
 
 export { billingCountries };

package/helpers/demographics.js

@@ -1,3 +1,3 @@
-import { demographics } from 'n-common-static-data';
+const { demographics } = require('n-common-static-data');
 
 export { demographics };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-conversion-forms",
-  "version": "28.1.0",
+  "version": "28.1.2",
   "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": {

package/styles/accept-terms.scss

@@ -18,3 +18,26 @@
 		}
 	}
 }
+
+.auth-first-step-terms {
+  display: flex;
+  flex-direction: column;
+
+  .consent-text {
+    &--top {
+      order: -1;
+      margin-bottom: oSpacingByName('s4');
+    }
+
+    &--bottom {
+      margin-top: oSpacingByName('s4');
+      order: 99;
+    }
+  }
+
+  .children-container {
+    display: flex;
+    flex-direction: column;
+    margin-top: oSpacingByName('s4');
+  }
+}