@ebay/skin 17.0.0-0 → 17.0.1

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 (13) hide show
  1. package/_cdn/skin/v17.0.1/skin-default.min.css +69 -0
  2. package/_cdn/skin/v17.0.1/skin-full.min.css +151 -0
  3. package/_cdn/skin/v17.0.1/skin-headless.min.css +6 -0
  4. package/dist/breadcrumbs/breadcrumbs.css +6 -2
  5. package/dist/progress-stepper/progress-stepper.css +8 -0
  6. package/package.json +1 -1
  7. package/src/less/breadcrumbs/breadcrumbs.less +7 -2
  8. package/src/less/progress-stepper/progress-stepper.less +15 -0
  9. package/src/less/progress-stepper/stories/progress-stepper.stories.js +0 -218
  10. package/src/less/section-notice/stories/icon-24.stories.js +4 -4
  11. package/_cdn/skin/v17.0.0-0/skin-default.min.css +0 -69
  12. package/_cdn/skin/v17.0.0-0/skin-full.min.css +0 -151
  13. package/_cdn/skin/v17.0.0-0/skin-headless.min.css +0 -6
package/src/less/progress-stepper/progress-stepper.less CHANGED
@@ -122,6 +122,13 @@ hr.progress-stepper__separator {
122
122
  );
123
123
  }
124
124
 
125
+ .progress-stepper__item--attention[aria-current]
126
+ ~ hr.progress-stepper__separator {
127
+ .background-color-token(progress-stepper-upcoming-color, color-background-disabled);
128
+
129
+ background-image: none;
130
+ }
131
+
125
132
  .progress-stepper__text > * {
126
133
  margin: 0;
127
134
  }
@@ -160,6 +167,14 @@ hr.progress-stepper__separator {
160
167
  );
161
168
  }
162
169
 
170
+ .progress-stepper--vertical
171
+ .progress-stepper__item--attention[aria-current]
172
+ ~ hr.progress-stepper__separator {
173
+ .background-color-token(progress-stepper-upcoming-color, color-background-disabled);
174
+
175
+ background-image: none;
176
+ }
177
+
163
178
  .progress-stepper--vertical .progress-stepper__items {
164
179
  display: block;
165
180
  }
package/src/less/progress-stepper/stories/progress-stepper.stories.js CHANGED
@@ -159,60 +159,6 @@ export const allSelected = () => `
159
159
  </div>
160
160
  `;
161
161
 
162
- export const currentBubble = () => `
163
- <div class="progress-stepper">
164
- <div class="progress-stepper__items progress-stepper__items--current" role="list">
165
- <div class="progress-stepper__item" role="listitem">
166
- <span class="progress-stepper__icon">
167
- <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
168
- <use href="#icon-stepper-confirmation-24"></use>
169
- </svg>
170
- </span>
171
- <span class="progress-stepper__text">
172
- <h4>Started</h4>
173
- <p>July 3rd</p>
174
- </span>
175
- </div>
176
- <hr class="progress-stepper__separator" role="presentation" />
177
- <div class="progress-stepper__item" role="listitem">
178
- <span class="progress-stepper__icon">
179
- <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
180
- <use href="#icon-stepper-confirmation-24"></use>
181
- </svg>
182
- </span>
183
- <span class="progress-stepper__text">
184
- <h4>Shipped</h4>
185
- <p>July 4th</p>
186
- </span>
187
- </div>
188
- <hr class="progress-stepper__separator" role="presentation" />
189
- <div aria-current="step" class="progress-stepper__item" role="listitem">
190
- <span class="progress-stepper__icon">
191
- <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
192
- <use href="#icon-stepper-current-24"></use>
193
- </svg>
194
- </span>
195
- <span class="progress-stepper__text">
196
- <h4>Transit</h4>
197
- <p>July 5th</p>
198
- </span>
199
- </div>
200
- <hr class="progress-stepper__separator" role="presentation" />
201
- <div class="progress-stepper__item" role="listitem">
202
- <span class="progress-stepper__icon">
203
- <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
204
- <use href="#icon-stepper-upcoming-24"></use>
205
- </svg>
206
- </span>
207
- <span class="progress-stepper__text">
208
- <h4>Delivered</h4>
209
- <p>July 6th</p>
210
- </span>
211
- </div>
212
- </div>
213
- </div>
214
- `;
215
-
216
162
  export const noneSelected = () => `
217
163
  <div class="progress-stepper">
218
164
  <div class="progress-stepper__items progress-stepper__items--upcoming" role="list">
@@ -322,60 +268,6 @@ export const RTL = () => `
322
268
 
