import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';
import { Expander } from './expander.component';
import { FlowPropsTable, ExternalReferenceLink } from '../../../utils';

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

# Expander

Generic, unstyled expanding component with support for any element as toggle or contents to be toggled.

- `children`: the contents to be toggled open or closed
- `headingComponent`: the element that gets clicked
- `headingComponentOpen`: an optional alternate heading component
- `onToggle`: a callback that would be executed after the Expander has toggled open or closed, passing the open state as the only argument, i.e. `true = open, false = closed`
- `buttonStyles`: the `<UnstyledButton />` is displayed inline-block by default. Should you wish to change this or add any styles to it, you can do so with this prop

## Default

<Preview withToolbar>
  <Story id="expander--default" />
</Preview>

## Open by Default

<Preview withToolbar>
  <Story id="expander--open-by-default" />
</Preview>

## Custom Button Styles

<Preview withToolbar>
  <Story id="expander--custom-button-styles" />
</Preview>

## Alternate Heading

<Preview withToolbar>
  <Story id="expander--alternate-heading" />
</Preview>

## With Context

<Preview withToolbar>
  <Story id="expander--with-context" />
</Preview>

## Multiple Children

<Preview withToolbar>
  <Story id="expander--multiple-children" />
</Preview>

## Props

<FlowPropsTable ofComponent={Expander} />

## External Reference

<ExternalReferenceLink
  src="https://github.com/wealthsimple/patchwork/tree/master/src/core/behaviors/expander"
  type="github"
/>
