From c3b443428f6b8449200e352a72ec3d43e37aef45 Mon Sep 17 00:00:00 2001
From: Tom Kirkpatrick <tkp@kirkdesigns.co.uk>
Date: Wed, 2 Jan 2019 13:59:50 +0100
Subject: [PATCH] refactor(ui): add Link component

---
 .eslintrc.js                                  |  1 +
 app/components/UI/Link.js                     | 28 +++++++++++++++++++
 app/components/UI/index.js                    |  1 +
 test/unit/components/UI/Link.spec.js          | 10 +++++++
 .../UI/__snapshots__/Link.spec.js.snap        | 20 +++++++++++++
 5 files changed, 60 insertions(+)
 create mode 100644 app/components/UI/Link.js
 create mode 100644 test/unit/components/UI/Link.spec.js
 create mode 100644 test/unit/components/UI/__snapshots__/Link.spec.js.snap

diff --git a/.eslintrc.js b/.eslintrc.js
index eb01fddc8c1..62829d782de 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -28,6 +28,7 @@ module.exports = {
     'prettier/prettier': 'error',
     'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
     'react/no-did-mount-set-state': 0,
+    'jsx-a11y/anchor-is-valid': [1, { components: [] }],
     'jsx-a11y/no-static-element-interactions': 0,
     'jsx-a11y/no-noninteractive-element-interactions': 0,
     'jsx-a11y/click-events-have-key-events': 0,
diff --git a/app/components/UI/Link.js b/app/components/UI/Link.js
new file mode 100644
index 00000000000..104b4f8a15d
--- /dev/null
+++ b/app/components/UI/Link.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Text } from 'components/UI'
+
+/**
+ * @render react
+ * @name Link
+ * @example
+ * <Link>Some text</Link>
+ */
+class Link extends React.PureComponent {
+  static displayName = 'Link'
+
+  static propTypes = {
+    children: PropTypes.node
+  }
+
+  render() {
+    const { children } = this.props
+    return (
+      <Text as="a" css={{ cursor: 'pointer', 'text-decoration': 'underline' }} {...this.props}>
+        {children}
+      </Text>
+    )
+  }
+}
+
+export default Link
diff --git a/app/components/UI/index.js b/app/components/UI/index.js
index 69e905b317c..da81964a0c9 100644
--- a/app/components/UI/index.js
+++ b/app/components/UI/index.js
@@ -17,6 +17,7 @@ export Heading from './Heading'
 export Input from './Input'
 export Label from './Label'
 export LightningInvoiceInput from './LightningInvoiceInput'
+export Link from './Link'
 export MainContent from './MainContent'
 export Modal from './Modal'
 export Notification from './Notification'
diff --git a/test/unit/components/UI/Link.spec.js b/test/unit/components/UI/Link.spec.js
new file mode 100644
index 00000000000..a67ba74db4d
--- /dev/null
+++ b/test/unit/components/UI/Link.spec.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import { Link } from 'components/UI'
+
+describe('component.UI.Link', () => {
+  it('should render correctly', () => {
+    const tree = renderer.create(<Link>Link text</Link>).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/test/unit/components/UI/__snapshots__/Link.spec.js.snap b/test/unit/components/UI/__snapshots__/Link.spec.js.snap
new file mode 100644
index 00000000000..92e8e36b551
--- /dev/null
+++ b/test/unit/components/UI/__snapshots__/Link.spec.js.snap
@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component.UI.Link should render correctly 1`] = `
+.c0 {
+  font-size: m;
+  color: primaryText;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  line-height: 1.4;
+}
+
+<a
+  className="c0"
+  color="primaryText"
+  fontSize="m"
+>
+  Link text
+</a>
+`;