Approval Card

Usage

import { ApprovalCard } from '@wdzyi/ui';

<ApprovalCard
  title='Walkthrough request'
  questions={[
    { id: 'evaluating', label: 'Evaluating', question: 'What are you evaluating?', options: ['A role', 'A product'] },
    { id: 'focus', label: 'Focus', question: 'What should it cover?', options: ['Trading', 'AI'], multiple: true },
  ]}
  labels={{ submit: 'Send request' }}
  onSubmit={(answers) => send(answers)}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

questionsApprovalCardQuestion[]

Each has an id, the question, a short label for the result, its options, multiple for as many as apply, and other for a row of one’s own words, with its placeholder.

titlestring = 'Your answers'

Heads the answers at the end.

answers, defaultAnswersApprovalCardAnswers

The answers by question id, as the options picked and anything written in. Pass answers to hold them yourself, or defaultAnswers to start it somewhere.

onAnswersChange(answers) => void

Called with all the answers each time one changes.

step, onStepChangenumber, (step) => void

The question showing, from 0, where one past the last is the result. Hold it to lead the card yourself.

onSubmit(answers) => void

The action at the end. Once it’s pressed, the card says it’s done, with a way to start over.

onDismiss() => void

Adds a close button in the corner.

labelsPartial<ApprovalCardLabels>

The words on it: next, skip, submit, done, again, skipped, change and dismiss.

Notes

• One choice moves on by itself 480ms after it’s picked, long enough to see it land. Several wait for Continue, and the row for one’s own words takes Enter.
• Every question shares one cell of a grid, so the card is as tall as its tallest question from the start, and its buttons never move under the pointer.
• Up and down move through the options, and the number keys pick them. Moving on keeps the keyboard on the new question, and each question is announced as it arrives.
• This demo holds answers and step, and fills them in itself at a person’s pace, taking a second or two to read each question, until you press something. Its action opens this site’s message form.
• With reduced motion, the questions change without the blur, and nothing glides or rolls.