# PromoBanner

> Slug: `promo-banner` · Category: Display

## When to use
- Surface a marketing promo or announcement at the top of a page or section.
- Provide a single tappable banner that links to a deal or destination (`variant="interactive"`).
- Display a static promo strip with brand-tinted or monochrome backgrounds (`variant="static"`).

## When NOT to use
- System status / failure messaging — use `NoticeBar` or `Tidbit`.
- Promotional inline labels next to a price or plan — use `PromoLabel`.
- Persistent global navigation — use `Subnavigation`.

## Variants & decision tree
Discriminated union — pick `variant` first.

- `variant="static"` (renders a `<div>`)
  - `type="monochrome"` for neutral chrome.
  - `type="branded"` for brand-tinted background.
- `variant="interactive"` (renders `<button>` or `<a>` based on `navigationType`)
  - `navigationType="internal"` -> `<button>` with `onClick`.
  - `navigationType="external"` -> `<a href={href}>`.
  - `size`: `xs` (default for static) or `small`.
  - `chevronIcon`: trailing chevron SVG (only used in interactive).

Add `radius="rounded"` for pill-style edges; `radius="none"` for full-bleed.

## States
- `focused` (interactive only) -> force-focus class for design review.
- Inverse-aware (theme or `inverse` prop).
- Static variant locks `data-size="xs"`.

## Props
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| **`label`** | `ReactNode` | — | Visible label content. |
| **`variant`** | `'static' \| 'interactive'` | — | Discriminator. |
| `icon` | `ReactNode` | — | Leading SVG icon. |
| `a11yLabel` | `string` | — | Accessible name for the leading icon. |
| `radius` | `'rounded' \| 'none'` | `'none'` | Border radius. |
| `inverse` | `boolean` | inherits | Dark-background styling. |
| `type` (static) | `'monochrome' \| 'branded'` | — | Background treatment. Required for static. |
| `navigationType` (interactive) | `'internal' \| 'external'` | `'internal'` | Renders button vs anchor. |
| `href` (interactive) | `string` | — | URL for external. |
| `onClick` (interactive) | `() => void` | — | Click handler. |
| `size` (interactive) | `'xs' \| 'small'` | — | Render size. |
| `chevronIcon` (interactive) | `ReactNode` | — | Trailing chevron SVG. |

## Usage examples
```tsx
import { PromoBanner } from 'arrow-react-bootstrap';

// Static branded promo strip
<PromoBanner
  variant="static"
  type="branded"
  icon={SparkleIcon}
  label="Holiday savings: up to 30% off"
/>

// Interactive external link with chevron
<PromoBanner
  variant="interactive"
  navigationType="external"
  href="/deals"
  size="small"
  radius="rounded"
  label="See this week's deals"
  chevronIcon={ChevronRight}
/>

// Interactive button (in-app)
<PromoBanner
  variant="interactive"
  navigationType="internal"
  onClick={openOffer}
  label="View your reward"
  chevronIcon={ChevronRight}
/>
```

## Composition
- Place at the top of a page hero or above a `Title`.
- Inside marketing layouts, pair with `LinkStyledAsButton` CTAs below.

## Accessibility
- Static variant is non-interactive; not focusable.
- Interactive `internal` renders `<button type="button">`; `external` renders `<a>`.
- Provide `a11yLabel` when the leading `icon` carries meaning not in the text.
- Chevron is `aria-hidden="true"`.

## Do / Don't
- Do: pick `variant` first; the type system gates the other props.
- Do: use `navigationType="external"` with a real `href`.
- Don't: mix `type` and `navigationType` — they're mutually exclusive across variants.
- Don't: use for blocking system messages — pick `NoticeBar` / `Tidbit`.
