From fc2edc7323b12f8bb5a2f53b9fd13ef93e260be5 Mon Sep 17 00:00:00 2001
From: Jon Rohan <rohan@github.com>
Date: Tue, 25 Sep 2018 14:06:05 -0700
Subject: [PATCH 1/9] Adding active style to side nav links

Co-authored-by: emplums <emplums@github.com>
---
 pages/doc-components/SideNav.js | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/pages/doc-components/SideNav.js b/pages/doc-components/SideNav.js
index 96c28d6cfc2..84c222c7ae7 100644
--- a/pages/doc-components/SideNav.js
+++ b/pages/doc-components/SideNav.js
@@ -1,9 +1,25 @@
 import React from 'react'
+import {withRouter} from 'next/router'
 import {default as NextLink} from 'next/link'
 import {Text, Box, Link, FlexContainer, Relative} from '../../src'
 import * as docs from '../components/docs'
 
-const SideNav = () => (
+const getLink = router => {
+  return Object.values(docs).map(({displayName: name}) => {
+    const isSelected = router.pathname === `/components/docs/${name}`
+    return (
+      <Box mb={3} key={name}>
+        <NextLink href={`/components/docs/${name}`}>
+          <Link nounderline href={`/components/docs/${name}`} color={isSelected ? 'gray.9' : null} fontSize={5} fontWeight={isSelected ? 'bold' : null}>
+            {name}
+          </Link>
+        </NextLink>
+      </Box>
+    )
+  })
+}
+
+const SideNav = ({router}) => (
   <Relative>
     <Box width={256} height="100%" bg="gray.0" display="inline-block" borderRight={1} borderColor="gray.2">
       <FlexContainer flexDirection="column" alignItems="start" p={5} borderBottom={1} borderColor="gray.2">
@@ -26,18 +42,10 @@ const SideNav = () => (
             </Link>
           </NextLink>
         </Text>
-        {Object.values(docs).map(({displayName: name}) => (
-          <Box mb={3} key={name}>
-            <NextLink href={`/components/docs/${name}`}>
-              <Link nounderline href={`/components/docs/${name}`} className="f5">
-                {name}
-              </Link>
-            </NextLink>
-          </Box>
-        ))}
+        {getLink(router)}
       </Box>
     </Box>
   </Relative>
 )
 
-export default SideNav
+export default withRouter(SideNav)

From 12ec3c2da0d7599d7739d2fa9ffd42b2dcfd15ec Mon Sep 17 00:00:00 2001
From: Jon Rohan <rohan@github.com>
Date: Tue, 25 Sep 2018 14:31:44 -0700
Subject: [PATCH 2/9] Updating headings to turn bold

---
 pages/doc-components/SideNav.js | 38 +++++++++++++++++++++++++++++----
 1 file changed, 34 insertions(+), 4 deletions(-)

diff --git a/pages/doc-components/SideNav.js b/pages/doc-components/SideNav.js
index 84c222c7ae7..058035bac07 100644
--- a/pages/doc-components/SideNav.js
+++ b/pages/doc-components/SideNav.js
@@ -10,7 +10,13 @@ const getLink = router => {
     return (
       <Box mb={3} key={name}>
         <NextLink href={`/components/docs/${name}`}>
-          <Link nounderline href={`/components/docs/${name}`} color={isSelected ? 'gray.9' : null} fontSize={5} fontWeight={isSelected ? 'bold' : null}>
+          <Link
+            nounderline
+            href={`/components/docs/${name}`}
+            color={isSelected ? 'gray.9' : null}
+            fontSize={5}
+            fontWeight={isSelected ? 'bold' : null}
+          >
             {name}
           </Link>
         </NextLink>
@@ -19,17 +25,36 @@ const getLink = router => {
   })
 }
 
+const isComponentLink = componentName => {
+  return Object.values(docs)
+    .map(n => n.displayName)
+    .includes(componentName)
+}
+
 const SideNav = ({router}) => (
   <Relative>
     <Box width={256} height="100%" bg="gray.0" display="inline-block" borderRight={1} borderColor="gray.2">
       <FlexContainer flexDirection="column" alignItems="start" p={5} borderBottom={1} borderColor="gray.2">
         <NextLink href="/components/docs/system-props">
-          <Link nounderline scheme="gray-dark" href="/components/docs/system-props" m={0} mb={4}>
+          <Link
+            nounderline
+            scheme="gray-dark"
+            href="/components/docs/system-props"
+            m={0}
+            mb={4}
+            fontWeight={router.pathname === '/components/docs/system-props' ? 'bold' : null}
+          >
             System Props
           </Link>
         </NextLink>
         <NextLink href="/components/docs/primer-theme">
-          <Link nounderline scheme="gray-dark" href="/components/docs/primer-theme" m={0}>
+          <Link
+            nounderline
+            scheme="gray-dark"
+            href="/components/docs/primer-theme"
+            m={0}
+            fontWeight={router.pathname === '/components/docs/primer-theme' ? 'bold' : null}
+          >
             Primer Theme
           </Link>
         </NextLink>
@@ -37,7 +62,12 @@ const SideNav = ({router}) => (
       <Box pt={5} pl={5}>
         <Text is="p" color="black" m={0} mb={3}>
           <NextLink href="/components/docs/Avatar">
-            <Link nounderline scheme="gray-dark" href="/components/docs/Avatar">
+            <Link
+              nounderline
+              scheme="gray-dark"
+              href="/components/docs/Avatar"
+              fontWeight={isComponentLink(router.pathname.replace('/components/docs/', '')) ? 'bold' : null}
+            >
               Components
             </Link>
           </NextLink>

From 37236f29bfdc6cc220515381fb892826f4ffcbd9 Mon Sep 17 00:00:00 2001
From: Jon Rohan <rohan@github.com>
Date: Tue, 25 Sep 2018 14:41:39 -0700
Subject: [PATCH 3/9] The fontSize is reversed

---
 pages/doc-components/SideNav.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/doc-components/SideNav.js b/pages/doc-components/SideNav.js
index 058035bac07..1d163ec33d2 100644
--- a/pages/doc-components/SideNav.js
+++ b/pages/doc-components/SideNav.js
@@ -14,7 +14,7 @@ const getLink = router => {
             nounderline
             href={`/components/docs/${name}`}
             color={isSelected ? 'gray.9' : null}
-            fontSize={5}
+            fontSize={1}
             fontWeight={isSelected ? 'bold' : null}
           >
             {name}

From 59bff9cc21a24ed924191c0420d79ddda2421ecb Mon Sep 17 00:00:00 2001
From: Jon Rohan <rohan@github.com>
Date: Tue, 25 Sep 2018 14:42:47 -0700
Subject: [PATCH 4/9] Using typography props on Link component

Co-authored-by: emplums <emplums@github.com>
---
 src/Link.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Link.js b/src/Link.js
index 68436a1d1b6..0c52cd882e4 100644
--- a/src/Link.js
+++ b/src/Link.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'react-emotion'
 import {themeGet} from 'styled-system'
-import {withSystemProps, COMMON} from './system-props'
+import {withSystemProps, TYPOGRAPHY} from './system-props'
 import {colors} from './theme'
 
 const styledLink = styled(Link)`
@@ -45,4 +45,4 @@ Link.propTypes = {
   scheme: PropTypes.oneOf(['gray', 'gray-dark'])
 }
 
-export default withSystemProps(styledLink, COMMON)
+export default withSystemProps(styledLink, TYPOGRAPHY)

From df26115307d800d99d64a6e12e7e894c7be256e8 Mon Sep 17 00:00:00 2001
From: Jon Rohan <rohan@github.com>
Date: Tue, 25 Sep 2018 14:48:32 -0700
Subject: [PATCH 5/9] Not bold, just gray

---
 pages/doc-components/SideNav.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/pages/doc-components/SideNav.js b/pages/doc-components/SideNav.js
index 1d163ec33d2..3b6450d67b4 100644
--- a/pages/doc-components/SideNav.js
+++ b/pages/doc-components/SideNav.js
@@ -15,7 +15,6 @@ const getLink = router => {
             href={`/components/docs/${name}`}
             color={isSelected ? 'gray.9' : null}
             fontSize={1}
-            fontWeight={isSelected ? 'bold' : null}
           >
             {name}
           </Link>

From af747cc9f6f4d06e9e8686451f3bab1e307f41e2 Mon Sep 17 00:00:00 2001
From: Jon Rohan <rohan@github.com>
Date: Tue, 25 Sep 2018 15:05:22 -0700
Subject: [PATCH 6/9] Prettier format

---
 pages/doc-components/SideNav.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/pages/doc-components/SideNav.js b/pages/doc-components/SideNav.js
index 3b6450d67b4..0f2b674cec0 100644
--- a/pages/doc-components/SideNav.js
+++ b/pages/doc-components/SideNav.js
@@ -10,12 +10,7 @@ const getLink = router => {
     return (
       <Box mb={3} key={name}>
         <NextLink href={`/components/docs/${name}`}>
-          <Link
-            nounderline
-            href={`/components/docs/${name}`}
-            color={isSelected ? 'gray.9' : null}
-            fontSize={1}
-          >
+          <Link nounderline href={`/components/docs/${name}`} color={isSelected ? 'gray.9' : null} fontSize={1}>
             {name}
           </Link>
         </NextLink>

From 5e7133ea26f0129fdea9792a90faaef3760dacde Mon Sep 17 00:00:00 2001
From: Jon Rohan <rohan@github.com>
Date: Wed, 26 Sep 2018 15:23:54 -0700
Subject: [PATCH 7/9] Adding bold to docs sandbox links

---
 pages/doc-components/Header.js | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/pages/doc-components/Header.js b/pages/doc-components/Header.js
index 5b911d7b603..5cf4276a3cb 100644
--- a/pages/doc-components/Header.js
+++ b/pages/doc-components/Header.js
@@ -1,10 +1,11 @@
 import React from 'react'
+import {withRouter} from 'next/router'
 import Octicon, {MarkGithub} from '@githubprimer/octicons-react'
 import NextLink from 'next/link'
 import BoxShadow from './BoxShadow'
 import {Text, FlexContainer, Link, Sticky} from '../../src'
 
-const Header = () => (
+const Header = ({router}) => (
   <Sticky zIndex={100}>
     <BoxShadow py={3} bg="gray.9" color="white">
       <FlexContainer className="p-responsive" alignItems="center" justifyContent="space-between">
@@ -18,12 +19,25 @@ const Header = () => (
         </NextLink>
         <div>
           <NextLink href="/components">
-            <Link nounderline className="text-white" href="/components" px={4}>
+            <Link
+              nounderline
+              className="text-white"
+              href="/components"
+              px={4}
+              fontWeigt={router.pathname === '/components' ? 'bold' : null}
+            >
               Docs
             </Link>
           </NextLink>
           <NextLink href="/components/sandbox">
-            <Link nounderline className="text-white" href="/components/sandbox" mr={0} px={4}>
+            <Link
+              nounderline
+              className="text-white"
+              href="/components/sandbox"
+              mr={0}
+              px={4}
+              fontWeigt={router.pathname === '/components/sandbox' ? 'bold' : null}
+            >
               Sandbox
             </Link>
           </NextLink>
@@ -33,4 +47,4 @@ const Header = () => (
   </Sticky>
 )
 
-export default Header
+export default withRouter(Header)

From 3a6d6e74ae3f7be77ec09b6f02045c76482e2798 Mon Sep 17 00:00:00 2001
From: Jon Rohan <rohan@github.com>
Date: Wed, 26 Sep 2018 15:34:31 -0700
Subject: [PATCH 8/9] Update Header.js

---
 pages/doc-components/Header.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/doc-components/Header.js b/pages/doc-components/Header.js
index 87c7e651eed..7136b2760c9 100644
--- a/pages/doc-components/Header.js
+++ b/pages/doc-components/Header.js
@@ -23,7 +23,7 @@ const Header = ({router}) => (
               color="white"
               href="/components"
               px={4}
-              fontWeigt={router.pathname === '/components' ? 'bold' : null}
+              fontWeight={router.pathname === '/components' ? 'bold' : null}
             >
               Docs
             </Link>
@@ -34,7 +34,7 @@ const Header = ({router}) => (
               href="/components/sandbox"
               mr={0}
               px={4}
-              fontWeigt={router.pathname === '/components/sandbox' ? 'bold' : null}
+              fontWeight={router.pathname === '/components/sandbox' ? 'bold' : null}
             >
               Sandbox
             </Link>

From 9aa313a25aa9b24ba076956403d21c8c74f6ce57 Mon Sep 17 00:00:00 2001
From: Jon Rohan <rohan@github.com>
Date: Wed, 26 Sep 2018 15:38:20 -0700
Subject: [PATCH 9/9] Prettier

---
 pages/doc-components/Header.js  | 2 +-
 pages/doc-components/SideNav.js | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/pages/doc-components/Header.js b/pages/doc-components/Header.js
index 7136b2760c9..5f1b88fbd6b 100644
--- a/pages/doc-components/Header.js
+++ b/pages/doc-components/Header.js
@@ -30,7 +30,7 @@ const Header = ({router}) => (
           </NextLink>
           <NextLink href="/components/sandbox">
             <Link
-              color="white" 
+              color="white"
               href="/components/sandbox"
               mr={0}
               px={4}
diff --git a/pages/doc-components/SideNav.js b/pages/doc-components/SideNav.js
index 4117e51de72..9dcb84ec0ec 100644
--- a/pages/doc-components/SideNav.js
+++ b/pages/doc-components/SideNav.js
@@ -30,7 +30,6 @@ const SideNav = ({router}) => (
     <Box width={256} height="100%" bg="gray.0" display="inline-block" borderRight={1} borderColor="gray.2">
       <FlexContainer flexDirection="column" alignItems="start" p={5} borderBottom={1} borderColor="gray.2">
         <NextLink href="/components/docs/system-props">
-
           <Link
             color="gray.9"
             href="/components/docs/system-props"