From aafadc9016cafa8d21f7532080cf2ca866b1bb60 Mon Sep 17 00:00:00 2001
From: Satyajit Sahoo <satyajit.happy@gmail.com>
Date: Fri, 25 Nov 2016 07:42:16 +0530
Subject: [PATCH] docs: add a way to specify extra props

---
 docs/templates/ComponentDocs.js   | 58 +++++++++++++++++++++++--------
 docs/templates/styles/body.js     |  4 +--
 docs/templates/styles/mono.js     | 15 ++++++--
 src/components/Typography/Text.js |  2 ++
 4 files changed, 60 insertions(+), 19 deletions(-)

diff --git a/docs/templates/ComponentDocs.js b/docs/templates/ComponentDocs.js
index 871f986..bf0646c 100644
--- a/docs/templates/ComponentDocs.js
+++ b/docs/templates/ComponentDocs.js
@@ -65,7 +65,25 @@ const propDetails = style({
   },
 });
 
+const rest = style({
+  color: '#2196F3',
+});
+
 export default function ComponentDocs(props: any) {
+  const restProps = [];
+  const description = props.info.description.split('\n').filter(line => {
+    if (line.startsWith('@extends ')) {
+      const parts = line.split(' ').slice(1);
+      const link = parts.pop();
+      restProps.push({
+        name: parts.join(' '),
+        link,
+      });
+      return false;
+    }
+    return true;
+  }).join('\n');
+
   return (
     <div {...wrapper}>
       <h1 {...mono} {...name}>{`<${props.name} />`}</h1>
@@ -75,27 +93,39 @@ export default function ComponentDocs(props: any) {
         const { flowType, type, required } = props.info.props[prop];
         return (
           <div {...propInfo} key={prop}>
-            <span
-              {...mono}
-              {...propRequired}
-              data-hint='required'
-            >
-              {required ? '*' : ''}
+            <span {...mono}>
+              <span
+                {...propRequired}
+                data-hint='required'
+              >
+                {required ? '*' : ''}
+              </span>
+              <a
+                {...mono}
+                {...propLabel}
+                name={prop}
+                href={`#${prop}`}
+              >
+                {prop}: {flowType.name === 'any' && type ? (type.raw || type.name) : (flowType.raw || flowType.name)}
+              </a>
             </span>
-            <a
-              {...mono}
-              {...propLabel}
-              name={prop}
-              href={`#${prop}`}
-            >
-              {prop}: {flowType.name === 'any' && type ? (type.raw || type.name) : (flowType.raw || flowType.name)}
-            </a>
             <p {...body} {...propDetails}>
               {props.info.props[prop].description}
             </p>
           </div>
         );
       })}
+      {restProps && restProps.length ? restProps.map(prop => (
+        <a
+          {...mono}
+          {...propLabel}
+          {...rest}
+          key={prop.name}
+          href={prop.link}
+        >
+          ...{prop.name}
+        </a>
+      )) : null}
     </div>
   );
 }
diff --git a/docs/templates/styles/body.js b/docs/templates/styles/body.js
index f8f2ab5..51979ac 100644
--- a/docs/templates/styles/body.js
+++ b/docs/templates/styles/body.js
@@ -10,14 +10,14 @@ insertGlobal(`
     box-sizing: inherit;
   }
   html, body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     margin: 0;
     padding: 0;
-    color: #555;
+    color: #333;
   }
 `);
 
 const styles = style({
-  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
   lineHeight: 1.5,
 });
 
diff --git a/docs/templates/styles/mono.js b/docs/templates/styles/mono.js
index 22de7aa..db1a935 100644
--- a/docs/templates/styles/mono.js
+++ b/docs/templates/styles/mono.js
@@ -1,11 +1,20 @@
 /* @flow */
 
-import { style } from 'glamor';
+import { style, insertGlobal } from 'glamor';
+
+const fontFamily = '"Roboto Mono", "Operator Mono", "Fira Code", "Ubuntu Mono", "Droid Sans Mono", "Liberation Mono", "Source Code Pro", Menlo, Consolas, Courier, monospace';
+
+insertGlobal(`
+  code {
+    font-family: ${fontFamily};
+    color: #000;
+  }
+`);
 
 const styles = style({
-  fontFamily: '"Roboto Mono", "Operator Mono", "Fira Code", "Ubuntu Mono", "Droid Sans Mono", "Liberation Mono", "Source Code Pro", Menlo, Consolas, Courier, monospace',
-  lineHeight: 2,
+  fontFamily,
   color: '#000',
+  lineHeight: 2,
 });
 
 export default styles;
diff --git a/src/components/Typography/Text.js b/src/components/Typography/Text.js
index c0d73d3..e14a861 100644
--- a/src/components/Typography/Text.js
+++ b/src/components/Typography/Text.js
@@ -15,6 +15,8 @@ type Props = {
 
 /**
  * Text component which follows settings from the theme
+ *
+ * @extends Text props https://facebook.github.io/react-native/docs/text.html#props
  */
 class Text extends PureComponent<void, Props, void> {
   static propTypes = {