Passer au contenu principal

OrderSummary

Deprecated

Compact order summary — line items + total only. Used in cart drawer and confirmation. Superseded by checkoutsummary.

Categorymolecules
Sourcepatterns/molecules/ordersummary.html
AI HintUse for grouped UI patterns. Combine atoms into functional units.

Order line-item summary.

OrderSummary

Commerce — Family 7

Order line-item summary.

Usage

Order line-item summary. Refer to the DS component index for full prop details.

import { OrderSummary } from '@epasslive/design-system'

Props

Preview

OrderSummary

Prop
Type
Required
Default
Description
items
OrderItem[]
Required
—
No description.
total
number
Required
—
No description.
currency
string
Required
—

ISO 4217

Quick use:<OrderSummary />

Accessibility

ARIA roleregion

Type

1 rule

NASA Rule 7

items, total, currency all required; currency must be 3 chars (NASA Rule 7)

ARIA

1 rule

WCAG 1.3.1

<dl> with description-list semantics; totals announced

Usage

Import

tsxSnippet
import { OrderSummary } from "@epasslive/design-system"

Example 1

tsxSnippet
<OrderSummary />

Example 2

tsxSnippet
<OrderSummary variant="default" />

Anti-patterns

— Do not hardcode data in molecules

— Avoid complex business logic in molecules

Design System v4.1.0 | ePassLive