@magento/venia-ui 11.6.0-beta5 → 11.7.0-alpha10

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 (9) hide show
  1. package/lib/RootComponents/Category/__tests__/__snapshots__/categoryContent.spec.js.snap +0 -566
  2. package/lib/RootComponents/Category/categoryContent.js +49 -22
  3. package/lib/components/FilterModal/FilterList/filterList.js +19 -4
  4. package/lib/components/FilterSidebar/filterSidebar.js +1 -1
  5. package/lib/components/WishlistPage/__tests__/__snapshots__/wishlistItem.spec.js.snap +110 -100
  6. package/lib/components/WishlistPage/wishlistItem.js +16 -10
  7. package/lib/targets/venia-ui-intercept.js +1 -1
  8. package/package.json +3 -3
  9. package/lib/components/Select/option.js +0 -28
package/lib/RootComponents/Category/__tests__/__snapshots__/categoryContent.spec.js.snap CHANGED
@@ -25,77 +25,6 @@ exports[`filter button/modal does not render if there are no filters 1`] = `
25
25
  </div>
26
26
  </h1>
27
27
  </div>
28
- <div
29
- className="contentWrapper"
30
- >
31
- <div
32
- className="sidebar"
33
- />
34
- <div
35
- className="categoryContent"
36
- >
37
- <div
38
- className="heading"
39
- >
40
- <div
41
- className="categoryInfo"
42
- />
43
- <div
44
- className="headerButtons"
45
- >
46
- <ProductSort
47
- availableSortMethods={
48
- Array [
49
- Object {
50
- "attribute": "sortItem.attribute",
51
- "id": "sortItem.method",
52
- "sortDirection": "ASC",
53
- "text": "sortItem.text",
54
- },
55
- ]
56
- }
57
- sortProps={
58
- Array [
59
- Object {
60
- "sortAttribute": "",
61
- "sortDirection": "",
62
- "sortText": "",
63
- },
64
- [MockFunction],
65
- ]
66
- }
67
- />
68
- </div>
69
- <SortedByContainer
70
- currentSort={
71
- Object {
72
- "sortAttribute": "",
73
- "sortDirection": "",
74
- "sortText": "",
75
- }
76
- }
77
- />
78
- </div>
79
- <section
80
- className="gallery"
81
- >
82
- <Gallery
83
- items={
84
- Object {
85
- "id": 1,
86
- }
87
- }
88
- />
89
- </section>
90
- <div
91
- className="pagination"
92
- >
93
- <Pagination
94
- pageControl={Object {}}
95
- />
96
- </div>
97
- </div>
98
- </div>
99
28
  </article>
100
29
  </div>
101
30
  `;
@@ -125,91 +54,6 @@ exports[`filter button/modal renders when there are filters 1`] = `
125
54
  </div>
126
55
  </h1>
127
56
  </div>
128
- <div
129
- className="contentWrapper"
130
- >
131
- <div
132
- className="sidebar"
133
- />
134
- <div
135
- className="categoryContent"
136
- >
137
- <div
138
- className="heading"
139
- >
140
- <div
141
- className="categoryInfo"
142
- />
143
- <div
144
- className="headerButtons"
145
- >
146
- <FilterModalOpenButton
147
- filters={
148
- Array [
149
- Object {},
150
- ]
151
- }
152
- />
153
- <ProductSort
154
- availableSortMethods={
155
- Array [
156
- Object {
157
- "attribute": "sortItem.attribute",
158
- "id": "sortItem.method",
159
- "sortDirection": "ASC",
160
- "text": "sortItem.text",
161
- },
162
- ]
163
- }
164
- sortProps={
165
- Array [
166
- Object {
167
- "sortAttribute": "",
168
- "sortDirection": "",
169
- "sortText": "",
170
- },
171
- [MockFunction],
172
- ]
173
- }
174
- />
175
- </div>
176
- <SortedByContainer
177
- currentSort={
178
- Object {
179
- "sortAttribute": "",
180
- "sortDirection": "",
181
- "sortText": "",
182
- }
183
- }
184
- />
185
- </div>
186
- <section
187
- className="gallery"
188
- >
189
- <Gallery
190
- items={
191
- Object {
192
- "id": 1,
193
- }
194
- }
195
- />
196
- </section>
197
- <div
198
- className="pagination"
199
- >
200
- <Pagination
201
- pageControl={Object {}}
202
- />
203
- </div>
204
- <require('../../components/FilterModal')
205
- filters={
206
- Array [
207
- Object {},
208
- ]
209
- }
210
- />
211
- </div>
212
- </div>
213
57
  </article>
214
58
  </div>
215
59
  `;
