New Utility component to make viewing pseudo-class states easier

[dmarcey]

Adds a <WithPseudoClass /> component that is available in our playroom configuration to make things like sticker sheets where we want to view :hover or :focus states at rest.

Modifies playroom config to allow for use of non-primer components in playroom.

https://primer-components-hppokfo5v.now.sh/playroom//#?code=N4Igxg9gJgpiBcIA8AhCAPABABwLzAG0BmAGkwBYBdAXwD4AdAO001QFcAXDiZgW3wBMdAHIQATrwCGAGyQB6FJ26MGzVgHUAlhwAWABQDOMNlAgBhaZIMGcRk+cvXc9BDogA3GGJeqWLdlw8mPzAQrQAEh5e8oqBKkz+clq6hsamFlYGvhra+nbpjjbY+Q6ZzgiSYByanj4JfgHKwYJ0AIJVNTAxSjzZ8sl5aaXWfQOp9hnWtkOTBuXwAGYQYGwGdWr+sU0hYQBiy6vdcX1JueMFmaoxGKog1EA

Also added a prototype of a <Stickersheet> component that can spread various props / pseudoclasses out to children to reduce some copy/paste when trying to look at a component in its different states.

I didn't go full out Cartesian product on these yet, but I could see that potentially being a prop added later on.

https://primer-components-hppokfo5v.now.sh/playroom/#?code=N4Igxg9gJgpiBcIA8BlALgSzAaxgJxQAsYY0ACTNAGxgF4AdEdLXPMoktAQkYD56AdmTJIAwhAC2ABwgCYAtMxz4OpQcOGUaDEACEArmjSyAzo3UapeCFJO1gAbQsaywMlZvwyjKBhMBDACMaKEYAGjIAN38qfRgTLwc0PDiAXTIAXzDnDTcPKS9GaLwMfwVwqJi4hLInEBMJGKoKxip-PABzGEZ0jJzUvqFLExh9KAhRNpMRu0dGeH8wTEjukAj5wggVvBaEADMIMH0zEAGLfiHhJAMjWV4b4wEkAHoHu5zrw0eABRLGvAAnvcvrIXm8BL8MP8gR9wQARMpdPDA25PV4ggQIgRIi4uT6ogDyhioGDkKMeYIxROopJguJEz3E0lk8kUmGUBGIpHpYkkMjkCiUrFUaByWjojAAMkEYFQTjl8rMnJdcu5rAVvCAoOqTIR-OMAO4VaKxeKJZJpTLZFXCPLqwogYqlcprSqmmp1BpNXZtTqrdYgAAezVOmX6g2E9Ku0sCst4MdlLwTVCjImTZECHR0eBgUAAdAAWPjJpMylMfdMQYm0jMQPCwPDiKh17O5vMAJkYZEgzbwrfzRZAqeEyY+z2TPMZfJZgvZwq5aAuLyFKgXFzWIANGCgaEIJgQDgAjAAGdsFgZAA

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/primer/primer-components/gro2iyue9
✅ Preview: https://primer-components-git-withpseudoclass.primer.now.sh

[dmarcey]

@colebemis Any issues with the changes to the playroom config? I didn't really want to add this component to primer itself, but wanted a way to expose it to playroom, and it looked like this was the best way to do so.

I also went ahead and re-exported some octicons for usage in playroom (same ones as in our Gatsby live-code-scope.js while I was at it.

Also, if you can think of a better name for the component, I'm all ears 👂👂

[emplums]

@colebemis mind giving this one a review? I think you'd be the best one to take a look!

[colebemis]

Nice work, @dmarcey! 👍

[dmarcey]

@emplums is this fine to go straight to master, rather than through a release, since it only touches playroom config?

[emplums]

@dmarcey sorry for the delay, yep this is fine to go straight to master! Feel free to merge 🙌 😸