@financial-times/n-conversion-forms 41.3.1 → 42.0.0

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

@@ -22,116 +22,8 @@ exports[`Responsibility can render a disable select 1`] = `
       <option value>
         Please select a job responsibility
       </option>
-      <option value="ACC">
-        Accounting
-      </option>
-      <option value="ADL">
-        Administration
-      </option>
-      <option value="ART">
-        Arts &amp; design
-      </option>
-      <option value="COM">
-        Community &amp; social services
-      </option>
-      <option value="COS">
-        Consulting
-      </option>
-      <option value="RAD">
-        Data &amp; Analytics
-      </option>
-      <option value="ENG">
-        Engineering
-      </option>
-      <option value="ESG">
-        ESG (Env’tl, Social &amp; Corp. Governance)
-      </option>
-      <option value="FAC">
-        Facilities
-      </option>
-      <option value="FIN">
-        Finance
-      </option>
-      <option value="IFA">
-        Financial Advisor
-      </option>
-      <option value="FUM">
-        Fund management
-      </option>
-      <option value="HEA">
-        Healthcare services
-      </option>
-      <option value="PAT">
-        Human resources
-      </option>
-      <option value="TEC">
-        Information technology
-      </option>
-      <option value="PRI">
-        Investments
-      </option>
-      <option value="KNO">
-        Knowledge &amp; information management
-      </option>
-      <option value="LEA">
-        Learning &amp; Development
-      </option>
-      <option value="LEG">
-        Legal
-      </option>
-      <option value="MKT">
-        Marketing
-      </option>
-      <option value="MED">
-        Media &amp; communication
-      </option>
-      <option value="NOT">
-        Not working
-      </option>
-      <option value="OPS">
-        Operations
-      </option>
-      <option value="POL">
-        Policy making
-      </option>
-      <option value="MON">
-        Portfolio management
-      </option>
-      <option value="PRO">
-        Product management
-      </option>
-      <option value="PMN">
-        Program and project management
-      </option>
-      <option value="BUY">
-        Purchasing &amp; procurement
-      </option>
-      <option value="QUA">
-        Quantitative Analysis
-      </option>
-      <option value="REA">
-        Real Estate
-      </option>
-      <option value="RSR">
-        Research
-      </option>
-      <option value="RSK">
-        Risk &amp; compliance
-      </option>
-      <option value="SAL">
-        Sales &amp; business development
-      </option>
-      <option value="CPL">
-        Strategy
-      </option>
-      <option value="STU">
-        Student
-      </option>
-      <option value="SUP">
-        Support
-      </option>
-      <option value="TEA">
-        Teaching &amp; training
+      <option value="DUM">
+        Dummy description
       </option>
     </select>
     <span class="o-forms-input__error">
@@ -162,116 +54,8 @@ exports[`Responsibility can render an error message 1`] = `
       <option value>
         Please select a job responsibility
       </option>
