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
department-of-veterans-affairs · Nov 14, 2024 · 4d04298 · 4d04298
1 parent 0ced9a2
commit 4d04298
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"