@adobe-commerce/elsie 1.1.0-alpha6 → 1.1.0-alpha9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/CartItem/CartItem.tsx +331 -331
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adobe-commerce/elsie",
3
- "version": "1.1.0-alpha6",
3
+ "version": "1.1.0-alpha9",
4
4
  "license": "SEE LICENSE IN LICENSE.md",
5
5
  "description": "Domain Package SDK",
6
6
  "engines": {
package/src/components/CartItem/CartItem.tsx CHANGED
@@ -9,7 +9,7 @@
9
9
 
10
10
  import { FunctionComponent, VNode } from 'preact';
11
11
  import { HTMLAttributes, useContext } from 'preact/compat';
12
- import {classes, VComponent} from '@adobe-commerce/elsie/lib';
12
+ import { classes, VComponent } from '@adobe-commerce/elsie/lib';
13
13
  import {
14
14
  Button,
15
15
  CartItemSkeleton,
@@ -25,7 +25,7 @@ import { Trash } from '@adobe-commerce/elsie/icons';
25
25
  import '@adobe-commerce/elsie/components/CartItem/CartItem.css';
26
26
 
27
27
  export interface CartItemProps
28
- extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'loading'> {
28
+ extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'loading'> {
29
29
  ariaLabel?: string;
30
30
  image?: VNode;
31
31
  title?: VNode;
@@ -54,35 +54,35 @@ export interface CartItemProps
54
54
  }
55
55
 
56
56
  export const CartItem: FunctionComponent<CartItemProps> = ({
57
- className,
58
- children,
59
- ariaLabel,
60
- image,
61
- title,
62
- price,
63
- taxIncluded = false,
64
- taxExcluded = false,
65
- total,
66
- totalExcludingTax,
67
- sku,
68
- configurations,
69
- warning,
70
- alert,
71
- discount,
72
- savings,
73
- actions,
74
- quantity,
75
- description,
76
- attributes,
77
- footer,
78
- loading = false,
79
- updating = false,
80
- quantityType,
81
- dropdownOptions,
82
- onQuantity,
83
- onRemove,
84
- ...props
85
- }) => {
57
+ className,
58
+ children,
59
+ ariaLabel,
60
+ image,
61
+ title,
62
+ price,
63
+ taxIncluded = false,
64
+ taxExcluded = false,
65
+ total,
66
+ totalExcludingTax,
67
+ sku,
68
+ configurations,
69
+ warning,
70
+ alert,
71
+ discount,
72
+ savings,
73
+ actions,
74
+ quantity,
75
+ description,
76
+ attributes,
77
+ footer,
78
+ loading = false,
79
+ updating = false,
80
+ quantityType,
81
+ dropdownOptions,
82
+ onQuantity,
83
+ onRemove,
84
+ ...props
85
+ }) => {
86
86
  const { locale } = useContext(UIContext);
87
87
 
88
88
  const labels = useText({
@@ -100,368 +100,368 @@ export const CartItem: FunctionComponent<CartItemProps> = ({
100
100
  if (loading) return <CartItemSkeleton />;
101
101
 
102
102
  const quantityComponent =
103
- quantityType === 'dropdown' ? (
104
- <Picker
105
- className={classes(['dropin-cart-item__quantity__picker'])}
106
- value={String(quantity)}
107
- name="quantity"
108
- aria-label={labels.quantity}
109
- disabled={updating}
110
- variant={'primary'}
111
- options={dropdownOptions}
112
- handleSelect={(event) =>
113
- onQuantity?.(Number((event.target as HTMLSelectElement).value))
114
- }
115
- />
116
- ) : (
117
- <Incrementer
118
- className={classes(['dropin-cart-item__quantity__incrementer'])}
119
- value={quantity}
120
- min={1}
121
- onValue={(value) => onQuantity?.(Number(value))}
122
- name="quantity"
123
- aria-label={labels.quantity}
124
- disabled={updating}
125
- />
126
- );
103
+ quantityType === 'dropdown' ? (
104
+ <Picker
105
+ className={classes(['dropin-cart-item__quantity__picker'])}
106
+ value={String(quantity)}
107
+ name="quantity"
108
+ aria-label={labels.quantity}
109
+ disabled={updating}
110
+ variant={'primary'}
111
+ options={dropdownOptions}
112
+ handleSelect={(event) =>
113
+ onQuantity?.(Number((event.target as HTMLSelectElement).value))
114
+ }
115
+ />
116
+ ) : (
117
+ <Incrementer
118
+ className={classes(['dropin-cart-item__quantity__incrementer'])}
119
+ value={quantity}
120
+ min={1}
121
+ onValue={(value) => onQuantity?.(Number(value))}
122
+ name="quantity"
123
+ aria-label={labels.quantity}
124
+ disabled={updating}
125
+ />
126
+ );
127
127
 
128
128
  return (
129
- <div
130
- {...props}
131
- className={classes([
132
- 'dropin-cart-item',
133
- ['dropin-cart-item--updating', updating],
134
- className,
135
- ])}
136
- >
137
- {updating && (
138
- <ProgressSpinner
139
- className={classes(['dropin-cart-item__spinner'])}
140
- ariaLabel={
141
- ariaLabel
142
- ? labels.updating?.replace('{product}', ariaLabel)
143
- : labels.updatingDefault
144
- }
145
- />
146
- )}
147
- <div className="dropin-cart-item__wrapper">
148
- {
149
- /* Image */
150
- image && (
151
- <VComponent
152
- node={image}
153
- className={classes(['dropin-cart-item__image'])}
154
- />
155
- )
156
- }
157
-
158
- {
159
- /* Title */
160
- title && (
161
- <VComponent
162
- node={title}
163
- className={classes([
164
- 'dropin-cart-item__title',
165
- ['dropin-cart-item__title--edit', !!onQuantity || !!onRemove],
166
- ])}
167
- />
168
- )
129
+ <div
130
+ {...props}
131
+ className={classes([
132
+ 'dropin-cart-item',
133
+ ['dropin-cart-item--updating', updating],
134
+ className,
135
+ ])}
136
+ >
137
+ {updating && (
138
+ <ProgressSpinner
139
+ className={classes(['dropin-cart-item__spinner'])}
140
+ ariaLabel={
141
+ ariaLabel
142
+ ? labels.updating?.replace('{product}', ariaLabel)
143
+ : labels.updatingDefault
169
144
  }
145
+ />
146
+ )}
147
+ <div className="dropin-cart-item__wrapper">
148
+ {
149
+ /* Image */
150
+ image && (
151
+ <VComponent
152
+ node={image}
153
+ className={classes(['dropin-cart-item__image'])}
154
+ />
155
+ )
156
+ }
157
+
158
+ {
159
+ /* Title */
160
+ title && (
161
+ <VComponent
162
+ node={title}
163
+ className={classes([
164
+ 'dropin-cart-item__title',
165
+ ['dropin-cart-item__title--edit', !!onQuantity || !!onRemove],
166
+ ])}
167
+ />
168
+ )
169
+ }
170
+
171
+ {
172
+ /* Description */
173
+ description && (
174
+ <VComponent
175
+ node={description}
176
+ className={classes(['dropin-cart-item__description'])}
177
+ />
178
+ )
179
+ }
180
+
181
+ {
182
+ /* SKU */
183
+ sku && (
184
+ <VComponent
185
+ node={sku}
186
+ className={classes(['dropin-cart-item__sku'])}
187
+ />
188
+ )
189
+ }
190
+ <div className={classes(['dropin-cart-item__savings__wrapper'])}>
191
+ {/* Discount amount */}
192
+ {discount && (
193
+ <VComponent
194
+ node={discount}
195
+ className={classes([
196
+ 'dropin-cart-item__discount',
197
+ 'dropin-cart-item__discount__large-screen',
198
+ ])}
199
+ />
200
+ )}
170
201
 
171
- {
172
- /* Description */
173
- description && (
174
- <VComponent
175
- node={description}
176
- className={classes(['dropin-cart-item__description'])}
177
- />
178
- )
179
- }
202
+ {/* Savings amount */}
203
+ {savings && (
204
+ <VComponent
205
+ node={savings}
206
+ className={classes([
207
+ 'dropin-cart-item__savings',
208
+ 'dropin-cart-item__savings__large-screen',
209
+ ])}
210
+ />
211
+ )}
212
+ </div>
180
213
 
181
- {
182
- /* SKU */
183
- sku && (
184
- <VComponent
185
- node={sku}
186
- className={classes(['dropin-cart-item__sku'])}
187
- />
188
- )
189
- }
190
- <div className={classes(['dropin-cart-item__savings__wrapper'])}>
191
- {/* Discount amount */}
192
- {discount && (
193
- <VComponent
194
- node={discount}
195
- className={classes([
196
- 'dropin-cart-item__discount',
197
- 'dropin-cart-item__discount__large-screen',
198
- ])}
199
- />
200
- )}
214
+ {/* Product Attributes */}
215
+ {attributes && (
216
+ <div className={classes(['dropin-cart-item__attributes'])}>
217
+ <VComponent node={attributes} />
218
+ </div>
219
+ )}
201
220
 
202
- {/* Savings amount */}
203
- {savings && (
204
- <VComponent
205
- node={savings}
221
+ {
222
+ /* Configurations */
223
+ configurations && (
224
+ <ul className={classes(['dropin-cart-item__configurations'])}>
225
+ {Object.entries(configurations).map(([key, value]) => (
226
+ <li
227
+ key={key}
228
+ className={classes([
229
+ 'dropin-cart-item__configurations__item',
230
+ ])}
231
+ >
232
+ {key}:{' '}
233
+ <strong
206
234
  className={classes([
207
- 'dropin-cart-item__savings',
208
- 'dropin-cart-item__savings__large-screen',
235
+ 'dropin-cart-item__configurations__item__value',
209
236
  ])}
210
- />
211
- )}
212
- </div>
213
-
214
- {/* Product Attributes */}
215
- {attributes && (
216
- <div className={classes(['dropin-cart-item__attributes'])}>
217
- <VComponent node={attributes} />
218
- </div>
219
- )}
220
-
221
- {
222
- /* Configurations */
223
- configurations && (
224
- <ul className={classes(['dropin-cart-item__configurations'])}>
225
- {Object.entries(configurations).map(([key, value]) => (
226
- <li
227
- key={key}
228
- className={classes([
229
- 'dropin-cart-item__configurations__item',
230
- ])}
231
- >
232
- {key}:{' '}
233
- <strong
234
- className={classes([
235
- 'dropin-cart-item__configurations__item__value',
236
- ])}
237
- >
238
- {value}
239
- </strong>
240
- </li>
241
- ))}
242
- </ul>
243
- )
244
- }
245
-
246
- {
247
- /* Price */
248
- price && (
249
- <span
250
- className={classes(['dropin-cart-item__price'])}
251
- aria-label={labels.pricePerItem}
252
237
  >
238
+ {value}
239
+ </strong>
240
+ </li>
241
+ ))}
242
+ </ul>
243
+ )
244
+ }
245
+
246
+ {
247
+ /* Price */
248
+ price && (
249
+ <span
250
+ className={classes(['dropin-cart-item__price'])}
251
+ aria-label={labels.pricePerItem}
252
+ >
253
253
  {quantity && !onQuantity && (
254
- <>
254
+ <>
255
255
  <span
256
- className="dropin-cart-item__price__quantity"
257
- aria-hidden={true}
256
+ className="dropin-cart-item__price__quantity"
257
+ aria-hidden={true}
258
258
  >
259
259
  {quantity.toLocaleString(locale)} x{' '}
260
260
  </span>
261
261
 
262
- <div className="dropin-cart-item__sr-only">
263
- {labels.quantity}: {quantity?.toLocaleString(locale)};
264
- </div>
265
- </>
262
+ <div className="dropin-cart-item__sr-only">
263
+ {labels.quantity}: {quantity?.toLocaleString(locale)};
264
+ </div>
265
+ </>
266
266
  )}
267
267
 
268
- <VComponent node={price} role="text" />
268
+ <VComponent node={price} role="text" />
269
269
 
270
- {quantity && quantity > 1 && (
271
- <>
272
- &nbsp;
273
- {labels.each}
274
- </>
275
- )}
270
+ {quantity && quantity > 1 && (
271
+ <>
272
+ &nbsp;
273
+ {labels.each}
274
+ </>
275
+ )}
276
276
 
277
- {taxIncluded && (
278
- <span
279
- data-testid="tax-message"
280
- className="dropin-cart-item__price-tax-message"
281
- >
277
+ {taxIncluded && (
278
+ <span
279
+ data-testid="tax-message"
280
+ className="dropin-cart-item__price-tax-message"
281
+ >
282
282
  &nbsp;
283
- {labels.taxIncluded}
283
+ {labels.taxIncluded}
284
284
  </span>
285
- )}
285
+ )}
286
286
 
287
- {taxExcluded && (
288
- <span
289
- data-testid="tax-message"
290
- className="dropin-cart-item__price-tax-message"
291
- >
287
+ {taxExcluded && (
288
+ <span
289
+ data-testid="tax-message"
290
+ className="dropin-cart-item__price-tax-message"
291
+ >
292
292
  &nbsp;
293
- {labels.taxExcluded}
293
+ {labels.taxExcluded}
294
294
  </span>
295
- )}
295
+ )}
296
296
  </span>
297
- )
298
- }
297
+ )
298
+ }
299
299
 
300
- {/* Quantity */}
301
- <div
302
- className={classes([
303
- 'dropin-cart-item__quantity',
304
- ['dropin-cart-item__quantity--edit', !!onQuantity],
305
- ])}
306
- >
307
- {onQuantity
308
- ? quantityComponent
309
- : quantity && (
300
+ {/* Quantity */}
301
+ <div
302
+ className={classes([
303
+ 'dropin-cart-item__quantity',
304
+ ['dropin-cart-item__quantity--edit', !!onQuantity],
305
+ ])}
306
+ >
307
+ {onQuantity
308
+ ? quantityComponent
309
+ : quantity && (
310
310
  <span
311
- className={classes(['dropin-cart-item__quantity__value'])}
311
+ className={classes(['dropin-cart-item__quantity__value'])}
312
312
  >
313
313
  {labels.quantity}:{' '}
314
314
  <strong className="dropin-cart-item__quantity__number">
315
315
  {Number(quantity).toLocaleString(locale)}
316
316
  </strong>
317
317
  </span>
318
- )}
319
-
320
- {/* Warning */}
321
- {warning && (
322
- <VComponent
323
- node={warning}
324
- className={classes([
325
- 'dropin-cart-item__warning',
326
- 'dropin-cart-item__warning--quantity',
327
- ])}
328
- />
329
- )}
318
+ )}
330
319
 
331
- {/* Alert */}
332
- {alert && (
333
- <VComponent
334
- node={alert}
335
- className={classes([
336
- 'dropin-cart-item__alert',
337
- 'dropin-cart-item__alert--quantity',
338
- ])}
339
- />
340
- )}
320
+ {/* Warning */}
321
+ {warning && (
322
+ <VComponent
323
+ node={warning}
324
+ className={classes([
325
+ 'dropin-cart-item__warning',
326
+ 'dropin-cart-item__warning--quantity',
327
+ ])}
328
+ />
329
+ )}
341
330
 
342
- </div>
331
+ {/* Alert */}
332
+ {alert && (
333
+ <VComponent
334
+ node={alert}
335
+ className={classes([
336
+ 'dropin-cart-item__alert',
337
+ 'dropin-cart-item__alert--quantity',
338
+ ])}
339
+ />
340
+ )}
341
+ </div>
343
342
 
343
+ {actions && (
344
344
  <div className={classes(['dropin-cart-item__actions'])}>
345
345
  {/* Actions */}
346
346
  {actions && (
347
- <VComponent
348
- node={actions}
349
- className={classes(['dropin-cart-item__buttons'])}
350
- />
347
+ <VComponent
348
+ node={actions}
349
+ className={classes(['dropin-cart-item__buttons'])}
350
+ />
351
351
  )}
352
352
  </div>
353
+ )}
353
354
 
354
- {/* Warning */}
355
- {warning && (
356
- <VComponent
357
- node={warning}
358
- className={classes(['dropin-cart-item__warning'])}
359
- />
360
- )}
355
+ {/* Warning */}
356
+ {warning && (
357
+ <VComponent
358
+ node={warning}
359
+ className={classes(['dropin-cart-item__warning'])}
360
+ />
361
+ )}
361
362
 
362
- {/* Alert */}
363
- {alert && (
364
- <VComponent
365
- node={alert}
366
- className={classes(['dropin-cart-item__alert'])}
367
- />
368
- )}
363
+ {/* Alert */}
364
+ {alert && (
365
+ <VComponent
366
+ node={alert}
367
+ className={classes(['dropin-cart-item__alert'])}
368
+ />
369
+ )}
369
370
 
370
- {/* Total */}
371
- <div
372
- className={classes([
373
- 'dropin-cart-item__total',
374
- ['dropin-cart-item__total--edit', !!onRemove],
375
- ])}
376
- >
377
- <div className="dropin-cart-item__row-total__wrapper">
378
- {
379
- /* Total */
380
- total && (
381
- <div className="dropin-cart-item__row-total">
382
- <VComponent node={total} role="text" />
383
- </div>
384
- )
385
- }
371
+ {/* Total */}
372
+ <div
373
+ className={classes([
374
+ 'dropin-cart-item__total',
375
+ ['dropin-cart-item__total--edit', !!onRemove],
376
+ ])}
377
+ >
378
+ <div className="dropin-cart-item__row-total__wrapper">
379
+ {
380
+ /* Total */
381
+ total && (
382
+ <div className="dropin-cart-item__row-total">
383
+ <VComponent node={total} role="text" />
384
+ </div>
385
+ )
386
+ }
386
387
 
387
- {taxIncluded && (
388
- <div className="dropin-cart-item__total-tax-included">
388
+ {taxIncluded && (
389
+ <div className="dropin-cart-item__total-tax-included">
389
390
  <span
390
- data-testid="tax-message"
391
- className={classes(['dropin-cart-item__total-tax-message'])}
391
+ data-testid="tax-message"
392
+ className={classes(['dropin-cart-item__total-tax-message'])}
392
393
  >
393
394
  {labels.taxIncluded}
394
395
  </span>
395
- </div>
396
- )}
397
- </div>
398
- {taxExcluded && (
399
- <div className="dropin-cart-item__total-tax-excluded">
396
+ </div>
397
+ )}
398
+ </div>
399
+ {taxExcluded && (
400
+ <div className="dropin-cart-item__total-tax-excluded">
400
401
  <span
401
- data-testid="tax-message"
402
- className={classes([
403
- 'dropin-cart-item__total-tax-excluded-message',
404
- ])}
402
+ data-testid="tax-message"
403
+ className={classes([
404
+ 'dropin-cart-item__total-tax-excluded-message',
405
+ ])}
405
406
  >
406
407
  {totalExcludingTax && (
407
- <VComponent node={totalExcludingTax} role="text" />
408
+ <VComponent node={totalExcludingTax} role="text" />
408
409
  )}
409
410
  &nbsp;
410
411
  {labels.taxExcluded}
411
412
  </span>
412
- </div>
413
- )}
414
-
415
- {/* Discount amount */}
416
- {discount && (
417
- <VComponent
418
- node={discount}
419
- className={classes(['dropin-cart-item__discount'])}
420
- />
421
- )}
422
-
423
- {/* Savings amount */}
424
- {savings && (
425
- <VComponent
426
- node={savings}
427
- className={classes(['dropin-cart-item__savings'])}
428
- />
429
- )}
413
+ </div>
414
+ )}
430
415
 
431
- </div>
416
+ {/* Discount amount */}
417
+ {discount && (
418
+ <VComponent
419
+ node={discount}
420
+ className={classes(['dropin-cart-item__discount'])}
421
+ />
422
+ )}
432
423
 
433
- {/* Footer */}
434
- {footer && (
435
- <div className={classes(['dropin-cart-item__footer'])}>
436
- <VComponent node={footer} />
437
- </div>
424
+ {/* Savings amount */}
425
+ {savings && (
426
+ <VComponent
427
+ node={savings}
428
+ className={classes(['dropin-cart-item__savings'])}
429
+ />
438
430
  )}
439
431
  </div>
440
432
 
441
- {/* Remove Item */}
442
- {onRemove && (
443
- <Button
444
- data-testid="cart-item-remove-button"
445
- className={classes(['dropin-cart-item__remove'])}
446
- variant="tertiary"
447
- onClick={() => onRemove?.()}
448
- icon={
449
- <Icon
450
- data-testid="cart-item-remove-icon"
451
- source={Trash}
452
- size="24"
453
- stroke="2"
454
- viewBox="0 0 24 24"
455
- aria-label={
456
- ariaLabel
457
- ? labels.remove?.replace('{product}', ariaLabel)
458
- : labels.removeDefault
459
- }
460
- />
461
- }
462
- disabled={updating}
463
- />
433
+ {/* Footer */}
434
+ {footer && (
435
+ <div className={classes(['dropin-cart-item__footer'])}>
436
+ <VComponent node={footer} />
437
+ </div>
464
438
  )}
465
439
  </div>
440
+
441
+ {/* Remove Item */}
442
+ {onRemove && (
443
+ <Button
444
+ data-testid="cart-item-remove-button"
445
+ className={classes(['dropin-cart-item__remove'])}
446
+ variant="tertiary"
447
+ onClick={() => onRemove?.()}
448
+ icon={
449
+ <Icon
450
+ data-testid="cart-item-remove-icon"
451
+ source={Trash}
452
+ size="24"
453
+ stroke="2"
454
+ viewBox="0 0 24 24"
455
+ aria-label={
456
+ ariaLabel
457
+ ? labels.remove?.replace('{product}', ariaLabel)
458
+ : labels.removeDefault
459
+ }
460
+ />
461
+ }
462
+ disabled={updating}
463
+ />
464
+ )}
465
+ </div>
466
466
  );
467
467
  };