Content block

Review summary

A bordered label and value summary for a review step. On a phone values wrap under their labels, left-aligned.

Copy the bindings from: app/features/forms/routes/dashboard/submitted-forms.kind/components/new-application-review-step.tsx
Route: /dashboard/accounts/:acctId/sites/:siteId/submitted-forms/:kind

4a. Empty summary

An empty summary keeps the same border as the populated list.

Route: /dashboard/accounts/:acctId/sites/:siteId/submitted-forms/:kind

No details to review.

<ReviewSummary
  rows={[]}
/>

4a. One value

A label and value inside the bordered summary.

Route: /dashboard/accounts/:acctId/sites/:siteId/submitted-forms/:kind

Applicant: Morgan Rivera

<ReviewSummary
  rows={[
    {
      label: 'Applicant',
      value: 'Morgan Rivera',
    },
  ]}
/>

4a. Application review

The New application wizard summary: muted labels, stronger values and dividers between rows.

Route: /dashboard/accounts/:acctId/sites/:siteId/submitted-forms/:kind

Applicant: Morgan Rivera
Email: [email protected]
Source: Manually Create Applicant
Form: Adoption Application
Animals: Nugget, Waffle
Application documents: 2 uploaded
Status: Not Reviewed

<ReviewSummary
  rows={[
    {
      label: 'Applicant',
      value: 'Morgan Rivera',
    },
    {
      label: 'Email',
      value: '[email protected]',
    },
    {
      label: 'Source',
      value: 'Manually Create Applicant',
    },
    {
      label: 'Form',
      value: 'Adoption Application',
    },
    {
      label: 'Animals',
      value: 'Nugget, Waffle',
    },
    {
      label: 'Application documents',
      value: '2 uploaded',
    },
    {
      label: 'Status',
      value: 'Not Reviewed',
    },
  ]}
/>

4a. Long and multiline values

On a phone every value sits under its label, left-aligned and wrapping. Line breaks are preserved.

Route: /dashboard/accounts/:acctId/sites/:siteId/submitted-forms/:kind

Animals: Cedar, Brie, Nugget, Waffle, Clementine, Luna and Pepper
Internal note: Available for weekend transport. Prefers email before 5 PM.

<ReviewSummary
  rows={[
    {
      label: 'Animals',
      value: 'Cedar, Brie, Nugget, Waffle, Clementine, Luna and Pepper',
    },
    {
      label: 'Internal note',
      value: 'Available for weekend transport.\nPrefers email before 5 PM.',
    },
  ]}
/>