From 9f47fb5fcaacc3b7b98ce2ae86661ce530cf8085 Mon Sep 17 00:00:00 2001
From: Sarah Rambacher <srambach@redhat.com>
Date: Mon, 21 Sep 2020 16:12:53 -0400
Subject: [PATCH] change external link to pf component

---
 src/components/external-link/ExternalLink.tsx |  15 +-
 .../__tests__/ExternalLink.test.tsx           |  21 +++
 .../__snapshots__/ExternalLink.test.tsx.snap  | 136 ++++++++++++++----
 src/stories/ExternalLink.stories.tsx          |  13 ++
 4 files changed, 155 insertions(+), 30 deletions(-)

diff --git a/src/components/external-link/ExternalLink.tsx b/src/components/external-link/ExternalLink.tsx
index 8491667307..ba8d7eebee 100644
--- a/src/components/external-link/ExternalLink.tsx
+++ b/src/components/external-link/ExternalLink.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { ExternalLinkAltIcon } from "@patternfly/react-icons";
+import { Button } from "@patternfly/react-core";
 
 export const ExternalLink = ({
   title,
@@ -7,9 +8,15 @@ export const ExternalLink = ({
   ...rest
 }: React.HTMLProps<HTMLAnchorElement>) => {
   return (
-    <a href={href} {...rest}>
-      {title ? title : href}{" "}
-      {href?.startsWith("http") && <ExternalLinkAltIcon />}
-    </a>
+    <Button
+      variant="link"
+      icon={href?.startsWith("http") && <ExternalLinkAltIcon />}
+      iconPosition="right"
+      component="a"
+      href={href}
+      {...rest}
+    >
+      {title ? title : href}
+    </Button>
   );
 };
diff --git a/src/components/external-link/__tests__/ExternalLink.test.tsx b/src/components/external-link/__tests__/ExternalLink.test.tsx
index 8922e633be..45e95cdd7a 100644
--- a/src/components/external-link/__tests__/ExternalLink.test.tsx
+++ b/src/components/external-link/__tests__/ExternalLink.test.tsx
@@ -14,4 +14,25 @@ describe("<ExternalLink />", () => {
     );
     expect(comp.asFragment()).toMatchSnapshot();
   });
+
+  it("render with internal url", () => {
+    const comp = render(
+      <ExternalLink href="/application/home/" title="Application page" />
+    );
+    expect(comp.asFragment()).toMatchSnapshot();
+  });
+
+  it("render as application", () => {
+    const comp = render(
+      <ExternalLink href="/application/main" title="Application link" />
+    );
+    expect(comp.asFragment()).toMatchSnapshot();
+  });
+
+  it("render as disabled", () => {
+    const comp = render(
+      <ExternalLink href="http://hello.nl/" title="Disabled link" isDisabled />
+    );
+    expect(comp.asFragment()).toMatchSnapshot();
+  });
 });
diff --git a/src/components/external-link/__tests__/__snapshots__/ExternalLink.test.tsx.snap b/src/components/external-link/__tests__/__snapshots__/ExternalLink.test.tsx.snap
index c6739e1f78..9a31b35c24 100644
--- a/src/components/external-link/__tests__/__snapshots__/ExternalLink.test.tsx.snap
+++ b/src/components/external-link/__tests__/__snapshots__/ExternalLink.test.tsx.snap
@@ -1,24 +1,98 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<ExternalLink /> render as application 1`] = `
+<DocumentFragment>
+  <a
+    aria-disabled="false"
+    class="pf-c-button pf-m-link"
+    data-ouia-component-id="3"
+    data-ouia-component-type="PF4/Button"
+    data-ouia-safe="true"
+    href="/application/main"
+  >
+    Application link
+  </a>
+</DocumentFragment>
+`;
+
+exports[`<ExternalLink /> render as disabled 1`] = `
+<DocumentFragment>
+  <a
+    aria-disabled="true"
+    class="pf-c-button pf-m-link pf-m-disabled"
+    data-ouia-component-id="4"
+    data-ouia-component-type="PF4/Button"
+    data-ouia-safe="true"
+    href="http://hello.nl/"
+    tabindex="-1"
+  >
+    Disabled link
+    <span
+      class="pf-c-button__icon pf-m-end"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 512 512"
+        width="1em"
+      >
+        <path
+          d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
+          transform=""
+        />
+      </svg>
+    </span>
+  </a>
+</DocumentFragment>
+`;
+
+exports[`<ExternalLink /> render with internal url 1`] = `
+<DocumentFragment>
+  <a
+    aria-disabled="false"
+    class="pf-c-button pf-m-link"
+    data-ouia-component-id="2"
+    data-ouia-component-type="PF4/Button"
+    data-ouia-safe="true"
+    href="/application/home/"
+  >
+    Application page
+  </a>
+</DocumentFragment>
+`;
+
 exports[`<ExternalLink /> render with link 1`] = `
 <DocumentFragment>
   <a
+    aria-disabled="false"
+    class="pf-c-button pf-m-link"
+    data-ouia-component-id="0"
+    data-ouia-component-type="PF4/Button"
+    data-ouia-safe="true"
     href="http://hello.nl/"
   >
-    http://hello.nl/ 
-    <svg
-      aria-hidden="true"
-      fill="currentColor"
-      height="1em"
-      role="img"
-      style="vertical-align: -0.125em;"
-      viewBox="0 0 512 512"
-      width="1em"
+    http://hello.nl/
+    <span
+      class="pf-c-button__icon pf-m-end"
     >
-      <path
-        d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
-      />
-    </svg>
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 512 512"
+        width="1em"
+      >
+        <path
+          d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
+          transform=""
+        />
+      </svg>
+    </span>
   </a>
 </DocumentFragment>
 `;
@@ -26,22 +100,32 @@ exports[`<ExternalLink /> render with link 1`] = `
 exports[`<ExternalLink /> render with link and title 1`] = `
 <DocumentFragment>
   <a
+    aria-disabled="false"
+    class="pf-c-button pf-m-link"
+    data-ouia-component-id="1"
+    data-ouia-component-type="PF4/Button"
+    data-ouia-safe="true"
     href="http://hello.nl/"
   >
-    Link to Hello 
-    <svg
-      aria-hidden="true"
-      fill="currentColor"
-      height="1em"
-      role="img"
-      style="vertical-align: -0.125em;"
-      viewBox="0 0 512 512"
-      width="1em"
+    Link to Hello
+    <span
+      class="pf-c-button__icon pf-m-end"
     >
-      <path
-        d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
-      />
-    </svg>
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 512 512"
+        width="1em"
+      >
+        <path
+          d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
+          transform=""
+        />
+      </svg>
+    </span>
   </a>
 </DocumentFragment>
 `;
diff --git a/src/stories/ExternalLink.stories.tsx b/src/stories/ExternalLink.stories.tsx
index e3a5c1e40d..5f0712a8f5 100644
--- a/src/stories/ExternalLink.stories.tsx
+++ b/src/stories/ExternalLink.stories.tsx
@@ -21,3 +21,16 @@ export const WithoutTitle = Template.bind({});
 WithoutTitle.args = {
   href: "http://some-other-link.nl/super",
 };
+
+export const ApplicationLink = Template.bind({});
+ApplicationLink.args = {
+  title: "Application link",
+  href: "/application/main",
+};
+
+export const DisabledLink = Template.bind({});
+DisabledLink.args = {
+  title: "Disabled link",
+  href: "http://some-other-link.nl/super",
+  isDisabled: "true",
+};