feat(text): Create Text component for rendering inline text blocks

config/styleguide.config.js

@@ -126,7 +126,8 @@ module.exports = {
           components() {
             return compact([
               path.resolve('src/old-components/Card/Card.jsx'),
-              toggle(path.resolve('src/components/Typography/Paragraph/Paragraph.jsx'))
+              toggle(path.resolve('src/components/Typography/Paragraph/Paragraph.jsx')),
+              toggle(path.resolve('src/components/Typography/Text/Text.jsx'))
             ])
           },
           sections: [

src/components/Typography/Text/Text.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+import safeRest from '../../../safeRest'
+
+import styles from '../Paragraph/Paragraph.modules.scss'
+
+
+const Text = ({ bold, size, children, ...rest }) => {
+  const classes = classnames(
+    styles.color,
+    styles[size],
+    {
+      [styles.bold]: bold
+    }
+  )
+
+  return (
+    <span {...safeRest(rest)} className={classes}>
+      {children}
+    </span>
+  )
+}
+
+Text.propTypes = {
+  bold: PropTypes.bool,
+  size: PropTypes.oneOf([
+    'small',
+    'medium',
+    'large'
+  ]),
+  children: PropTypes.node.isRequired
+}
+
+Text.defaultProps = {
+  bold: false,
+  size: 'medium'
+}
+
+export default Text

src/components/Typography/Text/Text.md

@@ -0,0 +1,3 @@
+```
+<Text>I am some text</Text>
+```

src/components/Typography/Text/__tests__/Text.spec.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import toJson from 'enzyme-to-json'
+
+import Text from '../Text'
+
+describe('Text', () => {
+  const doShallow = props => (
+    shallow(<Text {...props}>Some content</Text>)
+  )
+
+  it('renders', () => {
+    const text = doShallow()
+
+    expect(toJson(text)).toMatchSnapshot()
+  })
+
+  it('renders an HTML span tag', () => {
+    const text = doShallow()
+
+    expect(text).toHaveTagName('span')
+  })
+
+  it('can be bold', () => {
+    let text = doShallow()
+    expect(text).not.toHaveClassName('bold')
+
+    text = doShallow({ bold: true })
+    expect(text).toHaveClassName('bold')
+  })
+
+  it('can be sized', () => {
+    let text = doShallow()
+    expect(text).toHaveClassName('medium')
+
+    text = doShallow({ size: 'small' })
+    expect(text).toHaveClassName('small')
+  })
+
+  it('passes additional attributes to the span element', () => {
+    const text = doShallow({ id: 'the-text' })
+
+    expect(text).toHaveProp('id', 'the-text')
+  })
+
+  it('does not allow custom CSS', () => {
+    const text = doShallow({ className: 'my-custom-class', style: { color: 'hotpink' } })
+
+    expect(text).not.toHaveProp('className', 'my-custom-class')
+    expect(text).not.toHaveProp('style')
+  })
+})

src/components/Typography/Text/__tests__/__snapshots__/Text.spec.jsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Text renders 1`] = `
+<span
+  className="color medium"
+>
+  Some content
+</span>
+`;