[added] links to every component / example on Components page

kyletsang · Jul 8, 2015 · a4c065e · a4c065e
1 parent 00fd4d6
commit a4c065e
Show file tree

Hide file tree

Showing 3 changed files with 232 additions and 194 deletions.
diff --git a/docs/assets/style.css b/docs/assets/style.css
@@ -172,3 +172,25 @@ body {
   margin: 5px 10px;
 
 }
+
+.anchor,
+.anchor:hover,
+.anchor:active,
+.anchor:focus {
+  color: black;
+  text-decoration: none;
+  position: relative;
+}
+.anchor-icon {
+  font-size: 90%;
+  padding-top: 0.1em;
+  position: absolute;
+  left: -0.8em;
+  opacity: 0;
+}
+h1:hover .anchor-icon,
+h2:hover .anchor-icon,
+h3:hover .anchor-icon,
+h4:hover .anchor-icon {
+  opacity: 0.5;
+}
diff --git a/docs/src/Anchor.js b/docs/src/Anchor.js
@@ -0,0 +1,17 @@
+import React from 'react';
+
+const Anchor = React.createClass({
+  propTypes: {
+    id: React.PropTypes.string
+  },
+  render() {
+    return (
+      <a id={this.props.id} href={'#' + this.props.id} className='anchor'>
+        <span className='anchor-icon'>#</span>
+        {this.props.children}
+      </a>
+    );
+  }
+});
+
+export default Anchor;