Add divider in summary

3 files changed, 14 insertions, 4 deletions

diff --git a/packages/gitbook-plugin-theme-default/less/Summary.less b/packages/gitbook-plugin-theme-default/less/Summary.less
index 1e1e8ba..f6ae66e 100644
--- a/packages/gitbook-plugin-theme-default/less/Summary.less
+++ b/packages/gitbook-plugin-theme-default/less/Summary.less
@@ -15,6 +15,12 @@
     font-weight: inherit;
 }
 
+.SummaryPart-Divider {
+    outline: none;
+    border: none;
+    border-bottom: 1px solid @summary-divider-color;
+}
+
 .SummaryArticles {
     list-style: none;
     margin: 0px;
diff --git a/packages/gitbook-plugin-theme-default/less/variables.less b/packages/gitbook-plugin-theme-default/less/variables.less
index 5c6842d..d1657f3 100644
--- a/packages/gitbook-plugin-theme-default/less/variables.less
+++ b/packages/gitbook-plugin-theme-default/less/variables.less
@@ -16,6 +16,7 @@
 @sidebar-width:                     300px;
 // Summary
 @summary-header-color:              #939da3;
+@summary-divider-color:             #e8e8e8;
 @summary-article-padding-v:         10px;
 @summary-article-padding-h:         15px;
 @summary-article-color:             hsl(207, 15%, 25%);
diff --git a/packages/gitbook-plugin-theme-default/src/components/Summary.js b/packages/gitbook-plugin-theme-default/src/components/Summary.js
index ef6ab3f..9109fdc 100644
--- a/packages/gitbook-plugin-theme-default/src/components/Summary.js
+++ b/packages/gitbook-plugin-theme-default/src/components/Summary.js
@@ -51,14 +51,17 @@ const SummaryArticles = React.createClass({
 
 const SummaryPart = React.createClass({
     propTypes: {
-        part: GitBook.PropTypes.SummaryPart
+        part:  GitBook.PropTypes.SummaryPart,
+        first: React.PropTypes.bool
     },
 
     render() {
-        const { part } = this.props;
+        const { part, first } = this.props;
         const { title, articles } = part;
 
-        const titleEL = title ? <h2 className="SummaryPart-Title">{title}</h2> : null;
+        const titleEL = title ? (
+            <h2 className="SummaryPart-Title">{title}</h2>
+        ) : (first ? null : <hr className="SummaryPart-Divider" />);
 
         return (
             <GitBook.InjectedComponent matching={{ role: 'summary:part' }} props={this.props}>
@@ -82,7 +85,7 @@ const SummaryParts = React.createClass({
         return (
             <GitBook.InjectedComponent matching={{ role: 'summary:parts' }} props={this.props}>
                 <div className="SummaryParts">
-                    {parts.map((part, i) => <SummaryPart key={i} part={part} />)}
+                    {parts.map((part, i) => <SummaryPart key={i} part={part} first={i == 0} />)}
                 </div>
             </GitBook.InjectedComponent>
         );