refactor(ui): add Link component

.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,

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

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'

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()
+  })
+})

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>
+`;