@jobber/components-native 0.84.3 → 0.84.4-match-mobi-55ef4ec.7

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 (29) hide show
  1. package/dist/package.json +2 -2
  2. package/dist/src/StatusIndicator/StatusIndicator.js +11 -0
  3. package/dist/src/StatusIndicator/StatusIndicator.style.js +12 -0
  4. package/dist/src/StatusIndicator/StatusIndicator.type.js +1 -0
  5. package/dist/src/StatusIndicator/index.js +1 -0
  6. package/dist/src/StatusLabel/StatusLabel.js +6 -12
  7. package/dist/src/StatusLabel/StatusLabel.style.js +9 -13
  8. package/dist/src/index.js +1 -0
  9. package/dist/src/utils/meta/meta.json +1 -0
  10. package/dist/tsconfig.tsbuildinfo +1 -1
  11. package/dist/types/src/StatusIndicator/StatusIndicator.d.ts +6 -0
  12. package/dist/types/src/StatusIndicator/StatusIndicator.style.d.ts +8 -0
  13. package/dist/types/src/StatusIndicator/StatusIndicator.type.d.ts +1 -0
  14. package/dist/types/src/StatusIndicator/index.d.ts +2 -0
  15. package/dist/types/src/StatusLabel/StatusLabel.d.ts +3 -3
  16. package/dist/types/src/StatusLabel/StatusLabel.style.d.ts +9 -10
  17. package/dist/types/src/index.d.ts +1 -0
  18. package/package.json +2 -2
  19. package/src/StatusIndicator/StatusIndicator.style.ts +14 -0
  20. package/src/StatusIndicator/StatusIndicator.test.tsx +42 -0
  21. package/src/StatusIndicator/StatusIndicator.tsx +23 -0
  22. package/src/StatusIndicator/StatusIndicator.type.ts +6 -0
  23. package/src/StatusIndicator/__snapshots__/StatusIndicator.test.tsx.snap +96 -0
  24. package/src/StatusIndicator/index.ts +2 -0
  25. package/src/StatusLabel/StatusLabel.style.ts +9 -16
  26. package/src/StatusLabel/StatusLabel.tsx +15 -28
  27. package/src/StatusLabel/__snapshots__/StatusLabel.test.tsx.snap +126 -105
  28. package/src/index.ts +1 -0
  29. package/src/utils/meta/meta.json +1 -0
