Status Chip Subscribe Navbar Block for React

Edit COMPONENTS at the top of the file: an id, a name, a state ("operational", "degraded" or "outage") and a note shown while the component is affected. The chip's dot (the warning token only when something is affected), its words in full and short, and the popover's rows are all derived from it, so setting the one degraded component to "operational" turns the chip into "All systems operational". The components are made up for the demo.

Email and Webhook check what you typed (an address with an at sign and a dot; an https:// endpoint) and show a problem beside the field, or a line saying the channel was added. Nothing is sent or stored: the line says so, and the form starts empty each time the popover opens. Feed is read-only: the URL and a copy button that says "Feed URL copied". Replace submit with your own call. The three panes sit in one cell with the other two unseen, so the popover keeps its height on every channel.

The chip is a button named "Components: 1 component affected" and "Get updates" a button; both say whether their popover is open and Escape closes it and returns focus to them. State is told in words in every row ("Operational", "Degraded performance"), the icons are decoration and the warning colour only tints an icon. The channel switch is a labelled group of three buttons, the field labels are real labels, a problem is announced and linked to its field, and the result line is a polite status.

Below the lg breakpoint a menu button opens a sheet from the top with the links; below md, "Get updates" moves into the sheet as the same form, shown inline because a popover opened from inside a modal sheet fights its focus trap. The chip stays in the bar in a short form ("1 affected") and the wordmark shrinks to its icon on very narrow screens; nothing wraps at 320 pixels. Escape or the close button closes the sheet and focus goes back to the menu button.

Yes. The bar mirrors and the popovers open under their buttons' end edge. Addresses, endpoints and the feed URL are always read left to right, as web addresses are, and the wordmark keeps its direction. Wrap the block in your direction provider (the catalog's DirectionProvider) so the popovers and the sheet follow the page.

The popovers fade in, the sheet slides down and the copy button's icon swaps for a check. With reduced motion the popovers and the sheet appear without animating. The status dot and the list are still.