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

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

# Action Card Text

A stacked text card with a **Bootstrap icon** floated to the top-right corner and a single drag-and-drop `content` slot. Drop any components — heading, text, button, or others — into the content area to build the card however you need.

- The icon is always present — **no image upload required**
- **Icon:** `bi-arrow-right` in a white circle, pointing up-right (-45deg) by default
- **Hover animation:** the circle fills with the accent (#FF9A52) colour (slide-in) and the arrow rotates to point right (0deg)
- The icon floats right (`float-end`) so content flows naturally to its left and below
- **One `content` slot** — use heading, text, button, or any other component inside it
- `stretched_link` requires `link_url` — makes the entire card clickable
- `padded: true` adds `p-4` to the card body
- `equal_height: true` adds `h-100` for consistent heights in grid row layouts

> ### Bootstrap documentation
> - [Cards](https://getbootstrap.com/docs/5.3/components/card/)
> - [Float utilities](https://getbootstrap.com/docs/5.3/utilities/float/)
> - [Background utilities](https://getbootstrap.com/docs/5.3/utilities/background/)
> - [Stretched link](https://getbootstrap.com/docs/5.3/helpers/stretched-link/)
> - [Shadows](https://getbootstrap.com/docs/5.3/utilities/shadows/)
> - [Bootstrap Icons](https://icons.getbootstrap.com/)

## Properties

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

## Stories

<Stories of={CardActionTextStories} />

## Examples

### Example 1 — Light background

```twig
{% embed 'vartheme_bs5_educare:card-action-text' with {
  background_color: 'bg-body-tertiary',
  padded: true,
  corner_style: 'rounded-3',
} %}
  {% block content %}
    <h3 class="h5 mb-4">Title card</h3>
    <p class="mb-0 text-muted small">Description text</p>
  {% endblock %}
{% endembed %}
```

### Example 2 — Dark background

```twig
{% embed 'vartheme_bs5_educare:card-action-text' with {
  background_color: 'bg-primary',
  padded: true,
  corner_style: 'rounded-3',
} %}
  {% block content %}
    <h3 class="h5 mb-4 text-white">Title card</h3>
    <p class="mb-0 text-white-50 small">Description text</p>
  {% endblock %}
{% endembed %}
```

### Example 3 — Linked card (entire card clickable)

```twig
{% embed 'vartheme_bs5_educare:card-action-text' with {
  background_color: 'bg-body-tertiary',
  padded: true,
  corner_style: 'rounded-3',
  stretched_link: true,
  link_url: 'https://example.com',
  link_target: '_blank',
} %}
  {% block content %}
    <h3 class="h5 mb-4">Title card</h3>
    <p class="mb-0 text-muted small">Entire card acts as a link.</p>
  {% endblock %}
{% endembed %}
```

### Example 4 — Equal height (grid usage)

Set `equal_height: true` here and `vertical_alignment: align-items-stretch` on the parent `atoms/section` row to align cards across a grid.

```twig
{% embed 'vartheme_bs5_educare:card-action-text' with {
  background_color: 'bg-body-tertiary',
  padded: true,
  corner_style: 'rounded-3',
  equal_height: true,
} %}
  {% block content %}
    <h3 class="h5 mb-4">Title card</h3>
    <p class="mb-0 text-muted small">Fills the full row height.</p>
  {% endblock %}
{% endembed %}
```

## Source code

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