import { Meta, Story, Canvas, Title, Subtitle, ArgsTable, Source } from '@storybook/addon-docs';
import { Text } from '@lendi/ui/Typography';
import { Spacer, VerticalRhythm } from '@lendi/ui/Layout';
import Search from '@lendi-ui/icon/Search';
import Add from '@lendi-ui/icon/Add';
import * as stories from './Spacer.stories.tsx';
import { TITLE_COMPONENTS_DECOMISSIONED } from '../../../../../../docs/content.ts';

<Meta title={`${TITLE_COMPONENTS_DECOMISSIONED}/Layout/Spacer`} component={Spacer} />

<Title>Spacer</Title>

<Subtitle>A utility for creating space between components</Subtitle>

Spacer is a flexbox container that allows you to add space between items. It only applies spacing between direct children, and you can nest Spacers to create different rhythm.

For spacing out long-form text content, see the [Vertical Rhythm](?path=/docs/foundations-typography-vertical-rhythm--vertical-rhythm) component.

<Alert variant="info">
Spacer is a <em>new</em> component, not a LUI Next version of an existing component. You can use it at your discretion, however many of the LUI Now components include margin on them which results in extra spacing between items when using them in a Spacer.
</Alert>

## Usage

<Source language='tsx' dark={true} code={`import { Spacer } from '@lendi/ui/Layout';`} />

If you only pass `ygap`, the children will be laid out in a single column with vertical spacing. If you only pass `xgap`, then children will be laid out in a row with horizontal spacing. If you pass both `xgap` and `ygap` then children will be laid out in row with wrapping, with both horizontal and vertical spacing. If you pass `gap` then children will be laid out in a row and wrap, with both horizontal and vertical spacing.

By default, Spacers are 100% width. Spacers also do not include a full CSS reset like other opinionated components, as they are meant to inherit properties with default behavior.

## Vertical spacer
If you pass only `ygap`, you get a vertical spacer.
<Canvas>
  <Story name="Vertical spacer" story={stories.VerticalSpacer} />
</Canvas>

<ArgsTable story="Vertical spacer" include={['ygap', 'yalign', 'xalign', 'start', 'end']} />


## Horizontal spacer
Use `xgap` to create horizontal spacing.
<Canvas>
  <Story name="Horizontal spacer" story={stories.HorizontalSpacer} />
</Canvas>

<ArgsTable story="Horizontal spacer" include={['xgap', 'xalign', 'yalign', 'start', 'end']} />

Using `xgap` and `ygap`, we get a horizontal spacer with wrapping and different vertical spacing.
<Canvas>
  <Story name="Horizontal spacer with vertical spacing" story={stories.HorizontalYGap} />
</Canvas>

With `xgap` and `shouldWrap` set to true, we get a horizontal spacer with wrapping.
<Canvas>
  <Story name="Horizontal spacer with wrapping" story={stories.HorizontalWrapping} />
</Canvas>

## Tile spacer
If we pass in `gap`, we get both vertical and horizontal spacing with wrapping.
<Canvas>
  <Story name="Tile spacer" story={stories.TileSpacer} />
</Canvas>

## Options

### Alignment
Use `xalign` to align items on the horizontal axis. Use `yalign` to align items on the vertical axis. Use `align` to apply both.

### Nesting spacers
To create different spacings, you can nest Spacer components.
<Canvas>
  <Story name="Vertical spacer with nesting" story={stories.VerticalSpacerNested} />
</Canvas>

## Props
<ArgsTable />