CartWidget

Component

Storybook

Figma Demo

Guidelines

Cart widgets allow users to add items to their cart either in single increments via add/remove buttons, or by inputting a value in the field.

Interactions

Value = 0

• CartWidget value is rendered in placeholder text

• Minus button is disabled

Value = greater than 0, less than 999

• Any non-zero value should be text-black

• Both minus and plus buttons are enabled

Value = 999 (max)

• Plus button is disabled

Usage

Cart widgets should always be paired with pricing information.

Best Practices

• CartWidget value should start at 0 using placeholder text
• Minus button should be disabled
• Any non-zero value should be text-black
• Minus button should be enabled
• Max value of 999
• Plus button should be disabled

Component Specs

API

• disabled: Boolean - Disables the cart widget. Default is false.
• max: Number - The maximum value of the cart widget. Default is 999.
• min: Number - The minimum value of the cart widget. Default is 0.
• quantity: Number - The quantity of the cart widget. Default is 1.
• testId: String - The test id of the cart widget.
• value: Number - The value of the cart widget. Default is 0.
• handleChange: Function - The function to handle the change event of the cart widget.
• handleInput: Function - The function to handle the input event of the cart widget.
• handleMinus: Function - The function to handle the minus event of the cart widget.
• handlePlus: Function - The function to handle the plus event of the cart widget.

Example

<script>
	import { CartWidget } from '@getprovi/craft-svelte';
	import { cartStore } from 'path-to-store';
</script>

<CartWidget bind:value={$cartStore.items} />
<CartWidget disabled />

Types

interface Props extends HTMLInputAttributes {
	quantity?: number;
	testId?: string | undefined;
	value?: number;
	handleChange?: () => void | undefined;
	handleInput?: () => void | undefined;
	handleMinusClick?: () => void | undefined;
	handlePlusClick?: () => void | undefined;
}