# `PhiaUi.Components.Banner`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/feedback/banner.ex#L1)

Full-width page-level feedback banners inspired by Atlassian Design System Banner,
Bootstrap Alerts, and GitHub's site-wide announcement banners.

These components occupy the full width of their container and are used for
system-wide messages, marketing announcements, and consent requirements.

## Sub-components

| Component           | Purpose                                                          |
|---------------------|------------------------------------------------------------------|
| `banner/1`          | Full-width dismissible feedback strip (top/inline)              |
| `announcement_bar/1`| Slim sticky marketing/system announcement at the very top       |
| `cookie_consent/1`  | GDPR-compliant cookie consent panel (bottom of viewport)        |

## Banner (full-width inline feedback)

    <.banner variant={:warning} :if={@maintenance_mode}>
      <:icon><.icon name="triangle-alert" class="h-4 w-4" /></:icon>
      Scheduled maintenance on Saturday 2–4 AM UTC.
      <:action href="/status">View status</:action>
    </.banner>

## Announcement bar (sticky top)

    <.announcement_bar>
      🎉 PhiaUI 1.0 is out! Read the
      <:link href="/blog/v1">release notes</:link>.
    </.announcement_bar>

## Cookie consent (bottom overlay)

    <.cookie_consent :if={!@cookies_accepted}>
      We use cookies to improve your experience.
      <:action phx-click="accept_cookies">Accept all</:action>
      <:secondary phx-click="open_cookie_settings">Settings</:secondary>
    </.cookie_consent>

# `announcement_bar`

Renders a slim sticky announcement bar at the top of the page.

Used for high-priority marketing or system announcements (new releases,
feature announcements, system notices). Typically placed above the navigation
header in the root layout.

## Example

    <.announcement_bar id="release-bar">
      PhiaUI 1.0 is here!
      <:link href="/changelog">See what's new</:link>
    </.announcement_bar>

## Attributes

* `id` (`:string`) - Optional ID — required for JS.hide dismiss. Defaults to `nil`.
* `dismissable` (`:boolean`) - When `true`, renders a close button. Defaults to `true`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. HTML attrs forwarded to the root `<div>`.
## Slots

* `inner_block` (required) - Announcement text. Can include inline HTML elements.
* `link` - Inline link rendered inside the text — rendered as an `<a>` tag.

# `banner`

Renders a full-width, optionally dismissible feedback banner.

Use for page-level alerts that need more visual prominence than an `Alert`
component but should not block the user like a modal would. Common uses:
maintenance windows, rate limit warnings, subscription expiry notices.

## Example

    <.banner id="trial-banner" variant={:warning}>
      <:icon><.icon name="clock" class="h-4 w-4" /></:icon>
      Your trial expires in 3 days.
      <:action phx-click="open_billing">Upgrade now</:action>
    </.banner>

## Attributes

* `id` (`:string`) - Optional ID — required for JS.hide dismiss. Defaults to `nil`.
* `variant` (`:atom`) - Visual style controlling background, border and icon defaults. Defaults to `:default`. Must be one of `:default`, `:info`, `:success`, `:warning`, or `:destructive`.
* `closeable` (`:boolean`) - When `true`, renders an × dismiss button using `JS.hide`. Defaults to `true`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. HTML attrs forwarded to the root `<div>`.
## Slots

* `icon` - Optional leading icon (recommended: `h-4 w-4`).
* `inner_block` (required) - Banner message text.
* `action` - Primary action — rendered as a link/button on the right.

# `cookie_consent`

Renders a GDPR-compliant cookie consent panel at the bottom of the viewport.

The panel is fixed to the bottom of the screen, full-width on mobile and
card-style on desktop. Use the `:action` slot for the primary accept button
and the `:secondary` slot for a settings or reject link.

Control visibility server-side via a LiveView assign — hide by setting
`:if={!@cookies_accepted}`.

## Example

    <.cookie_consent id="cookie-bar" :if={!@cookies_accepted}>
      We use cookies to provide a better experience and analyze traffic.
      <a href="/privacy" class="underline">Privacy policy</a>.
      <:action phx-click="accept_all_cookies">Accept all</:action>
      <:secondary phx-click="cookie_settings">Manage preferences</:secondary>
    </.cookie_consent>

## Attributes

* `id` (`:string`) - Unique ID for the consent panel. Defaults to `"phia-cookie-consent"`.
* `title` (`:string`) - Heading text for the consent panel. Defaults to `"Cookie preferences"`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. HTML attrs forwarded to the root `<div>`.
## Slots

* `inner_block` (required) - Privacy description text.
* `action` (required) - Primary accept button — wire with `phx-click` to set consent state.
* `secondary` - Secondary button for granular settings — optional.

---

*Consult [api-reference.md](api-reference.md) for complete listing*