AnnouncementBar

Top announcement bar component with utility navigation links. Fetches data from Contentstack Header content type.

Props

Prop	Type	Required	Default	Description
`announcementText`	`string`	Yes	-	Announcement text to display
`showAnnouncement`	`boolean`	Yes	-	Whether to show the announcement
`url`	`string`	No	-	Optional URL to link the announcement
`utilityNavData`	`UtilityNavItem[]`	No	`[]`	Utility navigation links
`cslp`	`CSLPFieldMapping`	No	-	CSLP mapping for announcement field

Usage

1import { AnnouncementBar } from '@/components/organisms/AnnouncementBar';
2
3<AnnouncementBar
4  announcementText="Join us Nov. 6 for our Fall Product Update"
5  url="https://example.com/event"
6  showAnnouncement={true}
7  utilityNavData={utilityLinks}
8  cslp={cslp?.announcement}
9/>

import { AnnouncementBar } from '@/components/organisms/AnnouncementBar';

<AnnouncementBar
  announcementText="Join us Nov. 6 for our Fall Product Update"
  url="https://example.com/event"
  showAnnouncement={true}
  utilityNavData={utilityLinks}
  cslp={cslp?.announcement}
/>

Features

Responsive: Different layouts for mobile and desktop
Clickable: Can be wrapped in Link if URL provided
Utility nav: Shows utility navigation links from announcement_navigation
Mobile optimization: Shows last utility link on mobile
Gradient background: Uses custom nav gradient
CSLP support: Full Live Preview support for announcement field

Mobile Layout

Full-width announcement text
Last utility link shown on right (sm+)
Truncated text with ellipsis
Sticky positioning

Desktop Layout

Centered announcement text
Utility navigation links on right
Full utility nav visible

CSLP

Announcement wrapper receives CSLP attributes
Announcement text content receives CSLP attributes
CSLP only applied in preview mode

Notes

Returns null if showAnnouncement is false or no text
Uses UtilityLink component for utility links
Announcement text uses amethyst accent color
Hover effect adds underline
Data typically comes from Contentstack Header content type