change external link to pf component

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}>
+    <Button
-      {title ? title : href}{" "}
+      variant="link"
-      {href?.startsWith("http") && <ExternalLinkAltIcon />}
+      icon={href?.startsWith("http") && <ExternalLinkAltIcon />}
-    </a>
+      iconPosition="right"
+      component="a"
+      href={href}
+      {...rest}
+    >
+      {title ? title : href}
+    </Button>
   );
 };

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();
+  });
 });

src/components/external-link/__tests__/__snapshots__/ExternalLink.test.tsx.snap

@@ -1,11 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<ExternalLink /> render with link 1`] = `
+exports[`<ExternalLink /> render as application 1`] = `
 <DocumentFragment>
   <a
-    href="http://hello.nl/"
+    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"
     >
-    http://hello.nl/ 
       <svg
         aria-hidden="true"
         fill="currentColor"
@@ -17,8 +41,58 @@ exports[`<ExternalLink /> render with link 1`] = `
       >
         <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/
+    <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>
 `;
@@ -26,9 +100,17 @@ 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
+    <span
+      class="pf-c-button__icon pf-m-end"
+    >
       <svg
         aria-hidden="true"
         fill="currentColor"
@@ -40,8 +122,10 @@ exports[`<ExternalLink /> render with link and title 1`] = `
       >
         <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>
 `;

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",
+};