From 91e6064b9ad7a7d16ac9b99376647afdbd4d5493 Mon Sep 17 00:00:00 2001
From: Levi Thomason <me@levithomason.com>
Date: Thu, 1 Sep 2016 22:26:53 -0700
Subject: [PATCH] docs(ComponentDoc): add sub component descriptions (#462)

---
 docs/app/Components/ComponentDoc/ComponentDoc.js | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/docs/app/Components/ComponentDoc/ComponentDoc.js b/docs/app/Components/ComponentDoc/ComponentDoc.js
index 6d9137ac77..90f444241e 100644
--- a/docs/app/Components/ComponentDoc/ComponentDoc.js
+++ b/docs/app/Components/ComponentDoc/ComponentDoc.js
@@ -10,7 +10,7 @@ import docgenInfo from '../../docgenInfo.json'
 
 import { META } from 'src/lib'
 import * as stardust from 'src'
-import { Grid, Header, Icon, List } from 'src'
+import { Divider, Grid, Header, Icon, List } from 'src'
 
 const docgenPaths = _.keys(docgenInfo)
 
@@ -44,6 +44,11 @@ const showPropsStyle = {
   cursor: 'pointer',
 }
 
+const subDescriptionStyle = {
+  fontSize: '1.08em',
+  color: '#777',
+}
+
 const linkListStyle = {
   position: 'absolute',
   padding: '0.5em',
@@ -148,6 +153,7 @@ export default class ComponentDoc extends Component {
     )))
 
     const hasSubComponents = !_.isEmpty(subComponents)
+    const showSubDescription = hasSubComponents && _.get(selectedDocgen, 'docBlock.description')
 
     const subComponentItems = _.map(subComponents, ({ _meta: { name } }) => (
       <div key={name} className={itemCX(name)} onClick={() => this.toggleProps(name)}>
@@ -176,7 +182,12 @@ export default class ComponentDoc extends Component {
         </div>
         {selectedDocgen && (
           <div>
-            <br />
+            {showSubDescription && (
+              <div style={subDescriptionStyle}>
+                {selectedDocgen.docBlock.description}
+                <Divider />
+              </div>
+            )}
             <ComponentProps props={selectedDocgen.props} />
           </div>
         )}