Merge pull request #1233 from woocommerce/fix/devDocs-filePath

Fix/dev docs file path

client/devdocs/docs.js

@@ -18,7 +18,8 @@ class Docs extends Component {
 	}
 
 	getReadme() {
-		const readme = require( `../../docs/components/${ this.props.filePath }.md` );
+		const { filePath, docPath } = this.props;
+		const readme = require( `../../docs/components/${ docPath }/${ filePath }.md` );
 		if ( ! readme ) {
 			return;
 		}
@@ -37,4 +38,8 @@ class Docs extends Component {
 	}
 }
 
+Docs.defaultProps = {
+	docPath: 'packages',
+};
+
 export default Docs;

client/devdocs/index.js

@@ -52,7 +52,7 @@ export default class extends Component {
 			<div className={ className }>
 				<Header sections={ breadcrumbs } />
 				{ exampleList.map( example => {
-					const { componentName, filePath, render } = getExampleData( example );
+					const { componentName, filePath, render, docPath } = getExampleData( example );
 					const cardClasses = classnames(
 						'woocommerce-devdocs__card',
 						`woocommerce-devdocs__card--${ filePath }`
@@ -78,7 +78,11 @@ export default class extends Component {
 							/>
 
 							{ component && (
-								<ComponentDocs componentName={ componentName } filePath={ filePath } />
+								<ComponentDocs
+									componentName={ componentName }
+									filePath={ filePath }
+									docPath={ docPath }
+								/>
 							) }
 						</Card>
 					);

docs/documentation.md

@@ -18,6 +18,6 @@ You can use [`card/example.md`](https://raw.githubusercontent.com/woocommerce/wc
 
 ## 4. Add your example to `client/devdocs/examples.json`
 
-Keep these alphabetized. Optional properties here are `render` and `filePath`. `render` defaults to `My{ComponentName}`, and `filePath` defaults to `/docs/component/{component-name-as-slug}`.
+Keep these alphabetized. Optional properties here are `render`, `filePath`, and `docPath`. `render` defaults to `My{ComponentName}`, and `filePath` defaults to `/docs/component/packages/{component-name-as-slug}`. `docPath` designates the origin of the component and efaults to `packages` for components from `/packages/components`.
 
 Now you can visit `/wp-admin/admin.php?page=wc-admin#/devdocs` to see your component in action.