fix(ui-library, storybook): #835 align radio-group prop names with design

[bar-tay]

old branch at: https://github.com/deven-org/boiler/tree/fix/835_radio_group_prop_alignment_old

The merge-base changed after approval.

[angsherpa456]

Looks good, please first rebase to the new develop branch and squash commits to a single commit.

[davidken91]

For the vertical variant of radio group, I think that the radio buttons and labels need to be inline like what we see in Figma

[davidken91]

A couple of small things I noticed.

1. By default, the label element comes with a small amount of padding to the left and right of it. By setting padding to 0 on the legend element (line 44 in radio.css.ts) then the legend will be flush with the radio inputs like in the design. This will work on both horizontal and vertical layouts
2. It looks like we're not using index.css.ts within the radio group directory. All of the styles associated with radio group come from either form.css or radio.css
3. It looks like we're not using the input control margin that's provided in figma. It only appears in md and lg. It is set to 0 on sm. Instead of using margin, we could simply add align-items: center; to .blr-radio on line 141 in radio.css.ts. That will automatically vertically align everything.
4. There are some notes in the radio.css.ts file saying _FIX_: "We need to differentiate between horizontal and vertical gaps, but this seems all wrong anyhow"; for now, the gaps look correct, but we need to double check this with design.
5. In the Figma file, I can see that we have individual hints per radio input. In storybook, we only have one global hint at the bottom. We need to double check what the functionality should be.

These issues are probably way outside of the scope of this ticket, but I think we may need a separate ticket to address these. Let me know if you have any thoughts @thrbnhrtmnn