feat(text): Add invert prop to Paragraph and Text

src/components/Notification/__tests__/__snapshots__/Notification.spec.jsx.snap

@@ -12,6 +12,7 @@ exports[`<Notification /> renders 1`] = `
     >
       <Paragraph
         bold={false}
+        invert={false}
         size="medium"
       >
         Some content

src/components/Typography/Paragraph/Paragraph.jsx

@@ -7,10 +7,13 @@ import safeRest from '../../../safeRest'
 import styles from './Paragraph.modules.scss'
 import textStyles from '../Text/Text.modules.scss'
 
-const Paragraph = ({ bold, size, children, ...rest }, context) => {
+const Paragraph = ({ bold, size, invert, children, ...rest }, context) => {
+
+  const paragraphColor = invert ? textStyles.colorInverted : textStyles.color
+
   const classes = classnames(
     styles.base,
-    context.inheritColor ? styles.inheritColor : textStyles.color,
+    context.inheritColor ? styles.inheritColor : paragraphColor,
     textStyles[size],
     bold ? textStyles.boldFont : textStyles[`${size}Font`]
   )
@@ -29,12 +32,14 @@ Paragraph.propTypes = {
     'medium',
     'large'
   ]),
+  invert: PropTypes.bool,
   children: PropTypes.node.isRequired
 }
 
 Paragraph.defaultProps = {
   bold: false,
-  size: 'medium'
+  size: 'medium',
+  invert: false
 }
 
 Paragraph.contextTypes = {

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

@@ -31,6 +31,16 @@ describe('Paragraph', () => {
     expect(paragraph).not.toHaveClassName('mediumFont')
   })
 
+  it('can be inverted', () => {
+    let paragraph = doShallow()
+    expect(paragraph).not.toHaveClassName('colorInverted')
+    expect(paragraph).toHaveClassName('color')
+
+    paragraph = doShallow({ invert: true })
+    expect(paragraph).toHaveClassName('colorInverted')
+    expect(paragraph).not.toHaveClassName('color')
+  })
+
   it('can be sized', () => {
     let paragraph = doShallow()
     expect(paragraph).toHaveClassName('medium mediumFont')

src/components/Typography/Text/Text.jsx

@@ -6,11 +6,11 @@ import safeRest from '../../../safeRest'
 
 import styles from './Text.modules.scss'
 
-const Text = ({ bold, size, children, ...rest }) => {
+const Text = ({ bold, size, invert, children, ...rest }) => {
   const classes = classnames(
-    styles.color,
     styles[size],
-    bold ? styles.boldFont : styles[`${size}Font`]
+    bold ? styles.boldFont : styles[`${size}Font`],
+    invert ? styles.colorInverted : styles.color
   )
 
   return (
@@ -27,12 +27,14 @@ Text.propTypes = {
     'medium',
     'large'
   ]),
+  invert: PropTypes.bool,
   children: PropTypes.node.isRequired
 }
 
 Text.defaultProps = {
   bold: false,
-  size: 'medium'
+  size: 'medium',
+  invert: false
 }
 
 export default Text

src/components/Typography/Text/Text.modules.scss

@@ -35,3 +35,7 @@
 .color {
   color: $color-text;
 }
+
+.colorInverted {
+  color: $color-white;
+}

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

@@ -31,6 +31,16 @@ describe('Text', () => {
     expect(text).not.toHaveClassName('mediumFont')
   })
 
+  it('can be inverted', () => {
+    let text = doShallow()
+    expect(text).not.toHaveClassName('colorInverted')
+    expect(text).toHaveClassName('color')
+
+    text = doShallow({ invert: true })
+    expect(text).toHaveClassName('colorInverted')
+    expect(text).not.toHaveClassName('color')
+  })
+
   it('can be sized', () => {
     let text = doShallow()
     expect(text).toHaveClassName('medium mediumFont')

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

@@ -2,7 +2,7 @@
 
 exports[`Text renders 1`] = `
 <span
-  className="color medium mediumFont"
+  className="medium mediumFont color"
 >
   Some content
 </span>