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

<Meta title="Components/Layout Containers/Expander ⚠️" component={Expander} />

# Expander

> ⚠️ This component is deprecated and will be removed in a future release. Use the `ControllableExpander` component instead.

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

<Canvas>
  <Story id="components-layout-containers-expander-⚠️--default" />
</Canvas>

## Open by Default

<Canvas>
  <Story id="components-layout-containers-expander-⚠️--open-by-default" />
</Canvas>

## Custom Button Styles

<Canvas>
  <Story id="components-layout-containers-expander-⚠️--custom-button-styles" />
</Canvas>

## Alternate Heading

<Canvas>
  <Story id="components-layout-containers-expander-⚠️--alternate-heading" />
</Canvas>

## With Context

<Canvas>
  <Story id="components-layout-containers-expander-⚠️--with-context" />
</Canvas>

## Multiple Children

<Canvas>
  <Story id="components-layout-containers-expander-⚠️--multiple-children" />
</Canvas>

## Props

<FlowPropsTable ofComponent={Expander} />

## External Reference

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