Add Scrollbox container component

[lyzadanger]

This PR adds a Scrollbox container component based on the scrollbox pattern. It also extracts a partial pattern for a sticky-header, as inspired by this comment in a previous PR. The only place a sticky header is currently used in our applications is in a table, so I haven't fully fleshed out this pattern, but it exists as a stub and the table-heading styling makes use of it now.

This Scrollbox component will be used by forthcoming Table component.

You can see this component in action on the Container Components pattern-library page.

Depends on #169 as it builds on a pattern-library page modified in that branch.

[esanzgar]

I added a few comments.

I would suggest to use the new <Scrollbox> component in the LongModalExample (DialogComponents.js):

        <Scrollbox>
          <LoremIpsum />
        </Scrollbox>

[esanzgar]

More consistent with the test below:

Suggested change

	assert.isTrue(wrapper.find('div').first().hasClass('Hyp-Scrollbox'));
	assert.isTrue(wrapper.find('div.Hyp-Scrollbox').exists());

[esanzgar]

If you want to check the correct class order, you can use this complicated test:

Suggested change

	assert.isTrue(wrapper.find('div.Hyp-Scrollbox.foo.bar').exists());
	assert.deepEqual(
	[
	...wrapper
	.find('div.Hyp-Scrollbox.foo.bar')
	.getDOMNode()
	.classList.values(),
	],
	['Hyp-Scrollbox', 'foo', 'bar' ]
	);

[lyzadanger]

I've added a note to #129 that could help to address this: I'd like to craft some common/reusable tests for components that take these common props.

[esanzgar]

Suggested change

	@mixin sticky-header {
	@mixin sticky-scrollbox-header {

The association of the two names could help to understand when to use the pattern.

[lyzadanger]

You're right to note that this pattern isn't quite normalized where we need it yet. I spent a few minutes trying to see if I could re-jigger it (also taking the comment below about color into consideration), but the pattern lacks clarity out of context. What I'd like to propose is that we carry this forward into the next set of work, which involves a Table component that uses the Scrollbox component as a wrapper. Then we can scrutinize this pattern in better context and make some improvements.

[esanzgar]

Maybe the colour could be taken out of this pattern, so the pattern only deals about positioning and size.

[codecov]

Codecov Report

Merging #170 (83090c8) into main (99f304c) will not change coverage.
The diff coverage is 100.00%.

@@            Coverage Diff            @@
##              main      #170   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           12        12           
  Lines          149       152    +3     
  Branches        51        53    +2     
=========================================
+ Hits           149       152    +3     

Impacted Files	Coverage Δ
src/components/containers.js	100.00% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 99f304c...83090c8. Read the comment docs.