Component library

Showing 1 component in the workshop kit with role compare.

Narrative

<BeforeAfter>

workshopCompareNarrative

Explicit current-state vs proposed-state comparison block.

When to use: Use to contrast the as-is process with the to-be process for one specific flow. Most reports have 1–2 of these maximum.

Preview

Today (manual)

Invoice arrives by email, forwarded to AP shared inbox.
AP coordinator opens PDF, retypes header data into ERP.

After Wave 1 (Lunnoa-led)

Lunnoa agent receives the invoice, extracts header and lines.
Three-way match runs automatically; clean invoices post.

Prop	Type	Notes
beforeTitle	string	Optional. Default: `"Today"`. Label above the left card.
before	ReactNode	Required. Current-state content (often a <ul>).
afterTitle	string	Optional. Default: `"After"`. Label above the right card.
after	ReactNode	Required. Proposed-state content.

Examples

<BeforeAfter
    beforeTitle="Today (manual)"
    afterTitle="After Wave 1 (Lunnoa-led)"
    before={
        <ul>
            <li>Invoice arrives by email, forwarded to AP shared inbox.</li>
            <li>AP coordinator opens PDF, retypes header data into ERP.</li>
        </ul>
    }
    after={
        <ul>
            <li>Lunnoa agent receives the invoice, extracts header and lines.</li>
            <li>Three-way match runs automatically; clean invoices post.</li>
        </ul>
    }
/>