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

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

@@ -5,7 +5,8 @@ exports[`Debug renders with default props 1`] = `""`;
 exports[`Debug renders with isTest 1`] = `
 <div class="ncf__debug-panel">
   <span class="ncf__debug-environment">
-    <a class="ncf__button ncf__button--debug ncf__button--inverse ncf__debug-button--test"
+    <a class="ncf__button ncf__button--debug o3-button o3-button--secondary ncf__debug-button--test"
+       data-o3-theme="inverse"
        onclick="setTestEnvironment('off');"
     >
       <strong>
@@ -153,7 +154,8 @@ exports[`Debug renders with links 1`] = `""`;
 exports[`Debug renders with showHelpers 1`] = `
 <div class="ncf__debug-panel">
   <span class="ncf__debug-environment">
-    <a class="ncf__button ncf__button--debug ncf__button--inverse ncf__debug-button--production"
+    <a class="ncf__button ncf__button--debug o3-button o3-button--secondary ncf__debug-button--production"
+       data-o3-theme="inverse"
        onclick="setTestEnvironment('on');"
     >
       <strong>
@@ -162,26 +164,30 @@ exports[`Debug renders with showHelpers 1`] = `
       careful you are using the production API
     </a>
   </span>
-  <span class="ncf__debug-helpers">
-    <button class="ncf__button ncf__button--debug ncf__button--inverse"
+  <span class="ncf__debug-helpers o3-type-body-base">
+    <button class="ncf__button ncf__button--debug o3-button o3-button--secondary"
+            data-o3-theme="inverse"
             onclick="logout();"
             title="Logout and refresh"
     >
       Logout
     </button>
-    <button class="ncf__button ncf__button--debug ncf__button--inverse"
+    <button class="ncf__button ncf__button--debug o3-button o3-button--secondary"
+            data-o3-theme="inverse"
             onclick="fillForm();"
             title="Fill form with debug data"
     >
       Fill
     </button>
-    <button class="ncf__button ncf__button--debug ncf__button--inverse"
+    <button class="ncf__button ncf__button--debug o3-button o3-button--secondary"
+            data-o3-theme="inverse"
             onclick="fillForm(); submitForm();"
             title="Fill form with debug data and submit"
     >
       Fill &amp; Submit
     </button>
-    <select class="ncf__button ncf__button--debug ncf__button--inverse ncf__button--max-width"
+    <select class="ncf__button ncf__button--debug o3-button o3-button--secondary ncf__button--max-width"
+            data-o3-theme="inverse"
             id="ncf-country"
             onchange="reloadWithSelectedCountry();"
     >

package/components/__snapshots__/deferred-billing-terms.spec.js.snap

@@ -4,10 +4,9 @@ exports[`DeferredBillingTerms renders appropriately and checked 1`] = `""`;
 
 exports[`DeferredBillingTerms renders appropriately if a isDeferredBilling 1`] = `
 <p class="o-forms-input o-forms-input--checkbox">
-  <span class="ncf__paragraph">
+  <span class="ncf__paragraph o3-type-body-base">
     I confirm I am 16 years or older and have read and agree to the
-    <a class="ncf__link--external"
-       href="https://help.ft.com/legal-privacy/terms-and-conditions/"
+    <a href="https://help.ft.com/legal-privacy/terms-and-conditions/"
        title="FT Legal Terms and Conditions help page"
        target="_blank"
        rel="noopener noreferrer"
@@ -29,10 +28,9 @@ exports[`DeferredBillingTerms renders appropriately if a isDeferredBilling 1`] =
   </span>
 </p>
 <p class="o-forms-input o-forms-input--checkbox">
-  <span class="ncf__paragraph">
+  <span class="ncf__paragraph o3-type-body-base">
     Find out more about our cancellation policy in our
-    <a class="ncf__link--external"
-       href="https://help.ft.com/legal-privacy/terms-and-conditions/"
+    <a href="https://help.ft.com/legal-privacy/terms-and-conditions/"
        title="FT Legal Terms and Conditions help page"
        target="_blank"
        rel="noopener noreferrer"
@@ -44,10 +42,9 @@ exports[`DeferredBillingTerms renders appropriately if a isDeferredBilling 1`] =
   </span>
 </p>
 <p class="o-forms-input o-forms-input--checkbox">
-  <span class="ncf__paragraph">
+  <span class="ncf__paragraph o3-type-body-base">
     Please note that if you fail to make payment for your Deferred Billing Plan within the due date your subscription will be automatically cancelled.
