import { Meta, Story, Primary, Controls, Canvas } from "@storybook/addon-docs";

import * as stories from "./toggle-group.stories";

<Meta of={stories} />

# Toggle Group

Toggle groups are used for quick filters for a data set. **Example:** the Member’s page of the Admin
Console uses a toggle group to filter members by their organization status: all, invited, needs
confirmation, revoked.

Toggle groups function as radio buttons and a radio group under the hood.

A button in a toggle group can have a badge counter added to show the number of items existing
within that filter.

## Default

<Canvas of={stories.Default} />

<Controls />

## Full width

If a toggle group should span the width of its container, pass the `fullWidth` input to the toggle
group.

```
<bit-toggle-group fullWidth>
...toggle components here...
</bit-toggle-group>
```

<Canvas of={stories.FullWidth} />

## Label wrap

If the labels in a toggle group would overflow the width of the toggle group container, then the
labels will wrap to 2 lines and truncate with an ellipsis past that. The full label text is
accessible via the `title` prop (i.e. visible on hover).

<Canvas of={stories.LabelWrap} />

# Accessibility

- Since only 1 button can be selected at a time, the toggle group acts similarly to a radio group.
- The user may navigate the options via left/right arrow keys.
- The screen reader will announce the button group: example “[context label], [button content]
  selected, of [# of buttons]”), the number of buttons and the currently selected button.