mautourco-components 0.2.119 → 0.2.121
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/dist/components/molecules/FeatureRow/FeatureRow.css +19 -7
- package/dist/components/organisms/CarBookingCard/CarBookingCard.css +22 -9
- package/dist/components/organisms/PaxSelector/PaxSelector.js +1 -0
- package/package.json +1 -1
- package/src/components/molecules/FeatureRow/FeatureRow.css +19 -8
- package/src/components/organisms/CarBookingCard/CarBookingCard.css +22 -11
- package/src/components/organisms/PaxSelector/PaxSelector.tsx +1 -0
|
@@ -4,9 +4,14 @@
|
|
|
4
4
|
|
|
5
5
|
.feature-row {
|
|
6
6
|
display: flex;
|
|
7
|
-
|
|
8
|
-
gap: var(--spacing-gap-gap-
|
|
7
|
+
flex-direction: column;
|
|
8
|
+
gap: var(--spacing-gap-gap-1, 4px);
|
|
9
9
|
padding: var(--spacing-padding-py-0, 0px) var(--spacing-padding-px-0, 0px);
|
|
10
|
+
@media (width >= 1536px) {
|
|
11
|
+
flex-direction: row;
|
|
12
|
+
align-items: center;
|
|
13
|
+
gap: var(--spacing-gap-gap-3, 12px);
|
|
14
|
+
}
|
|
10
15
|
}
|
|
11
16
|
|
|
12
17
|
.feature-row__label {
|
|
@@ -19,7 +24,9 @@
|
|
|
19
24
|
}
|
|
20
25
|
|
|
21
26
|
.feature-row__label-text {
|
|
22
|
-
font-family:
|
|
27
|
+
font-family:
|
|
28
|
+
var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
|
|
29
|
+
sans-serif;
|
|
23
30
|
font-weight: var(--font-weight-font-bold, 700);
|
|
24
31
|
font-size: var(--font-size-text-base, 16px);
|
|
25
32
|
line-height: calc(var(--font-leading-leading-md, 24) * 1px);
|
|
@@ -28,9 +35,12 @@
|
|
|
28
35
|
}
|
|
29
36
|
|
|
30
37
|
.feature-row__divider {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
38
|
+
display: none;
|
|
39
|
+
@media (width >= 1536px) {
|
|
40
|
+
flex-shrink: 0;
|
|
41
|
+
height: 17px;
|
|
42
|
+
width: var(--divider-border-width-default, 1px);
|
|
43
|
+
}
|
|
34
44
|
}
|
|
35
45
|
|
|
36
46
|
.feature-row__value {
|
|
@@ -47,7 +57,9 @@
|
|
|
47
57
|
}
|
|
48
58
|
|
|
49
59
|
.feature-row__value-text {
|
|
50
|
-
font-family:
|
|
60
|
+
font-family:
|
|
61
|
+
var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
|
|
62
|
+
sans-serif;
|
|
51
63
|
font-weight: var(--font-weight-font-normal, 400);
|
|
52
64
|
font-size: var(--font-size-text-sm, 14px);
|
|
53
65
|
line-height: calc(var(--font-leading-leading-sm, 20) * 1px);
|
|
@@ -200,9 +200,12 @@
|
|
|
200
200
|
display: flex;
|
|
201
201
|
flex-direction: column;
|
|
202
202
|
/* Figma uses a slightly larger inter-row gap (14px) */
|
|
203
|
-
gap: var(--spacing-gap-gap-
|
|
204
|
-
/* Figma: pl 10px for the features block */
|
|
203
|
+
gap: var(--spacing-gap-gap-4, 16px);
|
|
205
204
|
padding-left: var(--spacing-padding-px-2-5, 10px);
|
|
205
|
+
/* Figma: pl 10px for the features block */
|
|
206
|
+
@media (width >= 1536px) {
|
|
207
|
+
gap: var(--spacing-gap-gap-3-5, 14px);
|
|
208
|
+
}
|
|
206
209
|
}
|
|
207
210
|
|
|
208
211
|
.car-booking-card__info {
|
|
@@ -266,14 +269,18 @@
|
|
|
266
269
|
gap: var(--spacing-gap-gap-2, 8px);
|
|
267
270
|
padding: var(--spacing-padding-py-3, 12px) var(--spacing-padding-px-4, 16px);
|
|
268
271
|
background: var(--color-elevation-level-1, #ffffff);
|
|
269
|
-
border: var(--input-border-width-default, 1px) solid
|
|
272
|
+
border: var(--input-border-width-default, 1px) solid
|
|
273
|
+
var(--color-border-default, #d4d4d4);
|
|
270
274
|
border-radius: var(--border-radius-rounded-xl, 12px);
|
|
271
|
-
font-family:
|
|
275
|
+
font-family:
|
|
276
|
+
var(--font-font-family-body, 'Satoshi'), 'Inter', 'Segoe UI', 'system-ui', sans-serif;
|
|
272
277
|
font-size: var(--font-size-text-base, 16px);
|
|
273
278
|
line-height: calc(var(--font-leading-leading-md, 24) * 1px);
|
|
274
279
|
color: var(--color-text-default, #262626);
|
|
275
280
|
cursor: pointer;
|
|
276
|
-
transition:
|
|
281
|
+
transition:
|
|
282
|
+
border-color 0.2s ease,
|
|
283
|
+
background-color 0.2s ease;
|
|
277
284
|
min-height: 48px;
|
|
278
285
|
}
|
|
279
286
|
|
|
@@ -282,7 +289,8 @@
|
|
|
282
289
|
}
|
|
283
290
|
|
|
284
291
|
.car-booking-card__supplement-trigger:focus {
|
|
285
|
-
outline: var(--border-width-focus, 2px) solid
|
|
292
|
+
outline: var(--border-width-focus, 2px) solid
|
|
293
|
+
var(--color-border-active-default, #0f7173);
|
|
286
294
|
outline-offset: var(--spacing-base-0-5, 2px);
|
|
287
295
|
}
|
|
288
296
|
|
|
@@ -297,7 +305,8 @@
|
|
|
297
305
|
font-weight: var(--font-weight-font-regular, 400);
|
|
298
306
|
}
|
|
299
307
|
|
|
300
|
-
.car-booking-card__supplement-trigger--has-value
|
|
308
|
+
.car-booking-card__supplement-trigger--has-value
|
|
309
|
+
.car-booking-card__supplement-placeholder {
|
|
301
310
|
color: var(--color-text-default, #262626);
|
|
302
311
|
}
|
|
303
312
|
|
|
@@ -312,7 +321,9 @@
|
|
|
312
321
|
/* Ensure chips are properly interactive within the button */
|
|
313
322
|
.car-booking-card__supplement-chips .chip {
|
|
314
323
|
cursor: pointer;
|
|
315
|
-
transition:
|
|
324
|
+
transition:
|
|
325
|
+
opacity 0.15s ease,
|
|
326
|
+
transform 0.15s ease;
|
|
316
327
|
-webkit-user-select: none;
|
|
317
328
|
user-select: none;
|
|
318
329
|
}
|
|
@@ -337,7 +348,9 @@
|
|
|
337
348
|
|
|
338
349
|
/* Transition for chip icons */
|
|
339
350
|
.car-booking-card__supplement-chips .chip .chip__icon--trailing {
|
|
340
|
-
transition:
|
|
351
|
+
transition:
|
|
352
|
+
transform 0.15s ease,
|
|
353
|
+
opacity 0.15s ease;
|
|
341
354
|
opacity: 0.8;
|
|
342
355
|
}
|
|
343
356
|
|
|
@@ -271,6 +271,7 @@ var PaxSelector = function (_a) {
|
|
|
271
271
|
if (!hasMinorsWithoutAges() || areAllAgesFilled()) {
|
|
272
272
|
setIsOpen(false);
|
|
273
273
|
onDone === null || onDone === void 0 ? void 0 : onDone(multipleRooms ? rooms : internalData);
|
|
274
|
+
onPaxInvalid === null || onPaxInvalid === void 0 ? void 0 : onPaxInvalid(false);
|
|
274
275
|
}
|
|
275
276
|
};
|
|
276
277
|
var handleAddRoom = function () {
|
package/package.json
CHANGED
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
.feature-row {
|
|
2
2
|
display: flex;
|
|
3
|
-
|
|
4
|
-
gap: var(--spacing-gap-gap-
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
gap: var(--spacing-gap-gap-1, 4px);
|
|
5
5
|
padding: var(--spacing-padding-py-0, 0px) var(--spacing-padding-px-0, 0px);
|
|
6
|
+
@media (width >= 1536px) {
|
|
7
|
+
flex-direction: row;
|
|
8
|
+
align-items: center;
|
|
9
|
+
gap: var(--spacing-gap-gap-3, 12px);
|
|
10
|
+
}
|
|
6
11
|
}
|
|
7
12
|
|
|
8
13
|
.feature-row__label {
|
|
@@ -15,7 +20,9 @@
|
|
|
15
20
|
}
|
|
16
21
|
|
|
17
22
|
.feature-row__label-text {
|
|
18
|
-
font-family:
|
|
23
|
+
font-family:
|
|
24
|
+
var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
|
|
25
|
+
sans-serif;
|
|
19
26
|
font-weight: var(--font-weight-font-bold, 700);
|
|
20
27
|
font-size: var(--font-size-text-base, 16px);
|
|
21
28
|
line-height: calc(var(--font-leading-leading-md, 24) * 1px);
|
|
@@ -24,9 +31,12 @@
|
|
|
24
31
|
}
|
|
25
32
|
|
|
26
33
|
.feature-row__divider {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
34
|
+
display: none;
|
|
35
|
+
@media (width >= 1536px) {
|
|
36
|
+
flex-shrink: 0;
|
|
37
|
+
height: 17px;
|
|
38
|
+
width: var(--divider-border-width-default, 1px);
|
|
39
|
+
}
|
|
30
40
|
}
|
|
31
41
|
|
|
32
42
|
.feature-row__value {
|
|
@@ -43,7 +53,9 @@
|
|
|
43
53
|
}
|
|
44
54
|
|
|
45
55
|
.feature-row__value-text {
|
|
46
|
-
font-family:
|
|
56
|
+
font-family:
|
|
57
|
+
var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
|
|
58
|
+
sans-serif;
|
|
47
59
|
font-weight: var(--font-weight-font-normal, 400);
|
|
48
60
|
font-size: var(--font-size-text-sm, 14px);
|
|
49
61
|
line-height: calc(var(--font-leading-leading-sm, 20) * 1px);
|
|
@@ -57,4 +69,3 @@
|
|
|
57
69
|
.feature-row__value-text--not-applicable {
|
|
58
70
|
color: var(--color-messaging-danger-foreground, #a01414);
|
|
59
71
|
}
|
|
60
|
-
|
|
@@ -196,9 +196,12 @@
|
|
|
196
196
|
display: flex;
|
|
197
197
|
flex-direction: column;
|
|
198
198
|
/* Figma uses a slightly larger inter-row gap (14px) */
|
|
199
|
-
gap: var(--spacing-gap-gap-
|
|
200
|
-
/* Figma: pl 10px for the features block */
|
|
199
|
+
gap: var(--spacing-gap-gap-4, 16px);
|
|
201
200
|
padding-left: var(--spacing-padding-px-2-5, 10px);
|
|
201
|
+
/* Figma: pl 10px for the features block */
|
|
202
|
+
@media (width >= 1536px) {
|
|
203
|
+
gap: var(--spacing-gap-gap-3-5, 14px);
|
|
204
|
+
}
|
|
202
205
|
}
|
|
203
206
|
|
|
204
207
|
.car-booking-card__info {
|
|
@@ -262,14 +265,18 @@
|
|
|
262
265
|
gap: var(--spacing-gap-gap-2, 8px);
|
|
263
266
|
padding: var(--spacing-padding-py-3, 12px) var(--spacing-padding-px-4, 16px);
|
|
264
267
|
background: var(--color-elevation-level-1, #ffffff);
|
|
265
|
-
border: var(--input-border-width-default, 1px) solid
|
|
268
|
+
border: var(--input-border-width-default, 1px) solid
|
|
269
|
+
var(--color-border-default, #d4d4d4);
|
|
266
270
|
border-radius: var(--border-radius-rounded-xl, 12px);
|
|
267
|
-
font-family:
|
|
271
|
+
font-family:
|
|
272
|
+
var(--font-font-family-body, 'Satoshi'), 'Inter', 'Segoe UI', 'system-ui', sans-serif;
|
|
268
273
|
font-size: var(--font-size-text-base, 16px);
|
|
269
274
|
line-height: calc(var(--font-leading-leading-md, 24) * 1px);
|
|
270
275
|
color: var(--color-text-default, #262626);
|
|
271
276
|
cursor: pointer;
|
|
272
|
-
transition:
|
|
277
|
+
transition:
|
|
278
|
+
border-color 0.2s ease,
|
|
279
|
+
background-color 0.2s ease;
|
|
273
280
|
min-height: 48px;
|
|
274
281
|
}
|
|
275
282
|
|
|
@@ -278,7 +285,8 @@
|
|
|
278
285
|
}
|
|
279
286
|
|
|
280
287
|
.car-booking-card__supplement-trigger:focus {
|
|
281
|
-
outline: var(--border-width-focus, 2px) solid
|
|
288
|
+
outline: var(--border-width-focus, 2px) solid
|
|
289
|
+
var(--color-border-active-default, #0f7173);
|
|
282
290
|
outline-offset: var(--spacing-base-0-5, 2px);
|
|
283
291
|
}
|
|
284
292
|
|
|
@@ -293,7 +301,8 @@
|
|
|
293
301
|
font-weight: var(--font-weight-font-regular, 400);
|
|
294
302
|
}
|
|
295
303
|
|
|
296
|
-
.car-booking-card__supplement-trigger--has-value
|
|
304
|
+
.car-booking-card__supplement-trigger--has-value
|
|
305
|
+
.car-booking-card__supplement-placeholder {
|
|
297
306
|
color: var(--color-text-default, #262626);
|
|
298
307
|
}
|
|
299
308
|
|
|
@@ -308,7 +317,9 @@
|
|
|
308
317
|
/* Ensure chips are properly interactive within the button */
|
|
309
318
|
.car-booking-card__supplement-chips .chip {
|
|
310
319
|
cursor: pointer;
|
|
311
|
-
transition:
|
|
320
|
+
transition:
|
|
321
|
+
opacity 0.15s ease,
|
|
322
|
+
transform 0.15s ease;
|
|
312
323
|
user-select: none;
|
|
313
324
|
}
|
|
314
325
|
|
|
@@ -332,7 +343,9 @@
|
|
|
332
343
|
|
|
333
344
|
/* Transition for chip icons */
|
|
334
345
|
.car-booking-card__supplement-chips .chip .chip__icon--trailing {
|
|
335
|
-
transition:
|
|
346
|
+
transition:
|
|
347
|
+
transform 0.15s ease,
|
|
348
|
+
opacity 0.15s ease;
|
|
336
349
|
opacity: 0.8;
|
|
337
350
|
}
|
|
338
351
|
|
|
@@ -364,5 +377,3 @@
|
|
|
364
377
|
max-height: 600px;
|
|
365
378
|
overflow-y: auto;
|
|
366
379
|
}
|
|
367
|
-
|
|
368
|
-
|