[UI Framework] [K7] Add KuiLink React component. (elastic#13264)

* Add KuiLink React component.

ui_framework/doc_site/src/services/routes/routes.js

@@ -51,6 +51,7 @@ const components = [{
 }, {
   name: 'Link',
   component: LinkExample,
+  hasReact: true,
 }, {
   name: 'Modal',
   component: ModalExample,

ui_framework/doc_site/src/views/link/link.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import {
+  KuiLink,
+  KuiText,
+} from '../../../../components';
+
+export default () => (
+  <KuiText>
+    <p>
+      Open the {(
+        <KuiLink
+          href="http://www.elastic.co"
+          target="_blank"
+        >
+          Elastic website
+        </KuiLink>
+      )} in a new tab.
+    </p>
+  </KuiText>
+);

ui_framework/doc_site/src/views/link/link_example.js

@@ -1,26 +1,33 @@
 import React from 'react';
 
+import { renderToHtml } from '../../services';
+
 import {
   GuideDemo,
   GuidePage,
   GuideSection,
   GuideSectionTypes,
 } from '../../components';
 
-const linkHtml = require('./link.html');
+import Link from './link';
+const linkSource = require('!!raw!./link');
+const linkHtml = renderToHtml(Link);
 
 export default props => (
   <GuidePage title={props.route.name}>
     <GuideSection
       title="Link"
       source={[{
+        type: GuideSectionTypes.JS,
+        code: linkSource,
+      }, {
         type: GuideSectionTypes.HTML,
         code: linkHtml,
       }]}
     >
-      <GuideDemo
-        html={linkHtml}
-      />
+      <GuideDemo>
+        <Link />
+      </GuideDemo>
     </GuideSection>
   </GuidePage>
 );

ui_framework/doc_site/src/views/page/page.js

@@ -14,7 +14,6 @@ import {
 } from '../../../../components';
 
 export default () => (
-
   <KuiPage>
     <KuiPageHeader>
       <KuiPageHeaderSection>

ui_framework/src/components/index.js

@@ -24,6 +24,10 @@ export {
   KuiKeyPadMenuItemButton,
 } from './key_pad_menu';
 
+export {
+  KuiLink,
+} from './link';
+
 export {
   KUI_MODAL_CANCEL_BUTTON,
   KUI_MODAL_CONFIRM_BUTTON,

ui_framework/src/components/link/__snapshots__/link.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KuiLink is rendered 1`] = `
+<a
+  aria-label="aria-label"
+  class="kuiLink testClass1 testClass2"
+  data-test-subj="test subject string"
+  href="#"
+  target="_blank"
+/>
+`;

ui_framework/src/components/link/index.js

@@ -0,0 +1,3 @@
+export {
+  KuiLink,
+} from './link';

ui_framework/src/components/link/link.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export const KuiLink = ({ children, className, ...rest }) => {
+  const classes = classNames('kuiLink', className);
+
+  return (
+    <a
+      className={classes}
+      {...rest}
+    >
+      {children}
+    </a>
+  );
+};

ui_framework/src/components/link/link.test.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { KuiLink } from './link';
+
+describe('KuiLink', () => {
+  test('is rendered', () => {
+    const component = render(
+      <KuiLink
+        href="#"
+        target="_blank"
+        {...requiredProps}
+      />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+});