Questions

@sushindustries/ui

The questions a page expects to be asked, written beside the prose that provokes them and answerable in place.

6 min read
View as MarkdownEdit on GitHub

Props

PropTypeDefaultDoes
heading?string-What to call the list. A heading rather than a hard-coded string because "Common questions" and "Try asking" are different promises.
questionsQuestionsThe questions a page expects to be asked. Given an onAsk, each one is a button that puts itself to an assistant; without it, a plain list.@sushindustries/ui · contentreadonly string[]-Empty renders nothing, heading included. Each question is its own key, so duplicates collide.
onAsk?(question: string) => void-Put the question to something that can answer it. Given this, each entry is a button; without it, a list item.
level?2 | 3 | 42Heading level, so the page outline stays correct. Defaults to h2.

Notes

onAsk is the only thing that changes what renders - given it, each question is a <button>; without it, a <span data-static="true">. There's no prop to force one or the other independently of whether a handler exists.

questionsQuestionsThe questions a page expects to be asked. Given an onAsk, each one is a button that puts itself to an assistant; without it, a plain list.@sushindustries/ui · content is keyed by its own string, so two identical questions in one list collide and React only renders one. That's a content mistake to fix in the list, not something to route around with an index key.