Fix: Margins in usage tabs

Author: sapegin

src/rsg-components/Para/__snapshots__/Para.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render paragraph 1`] = `
-<p>
+<div>
   Pizza
-</p>
+</div>
 `;

src/rsg-components/ReactComponent/ReactComponentRenderer.js

@@ -12,6 +12,9 @@ const styles = ({ color, fontSize, fontFamily, space }) => ({
 	tabs: {
 		marginBottom: space[3],
 	},
+	tabButtons: {
+		marginBottom: space[1],
+	},
 	pathLine: {
 		fontFamily: fontFamily.monospace,
 		color: color.light,
@@ -47,7 +50,7 @@ export function ReactComponentRenderer({
 				</div>}
 			{tabButtons &&
 				<div className={classes.tabs}>
-					{tabButtons}
+					<div className={classes.tabButtons}>{tabButtons}</div>
 					{tabBody}
 				</div>}
 			{examples}

src/rsg-components/ReactComponent/__snapshots__/ReactComponent.spec.js.snap

@@ -273,7 +273,9 @@ exports[`ReactComponentRenderer should render usage section 1`] = `
   </header>
   <div>
     <div>
-      tab buttons
+      <div>
+        tab buttons
+      </div>
     </div>
     <div>
       tab body

src/rsg-components/Usage/UsageRenderer.js

@@ -7,6 +7,7 @@ const styles = ({ space, fontFamily, fontSize, color }) => ({
 		marginBottom: space[4],
 	},
 	heading: {
+		marginTop: 0,
 		marginBottom: space[1],
 		color: color.base,
 		fontFamily: fontFamily.base,