VACMS-18456 Update legacy action links to DS action links

src/site/facilities/main_buttons.drupal.liquid

@@ -1,28 +1,52 @@
 {% comment %}
-    This is used for Region Landing page and Contact us page
-    Also used for VBA with parameter
+  This is used for Region Landing page and Contact us page
+  Also used for VBA with parameter
 {% endcomment %}
 <div data-template="facilities/main_buttons">
-    <div>
-        {% if buttonType == 'vba' %}
-            <a class="vads-c-action-link--blue" href="https://va.my.site.com/VAVERA/s/">Make an appointment</a>
-        {% else %}
-            {% assign topTask = "make-an-appointment" | topTaskLovellComp: path, buildtype, fieldAdministration, fieldVamcEhrSystem, fieldRegionPage, fieldOffice %}
-            <a class="vads-c-action-link--blue" href="{{topTask.url}}">{{topTask.text}}</a>
-        {% endif %}
-    </div>
-    <div class="vads-u-margin-y--2">
-        {% if buttonType == 'vba'  %}
-            <a class="vads-c-action-link--blue" href="https://ask.va.gov">Ask a benefit question</a>
-        {% else %}
-            <a class="vads-c-action-link--blue" href="/{{ path }}/health-services">View all health services</a>
-        {% endif %}
-    </div>
-    <div>
-        {% if buttonType == 'vba' %}
-            <a class="vads-c-action-link--blue" href="/claim-or-appeal-status">Check a claim status</a>
-        {% else %}
-            <a class="vads-c-action-link--blue" href="/{{ path }}/register-for-care">Register for care</a>
-        {% endif %}
-    </div>
+  {% if buttonType == 'vba' %}
+    <va-link-action
+      class="vads-u-display--block"
+      href="https://va.my.site.com/VAVERA/s/"
+      text="Make an appointment"
+      type="secondary"
+    ></va-link-action>
+  {% else %}
+    {% assign topTask = "make-an-appointment" | topTaskLovellComp: path, buildtype, fieldAdministration, fieldVamcEhrSystem, fieldRegionPage, fieldOffice %}
+    <va-link-action
+      class="vads-u-display--block"
+      href="{{topTask.url}}"
+      text="{{topTask.text}}"
+      type="secondary"
+    ></va-link-action>
+  {% endif %}
+  {% if buttonType == 'vba' %}
+    <va-link-action
+      class="vads-u-display--block"
+      href="https://ask.va.gov"
+      text="Ask a benefit question"
+      type="secondary"
+    ></va-link-action>
+  {% else %}
+    <va-link-action
+      class="vads-u-display--block"
+      href="/{{ path }}/health-services"
+      text="View all health services"
+      type="secondary"
+    ></va-link-action> 
+  {% endif %}
+  {% if buttonType == 'vba' %}
+    <va-link-action
+      class="vads-u-display--block"
+      href="/claim-or-appeal-status"
+      text="Check a claim status"
+      type="secondary"
+    ></va-link-action>
+  {% else %}
+    <va-link-action
+      class="vads-u-display--block"
+      href="/{{ path }}/register-for-care"
+      text="Register for care"
+      type="secondary"
+    ></va-link-action>
+  {% endif %}
 </div>

src/site/includes/support_resources_cta_list.drupal.liquid

@@ -1,7 +1,7 @@
 {% if fieldButtons.length > 1 %}
   <ul class="vads-u-margin-y--3 usa-unstyled-list">
     {% for fieldButton in fieldButtons %}
-      <li class="vads-u-margin-bottom--2">
+      <li>
         {% include "src/site/paragraphs/action_link.drupal.liquid" with entity = fieldButton.entity %}
       </li>
     {% endfor %}

src/site/layouts/campaign_landing_page.drupal.liquid

@@ -169,12 +169,12 @@
             <!-- Call to action -->
             {% if fieldClpVideoPanelMoreVideo.entity.fieldButtonLink.url.path and fieldClpVideoPanelMoreVideo.entity.fieldButtonLabel %}
               <p>
-                <va-link
-                  class="vads-c-action-link--blue"
+                <va-link-action
+                  class="vads-u-display--block"
                   href="{{ fieldClpVideoPanelMoreVideo.entity.fieldButtonLink.url.path }}"
                   text="{{ fieldClpVideoPanelMoreVideo.entity.fieldButtonLabel | strip }}"
-                  >
-                </va-link>
+                  type="secondary"
+                ></va-link-action>
               </p>
             {% endif %}
           </div>

src/site/layouts/vamc_operating_status_and_alerts.drupal.liquid

@@ -25,12 +25,11 @@
             <div class="usa-grid usa-grid-full vads-u-margin-y--1p5">
               <div class="vads-l-row">
                 <div class="vads-u-margin-right--2p5">
-                  <a
-                    class="vads-u-margin-top--1 vads-u-margin--0 vads-c-action-link--green"
+                  <va-link-action
+                    class="vads-u-display--block"
                     href="{{ fieldOffice.entity.fieldLinkFacilityEmergList.url.path }}"
-                  >
-                    Subscribe to emergency notifications
-                  </a>
+                    text="Subscribe to emergency notifications"
+                  ></va-link-action>
                 </div>
               </div>
             </div>

src/site/paragraphs/action_link.drupal.liquid

