feat(ui): Add Truncate component

Component that truncates text to a given length with an ellipsis in the
middle of the string.

app/components/UI/Truncate.js

@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types'
+
+const Truncate = ({ text, maxlen = 12 }) => {
+  if (!text) {
+    return null
+  }
+
+  const truncatedText =
+    text.length < maxlen
+      ? text
+      : text.substr(0, maxlen / 2) + '...' + text.substr(text.length - maxlen / 2)
+
+  return truncatedText
+}
+
+Truncate.propTypes = {
+  text: PropTypes.string.isRequired,
+  maxlen: PropTypes.number
+}
+
+export default Truncate

app/components/UI/index.js

@@ -28,3 +28,4 @@ export Text from './Text'
 export TextArea from './TextArea'
 export Titlebar from './Titlebar'
 export Toggle from './Toggle'
+export Truncate from './Truncate'

test/unit/components/UI/Truncate.spec.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import { Truncate } from 'components/UI'
+
+describe('component.UI.Truncate', () => {
+  it('should truncate text to 12 chars by default', () => {
+    const tree = renderer
+      .create(<Truncate text="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />)
+      .toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('should truncate test to a specific length when the maxlen parm is provided', () => {
+    const tree = renderer
+      .create(
+        <Truncate text="Lorem ipsum dolor sit amet, consectetur adipiscing elit" maxlen={30} />
+      )
+      .toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

test/unit/components/UI/__snapshots__/Truncate.spec.js.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component.UI.Truncate should truncate test to a specific length when the maxlen parm is provided 1`] = `"Lorem ipsum dol...adipiscing elit"`;
+
+exports[`component.UI.Truncate should truncate text to 12 chars by default 1`] = `"Lorem ...g elit"`;