Add fontStyle prop to TYPOGRAPHY

src/__tests__/Heading.js

@@ -82,6 +82,11 @@ describe('Heading', () => {
     }
   })
 
+  it('respects the "fontStyle" prop', () => {
+    expect(render(<Heading fontStyle="italic" />)).toHaveStyleRule('font-style', 'italic')
+    expect(render(<Heading is="i" fontStyle="normal" />)).toHaveStyleRule('font-style', 'normal')
+  })
+
   xit('renders fontSize with f* classes using inverse scale', () => {
     expect(render(<Heading fontSize={0} theme={theme} />)).toEqual(render(<span className="f6" />))
     expect(render(<Heading fontSize={1} theme={theme} />)).toEqual(render(<span className="f5" />))

src/__tests__/Link.js

@@ -29,4 +29,9 @@ describe('Link', () => {
   it('respects hoverColor prop', () => {
     expect(render(<Link hoverColor="blue.4" />)).toMatchSnapshot()
   })
+
+  it('respects the "fontStyle" prop', () => {
+    expect(render(<Link fontStyle="italic" />)).toHaveStyleRule('font-style', 'italic')
+    expect(render(<Link is="i" fontStyle="normal" />)).toHaveStyleRule('font-style', 'normal')
+  })
 })

src/__tests__/Text.js

@@ -22,7 +22,7 @@ describe('Text', () => {
     expect(render(<Text is="b" />).type).toEqual('b')
   })
 
-  it('renders font-size', () => {
+  it('renders fontSize', () => {
     for (const fontSize of theme.fontSizes) {
       expect(render(<Text fontSize={fontSize} />)).toHaveStyleRule('font-size', px(fontSize))
     }
@@ -51,6 +51,11 @@ describe('Text', () => {
     expect(render(<Text fontWeight="normal" />)).toHaveStyleRule('font-weight', '400')
   })
 
+  it('respects the "fontStyle" prop', () => {
+    expect(render(<Text fontStyle="italic" />)).toHaveStyleRule('font-style', 'italic')
+    expect(render(<Text is="i" fontStyle="normal" />)).toHaveStyleRule('font-style', 'normal')
+  })
+
   it('respects lineHeight', () => {
     for (const [name, value] of Object.entries(theme.lineHeights)) {
       expect(render(<Text lineHeight={name} />)).toHaveStyleRule('line-height', String(value))

src/constants.js

@@ -19,6 +19,7 @@ export const BORDER = compose(
 export const TYPOGRAPHY = compose(
   styles.fontFamily,
   styles.fontSize,
+  styles.fontStyle,
   styles.fontWeight,
   styles.lineHeight,
   styles.textAlign
@@ -73,6 +74,7 @@ export const TYPOGRAPHY_LIST = [
   // typography props
   'fontFamily',
   'fontSize',
+  'fontStyle',
   'fontWeight',
   'lineHeight',
   'textAlign'