HSDS-250 HSDS-254 HSDS-264: Faces Survey Component + Updated Thumbs Survey

[Charca]

Jira Issues

• https://helpscout.atlassian.net/browse/HSDS-250
• https://helpscout.atlassian.net/browse/HSDS-254

Problem/Feature

This PR adds a new MessageCard Survey variation for Microsurveys. It uses the RateAction for the emoji buttons, with the addition of a new xl size in both the RateAction and Emoticon components.

It also includes a few updates to the "selected" state of the Thumbs Survey to be consistent with the new designs.

Check it out:

• Faces Survey
• Thumbs Survey

Le gif demó:

Guidelines

Make sure the pull request:

• [x] Follows the established folder/file structure
• [x] Adds unit tests
• [x] If it is a refactor or change to an existing component, have you verified it won't break existing Cypress tests or have you updated them?
• [x] Did you verify some accessibility (a11y) basics?
• [x] Adds/updates stories. Guidelines
• [x] Adds/updates documentation (ie proptypes) Guidelines
• [x] Has it been tested in Help Scout's supported browsers?
• [x] Requests review from designer of the feature
• [x] Add label (bug? feature?)

[cloudflare-pages[bot]]

Deploying with    Cloudflare Pages

Latest commit:	ba3850c
Status:	✅  Deploy successful!
Preview URL:	https://cdc630d8.hsds-react.pages.dev

View logs

[tinkertrain]

Hi @Charca ! Can you do me a favour and remove this line? It's unrelated to this PR but is a leftover I forgot to remove and it gives the biggest warning ever when running tests... Thanks!

[Charca]

Thank you all for the review! I've made a couple changes so I'm re-requesting review from you all 🙏

@tinkertrain I've included that one-line change to the Tooltip component as well.

@alexestrada that's correct on your first note! The "thank you" message will show up once this is integrated in the Beacon embed-side.

As for the emoji issue, apparently, the position of native emojis is off by a couple pixels on non-retina monitors...

To be fair, I think it's only noticeable because we're showing them inside a circle in a really small font-size, but still! I've added a fix that I think should take care of it!

[Charca]

@alexestrada FYI, I've also included the fix for HSDS-264 in this PR.