Commitments Ledger About Block for React

They are COMMITMENTS at the top of the file: each has a promise, a detail that says what the percentage counts, a value from 0 to 100, an owner and team, and checked, a relative phrase such as "2 weeks ago". The word is worked out from the value in stateOf: 100 is Kept, 60 and over is On track, anything lower is Slipping. The tally in the header is counted from the same list, so the two always agree.

When every row has a coloured marker, none of them stands out, and green and red cause trouble for readers who can't tell the two apart. Here the state is always written as a word, and the one state that needs attention adds a small dot. The progress bars are your foreground colour, so your primary colour stays free for the page's one call to action.

The list is an ordered list, each promise is an h3 and its details are a description list (progress, owner, checked), so a row reads as "Progress: Kept, 100%", then the owner and the date. The progress bar is decorative because the word and the percent say the same thing, and the status dot is hidden for the same reason. There are no controls, and the block has no state, so it renders on the server.

"Checked 3 days ago" is only true on the day you write it. Update the checked phrases whenever someone checks a promise, or compute them from a date in your own data with a relative-time formatter. This block takes the phrase as text on purpose, so it needs no year and no clock.

The rows are an ordered list with a hairline between each pair, from rail to rail. Guides draws the band's top rule, with a + on each rail, and the page's rails come from the spine. The ledger ends the block: the column has no bottom padding and there is no rule under the last row, because the next block's top rule is its foot.

Below lg each row stacks: the promise and its detail, then the progress across the full width, then the owner and the check date side by side. From sm the three details sit on one line under the promise, and from lg they sit beside it. The header's tally goes under the heading on a phone, and nothing scrolls sideways at 320 pixels.