From 2c8fa2d968d8ce8f478dfcb84323beec9cf8f7bb Mon Sep 17 00:00:00 2001
From: Ind <thinkholic@users.noreply.github.com>
Date: Mon, 24 Oct 2016 12:19:35 +0530
Subject: [PATCH] add doc edit link (#46)

---
 src/components/Docs/Container/index.js | 5 +++++
 src/components/Docs/Content/index.js   | 5 ++++-
 src/components/Docs/Content/style.css  | 9 ++++++++-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/Docs/Container/index.js b/src/components/Docs/Container/index.js
index 11fbeab0589..3f0cf5f7047 100644
--- a/src/components/Docs/Container/index.js
+++ b/src/components/Docs/Container/index.js
@@ -26,6 +26,10 @@ class Container extends React.Component {
       selectedItemId
     } = this.props;
 
+    const gitHubRepoUrl = 'https://github.com/kadirahq/getstorybook.io';
+    const docPath = `${selectedCatId}/${selectedSectionId}/${selectedItemId}`;
+    const gitHubRepoDocUrl = `${gitHubRepoUrl}/tree/master/src/docs/${docPath}.js`;
+
     return (
       <div id="docs-container" className="row">
         <div className="row">
@@ -59,6 +63,7 @@ class Container extends React.Component {
           <Content
             title={selectedItem.title}
             content={selectedItem.content}
+            editUrl={gitHubRepoDocUrl}
           />
 
           <div className="nav-dropdown">
diff --git a/src/components/Docs/Content/index.js b/src/components/Docs/Content/index.js
index 883bc2a40d7..81fc499f0fd 100644
--- a/src/components/Docs/Content/index.js
+++ b/src/components/Docs/Content/index.js
@@ -15,10 +15,12 @@ marked.setOptions({
   smartypants: false
 });
 
-const DocsContent = ({ title, content }) => (
+const DocsContent = ({ title, content, editUrl }) => (
   <div id="docs-content">
     <div className="content">
       <h2 className="title">{ title }</h2>
+      <p><a className="edit-link" href={editUrl} target="_blank">Edit this page</a></p>
+
       <div className="markdown">
         <Highlight>
           { marked(content) }
@@ -31,6 +33,7 @@ const DocsContent = ({ title, content }) => (
 DocsContent.propTypes = {
   title: React.PropTypes.string,
   content: React.PropTypes.string.isRequired,
+  editUrl: React.PropTypes.string,
 };
 
 export default DocsContent;
diff --git a/src/components/Docs/Content/style.css b/src/components/Docs/Content/style.css
index bba321085e7..7053dec1a5f 100644
--- a/src/components/Docs/Content/style.css
+++ b/src/components/Docs/Content/style.css
@@ -10,11 +10,18 @@
 #docs-content .title {
   font-size: 25px;
   color: rgb(0, 0, 0);
-  margin-bottom: 30px;
+  margin-bottom: 0;
   line-height: 28px;
   font-weight: 800;
 }
 
+#docs-content a.edit-link {
+  color: #E25E5E !important;
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
 #docs-content .markdown div,
 #docs-content .markdown p,
 #docs-content .markdown li,