(PDS-40) Radiobutton Component

[jilliankeenan]

• Adding Radiobutton Component
• Fixing issue where check icon isn't the correct color when in error state

Previous

After

[Sigler]

Looks great! Just got to see it in action.

Thank you for capturing that fix for the error state checkmark as well.

[vine77]

This looks awesome! Thanks for doing this work @jilliankeenan.

If we want that docs example to be interactive, I think we could use React Hooks like this:

const exampleStyle = { marginRight: 10 };
const [value, setValue] = React.useState(0);

<div>
  <RadioButton
    name="radiobutton-ex-unchecked"
    label="Unchecked"
    style={exampleStyle}
    value={value === 0}
    onChange={() => setValue(0)}
  />
  <RadioButton
    name="radiobutton-ex-checked"
    label="Checked"
    style={exampleStyle}
    value={value === 1}
    onChange={() => setValue(1)}
  />
  <RadioButton
    name="radiobutton-ex-disabled"
    label="Disabled"
    style={exampleStyle}
    value={value === 2}
    onChange={() => setValue(2)}
    disabled
  />
  <RadioButton
    name="radiobutton-ex-error"
    label="Error"
    style={exampleStyle}
    value={value === 3}
    onChange={() => setValue(3)}
    error
  />
</div>;