@@ -1,3 +1,7 @@
-<a class="vads-c-action-link--blue" data-template="paragraphs/action_link" href="{{ entity.fieldButtonLink.url.path }}">
-  {{ entity.fieldButtonLabel }}
-</a>
+<va-link-action
+  data-template="paragraphs/action_link"
+  class="vads-u-display--block"
+  href="{{ entity.fieldButtonLink.url.path }}"
+  text="{{ entity.fieldButtonLabel }}"
+  type="secondary"
+></va-link-action> 

src/site/paragraphs/react_widget.drupal.liquid

@@ -59,11 +59,17 @@
       <span class="static-widget-content vads-u-display--none" aria-hidden="true">
         {% if entity.fieldDefaultLink != empty %}
           {% if entity.fieldButtonFormat %}
-            {% assign classes = 'class="vads-c-action-link--green"' %}
+            <va-link-action
+              class="vads-u-display--block"
+              href="{{ entity.fieldDefaultLink.url.path }}"
+              text="{{ entity.fieldDefaultLink.title }}"
+            ></va-link-action>
           {% else %}
-            {% assign classes = '' %}
+            <va-link
+              href="{{ entity.fieldDefaultLink.url.path }}"
+              text="{{ entity.fieldDefaultLink.title }}"
+            ></va-link>
           {% endif %}
-          <a href="{{ entity.fieldDefaultLink.url.path }}" {{ classes }}>{{ entity.fieldDefaultLink.title }}</a>
         {% endif %}
       </span>
       {% if entity.fieldErrorMessage != empty %}

src/site/paragraphs/service_location.drupal.liquid

@@ -222,9 +222,12 @@
         {% assign scheduleAppointmentLink = "/health-care/schedule-view-va-appointments" %}
       {% endif %}
 
-      <a class="vads-c-action-link--blue" href="{{ scheduleAppointmentLink }}">
-        Schedule an appointment online
-      </a>
+      <va-link-action
+        class="vads-u-display--block"
+        href="{{ scheduleAppointmentLink }}"
+        text="Schedule an appointment online"
+        type="secondary"
+      ></va-link-action>
     </div>
   {% endif %}
 

src/site/tests/cypress/vamc-lovell.cypress.spec.js

@@ -1,5 +1,3 @@
-import { expect } from 'chai';
-
 const verifyActionLink = (expectedText, expectedHref) =>
   cy
     .get('va-link-action')
@@ -16,10 +14,10 @@ describe('VAMC Lovell - All TRICARE pages with expected MHS Genesis Patient Port
     cy.visit('/lovell-federal-health-care-tricare/');
     cy.injectAxeThenAxeCheck();
 
-    cy.findByText('MHS Genesis Patient Portal').then(el => {
-      const attr = el.attr('href');
-      expect(attr).to.equal('https://my.mhsgenesis.health.mil/');
-    });
+    verifyActionLink(
+      'MHS Genesis Patient Portal',
+      'https://my.mhsgenesis.health.mil/',
+    );
   });
 
   it('TRICARE Health services has MHS Genesis Patient Portal link', () => {
@@ -36,10 +34,10 @@ describe('VAMC Lovell - All TRICARE pages with expected MHS Genesis Patient Port
     cy.visit('/lovell-federal-health-care-tricare/locations');
     cy.injectAxeThenAxeCheck();
 
-    cy.findByText('MHS Genesis Patient Portal').then(el => {
-      const attr = el.attr('href');
-      expect(attr).to.equal('https://my.mhsgenesis.health.mil/');
-    });
+    verifyActionLink(
+      'MHS Genesis Patient Portal',
+      'https://my.mhsgenesis.health.mil/',
+    );
   });
 
   it('TRICARE Captain James A. Lovell Location has MHS Genesis Patient Portal link', () => {
@@ -60,10 +58,10 @@ describe('VAMC Lovell - All VA pages with expected Make an appointment Top Task
     cy.visit('/lovell-federal-health-care-va/');
     cy.injectAxeThenAxeCheck();
 
-    cy.findByText('Make an appointment').then(el => {
-      const attr = el.attr('href');
-      expect(attr.endsWith('make-an-appointment')).to.be.true;
-    });
+    verifyActionLink(
+      'Make an appointment',
+      '/lovell-federal-health-care-va/make-an-appointment',
+    );
   });
 
   it('VA Health services has Make an appointment link', () => {
@@ -80,10 +78,10 @@ describe('VAMC Lovell - All VA pages with expected Make an appointment Top Task
     cy.visit('/lovell-federal-health-care-va/locations/');
     cy.injectAxeThenAxeCheck();
 
-    cy.findByText('Make an appointment').then(el => {
-      const attr = el.attr('href');
-      expect(attr.endsWith('make-an-appointment')).to.be.true;
-    });
+    verifyActionLink(
+      'Make an appointment',
+      '/lovell-federal-health-care-va/make-an-appointment',
+    );
   });
 
   it('VA Captain James A. Lovell Location has Make an appointment link', () => {

src/site/tests/static-pages/static-page-widgets.unit.spec.js

@@ -14,7 +14,7 @@ const widgetContent = `
       </span>
     </div>
     <span class="static-widget-content vads-u-display--none" aria-hidden="true">
-     <a class="vads-c-action-link--green" href="/pension/application/527EZ">Apply for Veterans Pension Benefits</a>
+      <va-link-action class="vads-u-display--block" href="/pension/application/527EZ" text="Apply for Veterans Pension Benefits"></va-link-action>
     </span>
     <div class="usa-alert usa-alert-error sip-application-error vads-u-display--none" aria-hidden="true">
      <div class="usa-alert-body">