import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import RadioGroup from '../RadioGroup';
import { sortingOptionsMock } from '../../../../mocks/product/productListing';
import * as RadioGroupStories from './RadioGroup.stories';

<Meta of={RadioGroupStories} />

# RadioGroup

<br />

## `RadioGroups` group a set of radio buttons in a block.

<br />

### Default

<Canvas>
  <Story of={RadioGroupStories.Default} />
</Canvas>

### Selected

<Canvas>
  <Story of={RadioGroupStories.Selected} />
</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} />
