Values Accordion Team Block for React

Edit VALUES at the top of the file. A value is an id, a title (the habit), a behaviour sentence, a quote and the speaker and role who said it. The numbers beside the titles, the "5 habits" in the header and the faces at the foot of the first column all come from that list, so adding a value needs no other change.

It is a single-open accordion that always keeps one value open. That is on purpose: the block keeps roughly the same height and always shows a quote. Opening another value closes the first. To let people close everything, allow the accordion to collapse (remove the guard in change that ignores an empty array).

Each value is a button inside its own h3 under the section's h2, and the open one says it is expanded. Tab moves between the rows and Enter or Space opens one. This library leaves the arrows to Tab: every row is a tab stop. The quote is a real blockquote in a figure, with the speaker in its caption, and the faces at the foot of the first column are decoration.

Yes: closed rows stay in the document and are hidden until found, so find-in-page opens the row that matches.

A little, by a line or two, because the quotes differ in length. The accordion is the last thing in the block, so nothing above it moves; the content below follows its end.

Below the lg breakpoint the title stacks above the rows and a rule with + marks takes the divider's place; the faces at the foot of the header move under the sentence. Nothing scrolls sideways at 320 pixels, and a long habit wraps onto two lines.