import { Meta, Source, Canvas, Controls, Stories } from '@storybook/addon-docs/blocks';
import * as SpacerStories from './spacer.stories.json';
import templateSource from './spacer.twig?raw';

<Meta of={SpacerStories} name="Docs" />

# Spacer

A minimal invisible component that adds vertical whitespace between sections using Bootstrap `py-*` utilities. Use it to control breathing room between layout blocks without adding custom CSS.

- Renders a single `<div>` with `aria-hidden="true"` — invisible and inert
- `size` accepts `py-0` through `py-5` only; invalid values fall back to `py-3`
- Use inside a container or directly between section-level components

> ### Bootstrap documentation
> - [Spacing](https://getbootstrap.com/docs/5.3/utilities/spacing/)

## Properties

<Canvas of={SpacerStories.Default} />
<Controls of={SpacerStories.Default} />

## Stories

<Stories of={SpacerStories} />

## Example

### Example #1 : Medium spacer (default)

```twig
{{ include('vartheme_bs5_educare:spacer', { size: 'py-3' }, with_context: false) }}
```

### Example #2 : Large spacer between sections

```twig
{{ include('vartheme_bs5_educare:spacer', { size: 'py-5' }, with_context: false) }}
```

### Example #3 : Extra small spacer

```twig
{{ include('vartheme_bs5_educare:spacer', { size: 'py-1' }, with_context: false) }}
```

## Source code
[//]: # (Twig Template source code)
<Source code={templateSource} />
