Documentation: Adding withInstanceId HoC documentation

.storybook/config.js

@@ -16,6 +16,8 @@ function loadStories() {
 	window.wp = { ...window.wp, element };
 	require( '../components/story' );
 	require( '../components/button/story' );
+	require( '../components/higher-order/story' );
+	require( '../components/higher-order/with-instance-id/story' );
 }
 
 setOptions( {

components/higher-order/README.md

@@ -0,0 +1,6 @@
+Higher Order Components
+=======================
+
+This directory includes a library of generic Higher Order React Components.
+
+[Learn more abouth Higher Order Components](https://facebook.github.io/react/docs/higher-order-components.html)

components/higher-order/story/index.js

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import ReactMarkdown from 'react-markdown';
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+
+/**
+ * Internal dependencies
+ */
+import readme from '../README.md';
+
+storiesOf( 'Higher Order Components', module )
+	.addDecorator( withKnobs )
+	.add( 'Intro', () => <ReactMarkdown source={ readme } /> );

components/higher-order/with-instance-id/README.md

@@ -0,0 +1,24 @@
+withInstanceId
+==============
+
+Some components need to generate a unique id for each instance. This could serve as suffixes to element ID's for example.
+Wrapping a component with `withInstanceId` provides a unique `instanceId` to serve this purpose.
+
+## Usage
+
+```jsx
+/**
+ * WordPress dependencies
+ */
+import { withInstanceId } from 'components';
+
+function MyCustomElement( { instanceId } ) {
+	return (
+		<div id={ `my-custom-element-${ instanceId }` }>
+			content
+		</div>
+	);
+}
+
+export default withInstanceId( MyCustomElement );
+```

components/higher-order/with-instance-id/story/index.js

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import ReactMarkdown from 'react-markdown';
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+
+/**
+ * Internal dependencies
+ */
+import readme from '../README.md';
+
+storiesOf( 'Higher Order Components', module )
+	.addDecorator( withKnobs )
+	.add( 'withInstanceId', () => <ReactMarkdown source={ readme } /> );

components/story/index.js

@@ -12,4 +12,4 @@ import readme from '../README.md';
 
 storiesOf( 'Components', module )
 	.addDecorator( withKnobs )
-	.add( 'Welcome', () => <ReactMarkdown source={ readme } /> );
+	.add( 'Intro', () => <ReactMarkdown source={ readme } /> );