Build / Molecules

BookingSummary

molecule

Recap of what a person has chosen so far in a booking flow.

Carries the decisions forward so the details form and the confirmation both restate the booking rather than assuming it was memorised. Items can expose an edit control, which is what keeps the recap from being a dead end — the flow stays correctable at the point the mistake is noticed.

import { BookingSummary } from '@meetcard/deck'

Example

<BookingSummary items={[ { label: 'Thursday, September 3', detail: '9:30 AM · 30 min', onEdit: back }, { label: 'Video call', detail: 'Link sent with your confirmation' }, ]} />

Stories

Every preview below is the real component, rendered in this page from the same story Storybook runs. The width control resizes each preview's container; CSS media queries still follow the browser window, so breakpoint behaviour is worth checking in Storybook.

Default

Source

const Default = () => <BookingSummary
    items={[
      {
        icon: <CalendarIcon />,
        label: 'Thursday, September 3',
        detail: '9:30 AM · 30 min',
        onEdit: fn(),
        editLabel: 'Change date and time',
      },
      {
        icon: <VideoIcon />,
        label: 'Video call',
        detail: 'Link sent with your confirmation · America/Denver',
      },
    ]} />;

On the confirmation screen the recap is read-only — nothing left to edit.

Read Only

Source

const ReadOnly = () => <BookingSummary
    items={[
      {
        icon: <CalendarIcon />,
        label: 'Thursday, September 3',
        detail: '9:30 AM · 30 min',
      },
      {
        icon: <VideoIcon />,
        label: 'Video call',
        detail: 'Link sent with your confirmation · America/Denver',
      },
    ]} />;

Props

Prop	Type	Default	Description
`items`required	`BookingSummaryItem[]`	—	—
`className`	`string`	—	—
`label`	`string`	`'Booking summary'`	Accessible name for the summary region.