@ebay/skin 16.0.0-0 → 16.0.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.
- package/.storybook/preview-head.html +28 -0
- package/_cdn/skin/{v16.0.0-0 → v16.0.0-1}/skin-default.min.css +2 -2
- package/_cdn/skin/{v16.0.0-0 → v16.0.0-1}/skin-full.min.css +2 -2
- package/_cdn/skin/{v16.0.0-0 → v16.0.0-1}/skin-headless.min.css +2 -2
- package/_cdn/skin/{v16.0.0-0 → v16.0.0-1}/skin-legacy.min.css +2 -2
- package/dist/icon/icon.css +16 -0
- package/dist/svg/icon/icon-stepper-attention-24.svg +6 -0
- package/dist/svg/icon/icon-stepper-confirmation-24.svg +6 -0
- package/dist/svg/icon/icon-stepper-current-24.svg +8 -0
- package/dist/svg/icon/icon-stepper-upcoming-24.svg +5 -0
- package/dist/svg/icons.svg +28 -0
- package/package.json +1 -1
- package/src/less/icon/generated/icon.less +16 -0
- package/src/less/progress-stepper/stories/progress-stepper.stories.js +65 -65
- package/src/svg/icon/icon-stepper-attention-24.svg +6 -0
- package/src/svg/icon/icon-stepper-confirmation-24.svg +6 -0
- package/src/svg/icon/icon-stepper-current-24.svg +8 -0
- package/src/svg/icon/icon-stepper-upcoming-24.svg +5 -0
- package/src/svg/icons.svg +28 -0
- package/svg.svg +28 -0
|
@@ -6,7 +6,7 @@ export const base = () => `
|
|
|
6
6
|
<div class="progress-stepper__item" role="listitem">
|
|
7
7
|
<span class="progress-stepper__icon">
|
|
8
8
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
9
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
9
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
10
10
|
</svg>
|
|
11
11
|
</span>
|
|
12
12
|
<span class="progress-stepper__text">
|
|
@@ -18,7 +18,7 @@ export const base = () => `
|
|
|
18
18
|
<div class="progress-stepper__item" role="listitem">
|
|
19
19
|
<span class="progress-stepper__icon">
|
|
20
20
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
21
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
21
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
22
22
|
</svg>
|
|
23
23
|
</span>
|
|
24
24
|
<span class="progress-stepper__text">
|
|
@@ -30,7 +30,7 @@ export const base = () => `
|
|
|
30
30
|
<div aria-current="step" class="progress-stepper__item" role="listitem">
|
|
31
31
|
<span class="progress-stepper__icon">
|
|
32
32
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
33
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
33
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
34
34
|
</svg>
|
|
35
35
|
</span>
|
|
36
36
|
<span class="progress-stepper__text">
|
|
@@ -41,7 +41,7 @@ export const base = () => `
|
|
|
41
41
|
<hr class="progress-stepper__separator" role="presentation" />
|
|
42
42
|
<div class="progress-stepper__item" role="listitem">
|
|
43
43
|
<svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
|
|
44
|
-
<use href="#icon-stepper-upcoming"></use>
|
|
44
|
+
<use href="#icon-stepper-upcoming-24"></use>
|
|
45
45
|
</svg>
|
|
46
46
|
<span class="progress-stepper__text">
|
|
47
47
|
<h4>Delivered</h4>
|
|
@@ -58,7 +58,7 @@ export const multipleUpcoming = () => `
|
|
|
58
58
|
<div aria-current="step" class="progress-stepper__item" role="listitem">
|
|
59
59
|
<span class="progress-stepper__icon">
|
|
60
60
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
61
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
61
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
62
62
|
</svg>
|
|
63
63
|
</span>
|
|
64
64
|
<span class="progress-stepper__text">
|
|
@@ -70,7 +70,7 @@ export const multipleUpcoming = () => `
|
|
|
70
70
|
<div class="progress-stepper__item" role="listitem">
|
|
71
71
|
<span class="progress-stepper__icon">
|
|
72
72
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
73
|
-
<use href="#icon-stepper-upcoming"></use>
|
|
73
|
+
<use href="#icon-stepper-upcoming-24"></use>
|
|
74
74
|
</svg>
|
|
75
75
|
</span>
|
|
76
76
|
<span class="progress-stepper__text">
|
|
@@ -82,7 +82,7 @@ export const multipleUpcoming = () => `
|
|
|
82
82
|
<div class="progress-stepper__item" role="listitem">
|
|
83
83
|
<span class="progress-stepper__icon">
|
|
84
84
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
85
|
-
<use href="#icon-stepper-upcoming"></use>
|
|
85
|
+
<use href="#icon-stepper-upcoming-24"></use>
|
|
86
86
|
</svg>
|
|
87
87
|
</span>
|
|
88
88
|
<span class="progress-stepper__text">
|
|
@@ -93,7 +93,7 @@ export const multipleUpcoming = () => `
|
|
|
93
93
|
<hr class="progress-stepper__separator" role="presentation" />
|
|
94
94
|
<div class="progress-stepper__item" role="listitem">
|
|
95
95
|
<svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
|
|
96
|
-
<use href="#icon-stepper-upcoming"></use>
|
|
96
|
+
<use href="#icon-stepper-upcoming-24"></use>
|
|
97
97
|
</svg>
|
|
98
98
|
<span class="progress-stepper__text">
|
|
99
99
|
<h4>Delivered</h4>
|
|
@@ -111,7 +111,7 @@ export const allSelected = () => `
|
|
|
111
111
|
<div class="progress-stepper__item" role="listitem">
|
|
112
112
|
<span class="progress-stepper__icon">
|
|
113
113
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
114
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
114
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
115
115
|
</svg>
|
|
116
116
|
</span>
|
|
117
117
|
<span class="progress-stepper__text">
|
|
@@ -123,7 +123,7 @@ export const allSelected = () => `
|
|
|
123
123
|
<div class="progress-stepper__item" role="listitem">
|
|
124
124
|
<span class="progress-stepper__icon">
|
|
125
125
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
126
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
126
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
127
127
|
</svg>
|
|
128
128
|
</span>
|
|
129
129
|
<span class="progress-stepper__text">
|
|
@@ -135,7 +135,7 @@ export const allSelected = () => `
|
|
|
135
135
|
<div class="progress-stepper__item" role="listitem">
|
|
136
136
|
<span class="progress-stepper__icon">
|
|
137
137
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
138
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
138
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
139
139
|
</svg>
|
|
140
140
|
</span>
|
|
141
141
|
<span class="progress-stepper__text">
|
|
@@ -147,7 +147,7 @@ export const allSelected = () => `
|
|
|
147
147
|
<div class="progress-stepper__item" role="listitem">
|
|
148
148
|
<span class="progress-stepper__icon">
|
|
149
149
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
150
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
150
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
151
151
|
</svg>
|
|
152
152
|
</span>
|
|
153
153
|
<span class="progress-stepper__text">
|
|
@@ -165,7 +165,7 @@ export const currentBubble = () => `
|
|
|
165
165
|
<div class="progress-stepper__item" role="listitem">
|
|
166
166
|
<span class="progress-stepper__icon">
|
|
167
167
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
168
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
168
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
169
169
|
</svg>
|
|
170
170
|
</span>
|
|
171
171
|
<span class="progress-stepper__text">
|
|
@@ -177,7 +177,7 @@ export const currentBubble = () => `
|
|
|
177
177
|
<div class="progress-stepper__item" role="listitem">
|
|
178
178
|
<span class="progress-stepper__icon">
|
|
179
179
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
180
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
180
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
181
181
|
</svg>
|
|
182
182
|
</span>
|
|
183
183
|
<span class="progress-stepper__text">
|
|
@@ -189,7 +189,7 @@ export const currentBubble = () => `
|
|
|
189
189
|
<div aria-current="step" class="progress-stepper__item" role="listitem">
|
|
190
190
|
<span class="progress-stepper__icon">
|
|
191
191
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
192
|
-
<use href="#icon-stepper-current"></use>
|
|
192
|
+
<use href="#icon-stepper-current-24"></use>
|
|
193
193
|
</svg>
|
|
194
194
|
</span>
|
|
195
195
|
<span class="progress-stepper__text">
|
|
@@ -201,7 +201,7 @@ export const currentBubble = () => `
|
|
|
201
201
|
<div class="progress-stepper__item" role="listitem">
|
|
202
202
|
<span class="progress-stepper__icon">
|
|
203
203
|
<svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
|
|
204
|
-
<use href="#icon-stepper-upcoming"></use>
|
|
204
|
+
<use href="#icon-stepper-upcoming-24"></use>
|
|
205
205
|
</svg>
|
|
206
206
|
</span>
|
|
207
207
|
<span class="progress-stepper__text">
|
|
@@ -219,7 +219,7 @@ export const noneSelected = () => `
|
|
|
219
219
|
<div class="progress-stepper__item" role="listitem">
|
|
220
220
|
<span class="progress-stepper__icon">
|
|
221
221
|
<svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
|
|
222
|
-
<use href="#icon-stepper-upcoming"></use>
|
|
222
|
+
<use href="#icon-stepper-upcoming-24"></use>
|
|
223
223
|
</svg>
|
|
224
224
|
</span>
|
|
225
225
|
<span class="progress-stepper__text">
|
|
@@ -231,7 +231,7 @@ export const noneSelected = () => `
|
|
|
231
231
|
<div class="progress-stepper__item" role="listitem">
|
|
232
232
|
<span class="progress-stepper__icon">
|
|
233
233
|
<svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
|
|
234
|
-
<use href="#icon-stepper-upcoming"></use>
|
|
234
|
+
<use href="#icon-stepper-upcoming-24"></use>
|
|
235
235
|
</svg>
|
|
236
236
|
</span>
|
|
237
237
|
<span class="progress-stepper__text">
|
|
@@ -243,7 +243,7 @@ export const noneSelected = () => `
|
|
|
243
243
|
<div class="progress-stepper__item" role="listitem">
|
|
244
244
|
<span class="progress-stepper__icon">
|
|
245
245
|
<svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
|
|
246
|
-
<use href="#icon-stepper-upcoming"></use>
|
|
246
|
+
<use href="#icon-stepper-upcoming-24"></use>
|
|
247
247
|
</svg>
|
|
248
248
|
</span>
|
|
249
249
|
<span class="progress-stepper__text">
|
|
@@ -255,7 +255,7 @@ export const noneSelected = () => `
|
|
|
255
255
|
<div class="progress-stepper__item" role="listitem">
|
|
256
256
|
<span class="progress-stepper__icon">
|
|
257
257
|
<svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
|
|
258
|
-
<use href="#icon-stepper-upcoming"></use>
|
|
258
|
+
<use href="#icon-stepper-upcoming-24"></use>
|
|
259
259
|
</svg>
|
|
260
260
|
</span>
|
|
261
261
|
<span class="progress-stepper__text">
|
|
@@ -273,7 +273,7 @@ export const RTL = () => `
|
|
|
273
273
|
<div class="progress-stepper__item" role="listitem">
|
|
274
274
|
<span class="progress-stepper__icon">
|
|
275
275
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
276
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
276
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
277
277
|
</svg>
|
|
278
278
|
</span>
|
|
279
279
|
<span class="progress-stepper__text">
|
|
@@ -285,7 +285,7 @@ export const RTL = () => `
|
|
|
285
285
|
<div class="progress-stepper__item" role="listitem">
|
|
286
286
|
<span class="progress-stepper__icon">
|
|
287
287
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
288
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
288
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
289
289
|
</svg>
|
|
290
290
|
</span>
|
|
291
291
|
<span class="progress-stepper__text">
|
|
@@ -297,7 +297,7 @@ export const RTL = () => `
|
|
|
297
297
|
<div aria-current="step" class="progress-stepper__item" role="listitem">
|
|
298
298
|
<span class="progress-stepper__icon">
|
|
299
299
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
300
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
300
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
301
301
|
</svg>
|
|
302
302
|
</span>
|
|
303
303
|
<span class="progress-stepper__text">
|
|
@@ -309,7 +309,7 @@ export const RTL = () => `
|
|
|
309
309
|
<div class="progress-stepper__item" role="listitem">
|
|
310
310
|
<span class="progress-stepper__icon">
|
|
311
311
|
<svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
|
|
312
|
-
<use href="#icon-stepper-upcoming"></use>
|
|
312
|
+
<use href="#icon-stepper-upcoming-24"></use>
|
|
313
313
|
</svg>
|
|
314
314
|
</span>
|
|
315
315
|
<span class="progress-stepper__text">
|
|
@@ -328,7 +328,7 @@ export const currentBubbleRTL = () => `
|
|
|
328
328
|
<div class="progress-stepper__item" role="listitem">
|
|
329
329
|
<span class="progress-stepper__icon">
|
|
330
330
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
331
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
331
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
332
332
|
</svg>
|
|
333
333
|
</span>
|
|
334
334
|
<span class="progress-stepper__text">
|
|
@@ -340,7 +340,7 @@ export const currentBubbleRTL = () => `
|
|
|
340
340
|
<div class="progress-stepper__item" role="listitem">
|
|
341
341
|
<span class="progress-stepper__icon">
|
|
342
342
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
343
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
343
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
344
344
|
</svg>
|
|
345
345
|
</span>
|
|
346
346
|
<span class="progress-stepper__text">
|
|
@@ -352,7 +352,7 @@ export const currentBubbleRTL = () => `
|
|
|
352
352
|
<div aria-current="step" class="progress-stepper__item" role="listitem">
|
|
353
353
|
<span class="progress-stepper__icon">
|
|
354
354
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
355
|
-
<use href="#icon-stepper-current"></use>
|
|
355
|
+
<use href="#icon-stepper-current-24"></use>
|
|
356
356
|
</svg>
|
|
357
357
|
</span>
|
|
358
358
|
<span class="progress-stepper__text">
|
|
@@ -364,7 +364,7 @@ export const currentBubbleRTL = () => `
|
|
|
364
364
|
<div class="progress-stepper__item" role="listitem">
|
|
365
365
|
<span class="progress-stepper__icon">
|
|
366
366
|
<svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
|
|
367
|
-
<use href="#icon-stepper-upcoming"></use>
|
|
367
|
+
<use href="#icon-stepper-upcoming-24"></use>
|
|
368
368
|
</svg>
|
|
369
369
|
</span>
|
|
370
370
|
<span class="progress-stepper__text">
|
|
@@ -382,7 +382,7 @@ export const vertical = () => `
|
|
|
382
382
|
<div class="progress-stepper__item" role="listitem">
|
|
383
383
|
<span class="progress-stepper__icon">
|
|
384
384
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
385
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
385
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
386
386
|
</svg>
|
|
387
387
|
</span>
|
|
388
388
|
<span class="progress-stepper__text">
|
|
@@ -395,7 +395,7 @@ export const vertical = () => `
|
|
|
395
395
|
<div aria-current="step" class="progress-stepper__item" role="listitem">
|
|
396
396
|
<span class="progress-stepper__icon">
|
|
397
397
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
398
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
398
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
399
399
|
</svg>
|
|
400
400
|
</span>
|
|
401
401
|
<span class="progress-stepper__text">
|
|
@@ -407,7 +407,7 @@ export const vertical = () => `
|
|
|
407
407
|
<div class="progress-stepper__item" role="listitem">
|
|
408
408
|
<span class="progress-stepper__icon">
|
|
409
409
|
<svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
|
|
410
|
-
<use href="#icon-stepper-upcoming"></use>
|
|
410
|
+
<use href="#icon-stepper-upcoming-24"></use>
|
|
411
411
|
</svg>
|
|
412
412
|
</span>
|
|
413
413
|
<span class="progress-stepper__text">
|
|
@@ -425,7 +425,7 @@ export const verticalUpcoming = () => `
|
|
|
425
425
|
<div aria-current="current" class="progress-stepper__item" role="listitem">
|
|
426
426
|
<span class="progress-stepper__icon">
|
|
427
427
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
428
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
428
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
429
429
|
</svg>
|
|
430
430
|
</span>
|
|
431
431
|
<span class="progress-stepper__text">
|
|
@@ -438,7 +438,7 @@ export const verticalUpcoming = () => `
|
|
|
438
438
|
<div class="progress-stepper__item" role="listitem">
|
|
439
439
|
<span class="progress-stepper__icon">
|
|
440
440
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
441
|
-
<use href="#icon-stepper-upcoming"></use>
|
|
441
|
+
<use href="#icon-stepper-upcoming-24"></use>
|
|
442
442
|
</svg>
|
|
443
443
|
</span>
|
|
444
444
|
<span class="progress-stepper__text">
|
|
@@ -450,7 +450,7 @@ export const verticalUpcoming = () => `
|
|
|
450
450
|
<div class="progress-stepper__item" role="listitem">
|
|
451
451
|
<span class="progress-stepper__icon">
|
|
452
452
|
<svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
|
|
453
|
-
<use href="#icon-stepper-upcoming"></use>
|
|
453
|
+
<use href="#icon-stepper-upcoming-24"></use>
|
|
454
454
|
</svg>
|
|
455
455
|
</span>
|
|
456
456
|
<span class="progress-stepper__text">
|
|
@@ -468,7 +468,7 @@ export const verticalSingleLine = () => `
|
|
|
468
468
|
<div class="progress-stepper__item" role="listitem">
|
|
469
469
|
<span class="progress-stepper__icon">
|
|
470
470
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
471
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
471
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
472
472
|
</svg>
|
|
473
473
|
</span>
|
|
474
474
|
<span class="progress-stepper__text">
|
|
@@ -479,7 +479,7 @@ export const verticalSingleLine = () => `
|
|
|
479
479
|
<div aria-current="step" class="progress-stepper__item" role="listitem">
|
|
480
480
|
<span class="progress-stepper__icon">
|
|
481
481
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
482
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
482
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
483
483
|
</svg>
|
|
484
484
|
</span>
|
|
485
485
|
<span class="progress-stepper__text">
|
|
@@ -490,7 +490,7 @@ export const verticalSingleLine = () => `
|
|
|
490
490
|
<div class="progress-stepper__item" role="listitem">
|
|
491
491
|
<span class="progress-stepper__icon">
|
|
492
492
|
<svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
|
|
493
|
-
<use href="#icon-stepper-upcoming"></use>
|
|
493
|
+
<use href="#icon-stepper-upcoming-24"></use>
|
|
494
494
|
</svg>
|
|
495
495
|
</span>
|
|
496
496
|
<span class="progress-stepper__text">
|
|
@@ -508,7 +508,7 @@ export const verticalRTL = () => `
|
|
|
508
508
|
<div class="progress-stepper__item" role="listitem">
|
|
509
509
|
<span class="progress-stepper__icon">
|
|
510
510
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
511
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
511
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
512
512
|
</svg>
|
|
513
513
|
</span>
|
|
514
514
|
<span class="progress-stepper__text">
|
|
@@ -521,7 +521,7 @@ export const verticalRTL = () => `
|
|
|
521
521
|
<div aria-current="step" class="progress-stepper__item" role="listitem">
|
|
522
522
|
<span class="progress-stepper__icon">
|
|
523
523
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
524
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
524
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
525
525
|
</svg>
|
|
526
526
|
</span>
|
|
527
527
|
<span class="progress-stepper__text">
|
|
@@ -533,7 +533,7 @@ export const verticalRTL = () => `
|
|
|
533
533
|
<div class="progress-stepper__item" role="listitem">
|
|
534
534
|
<span class="progress-stepper__icon">
|
|
535
535
|
<svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
|
|
536
|
-
<use href="#icon-stepper-upcoming"></use>
|
|
536
|
+
<use href="#icon-stepper-upcoming-24"></use>
|
|
537
537
|
</svg>
|
|
538
538
|
</span>
|
|
539
539
|
<span class="progress-stepper__text">
|
|
@@ -552,7 +552,7 @@ export const currentBubbleVertical = () => `
|
|
|
552
552
|
<div class="progress-stepper__item" role="listitem">
|
|
553
553
|
<span class="progress-stepper__icon">
|
|
554
554
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
555
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
555
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
556
556
|
</svg>
|
|
557
557
|
</span>
|
|
558
558
|
<span class="progress-stepper__text">
|
|
@@ -564,7 +564,7 @@ export const currentBubbleVertical = () => `
|
|
|
564
564
|
<div class="progress-stepper__item" role="listitem">
|
|
565
565
|
<span class="progress-stepper__icon">
|
|
566
566
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
567
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
567
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
568
568
|
</svg>
|
|
569
569
|
</span>
|
|
570
570
|
<span class="progress-stepper__text">
|
|
@@ -576,7 +576,7 @@ export const currentBubbleVertical = () => `
|
|
|
576
576
|
<div aria-current="step" class="progress-stepper__item" role="listitem">
|
|
577
577
|
<span class="progress-stepper__icon">
|
|
578
578
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
579
|
-
<use href="#icon-stepper-current"></use>
|
|
579
|
+
<use href="#icon-stepper-current-24"></use>
|
|
580
580
|
</svg>
|
|
581
581
|
</span>
|
|
582
582
|
<span class="progress-stepper__text">
|
|
@@ -588,7 +588,7 @@ export const currentBubbleVertical = () => `
|
|
|
588
588
|
<div class="progress-stepper__item" role="listitem">
|
|
589
589
|
<span class="progress-stepper__icon">
|
|
590
590
|
<svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
|
|
591
|
-
<use href="#icon-stepper-upcoming"></use>
|
|
591
|
+
<use href="#icon-stepper-upcoming-24"></use>
|
|
592
592
|
</svg>
|
|
593
593
|
</span>
|
|
594
594
|
<span class="progress-stepper__text">
|
|
@@ -607,7 +607,7 @@ export const currentBubbleVerticalRTL = () => `
|
|
|
607
607
|
<div class="progress-stepper__item" role="listitem">
|
|
608
608
|
<span class="progress-stepper__icon">
|
|
609
609
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
610
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
610
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
611
611
|
</svg>
|
|
612
612
|
</span>
|
|
613
613
|
<span class="progress-stepper__text">
|
|
@@ -619,7 +619,7 @@ export const currentBubbleVerticalRTL = () => `
|
|
|
619
619
|
<div class="progress-stepper__item" role="listitem">
|
|
620
620
|
<span class="progress-stepper__icon">
|
|
621
621
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
622
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
622
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
623
623
|
</svg>
|
|
624
624
|
</span>
|
|
625
625
|
<span class="progress-stepper__text">
|
|
@@ -631,7 +631,7 @@ export const currentBubbleVerticalRTL = () => `
|
|
|
631
631
|
<div aria-current="step" class="progress-stepper__item" role="listitem">
|
|
632
632
|
<span class="progress-stepper__icon">
|
|
633
633
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
634
|
-
<use href="#icon-stepper-current"></use>
|
|
634
|
+
<use href="#icon-stepper-current-24"></use>
|
|
635
635
|
</svg>
|
|
636
636
|
</span>
|
|
637
637
|
<span class="progress-stepper__text">
|
|
@@ -643,7 +643,7 @@ export const currentBubbleVerticalRTL = () => `
|
|
|
643
643
|
<div class="progress-stepper__item" role="listitem">
|
|
644
644
|
<span class="progress-stepper__icon">
|
|
645
645
|
<svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
|
|
646
|
-
<use href="#icon-stepper-upcoming"></use>
|
|
646
|
+
<use href="#icon-stepper-upcoming-24"></use>
|
|
647
647
|
</svg>
|
|
648
648
|
</span>
|
|
649
649
|
<span class="progress-stepper__text">
|
|
@@ -662,7 +662,7 @@ export const errorState = () => `
|
|
|
662
662
|
<div class="progress-stepper__item" role="listitem">
|
|
663
663
|
<span class="progress-stepper__icon">
|
|
664
664
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
665
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
665
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
666
666
|
</svg>
|
|
667
667
|
</span>
|
|
668
668
|
<span class="progress-stepper__text">
|
|
@@ -674,7 +674,7 @@ export const errorState = () => `
|
|
|
674
674
|
<div aria-current="step" class="progress-stepper__item progress-stepper__item--attention" role="listitem">
|
|
675
675
|
<span class="progress-stepper__icon">
|
|
676
676
|
<svg aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
677
|
-
<use href="#icon-stepper-attention"></use>
|
|
677
|
+
<use href="#icon-stepper-attention-24"></use>
|
|
678
678
|
</svg>
|
|
679
679
|
</span>
|
|
680
680
|
<span class="progress-stepper__text">
|
|
@@ -686,7 +686,7 @@ export const errorState = () => `
|
|
|
686
686
|
<div class="progress-stepper__item" role="listitem">
|
|
687
687
|
<span class="progress-stepper__icon">
|
|
688
688
|
<svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
|
|
689
|
-
<use href="#icon-stepper-upcoming"></use>
|
|
689
|
+
<use href="#icon-stepper-upcoming-24"></use>
|
|
690
690
|
</svg>
|
|
691
691
|
</span>
|
|
692
692
|
<span class="progress-stepper__text">
|
|
@@ -703,7 +703,7 @@ export const errorStateVertical = () => `
|
|
|
703
703
|
<div class="progress-stepper__item" role="listitem">
|
|
704
704
|
<span class="progress-stepper__icon">
|
|
705
705
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
706
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
706
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
707
707
|
</svg>
|
|
708
708
|
</span>
|
|
709
709
|
<span class="progress-stepper__text">
|
|
@@ -715,7 +715,7 @@ export const errorStateVertical = () => `
|
|
|
715
715
|
<div aria-current="step" class="progress-stepper__item progress-stepper__item--attention" role="listitem">
|
|
716
716
|
<span class="progress-stepper__icon">
|
|
717
717
|
<svg aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
718
|
-
<use href="#icon-stepper-attention"></use>
|
|
718
|
+
<use href="#icon-stepper-attention-24"></use>
|
|
719
719
|
</svg>
|
|
720
720
|
</span>
|
|
721
721
|
<span class="progress-stepper__text">
|
|
@@ -727,7 +727,7 @@ export const errorStateVertical = () => `
|
|
|
727
727
|
<div class="progress-stepper__item" role="listitem">
|
|
728
728
|
<span class="progress-stepper__icon">
|
|
729
729
|
<svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
|
|
730
|
-
<use href="#icon-stepper-upcoming"></use>
|
|
730
|
+
<use href="#icon-stepper-upcoming-24"></use>
|
|
731
731
|
</svg>
|
|
732
732
|
</span>
|
|
733
733
|
<span class="progress-stepper__text">
|
|
@@ -744,7 +744,7 @@ export const allSelectedVertical = () => `
|
|
|
744
744
|
<div class="progress-stepper__item" role="listitem">
|
|
745
745
|
<span class="progress-stepper__icon">
|
|
746
746
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
747
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
747
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
748
748
|
</svg>
|
|
749
749
|
</span>
|
|
750
750
|
<span class="progress-stepper__text">
|
|
@@ -756,7 +756,7 @@ export const allSelectedVertical = () => `
|
|
|
756
756
|
<div class="progress-stepper__item" role="listitem">
|
|
757
757
|
<span class="progress-stepper__icon">
|
|
758
758
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
759
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
759
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
760
760
|
</svg>
|
|
761
761
|
</span>
|
|
762
762
|
<span class="progress-stepper__text">
|
|
@@ -768,7 +768,7 @@ export const allSelectedVertical = () => `
|
|
|
768
768
|
<div class="progress-stepper__item" role="listitem">
|
|
769
769
|
<span class="progress-stepper__icon">
|
|
770
770
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
771
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
771
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
772
772
|
</svg>
|
|
773
773
|
</span>
|
|
774
774
|
<span class="progress-stepper__text">
|
|
@@ -780,7 +780,7 @@ export const allSelectedVertical = () => `
|
|
|
780
780
|
<div class="progress-stepper__item" role="listitem">
|
|
781
781
|
<span class="progress-stepper__icon">
|
|
782
782
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
783
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
783
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
784
784
|
</svg>
|
|
785
785
|
</span>
|
|
786
786
|
<span class="progress-stepper__text">
|
|
@@ -798,7 +798,7 @@ export const noneSelectedVertical = () => `
|
|
|
798
798
|
<div class="progress-stepper__item" role="listitem">
|
|
799
799
|
<span class="progress-stepper__icon">
|
|
800
800
|
<svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
|
|
801
|
-
<use href="#icon-stepper-upcoming"></use>
|
|
801
|
+
<use href="#icon-stepper-upcoming-24"></use>
|
|
802
802
|
</svg>
|
|
803
803
|
</span>
|
|
804
804
|
<span class="progress-stepper__text">
|
|
@@ -810,7 +810,7 @@ export const noneSelectedVertical = () => `
|
|
|
810
810
|
<div class="progress-stepper__item" role="listitem">
|
|
811
811
|
<span class="progress-stepper__icon">
|
|
812
812
|
<svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
|
|
813
|
-
<use href="#icon-stepper-upcoming"></use>
|
|
813
|
+
<use href="#icon-stepper-upcoming-24"></use>
|
|
814
814
|
</svg>
|
|
815
815
|
</span>
|
|
816
816
|
<span class="progress-stepper__text">
|
|
@@ -822,7 +822,7 @@ export const noneSelectedVertical = () => `
|
|
|
822
822
|
<div class="progress-stepper__item" role="listitem">
|
|
823
823
|
<span class="progress-stepper__icon">
|
|
824
824
|
<svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
|
|
825
|
-
<use href="#icon-stepper-upcoming"></use>
|
|
825
|
+
<use href="#icon-stepper-upcoming-24"></use>
|
|
826
826
|
</svg>
|
|
827
827
|
</span>
|
|
828
828
|
<span class="progress-stepper__text">
|
|
@@ -834,7 +834,7 @@ export const noneSelectedVertical = () => `
|
|
|
834
834
|
<div class="progress-stepper__item" role="listitem">
|
|
835
835
|
<span class="progress-stepper__icon">
|
|
836
836
|
<svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
|
|
837
|
-
<use href="#icon-stepper-upcoming"></use>
|
|
837
|
+
<use href="#icon-stepper-upcoming-24"></use>
|
|
838
838
|
</svg>
|
|
839
839
|
</span>
|
|
840
840
|
<span class="progress-stepper__text">
|
|
@@ -853,7 +853,7 @@ export const smallScreens = () => `
|
|
|
853
853
|
<div class="progress-stepper__item" role="listitem">
|
|
854
854
|
<span class="progress-stepper__icon">
|
|
855
855
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
856
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
856
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
857
857
|
</svg>
|
|
858
858
|
</span>
|
|
859
859
|
<span class="progress-stepper__text">
|
|
@@ -865,7 +865,7 @@ export const smallScreens = () => `
|
|
|
865
865
|
<div aria-current="step" class="progress-stepper__item" role="listitem">
|
|
866
866
|
<span class="progress-stepper__icon">
|
|
867
867
|
<svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
|
|
868
|
-
<use href="#icon-stepper-confirmation"></use>
|
|
868
|
+
<use href="#icon-stepper-confirmation-24"></use>
|
|
869
869
|
</svg>
|
|
870
870
|
</span>
|
|
871
871
|
<span class="progress-stepper__text">
|
|
@@ -876,7 +876,7 @@ export const smallScreens = () => `
|
|
|
876
876
|
<hr class="progress-stepper__separator" role="presentation" />
|
|
877
877
|
<div class="progress-stepper__item" role="listitem">
|
|
878
878
|
<svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
|
|
879
|
-
<use href="#icon-stepper-upcoming"></use>
|
|
879
|
+
<use href="#icon-stepper-upcoming-24"></use>
|
|
880
880
|
</svg>
|
|
881
881
|
<span class="progress-stepper__text">
|
|
882
882
|
<h4>Ruckerstattung</h4>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path
|
|
3
|
+
d="M0 12C0 5.373 5.373 0 12 0c6.625.006 11.994 5.375 12 12 0 6.627-5.373 12-12 12S0 18.627 0 12zm2 0c0 5.523 4.477 10 10 10 5.52-.006 9.994-4.48 10-10 0-5.523-4.477-10-10-10S2 6.477 2 12zm10-6a1 1 0 011 1v6a1 1 0 01-2 0V7a1 1 0 011-1zm1 11a1 1 0 11-2 0 1 1 0 012 0z"
|
|
4
|
+
fill="var(--progress-stepper-attention-icon, var(--color-foreground-attention))"
|
|
5
|
+
/>
|
|
6
|
+
</svg>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path
|
|
3
|
+
d="M0 12C0 5.373 5.373 0 12 0c3.183 0 6.235 1.264 8.485 3.515A11.996 11.996 0 0124 12c0 6.627-5.373 12-12 12S0 18.627 0 12zm10.71 4.71l8-8h-.01a1 1 0 00-1.41-1.41L10 14.59 6.71 11.3a1 1 0 00-1.41 1.41l4 4a1 1 0 001.41 0z"
|
|
4
|
+
fill="var(--progress-stepper-confirmation-icon, var(--color-background-information))"
|
|
5
|
+
/>
|
|
6
|
+
</svg>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path
|
|
3
|
+
fill-rule="evenodd"
|
|
4
|
+
d="M2 12C2 6.476 6.478 2 12 2s10 4.476 10 10c0 5.522-4.478 10-10 10S2 17.522 2 12ZM12 0C5.373 0 0 5.372 0 12c0 6.627 5.373 12 12 12s12-5.373 12-12c0-6.628-5.373-12-12-12Zm0 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"
|
|
5
|
+
clip-rule="evenodd"
|
|
6
|
+
fill="var(--progress-stepper-current-icon, var(--color-background-information))"
|
|
7
|
+
/>
|
|
8
|
+
</svg>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2.5C6.47759 2.5 2 6.97649 2 12.5C2 18.0223 6.47775 22.5 12 22.5C17.5223 22.5 22 18.0223 22 12.5C22 6.97649 17.5224 2.5 12 2.5ZM0 12.5C0 5.87176 5.37318 0.5 12 0.5C18.6268 0.5 24 5.87176 24 12.5C24 19.1268 18.6268 24.5 12 24.5C5.37318 24.5 0 19.1268 0 12.5Z"
|
|
3
|
+
fill="var(--progress-stepper-upcoming-icon, var(--color-background-disabled))"
|
|
4
|
+
/>
|
|
5
|
+
</svg>
|