va-link: new icon variant (#1183)

* feat: new variant with icon support * feat: new icon and size prop for link component * update: comments for link icon varaint * update: storybook example for icon and added part * fix: clean up css * fix: tests * update: icon spacing fix * update css specificity for va-icon
department-of-veterans-affairs · Jun 14, 2024 · 68bad0f · 68bad0f
1 parent f7c77a5
commit 68bad0f
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 14 deletions.
diff --git a/packages/storybook/stories/va-link.stories.jsx b/packages/storybook/stories/va-link.stories.jsx
@@ -28,7 +28,9 @@ const defaultArgs = {
   'reverse': undefined,
   'text': undefined,
   'video': undefined,
-  'label': undefined
+  'label': undefined,
+  'icon-name': undefined,
+  'icon-size': undefined,
 };
 
 const Template = ({
@@ -96,6 +98,8 @@ const VariantTemplate = ({
   text,
   video,
   label,
+  'icon-name': iconName,
+  'icon-size': iconSize,
 }) => {
   return (
     <va-link
@@ -113,6 +117,8 @@ const VariantTemplate = ({
       text={text}
       video={video}
       label={label}
+      icon-name={iconName}
+      icon-size={iconSize}
     />
   );
 };
@@ -155,14 +161,46 @@ Calendar.args = {
   text: `Add to calendar`,
 };
 
+export const Icon = VariantTemplate.bind(null);
+Icon.args = {
+  ...defaultArgs,
+  'href': '#',
+  'text': `National Cemetery Administration`,
+  'icon-name': 'mail',
+  'icon-size': 3,
+};
+
 const ReverseTemplate = ({ filename, filetype, href, reverse, text }) => {
   return (
-    <div className="vads-u-padding--4" style={{background: 'linear-gradient(to left, var(--vads-color-primary) 30%, var(--vads-color-primary-dark) 60%, var(--vads-color-primary-darker))'}}>
+    <div
+      className="vads-u-padding--4"
+      style={{
+        background:
+          'linear-gradient(to left, var(--vads-color-primary) 30%, var(--vads-color-primary-dark) 60%, var(--vads-color-primary-darker))',
+      }}
+    >
       <h4 className="vads-u-color--white">Default Link</h4>
-      <va-link href={href} reverse={reverse} text="Contact a local Veterans Service Organization (VSO)" />
+      <va-link
+        href={href}
+        reverse={reverse}
+        text="Contact a local Veterans Service Organization (VSO)"
+      />
 
       <h4 className="vads-u-color--white">Active Link</h4>
-      <va-link active={true} href={href} reverse={reverse} text="Share your VA medical records" />
+      <va-link
+        active={true}
+        href={href}
+        reverse={reverse}
+        text="Share your VA medical records"
+      />
+
+      <h4 className="vads-u-color--white">Icon</h4>
+      <va-link
+        href={href}
+        reverse={reverse}
+        text="National Cemetery Administration"
+        icon-name="mail"
+      />
 
       <h4 className="vads-u-color--white">Download Link</h4>
       <va-link
@@ -175,24 +213,23 @@ const ReverseTemplate = ({ filename, filetype, href, reverse, text }) => {
       />
 
       <h4 className="vads-u-color--white">Video Link</h4>
-      <va-link   
+      <va-link
         href="https://www.va.gov"
         text="Go to the video about VA disability compensation"
-        video 
-        reverse 
+        video
+        reverse
       />
 
-
       <h4 className="vads-u-color--white">Channel Link</h4>
-      <va-link   
+      <va-link
         channel
         href="https://www.va.gov"
-        text="Veteran's Affairs" 
+        text="Veteran's Affairs"
         reverse
       />
 
       <h4 className="vads-u-color--white">Calendar Link</h4>
-      <va-link 
+      <va-link
         calendar
         href="data:text/calendar;charset=utf-8,BEGIN%3AVCALENDAR%0D%0AVERSION%3A2.0%0D%0APRODID%3AVA%0D%0ABEGIN%3AVEVENT%0D%0AUID%3A1398DD3C-3572-40FD-84F6-BB6F97C79D67%0D%0ASUMMARY%3AAppointment%20at%20Cheyenne%20VA%20Medical%20Center%0D%0ADESCRIPTION%3AYou%20have%20a%20health%20care%20appointment%20at%20Cheyenne%20VA%20Medical%20Cent%0D%0A%09er%0D%0A%09%5Cn%5Cn2360%20East%20Pershing%20Boulevard%5Cn%0D%0A%09Cheyenne%5C%2C%20WY%2082001-5356%5Cn%0D%0A%09307-778-7550%5Cn%0D%0A%09%5CnSign%20in%20to%20https%3A%2F%2Fva.gov%2Fhealth-care%2Fschedule-view-va-appointments%2Fappo%0D%0A%09intments%20to%20get%20details%20about%20this%20appointment%5Cn%0D%0ALOCATION%3A2360%20East%20Pershing%20Boulevard%5C%2C%20Cheyenne%5C%2C%20WY%2082001-5356%0D%0ADTSTAMP%3A20221222T021934Z%0D%0ADTSTART%3A20221222T021934Z%0D%0ADTEND%3A20221222T024934Z%0D%0AEND%3AVEVENT%0D%0AEND%3AVCALENDAR"
         text="Add to calendar"
@@ -208,4 +245,4 @@ Reverse.args = {
   href: 'https://va.gov/',
   text: 'Example Link',
   reverse: true,
-};
+};
diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts
@@ -523,6 +523,14 @@ export namespace Components {
           * The href attribute of the anchor.
          */
         "href": string;
+        /**
+          * The name of the icon to be displayed in the link.
+         */
+        "iconName"?: string;
+        /**
+          * The size variant of the icon, an integer between 3 and 9 inclusive.
+         */
+        "iconSize"?: number;
         /**
           * Adds an aria-label attribute to the link element.
          */
@@ -2613,6 +2621,14 @@ declare namespace LocalJSX {
           * The href attribute of the anchor.
          */
         "href": string;
+        /**
+          * The name of the icon to be displayed in the link.
+         */
+        "iconName"?: string;
+        /**
+          * The size variant of the icon, an integer between 3 and 9 inclusive.
+         */
+        "iconSize"?: number;
         /**
           * Adds an aria-label attribute to the link element.
          */

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
@@ -115,6 +115,25 @@ describe('va-link', () => {
     `);
   });
 
+  it('renders custom icon link', async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      `<va-link href="https://www.va.gov" text="Veteran's Affairs" icon-name="chevron_right" icon-size="3"/>`,
+    );
+
+    const element = await page.find('va-link');
+    expect(element).toEqualHtml(`
+    <va-link class="hydrated" href="https://www.va.gov" text="Veteran's Affairs" icon-name="chevron_right" icon-size="3">
+      <mock:shadow-root>
+        <a href="https://www.va.gov" class="link--center">
+          <va-icon class="hydrated" part="icon"></va-icon>
+          Veteran's Affairs
+        </a>
+      </mock:shadow-root>
+    </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" />`);

diff --git a/packages/web-components/src/components/va-link/va-link.css b/packages/web-components/src/components/va-link/va-link.css
@@ -23,6 +23,10 @@
   font-weight: 700;
 }
 
+:host([icon-name]) va-icon {
+  margin-right: 4px;
+}
+
 .link-icon--active {
   vertical-align: baseline;
   position: relative;
@@ -32,10 +36,15 @@
 .link-icon--left {
   margin-right: 4px;
   vertical-align: baseline;
-  position: relative;
+  position: relative; 
   top: 3px;
 }
 
+.link--center {
+  display: inline-flex;
+  align-items: center;
+}
+
 dfn {
   font-style: normal;
 }

diff --git a/packages/web-components/src/components/va-link/va-link.tsx b/packages/web-components/src/components/va-link/va-link.tsx
@@ -81,8 +81,18 @@ export class VaLink {
   /**
    * Adds an aria-label attribute to the link element.
    */
-    @Prop() label?: string = null;
+  @Prop() label?: string = null;
 
+  /**
+   * The name of the icon to be displayed in the link.
+   */
+  @Prop() iconName?: string = null;
+
+  /**
+   * The size variant of the icon,
+   * an integer between 3 and 9 inclusive.
+   */
+  @Prop() iconSize?: number = 3;
   /**
    * The event used to track usage of the component.
    */
@@ -130,10 +140,13 @@ export class VaLink {
       text,
       video,
       reverse,
+      iconName,
+      iconSize
     } = this;
 
     const linkClass = classNames({
       'va-link--reverse': reverse,
+      'link--center': iconName
     });
 
     // Active link variant
@@ -207,6 +220,22 @@ export class VaLink {
       );
     }
 
+    // Icon link Variant
+    if (iconName) {
+      return (
+        <Host>
+          <a
+            href={href}
+            class={linkClass}
+            onClick={handleClick}
+          >
+            <va-icon icon={iconName} size={iconSize} part="icon"></va-icon>
+            {text}
+          </a>
+        </Host>
+      );
+    }
+
     // Default
     return (
       <Host>