Announcement Bar

{
  "$bloktastic": {
    "version": "1.0.0"
  },
  "name": "announcement_bar",
  "display_name": "Announcement Bar",
  "is_root": false,
  "is_nestable": true,
  "schema": {
    "enabled": {
      "type": "boolean",
      "pos": 0,
      "display_name": "Enabled",
      "default_value": true,
      "description": "Show or hide the announcement bar"
    },
    "message": {
      "type": "text",
      "pos": 1,
      "display_name": "Message",
      "description": "Primary announcement copy",
      "required": true
    },
    "link": {
      "type": "multilink",
      "pos": 2,
      "display_name": "Link",
      "description": "Optional announcement link destination"
    },
    "cta_label": {
      "type": "text",
      "pos": 3,
      "display_name": "CTA Label",
      "description": "Optional short link label"
    },
    "dismissible": {
      "type": "boolean",
      "pos": 4,
      "display_name": "Dismissible",
      "default_value": false,
      "description": "Allow user to dismiss this bar"
    },
    "theme": {
      "type": "option",
      "pos": 5,
      "display_name": "Theme",
      "default_value": "brand",
      "options": [
        {
          "name": "Brand",
          "value": "brand"
        },
        {
          "name": "Neutral",
          "value": "neutral"
        },
        {
          "name": "Dark",
          "value": "dark"
        }
      ],
      "description": "Visual style"
    }
  },
  "preview_field": "message"
}

# Announcement Bar

## Purpose
Slim top banner for product announcements, campaign messages, and urgent notices.

## Storyblok Schema Fields
- `enabled` (boolean): Show or hide the announcement bar
- `message` (text, required): Primary announcement copy
- `link` (multilink): Optional announcement link destination
- `cta_label` (text): Optional short link label
- `dismissible` (boolean): Allow user to dismiss this bar
- `theme` (option): Visual style

## Visual Requirements
- Design for responsive marketing pages (mobile, tablet, desktop).
- Keep spacing and hierarchy clear for conversion-focused sections.
- Support optional content gracefully without visual gaps.

## Accessibility
- Use semantic sectioning and heading structure.
- Ensure interactive elements are keyboard reachable with visible focus states.
- Maintain WCAG-compliant contrast in all supported styles.

## Example Props Structure
```typescript
interface AnnouncementBarProps {
  // Map Storyblok fields to your frontend props here
}
```

## Edge Cases
- Missing optional media or links.
- Extremely long text content.
- Empty collections in nested blok fields.

# @bloktastic/announcement-bar

Slim top banner for product announcements, campaign messages, and urgent notices.

## Installation

```bash
bloktastic add @bloktastic/announcement-bar
```

## Fields

| Field | Type | Required | Description |
|---|---|---|---|
| enabled | boolean | No | Show or hide the announcement bar |
| message | text | Yes | Primary announcement copy |
| link | multilink | No | Optional announcement link destination |
| cta_label | text | No | Optional short link label |
| dismissible | boolean | No | Allow user to dismiss this bar |
| theme | option | No | Visual style |

## Notes
- Category: `sections`
- Tags: `banner`, `announcement`, `marketing`, `header`