HSDS-256: Microsurveys: MultipleChoiceSurvey Component

[jakubjanczyk]

Problem/Feature

This PR adds new variant for Messages Microsurveys type: Multiple Choice. This component is quite simple, it takes list of choices as input prop and renders as many Radio buttons as there are choices. Other standard mechanisms from previous microsurvey components are used without any modifications.

This can be checked in by going to Storybook - there is new Story under MessageCard added with some example data.

Write to your heart's content, include:

• [ ] A link to the Figma design in your story (list regularly updated here)
• [ ] A link to the Story(ies) in the description
• [ ] Is there a Jira ticket associated?
• [ ] If useful, add screenshots or videos
• [ ] If useful (and unclear), add a little explanation of why a certain path was taken
• [ ] Instructions on how to test
• [ ] Found any restrictions/limitations? Let us know!

Guidelines

Make sure the pull request:

• [ ] Follows the established folder/file structure
• [ ] Adds unit tests
• [ ] 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?
• [ ] Did you verify some accessibility (a11y) basics?
• [ ] Adds/updates stories. Guidelines
• [ ] Adds/updates documentation (ie proptypes) Guidelines
• [ ] Has it been tested in Help Scout's supported browsers?
• [ ] Requests review from designer of the feature
• [ ] Add label (bug? feature?)

[jakubjanczyk]

@alexestrada As mentioned in the spec file - having Radio button color be the same as Beacon color is tricky for light colors - I have not changed the default Radio color yet, waiting on your opinion :)

Other thing that is different than in design is the spacing around Radio buttons. In figma they have more margin between options, but what you can see here is just the default we have in HSDS. Let me know if I should change it!

[cloudflare-pages[bot]]

Deploying with    Cloudflare Pages

Latest commit:	990609e
Status:	⚡️  Build in progress...

View logs

[alexestrada]

@jakubjanczyk thanks! A few things on this one:

• The font for the options and "Tell us more..." should be SF Pro @ 14px, that is 100% my mistake! :sorry:
• I'd like to honor the spacing set in the design to give the items a little more breathing room. I understand that's our component, but since it's technically a "white-label" message, it's ok if we aren't using our exact HS UI.
• If we're going to go with blue selection over matching the Beacon color, the current radio selection feels really... bold! We have a different design in Figma than what's in Storybook 🤔 I'd like to get a few more eyes on this one and see if it's worth doing something different specifically for these messages.

[jakubjanczyk]

@alexestrada Just one thing - we are not using SF Pro font anywhere in our code (neither HSDS, hs-app or beacon, and the last time we've added some font was 2 years ago :smile:). Do we want to start using it here? If so, we'll need to start loading it everywhere :)

I'll wait for the decision about the blue radio :)

[alexestrada]

@jakubjanczyk just to capture what we've chatted about:

• Font is just defaulting system fonts (SF Pro is just what we use in Figma to denote that)
• Radio button color and focus state to change to Charcoal 300