Fix: Allow custom styling for prop names and types (styleguidist#1211)

Closes styleguidist#1205

Author: gazpachu

src/client/rsg-components/Name/NameRenderer.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Code from 'rsg-components/Code';
 import Styled from 'rsg-components/Styled';
 import cx from 'classnames';
 
-export const styles = ({ fontSize, color }) => ({
+export const styles = ({ fontFamily, fontSize, color }) => ({
 	name: {
+		fontFamily: fontFamily.monospace,
 		fontSize: fontSize.small,
 		color: color.name,
 	},
@@ -19,11 +19,7 @@ export function NameRenderer({ classes, children, deprecated }) {
 	const classNames = cx(classes.name, {
 		[classes.isDeprecated]: deprecated,
 	});
-	return (
-		<span className={classNames}>
-			<Code>{children}</Code>
-		</span>
-	);
+	return <code className={classNames}>{children}</code>;
 }
 
 NameRenderer.propTypes = {

src/client/rsg-components/Name/__snapshots__/Name.spec.js.snap

@@ -1,21 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renderer should render argument name 1`] = `
-<span
+<code
   className="name"
 >
-  <Styled(Code)>
-    Foo
-  </Styled(Code)>
-</span>
+  Foo
+</code>
 `;
 
 exports[`renderer should render deprecated argument name 1`] = `
-<span
+<code
   className="name isDeprecated"
 >
-  <Styled(Code)>
-    Foo
-  </Styled(Code)>
-</span>
+  Foo
+</code>
 `;

src/client/rsg-components/Type/TypeRenderer.js

@@ -1,21 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Code from 'rsg-components/Code';
 import Styled from 'rsg-components/Styled';
 
-export const styles = ({ fontSize, color }) => ({
+export const styles = ({ fontFamily, fontSize, color }) => ({
 	type: {
+		fontFamily: fontFamily.monospace,
 		fontSize: fontSize.small,
 		color: color.type,
 	},
 });
 
 export function TypeRenderer({ classes, children }) {
-	return (
-		<span className={classes.type}>
-			<Code>{children}</Code>
-		</span>
-	);
+	return <span className={classes.type}>{children}</span>;
 }
 
 TypeRenderer.propTypes = {

src/client/rsg-components/Type/__snapshots__/Type.spec.js.snap

@@ -4,8 +4,6 @@ exports[`renderer should render type 1`] = `
 <span
   className="type"
 >
-  <Styled(Code)>
-    Array
-  </Styled(Code)>
+  Array
 </span>
 `;