-    <a class="ncf__link--external"
-       href="https://help.ft.com/legal-privacy/terms-and-conditions/"
+    <a href="https://help.ft.com/legal-privacy/terms-and-conditions/"
        title="FT Legal Terms and Conditions help page"
        target="_blank"
        rel="noopener noreferrer"
@@ -88,10 +85,9 @@ exports[`DeferredBillingTerms renders appropriately if all props are set to fals
 
 exports[`DeferredBillingTerms renders appropriately if all props are set to true -  rendering of the component 1`] = `
 <p class="o-forms-input o-forms-input--checkbox o-forms-input--invalid">
-  <span class="ncf__paragraph">
+  <span class="ncf__paragraph o3-type-body-base">
     I confirm I am 16 years or older and have read and agree to the
-    <a class="ncf__link--external"
-       href="https://help.ft.com/legal-privacy/terms-and-conditions/"
+    <a href="https://help.ft.com/legal-privacy/terms-and-conditions/"
        title="FT Legal Terms and Conditions help page"
        target="_blank"
        rel="noopener noreferrer"
@@ -113,10 +109,9 @@ exports[`DeferredBillingTerms renders appropriately if all props are set to true
   </span>
 </p>
 <p class="o-forms-input o-forms-input--checkbox o-forms-input--invalid">
-  <span class="ncf__paragraph">
+  <span class="ncf__paragraph o3-type-body-base">
     Find out more about our cancellation policy in our
-    <a class="ncf__link--external"
-       href="https://help.ft.com/legal-privacy/terms-and-conditions/"
+    <a href="https://help.ft.com/legal-privacy/terms-and-conditions/"
        title="FT Legal Terms and Conditions help page"
        target="_blank"
        rel="noopener noreferrer"
@@ -128,10 +123,9 @@ exports[`DeferredBillingTerms renders appropriately if all props are set to true
   </span>
 </p>
 <p class="o-forms-input o-forms-input--checkbox o-forms-input--invalid">
-  <span class="ncf__paragraph">
+  <span class="ncf__paragraph o3-type-body-base">
     Please note that if you fail to make payment for your Deferred Billing Plan within the due date your subscription will be automatically cancelled.
-    <a class="ncf__link--external"
-       href="https://help.ft.com/legal-privacy/terms-and-conditions/"
+    <a href="https://help.ft.com/legal-privacy/terms-and-conditions/"
        title="FT Legal Terms and Conditions help page"
        target="_blank"
        rel="noopener noreferrer"

package/components/__snapshots__/error-page.spec.js.snap

@@ -17,21 +17,19 @@ exports[`ErrorPage renders with default props 1`] = `
       Children
     </div>
   </div>
-  <div class="ncf__paragraph">
+  <div class="ncf__paragraph o3-type-body-base">
     <p>
       International Toll Free Number
     </p>
     <a id="error-international-number"
-       class="ncf__header ncf__link"
+       class="ncf__header"
        href="tel:+80007056477"
     >
       + 800 0705 6477
     </a>
   </div>
-  <div class="ncf__paragraph">
-    <a class="ncf__link"
-       href="https://help.ft.com/help/contact-us/"
-    >
+  <div class="ncf__paragraph o3-type-body-base">
+    <a href="https://help.ft.com/help/contact-us/">
       Find a local phone number
     </a>
   </div>
@@ -55,21 +53,19 @@ exports[`ErrorPage renders with header 1`] = `
       Children
     </div>
   </div>
-  <div class="ncf__paragraph">
+  <div class="ncf__paragraph o3-type-body-base">
     <p>
       International Toll Free Number
     </p>
     <a id="error-international-number"
-       class="ncf__header ncf__link"
+       class="ncf__header"
        href="tel:+80007056477"
     >
       + 800 0705 6477
     </a>
   </div>
-  <div class="ncf__paragraph">
-    <a class="ncf__link"
-       href="https://help.ft.com/help/contact-us/"
-    >
+  <div class="ncf__paragraph o3-type-body-base">
+    <a href="https://help.ft.com/help/contact-us/">
       Find a local phone number
     </a>
   </div>
@@ -93,21 +89,19 @@ exports[`ErrorPage renders with message 1`] = `
       Children
     </div>
   </div>
-  <div class="ncf__paragraph">
+  <div class="ncf__paragraph o3-type-body-base">
     <p>
       International Toll Free Number
     </p>
     <a id="error-international-number"
-       class="ncf__header ncf__link"
+       class="ncf__header"
        href="tel:+80007056477"
     >
       + 800 0705 6477
     </a>
   </div>
-  <div class="ncf__paragraph">
-    <a class="ncf__link"
-       href="https://help.ft.com/help/contact-us/"
-    >
+  <div class="ncf__paragraph o3-type-body-base">
+    <a href="https://help.ft.com/help/contact-us/">
       Find a local phone number
     </a>
   </div>

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

@@ -57,7 +57,7 @@ exports[`Fieldset renders a custom legend 1`] = `
 
 exports[`Fieldset renders a custom legend which is visually hidden 1`] = `
 <fieldset class="ncf__fieldset">
-  <legend class="ncf__legend o-normalise-visually-hidden">
+  <legend class="ncf__legend o3-visually-hidden">
     Customise your experience
   </legend>
   <div class="ncf__fields">

package/components/__snapshots__/ft-edit-registration-confirmation.spec.js.snap

@@ -23,14 +23,14 @@ exports[`RegistrationConfirmation renders a continue reading button when an arti
   </div>
   <a href="/"
      target="_parent"
-     class=" ncf__confirmation--finish ncf__button ncf__button--submit"
+     class=" ncf__confirmation--finish ncf__button o3-button o3-button--primary"
      data-trackable="register-finish-head-to-ft-edit-hub"
   >
     Explore FT Edit
   </a>
   <a href="https://www.ft.com/content/9141eee7-825a-41d7-913d-49e8c12e76db"
      target="_parent"
-     class=" ncf__confirmation--finish-article-read ncf__button ncf__button--secondary reduce-bottom-spacing"
+     class=" ncf__confirmation--finish-article-read ncf__button o3-button o3-button--secondary reduce-bottom-spacing"
      data-trackable="register-finish-head-to-article"
   >
     Continue reading
@@ -61,7 +61,7 @@ exports[`RegistrationConfirmation renders an explore hub button always 1`] = `
   </div>
   <a href="http://thing-hub"
      target="_parent"
-     class=" ncf__confirmation--finish ncf__button ncf__button--submit"
+     class=" ncf__confirmation--finish ncf__button o3-button o3-button--primary"
      data-trackable="register-finish-head-to-ft-edit-hub"
   >
     Explore FT Edit
@@ -92,7 +92,7 @@ exports[`RegistrationConfirmation renders with a custom email 1`] = `
   </div>
   <a href="/"
      target="_parent"
-     class=" ncf__confirmation--finish ncf__button ncf__button--submit"
+     class=" ncf__confirmation--finish ncf__button o3-button o3-button--primary"
      data-trackable="register-finish-head-to-ft-edit-hub"
   >
     Explore FT Edit
@@ -123,7 +123,7 @@ exports[`RegistrationConfirmation renders with default props 1`] = `
   </div>
   <a href="/"
      target="_parent"
-     class=" ncf__confirmation--finish ncf__button ncf__button--submit"
+     class=" ncf__confirmation--finish ncf__button o3-button o3-button--primary"
      data-trackable="register-finish-head-to-ft-edit-hub"
   >
     Explore FT Edit

package/components/__snapshots__/graduation-date.spec.js.snap

@@ -108,10 +108,9 @@ exports[`GraduationDate renders with default props 1`] = `
   <div id="graduationDateCompliance"
        class="ncf__field ncf__gd-compliance"
   >
-    <p>
+    <p class="o3-type-body-base">
       We use the information you provide, and may share it with your institution, for the purposes of administering your institution&#x27;s licence for
-      <a class="ncf__link--external"
-         href="https://ft.com/"
+      <a href="https://ft.com/"
          title="Financial Times"
          target="_blank"
          rel="noopener noreferrer"
@@ -119,10 +118,9 @@ exports[`GraduationDate renders with default props 1`] = `
         FT.com.
       </a>
     </p>
-    <p>
+    <p class="o3-type-body-base">
       We may also use it to ensure our communications to you are more relevant. If you do not wish us to do so, you can amend your preferences at any time
-      <a class="ncf__link--external"
-         href="http://www.ft.com/myft/alerts/"
+      <a href="http://www.ft.com/myft/alerts/"
          title="Financial Times"
          target="_blank"
          rel="noopener noreferrer"