import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import RadioGroup from '../RadioGroup';
import { sortingOptionsMock } from '../../../../mocks/product/productListing';

<Meta title="Atoms/RadioGroup" component={RadioGroup} />

# RadioGroup
<br />

## `RadioGroups` group a set of radio buttons in a block.
<br />

### Default
<Canvas>
    <Story name="Default">
        <RadioGroup options={sortingOptionsMock.options} />
    </Story>
</Canvas>

### Selected
<Canvas>
    <Story name="Selected">
        <RadioGroup options={sortingOptionsMock.options} value="POPULARITY" />
    </Story>
</Canvas>

## Usage Example

```jsx
import RadioGroup from '@appdirect/sfb-theme-components/src/atoms/radio-group/RadioGroup';

<RadioGroup
    options={[
        {
            value: '',
            label: 'Relevance',
        },
        {
            value: 'POPULARITY',
            label: 'Popularity'
        }
    ]}
    value="POPULARITY"
/>
```
## Props

<ArgsTable of={RadioGroup} />