323
269
  `;
324
270
 
325
- export const currentBubbleRTL = () => `
326
- <div class="progress-stepper" dir="rtl">
327
- <div class="progress-stepper__items progress-stepper__items--current" role="list">
328
- <div class="progress-stepper__item" role="listitem">
329
- <span class="progress-stepper__icon">
330
- <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
331
- <use href="#icon-stepper-confirmation-24"></use>
332
- </svg>
333
- </span>
334
- <span class="progress-stepper__text">
335
- <h4>Started</h4>
336
- <p>July 3rd</p>
337
- </span>
338
- </div>
339
- <hr class="progress-stepper__separator" role="presentation" />
340
- <div class="progress-stepper__item" role="listitem">
341
- <span class="progress-stepper__icon">
342
- <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
343
- <use href="#icon-stepper-confirmation-24"></use>
344
- </svg>
345
- </span>
346
- <span class="progress-stepper__text">
347
- <h4>Shipped</h4>
348
- <p>July 4th</p>
349
- </span>
350
- </div>
351
- <hr class="progress-stepper__separator" role="presentation" />
352
- <div aria-current="step" class="progress-stepper__item" role="listitem">
353
- <span class="progress-stepper__icon">
354
- <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
355
- <use href="#icon-stepper-current-24"></use>
356
- </svg>
357
- </span>
358
- <span class="progress-stepper__text">
359
- <h4>Transit</h4>
360
- <p>July 5th</p>
361
- </span>
362
- </div>
363
- <hr class="progress-stepper__separator" role="presentation" />
364
- <div class="progress-stepper__item" role="listitem">
365
- <span class="progress-stepper__icon">
366
- <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
367
- <use href="#icon-stepper-upcoming-24"></use>
368
- </svg>
369
- </span>
370
- <span class="progress-stepper__text">
371
- <h4>Delivered</h4>
372
- <p>July 6th</p>
373
- </span>
374
- </div>
375
- </div>
376
- </div>
377
- `;
378
-
379
271
  export const vertical = () => `
380
272
  <div class="progress-stepper progress-stepper--vertical">
381
273
  <div class="progress-stepper__items" role="list">
@@ -546,116 +438,6 @@ export const verticalRTL = () => `
546
438
  </div>
547
439
  `;
548
440
 
