@financial-times/n-conversion-forms 41.3.2 → 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"

package/components/__snapshots__/licence-confirmation.spec.js.snap

@@ -18,16 +18,14 @@ exports[`LicenceConfirmation renders if content id 1`] = `
     Explore the homepage & enjoy your unlimited access & exclusive content.
   </p>
   <p class="ncf__paragraph ncf__center">
-    <a class="ncf__button ncf__button--submit"
+    <a class="ncf__button o3-button o3-button--primary"
        href="/myft"
     >
       Go to myFT
     </a>
   </p>
-  <p class="ncf__paragraph ncf__center">
-    <a href="/content/d19dc7a6-c33b-4931-9a7e-4a74674da29a"
-       class="ncf__link"
-    >
+  <p class="ncf__paragraph ncf__center o3-type-body-base">
+    <a href="/content/d19dc7a6-c33b-4931-9a7e-4a74674da29a">
       Go to homepage
     </a>
   </p>
@@ -52,16 +50,14 @@ exports[`LicenceConfirmation renders if educational licence 1`] = `
     Explore the homepage &amp; enjoy your unlimited access &amp; exclusive content.
   </p>
   <p class="ncf__paragraph ncf__center">
-    <a class="ncf__button ncf__button--submit"
+    <a class="ncf__button o3-button o3-button--primary"
        href="/myft"
     >
       Go to myFT
     </a>
   </p>
-  <p class="ncf__paragraph ncf__center">
-    <a href="/"
-       class="ncf__link"
-    >
+  <p class="ncf__paragraph ncf__center o3-type-body-base">
+    <a href="/">
       Go to homepage
     </a>
   </p>
@@ -86,15 +82,14 @@ exports[`LicenceConfirmation renders if is embedded 1`] = `
     Explore the homepage &amp; enjoy your unlimited access &amp; exclusive content.
   </p>
   <p class="ncf__paragraph ncf__center">
-    <a class="ncf__button ncf__button--submit"
+    <a class="ncf__button o3-button o3-button--primary"
        href="/myft"
     >
       Go to myFT
     </a>
   </p>
-  <p class="ncf__paragraph ncf__center">
+  <p class="ncf__paragraph ncf__center o3-type-body-base">
     <a href="/"
-       class="ncf__link"
        target="_top"
     >
       Go to homepage
@@ -121,16 +116,14 @@ exports[`LicenceConfirmation renders if is trial 1`] = `
     Explore the homepage &amp; enjoy your unlimited access &amp; exclusive content.
   </p>
   <p class="ncf__paragraph ncf__center">
-    <a class="ncf__button ncf__button--submit"
+    <a class="ncf__button o3-button o3-button--primary"
        href="/myft"
     >
       Go to myFT
     </a>
   </p>
-  <p class="ncf__paragraph ncf__center">
-    <a href="/"
-       class="ncf__link"
-    >
+  <p class="ncf__paragraph ncf__center o3-type-body-base">
+    <a href="/">
       Go to homepage
     </a>
   </p>
@@ -155,16 +148,14 @@ exports[`LicenceConfirmation renders with custom duration value 1`] = `
     Explore the homepage &amp; enjoy your unlimited access &amp; exclusive content.
   </p>
   <p class="ncf__paragraph ncf__center">
-    <a class="ncf__button ncf__button--submit"
+    <a class="ncf__button o3-button o3-button--primary"
        href="/myft"
     >
       Go to myFT
     </a>
   </p>
-  <p class="ncf__paragraph ncf__center">
-    <a href="/"
-       class="ncf__link"
-    >
+  <p class="ncf__paragraph ncf__center o3-type-body-base">
+    <a href="/">
       Go to homepage
     </a>
   </p>
@@ -189,16 +180,14 @@ exports[`LicenceConfirmation renders with default props 1`] = `
     Explore the homepage &amp; enjoy your unlimited access &amp; exclusive content.
   </p>
   <p class="ncf__paragraph ncf__center">
-    <a class="ncf__button ncf__button--submit"
+    <a class="ncf__button o3-button o3-button--primary"
        href="/myft"
     >
       Go to myFT
     </a>
   </p>
-  <p class="ncf__paragraph ncf__center">
-    <a href="/"
-       class="ncf__link"
-    >
+  <p class="ncf__paragraph ncf__center o3-type-body-base">
+    <a href="/">
       Go to homepage
     </a>
   </p>

package/components/__snapshots__/licence-header.spec.js.snap

@@ -22,7 +22,7 @@ exports[`LicenceHeader renders if url is defined 1`] = `
   </p>
   <div>
     <a href="https://mytest.com"
-       class="ncf__button--secondary ncf__button--mid-width"
+       class="o3-button o3-button--secondary ncf__button--mid-width"
     >
       Sign in
     </a>

package/components/__snapshots__/licence-sign-in.spec.js.snap

@@ -7,7 +7,7 @@ exports[`LicenceSignIn renders if url is defined 1`] = `
   </p>
   <div>
     <a href="https://mytest.com"
