import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';
import { SegmentedControl } from './segmented-control.component';
import {
  FlowPropsTable,
  ExternalReferenceLink,
} from '../../../../utils/storybook/docs-support';

<Meta title="SegmentedControl" component={SegmentedControl} />

# Segmented Control

Renders a list of attached buttons, similar to the [SegmentedControl components in Cocoa](https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/SegmentedControl/Articles/SegmentedControlCode.html)

Simply pass in the segments as children with their values specified, the `onChange` function is called with the selected `value` as the argument.

## Stories

### Default

<Canvas>
  <Story id="components-navigation-segmentedcontrol--default" />
</Canvas>

## Supported Property Mixins

Margin-only spacing:

<Canvas>
  <Story id="components-navigation-segmentedcontrol--mixins-margin-only-spacing" />
</Canvas>

Stackee:

<Canvas>
  <Story id="components-navigation-segmentedcontrol--mixins-stackee" />
</Canvas>

## Props

<FlowPropsTable ofComponent={SegmentedControl} />

## External Reference

<ExternalReferenceLink
  src="https://github.com/wealthsimple/patchwork/tree/master/core/navigation/segmented-control"
  type="github"
/>