primaryColor and bottom on react-docs

casesandberg · Aug 15, 2015 · e47df0c · e47df0c
1 parent 863355b
commit e47df0c
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 9 deletions.
diff --git a/docs/components/home/Home.jsx b/docs/components/home/Home.jsx
@@ -8,6 +8,16 @@ var HomeDocumentation = require('./HomeDocumentation');
 
 module.exports = class Home extends ReactCSS.Component {
 
+  constructor() {
+    super();
+
+    this.state = {
+      primaryColor: '#194D33',
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+  }
+
   classes() {
     return {
       'default': {
@@ -18,6 +28,10 @@ module.exports = class Home extends ReactCSS.Component {
     };
   }
 
+  handleChange(hex) {
+    this.setState({ primaryColor: '#' + hex });
+  }
+
   render() {
     return (
       <div is="home">
@@ -28,8 +42,8 @@ module.exports = class Home extends ReactCSS.Component {
           }
         `}</style>
 
-        <HomeFeature />
-        <HomeDocumentation />
+        <HomeFeature onChange={ this.handleChange } />
+        <HomeDocumentation primaryColor={ this.state.primaryColor } />
       </div>
     );
   }

diff --git a/docs/components/home/HomeDocumentation.jsx b/docs/components/home/HomeDocumentation.jsx
@@ -23,10 +23,11 @@ class HomeDocumentation extends ReactCSS.Component {
   }
 
   render() {
+    var bottom = <iframe src="https://ghbtns.com/github-btn.html?user=casesandberg&repo=reactcss&type=star&count=true&size=large" scrolling="0" width="160px" height="30px" frameBorder="0"></iframe>;
     return (
       <div is="body">
         <Container width={ 780 }>
-          <Docs markdown={ documentation } />
+          <Docs markdown={ documentation } primaryColor={ this.props.primaryColor } bottom={ bottom } />
         </Container>
       </div>
     );

diff --git a/docs/components/home/HomeFeature.jsx b/docs/components/home/HomeFeature.jsx
@@ -120,6 +120,8 @@ class HomeFeature extends ReactCSS.Component {
     if (data.hsl !== this.state) {
       this.setState(data.hsl);
     }
+
+    this.props.onChange && this.props.onChange(data.hex);
   }
 
   componentDidMount() {

diff --git a/modules/react-docs/components/Docs.jsx b/modules/react-docs/components/Docs.jsx
@@ -101,7 +101,8 @@ class Docs extends ReactCSS.Component {
             <MarkdownTitle
               isHeadline={ markdown.isSubSection(fileName) ? true : false }
               title={ args.title }
-              link={ args.id } />
+              link={ args.id }
+              primaryColor={ this.props.primaryColor }/>
 
             <Markdown>{ body }</Markdown>
           </div>
@@ -112,7 +113,7 @@ class Docs extends ReactCSS.Component {
     return (
       <Grid>
         <div is="sidebar" ref="sidebar">
-          <Sidebar files={ this.props.markdown } active={ this.state.visible } fixed={ this.state.sidebarFixed } />
+          <Sidebar files={ this.props.markdown } active={ this.state.visible } primaryColor={ this.props.primaryColor } bottom={ this.props.bottom } fixed={ this.state.sidebarFixed } />
         </div>
         <div ref="files" is="files">
           { markdownFiles }
@@ -122,4 +123,8 @@ class Docs extends ReactCSS.Component {
   }
 }
 
+Docs.defaultProps = {
+  primaryColor: '#03A9F4',
+};
+
 module.exports = Docs;
diff --git a/modules/react-docs/components/MarkdownTitle.jsx b/modules/react-docs/components/MarkdownTitle.jsx
@@ -20,7 +20,7 @@ module.exports = class MarkdownTitle extends ReactCSS.Component {
         link: {
           opacity: '0',
           textDecoration: 'none',
-          fill: '#2A5881',
+          fill: this.props.primaryColor,
           transition: 'opacity 200ms linear',
         },
       },

diff --git a/modules/react-docs/components/Sidebar.jsx b/modules/react-docs/components/Sidebar.jsx
@@ -59,7 +59,8 @@ module.exports = class Sidebar extends ReactCSS.Component {
             href={ '#' + args.id }
             active={ this.props.active === args.id }
             bold={ sectionNumber && true }
-            label={ args.title } />
+            label={ args.title }
+            primaryColor={ this.props.primaryColor } />
         );
       }
     }
@@ -68,7 +69,7 @@ module.exports = class Sidebar extends ReactCSS.Component {
       <div is="sidebar">
 
         <div is="star">
-          <iframe src="https://ghbtns.com/github-btn.html?user=casesandberg&repo=react-context&type=star&count=true&size=large" scrolling="0" width="160px" height="30px" frameBorder="0"></iframe>
+          { this.props.bottom }
         </div>
 
         { sidebarItems }

diff --git a/modules/react-docs/components/SidebarItem.jsx b/modules/react-docs/components/SidebarItem.jsx
@@ -36,7 +36,7 @@ module.exports = class SidebarItem extends ReactCSS.Component {
       },
       'active': {
         sidebarItem: {
-          color: 'rgba(255,255,255,.87)',
+          color: this.props.primaryColor,
         },
       },
     };