-       class="ncf__button--secondary ncf__button--mid-width"
+       class="o3-button o3-button--secondary ncf__button--mid-width"
     >
       Sign in
     </a>

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

@@ -57,7 +57,7 @@ exports[`Loader renders with title 1`] = `
      aria-modal="true"
 >
   <div class="ncf__loader__content">
-    <div class="ncf__loader__content__title"
+    <div class="ncf__loader__content__title o3-type-title-md"
          id="loader-aria-label"
     >
       TITLE

package/components/__snapshots__/package-change.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`PackageChange annual render with defaults 1`] = `
 <div class="ncf__package-change">
-  <div class="ncf__package-change__package">
+  <div class="ncf__package-change__package o3-type-body-lg">
     <div class="ncf__package-change__content">
       <p>
         You have chosen
@@ -13,8 +13,9 @@ exports[`PackageChange annual render with defaults 1`] = `
     </div>
     <div class="ncf__package-change__actions">
       <a href="https://www.ft.com"
-         class="ncf__button ncf__button--mono ncf__button--baseline"
+         class="ncf__button o3-button o3-button--secondary ncf__button--baseline"
          data-trackable="change"
+         data-o3-theme="mono"
       >
         Change
       </a>
@@ -25,7 +26,7 @@ exports[`PackageChange annual render with defaults 1`] = `
 
 exports[`PackageChange annual render with discount 1`] = `
 <div class="ncf__package-change">
-  <div class="ncf__package-change__package">
+  <div class="ncf__package-change__package o3-type-body-lg">
     <div class="ncf__package-change__content">
       <p>
         You have chosen
@@ -36,8 +37,9 @@ exports[`PackageChange annual render with discount 1`] = `
     </div>
     <div class="ncf__package-change__actions">
       <a href="https://www.ft.com"
-         class="ncf__button ncf__button--mono ncf__button--baseline"
+         class="ncf__button o3-button o3-button--secondary ncf__button--baseline"
          data-trackable="change"
+         data-o3-theme="mono"
       >
         Change
       </a>
@@ -48,7 +50,7 @@ exports[`PackageChange annual render with discount 1`] = `
 
 exports[`PackageChange annual render with trialPrice 1`] = `
 <div class="ncf__package-change">
-  <div class="ncf__package-change__package">
+  <div class="ncf__package-change__package o3-type-body-lg">
     <div class="ncf__package-change__content">
       <p>
         You have chosen
@@ -59,8 +61,9 @@ exports[`PackageChange annual render with trialPrice 1`] = `
     </div>
     <div class="ncf__package-change__actions">
       <a href="https://www.ft.com"
-         class="ncf__button ncf__button--mono ncf__button--baseline"
+         class="ncf__button o3-button o3-button--secondary ncf__button--baseline"
          data-trackable="change"
+         data-o3-theme="mono"
       >
         Change
       </a>
@@ -71,7 +74,7 @@ exports[`PackageChange annual render with trialPrice 1`] = `
 
 exports[`PackageChange render with defaults 1`] = `
 <div class="ncf__package-change">
-  <div class="ncf__package-change__package">
+  <div class="ncf__package-change__package o3-type-body-lg">
     <div class="ncf__package-change__content">
       <p>
         You have chosen
@@ -82,8 +85,9 @@ exports[`PackageChange render with defaults 1`] = `
     </div>
     <div class="ncf__package-change__actions">
       <a href="https://www.ft.com"
-         class="ncf__button ncf__button--mono ncf__button--baseline"
+         class="ncf__button o3-button o3-button--secondary ncf__button--baseline"
          data-trackable="change"
+         data-o3-theme="mono"
       >
         Change
       </a>
@@ -94,7 +98,7 @@ exports[`PackageChange render with defaults 1`] = `
 
 exports[`PackageChange renders with description 1`] = `
 <div class="ncf__package-change">
-  <div class="ncf__package-change__package">
+  <div class="ncf__package-change__package o3-type-body-lg">
     <div class="ncf__package-change__content">
       <p>
         You have chosen
@@ -102,14 +106,15 @@ exports[`PackageChange renders with description 1`] = `
           Trial
         </span>
       </p>
-      <p class="ncf__package-change__content__description">
+      <p class="o3-type-body-base">
         Personalised email briefings and alerts
       </p>
     </div>
     <div class="ncf__package-change__actions">
       <a href="https://www.ft.com"
-         class="ncf__button ncf__button--mono ncf__button--baseline"
+         class="ncf__button o3-button o3-button--secondary ncf__button--baseline"
          data-trackable="change"
+         data-o3-theme="mono"
       >
         Change
       </a>