Added "defined in file ..." information for the components.

Author: Mikolaj Dadela

loaders/styleguide.loader.js

@@ -10,6 +10,7 @@ function processComponent(filepath) {
 	var hasExamples = !!fs.existsSync(examplesFile);
 	return '{' + [
 			'filepath: ' + JSON.stringify(filepath),
+			'relativePath: ' + JSON.stringify(path.relative(config.rootDir, filepath)),
 			'module: ' + requireIt(filepath),
 			'props: ' + requireIt('!!props!' + filepath),
 			'examples: ' + (hasExamples ? requireIt('examples!' + examplesFile) : null)

src/components/Layout/Layout.css

@@ -6,7 +6,7 @@
 }
 
 .heading {
-	margin-bottom: .5rem;
+	margin-bottom: 2rem;
 	font-size: 3rem;
 	font-weight: normal;
 }

src/components/ReactComponent/ReactComponent.css

@@ -1,13 +1,19 @@
 .root {
-	margin-bottom: 2rem;
+	margin-bottom: 3rem;
 }
 
 .heading {
-	margin-bottom: 1rem;
 	font-size: 2rem;
 	font-weight: normal;
 }
 
+.sourcePath {
+	color: #aaa;
+	font-size: 0.8rem;
+	margin-bottom: 1rem;
+	font-family: monospace;
+}
+
 .description {
 	margin-bottom: 1rem;
 }

src/components/ReactComponent/ReactComponent.js

@@ -46,6 +46,7 @@ export default class ReactComponent extends Component {
 		return (
 			<div className={s.root}>
 				<h2 className={s.heading}>{component.name}</h2>
+				<div className={s.sourcePath}>{component.relativePath}</div>
 				{this.renderDescription()}
 				<Props props={component.props}/>
 				{this.renderExamples()}