Scope out directory components

[ashley-hebler]

What's this PR do?

• Adds a new tag component to account for our party-pills
• Cleans up some of the color helper and border-radius docs

Classes added (if any)

• c-tag
• c-tag--fixed - For fixed width/height tags
• has-bg- - For bg colors of ^
• is-rounded-full* - For circles
• t-links-unset* - For if tags inherit unwanted link styles
  *These is the only ones that will actually show up in global CSS

Why are we doing this? How does it help us?

Accounts for styles in the Texas lawmakers directory and maybe some data visuals projects if these could also work for them.

How should this be manually tested?

npm run dev

• c-tag - How do you feel about this name, @AndrewGibson27?
  I did some, "what do people tend to call these" research (added below) and tag seemed to be the most common. It also felt handy that both the name and how it's styled meant it could extend beyond just the use case of the R, D, labels. It is a loaded word for sure though, so I'm not married to it.
• is-rounded-full - Decouples border-radius: 50% from the tag so that we could one day use it in other places.
• has-color-rep, has-color-dem etc. - Again decouples the bg colors so that we can use them in other places if needed.

Does this introduce a breaking change where queso-ui is used in the wild? If so, is there a relevant branch/PR to accompany this release?

So far, no. I will need to go in and add is-rounded-full to the back to top button, but that feels like small 🥔 s.

TODOs / next steps (probably in a new PR to keep this one small):

• Reach out to EA about a more contrasted version of white text on republican red
• Scope out how lawmaker cards translate in the queso world These might make more sense at the repo level on second thought.
• Add a table variation with sorting

Naming research

• 3 - tag (Bulma | IBM | Buzzfeed Solid)
• 2 - badge (Bootstrap | Polaris Shopify)
• 1 - label (Github Primer)
• 1 - chip (Material) winner for cutest name tho

[AndrewGibson27]

I am a huge fan of these. Clean CSS (as is always the case!) and succinct (researched!) names.

The only feedback I have is for the HTML of c-tag. I'd argue it's worth making the full name of the party (or any other word category this component might be used for) available. "R" and "D" are obvious enough, but the first letter of a lesser-known party might not be. Also, when I was running through the directory tables on VoiceOver, it was hard to distinguish what was meant when a single letter was read out loud.

This is what I came up with, but I'm absolutely open to any improvements upon it you might have. You get the full name on hover and only the full name on screen readers.

[ashley-hebler]

@AndrewGibson27 yeah good call; I thought that was clever to use title= almost as a tooltip in that way, but to also hide these tags for screen readers. I didn't think to add that to the examples, but you're right, that's key to implementing these correctly. I added notes to the docs and updated the HTML to reflect the a11y concerns with those basically meaningless, one-letter tags.