@@ -239,91 +83,6 @@ exports[`filter sidebar does not render if not in viewport 1`] = `
239
83
  </div>
240
84
  </h1>
241
85
  </div>
242
- <div
243
- className="contentWrapper"
244
- >
245
- <div
246
- className="sidebar"
247
- />
248
- <div
249
- className="categoryContent"
250
- >
251
- <div
252
- className="heading"
253
- >
254
- <div
255
- className="categoryInfo"
256
- />
257
- <div
258
- className="headerButtons"
259
- >
260
- <FilterModalOpenButton
261
- filters={
262
- Array [
263
- Object {},
264
- ]
265
- }
266
- />
267
- <ProductSort
268
- availableSortMethods={
269
- Array [
270
- Object {
271
- "attribute": "sortItem.attribute",
272
- "id": "sortItem.method",
273
- "sortDirection": "ASC",
274
- "text": "sortItem.text",
275
- },
276
- ]
277
- }
278
- sortProps={
279
- Array [
280
- Object {
281
- "sortAttribute": "",
282
- "sortDirection": "",
283
- "sortText": "",
284
- },
285
- [MockFunction],
286
- ]
287
- }
288
- />
289
- </div>
290
- <SortedByContainer
291
- currentSort={
292
- Object {
293
- "sortAttribute": "",
294
- "sortDirection": "",
295
- "sortText": "",
296
- }
297
- }
298
- />
299
- </div>
300
- <section
301
- className="gallery"
302
- >
303
- <Gallery
304
- items={
305
- Object {
306
- "id": 1,
307
- }
308
- }
309
- />
310
- </section>
311
- <div
312
- className="pagination"
313
- >
314
- <Pagination
315
- pageControl={Object {}}
316
- />
317
- </div>
318
- <require('../../components/FilterModal')
319
- filters={
320
- Array [
321
- Object {},
322
- ]
323
- }
324
- />
325
- </div>
326
- </div>
327
86
  </article>
328
87
  </div>
329
88
  `;
@@ -353,99 +112,6 @@ exports[`filter sidebar renders when in viewport 1`] = `
353
112
  </div>
354
113
  </h1>
355
114
  </div>
356
- <div
357
- className="contentWrapper"
358
- >
359
- <div
360
- className="sidebar"
361
- >
362
- <require('../../components/FilterSidebar')
363
- filters={
364
- Array [
365
- Object {},
366
- ]
367
- }
368
- />
369
- </div>
370
- <div
371
- className="categoryContent"
372
- >
373
- <div
374
- className="heading"
375
- >
376
- <div
377
- className="categoryInfo"
378
- />
379
- <div
380
- className="headerButtons"
381
- >
382
- <FilterModalOpenButton
383
- filters={
384
- Array [
385
- Object {},
386
- ]
387
- }
388
- />
389
- <ProductSort
390
- availableSortMethods={
391
- Array [
392
- Object {
393
- "attribute": "sortItem.attribute",
394
- "id": "sortItem.method",
395
- "sortDirection": "ASC",
396
- "text": "sortItem.text",
397
- },
398
- ]
399
- }
400
- sortProps={
401
- Array [
402
- Object {
403
- "sortAttribute": "",
404
- "sortDirection": "",
405
- "sortText": "",
406
- },
407
- [MockFunction],
408
- ]
409
- }
410
- />
411
- </div>
412
- <SortedByContainer
413
- currentSort={
414
- Object {
415
- "sortAttribute": "",
416
- "sortDirection": "",
417
- "sortText": "",
418
- }
419
- }
420
- />
421
- </div>
422
- <section
423
- className="gallery"
424
- >
425
- <Gallery
426
- items={
427
- Object {
428
- "id": 1,
429
- }
430
- }
431
- />
432
- </section>
433
- <div
434
- className="pagination"
435
- >
436
- <Pagination
437
- pageControl={Object {}}
438
- />
439
- </div>
440
- <require('../../components/FilterModal')
441
- filters={
442
- Array [
443
- Object {},
444
- ]
445
- }
446
- />
447
- </div>
448
- </div>
449
115
  </article>
450
116
  </div>
451
117
  `;
@@ -475,30 +141,6 @@ exports[`renders empty page 1`] = `
475
141
  </div>
476
142
  </h1>
477
143
  </div>
478
- <div
479
- className="contentWrapper"
480
- >
481
- <div
482
- className="sidebar"
483
- />
484
- <div
485
- className="categoryContent"
486
- >
487
- <div
488
- className="heading"
489
- >
490
- <div
491
- className="categoryInfo"
492
- />
493
- <div
494
- className="headerButtons"
495
- />
496
- </div>
497
- <NoProductsFound
498
- categoryId={42}
499
- />
500
- </div>
501
- </div>
502
144
  </article>
503
145
  </div>
504
146
  `;
@@ -528,48 +170,6 @@ exports[`renders loading indicator if no data and loading 1`] = `
528
170
  </div>
529
171
  </h1>
530
172
  </div>
531
- <div
532
- className="contentWrapper"
533
- >
534
- <div
535
- className="sidebar"
536
- />
537
- <div
538
- className="categoryContent"
539
- >
540
- <div
541
- className="heading"
542
- >
543
- <div
544
- className="categoryInfo"
545
- >
546
- <Shimmer
547
- width={5}
548
- />
549
- </div>
550
- <div
551
- className="headerButtons"
552
- >
553
- <ProductSortShimmer />
554
- </div>
555
- <SortedByContainerShimmer />
556
- </div>
557
- <section
558
- className="gallery"
559
- >
560
- <GalleryShimmer
561
- items={
562
- Object {
563
- "id": 1,
564
- }
565
- }
566
- />
567
- </section>
568
- <div
569
- className="pagination"
570
- />
571
- </div>
572
- </div>
573
173
  </article>
574
174
  </div>
575
175
  `;
