import { Story, Preview, Meta } from "@storybook/addon-docs/blocks";
import { THEME } from "../../types";
import { Radio } from "../../components/Radio";

export const decorators = [
  (storyFn) => (
    <div className="p-8" style={{ backgroundColor: "#132433" }}>
      {storyFn()}
    </div>
  ),
];

<Meta
  title="Components/Forms/Radio (Branded)"
  component={Radio}
  decorators={decorators}
/>

# Brand Radio

The [`Radio`](/?path=/docs/components-forms-radio--default) component is also available in a `brand` theme variant. Supported functionaliy for the brand theme `Radio` is shown below. If a `Radio` is within a brand themed [`FormGroup`](http://localhost:9002/?path=/docs/components-aptible-branding-formgroup--form-group), it will automatically use that as its `theme`. To override this, provide a value to the `Radio`'s `theme` prop.

<Preview>
  <Story name="Brand Radio - Default">
    <Radio.Group>
      <Radio theme={THEME.BRAND} label="Unchecked" />
      <Radio theme={THEME.BRAND} checked label="Checked" />
    </Radio.Group>
  </Story>
</Preview>

## Demos

### Disabled

<Preview>
  <Story name="Brand Radio - Disabled">
    <Radio.Group>
      <Radio theme={THEME.BRAND} label="Unchecked" />
      <Radio theme={THEME.BRAND} checked label="Checked" />
      <Radio theme={THEME.BRAND} label="Disabled" disabled />
      <Radio theme={THEME.BRAND} label="Checked + Disabled" checked disabled />
    </Radio.Group>
  </Story>
</Preview>