-      <option value="ACC">
-        Accounting
-      </option>
-      <option value="ADL">
-        Administration
-      </option>
-      <option value="ART">
-        Arts &amp; design
-      </option>
-      <option value="COM">
-        Community &amp; social services
-      </option>
-      <option value="COS">
-        Consulting
-      </option>
-      <option value="RAD">
-        Data &amp; Analytics
-      </option>
-      <option value="ENG">
-        Engineering
-      </option>
-      <option value="ESG">
-        ESG (Env’tl, Social &amp; Corp. Governance)
-      </option>
-      <option value="FAC">
-        Facilities
-      </option>
-      <option value="FIN">
-        Finance
-      </option>
-      <option value="IFA">
-        Financial Advisor
-      </option>
-      <option value="FUM">
-        Fund management
-      </option>
-      <option value="HEA">
-        Healthcare services
-      </option>
-      <option value="PAT">
-        Human resources
-      </option>
-      <option value="TEC">
-        Information technology
-      </option>
-      <option value="PRI">
-        Investments
-      </option>
-      <option value="KNO">
-        Knowledge &amp; information management
-      </option>
-      <option value="LEA">
-        Learning &amp; Development
-      </option>
-      <option value="LEG">
-        Legal
-      </option>
-      <option value="MKT">
-        Marketing
-      </option>
-      <option value="MED">
-        Media &amp; communication
-      </option>
-      <option value="NOT">
-        Not working
-      </option>
-      <option value="OPS">
-        Operations
-      </option>
-      <option value="POL">
-        Policy making
-      </option>
-      <option value="MON">
-        Portfolio management
-      </option>
-      <option value="PRO">
-        Product management
-      </option>
-      <option value="PMN">
-        Program and project management
-      </option>
-      <option value="BUY">
-        Purchasing &amp; procurement
-      </option>
-      <option value="QUA">
-        Quantitative Analysis
-      </option>
-      <option value="REA">
-        Real Estate
-      </option>
-      <option value="RSR">
-        Research
-      </option>
-      <option value="RSK">
-        Risk &amp; compliance
-      </option>
-      <option value="SAL">
-        Sales &amp; business development
-      </option>
-      <option value="CPL">
-        Strategy
-      </option>
-      <option value="STU">
-        Student
-      </option>
-      <option value="SUP">
-        Support
-      </option>
-      <option value="TEA">
-        Teaching &amp; training
+      <option value="DUM">
+        Dummy description
       </option>
     </select>
     <span class="o-forms-input__error">
@@ -302,118 +86,8 @@ exports[`Responsibility can render an initial selected value 1`] = `
       <option value>
         Please select a job responsibility
       </option>
-      <option value="ACC">
-        Accounting
-      </option>
-      <option value="ADL">
-        Administration
-      </option>
-      <option value="ART">
-        Arts &amp; design
-      </option>
-      <option value="COM">
-        Community &amp; social services
-      </option>
-      <option value="COS">
-        Consulting
-      </option>
-      <option value="RAD">
-        Data &amp; Analytics
-      </option>
-      <option value="ENG">
-        Engineering
-      </option>
-      <option value="ESG">
-        ESG (Env’tl, Social &amp; Corp. Governance)
-      </option>
-      <option value="FAC">
-        Facilities
-      </option>
-      <option selected
-              value="FIN"
-      >
-        Finance
-      </option>
-      <option value="IFA">
-        Financial Advisor
-      </option>
-      <option value="FUM">
-        Fund management
-      </option>
-      <option value="HEA">
-        Healthcare services
-      </option>
-      <option value="PAT">
-        Human resources
-      </option>
-      <option value="TEC">
-        Information technology
-      </option>
-      <option value="PRI">
-        Investments
-      </option>
-      <option value="KNO">
-        Knowledge &amp; information management
-      </option>
-      <option value="LEA">
-        Learning &amp; Development
-      </option>
-      <option value="LEG">
-        Legal
-      </option>
-      <option value="MKT">
-        Marketing
-      </option>
-      <option value="MED">
-        Media &amp; communication
-      </option>
-      <option value="NOT">
-        Not working
-      </option>
-      <option value="OPS">
-        Operations
-      </option>
-      <option value="POL">
-        Policy making
-      </option>
-      <option value="MON">
-        Portfolio management
-      </option>
-      <option value="PRO">
-        Product management
-      </option>
-      <option value="PMN">
-        Program and project management
-      </option>
-      <option value="BUY">
-        Purchasing &amp; procurement
-      </option>
-      <option value="QUA">
-        Quantitative Analysis
-      </option>
-      <option value="REA">
-        Real Estate
-      </option>
-      <option value="RSR">
-        Research
-      </option>
-      <option value="RSK">
-        Risk &amp; compliance
-      </option>
-      <option value="SAL">
-        Sales &amp; business development
-      </option>
-      <option value="CPL">
-        Strategy
-      </option>
-      <option value="STU">
-        Student
-      </option>
-      <option value="SUP">
-        Support
-      </option>
-      <option value="TEA">
-        Teaching &amp; training
+      <option value="DUM">
+        Dummy description
       </option>
     </select>
     <span class="o-forms-input__error">
@@ -444,116 +118,8 @@ exports[`Responsibility render a select with a label 1`] = `
       <option value>
         Please select a job responsibility
       </option>