@@ -599,77 +199,6 @@ exports[`renders the correct tree 1`] = `
599
199
  </div>
600
200
  </h1>
601
201
  </div>
602
- <div
603
- className="contentWrapper"
604
- >
605
- <div
606
- className="sidebar"
607
- />
608
- <div
609
- className="categoryContent"
610
- >
611
- <div
612
- className="heading"
613
- >
614
- <div
615
- className="categoryInfo"
616
- />
617
- <div
618
- className="headerButtons"
619
- >
620
- <ProductSort
621
- availableSortMethods={
622
- Array [
623
- Object {
624
- "attribute": "sortItem.attribute",
625
- "id": "sortItem.method",
626
- "sortDirection": "ASC",
627
- "text": "sortItem.text",
628
- },
629
- ]
630
- }
631
- sortProps={
632
- Array [
633
- Object {
634
- "sortAttribute": "",
635
- "sortDirection": "",
636
- "sortText": "",
637
- },
638
- [MockFunction],
639
- ]
640
- }
641
- />
642
- </div>
643
- <SortedByContainer
644
- currentSort={
645
- Object {
646
- "sortAttribute": "",
647
- "sortDirection": "",
648
- "sortText": "",
649
- }
650
- }
651
- />
652
- </div>
653
- <section
654
- className="gallery"
655
- >
656
- <Gallery
657
- items={
658
- Object {
659
- "id": 1,
660
- }
661
- }
662
- />
663
- </section>
664
- <div
665
- className="pagination"
666
- >
667
- <Pagination
668
- pageControl={Object {}}
669
- />
670
- </div>
671
- </div>
672
- </div>
673
202
  </article>
674
203
  </div>
675
204
  `;
@@ -699,30 +228,6 @@ exports[`sort button/container does not render if there are no products 1`] = `
699
228
  </div>
700
229
  </h1>
701
230
  </div>
702
- <div
703
- className="contentWrapper"
704
- >
705
- <div
706
- className="sidebar"
707
- />
708
- <div
709
- className="categoryContent"
710
- >
711
- <div
712
- className="heading"
713
- >
714
- <div
715
- className="categoryInfo"
716
- />
717
- <div
718
- className="headerButtons"
719
- />
720
- </div>
721
- <NoProductsFound
722
- categoryId={42}
723
- />
724
- </div>
725
- </div>
726
231
  </article>
727
232
  </div>
728
233
  `;
@@ -752,77 +257,6 @@ exports[`sort button/container renders when there are products 1`] = `
752
257
  </div>
753
258
  </h1>
754
259
  </div>
755
- <div
756
- className="contentWrapper"
757
- >
758
- <div
759
- className="sidebar"
760
- />
761
- <div
762
- className="categoryContent"
763
- >
764
- <div
765
- className="heading"
766
- >
767
- <div
768
- className="categoryInfo"
769
- />
770
- <div
771
- className="headerButtons"
772
- >
773
- <ProductSort
774
- availableSortMethods={
775
- Array [
776
- Object {
777
- "attribute": "sortItem.attribute",
778
- "id": "sortItem.method",
779
- "sortDirection": "ASC",
780
- "text": "sortItem.text",
781
- },
782
- ]
783
- }
784
- sortProps={
785
- Array [
786
- Object {
787
- "sortAttribute": "",
788
- "sortDirection": "",
789
- "sortText": "",
790
- },
791
- [MockFunction],
792
- ]
793
- }
794
- />
795
- </div>
796
- <SortedByContainer
797
- currentSort={
798
- Object {
799
- "sortAttribute": "",
800
- "sortDirection": "",
801
- "sortText": "",
802
- }
803
- }
804
- />
805
- </div>
806
- <section
807
- className="gallery"
808
- >
809
- <Gallery
810
- items={
811
- Object {
812
- "id": 1,
813
- }
814
- }
815
- />
816
- </section>
817
- <div
818
- className="pagination"
819
- >
820
- <Pagination
821
- pageControl={Object {}}
822
- />
823
- </div>
824
- </div>
825
- </div>
826
260
  </article>
827
261
  </div>
828
262
  `;
package/lib/RootComponents/Category/categoryContent.js CHANGED
@@ -28,6 +28,12 @@ const FilterSidebar = React.lazy(() =>
28
28
  import('../../components/FilterSidebar')
29
29
  );
30
30
 
