Opening Status Indicator
Loading playground
Overview
OpeningStatusIndicator is the open/closed atom. It takes an OpeningHours value and renders a small bold label colored by the --success-11 token when open or --red-11 when closed. The label text comes from the openingStatus.open and openingStatus.closed i18n keys.
The component subscribes to the shared useNow() clock under the hood, so the label flips automatically when the next state-change time passes. Pass now to override the clock for tests and Storybook.
Use it on its own when only the open/closed state matters (a row of store badges on a category page, an inline indicator next to a header logo). Reach for OpeningStatus when you also want the next state-change one-liner.
Key Business & UX Benefits
- Token-driven success and red colors keep "open" and "closed" semantically consistent across light, dark, and brand themes.
- One atom shared across location-card lists, store badges, and headers stops each surface from drawing its own pill with slightly different colors.
- Reactive against the shared clock, so a store list rendered before opening time flips to "Open" the second the schedule says so, without a page refresh.
Feature List
- Open vs. closed driven entirely by the `OpeningHours` value and the shared `useNow()` clock
- Token-driven colors (`--success-11` open, `--red-11` closed) stay semantic across themes
- Text comes from the `openingStatus.open` and `openingStatus.closed` i18n keys, so localization works without per-instance overrides
- Respects the schedule's IANA timezone, so wall-clock comparisons stay correct across shopper locales
- Optional `now` prop overrides the clock for tests and Storybook
API Reference
| Prop | Default | Type |
|---|---|---|
openingHoursrequired | OpeningHours { timeZone, schedule, exceptions } | |
now | objectOverride for tests / Storybook only. Production uses the shared |
Related
OpeningStatus: the indicator paired with the next state-change one-liner.OpeningStatusDetail: the detail one-liner on its own.OpeningHourstype: the shape the component consumes.