-      <option value="ACC">
-        Accounting
-      </option>
-      <option value="ADL">
-        Administration
-      </option>
-      <option value="ART">
-        Arts &amp; design
-      </option>
-      <option value="COM">
-        Community &amp; social services
-      </option>
-      <option value="COS">
-        Consulting
-      </option>
-      <option value="RAD">
-        Data &amp; Analytics
-      </option>
-      <option value="ENG">
-        Engineering
-      </option>
-      <option value="ESG">
-        ESG (Env’tl, Social &amp; Corp. Governance)
-      </option>
-      <option value="FAC">
-        Facilities
-      </option>
-      <option value="FIN">
-        Finance
-      </option>
-      <option value="IFA">
-        Financial Advisor
-      </option>
-      <option value="FUM">
-        Fund management
-      </option>
-      <option value="HEA">
-        Healthcare services
-      </option>
-      <option value="PAT">
-        Human resources
-      </option>
-      <option value="TEC">
-        Information technology
-      </option>
-      <option value="PRI">
-        Investments
-      </option>
-      <option value="KNO">
-        Knowledge &amp; information management
-      </option>
-      <option value="LEA">
-        Learning &amp; Development
-      </option>
-      <option value="LEG">
-        Legal
-      </option>
-      <option value="MKT">
-        Marketing
-      </option>
-      <option value="MED">
-        Media &amp; communication
-      </option>
-      <option value="NOT">
-        Not working
-      </option>
-      <option value="OPS">
-        Operations
-      </option>
-      <option value="POL">
-        Policy making
-      </option>
-      <option value="MON">
-        Portfolio management
-      </option>
-      <option value="PRO">
-        Product management
-      </option>
-      <option value="PMN">
-        Program and project management
-      </option>
-      <option value="BUY">
-        Purchasing &amp; procurement
-      </option>
-      <option value="QUA">
-        Quantitative Analysis
-      </option>
-      <option value="REA">
-        Real Estate
-      </option>
-      <option value="RSR">
-        Research
-      </option>
-      <option value="RSK">
-        Risk &amp; compliance
-      </option>
-      <option value="SAL">
-        Sales &amp; business development
-      </option>
-      <option value="CPL">
-        Strategy
-      </option>
-      <option value="STU">
-        Student
-      </option>
-      <option value="SUP">
-        Support
-      </option>
-      <option value="TEA">
-        Teaching &amp; training
+      <option value="DUM">
+        Dummy description
       </option>
     </select>
     <span class="o-forms-input__error">

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

