chore: add helptext to landing hero CTA button

packages/contentful/migrations/0142-add-helptext-cta-button-landing-page.cjs

@@ -0,0 +1,22 @@
+module.exports = function(migration) {
+  const landingPage = migration
+    .editContentType('landingPage');
+
+  landingPage
+    .createField('relatedLinkDescription')
+    .name('CTA Help text')
+    .type('Text')
+    .localized(true)
+    .required(false)
+    .validations([])
+    .disabled(false)
+    .omitted(false);
+
+  landingPage.changeFieldControl('relatedLinkDescription', 'builtin', 'markdown', {
+    helpText: 'Text to accompany the CTA button.'
+  });
+
+  landingPage
+    .moveField('relatedLinkDescription')
+    .afterField('relatedLink');
+};

packages/portal/src/components/landing/LandingHero.vue

@@ -17,6 +17,13 @@
           >
             {{ cta.text }}
           </SmartLink>
+          <!-- eslint-disable vue/no-v-html -->
+          <div
+            v-if="ctaHelpText"
+            class="btn-cta-helptext form-text text-muted mt-3"
+            v-html="parseMarkdownHtml(ctaHelpText)"
+          />
+          <!-- eslint-enable vue/no-v-html -->
         </header>
       </div>
       <ImageWithAttribution
@@ -74,6 +81,10 @@
         type: Object,
         default: null
       },
+      ctaHelpText: {
+        type: String,
+        default: null
+      },
       /**
        * Image used as a partial background with attribution.
        * Gets a blue overlay
@@ -179,6 +190,22 @@
     p {
       color: $mediumgrey;
     }
+
+    .btn-cta-helptext {
+
+      @media (min-width: $bp-4k) {
+        font-size: $font-size-large;
+        margin-top: 2rem !important;
+      }
+
+      ::v-deep p {
+        margin-bottom: 0;
+      }
+
+      ::v-deep a {
+        color: $mediumgrey;
+      }
+    }
   }
 
   .hero-image {

packages/portal/src/components/landing/LandingPage.vue

@@ -16,6 +16,7 @@
       :headline="headline"
       :text="text"
       :cta="cta"
+      :cta-help-text="ctaHelpText"
       :hero-image="primaryImageOfPage"
     />
     <div
@@ -129,6 +130,10 @@
         type: Object,
         default: null
       },
+      ctaHelpText: {
+        type: String,
+        default: null
+      },
       sections: {
         type: Array,
         default: () => []

packages/portal/src/modules/contentful/queries/landing-page.graphql

@@ -22,6 +22,7 @@ query LandingPage(
         url
         text
       }
+      relatedLinkDescription
       primaryImageOfPage {
         ...imageWithAttributionFields
       }

packages/portal/src/pages/index.vue

@@ -24,6 +24,7 @@
         :headline="page.headline || page.name"
         :text="page.text"
         :cta="page.relatedLink"
+        :cta-help-text="page.relatedLinkDescription"
         :sections="page.hasPartCollection?.items.filter((item) => !!item)"
         :primary-image-of-page="page.primaryImageOfPage"
       />