Adds Chromatic regression tests

[zol]

Purpose

Hi,

I’m one of the founders at Chromatic, a visual regression testing tool. We’ve been using Buffer Components as a test case for Chromatic itself (we really like your design aesthetic too).

As a token of our appreciation, I’d like to offer the Buffer Components team Chromatic for free. We’ll also give you hands on support to make sure you have a smooth ride and can get the most out of the tool without taking up much of your time. I've made a small PR that adds visual regression tests.

Chromatic will quickly and easily let you review any visual changes introduced by new code -- it’s especially handy for open source projects where it can be time consuming to evaluate PRs being opened out of the blue by unknown authors.

I’ve already run Chromatic on the project to establish a baseline for future tests (you can view the results here). You can run additional tests anytime by calling npm chromatic. You could try running npm chromatic in this branch after changing a component to see an example of the review flow.

Chromatic really shines when you run the above command from within your CI system as it will then tag PRs with the result of the regression tests, like in the image below.

Let me know if you have any questions, once this PR is merged I can help get chromatic running in your CI builds too if you'd like.

Things to Note

Review

Some aspects to consider during review:

• Functionality and implementation
• Architecture and performance
• Code readability and style

A friendly reminder to add a reviewer/reviewers, add an assignee (yourself if you've worked on the change), set the code review status, and set the component request. :smile: