Added external prop to EuiLink (#2442)

elastic · Oct 17, 2019 · 5437331 · 5437331
1 parent 35e5264
commit 5437331
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 - Made EuiIcon a PureComponent, to speed up React re-render performance ([#2448](https://github.com/elastic/eui/pull/2448))
 - Added ability for `EuiColorStops` to accept user-defined range bounds ([#2396](https://github.com/elastic/eui/pull/2396))
+- Added `external` prop to `EuiLink` ([#2442](https://github.com/elastic/eui/pull/2442))
 
 ## [`14.6.0`](https://github.com/elastic/eui/tree/v14.6.0)
 

diff --git a/src-docs/src/views/link/link.js b/src-docs/src/views/link/link.js
@@ -1,36 +1,39 @@
 import React from 'react';
 
-import { EuiLink, EuiText } from '../../../../src/components';
+import { EuiCode, EuiLink, EuiText } from '../../../../src/components';
 
 export default () => (
   <EuiText>
     <p>
       Open the{' '}
-      {
-        <EuiLink href="http://www.elastic.co" target="_blank">
-          Elastic website
-        </EuiLink>
-      }{' '}
+      <EuiLink href="http://www.elastic.co" target="_blank">
+        Elastic website
+      </EuiLink>{' '}
       in a new tab.
     </p>
+    <p>
+      This{' '}
+      <EuiLink href="http://www.elastic.co" external target="_blank">
+        link
+      </EuiLink>{' '}
+      has the <EuiCode>external</EuiCode> prop set to true.
+    </p>
     <p>
       This link is actually a{' '}
-      {<EuiLink onClick={() => window.alert('Button clicked')}>button</EuiLink>}{' '}
+      <EuiLink onClick={() => window.alert('Button clicked')}>button</EuiLink>{' '}
       with an onClick handler.
     </p>
     <p>
       Here is an example of a{' '}
-      {
-        <EuiLink
-          href="https://github.com/elastic/eui"
-          onClick={e => {
-            if (!window.confirm('Are you sure you want to see the eui repo?')) {
-              e.preventDefault();
-            }
-          }}>
-          link
-        </EuiLink>
-      }{' '}
+      <EuiLink
+        href="https://github.com/elastic/eui"
+        onClick={e => {
+          if (!window.confirm('Are you sure you want to see the eui repo?')) {
+            e.preventDefault();
+          }
+        }}>
+        link
+      </EuiLink>{' '}
       with both an href and an onClick handler.
     </p>
     <p>Links can be colored as well.</p>

diff --git a/src/components/link/__snapshots__/link.test.tsx.snap b/src/components/link/__snapshots__/link.test.tsx.snap
@@ -35,6 +35,24 @@ exports[`EuiLink if href is not specified, it renders a button of type=button 1`
 />
 `;
 
+exports[`EuiLink it is an external link 1`] = `
+<a
+  class="euiLink euiLink--primary"
+  href="/baz/bing"
+  rel="noreferrer"
+>
+  <svg
+    aria-label="External link"
+    class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+    focusable="false"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xmlns="http://www.w3.org/2000/svg"
+  />
+</a>
+`;
+
 exports[`EuiLink it passes the default props through 1`] = `
 <button
   aria-label="aria-label"

diff --git a/src/components/link/_link.scss b/src/components/link/_link.scss
@@ -1,5 +1,9 @@
 .euiLink {
   @include euiLink;
+
+  .euiLink__externalIcon {
+    margin-left: $euiSizeXS;
+  }
 }
 
 $textColors: (

diff --git a/src/components/link/link.test.tsx b/src/components/link/link.test.tsx
@@ -35,6 +35,11 @@ describe('EuiLink', () => {
     expect(component).toMatchSnapshot();
   });
 
+  test('it is an external link', () => {
+    const component = render(<EuiLink external href="/baz/bing" />);
+    expect(component).toMatchSnapshot();
+  });
+
   test('supports href', () => {
     const component = render(<EuiLink href="/baz/bing" />);
     expect(component).toMatchSnapshot();

diff --git a/src/components/link/link.tsx b/src/components/link/link.tsx
@@ -2,10 +2,10 @@ import React, {
   AnchorHTMLAttributes,
   ButtonHTMLAttributes,
   MouseEventHandler,
-  forwardRef,
 } from 'react';
 import classNames from 'classnames';
-
+import { EuiIcon } from '../icon';
+import { EuiI18n } from '../i18n';
 import { CommonProps, ExclusiveUnion, keysOf } from '../common';
 import { getSecureRelForTarget } from '../../services';
 
@@ -46,6 +46,10 @@ export type EuiLinkButtonProps = CommonProps &
 export interface LinkAnchorProps {
   type?: EuiLinkType;
   color?: EuiLinkColor;
+  /**
+   * Set to true to show an icon indicating that it is an external link.
+   */
+  external?: boolean;
 }
 
 export type EuiLinkAnchorProps = CommonProps &
@@ -57,13 +61,17 @@ export type EuiLinkProps = ExclusiveUnion<
   EuiLinkAnchorProps
 >;
 
-const EuiLink = forwardRef<HTMLAnchorElement | HTMLButtonElement, EuiLinkProps>(
+const EuiLink = React.forwardRef<
+  HTMLAnchorElement | HTMLButtonElement,
+  EuiLinkProps
+>(
   (
     {
       children,
       color = 'primary',
       className,
       href,
+      external,
       target,
       rel,
       type = 'button',
@@ -78,6 +86,21 @@ const EuiLink = forwardRef<HTMLAnchorElement | HTMLButtonElement, EuiLinkProps>(
       className
     );
 
+    const externalLinkIcon = external ? (
+      <EuiI18n token="euiLink.external.ariaLabel" default="External link">
+        {(ariaLabel: string) => (
+          <EuiIcon
+            aria-label={ariaLabel}
+            size="s"
+            className="euiLink__externalIcon"
+            type="popout"
+          />
+        )}
+      </EuiI18n>
+    ) : (
+      undefined
+    );
+
     if (href === undefined) {
       const buttonProps = {
         className: classes,
@@ -111,6 +134,7 @@ const EuiLink = forwardRef<HTMLAnchorElement | HTMLButtonElement, EuiLinkProps>(
         ref={ref as React.Ref<HTMLAnchorElement>}
         {...anchorProps as EuiLinkAnchorProps}>
         {children}
+        {externalLinkIcon}
       </a>
     );
   }