549
- export const currentBubbleVertical = () => `
550
- <div class="progress-stepper progress-stepper--vertical">
551
- <div class="progress-stepper__items progress-stepper__items--current" role="list">
552
- <div class="progress-stepper__item" role="listitem">
553
- <span class="progress-stepper__icon">
554
- <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
555
- <use href="#icon-stepper-confirmation-24"></use>
556
- </svg>
557
- </span>
558
- <span class="progress-stepper__text">
559
- <h4>Started</h4>
560
- <p>July 3rd</p>
561
- </span>
562
- </div>
563
- <hr class="progress-stepper__separator" role="presentation" />
564
- <div class="progress-stepper__item" role="listitem">
565
- <span class="progress-stepper__icon">
566
- <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
567
- <use href="#icon-stepper-confirmation-24"></use>
568
- </svg>
569
- </span>
570
- <span class="progress-stepper__text">
571
- <h4>Shipped</h4>
572
- <p>July 4th</p>
573
- </span>
574
- </div>
575
- <hr class="progress-stepper__separator" role="presentation" />
576
- <div aria-current="step" class="progress-stepper__item" role="listitem">
577
- <span class="progress-stepper__icon">
578
- <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
579
- <use href="#icon-stepper-current-24"></use>
580
- </svg>
581
- </span>
582
- <span class="progress-stepper__text">
583
- <h4>Transit</h4>
584
- <p>July 5th</p>
585
- </span>
586
- </div>
587
- <hr class="progress-stepper__separator" role="presentation" />
588
- <div class="progress-stepper__item" role="listitem">
589
- <span class="progress-stepper__icon">
590
- <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
591
- <use href="#icon-stepper-upcoming-24"></use>
592
- </svg>
593
- </span>
594
- <span class="progress-stepper__text">
595
- <h4>Delivered</h4>
596
- <p>July 6th</p>
597
- </span>
598
- </div>
599
- </div>
600
- </div>
601
- `;
602
-
603
- export const currentBubbleVerticalRTL = () => `
604
- <div dir="rtl">
605
- <div class="progress-stepper progress-stepper--vertical">
606
- <div class="progress-stepper__items progress-stepper__items--current" role="list">
607
- <div class="progress-stepper__item" role="listitem">
608
- <span class="progress-stepper__icon">
609
- <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
610
- <use href="#icon-stepper-confirmation-24"></use>
611
- </svg>
612
- </span>
613
- <span class="progress-stepper__text">
614
- <h4>Started</h4>
615
- <p>July 3rd</p>
616
- </span>
617
- </div>
618
- <hr class="progress-stepper__separator" role="presentation" />
619
- <div class="progress-stepper__item" role="listitem">
620
- <span class="progress-stepper__icon">
621
- <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
622
- <use href="#icon-stepper-confirmation-24"></use>
623
- </svg>
624
- </span>
625
- <span class="progress-stepper__text">
626
- <h4>Shipped</h4>
627
- <p>July 4th</p>
628
- </span>
629
- </div>
630
- <hr class="progress-stepper__separator" role="presentation" />
631
- <div aria-current="step" class="progress-stepper__item" role="listitem">
632
- <span class="progress-stepper__icon">
633
- <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
634
- <use href="#icon-stepper-current-24"></use>
635
- </svg>
636
- </span>
637
- <span class="progress-stepper__text">
638
- <h4>Transit</h4>
639
- <p>July 5th</p>
640
- </span>
641
- </div>
642
- <hr class="progress-stepper__separator" role="presentation" />
643
- <div class="progress-stepper__item" role="listitem">
644
- <span class="progress-stepper__icon">
645
- <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
646
- <use href="#icon-stepper-upcoming-24"></use>
647
- </svg>
648
- </span>
649
- <span class="progress-stepper__text">
650
- <h4>Delivered</h4>
651
- <p>July 6th</p>
652
- </span>
653
- </div>
654
- </div>
655
- </div>
656
- </div>
657
- `;
658
-
659
441
  export const errorState = () => `
660
442
  <div class="progress-stepper">
661
443
  <div class="progress-stepper__items" role="list">
package/src/less/section-notice/stories/icon-24.stories.js CHANGED
@@ -181,8 +181,8 @@ export const RTL = () => `
181
181
  export const vault = () => `
182
182
  <div class="section-notice" role="region">
183
183
  <div class="section-notice__header" role="region" aria-roledescription="Notice">
184
- <svg aria-hidden="true" focusable="false" class="icon--the-ebay-vault-24-fit">
185
- <use href="#icon-the-ebay-vault-24-fit"></use>
184
+ <svg aria-hidden="true" focusable="false" class="icon--the-ebay-vault-24">
185
+ <use href="#icon-the-ebay-vault-24"></use>
186
186
  </svg>
187
187
  </div>
188
188
  <div class="section-notice__main">
@@ -229,8 +229,8 @@ export const selling = () => `
229
229
  export const warranty = () => `
230
230
  <div class="section-notice" role="region">
231
231
  <div class="section-notice__header" role="region" aria-roledescription="Notice">
232
- <svg aria-hidden="true" focusable="false" class="icon--free-warranty-24-fit">
233
- <use href="#icon-free-warranty-24-fit"></use>
232
+ <svg aria-hidden="true" focusable="false" class="icon--free-warranty-24">
233
+ <use href="#icon-free-warranty-24"></use>
234
234
  </svg>
235
235
  </div>
236
236
  <div class="section-notice__main">