From cb565b3c030dbd5e157f43718ea15715f73b9fdf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ma=C3=ABl=20Nison?= <mael@fb.com>
Date: Mon, 11 Mar 2019 17:52:40 +0000
Subject: [PATCH 1/4] Adds support for partiallyActive=true to Link

---
 packages/gatsby-link/package.json                    |  2 +-
 .../src/__tests__/__snapshots__/index.js.snap        | 12 ++++++++++++
 packages/gatsby-link/src/__tests__/index.js          |  7 +++++++
 packages/gatsby-link/src/index.js                    |  6 ++++--
 4 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/packages/gatsby-link/package.json b/packages/gatsby-link/package.json
index 006abb10ae1db..1534770147538 100644
--- a/packages/gatsby-link/package.json
+++ b/packages/gatsby-link/package.json
@@ -8,7 +8,6 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
-    "@reach/router": "^1.1.1",
     "@types/reach__router": "^1.0.0",
     "prop-types": "^15.6.1"
   },
@@ -26,6 +25,7 @@
   "license": "MIT",
   "main": "index.js",
   "peerDependencies": {
+    "@reach/router": "^1.1.1",
     "gatsby": "^2.0.0",
     "react": "^16.4.2",
     "react-dom": "^16.4.2"
diff --git a/packages/gatsby-link/src/__tests__/__snapshots__/index.js.snap b/packages/gatsby-link/src/__tests__/__snapshots__/index.js.snap
index 1ca29b31090d6..8ac8c603da7da 100644
--- a/packages/gatsby-link/src/__tests__/__snapshots__/index.js.snap
+++ b/packages/gatsby-link/src/__tests__/__snapshots__/index.js.snap
@@ -24,3 +24,15 @@ exports[`<Link /> matches basic snapshot 1`] = `
   </a>
 </div>
 `;
+
+exports[`<Link /> matches partially active snapshot 1`] = `
+<div>
+  <a
+    class="link"
+    href="/active/nested"
+    style="color: black;"
+  >
+    link
+  </a>
+</div>
+`;
diff --git a/packages/gatsby-link/src/__tests__/index.js b/packages/gatsby-link/src/__tests__/index.js
index bacf2294cda87..1de977b8aede8 100644
--- a/packages/gatsby-link/src/__tests__/index.js
+++ b/packages/gatsby-link/src/__tests__/index.js
@@ -74,6 +74,13 @@ describe(`<Link />`, () => {
     expect(container).toMatchSnapshot()
   })
 
+  it(`matches partially active snapshot`, () => {
+    const { container } = setup({
+      linkProps: { to: `/active/nested`, partiallyActive: true },
+    })
+    expect(container).toMatchSnapshot()
+  })
+
   it(`does not fail to initialize without --prefix-paths`, () => {
     expect(() => {
       getInstance({})
diff --git a/packages/gatsby-link/src/index.js b/packages/gatsby-link/src/index.js
index 394fb75934681..b22e11370d4c5 100644
--- a/packages/gatsby-link/src/index.js
+++ b/packages/gatsby-link/src/index.js
@@ -18,6 +18,7 @@ function normalizePath(path) {
 const NavLinkPropTypes = {
   activeClassName: PropTypes.string,
   activeStyle: PropTypes.object,
+  partiallyActive: PropTypes.bool,
 }
 
 // Set up IntersectionObserver
@@ -83,8 +84,8 @@ class GatsbyLink extends React.Component {
     }
   }
 
-  defaultGetProps = ({ isCurrent }) => {
-    if (isCurrent) {
+  defaultGetProps = ({ isPartiallyCurrent, isCurrent, ...x }) => {
+    if (this.props.partiallyActive ? isPartiallyCurrent : isCurrent) {
       return {
         className: [this.props.className, this.props.activeClassName]
           .filter(Boolean)
@@ -105,6 +106,7 @@ class GatsbyLink extends React.Component {
       activeClassName: $activeClassName,
       activeStyle: $activeStyle,
       innerRef: $innerRef,
+      partiallyActive,
       state,
       replace,
       /* eslint-enable no-unused-vars */

From 15b5a218380af11e85be507d8512bacca9538aa3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ma=C3=ABl=20Nison?= <nison.mael@gmail.com>
Date: Mon, 11 Mar 2019 18:42:43 +0000
Subject: [PATCH 2/4] Update index.js

---
 packages/gatsby-link/src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gatsby-link/src/index.js b/packages/gatsby-link/src/index.js
index b22e11370d4c5..7b1e94d014d33 100644
--- a/packages/gatsby-link/src/index.js
+++ b/packages/gatsby-link/src/index.js
@@ -84,7 +84,7 @@ class GatsbyLink extends React.Component {
     }
   }
 
-  defaultGetProps = ({ isPartiallyCurrent, isCurrent, ...x }) => {
+  defaultGetProps = ({ isPartiallyCurrent, isCurrent }) => {
     if (this.props.partiallyActive ? isPartiallyCurrent : isCurrent) {
       return {
         className: [this.props.className, this.props.activeClassName]

From 2b1847d0af6a909f352f96230ccc9b4917f0bcca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ma=C3=ABl=20Nison?= <mael@fb.com>
Date: Tue, 12 Mar 2019 13:38:05 +0000
Subject: [PATCH 3/4] Updates the documentation

---
 docs/docs/gatsby-link.md | 25 ++++++++++++-------------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/docs/docs/gatsby-link.md b/docs/docs/gatsby-link.md
index 769db48cc629d..0bdb5a8c89d37 100644
--- a/docs/docs/gatsby-link.md
+++ b/docs/docs/gatsby-link.md
@@ -80,28 +80,27 @@ const SiteNavigation = () => (
 
 ### Show active styles for partially matched and parent links
 
-<iframe title="Screencast on egghead of how to style partially matched links in Gatsby." class="egghead-video" width=600 height=348 src="https://egghead.io/lessons/egghead-customize-styles-for-partially-matched-urls-with-gatsby-s-link-component/embed" />
-
-Video hosted on [egghead.io][egghead].
-
-The `activeStyle` or `activeClassName` prop are only set on a `<Link>` component if the current URL matches its `to` prop _exactly_. Sometimes, we may want to style a `<Link>` as active even if it partially matches the current URL. For example:
+By default the `activeStyle` and `activeClassName` props will only be set on a `<Link>` component if the current URL matches its `to` prop _exactly_. Sometimes, we may want to style a `<Link>` as active even if it partially matches the current URL. For example:
 
 - We may want `/blog/hello-world` to match `<Link to="/blog">`
 - Or `/gatsby-link/#passing-state-through-link-and-navigate` to match `<Link to="/gatsby-link">`
 
-In instances like these, we can use [@reach/router's](https://reach.tech/router/api/Link) `getProps` API to set active styles as follows:
+In instances like these, just add the `partiallyActive` prop to your `<Link>` component and the style will also be applied even if the `to` prop only is a partial match:
 
 ```jsx
 import React from "react"
 import { Link } from "gatsby"
 
-const partiallyActive = className => ({ isPartiallyCurrent }) => ({
-  className: className + (isPartiallyCurrent ? ` active` : ``),
-})
-
-const PartiallyActiveLink = ({ className, ...rest }) => (
-  <Link getProps={partiallyActive(className)} {...rest} />
-)
+const Header = <>
+  <Link
+    to="/articles/"
+    activeStyle={{ color: "red" }}
+    {/* highlight-next-line */}
+    partiallyActive={true}
+  >
+    Articles
+  </Link>
+</>;
 ```
 
 ### Pass state as props to the linked page

From a99d93e995c3d471bbd9967f7b24f40f263deeaf Mon Sep 17 00:00:00 2001
From: Dustin Schau <dustinschau@gmail.com>
Date: Tue, 12 Mar 2019 15:17:11 -0500
Subject: [PATCH 4/4] chore: add typescript declaration(s)

---
 packages/gatsby-link/index.d.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/gatsby-link/index.d.ts b/packages/gatsby-link/index.d.ts
index 43a51922da898..321a4af7f503c 100644
--- a/packages/gatsby-link/index.d.ts
+++ b/packages/gatsby-link/index.d.ts
@@ -6,6 +6,8 @@ export interface GatsbyLinkProps<TState> extends LinkProps<TState> {
   activeStyle?: object
   innerRef?: Function
   onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void
+  partiallyActive?: boolean
+  replace?: boolean
   to: string
 }