{
"name": "NotificationsPanel",
"source": "src/components/NotificationsPanel.tsx",
"propsType": "NotificationsPanelProps",
"description": "NotificationsPanel — what the bell opens: notifications grouped by day,\nunread ones marked, each one openable and markable, and a way to clear\nthem all.\n\nCONTENT, NOT A CONTAINER. It is the panel's contents; put it in a Popover\nunder the bell on a desktop — whose `title` names it — or a Drawer on a\nphone. It owns no data: the caller passes `notifications` and updates them\nfrom `onReadChange` and `onMarkAllRead`.\n\nUNREAD IS SAID, NOT ONLY SHOWN. An unread notification has a dot and a\nheavier title; to a screen reader its title begins \"Unread:\". The bar\ncounts them in words. The bell that opens it should say the count too —\n\"Notifications, 3 unread\" — for the same reason.\n\nNOTHING THAT HAS FOCUS DISAPPEARS. Each notification's toggle stays where\nit is and swaps \"Mark as read\" for \"Mark as unread\", rather than vanishing\nonce pressed. \"Mark all as read\" does go — there is nothing left to mark —\nso focus moves to the first notification first, not to the top of the page.\nEach change is announced in a status region that is always mounted.\n\nGROUPED BY DAY, NEWEST FIRST. Today, Yesterday, Earlier — each a heading,\nso a screen reader can jump between them — counted from the local calendar\nday, not from 24-hour windows.",
"import": "import { NotificationsPanel } from 'ionbase-ui';",
"status": "stable",
"summary": "What the bell opens: notifications grouped by day — Today, Yesterday, Earlier — with unread ones marked in words as well as a dot, a read toggle on each that never disappears, Mark all as read, an empty state and a loading state. Content for a Popover or a Drawer; the caller owns the data.",
"useWhen": [
"the product tells a user about things that happened while they were elsewhere — an approval waiting, a run that failed, a mention",
"each item can be opened, and whether it has been seen matters"
],
"useInstead": [
{
"when": "the result of what the user just did — saved, sent, deleted",
"use": "Toast",
"why": "it comes and goes by itself; a notification waits in the list"
},
{
"when": "a notice about the whole product — maintenance, a trial ending",
"use": "Banner",
"why": "it is seen on every page without opening anything"
},
{
"when": "the history of one record — who changed it and when",
"use": "List",
"why": "an activity log has nothing to mark as read; Timeline, when it ships, is the record's history"
}
],
"composition": {
"order": [
"Button",
"Popover",
"NotificationsPanel"
],
"note": "The bell is a Button whose name says the count — \"Notifications, 3 unread\" — and opens a Popover titled Notifications, lg, whose content is the panel. On a phone use a Drawer instead. The caller keeps the list and updates it from `onReadChange` and `onMarkAllRead`; `href` makes a title a link, `onOpen` a button. With `notifications` empty it shows \"You’re all caught up\"; with `isLoading`, rows of Skeleton and \"Loading notifications\" announced.",
"example": "}>"
},
"a11y": {
"requires": [
"the container's name — the Popover's or Drawer's `title`, \"Notifications\"",
"the bell's name includes the unread count, since its badge is not read",
"`labels` — translated, with `unread` as a function of the count"
],
"guarantees": [
"an unread notification's title begins \"Unread:\" for a screen reader; the dot and weight are not the only signal",
"the unread count is in words in the bar",
"each group is a section named by its heading, so a screen reader can jump between days",
"each toggle stays where it is and swaps Mark as read for Mark as unread — focus is never on something that vanishes",
"Mark all as read moves focus to the first notification before it goes",
"every change is announced in a status region that is always mounted",
"groups are counted from the local calendar day, not 24-hour windows; each has a machine-readable