LineItem

One line of a cart: name, variant, quantity stepper and price.

SourcePackage @weft-js/warp

Preview

tsx

import { state } from '@weft-js/core'import { Card, LineItem, Stack, Text, Toaster } from '@weft-js/warp'export function Cart() {  const cart = state(SHOP_CART)  return (    <Card>      <Stack gap="related">        {cart.value.map(line => <LineItem key={line.id} line={line} cart={cart} />)}        {cart.value.length === 0 && <Text subtle>Your cart is empty.</Text>}      </Stack>      <Toaster />    </Card>  )}const SHOP_CART = [  { id: 'key', name: 'Security key, USB-C', variant: 'Pack of 2', price: 58, quantity: 1 },  { id: 'hoodie', name: 'weft hoodie', variant: 'Graphite · M', price: 64, quantity: 1 },  { id: 'stickers', name: 'Sticker sheet', variant: 'Deploy on Friday', price: 6, quantity: 2 },]

Installation

npm install @weft-js/warp

Usage

tsx

import { LineItem } from '@weft-js/warp'

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`line`	`CartLine`	—	The line to draw.
`cart`	`State<CartLine[]>`	—	The whole cart, as a state.
`currency`	`string`	—	A currency code.
`locale`	`string`	—	The locale for the amounts.
`problem`	`unknown`	—	A critical badge, such as Out of stock.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="line-item"] [data-part="thumb"]

thumbprice

RelatedCart drawer Checkout