[EuiLink] Amsterdam style boost and docs cleanup

CHANGELOG.md

@@ -13,6 +13,10 @@
 
 - Fixed filter count of 0 in `EuiSearchBar` ([#4977](https://github.com/elastic/eui/pull/4977))
 
+**Theme: Amsterdam**
+
+- Updated styles for `EuiLink` ([#4979](https://github.com/elastic/eui/pull/4979))
+
 ## [`36.0.0`](https://github.com/elastic/eui/tree/v36.0.0)
 
 - Refactored `EuiFlyout` types ([#4940](https://github.com/elastic/eui/pull/4940))

src-docs/src/views/badge/badge_href.js

@@ -9,19 +9,19 @@ import {
 export default () => (
   <EuiFlexGroup wrap responsive={false} gutterSize="xs">
     <EuiFlexItem grow={false}>
-      <EuiBadge color="#BADA55" href="/#/display/badge">
+      <EuiBadge color="#BADA55" href="#/display/badge">
         badge as an anchor
       </EuiBadge>
     </EuiFlexItem>
     <EuiFlexItem grow={false}>
-      <EuiBadge color="hollow" href="/#/display/badge" target="blank">
+      <EuiBadge color="hollow" href="#/display/badge" target="blank">
         anchor with target specified
       </EuiBadge>
     </EuiFlexItem>
     <EuiFlexItem grow={false}>
       <EuiBadge
         color="accent"
-        href="/#/display/badge"
+        href="#/display/badge"
         iconType="bolt"
         iconSide="right"
         iconOnClick={() => {}}
@@ -30,7 +30,7 @@ export default () => (
       </EuiBadge>
     </EuiFlexItem>
     <EuiFlexItem grow={false}>
-      <EuiBadge color="success" href="/#/display/badge" isDisabled={true}>
+      <EuiBadge color="success" href="#/display/badge" isDisabled={true}>
         disabled anchor badge
       </EuiBadge>
     </EuiFlexItem>

src-docs/src/views/button/button_as_link.js

@@ -12,18 +12,18 @@ export default () => (
   <Fragment>
     <EuiFlexGroup responsive={false} wrap gutterSize="s" alignItems="center">
       <EuiFlexItem grow={false}>
-        <EuiButton href="/#/navigation/button">Link to elastic.co</EuiButton>
+        <EuiButton href="#/navigation/button">Link to elastic.co</EuiButton>
       </EuiFlexItem>
 
       <EuiFlexItem grow={false}>
-        <EuiButtonEmpty href="/#/navigation/button">
+        <EuiButtonEmpty href="#/navigation/button">
           Link to elastic.co
         </EuiButtonEmpty>
       </EuiFlexItem>
 
       <EuiFlexItem grow={false}>
         <EuiButtonIcon
-          href="/#/navigation/button"
+          href="#/navigation/button"
           iconType="link"
           aria-label="This is a link"
         />
@@ -32,20 +32,20 @@ export default () => (
 
     <EuiFlexGroup responsive={false} wrap gutterSize="s" alignItems="center">
       <EuiFlexItem grow={false}>
-        <EuiButton href="/#/navigation/button" isDisabled>
+        <EuiButton href="#/navigation/button" isDisabled>
           Disabled link
         </EuiButton>
       </EuiFlexItem>
 
       <EuiFlexItem grow={false}>
-        <EuiButtonEmpty href="/#/navigation/button" isDisabled>
+        <EuiButtonEmpty href="#/navigation/button" isDisabled>
           Disabled empty link
         </EuiButtonEmpty>
       </EuiFlexItem>
 
       <EuiFlexItem grow={false}>
         <EuiButtonIcon
-          href="/#/navigation/button"
+          href="#/navigation/button"
           iconType="link"
           aria-label="This is a link"
           isDisabled

src-docs/src/views/form_controls/display_toggles.js

@@ -131,7 +131,7 @@ export const DisplayToggles = ({
                     <span>
                       compressed{' '}
                       <EuiToolTip content="Compressed usages are very specific. Click to view full compressed documentation">
-                        <a href="/#/forms/compressed-forms">
+                        <a href="#/forms/compressed-forms">
                           <EuiIcon type="help" />
                         </a>
                       </EuiToolTip>

src-docs/src/views/link/link.js

@@ -5,75 +5,22 @@ import { EuiCode, EuiLink, EuiText } from '../../../../src/components';
 export default () => (
   <EuiText>
     <p>
-      Open the{' '}
-      <EuiLink href="http://www.elastic.co" target="_blank">
-        Elastic website
-      </EuiLink>{' '}
-      in a new tab. Setting <EuiCode>target=&ldquo;_blank&rdquo;</EuiCode> also
-      defaults to <EuiCode>{'external={true}'}</EuiCode>.
-    </p>
-    <p>
-      This{' '}
-      <EuiLink href="http://www.elastic.co" external>
-        link
-      </EuiLink>{' '}
-      has the <EuiCode>external</EuiCode> prop set to true.
+      A simple <EuiLink href="#/navigation/link">EuiLink</EuiLink> used within a
+      paragraph of text.
     </p>
     <p>
-      This link is actually a <EuiLink onClick={() => {}}>button</EuiLink> with
-      an onClick handler.
+      This is actually a <EuiLink onClick={() => {}}>button</EuiLink> with an
+      onClick handler.
     </p>
     <p>
       Here is an example of a{' '}
       <EuiLink
-        href="https://github.com/elastic/eui"
-        onClick={(e) => {
-          e.preventDefault();
-        }}>
+        href="https://github.com/elastic/eui/blob/master/wiki/react-router.md#how-react-router-works"
+        onClick={() => {}}>
         link
       </EuiLink>{' '}
       with both an <EuiCode>href</EuiCode> and an <EuiCode>onClick</EuiCode>{' '}
       handler.
     </p>
-    <p>Links can be colored as well.</p>
-    <ul>
-      <li>
-        <EuiLink color="subdued" href="#">
-          subdued
-        </EuiLink>
-      </li>
-      <li>
-        <EuiLink color="success" href="#">
-          success
-        </EuiLink>
-      </li>
-      <li>
-        <EuiLink color="accent" href="#">
-          accent
-        </EuiLink>
-      </li>
-      <li>
-        <EuiLink color="danger" href="#">
-          danger
-        </EuiLink>
-      </li>
-      <li>
-        <EuiLink color="warning" href="#">
-          warning
-        </EuiLink>
-      </li>
-      <li>
-        <EuiLink color="text" href="#">
-          text
-        </EuiLink>
-      </li>
-      <li>
-        <span style={{ background: 'black' }}>
-          <EuiLink color="ghost" href="#">
-            ghost
-          </EuiLink>
-        </span>
-      </li>
-    </ul>
   </EuiText>
 );

src-docs/src/views/link/link_color.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { EuiLink, EuiText } from '../../../../src/components';
+
+const links = [
+  'primary',
+  'subdued',
+  'success',
+  'accent',
+  'warning',
+  'danger',
+  'text',
+];
+
+export default () => (
+  <EuiText>
+    <ul>
+      {links.map((value) => (
+        <li key={value}>
+          <EuiLink
+            color={value !== 'disabled' ? value : undefined}
+            href="#/navigation/link">
+            {value.charAt(0).toUpperCase() + value.slice(1)}
+          </EuiLink>
+        </li>
+      ))}
+      <li style={{ background: 'black' }}>
+        <EuiLink color="ghost">Ghost</EuiLink>
+      </li>
+    </ul>
+  </EuiText>
+);

src-docs/src/views/link/link_disable.js

@@ -2,21 +2,23 @@ import React, { useState } from 'react';
 import {
   EuiLink,
   EuiSwitch,
-  EuiSpacer,
   EuiTextColor,
+  EuiHorizontalRule,
+  EuiText,
 } from '../../../../src/components';
 
 export const LinkDisable = () => {
   const [disableLink, setDisableLink] = useState(true);
 
   return (
-    <div>
+    <EuiText>
       <EuiSwitch
+        compressed
         label="Disable links"
         checked={disableLink}
         onChange={() => setDisableLink(!disableLink)}
       />
-      <EuiSpacer size="m" />
+      <EuiHorizontalRule margin="m" />
       <p>
         This{' '}
         <EuiLink color="accent" disabled={disableLink} onClick={() => {}}>
@@ -28,14 +30,15 @@ export const LinkDisable = () => {
         </EuiLink>{' '}
         in it.
       </p>
-      <EuiSpacer size="m" />
-      <EuiTextColor color="accent">
-        When links are disabled, they inherit the{' '}
-        <EuiLink color="success" disabled={disableLink} onClick={() => {}}>
-          color
-        </EuiLink>{' '}
-        of surrounding text.
-      </EuiTextColor>
-    </div>
+      <p>
+        <EuiTextColor color="accent">
+          When links are disabled, they inherit the{' '}
+          <EuiLink color="success" disabled={disableLink} onClick={() => {}}>
+            color
+          </EuiLink>{' '}
+          of surrounding text.
+        </EuiTextColor>
+      </p>
+    </EuiText>
   );
 };