diff --git a/src/rsg-components/Code/Code.spec.js b/src/rsg-components/Code/Code.spec.js index 25745a79c..c204fad11 100644 --- a/src/rsg-components/Code/Code.spec.js +++ b/src/rsg-components/Code/Code.spec.js @@ -1,9 +1,22 @@ import React from 'react'; import { CodeRenderer } from './CodeRenderer'; -it('renderer should render code', () => { - const code = ''; - const actual = shallow({code}); +describe('Code blocks', () => { + it('should render code', () => { + const code = ''; + const actual = shallow({code}); - expect(actual).toMatchSnapshot(); + expect(actual).toMatchSnapshot(); + }); + + it('should render code to be highlighted', () => { + const code = ''; + const actual = render( + + {code} + + ); + + expect(actual).toMatchSnapshot(); + }); }); diff --git a/src/rsg-components/Code/CodeRenderer.js b/src/rsg-components/Code/CodeRenderer.js index c40565ff7..96fd008d4 100644 --- a/src/rsg-components/Code/CodeRenderer.js +++ b/src/rsg-components/Code/CodeRenderer.js @@ -1,29 +1,31 @@ import React from 'react'; import PropTypes from 'prop-types'; +import cx from 'classnames'; import Styled from 'rsg-components/Styled'; const styles = ({ fontFamily }) => ({ code: { - display: 'inline', fontFamily: fontFamily.monospace, fontSize: 'inherit', color: 'inherit', background: 'transparent', + whiteSpace: 'inherit', }, }); export function CodeRenderer({ classes, className, children }) { - return ( - - {children} - - ); -} + const classNames = cx(className, classes.code); + const isHighlighted = className && className.indexOf('lang-') !== -1; + if (isHighlighted) { + return ; + } + return {children}; +} CodeRenderer.propTypes = { classes: PropTypes.object.isRequired, className: PropTypes.string, - children: PropTypes.node, + children: PropTypes.node.isRequired, }; export default Styled(styles)(CodeRenderer); diff --git a/src/rsg-components/Code/__snapshots__/Code.spec.js.snap b/src/rsg-components/Code/__snapshots__/Code.spec.js.snap index 3a4764bb5..007273ce9 100644 --- a/src/rsg-components/Code/__snapshots__/Code.spec.js.snap +++ b/src/rsg-components/Code/__snapshots__/Code.spec.js.snap @@ -1,9 +1,19 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`renderer should render code 1`] = ` - - - <button>OK</button> - - +exports[`Code blocks should render code 1`] = ` + + <button>OK</button> + +`; + +exports[`Code blocks should render code to be highlighted 1`] = ` + + + `; diff --git a/src/rsg-components/Markdown/Markdown.js b/src/rsg-components/Markdown/Markdown.js index de5186018..64627b002 100644 --- a/src/rsg-components/Markdown/Markdown.js +++ b/src/rsg-components/Markdown/Markdown.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import { compiler } from 'markdown-to-jsx'; import mapValues from 'lodash/mapValues'; @@ -10,25 +9,14 @@ import Para, { styles as paraStyles } from 'rsg-components/Para'; import MarkdownHeading from 'rsg-components/Markdown/MarkdownHeading'; import List from 'rsg-components/Markdown/List'; import Blockquote from 'rsg-components/Markdown/Blockquote'; +import Pre from 'rsg-components/Markdown/Pre'; +import Code from 'rsg-components/Code'; // We’re explicitly specifying Webpack loaders here so we could skip specifying them in Webpack configuration. // That way we could avoid clashes between our loaders and user loaders. // eslint-disable-next-line import/no-unresolved require('!!../../../loaders/style-loader!../../../loaders/css-loader!highlight.js/styles/tomorrow.css'); -// Code blocks with server-side syntax highlight -function Code({ children, className }) { - const isHighlighted = className && className.indexOf('lang-') !== -1; - if (isHighlighted) { - return ; - } - return {children}; -} -Code.propTypes = { - children: PropTypes.node, - className: PropTypes.string, -}; - // Custom CSS classes for each tag: → + custom components const getBaseOverrides = memoize(classes => { const styleOverrides = mapValues(classes, value => ({ @@ -110,9 +98,9 @@ const getBaseOverrides = memoize(classes => { }, code: { component: Code, - props: { - className: classes.code, - }, + }, + pre: { + component: Pre, }, }; }, () => 'getBaseOverrides'); @@ -129,7 +117,7 @@ const getInlineOverrides = memoize(classes => { }; }, () => 'getInlineOverrides'); -const styles = ({ space, fontFamily, fontSize, color, borderRadius }) => ({ +const styles = ({ space, fontFamily, fontSize, color }) => ({ base: { color: color.base, fontFamily: fontFamily.base, @@ -147,22 +135,6 @@ const styles = ({ space, fontFamily, fontSize, color, borderRadius }) => ({ borderColor: color.border, borderStyle: 'solid', }, - code: { - fontFamily: fontFamily.monospace, - fontSize: 'inherit', - color: 'inherit', - background: 'transparent', - whiteSpace: 'inherit', - }, - pre: { - composes: '$para', - backgroundColor: color.codeBackground, - border: [[1, color.border, 'solid']], - padding: [[space[1], space[2]]], - fontSize: fontSize.small, - borderRadius, - whiteSpace: 'pre', - }, table: { composes: '$para', borderCollapse: 'collapse', diff --git a/src/rsg-components/Markdown/Pre/Pre.spec.js b/src/rsg-components/Markdown/Pre/Pre.spec.js new file mode 100644 index 000000000..20167194b --- /dev/null +++ b/src/rsg-components/Markdown/Pre/Pre.spec.js @@ -0,0 +1,11 @@ +import React from 'react'; + +import Pre from './index'; + +describe('Markdown Pre', () => { + it('should render a pre', () => { + const actual = render(
This is pre-formatted text.
); + + expect(actual).toMatchSnapshot(); + }); +}); diff --git a/src/rsg-components/Markdown/Pre/PreRenderer.js b/src/rsg-components/Markdown/Pre/PreRenderer.js new file mode 100644 index 000000000..f94ff3374 --- /dev/null +++ b/src/rsg-components/Markdown/Pre/PreRenderer.js @@ -0,0 +1,27 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import { styles as paraStyles } from 'rsg-components/Para'; +import Styled from 'rsg-components/Styled'; + +const styles = ({ space, color, fontSize, fontFamily, borderRadius }) => ({ + pre: { + ...paraStyles({ space, color, fontFamily }).para, + fontSize: fontSize.small, + whiteSpace: 'pre', + backgroundColor: color.codeBackground, + padding: [[space[1], space[2]]], + border: [[1, color.border, 'solid']], + borderRadius, + }, +}); + +export function PreRenderer({ classes, children }) { + return 
{children}
; +} +PreRenderer.propTypes = { + classes: PropTypes.object.isRequired, + children: PropTypes.node.isRequired, +}; + +export default Styled(styles)(PreRenderer); diff --git a/src/rsg-components/Markdown/Pre/__snapshots__/Pre.spec.js.snap b/src/rsg-components/Markdown/Pre/__snapshots__/Pre.spec.js.snap new file mode 100644 index 000000000..16d321bcb --- /dev/null +++ b/src/rsg-components/Markdown/Pre/__snapshots__/Pre.spec.js.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Markdown Pre should render a pre 1`] = ` +
+  This is pre-formatted text.
+
+`; diff --git a/src/rsg-components/Markdown/Pre/index.js b/src/rsg-components/Markdown/Pre/index.js new file mode 100644 index 000000000..77d779692 --- /dev/null +++ b/src/rsg-components/Markdown/Pre/index.js @@ -0,0 +1 @@ +export { default } from 'rsg-components/Markdown/Pre/PreRenderer'; diff --git a/src/rsg-components/Markdown/__snapshots__/Markdown.spec.js.snap b/src/rsg-components/Markdown/__snapshots__/Markdown.spec.js.snap index 10ec0c4db..bb5327f78 100644 --- a/src/rsg-components/Markdown/__snapshots__/Markdown.spec.js.snap +++ b/src/rsg-components/Markdown/__snapshots__/Markdown.spec.js.snap @@ -2,7 +2,7 @@ exports[`Markdown should render Markdown in a p tag even for one paragraph 1`] = ` -

+

pizza

@@ -10,9 +10,9 @@ exports[`Markdown should render Markdown in a p tag even for one paragraph 1`] = exports[`Markdown should render Markdown in span in inline mode 1`] = ` - + Hello - + world ! @@ -23,28 +23,28 @@ exports[`Markdown should render Markdown in span in inline mode 1`] = ` exports[`Markdown should render Markdown with custom CSS classes 1`] = `
-
-

