asAnchor rethink

[penx]

The asAnchor HOC allows a parent application to style another component as an anchor.

This is so that the parent application can use react router and can pass in ReactRouter.Link to be styled, without introducing react-router as a dependency of govuk-react.

In turn this keeps govuk-react router agnostic, so that it could be used with reach-router etc.

This pattern is not scalable. We don't want to export loads of HOCs from the route of govuk-react, and if we did would have to come up with a unique name for each.

We also have an issue of how we deal with NavLink and it's active class that is not passed as a prop, how to pick this up with govuk-react while still being router agnostic.

This ticket is to track

(1) formalising a standard
(2) including the standard in the readme
(3) implementing it across govuk-react

[penx]

Proposal for supporting link type

For any link-like component, that we want the peer project to be able to configure to use a React Router Link or NavLink, we provide an 'as' prop. This is baked in to styled-components but not emotion, so we will need to do this manually where needed for now.

Anchor on its own would default to using a 'a' tag (or possibly a button in some circumstances?)

export const MyAnchor = styled(({
  as: T = 'a',
  ...props
}) => <T {...props}/>)({
  textDecoration: 'blink',
  // etc
})

This would allow a developer to:

import MyAnchor from './my-anchor'
import { Link } from 'react-router'

const MyComponent = () => {
<MyAnchor /> //renders <a />
<MyAnchor as={Link} /> //renders a Link
}

How to handle NavLink

1. custom React Router compatible component

Create a custom component based on NavLink for a peer application to use that passes down a true/false prop, whose name defaults to active but can be configured. Perhaps using render props.

https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/NavLink.js

or

2. use withProps

This example is for styled-components

const activeClassName = 'active';

const StyledNavLink = styled(NavLink).attrs({
  activeClassName: activeClassName,
})`
  &.${activeClassName} {
    color: blue;
  }
`

https://spectrum.chat/thread/8f753cea-75c3-4524-8207-fd0216026665

Equivalent in emotion should be possible with withProps

https://github.com/emotion-js/emotion/blob/master/docs/with-props.md

However we should support the peer application being able to supply either an active class name and an active prop.

[penx]

Proposed implementation:

https://codesandbox.io/s/wkvno5v9m5

[penx]

Proposed library for peer applications to use for compatibility with React Router NavLink:
https://github.com/penx/as-nav-link

[penx]

This is in place but needs to be done where we're currently using asAnchor

[stevesims]

asAnchor has now been deprecated, and replaced with the Link component.

Support for NavLink type components however is not yet properly supported.

[penx]

asAnchor was removed in #814

[penx]

Reopening to review navlink with respect to

remix-run/react-router#6390 (comment)