# Alert → InfoPrompt Migration Guide

## Import Management

1. Remove import: `Alert` (or `{ Alert }`) from `'@transferwise/components'`
2. Remove import: `{ AlertArrowPosition }` from `'@transferwise/components'` (if used)
3. Add import: `{ InfoPrompt }` from `'@transferwise/components'`
4. If using custom `icon`: Add the icon import from `'@transferwise/icons'` (if not already present)
5. Remove unused imports: `Sentiment`, `Status` enums if only used for Alert `type`

## Universal Rules

1. `type` → `sentiment` (with value mapping — see below)
2. `message` → `description` (**required** in InfoPrompt; does **not** support `**bold**` markdown — strip markdown or render bold text before passing)
3. `children` (deprecated) → `description` (convert ReactNode to plain string)
4. `title` → `title` (direct)
5. `className` → `className` (direct)
6. `onDismiss` → `onDismiss` (signature changes: `MouseEventHandler<HTMLButtonElement>` → `() => void` — remove the event parameter)
7. `icon` → `media` (wrap in `{ asset: <Icon /> }` object)
8. `action.text` → `action.label`
9. `action.as` → removed (InfoPrompt action is always a Link)
10. `action['aria-label']` → removed (not supported)
11. `statusIconLabel` → removed (use `media.asset` with accessible attributes like `title` or `aria-label` on the icon itself)
12. Remove deprecated props: `arrow`, `dismissible`, `size`

---

## Type / Sentiment Mapping

| Alert `type`   | InfoPrompt `sentiment` | Notes                                 |
| -------------- | ---------------------- | ------------------------------------- |
| `'positive'`   | `'success'`            |                                       |
| `'neutral'`    | `'neutral'`            |                                       |
| `'warning'`    | `'warning'`            |                                       |
| `'negative'`   | `'negative'`           |                                       |
| `'pending'`    | `'neutral'`            | No pending sentiment; use `'neutral'` |
| `'success'` ❌ | `'success'`            | Alert deprecated value                |
| `'info'` ❌    | `'neutral'`            | Alert deprecated value                |
| `'error'` ❌   | `'negative'`           | Alert deprecated value                |

When using enum values:

| Alert enum           | InfoPrompt string |
| -------------------- | ----------------- |
| `Sentiment.POSITIVE` | `'success'`       |
| `Sentiment.NEUTRAL`  | `'neutral'`       |
| `Sentiment.WARNING`  | `'warning'`       |
| `Sentiment.NEGATIVE` | `'negative'`      |
| `Sentiment.PENDING`  | `'neutral'`       |
| `Status.PENDING`     | `'neutral'`       |

---

## New Props in InfoPrompt (Not in Alert)

| Prop          | Type       | Default    | Description                                    |
| ------------- | ---------- | ---------- | ---------------------------------------------- |
| `aria-live`   | `AriaLive` | `'polite'` | ARIA live region politeness level              |
| `data-testid` | `string`   | —          | Test ID for testing tools                      |
| `sentiment`   | —          | —          | Supports `'proposition'` (no Alert equivalent) |

---

## Props Removed (No InfoPrompt Equivalent)

| Alert Prop             | Migration Action                                                   |
| ---------------------- | ------------------------------------------------------------------ |
| `arrow`                | Remove. Use `InlinePrompt` if pointer behaviour is needed.         |
| `children`             | Convert to `description` string.                                   |
| `dismissible`          | Replace with `onDismiss` handler.                                  |
| `size`                 | Remove. Not supported.                                             |
| `statusIconLabel`      | Remove. Use `media.asset` with accessible icon attributes instead. |
| `action.as`            | Remove. InfoPrompt action is always a Link.                        |
| `action['aria-label']` | Remove. Use a descriptive `action.label` instead.                  |