@@ -10,7 +10,7 @@ exports[`Submit renders a submit element with a back button link 1`] = `
     Back
   </a>
   <button id="submitButton"
-          class="ncf__button ncf__button--submit"
+          class="ncf__button o3-button o3-button--primary"
           data-trackable="submit"
           type="submit"
   >
@@ -22,7 +22,7 @@ exports[`Submit renders a submit element with a back button link 1`] = `
 exports[`Submit renders a submit element with a custom button ID 1`] = `
 <div class>
   <button id="foo"
-          class="ncf__button ncf__button--submit"
+          class="ncf__button o3-button o3-button--primary"
           data-trackable="submit"
           type="submit"
   >
@@ -34,7 +34,7 @@ exports[`Submit renders a submit element with a custom button ID 1`] = `
 exports[`Submit renders a submit element with a custom button label 1`] = `
 <div class>
   <button id="submitButton"
-          class="ncf__button ncf__button--submit"
+          class="ncf__button o3-button o3-button--primary"
           data-trackable="submit"
           type="submit"
   >
@@ -46,7 +46,7 @@ exports[`Submit renders a submit element with a custom button label 1`] = `
 exports[`Submit renders a submit element with a disabled button 1`] = `
 <div class>
   <button id="submitButton"
-          class="ncf__button ncf__button--submit"
+          class="ncf__button o3-button o3-button--primary"
           data-trackable="submit"
           type="submit"
           disabled
@@ -59,7 +59,7 @@ exports[`Submit renders a submit element with a disabled button 1`] = `
 exports[`Submit renders a submit element with a style class to enable centre alignment 1`] = `
 <div class=" ncf__field--center">
   <button id="submitButton"
-          class="ncf__button ncf__button--submit"
+          class="ncf__button o3-button o3-button--primary"
           data-trackable="submit"
           type="submit"
   >
@@ -71,7 +71,7 @@ exports[`Submit renders a submit element with a style class to enable centre ali
 exports[`Submit renders a submit element with default props 1`] = `
 <div class>
   <button id="submitButton"
-          class="ncf__button ncf__button--submit"
+          class="ncf__button o3-button o3-button--primary"
           data-trackable="submit"
           type="submit"
   >

package/components/accept-terms-business.jsx

@@ -41,10 +41,9 @@ export function AcceptTermsBusiness({
 		</li>
 	) : (
 		<li>
-			<span className="terms-default">
+			<span className="terms-default o3-type-body-base">
 				I confirm I am 16 years or older and have read and agree to the{' '}
 				<a
-					className="ncf__link--external"
 					href="http://help.ft.com/help/legal-privacy/terms-conditions/"
 					target={isEmbedded ? '_top' : '_blank'}
 					rel="noopener noreferrer"
@@ -94,7 +93,7 @@ export function AcceptTermsBusiness({
 
 	return (
 		<div {...divProps}>
-			<ul className="o-typography-list ncf__accept-terms-list">
+			<ul className="ncf__accept-terms-list">
 				{b2bTerms}
 				{corpSignupTerms}
 			</ul>

package/components/accept-terms-business.spec.jsx

@@ -30,7 +30,9 @@ describe('AcceptTermsPrivacyPolicy', () => {
 
 		const component = mount(<AcceptTermsBusiness {...props} />);
 
-		const externalLink = component.find('.ncf__link--external');
+		const externalLink = component.find(
+			'[data-trackable="terms-and-conditions"]'
+		);
 		expect(externalLink.prop('target')).toBe('_blank');
 	});
 

package/components/accept-terms-privacy-policy.jsx

@@ -35,10 +35,9 @@ export function AcceptTermsPrivacyPolicy({
 			<div className="privacy-policy-terms">
 				<label className={labelClassName} htmlFor="termsAcceptance">
 					<input {...inputProps} />
-					<span className="o-forms-input__label">
+					<span className="o-forms-input__label o3-type-body-base">
 						I confirm that I am 16 years or older and agree to the full{' '}
 						<a
-							className="ncf__link--external"
 							href="http://help.ft.com/help/legal-privacy/terms-conditions/"
 							target={isEmbedded ? '_top' : '_blank'}
 							rel="noopener noreferrer"
@@ -55,10 +54,9 @@ export function AcceptTermsPrivacyPolicy({
 
 				{children && <div className="children-container">{children}</div>}
 
-				<span className={`consent-text--bottom`}>
+				<span className={`consent-text--bottom o3-type-body-base`}>
 					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"
@@ -68,7 +66,6 @@ export function AcceptTermsPrivacyPolicy({
 					</a>{' '}
 					and&nbsp;
 					<a
-						className="ncf__link--external"
 						href="https://help.ft.com/legal-privacy/cookies/"
 						target="_blank"
 						rel="noopener noreferrer"

package/components/accept-terms-privacy-policy.spec.js

@@ -19,7 +19,7 @@ describe('AcceptTermsPrivacyPolicy', () => {
 
 		const component = mount(<AcceptTermsPrivacyPolicy {...props} />);
 
-		const externalLink = component.find('.ncf__link--external').first();
+		const externalLink = component.find('.o3-type-body-base a').first();
 		expect(externalLink.prop('target')).toBe('_top');
 	});
 

package/components/accept-terms-subscription.jsx

@@ -40,11 +40,10 @@ export function AcceptTermsSubscription({
 
 	const autoRenewingTerms = !isSingleTerm && (
 		<li>
-			<span className="terms-auto-renew">
+			<span className="terms-auto-renew o3-type-body-base">
 				I give consent for my chosen payment method to be charged automatically
 				at the end of each subscription term until I cancel it by contacting{' '}
 				<a
-					className="ncf__link--external"
 					href="https://help.ft.com/help/contact-us/"
 					target={isEmbedded ? '_top' : '_blank'}
 					rel="noopener noreferrer"
@@ -59,7 +58,7 @@ export function AcceptTermsSubscription({
 	if (isTermedSubscriptionTermType) {
 		return (
 			<div {...divProps}>
-				<ul className="o-typography-list ncf__accept-terms-list">
+				<ul className="o3-typography-ul ncf__accept-terms-list">
 					<li>
 						<span className="terms-transition terms-transition--immediate">
 							I give consent for the chosen payment method to be charged
@@ -77,10 +76,9 @@ export function AcceptTermsSubscription({
 						</span>
 					</li>
 					<li>
-						<span className="terms-transition">
+						<span className="terms-transition o3-type-body-base">
 							Please see here for the complete{' '}
 							<a
-								className="ncf__link--external"
 								href="http://help.ft.com/help/legal-privacy/terms-conditions/"
 								target="_blank"
 								rel="noopener noreferrer"
@@ -132,10 +130,9 @@ export function AcceptTermsSubscription({
 				</li>
 			)}
 			<li>
-				<span className="terms-transition">
+				<span className="terms-transition o3-type-body-base">
 					Find out more about our cancellation policy in our{' '}
 					<a
-						className="ncf__link--external"
 						href="http://help.ft.com/help/legal-privacy/terms-conditions/"
 						target="_blank"
 						rel="noopener noreferrer"
@@ -167,10 +164,9 @@ export function AcceptTermsSubscription({
 				<span className="terms-print">{printSignupTermText}</span>
 			</li>
 			<li>
-				<span className="terms-print">
+				<span className="terms-print o3-type-body-base">
 					Find out more about your delivery start date in our{' '}
 					<a
-						className="ncf__link--external"
 						href="http://help.ft.com/help/legal-privacy/terms-conditions/"
 						target={isEmbedded ? '_top' : '_blank'}
 						rel="noopener noreferrer"
@@ -197,10 +193,9 @@ export function AcceptTermsSubscription({
 				</span>
 			</li>
 			<li>
-				<span className="terms-signup">
+				<span className="terms-signup o3-type-body-base">
 					Find out more about our cancellation policy in our{' '}
 					<a
-						className="ncf__link--external"
 						href="https://help.ft.com/legal-privacy/terms-and-conditions/"
 						target={isEmbedded ? '_top' : '_blank'}
 						rel="noopener noreferrer"
@@ -217,7 +212,7 @@ export function AcceptTermsSubscription({
 
 	return (
 		<div {...divProps}>
-			<ul className="o-typography-list ncf__accept-terms-list">
+			<ul className="ncf__accept-terms-list">
 				{autoRenewingTerms}
 				{transitionTerms}
 				{signupTerms}

package/components/accept-terms-subscription.spec.js

@@ -32,7 +32,7 @@ describe('AcceptTermsSubscription', () => {
 
 		const component = mount(<AcceptTermsSubscription {...props} />);
 
-		const externalLink = component.find('.ncf__link--external').first();
+		const externalLink = component.find('.o3-type-body-base a').first();
 		expect(externalLink.prop('target')).toBe('_top');
 	});