feat(components): add component context and Link component

[connor-baer]

Closes #466.

Purpose

Some of the low-level functional components in Circuit UI need to be customizable. This is useful e.g. when your application is using a custom router and needs to use a special Link component.

Approach and changes

• Add a ComponentsContext with a withComponents HOC and useComponents hook
• Add a default Link component
• Use the Link component in the Button and Sidebar components
• Add documentation how to override the base components

Definition of done

• Development completed
• Reviewers assigned
• Unit and integration tests
• Meets minimum browser support
• Meets accessibility requirements

[codecov]

Codecov Report

Merging #490 into canary will increase coverage by 0.04%.
The diff coverage is 90%.

@@            Coverage Diff             @@
##           canary     #490      +/-   ##
==========================================
+ Coverage   76.15%   76.19%   +0.04%     
==========================================
  Files         167      171       +4     
  Lines        2453     2466      +13     
  Branches      435      436       +1     
==========================================
+ Hits         1868     1879      +11     
- Misses        467      468       +1     
- Partials      118      119       +1

Impacted Files	Coverage Δ
...nents/Button/components/PlainButton/PlainButton.js	100% <100%> (ø)	⬆️
...s/Button/components/RegularButton/RegularButton.js	100% <100%> (ø)	⬆️
.../components/ComponentsContext/ComponentsContext.js	100% <100%> (ø)
src/components/ComponentsContext/withComponents.js	100% <100%> (ø)
...c/components/Sidebar/components/NavItem/NavItem.js	100% <100%> (ø)	⬆️
src/util/shared-prop-types.js	88.88% <100%> (+0.42%)	⬆️
...mponents/ComponentsContext/components/Link/Link.js	100% <100%> (ø)
src/components/ComponentsContext/useComponents.js	33.33% <33.33%> (ø)
... and 2 more

[robinmetral]

👏 🚀 🌐

[marielakas]

Nice! 🌞

[ilyanoskov]

🎉 This PR is included in version 1.2.2-canary.5 🎉

The release is available on:

• npm package (@canary dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[ilyanoskov]

🎉 This PR is included in version 1.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[fernandofleury]

@connor-baer I think I'm missing the point (maybe long term vision) but why would the consumer use the Component context instead of importing import { Link } from 'reach-router' or Import { Link } from '@sumup/circuit-ui'

Also I might be missing the long term vision here too, but do we really want to start providing components that translate directly to a primitive? EG: Just a plain <a>.

Why would the consumer use this as Link instead of using a regular <a>?

[connor-baer]

You make a good point here. Using the component context/primitive components from Circuit UI might not make sense for the consumer since as you rightfully pointed out, they can simply import the component directly. I didn't think about that.

However, that's only a secondary use case. The important feature here is that you can override the primitive components that Circuit UI itself uses under the hood.

Maybe it was a mistake to expose the useComponents hook and withComponents. Do you think we should remove them in v2?

[fernandofleury]

I'm not really sure. But at first glance looks like a really complex engine to solve a single use case we have (The SideNav). Very rarely we expect the primitives to be replaced when used with the molecules we provide.

I think what would really help us here is also have a look at the component roadmap to figure out the complexity of coming updates for our components. For instance, this use case could've been initially solved by adding a linkComponent prop to the SideNav (defaulting to our Link of course)

The code is fine and well structured of course. I'm just concerned long term the Component context will just be used for the SideNav and nothing else, you know?

[connor-baer]

It's already being used for the Button component as well. Previously on the partner portal, the Button component was wrapped in a Link component which produced invalid and inaccessible markup:

<Link to={ROUTE.HOME}>
  <Button>Home</Button>
</Link>

// produced:

<a href="/">
  <button>Home</button>
</a>

I was able to fix it with as="span" on the Button component, but it's an extra step that's easy to miss. The website had a similar issue.

I can definitely see this being used for other components as well, e.g. a Head or Image component. It found it very helpful in my own component library, Bamboo UI. The idea of a component context was inspired by MDX.

[fernandofleury]

Ok. I think the best way to test this out is simply using it and see how it feels. Let's give it a try!