Contributing guidelines for the components

packages/components/src/dashicon/README.md

@@ -5,13 +5,11 @@
 ```jsx
 import { Dashicon } from '@wordpress/components';
 
-const MyDashicon = () => {
-	return (
-		<div>
-			<Dashicon icon="admin-home" />
-			<Dashicon icon="products" />
-			<Dashicon icon="wordpress" />
-		</div>
-	);
-}
+const MyDashicon = () => (
+	<div>
+		<Dashicon icon="admin-home" />
+		<Dashicon icon="products" />
+		<Dashicon icon="wordpress" />
+	</div>
+);
 ```

packages/components/src/higher-order/with-focus-return/README.md

@@ -21,7 +21,7 @@ const EnhancedComponent = withFocusReturn(
 const MyComponentWithFocusReturn = withState( {
 	text: '',
 } )( ( { text, setState } ) => {
-	const unmount = (  ) => {
+	const unmount = () => {
 		document.activeElement.blur();
 		setState( { text: '' } );
 	}

packages/components/src/modal/README.md

@@ -9,14 +9,13 @@ The modal is used to create an accessible modal over an application.
 The following example shows you how to properly implement a modal. For the modal to properly work it's important you implement the close logic for the modal properly.
 
 ```jsx
-import { Fragment } from '@wordpress/element';
 import { Button, Modal } from '@wordpress/components';
 import { withState } from '@wordpress/compose';
 
 const MyModal = withState( {
 	isOpen: false,
 } )( ( { isOpen, setState } ) => (
-	<Fragment>
+	<div>
 		<Button isDefault onClick={ () => setState( { isOpen: true } ) }>Open Modal</Button>
 		{ isOpen ?
 			<Modal
@@ -27,7 +26,7 @@ const MyModal = withState( {
 				</Button>
 			</Modal> 
 			: null }
-	</Fragment>
+	</div>
 ) );
 ```
 

packages/components/src/navigable-container/README.md

@@ -1,5 +1,4 @@
-NavigableContainers
-=============
+# NavigableContainers
 
 `NavigableContainer` is a React component to render a container navigable using the keyboard. Only things that are focusable can be navigated to. It will currently always be a `div`.
 

packages/components/src/notice/README.md

@@ -17,7 +17,7 @@ const MyNotice = () => (
 For more complex markup, you can pass any JSX element:
 
 ```jsx
-const MyComplexNotice = () => (
+const MyNotice = () => (
 	<Notice status="error">
 		<p>An error occurred: <code>{ errorDetails }</code>.</p>
 	</Notice>

packages/components/src/scroll-lock/README.md

@@ -20,8 +20,8 @@ const MyScrollLock = withState( {
 		<div>
 			<Button isDefault onClick={ toggleLock }>
 				Toggle scroll lock
-				{ isScrollLocked && <ScrollLock /> }
 			</Button>
+			{ isScrollLocked && <ScrollLock /> }
 			<p>Scroll locked: <strong>{ isScrollLocked ? 'Yes' : 'No' }</strong></p>
 		</div>
 	);