+
+

Header

-

+

Text with - + some - + formatting and a link .

-

+

Image @@ -56,7 +56,7 @@ exports[`Markdown should render Markdown with custom CSS classes 1`] = ` exports[`Markdown should render a blockquote 1`] = `

-

+

This is a blockquote. And this is a second line.

@@ -66,22 +66,22 @@ And this is a second line. exports[`Markdown should render check-lists correctly 1`] = ` -
    -
  • +
      +
    • list 1
      • -
    • +
    • list 2
      • -
    • +
    • - +
      +  
     
     
   
@@ -107,33 +107,33 @@ exports[`Markdown should render code blocks without escaping 1`] = `
 exports[`Markdown should render headings correctly 1`] = `
 
 
      
-  
      
-    
      
+  
      
+    
      
       one
     
      
   
      
-  
      
-    
      
+  
      
+    
      
       two
     
      
   
      
-  
      
-    
      
+  
      
+    
      
       three
     
      
   
      
-  
      
-    
      
+  
      
+    
      
       four
     
      
   
      
-  
      
-    
      
+  
      
+    
      
       five
     
      
   
      
-  
      
-    
      
+  
      
+    
      
       six
     
      
   
      
@@ -143,9 +143,9 @@ exports[`Markdown should render headings correctly 1`] = `
 
 exports[`Markdown should render inline code with escaping 1`] = `
 
-
      
+
      
   Foo
-  
+  
     <bar>
   
   baz
@@ -155,10 +155,10 @@ exports[`Markdown should render inline code with escaping 1`] = `
 
 exports[`Markdown should render links 1`] = `
 
-
      
+
      
   a
   
     link
   
@@ -168,25 +168,25 @@ exports[`Markdown should render links 1`] = `
 
 exports[`Markdown should render mixed nested lists correctly 1`] = `
 
-
        
-  
      • 
+
          
+  
        • 
     list 1
   
          • 
-  
        • 
+  
        • 
     list 2
-    
            
-      
          1. 
+    
              
+      
            1. 
         Sub-list
       
              2. 
-      
            2. 
+      
            3. 
         Sub-list
       
              4. 
-      
            4. 
+      
            5. 
         Sub-list
       
              6. 
     
            
   
            2. 
-  
          2. 
+  
          3. 
     list 3
   
            4. 
 
        
@@ -195,14 +195,14 @@ exports[`Markdown should render mixed nested lists correctly 1`] = `
 
 exports[`Markdown should render ordered lists correctly 1`] = `
 
-
          
-  
        1. 
+
            
+  
          1. 
     list
   
            2. 
-  
          2. 
+  
          3. 
     item
   
            4. 
-  
          4. 
+  
          5. 
     three
   
            6. 
 
          
@@ -211,14 +211,14 @@ exports[`Markdown should render ordered lists correctly 1`] = `
 
 exports[`Markdown should render unordered lists correctly 1`] = `
 
-
            
-  
          • 
+
              
+  
            • 
     list
   
              • 
-  
            • 
+  
            • 
     item
   
              • 
-  
            • 
+  
            • 
     three
   
              • 
 
            
diff --git a/src/rsg-components/Name/NameRenderer.js b/src/rsg-components/Name/NameRenderer.js
index b2421852c..aa746fbbf 100644
--- a/src/rsg-components/Name/NameRenderer.js
+++ b/src/rsg-components/Name/NameRenderer.js
@@ -4,9 +4,8 @@ import Code from 'rsg-components/Code';
 import Styled from 'rsg-components/Styled';
 import cx from 'classnames';
 
-export const styles = ({ fontFamily, fontSize, color }) => ({
+export const styles = ({ fontSize, color }) => ({
 	name: {
-		fontFamily: fontFamily.monospace,
 		fontSize: fontSize.small,
 		color: color.name,
 	},
@@ -20,7 +19,11 @@ export function NameRenderer({ classes, children, deprecated }) {
 	const classNames = cx(classes.name, {
 		[classes.isDeprecated]: deprecated,
 	});
-	return {children};
+	return (
+		
+			{children}
+		
+	);
 }
 
 NameRenderer.propTypes = {
diff --git a/src/rsg-components/Name/__snapshots__/Name.spec.js.snap b/src/rsg-components/Name/__snapshots__/Name.spec.js.snap
index 27e4f6249..395a5e72f 100644
--- a/src/rsg-components/Name/__snapshots__/Name.spec.js.snap
+++ b/src/rsg-components/Name/__snapshots__/Name.spec.js.snap
@@ -1,17 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renderer should render argument name 1`] = `
-
-  Foo
-
+  
+    Foo
+  
+
 `;
 
 exports[`renderer should render deprecated argument name 1`] = `
-
-  Foo
-
+  
+    Foo
+  
+
 `;
