CartDrawer
The cart in a side sheet, with quantities, the subtotal and Checkout.
SourcePackage @kerf-js/veneer
Preview
tsx
import { state } from '@kerf-js/core'import { CartButton, CartDrawer, Stack, Text, Toaster} from '@kerf-js/veneer'export function Shop() { const cart = state(SHOP_CART) const open = state(false) const placed = state(false) return ( <> <Stack gap="related" align="center" > <CartButton count={cart.value.reduce( (n, line) => n + line.quantity, 0, )} onClick={() => (open.value = true)} /> <Text subtle> {placed.value ? 'On to checkout.' : 'Open the cart, change a quantity.'} </Text> </Stack> <CartDrawer open={open} cart={cart} onCheckout={() => (placed.value = true)} /> <Toaster /> </> )}const SHOP_CART = [ { id: 'key', name: 'Security key, USB-C', variant: 'Pack of 2', price: 58, quantity: 1, }, { id: 'hoodie', name: 'Kerf hoodie', variant: 'Graphite · M', price: 64, quantity: 1, }, { id: 'stickers', name: 'Sticker sheet', variant: 'Deploy on Friday', price: 6, quantity: 2, },]Installation
npm install @kerf-js/veneerUsage
tsx
import { CartDrawer } from '@kerf-js/veneer'Accessibility
- This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and veneer's parts keep their roles and labels.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
open | State<boolean> | — | Whether it shows. You own this state. |
cart | State<CartLine[]> | — | The lines, as a state. |
currency | string | — | A currency code. |
locale | string | — | The locale for the amounts. |
| Event | Type | Default | Description |
|---|---|---|---|
onCheckout | () => void | — | Called after the drawer closes. |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="stack"] [data-part="total"]
total
RelatedCart buttonLine itemCheckout