From 4d042983884c234aee98fcf3d1260754f17b0ac7 Mon Sep 17 00:00:00 2001
From: Andrew Steele <andrew.steele@adhocteam.us>
Date: Thu, 14 Nov 2024 13:34:46 -0500
Subject: [PATCH] va-link: Replacing external icon with text (#1396)

* va-link: Replacing external icon with text

* Toggling Chromatic onlyChanged flag

* Reverting some values

* Upgraded va-privacy-agreement to use va-link external variant

* Modding statement-of-truth privacy policy link to fit better on small screens
---
 .../src/components/va-link/test/va-link.e2e.ts  |  9 +++++----
 .../src/components/va-link/va-link.tsx          |  3 +--
 .../test/va-privacy-agreement.e2e.ts            |  6 +-----
 .../va-privacy-agreement.tsx                    | 17 +++++------------
 .../va-statement-of-truth.scss                  |  6 ++++++
 .../va-statement-of-truth.tsx                   |  5 ++---
 6 files changed, 20 insertions(+), 26 deletions(-)

diff --git a/packages/web-components/src/components/va-link/test/va-link.e2e.ts b/packages/web-components/src/components/va-link/test/va-link.e2e.ts
index 26b7d8c03..9c85ec388 100644
--- a/packages/web-components/src/components/va-link/test/va-link.e2e.ts
+++ b/packages/web-components/src/components/va-link/test/va-link.e2e.ts
@@ -174,8 +174,7 @@ describe('va-link', () => {
     <va-link class="hydrated" external="" href="https://www.va.gov" text="Veteran's Affairs">
       <mock:shadow-root>
         <a href="https://www.va.gov" rel="noreferrer" class="link--center" target="_blank">
-          Veteran's Affairs
-          <va-icon class="external-link-icon hydrated"></va-icon>
+          Veteran's Affairs (opens in a new tab)
           <span class="usa-sr-only">
             opens in a new tab
           </span>
@@ -187,10 +186,12 @@ describe('va-link', () => {
 
   it('renders a link with a screen reader label', async () => {
     const page = await newE2EPage();
-    await page.setContent(`<va-link href="https://www.va.gov" text="Veteran's Affairs" label="Example label" />`);
+    await page.setContent(
+      `<va-link href="https://www.va.gov" text="Veteran's Affairs" label="Example label" />`,
+    );
 
     const label = await page.find('va-link >>> a[aria-label]');
-    expect(label.getAttribute("aria-label")).toBe('Example label');
+    expect(label.getAttribute('aria-label')).toBe('Example label');
   });
 
   it('passes an axe check', async () => {
diff --git a/packages/web-components/src/components/va-link/va-link.tsx b/packages/web-components/src/components/va-link/va-link.tsx
index 03a2b1e6d..da0ab724e 100644
--- a/packages/web-components/src/components/va-link/va-link.tsx
+++ b/packages/web-components/src/components/va-link/va-link.tsx
@@ -285,8 +285,7 @@ export class VaLink {
             onClick={handleClick}
             target="_blank"
           >
-            {text}
-            <va-icon class="external-link-icon" icon="launch"></va-icon>
+            {text} (opens in a new tab)
             <span class="usa-sr-only">opens in a new tab</span>
           </a>
         </Host>
diff --git a/packages/web-components/src/components/va-privacy-agreement/test/va-privacy-agreement.e2e.ts b/packages/web-components/src/components/va-privacy-agreement/test/va-privacy-agreement.e2e.ts
index 9634fca84..7d2355c52 100644
--- a/packages/web-components/src/components/va-privacy-agreement/test/va-privacy-agreement.e2e.ts
+++ b/packages/web-components/src/components/va-privacy-agreement/test/va-privacy-agreement.e2e.ts
@@ -13,11 +13,7 @@ describe('va-privacy-agreement', () => {
          <va-checkbox class="hydrated" id="checkbox">
            <span class="description" slot="description">
              Please read and accept the
-             <a href="/privacy-policy/" target="_blank">
-               privacy policy
-               <va-icon class="hydrated privacy-policy-icon"></va-icon>
-               <span class="usa-sr-only">opens in a new window</span>
-             </a>.
+             <va-link class="hydrated"></va-link>.
            </span>
          </va-checkbox>
        </mock:shadow-root>
diff --git a/packages/web-components/src/components/va-privacy-agreement/va-privacy-agreement.tsx b/packages/web-components/src/components/va-privacy-agreement/va-privacy-agreement.tsx
index fb2a93ee7..1d897fbfe 100644
--- a/packages/web-components/src/components/va-privacy-agreement/va-privacy-agreement.tsx
+++ b/packages/web-components/src/components/va-privacy-agreement/va-privacy-agreement.tsx
@@ -82,18 +82,11 @@ export class VaPrivacyAgreement {
         >
           <span class={`${labelClass} description`} slot="description">
             Please read and accept the&nbsp;
-            <a href="/privacy-policy/" target="_blank">
-              privacy policy
-
-              <va-icon
-                class="privacy-policy-icon"
-                icon="launch"
-                size={2}
-              ></va-icon>
-              <span class="usa-sr-only">
-                opens in a new window
-              </span>
-            </a>
+            <va-link
+              href="/privacy-policy/"
+              text="privacy policy"
+              external
+            ></va-link>
             .
           </span>
         </va-checkbox>
diff --git a/packages/web-components/src/components/va-statement-of-truth/va-statement-of-truth.scss b/packages/web-components/src/components/va-statement-of-truth/va-statement-of-truth.scss
index f7b5e2a45..66e550199 100644
--- a/packages/web-components/src/components/va-statement-of-truth/va-statement-of-truth.scss
+++ b/packages/web-components/src/components/va-statement-of-truth/va-statement-of-truth.scss
@@ -16,6 +16,12 @@
   margin: 24px;
 }
 
+@media screen and (max-width: $small-screen) {
+  :host .short-line {
+    width: var(--vads-size-line-length-1);
+  }
+}
+
 :host va-text-input {
   margin-bottom: 24px;
 }
diff --git a/packages/web-components/src/components/va-statement-of-truth/va-statement-of-truth.tsx b/packages/web-components/src/components/va-statement-of-truth/va-statement-of-truth.tsx
index 9d41cc579..fb29412ea 100644
--- a/packages/web-components/src/components/va-statement-of-truth/va-statement-of-truth.tsx
+++ b/packages/web-components/src/components/va-statement-of-truth/va-statement-of-truth.tsx
@@ -129,10 +129,9 @@ export class VaStatementOfTruth {
         <article>
           <h3>{heading}</h3>
           <slot></slot>
-          <p class="font-sans-6">
+          <p class="font-sans-6 short-line">
             I have read and accept the&nbsp;
-            <va-link external text='privacy policy' href='/privacy-policy/' />
-            .
+            <va-link external text="privacy policy" href="/privacy-policy/" />.
           </p>
           <va-text-input
             id="veteran-signature"