Refactor: Extract table to separate component

Author: sapegin

examples/customised/styleguide.config.js

@@ -49,10 +49,6 @@ module.exports = {
 			alias: {
 				// Override Styleguidist components
 				'rsg-components/Logo': path.join(__dirname, 'styleguide/components/Logo'),
-				'rsg-components/ReactComponent/ReactComponentRenderer': path.join(
-					__dirname,
-					'styleguide/components/ReactComponentRenderer'
-				),
 				'rsg-components/StyleGuide/StyleGuideRenderer': path.join(
 					__dirname,
 					'styleguide/components/StyleGuide'

examples/customised/styleguide/components/ReactComponentRenderer.js

@@ -29,8 +29,8 @@ module.exports = {
 		performance: env === 'development'
 			? false
 			: {
-					maxAssetSize: 650000, // bytes
-					maxEntrypointSize: 650000, // bytes
+					maxAssetSize: 670000, // bytes
+					maxEntrypointSize: 670000, // bytes
 					hints: 'error',
 				},
 	}),

examples/sections/styleguide.config.js

@@ -1,34 +1,43 @@
 import React from 'react';
-import { ArgumentRenderer } from './ArgumentRenderer';
+import { ArgumentRenderer, styles } from './ArgumentRenderer';
 
 const name = 'Foo';
 const type = { name: 'Array' };
 const description = 'Converts foo to bar';
+const props = {
+	classes: classes(styles),
+};
 
-it('renderer should render argument', () => {
+it('should render argument', () => {
 	const actual = shallow(
-		<ArgumentRenderer classes={{}} name={name} type={type} description={description} />
+		<ArgumentRenderer {...props} name={name} type={type} description={description} />
 	);
 
 	expect(actual).toMatchSnapshot();
 });
 
-it('renderer should render argument without type', () => {
-	const actual = shallow(<ArgumentRenderer classes={{}} name={name} description={description} />);
+it('should render argument without type', () => {
+	const actual = shallow(<ArgumentRenderer {...props} name={name} description={description} />);
 
 	expect(actual).toMatchSnapshot();
 });
 
-it('renderer should render argument without description', () => {
-	const actual = shallow(<ArgumentRenderer classes={{}} name={name} type={type} />);
+it('should render argument without description', () => {
+	const actual = shallow(<ArgumentRenderer {...props} name={name} type={type} />);
 
 	expect(actual).toMatchSnapshot();
 });
 
-it('renderer should render return value', () => {
+it('should render return value', () => {
 	const actual = shallow(
-		<ArgumentRenderer classes={{}} type={type} description={description} returns />
+		<ArgumentRenderer {...props} type={type} description={description} returns />
 	);
 
 	expect(actual).toMatchSnapshot();
 });
+
+it('should render with block styles', () => {
+	const actual = shallow(<ArgumentRenderer {...props} block />);
+
+	expect(actual).toMatchSnapshot();
+});

src/rsg-components/Argument/Argument.spec.js

@@ -2,27 +2,26 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Styled from 'rsg-components/Styled';
 import Markdown from 'rsg-components/Markdown';
-import Code from 'rsg-components/Code';
 import Name from 'rsg-components/Name';
+import Type from 'rsg-components/Type';
 import Group from 'react-group';
 
-export const styles = ({ color }) => ({
-	type: {
-		fontSize: 'inherit',
-		color: color.type,
+export const styles = ({ space }) => ({
+	block: {
+		marginBottom: space[2],
 	},
 });
 
-export function ArgumentRenderer({ classes, name, type, description, returns, ...props }) {
+export function ArgumentRenderer({ classes, name, type, description, returns, block, ...props }) {
 	return (
-		<Group {...props}>
+		<Group className={block && classes.block} {...props}>
 			{returns && 'Returns'}
 			{name &&
 				<span>
-					<Name name={name} />
+					<Name>{name}</Name>
 					{type && ':'}
 				</span>}
-			{type && <Code className={classes.type}>{type.name}</Code>}
+			{type && <Type>{type.name}</Type>}
 			{description && <Markdown text={`— ${description}`} inline />}
 		</Group>
 	);
@@ -34,6 +33,7 @@ ArgumentRenderer.propTypes = {
 	type: PropTypes.object,
 	description: PropTypes.string,
 	returns: PropTypes.bool,
+	block: PropTypes.bool,
 };
 
 export default Styled(styles)(ArgumentRenderer);

src/rsg-components/Argument/ArgumentRenderer.js

@@ -1,49 +1,49 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renderer should render argument 1`] = `
+exports[`should render argument 1`] = `
 <Group
   separator=" "
 >
   <span>
-    <Styled(Name)
-      name="Foo"
-    />
+    <Styled(Name)>
+      Foo
+    </Styled(Name)>
     :
   </span>
-  <Styled(Code)>
+  <Styled(Type)>
     Array
-  </Styled(Code)>
+  </Styled(Type)>
   <Styled(Markdown)
     inline={true}
     text="— Converts foo to bar"
   />
 </Group>
 `;
 
-exports[`renderer should render argument without description 1`] = `
+exports[`should render argument without description 1`] = `
 <Group
   separator=" "
 >
   <span>
-    <Styled(Name)
-      name="Foo"
-    />
+    <Styled(Name)>
+      Foo
+    </Styled(Name)>
     :
   </span>
-  <Styled(Code)>
+  <Styled(Type)>
     Array
-  </Styled(Code)>
+  </Styled(Type)>
 </Group>
 `;
 
-exports[`renderer should render argument without type 1`] = `
+exports[`should render argument without type 1`] = `
 <Group
   separator=" "
 >
   <span>
-    <Styled(Name)
-      name="Foo"
-    />
+    <Styled(Name)>
+      Foo
+    </Styled(Name)>
   </span>
   <Styled(Markdown)
     inline={true}
@@ -52,17 +52,24 @@ exports[`renderer should render argument without type 1`] = `
 </Group>
 `;
 
-exports[`renderer should render return value 1`] = `
+exports[`should render return value 1`] = `
 <Group
   separator=" "
 >
   Returns
-  <Styled(Code)>
+  <Styled(Type)>
     Array
-  </Styled(Code)>
+  </Styled(Type)>
   <Styled(Markdown)
     inline={true}
     text="— Converts foo to bar"
   />
 </Group>
 `;
+
+exports[`should render with block styles 1`] = `
+<Group
+  className="block"
+  separator=" "
+/>
+`;