feat: Tag component

[sarahmonster]

This is a draft; there are a few things I think we'll need to add once we have the docs ironed out, but I'm unclear on a few things.

Here's the draft doc: https://www.notion.so/octopusthink/Tag-1bf7e10623104926a6560ba1b1b43d06

Once that's stable, I'll move them into our README here and see about adding other props as needed. Here's what I think we'll need (marked my name next to ones I should be able to handle pretty easily.)

• [x] Ability to add a title prop or visually hidden text.
• [x] A grouping of semantic status Tags (probably with themeable colours!) (@sarahmonster)
• [x] A prop for numerical Tags + tweaked styling. (@sarahmonster)
• [x] Theme variables for Tags. (@sarahmonster)
• [x] OnClose events for dismissable Tags.
• [x] OnClick events and/or href navigation for interactive Tags. (Probably using the Link component underneath?)
• [x] Probably needs some more tests.
• [x] Should extract the colour contrast into its own utilities file so we can use it elsewhere as needed. (I'd love feedback on how best to offer up error messages in the case that a colour just doesn't have sufficient contrast though!) (@sarahmonster)

[sarahmonster]

Quick question: right now, we ask for two props to make a Tag dismissable:

If a Tag is dismissable, it can be passed an onDismiss event that will be called with the tag's "dismiss" button is activated.

<Tag color="hotpink" dismissable onDismiss={onDismiss}>Hot pink</Tag>

Seems like it would make more sense to have just the one—if you pass an onDismiss event, the Tag will automatically inherit the dismissable styling. I'm not sure there's a sensible use case where you'd want to use one without the other.... unless I'm not thinking about something in particular?

[sarahmonster]

Okay! So everything on my list above is more or less done now, except for the theme variables, but I'm thinking it probably makes sense to implement those at a slightly later phase where we're more focussed on the themeing, since there's going to be a wee bit of complexity to consider there, but if we think it's worth doing now I can look at it tomorrow.

Here's what I need help with:

• Fixing my linter errors! (Fixed three of them, but the react/jsx-one-expression-per-line is forming a circular loop with Prettier, so I'm not sure how to fix it.)
• OnClick events and/or href navigation for interactive Tags. (Probably using the Link component underneath?)
• Probably needs some more tests.
• I'm getting a console error: Warning: Receivedfalsefor a non-boolean attributecount. that I do not understand.

🙌

[sarahmonster]

Per discussion, let's implement the following changes here:

• [x] require all Tags to be wrapped in a Tag component
• [ ] include a label prop on the Tags component for titling component

<Tags label="Date">
    <Tags.Tag>12 September 2019</Tags.Tag>
  </Tags>

• [x] onClick events or whatever for tags that want to be interactive

There's some potentially-helpful information to peruse/steal/borrow from here: https://a11y-guidelines.orange.com/web_EN/exemples/tag/index.html

Also: http://microformats.org/wiki/rel-tag

@tofumatt, when you've a moment, could you look into the above for me? I'm not exactly sure how best to handle those changes myself, which means I'm probably wandering out of my depth now.