Collapsible Details Banner Block for React

Edit SERVICES at the top of the file: each entry is a name and degraded, true for a warning dot and "Degraded", false for a foreground dot and "Operational". The state is always written as well as drawn, so it doesn't depend on colour. A list of four fills the two-by-two grid; for more, let it grow rows, and keep the open banner under about 430 pixels.

STARTED_AGO_MS sets it as a duration, and the block adds it to the moment the page first runs in the browser, so it says "32 minutes ago" when you arrive and keeps counting, and it never shows a calendar date that goes stale. Until the browser runs, the server's page says "Started recently". In your product, pass the incident's real start time to Relative Time Text instead.

The trigger is a button inside the block's heading (h2), so the heading lists the banner among the page's headings and the button says whether it is expanded. Its name is the summary line and the badge: "Elevated error rates in US-East Investigating". It opens with Enter or Space, and its aria-controls points at the panel.

Give Collapsible the defaultOpen prop.

The poster shows it closed, which is how a banner should arrive; open it by default only on the incident's own page.

The card fades up once on load, the panel's height eases open and the chevron turns over, all with CSS. With reduced motion turned on the panel opens at once and nothing animates.

The summary wraps to two lines when it must and the services stay two by two. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the dot, the badge, the chevron and the arrow mirror.