diff --git a/src/rsg-components/Type/Type.spec.js b/src/rsg-components/Type/Type.spec.js
index 087504f9d..6bcb6e0f9 100644
--- a/src/rsg-components/Type/Type.spec.js
+++ b/src/rsg-components/Type/Type.spec.js
@@ -1,8 +1,12 @@
 import React from 'react';
-import { TypeRenderer } from './TypeRenderer';
+import { TypeRenderer, styles } from './TypeRenderer';
+
+const props = {
+	classes: classes(styles),
+};
 
 it('renderer should render type', () => {
-	const actual = shallow(Array);
+	const actual = shallow(Array);
 
 	expect(actual).toMatchSnapshot();
 });
diff --git a/src/rsg-components/Type/TypeRenderer.js b/src/rsg-components/Type/TypeRenderer.js
index e3e9e02d6..becb3956c 100644
--- a/src/rsg-components/Type/TypeRenderer.js
+++ b/src/rsg-components/Type/TypeRenderer.js
@@ -3,16 +3,19 @@ import PropTypes from 'prop-types';
 import Code from 'rsg-components/Code';
 import Styled from 'rsg-components/Styled';
 
-const styles = ({ fontFamily, fontSize, color }) => ({
+export const styles = ({ fontSize, color }) => ({
 	type: {
-		fontFamily: fontFamily.monospace,
 		fontSize: fontSize.small,
 		color: color.type,
 	},
 });
 
 export function TypeRenderer({ classes, children }) {
-	return {children};
+	return (
+		
+			{children}
+		
+	);
 }
 
 TypeRenderer.propTypes = {
diff --git a/src/rsg-components/Type/__snapshots__/Type.spec.js.snap b/src/rsg-components/Type/__snapshots__/Type.spec.js.snap
index 90015a6bc..945be3683 100644
--- a/src/rsg-components/Type/__snapshots__/Type.spec.js.snap
+++ b/src/rsg-components/Type/__snapshots__/Type.spec.js.snap
@@ -1,7 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renderer should render type 1`] = `
-
-  Array
-
+
+  
+    Array
+  
+
 `;