Recommendation Card

Usage

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

<RecommendationCard
  title='Not sure which plan to choose?'
  options={[
    { id: 'team', name: 'Team', meta: '$12 a seat', signal: 3, label: 'Best match', text: 'For 14 people across three workspaces, Team fits best.' },
    { id: 'starter', name: 'Starter', meta: '$6 a seat', signal: 2, label: 'Good match', text: 'If only some of the team need a seat, Starter costs less.' },
  ]}
  doneAction={(option) => `${option.name} plan chosen`}
  onAccept={(id) => choosePlan(id)}
  onUndo={(id) => clearPlan(id)}
/>

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

Props

titlestring

The question it answers, at the top.

optionsRecommendationCardOption[]

The suggestions, best first. Each has an id, the text that says why, a name and a meta for the list, a signal from 1 to 3 bars, and a label for what the signal means. The text can be a function of whether it’s been chosen, so a name in it can take a tick.

value, defaultValuestring = the first

The one on the card. Leave value out and it keeps track itself.

onChange(id: string) => void

Called with the option that was picked from the others.

open, defaultOpenboolean = false

Whether the others are showing. Leave open out and its own button does it.

onOpenChange(open: boolean) => void

Called when the drawer opens or shuts.

action, doneActionstring, string | ((option) => string) = 'Choose', the name and chosen

The foil button, and the line that takes the foot’s place once it’s pressed, such as Team plan chosen. A function is given the option.

onAccept(id: string) => void

Called with the option on the card when the foil button is pressed.

undo, onUndostring, (id: string) => void = 'Undo'

The text button on that line, and what’s called when it puts the choice back.

alternatives, othersLabelstring = 'Alternatives', 'Other options'

The button that shows the others, and the heading over them.

Notes

• The drawer opens by the grid’s rows, so the card grows to fit however many others there are. Picking one shuts it and moves the focus to the foil button, which is the next thing to do.
• The new sentence comes up out of a blur, the bars fill or empty one after another, and the word for the match morphs into the next, with Morph Text. The sentence keeps two lines’ room, so the foot under it doesn’t move as it changes over.
• Choosing settles the foot in place. Its height eases from 56px to 44px over 380ms while the buttons go up and out of a blur in 160ms, and the line comes up 80ms later, its green tick drawing itself. The foil and Alternatives go with them, since the choice is made, and Undo plays it all back. Until the foot has changed over, another press in the same place is ignored, so a double click can’t undo what it chose.
• Focus moves from Choose to Undo and back, and the choice is announced. It sends select when another option takes the card’s place, open and close for the drawer, and success on choosing. Under 340px wide, Alternatives comes down to its chevron, under 300px the word for the match goes too, and under 380px the list of the others drops its labels.
• With reduced motion, the foot changes height at once, the two cross-fade in place, and the ticks are simply there.