package/src/StatusLabel/__snapshots__/StatusLabel.test.tsx.snap CHANGED
@@ -5,9 +5,20 @@ exports[`StatusLabel alignment when alignment prop set to "end" should match sna
5
5
  style={
6
6
  [
7
7
  {
8
+ "alignItems": "center",
9
+ "backgroundColor": "hsl(109, 28%, 92%)",
10
+ "borderRadius": 16,
8
11
  "flexDirection": "row",
12
+ "flexGrow": 0,
13
+ "flexShrink": 1,
9
14
  "flexWrap": "nowrap",
15
+ "gap": 4,
10
16
  "justifyContent": "flex-end",
17
+ "paddingHorizontal": 8,
18
+ "paddingVertical": 4,
19
+ },
20
+ {
21
+ "backgroundColor": "hsl(109, 28%, 92%)",
11
22
  },
12
23
  false,
13
24
  ]
@@ -17,6 +28,7 @@ exports[`StatusLabel alignment when alignment prop set to "end" should match sna
17
28
  style={
18
29
  {
19
30
  "flexShrink": 1,
31
+ "marginBottom": -1,
20
32
  }
21
33
  }
22
34
  >
@@ -25,7 +37,6 @@ exports[`StatusLabel alignment when alignment prop set to "end" should match sna
25
37
  adjustsFontSizeToFit={false}
26
38
  allowFontScaling={true}
27
39
  collapsable={false}
28
- maxFontSizeMultiplier={1.1428571428571428}
29
40
  selectable={true}
30
41
  selectionColor="hsl(86, 100%, 46%)"
31
42
  style={
@@ -34,13 +45,13 @@ exports[`StatusLabel alignment when alignment prop set to "end" should match sna
34
45
  "fontFamily": "inter-medium",
35
46
  },
36
47
  {
37
- "color": "hsl(197, 15%, 43%)",
48
+ "color": "hsl(107, 64%, 16%)",
38
49
  },
39
50
  {
40
51
  "textAlign": "right",
41
52
  },
42
53
  {
43
- "fontSize": 14,
54
+ "fontSize": 12,
44
55
  "lineHeight": 18,
45
56
  },
46
57
  {
@@ -52,29 +63,21 @@ exports[`StatusLabel alignment when alignment prop set to "end" should match sna
52
63
  End Aligned
53
64
  </Text>
54
65
  </View>
55
- <View
56
- style={
57
- {
58
- "width": 8,
59
- }
60
- }
61
- />
62
66
  <View
63
67
  style={
64
68
  [
65
69
  {
66
70
  "backgroundColor": "hsl(107, 58%, 33%)",
67
- "borderRadius": 3,
68
- "height": 12,
69
- "marginTop": 3,
70
- "width": 12,
71
+ "borderRadius": 100,
72
+ "height": 8,
73
+ "width": 8,
71
74
  },
72
75
  {
73
76
  "backgroundColor": "hsl(107, 58%, 33%)",
74
77
  },
75
78
  ]
76
79
  }
77
- testID="successLabelIcon"
80
+ testID="successIndicator"
78
81
  />
79
82
  </View>
80
83
  `;
@@ -84,9 +87,20 @@ exports[`StatusLabel alignment when alignment prop set to default ("start") shou
84
87
  style={
85
88
  [
86
89
  {
90
+ "alignItems": "center",
91
+ "backgroundColor": "hsl(109, 28%, 92%)",
92
+ "borderRadius": 16,
87
93
  "flexDirection": "row",
94
+ "flexGrow": 0,
95
+ "flexShrink": 1,
88
96
  "flexWrap": "nowrap",
97
+ "gap": 4,
89
98
  "justifyContent": "flex-end",
99
+ "paddingHorizontal": 8,
100
+ "paddingVertical": 4,
101
+ },
102
+ {
103
+ "backgroundColor": "hsl(109, 28%, 92%)",
90
104
  },
91
105
  false,
92
106
  ]
@@ -96,6 +110,7 @@ exports[`StatusLabel alignment when alignment prop set to default ("start") shou
96
110
  style={
97
111
  {
98
112
  "flexShrink": 1,
113
+ "marginBottom": -1,
99
114
  }
100
115
  }
101
116
  >
@@ -104,7 +119,6 @@ exports[`StatusLabel alignment when alignment prop set to default ("start") shou
104
119
  adjustsFontSizeToFit={false}
105
120
  allowFontScaling={true}
106
121
  collapsable={false}
107
- maxFontSizeMultiplier={1.1428571428571428}
108
122
  selectable={true}
109
123
  selectionColor="hsl(86, 100%, 46%)"
110
124
  style={
@@ -113,13 +127,13 @@ exports[`StatusLabel alignment when alignment prop set to default ("start") shou
113
127
  "fontFamily": "inter-medium",
114
128
  },
115
129
  {
116
- "color": "hsl(197, 15%, 43%)",
130
+ "color": "hsl(107, 64%, 16%)",
117
131
  },
118
132
  {
119
133
  "textAlign": "right",
120
134
  },
121
135
  {
122
- "fontSize": 14,
136
+ "fontSize": 12,
123
137
  "lineHeight": 18,
124
138
  },
125
139
  {
@@ -131,29 +145,21 @@ exports[`StatusLabel alignment when alignment prop set to default ("start") shou
131
145
  Start Aligned
132
146
  </Text>
133
147
  </View>
134
- <View
135
- style={
136
- {
137
- "width": 8,
138
- }
139
- }
140
- />
141
148
  <View
142
149
  style={
143
150
  [
144
151
  {
145
152
  "backgroundColor": "hsl(107, 58%, 33%)",
146
- "borderRadius": 3,
147
- "height": 12,
148
- "marginTop": 3,
149
- "width": 12,
153
+ "borderRadius": 100,
154
+ "height": 8,
155
+ "width": 8,
150
156
  },
151
157
  {
152
158
  "backgroundColor": "hsl(107, 58%, 33%)",
153
159
  },
154
160
  ]
155
161
  }
156
- testID="successLabelIcon"
162
+ testID="successIndicator"
157
163
  />
158
164
  </View>
159
165
  `;
@@ -163,9 +169,20 @@ exports[`StatusLabel status when status prop set to "critical" should match snap
163
169
  style={
164
170
  [
165
171
  {
172
+ "alignItems": "center",
173
+ "backgroundColor": "hsl(109, 28%, 92%)",
174
+ "borderRadius": 16,
166
175
  "flexDirection": "row",
176
+ "flexGrow": 0,
177
+ "flexShrink": 1,
167
178
  "flexWrap": "nowrap",
179
+ "gap": 4,
168
180
  "justifyContent": "flex-end",
181
+ "paddingHorizontal": 8,
182
+ "paddingVertical": 4,
183
+ },
184
+ {
185
+ "backgroundColor": "hsl(7, 63%, 95%)",
169
186
  },
170
187
  false,
171
188
  ]
@@ -175,6 +192,7 @@ exports[`StatusLabel status when status prop set to "critical" should match snap
175
192
  style={
176
193
  {
177
194
  "flexShrink": 1,
195
+ "marginBottom": -1,
178
196
  }
179
197
  }
180
198
  >
@@ -183,7 +201,6 @@ exports[`StatusLabel status when status prop set to "critical" should match snap
183
201
  adjustsFontSizeToFit={false}
184
202
  allowFontScaling={true}
185
203
  collapsable={false}
186
- maxFontSizeMultiplier={1.1428571428571428}
187
204
  selectable={true}
188
205
  selectionColor="hsl(86, 100%, 46%)"
189
206
  style={
@@ -192,13 +209,13 @@ exports[`StatusLabel status when status prop set to "critical" should match snap
192
209
  "fontFamily": "inter-medium",
193
210
  },
194
211
  {
195
- "color": "hsl(197, 15%, 43%)",
212
+ "color": "hsl(6, 100%, 24%)",
196
213
  },
197
214
  {
198
215
  "textAlign": "right",
199
216
  },
200
217
  {
201
- "fontSize": 14,
218
+ "fontSize": 12,
202
219
  "lineHeight": 18,
203
220
  },
204
221
  {
@@ -210,29 +227,21 @@ exports[`StatusLabel status when status prop set to "critical" should match snap
210
227
  Critical
211
228
  </Text>
212
229
  </View>
213
- <View
214
- style={
215
- {
216
- "width": 8,
217
- }
218
- }
219
- />
220
230
  <View
221
231
  style={
222
232
  [
223
233
  {
224
234
  "backgroundColor": "hsl(107, 58%, 33%)",
225
- "borderRadius": 3,
226
- "height": 12,
227
- "marginTop": 3,
228
- "width": 12,
235
+ "borderRadius": 100,
236
+ "height": 8,
237
+ "width": 8,
229
238
  },
230
239
  {
231
240
  "backgroundColor": "hsl(6, 64%, 51%)",
232
241
  },
233
242
  ]
234
243
  }
235
- testID="criticalLabelIcon"
244
+ testID="criticalIndicator"
236
245
  />
237
246
  </View>
238
247
  `;
@@ -242,9 +251,20 @@ exports[`StatusLabel status when status prop set to "inactive" should match snap
242
251
  style={
243
252
  [
244
253
  {
254
+ "alignItems": "center",
255
+ "backgroundColor": "hsl(109, 28%, 92%)",
256
+ "borderRadius": 16,
245
257
  "flexDirection": "row",
258
+ "flexGrow": 0,
259
+ "flexShrink": 1,
246
260
  "flexWrap": "nowrap",
261
+ "gap": 4,
247
262
  "justifyContent": "flex-end",
263
+ "paddingHorizontal": 8,
264
+ "paddingVertical": 4,
265
+ },
266
+ {
267
+ "backgroundColor": "hsl(195, 12%, 94%)",
248
268
  },
249
269
  false,
250
270
  ]
@@ -254,6 +274,7 @@ exports[`StatusLabel status when status prop set to "inactive" should match snap
254
274
  style={
255
275
  {
256
276
  "flexShrink": 1,
277
+ "marginBottom": -1,
257
278
  }
258
279
  }
259
280
  >
@@ -262,7 +283,6 @@ exports[`StatusLabel status when status prop set to "inactive" should match snap
262
283
  adjustsFontSizeToFit={false}
263
284
  allowFontScaling={true}
264
285
  collapsable={false}
265
- maxFontSizeMultiplier={1.1428571428571428}
266
286
  selectable={true}
267
287
  selectionColor="hsl(86, 100%, 46%)"
268
288
  style={
@@ -271,13 +291,13 @@ exports[`StatusLabel status when status prop set to "inactive" should match snap
271
291
  "fontFamily": "inter-medium",
272
292
  },
273
293
  {
274
- "color": "hsl(197, 15%, 43%)",
294
+ "color": "hsl(197, 90%, 12%)",
275
295
  },
276
296
  {
277
297
  "textAlign": "right",
278
298
  },
279
299
  {
280
- "fontSize": 14,
300
+ "fontSize": 12,
281
301
  "lineHeight": 18,
282
302
  },
283
303
  {
@@ -289,29 +309,21 @@ exports[`StatusLabel status when status prop set to "inactive" should match snap
289
309
  Inactive
290
310
  </Text>
291
311
  </View>
292
- <View
293
- style={
294
- {
295
- "width": 8,
296
- }
297
- }
298
- />
299
312
  <View
300
313
  style={
301
314
  [
302
315
  {
303
316
  "backgroundColor": "hsl(107, 58%, 33%)",
304
- "borderRadius": 3,
305
- "height": 12,
306
- "marginTop": 3,
307
- "width": 12,
317
+ "borderRadius": 100,
318
+ "height": 8,
319
+ "width": 8,
308
320
  },
309
321
  {
310
322
  "backgroundColor": "hsl(198, 25%, 33%)",
311
323
  },
312
324
  ]
313
325
  }
314
- testID="inactiveLabelIcon"
326
+ testID="inactiveIndicator"
315
327
  />
316
328
  </View>
317
329
  `;
@@ -321,9 +333,20 @@ exports[`StatusLabel status when status prop set to "informative" should match s
321
333
  style={
322
334
  [
323
335
  {
336
+ "alignItems": "center",
337
+ "backgroundColor": "hsl(109, 28%, 92%)",
338
+ "borderRadius": 16,
324
339
  "flexDirection": "row",
340
+ "flexGrow": 0,
341
+ "flexShrink": 1,
325
342
  "flexWrap": "nowrap",
343
+ "gap": 4,
326
344
  "justifyContent": "flex-end",
345
+ "paddingHorizontal": 8,
346
+ "paddingVertical": 4,
347
+ },
348
+ {
349
+ "backgroundColor": "hsl(207, 87%, 94%)",
327
350
  },
328
351
  false,
329
352
  ]
@@ -333,6 +356,7 @@ exports[`StatusLabel status when status prop set to "informative" should match s
333
356
  style={
334
357
  {
335
358
  "flexShrink": 1,
359
+ "marginBottom": -1,
336
360
  }
337
361
  }
338
362
  >
@@ -341,7 +365,6 @@ exports[`StatusLabel status when status prop set to "informative" should match s
341
365
  adjustsFontSizeToFit={false}
342
366
  allowFontScaling={true}
343
367
  collapsable={false}
344
- maxFontSizeMultiplier={1.1428571428571428}
345
368
  selectable={true}
346
369
  selectionColor="hsl(86, 100%, 46%)"
347
370
  style={
@@ -350,13 +373,13 @@ exports[`StatusLabel status when status prop set to "informative" should match s
350
373
  "fontFamily": "inter-medium",
351
374
  },
352
375
  {
353
- "color": "hsl(197, 15%, 43%)",
376
+ "color": "hsl(207, 61%, 34%)",
354
377
  },
355
378
  {
356
379
  "textAlign": "right",
357
380
  },
358
381
  {
359
- "fontSize": 14,
382
+ "fontSize": 12,
360
383
  "lineHeight": 18,
361
384
  },
362
385
  {
@@ -368,29 +391,21 @@ exports[`StatusLabel status when status prop set to "informative" should match s
368
391
  Informative
369
392
  </Text>
370
393
  </View>
371
- <View
372
- style={
373
- {
374
- "width": 8,
375
- }
376
- }
377
- />
378
394
  <View
379
395
  style={
380
396
  [
381
397
  {
382
398
  "backgroundColor": "hsl(107, 58%, 33%)",
383
- "borderRadius": 3,
384
- "height": 12,
385
- "marginTop": 3,
386
- "width": 12,
399
+ "borderRadius": 100,
400
+ "height": 8,
401
+ "width": 8,
387
402
  },
388
403
  {
389
404
  "backgroundColor": "hsl(207, 79%, 57%)",
390
405
  },
391
406
  ]
392
407
  }
393
- testID="informativeLabelIcon"
408
+ testID="informativeIndicator"
394
409
  />
395
410
  </View>
396
411
  `;
@@ -400,9 +415,20 @@ exports[`StatusLabel status when status prop set to "warning" should match snaps
400
415
  style={
401
416
  [
402
417
  {
418
+ "alignItems": "center",
419
+ "backgroundColor": "hsl(109, 28%, 92%)",
420
+ "borderRadius": 16,
403
421
  "flexDirection": "row",
422
+ "flexGrow": 0,
423
+ "flexShrink": 1,
404
424
  "flexWrap": "nowrap",
425
+ "gap": 4,
405
426
  "justifyContent": "flex-end",
427
+ "paddingHorizontal": 8,
428
+ "paddingVertical": 4,
429
+ },
430
+ {
431
+ "backgroundColor": "hsl(52, 64%, 89%)",
406
432
  },
407
433
  false,
408
434
  ]
@@ -412,6 +438,7 @@ exports[`StatusLabel status when status prop set to "warning" should match snaps
412
438
  style={
413
439
  {
414
440
  "flexShrink": 1,
441
+ "marginBottom": -1,
415
442
  }
416
443
  }
417
444
  >
@@ -420,7 +447,6 @@ exports[`StatusLabel status when status prop set to "warning" should match snaps
420
447
  adjustsFontSizeToFit={false}
421
448
  allowFontScaling={true}
422
449
  collapsable={false}
423
- maxFontSizeMultiplier={1.1428571428571428}
424
450
  selectable={true}
425
451
  selectionColor="hsl(86, 100%, 46%)"
426
452
  style={
@@ -429,13 +455,13 @@ exports[`StatusLabel status when status prop set to "warning" should match snaps
429
455
  "fontFamily": "inter-medium",
430
456
  },
431
457
  {
432
- "color": "hsl(197, 15%, 43%)",
458
+ "color": "hsl(51, 64%, 24%)",
433
459
  },
434
460
  {
435
461
  "textAlign": "right",
436
462
  },
437
463
  {
438
- "fontSize": 14,
464
+ "fontSize": 12,
439
465
  "lineHeight": 18,
440
466
  },
441
467
  {
@@ -447,29 +473,21 @@ exports[`StatusLabel status when status prop set to "warning" should match snaps
447
473
  Warning
448
474
  </Text>
449
475
  </View>
450
- <View
451
- style={
452
- {
453
- "width": 8,
454
- }
455
- }
456
- />
457
476
  <View
458
477
  style={
459
478
  [
460
479
  {
461
480
  "backgroundColor": "hsl(107, 58%, 33%)",
462
- "borderRadius": 3,
463
- "height": 12,
464
- "marginTop": 3,
465
- "width": 12,
481
+ "borderRadius": 100,
482
+ "height": 8,
483
+ "width": 8,
466
484
  },
467
485
  {
468
486
  "backgroundColor": "hsl(51, 64%, 49%)",
469
487
  },
470
488
  ]
471
489
  }
472
- testID="warningLabelIcon"
490
+ testID="warningIndicator"
473
491
  />
474
492
  </View>
475
493
  `;
@@ -479,9 +497,20 @@ exports[`StatusLabel status when status prop set to default ("success") should m
479
497
  style={
480
498
  [
481
499
  {
500
+ "alignItems": "center",
501
+ "backgroundColor": "hsl(109, 28%, 92%)",
502
+ "borderRadius": 16,
482
503
  "flexDirection": "row",
504
+ "flexGrow": 0,
505
+ "flexShrink": 1,
483
506
  "flexWrap": "nowrap",
507
+ "gap": 4,
484
508
  "justifyContent": "flex-end",
509
+ "paddingHorizontal": 8,
510
+ "paddingVertical": 4,
511
+ },
512
+ {
513
+ "backgroundColor": "hsl(109, 28%, 92%)",
485
514
  },
486
515
  false,
487
516
  ]
@@ -491,6 +520,7 @@ exports[`StatusLabel status when status prop set to default ("success") should m
491
520
  style={
492
521
  {
493
522
  "flexShrink": 1,
523
+ "marginBottom": -1,
494
524
  }
495
525
  }
496
526
  >
@@ -499,7 +529,6 @@ exports[`StatusLabel status when status prop set to default ("success") should m
499
529
  adjustsFontSizeToFit={false}
500
530
  allowFontScaling={true}
501
531
  collapsable={false}
502
- maxFontSizeMultiplier={1.1428571428571428}
503
532
  selectable={true}
504
533
  selectionColor="hsl(86, 100%, 46%)"
505
534
  style={
@@ -508,13 +537,13 @@ exports[`StatusLabel status when status prop set to default ("success") should m
508
537
  "fontFamily": "inter-medium",
509
538
  },
510
539
  {
511
- "color": "hsl(197, 15%, 43%)",
540
+ "color": "hsl(107, 64%, 16%)",
512
541
  },
513
542
  {
514
543
  "textAlign": "right",
515
544
  },
516
545
  {
517
- "fontSize": 14,
546
+ "fontSize": 12,
518
547
  "lineHeight": 18,
519
548
  },
520
549
  {
@@ -526,29 +555,21 @@ exports[`StatusLabel status when status prop set to default ("success") should m
526
555
  Success
527
556
  </Text>
528
557
  </View>
529
- <View
530
- style={
531
- {
532
- "width": 8,
533
- }
534
- }
535
- />
536
558
  <View
537
559
  style={
538
560
  [
539
561
  {
540
562
  "backgroundColor": "hsl(107, 58%, 33%)",
541
- "borderRadius": 3,
542
- "height": 12,
543
- "marginTop": 3,
544
- "width": 12,
563
+ "borderRadius": 100,
564
+ "height": 8,
565
+ "width": 8,
545
566
  },
546
567
  {
547
568
  "backgroundColor": "hsl(107, 58%, 33%)",
548
569
  },
549
570
  ]
550
571
  }
551
- testID="successLabelIcon"
572
+ testID="successIndicator"
552
573
  />
553
574
  </View>
554
575
  `;
package/src/index.ts CHANGED
@@ -39,6 +39,7 @@ export * from "./Menu";
39
39
  export * from "./ProgressBar";
40
40
  export * from "./Select";
41
41
  export * from "./StatusLabel";
42
+ export * from "./StatusIndicator";
42
43
  export * from "./Switch";
43
44
  export * from "./Text";
44
45
  export * from "./TextList";
package/src/utils/meta/meta.json CHANGED
@@ -57,6 +57,7 @@
57
57
  "Option",
58
58
  "ProgressBar",
59
59
  "Select",
60
+ "StatusIndicator",
60
61
  "StatusLabel",
61
62
  "Switch",
62
63
  "Text",