31
+ const DISPLAY_MODE = {
32
+ PRODUCTS: 'PRODUCTS',
33
+ PAGE: 'PAGE',
34
+ PRODUCTS_AND_PAGE: 'PRODUCTS_AND_PAGE'
35
+ };
36
+
31
37
  const CategoryContent = props => {
32
38
  const {
33
39
  categoryId,
@@ -53,7 +59,9 @@ const CategoryContent = props => {
53
59
  setFilterOptions,
54
60
  items,
55
61
  totalCount,
56
- totalPagesFromData
62
+ totalPagesFromData,
63
+ categoryDisplayMode,
64
+ cmsBlockContent
57
65
  } = talonProps;
58
66
 
59
67
  const sidebarRef = useRef(null);
@@ -120,6 +128,14 @@ const CategoryContent = props => {
120
128
  <RichContent html={categoryDescription} />
121
129
  ) : null;
122
130
 
131
+ const shouldRenderCmsOnly = categoryDisplayMode === DISPLAY_MODE.PAGE;
132
+ const shouldRenderProducts =
133
+ categoryDisplayMode === null ||
134
+ categoryDisplayMode === DISPLAY_MODE.PRODUCTS ||
135
+ categoryDisplayMode === DISPLAY_MODE.PRODUCTS_AND_PAGE;
136
+ const shouldRenderCmsWithProducts =
137
+ categoryDisplayMode === DISPLAY_MODE.PRODUCTS_AND_PAGE;
138
+
123
139
  const content = useMemo(() => {
124
140
  if (!totalPagesFromData && !isLoading) {
125
141
  return <NoProductsFound categoryId={categoryId} />;
@@ -172,31 +188,42 @@ const CategoryContent = props => {
172
188
  </div>
173
189
  </h1>
174
190
  {categoryDescriptionElement}
191
+ {/* CMS Block always after description if shown */}
192
+ {(shouldRenderCmsOnly || shouldRenderCmsWithProducts) &&
193
+ cmsBlockContent && (
194
+ <RichContent html={cmsBlockContent} />
195
+ )}
175
196
  </div>
176
- <div className={classes.contentWrapper}>
177
- <div ref={sidebarRef} className={classes.sidebar}>
178
- <Suspense fallback={<FilterSidebarShimmer />}>
179
- {shouldRenderSidebarContent ? sidebar : null}
180
- </Suspense>
181
- </div>
182
- <div className={classes.categoryContent}>
183
- <div className={classes.heading}>
184
- <div
185
- data-cy="CategoryContent-categoryInfo"
186
- className={classes.categoryInfo}
187
- >
188
- {categoryResultsHeading}
189
- </div>
190
- <div className={classes.headerButtons}>
191
- {maybeFilterButtons}
192
- {maybeSortButton}
197
+ {shouldRenderProducts && (
198
+ <div className={classes.contentWrapper}>
199
+ <div ref={sidebarRef} className={classes.sidebar}>
200
+ <Suspense fallback={<FilterSidebarShimmer />}>
201
+ {shouldRenderSidebarContent
202
+ ? sidebar
203
+ : null}
204
+ </Suspense>
205
+ </div>
206
+ <div className={classes.categoryContent}>
207
+ <div className={classes.heading}>
208
+ <div
209
+ data-cy="CategoryContent-categoryInfo"
210
+ className={classes.categoryInfo}
211
+ >
212
+ {categoryResultsHeading}
213
+ </div>
214
+ <div className={classes.headerButtons}>
215
+ {maybeFilterButtons}
216
+ {maybeSortButton}
217
+ </div>
218
+ {maybeSortContainer}
193
219
  </div>
194
- {maybeSortContainer}
220
+ {content}
221
+ <Suspense fallback={null}>
222
+ {filtersModal}
223
+ </Suspense>
195
224
  </div>
196
- {content}
197
- <Suspense fallback={null}>{filtersModal}</Suspense>
198
225
  </div>
199
- </div>
226
+ )}
200
227
  </article>
201
228
  </div>
202
229
  </Fragment>
package/lib/components/FilterModal/FilterList/filterList.js CHANGED
@@ -32,12 +32,27 @@ const FilterList = props => {
32
32
  const { formatMessage } = useIntl();
33
33
 
34
34
  if (name === 'Price') {
35
- var minRange = Number(items[0].value.split('_')[0]);
36
- var maxRange = Number(items[items.length - 1].value.split('_')[1]);
35
+ var minRange = Infinity;
36
+ var maxRange = -Infinity;
37
+
38
+ items.forEach(item => {
39
+ const [minStr, maxStr] = item.value.split('_');
40
+ const min = Number(minStr);
41
+ const max = Number(maxStr);
42
+
43
+ if (!isNaN(min) && min < minRange) minRange = min;
44
+ if (!isNaN(max) && max > maxRange) maxRange = max;
45
+ });
46
+
47
+ var currentMinVal;
48
+ var currentMaxVal;
49
+
37
50
  if (filterState !== undefined) {
38
51
  const filterArray = [...filterState];
39
- var currentMinVal = Number(filterArray[0]?.value?.split('_')[0]);
40
- var currentMaxVal = Number(filterArray[0]?.value?.split('_')[1]);
52
+ const [currentMinStr, currentMaxStr] =
53
+ filterArray[0]?.value?.split('_') || [];
54
+ currentMinVal = Number(currentMinStr);
55
+ currentMaxVal = Number(currentMaxStr);
41
56
  }
42
57
  }
43
58
 
package/lib/components/FilterSidebar/filterSidebar.js CHANGED
@@ -78,7 +78,7 @@ const FilterSidebar = props => {
78
78
  );
79
79
 
80
80
  useEffect(() => {
81
- if (filterState) {
81
+ if (filterState && setFilterOptions) {
82
82
  setFilterOptions(filterState);
83
83
  }
84
84
  }, [filterState, setFilterOptions]);
package/lib/components/WishlistPage/__tests__/__snapshots__/wishlistItem.spec.js.snap CHANGED
@@ -12,52 +12,73 @@ exports[`it renders a configurable wishlist item 1`] = `
12
12
  <div
13
13
  className="root"
14
14
  >
15
- <div
16
- className="root container"
15
+ <a
16
+ className="name"
17
+ href="undefined.html"
17
18
  >
18
- <img
19
- alt="Shoggoth Shirt"
20
- aria-hidden="true"
21
- className="image placeholder"
22
- loading="eager"
23
- src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjUiIHZpZXdCb3g9Ii0yNSAtMjUgMzEyIDMxMiI+CiAgICA8ZyBpZD0iTGF5ZXJfMi0yIj4KICAgICAgICA8cGF0aCBjbGFzcz0ic3QwIiBzdHlsZT0iZmlsbDogI2YwZjBmMDsgZmlsbC1ydWxlOiBldmVub2RkOyIgZD0iTTM2LDE4OS40di0xMDkuMWMwLTAuNywwLjQtMS42LDEuMS0ybDk0LjctNTcuMWMwLjctMC41LDEuNy0wLjUsMi41LDBsOTEuNSw1N2MwLjcsMC40LDEuMSwxLjEsMS4xLDJ2MTA3LjljMCwwLjctMC40LDEuNS0xLjEsMmwtMTkuMywxMi42Yy0xLjUsMS0zLjYsMC0zLjYtMnYtMTA1LjljMC0wLjctMC40LTEuNi0xLjEtMmwtNjcuNS00MS4zYy0wLjctMC41LTEuNi0wLjUtMi4zLDBsLTY5LjYsNDEuM2MtMC43LDAuNC0xLjEsMS4xLTEuMSwydjEwNS45YzAsMS45LTIsMy0zLjYsMmwtMjEuNS0xMy41aDB2LjJaTTg2LDExMC45djEwNi4zYzAsMC45LDAuNCwxLjYsMS4xLDJsNDQuNSwyNi43YzAuNywwLjUsMS43LDAuNCwyLjUsMGw0Mi41LTI2LjdjMC43LTAuNCwxLjEtMS4xLDEuMS0ydi0xMDUuOGMwLTAuNy0wLjQtMS41LTEuMS0ybC0yOC43LTE3LjljLTEuNS0xLTMuNiwwLjEtMy42LDJ2MTIxLjZjMCwwLjctMC40LDEuNS0xLjEsMmwtOS4zLDUuOWMtMC43LDAuNS0xLjYsMC41LTIuMywwbC0xMS4xLTUuOWMtMC43LTAuNC0xLjItMS4yLTEuMi0yLjF2LTEyMS43YzAtMS43LTItMy0zLjUtMmwtMjguOCwxNi4yYy0wLjcsMC40LTEuMSwxLjEtMS4xLDJ2MS41aC4xWiIvPgogICAgPC9nPgo8L3N2Zz4K"
24
- style={
25
- Object {
26
- "--width": "400px",
19
+ <div
20
+ className="root container"
21
+ >
22
+ <img
23
+ alt="Shoggoth Shirt"
24
+ aria-hidden="true"
25
+ className="image placeholder"
26
+ loading="eager"
27
+ src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjUiIHZpZXdCb3g9Ii0yNSAtMjUgMzEyIDMxMiI+CiAgICA8ZyBpZD0iTGF5ZXJfMi0yIj4KICAgICAgICA8cGF0aCBjbGFzcz0ic3QwIiBzdHlsZT0iZmlsbDogI2YwZjBmMDsgZmlsbC1ydWxlOiBldmVub2RkOyIgZD0iTTM2LDE4OS40di0xMDkuMWMwLTAuNywwLjQtMS42LDEuMS0ybDk0LjctNTcuMWMwLjctMC41LDEuNy0wLjUsMi41LDBsOTEuNSw1N2MwLjcsMC40LDEuMSwxLjEsMS4xLDJ2MTA3LjljMCwwLjctMC40LDEuNS0xLjEsMmwtMTkuMywxMi42Yy0xLjUsMS0zLjYsMC0zLjYtMnYtMTA1LjljMC0wLjctMC40LTEuNi0xLjEtMmwtNjcuNS00MS4zYy0wLjctMC41LTEuNi0wLjUtMi4zLDBsLTY5LjYsNDEuM2MtMC43LDAuNC0xLjEsMS4xLTEuMSwydjEwNS45YzAsMS45LTIsMy0zLjYsMmwtMjEuNS0xMy41aDB2LjJaTTg2LDExMC45djEwNi4zYzAsMC45LDAuNCwxLjYsMS4xLDJsNDQuNSwyNi43YzAuNywwLjUsMS43LDAuNCwyLjUsMGw0Mi41LTI2LjdjMC43LTAuNCwxLjEtMS4xLDEuMS0ydi0xMDUuOGMwLTAuNy0wLjQtMS41LTEuMS0ybC0yOC43LTE3LjljLTEuNS0xLTMuNiwwLjEtMy42LDJ2MTIxLjZjMCwwLjctMC40LDEuNS0xLjEsMmwtOS4zLDUuOWMtMC43LDAuNS0xLjYsMC41LTIuMywwbC0xMS4xLTUuOWMtMC43LTAuNC0xLjItMS4yLTEuMi0yLjF2LTEyMS43YzAtMS43LTItMy0zLjUtMmwtMjguOCwxNi4yYy0wLjcsMC40LTEuMSwxLjEtMS4xLDJ2MS41aC4xWiIvPgogICAgPC9nPgo8L3N2Zz4K"
28
+ style={
29
+ Object {
30
+ "--width": "400px",
31
+ }
27
32
  }
28
- }
29
- width={400}
30
- />
31
- <img
32
- alt="Shoggoth Shirt"
33
- className="image notLoaded"
34
- height={500}
35
- loading="lazy"
36
- onError={[Function]}
37
- onLoad={[Function]}
38
- src="https://magento.test/shoggoth-shirt.jpg"
39
- style={
40
- Object {
41
- "--height": "500px",
42
- "--width": "400px",
33
+ width={400}
34
+ />
35
+ <img
36
+ alt="Shoggoth Shirt"
37
+ className="image notLoaded"
38
+ height={500}
39
+ loading="lazy"
40
+ onError={[Function]}
41
+ onLoad={[Function]}
42
+ src="https://magento.test/shoggoth-shirt.jpg"
43
+ style={
44
+ Object {
45
+ "--height": "500px",
46
+ "--width": "400px",
47
+ }
43
48
  }
44
- }
45
- width={400}
46
- />
47
- </div>
48
- <div
49
- className="actionWrap"
50
- >
49
+ width={400}
50
+ />
51
+ </div>
51
52
  <span
52
53
  className="name"
53
54
  >
54
55
  Shoggoth Shirt
55
56
  </span>
56
-
57
+ </a>
58
+ <div
59
+ className="priceContainer"
60
+ >
61
+ <span>
62
+ $
63
+ </span>
64
+ <span>
65
+ 123
66
+ </span>
67
+ <span>
68
+ .
69
+ </span>
70
+ <span>
71
+ 45
72
+ </span>
57
73
  <button
58
74
  aria-label="Remove Product from Wishlist"
59
75
  className="deleteItem"
60
76
  onClick={[MockFunction handleRemoveProductFromWishlist]}
77
+ style={
78
+ Object {
79
+ "float": "right",
80
+ }
81
+ }
61
82
  >
62
83
  <span
63
84
  className="root"
@@ -96,22 +117,6 @@ exports[`it renders a configurable wishlist item 1`] = `
96
117
  </span>
97
118
  </button>
98
119
  </div>
99
- <div
100
- className="priceContainer"
101
- >
102
- <span>
103
- $
104
- </span>
105
- <span>
106
- 123
107
- </span>
108
- <span>
109
- .
110
- </span>
111
- <span>
112
- 45
113
- </span>
114
- </div>
115
120
  <span
116
121
  className="option"
117
122
  >
@@ -129,52 +134,73 @@ exports[`it renders a simple wishlist item 1`] = `
129
134
  <div
130
135
  className="root"
131
136
  >
132
- <div
133
- className="root container"
137
+ <a
138
+ className="name"
139
+ href="undefined.html"
134
140
  >
135
- <img
136
- alt="Shoggoth Shirt"
137
- aria-hidden="true"
138
- className="image placeholder"
139
- loading="eager"
140
- src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjUiIHZpZXdCb3g9Ii0yNSAtMjUgMzEyIDMxMiI+CiAgICA8ZyBpZD0iTGF5ZXJfMi0yIj4KICAgICAgICA8cGF0aCBjbGFzcz0ic3QwIiBzdHlsZT0iZmlsbDogI2YwZjBmMDsgZmlsbC1ydWxlOiBldmVub2RkOyIgZD0iTTM2LDE4OS40di0xMDkuMWMwLTAuNywwLjQtMS42LDEuMS0ybDk0LjctNTcuMWMwLjctMC41LDEuNy0wLjUsMi41LDBsOTEuNSw1N2MwLjcsMC40LDEuMSwxLjEsMS4xLDJ2MTA3LjljMCwwLjctMC40LDEuNS0xLjEsMmwtMTkuMywxMi42Yy0xLjUsMS0zLjYsMC0zLjYtMnYtMTA1LjljMC0wLjctMC40LTEuNi0xLjEtMmwtNjcuNS00MS4zYy0wLjctMC41LTEuNi0wLjUtMi4zLDBsLTY5LjYsNDEuM2MtMC43LDAuNC0xLjEsMS4xLTEuMSwydjEwNS45YzAsMS45LTIsMy0zLjYsMmwtMjEuNS0xMy41aDB2LjJaTTg2LDExMC45djEwNi4zYzAsMC45LDAuNCwxLjYsMS4xLDJsNDQuNSwyNi43YzAuNywwLjUsMS43LDAuNCwyLjUsMGw0Mi41LTI2LjdjMC43LTAuNCwxLjEtMS4xLDEuMS0ydi0xMDUuOGMwLTAuNy0wLjQtMS41LTEuMS0ybC0yOC43LTE3LjljLTEuNS0xLTMuNiwwLjEtMy42LDJ2MTIxLjZjMCwwLjctMC40LDEuNS0xLjEsMmwtOS4zLDUuOWMtMC43LDAuNS0xLjYsMC41LTIuMywwbC0xMS4xLTUuOWMtMC43LTAuNC0xLjItMS4yLTEuMi0yLjF2LTEyMS43YzAtMS43LTItMy0zLjUtMmwtMjguOCwxNi4yYy0wLjcsMC40LTEuMSwxLjEtMS4xLDJ2MS41aC4xWiIvPgogICAgPC9nPgo8L3N2Zz4K"
141
- style={
142
- Object {
143
- "--width": "400px",
141
+ <div
142
+ className="root container"
143
+ >
144
+ <img
145
+ alt="Shoggoth Shirt"
146
+ aria-hidden="true"
147
+ className="image placeholder"
148
+ loading="eager"
149
+ src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjUiIHZpZXdCb3g9Ii0yNSAtMjUgMzEyIDMxMiI+CiAgICA8ZyBpZD0iTGF5ZXJfMi0yIj4KICAgICAgICA8cGF0aCBjbGFzcz0ic3QwIiBzdHlsZT0iZmlsbDogI2YwZjBmMDsgZmlsbC1ydWxlOiBldmVub2RkOyIgZD0iTTM2LDE4OS40di0xMDkuMWMwLTAuNywwLjQtMS42LDEuMS0ybDk0LjctNTcuMWMwLjctMC41LDEuNy0wLjUsMi41LDBsOTEuNSw1N2MwLjcsMC40LDEuMSwxLjEsMS4xLDJ2MTA3LjljMCwwLjctMC40LDEuNS0xLjEsMmwtMTkuMywxMi42Yy0xLjUsMS0zLjYsMC0zLjYtMnYtMTA1LjljMC0wLjctMC40LTEuNi0xLjEtMmwtNjcuNS00MS4zYy0wLjctMC41LTEuNi0wLjUtMi4zLDBsLTY5LjYsNDEuM2MtMC43LDAuNC0xLjEsMS4xLTEuMSwydjEwNS45YzAsMS45LTIsMy0zLjYsMmwtMjEuNS0xMy41aDB2LjJaTTg2LDExMC45djEwNi4zYzAsMC45LDAuNCwxLjYsMS4xLDJsNDQuNSwyNi43YzAuNywwLjUsMS43LDAuNCwyLjUsMGw0Mi41LTI2LjdjMC43LTAuNCwxLjEtMS4xLDEuMS0ydi0xMDUuOGMwLTAuNy0wLjQtMS41LTEuMS0ybC0yOC43LTE3LjljLTEuNS0xLTMuNiwwLjEtMy42LDJ2MTIxLjZjMCwwLjctMC40LDEuNS0xLjEsMmwtOS4zLDUuOWMtMC43LDAuNS0xLjYsMC41LTIuMywwbC0xMS4xLTUuOWMtMC43LTAuNC0xLjItMS4yLTEuMi0yLjF2LTEyMS43YzAtMS43LTItMy0zLjUtMmwtMjguOCwxNi4yYy0wLjcsMC40LTEuMSwxLjEtMS4xLDJ2MS41aC4xWiIvPgogICAgPC9nPgo8L3N2Zz4K"
150
+ style={
151
+ Object {
152
+ "--width": "400px",
153
+ }
144
154
  }
145
- }
146
- width={400}
147
- />
148
- <img
149
- alt="Shoggoth Shirt"
150
- className="image notLoaded"
151
- height={500}
152
- loading="lazy"
153
- onError={[Function]}
154
- onLoad={[Function]}
155
- src="https://magento.test/shoggoth-shirt.jpg"
156
- style={
157
- Object {
158
- "--height": "500px",
159
- "--width": "400px",
155
+ width={400}
156
+ />
157
+ <img
158
+ alt="Shoggoth Shirt"
159
+ className="image notLoaded"
160
+ height={500}
161
+ loading="lazy"
162
+ onError={[Function]}
163
+ onLoad={[Function]}
164
+ src="https://magento.test/shoggoth-shirt.jpg"
165
+ style={
166
+ Object {
167
+ "--height": "500px",
168
+ "--width": "400px",
169
+ }
160
170
  }
161
- }
162
- width={400}
163
- />
164
- </div>
165
- <div
166
- className="actionWrap"
167
- >
171
+ width={400}
172
+ />
173
+ </div>
168
174
  <span
169
175
  className="name"
170
176
  >
171
177
  Shoggoth Shirt
172
178
  </span>
173
-
179
+ </a>
180
+ <div
181
+ className="priceContainer"
182
+ >
183
+ <span>
184
+ $
185
+ </span>
186
+ <span>
187
+ 123
188
+ </span>
189
+ <span>
190
+ .
191
+ </span>
192
+ <span>
193
+ 45
194
+ </span>
174
195
  <button
175
196
  aria-label="Remove Product from Wishlist"
176
197
  className="deleteItem"
177
198
  onClick={[MockFunction handleRemoveProductFromWishlist]}
199
+ style={
200
+ Object {
201
+ "float": "right",
202
+ }
203
+ }
178
204
  >
179
205
  <span
180
206
  className="root"
@@ -213,21 +239,5 @@ exports[`it renders a simple wishlist item 1`] = `
213
239
  </span>
214
240
  </button>
215
241
  </div>
216
- <div
217
- className="priceContainer"
218
- >
219
- <span>
220
- $
221
- </span>
222
- <span>
223
- 123
224
- </span>
225
- <span>
226
- .
227
- </span>
228
- <span>
229
- 45
230
- </span>
231
- </div>
232
242
  </div>
233
243
  `;
package/lib/components/WishlistPage/wishlistItem.js CHANGED
@@ -105,16 +105,28 @@ const WishlistItem = props => {
105
105
 
106
106
  return (
107
107
  <div className={rootClass} data-cy="wishlistItem-root">
108
- <Image {...imageProps} />
109
-
110
- <div className={classes.actionWrap}>
108
+ <a
109
+ href={product.url_key + '.html'}
110
+ className={classes.name}
111
+ data-cy="wishlistItem-productLink"
112
+ >
113
+ <Image {...imageProps} />
111
114
  <span
112
115
  className={classes.name}
113
116
  data-cy="wishlistItem-productName"
114
117
  >
115
118
  {name}
116
- </span>{' '}
119
+ </span>
120
+ </a>
121
+ <div
122
+ className={classes.priceContainer}
123
+ data-cy="wishlistItem-priceContainer"
124
+ >
125
+ <Price currencyCode={currency} value={unitPrice} />
117
126
  <button
127
+ style={{
128
+ float: 'right'
129
+ }}
118
130
  className={classes.deleteItem}
119
131
  onClick={handleRemoveProductFromWishlist}
120
132
  aria-label={removeProductAriaLabel}
@@ -123,12 +135,6 @@ const WishlistItem = props => {
123
135
  <Icon size={16} src={Trash2} />
124
136
  </button>
125
137
  </div>
126
- <div
127
- className={classes.priceContainer}
128
- data-cy="wishlistItem-priceContainer"
129
- >
130
- <Price currencyCode={currency} value={unitPrice} />
131
- </div>
132
138
  {optionElements}
133
139
  {addToCart}
134
140
  </div>
package/lib/targets/venia-ui-intercept.js CHANGED
@@ -12,7 +12,7 @@ const SummaryPaymentTypes = require('./SummaryPaymentTypes');
12
12
  const RootShimmerTypes = require('./RootShimmerTypes');
13
13
 
14
14
  module.exports = veniaTargets => {
15
- const venia = Targetables.using(veniaTargets);
15
+ const venia = new Targetables(veniaTargets);
16
16
 
17
17
  venia.setSpecialFeatures(
18
18
  'cssModules',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@magento/venia-ui",
3
- "version": "11.6.0-beta5",
3
+ "version": "11.7.0-alpha10",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -80,8 +80,8 @@
80
80
  "peerDependencies": {
81
81
  "@apollo/client": "~3.5.0",
82
82
  "@magento/babel-preset-peregrine": "~1.3.3",
83
- "@magento/peregrine": "14.5.1-beta5",
84
- "@magento/pwa-buildpack": "11.5.4-beta5",
83
+ "@magento/peregrine": "15.5.1-alpha10",
84
+ "@magento/pwa-buildpack": "~11.5.4",
85
85
  "apollo-cache-persist": "~0.1.1",
86
86
  "braintree-web-drop-in": "~1.43.0",
87
87
  "graphql": "~15.5.0",
package/lib/components/Select/option.js DELETED
@@ -1,28 +0,0 @@
1
- import React from 'react';
2
- import { bool, shape, string } from 'prop-types';
3
-
4
- const Option = props => {
5
- const { disabled, item } = props;
6
- const { label, value } = item;
7
- const text = label != null ? label : value;
8
-
9
- return (
10
- <option value={value} disabled={disabled}>
11
- {text}
12
- </option>
13
- );
14
- };
15
-
16
- Option.propTypes = {
17
- disabled: bool,
18
- item: shape({
19
- label: string,
20
- value: string.isRequired
21
- }).isRequired
22
- };
23
-
24
- Option.defaultProps = {
25
- disabled: false
26
- };
27
-
28
- export default Option;