Fix broken docs links (#1416)

* convert EuiLink instances with intenal routing to react-router Link

* convert react-router Link instances with external routing to EuiLink

* convert faux links to use hash

* Start to documentation guidelines: internal and external links

* reinstate local relative url

* update external link doc guidlines

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

@@ -1,5 +1,9 @@
 import React from 'react';
 
+import {
+  Link,
+} from 'react-router';
+
 import { renderToHtml } from '../../services';
 
 import {
@@ -10,7 +14,6 @@ import {
   EuiBadge,
   EuiCode,
   EuiBetaBadge,
-  EuiLink,
   EuiNotificationBadge,
 } from '../../../../src/components';
 
@@ -111,8 +114,8 @@ export const BadgeExample = {
           components like the EuiKeyPadMenuItem.
         </p>
         <p>
-          They can also be used in conjunction with <EuiLink href="/#/display/card">EuiCards</EuiLink>
-          &nbsp;and <EuiLink href="/#/navigation/key-pad-menu">EuiKeyPadMenuItems</EuiLink>.
+          They can also be used in conjunction with <Link to="/display/card">EuiCards</Link>
+          &nbsp;and <Link to="/navigation/key-pad-menu">EuiKeyPadMenuItems</Link>.
         </p>
       </div>
     ),
@@ -130,8 +133,8 @@ export const BadgeExample = {
     text: (
       <p>
         Used to showcase the number of notifications, alerts or hidden selections.
-        Typically used in <EuiLink href="/#/layout/header">EuiHeader</EuiLink> or
-        (eventually) <EuiLink href="/#/forms/filter-group">EuiFilterButtons</EuiLink>.
+        Typically used in <Link to="/layout/header">EuiHeader</Link> or
+        (eventually) <Link to="/forms/filter-group">EuiFilterButtons</Link>.
       </p>
     ),
     props: { EuiNotificationBadge },

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

@@ -1,5 +1,9 @@
 import React from 'react';
 
+import {
+  Link,
+} from 'react-router';
+
 import { renderToHtml } from '../../services';
 
 import { GuideSectionTypes } from '../../components';
@@ -11,7 +15,6 @@ import {
   EuiCode,
   EuiButtonGroup,
   EuiButtonToggle,
-  EuiLink,
 } from '../../../../src/components';
 
 import Button from './button';
@@ -271,7 +274,7 @@ export const ButtonExample = {
           <EuiCode>color=&apos;ghost&apos;</EuiCode> to any of the button styles on this page. These
           should be used extremely rarely, and are only for placing buttons on top of dark or
           image-based backgrounds. A good example of their use is in the{' '}
-          <EuiLink href="/#/layout/bottom-bar">EuiBottomBar</EuiLink> component.
+          <Link to="/layout/bottom-bar">EuiBottomBar</Link> component.
         </p>
       ),
       demo: <ButtonGhost />,

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

@@ -1,5 +1,9 @@
 import React, { Fragment } from 'react';
 
+import {
+  Link,
+} from 'react-router';
+
 import { renderToHtml } from '../../services';
 
 import {
@@ -185,8 +189,8 @@ export const FormControlsExample = {
     text: (
       <p>
         This component renders a basic HTML <code>&lt;select&gt;</code> element. If you need more customization
-        for how the options and/or selected values render, use the <EuiLink href="/#/forms/superselect">EuiSuperSelect</EuiLink>.
-        Another option is to use the <EuiLink href="/#/forms/combo-box">EuiComboBox</EuiLink>, which has search and multi-select
+        for how the options and/or selected values render, use the <Link to="/forms/superselect">EuiSuperSelect</Link>.
+        Another option is to use the <Link to="/forms/combo-box">EuiComboBox</Link>, which has search and multi-select
         capabilities, but also has restrictions on how items are rendered.
       </p>
     ),
@@ -328,4 +332,3 @@ export const FormControlsExample = {
     demo: <FormControlLayout />,
   }],
 };
-

src-docs/src/views/guidelines/colors.js

@@ -1,4 +1,9 @@
 import React, { Component } from 'react';
+
+import {
+  Link,
+} from 'react-router';
+
 import lightColors from '!!sass-vars-to-js-loader!../../../../src/global_styling/variables/_colors.scss';
 import { calculateContrast, rgbToHex } from '../../../../src/services';
 
@@ -300,7 +305,7 @@ color: $${color2};`
           </p>
           <p>
             For more visualization palettes and rendering services, go to
-            the <EuiLink href="/#/utilities/color-palettes">Color Palettes</EuiLink> utility page.
+            the <Link to="/utilities/color-palettes">Color Palettes</Link> utility page.
           </p>
         </EuiText>
 

src-docs/src/views/guidelines/sass.js

@@ -308,8 +308,8 @@ const importOutsideExample = (`// In an outside project, import the core variabl
 `);
 
 const tintOrShadeExample = (`// tintOrShade(color, tint_percent, shade_percent)
-// will tint the color by % in light themes 
-// and shade the color by % in dark themes 
+// will tint the color by % in light themes
+// and shade the color by % in dark themes
 .themedBox {
   background-color: tintOrShade($euiColorPrimary, 90%, 70%);
   border-left: $euiBorderThick;
@@ -749,7 +749,7 @@ export default() => (
 
     <EuiText className="guideSection__text">
       <p>
-        <Link to="https://github.com/elastic/eui/blob/master/src/global_styling/mixins/_responsive.scss">View the sass code for media queries</Link>.
+        <EuiLink href="https://github.com/elastic/eui/blob/master/src/global_styling/mixins/_responsive.scss">View the sass code for media queries</EuiLink>.
       </p>
       <p>
         Breakpoints in EUI are provided through the use of a sass
@@ -821,7 +821,7 @@ export default() => (
     <GuideRuleTitle>Animation</GuideRuleTitle>
     <EuiText grow={false} className="guideSection__text">
       <p>
-        <Link to="https://github.com/elastic/eui/blob/master/src/global_styling/variables/_animation.scss">View the sass code for animation</Link>.
+        <EuiLink href="https://github.com/elastic/eui/blob/master/src/global_styling/variables/_animation.scss">View the sass code for animation</EuiLink>.
       </p>
       <p>
         EUI utilizes the following constants to maintain a similar &apos;bounce&apos; to its animations.

src-docs/src/views/home/home_view.js

@@ -1,5 +1,9 @@
 import React from 'react';
 
+import {
+  Link,
+} from 'react-router';
+
 import imageIcons from '../../images/icons.jpg';
 import imageButtons from '../../images/buttons.svg';
 import imageTables from '../../images/tables.svg';
@@ -36,9 +40,9 @@ export const HomeView = () => (
           <EuiFlexItem grow={false}>
             <p>
               Version:{' '}
-              <EuiLink href="#/package/changelog">
+              <Link to="/package/changelog">
                 <strong>v{ pkg.version }</strong>
-              </EuiLink>
+              </Link>
             </p>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>

src-docs/src/views/list_group/list_group_links.js

@@ -12,33 +12,33 @@ import {
 const myContent = [
   {
     label: 'First link',
-    href: '/#/display/list-group',
+    href: '#/display/list-group',
     iconType: 'calendar',
     size: 's',
   },
   {
     label: 'Second link is active',
-    href: '/#/display/list-group',
+    href: '#/display/list-group',
     isActive: true,
     iconType: 'clock',
     size: 's',
   },
   {
     label: 'Third link is disabled',
-    href: '/#/display/list-group',
+    href: '#/display/list-group',
     isDisabled: true,
     iconType: 'compute',
     size: 's',
   },
   {
     label: 'Fourth link',
-    href: '/#/display/list-group',
+    href: '#/display/list-group',
     iconType: 'copyClipboard',
     size: 's',
   },
   {
     label: 'Fifth link',
-    href: '/#/display/list-group',
+    href: '#/display/list-group',
     iconType: 'crosshairs',
     size: 's',
   },

src-docs/src/views/toggle/toggle_example.js

@@ -1,5 +1,9 @@
 import React from 'react';
 
+import {
+  Link,
+} from 'react-router';
+
 import { renderToHtml } from '../../services';
 
 import {
@@ -9,7 +13,6 @@ import {
 import {
   EuiCode,
   EuiToggle,
-  EuiLink,
   EuiCallOut,
 } from '../../../../src/components';
 
@@ -35,16 +38,16 @@ export const ToggleExample = {
           a visibly hidden input (checkbox or radio) overtop of the children provided.
         </p>
         <p>
-          By default, the children will be wrapped in a block element. To change the display you can
-          simply use one of the <EuiLink href="/#/utilities/css-utility-classes">utility classes</EuiLink>
-          like <EuiCode>.eui-displayInlineBlock</EuiCode>.
+          By default, the children will be wrapped in a block element.
+          To change the display you can simply use one of
+          the <Link to="/utilities/css-utility-classes">utility classes</Link> like <EuiCode>.eui-displayInlineBlock</EuiCode>.
         </p>
         <EuiCallOut title="Accessibility">
           <p>
             This utility is just a helper component and comes with no inherit styles including
             no <EuiCode>:hover</EuiCode> or <EuiCode>:focus</EuiCode> states. If you use this utility
             directly, be sure to add these states. Otherwise, you may just want to utilize
-            the <EuiLink href="/#/navigation/button">EuiButtonToggle</EuiLink> component.
+            the <Link to="/navigation/button">EuiButtonToggle</Link> component.
           </p>
         </EuiCallOut>
       </div>

wiki/documentation-guidelines.md

@@ -0,0 +1,38 @@
+# Documentation guidelines
+
+## Links
+
+### Linking between EUI doc pages/components
+
+In instances where you would like to provide a link to another EUI component
+referenced in a given component description or example, take advantage of `react-router`,
+which is used for routing in EUI docs. Aside from the benefit of shorter path names, `react-router` will take the environment into account and provide the correct URL for both development and production locations.
+
+#### Basic example:
+
+```js
+import {
+  Link,
+} from 'react-router';
+
+// ...
+
+Consult the larger <Link to="/guidelines/colors">color guidelines</Link> page
+for a better explanation about passing color contrast.
+```
+
+### Linking to external resources
+
+When referring to external sites or resources, use EUI components that take an `href` prop, such as `EuiLink`.
+
+#### Basic example:
+
+```js
+import {
+  EuiLink,
+} from '/src/components';
+
+// ...
+
+<EuiLink href="https://github.com/elastic/eui/blob/master/src/global_styling/mixins/_shadow.scss">View the Sass code for shadow mixins</EuiLink>.
+```