Approval stack
Who has to say yes, carried by icons and words.
Why icons rather than colour
v1 encoded the planning outcome in hue: a green verdict meant accepted development, a red one meant impact assessable. That worked until colour had to do anything else — at which point a failed network request drawn in the app's error red read as an impact-assessable verdict, and a green success toast read as a planning approval.
So v2 splits them. Status colour is generic and means what it means in any product. What approvals a property needs is CONTENT, and it is carried here — in neutral ink, legible in pure greyscale.
Try it
Toggle the authorities and watch the stack. The order never changes, because the order is what the stack means.
stackLabel() → "Building + council"
Turn everything off and the stack collapses to "No approval needed" on its own. That is not a special case in the template — stackFor() returns it, because "no approval" is the absence of the others rather than a fifth authority, and it never stacks.
Inline
In a row, a card or a table cell, a single 13px icon and label stands in for the full stack. The highest authority wins the slot, because it is the one that decides how hard the project is.
Showing building for something that also needs public notice would understate it, which is why the choice is "highest" rather than "first".
Rules
- Fixed order, always: building → council → public notification → state. The stack reads left to right as "and then", so it is not a sort key.
- "No approval" never stacks.
- Tiles are 26px, neutral ink, side by side with a 4px gap — never overlapped, so every authority stays fully legible.
- Icons are never coloured. The words beside the stack carry the verdict.
- One accessible name for the whole stack. Announcing four icon names in sequence gives a screen-reader user the parts and not the answer.