@hero-design/rn 8.3.0 → 8.3.2

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 (30) hide show
  1. package/.turbo/turbo-build.log +9 -9
  2. package/es/index.js +88 -88
  3. package/lib/index.js +85 -85
  4. package/package.json +5 -5
  5. package/src/components/Carousel/CarouselItem.tsx +1 -6
  6. package/src/components/Carousel/CarouselPaginator/StyledCarouselPaginator.tsx +10 -9
  7. package/src/components/Carousel/CarouselPaginator/index.tsx +2 -3
  8. package/src/components/Carousel/StyledCarousel.tsx +9 -6
  9. package/src/components/Carousel/__tests__/StyledCarousel.spec.tsx +3 -3
  10. package/src/components/Carousel/__tests__/__snapshots__/StyledCarousel.spec.tsx.snap +1 -2
  11. package/src/components/Carousel/__tests__/__snapshots__/index.spec.tsx.snap +600 -0
  12. package/src/components/Carousel/__tests__/index.spec.tsx +15 -7
  13. package/src/components/Carousel/index.tsx +65 -84
  14. package/src/components/TextInput/index.tsx +199 -197
  15. package/src/components/Typography/Text/StyledText.tsx +1 -0
  16. package/src/components/Typography/Text/index.tsx +1 -0
  17. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +9 -2
  18. package/src/theme/components/carousel.ts +5 -2
  19. package/src/theme/components/typography.ts +2 -0
  20. package/src/theme/global/typography.ts +3 -0
  21. package/types/components/Carousel/CarouselItem.d.ts +1 -2
  22. package/types/components/Carousel/CarouselPaginator/StyledCarouselPaginator.d.ts +0 -2
  23. package/types/components/Carousel/StyledCarousel.d.ts +6 -4
  24. package/types/components/Carousel/index.d.ts +9 -23
  25. package/types/components/TextInput/index.d.ts +2 -2
  26. package/types/components/Typography/Text/StyledText.d.ts +1 -1
  27. package/types/components/Typography/Text/index.d.ts +1 -1
  28. package/types/theme/components/carousel.d.ts +3 -0
  29. package/types/theme/components/typography.d.ts +2 -0
  30. package/types/theme/global/typography.d.ts +1 -0
package/src/components/Carousel/__tests__/__snapshots__/index.spec.tsx.snap ADDED
@@ -0,0 +1,600 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`Carousel renders basic carousel 1`] = `
4
+ <View
5
+ testID="carousel"
6
+ >
7
+ <View
8
+ style={
9
+ Array [
10
+ Object {
11
+ "backgroundColor": "#ece8ef",
12
+ "bottom": 0,
13
+ "left": 0,
14
+ "position": "absolute",
15
+ "right": 0,
16
+ "top": 0,
17
+ },
18
+ undefined,
19
+ ]
20
+ }
21
+ themeSlideBackground="#ece8ef"
22
+ />
23
+ <View
24
+ style={
25
+ Array [
26
+ Object {
27
+ "flexGrow": 2,
28
+ "justifyContent": "space-between",
29
+ },
30
+ undefined,
31
+ ]
32
+ }
33
+ >
34
+ <RCTScrollView
35
+ bounces={false}
36
+ data={
37
+ Array [
38
+ Object {
39
+ "background": "#ece8ef",
40
+ "body": "Access your Work, Money and Benefits in the palm of your hand.",
41
+ "heading": "Welcome to the new Employment Hero app",
42
+ "image": "https://picsum.photos/800/1200",
43
+ },
44
+ Object {
45
+ "background": "#ccd2d3",
46
+ "body": "Our app now has a new bright clean modern look and feel with the same great features.",
47
+ "content": <Image
48
+ source={
49
+ Object {
50
+ "uri": "https://picsum.photos/30",
51
+ }
52
+ }
53
+ />,
54
+ "heading": "Same app with a new look!",
55
+ "image": "https://picsum.photos/800/1200",
56
+ },
57
+ Object {
58
+ "background": "#ccd2d3",
59
+ "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae pulvinar quam, ac facilisis massa. Aliquam facilisis nisi eu justo dignissim, vel tempus justo iaculis.",
60
+ "heading": "Easier to get around",
61
+ "image": "https://picsum.photos/800/1200",
62
+ },
63
+ ]
64
+ }
65
+ getItem={[Function]}
66
+ getItemCount={[Function]}
67
+ horizontal={true}
68
+ keyExtractor={[Function]}
69
+ onContentSizeChange={[Function]}
70
+ onLayout={[Function]}
71
+ onMomentumScrollBegin={[Function]}
72
+ onMomentumScrollEnd={[Function]}
73
+ onScroll={[Function]}
74
+ onScrollBeginDrag={[Function]}
75
+ onScrollEndDrag={[Function]}
76
+ onViewableItemsChanged={[Function]}
77
+ pagingEnabled={true}
78
+ removeClippedSubviews={false}
79
+ renderItem={[Function]}
80
+ scrollEventThrottle={32}
81
+ showsHorizontalScrollIndicator={false}
82
+ stickyHeaderIndices={Array []}
83
+ viewabilityConfig={
84
+ Object {
85
+ "viewAreaCoveragePercentThreshold": 50,
86
+ }
87
+ }
88
+ viewabilityConfigCallbackPairs={
89
+ Array [
90
+ Object {
91
+ "onViewableItemsChanged": [Function],
92
+ "viewabilityConfig": Object {
93
+ "viewAreaCoveragePercentThreshold": 50,
94
+ },
95
+ },
96
+ ]
97
+ }
98
+ >
99
+ <View>
100
+ <View
101
+ onLayout={[Function]}
102
+ style={
103
+ Array [
104
+ Object {
105
+ "flexDirection": "row",
106
+ },
107
+ null,
108
+ ]
109
+ }
110
+ >
111
+ <View
112
+ style={
113
+ Array [
114
+ Object {},
115
+ Object {
116
+ "width": 750,
117
+ },
118
+ ]
119
+ }
120
+ >
121
+ <Image
122
+ source={
123
+ Object {
124
+ "uri": "https://picsum.photos/800/1200",
125
+ }
126
+ }
127
+ style={
128
+ Array [
129
+ Object {
130
+ "borderRadius": 0,
131
+ "height": 72,
132
+ "width": 72,
133
+ },
134
+ Array [
135
+ Object {
136
+ "flex": 1,
137
+ "resizeMode": "contain",
138
+ "width": "100%",
139
+ },
140
+ undefined,
141
+ ],
142
+ ]
143
+ }
144
+ />
145
+ <View
146
+ marginTop="large"
147
+ paddingHorizontal="large"
148
+ style={
149
+ Array [
150
+ Object {
151
+ "marginTop": 24,
152
+ "paddingHorizontal": 24,
153
+ },
154
+ Array [
155
+ Object {
156
+ "width": 750,
157
+ },
158
+ undefined,
159
+ ],
160
+ ]
161
+ }
162
+ width={750}
163
+ >
164
+ <Text
165
+ style={
166
+ Array [
167
+ Object {
168
+ "color": "#001f23",
169
+ "fontFamily": "BeVietnamPro-Regular",
170
+ "fontSize": 14,
171
+ "letterSpacing": 0.42,
172
+ "lineHeight": 22,
173
+ },
174
+ Array [
175
+ Object {
176
+ "fontFamily": "RebondGrotesque-SemiBold",
177
+ "fontSize": 36,
178
+ "lineHeight": 44,
179
+ "marginBottom": 16,
180
+ "marginTop": 8,
181
+ },
182
+ undefined,
183
+ ],
184
+ ]
185
+ }
186
+ themeFontSize="medium"
187
+ themeFontWeight="regular"
188
+ themeIntent="body"
189
+ themeTypeface="neutral"
190
+ >
191
+ Welcome to the new Employment Hero app
192
+ </Text>
193
+ <Text
194
+ style={
195
+ Array [
196
+ Object {
197
+ "color": "#001f23",
198
+ "fontFamily": "BeVietnamPro-Regular",
199
+ "fontSize": 14,
200
+ "letterSpacing": 0.42,
201
+ "lineHeight": 22,
202
+ },
203
+ undefined,
204
+ ]
205
+ }
206
+ themeFontSize="medium"
207
+ themeFontWeight="regular"
208
+ themeIntent="body"
209
+ themeTypeface="neutral"
210
+ >
211
+ Access your Work, Money and Benefits in the palm of your hand.
212
+ </Text>
213
+ </View>
214
+ </View>
215
+ </View>
216
+ <View
217
+ onLayout={[Function]}
218
+ style={
219
+ Array [
220
+ Object {
221
+ "flexDirection": "row",
222
+ },
223
+ null,
224
+ ]
225
+ }
226
+ >
227
+ <View
228
+ style={
229
+ Array [
230
+ Object {},
231
+ Object {
232
+ "width": 750,
233
+ },
234
+ ]
235
+ }
236
+ >
237
+ <Image
238
+ source={
239
+ Object {
240
+ "uri": "https://picsum.photos/800/1200",
241
+ }
242
+ }
243
+ style={
244
+ Array [
245
+ Object {
246
+ "borderRadius": 0,
247
+ "height": 72,
248
+ "width": 72,
249
+ },
250
+ Array [
251
+ Object {
252
+ "flex": 1,
253
+ "resizeMode": "contain",
254
+ "width": "100%",
255
+ },
256
+ undefined,
257
+ ],
258
+ ]
259
+ }
260
+ />
261
+ <View
262
+ marginTop="large"
263
+ paddingHorizontal="large"
264
+ style={
265
+ Array [
266
+ Object {
267
+ "marginTop": 24,
268
+ "paddingHorizontal": 24,
269
+ },
270
+ Array [
271
+ Object {
272
+ "width": 750,
273
+ },
274
+ undefined,
275
+ ],
276
+ ]
277
+ }
278
+ width={750}
279
+ >
280
+ <Image
281
+ source={
282
+ Object {
283
+ "uri": "https://picsum.photos/30",
284
+ }
285
+ }
286
+ style={
287
+ Array [
288
+ Object {
289
+ "borderRadius": 0,
290
+ "height": 72,
291
+ "width": 72,
292
+ },
293
+ undefined,
294
+ ]
295
+ }
296
+ />
297
+ <Text
298
+ style={
299
+ Array [
300
+ Object {
301
+ "color": "#001f23",
302
+ "fontFamily": "BeVietnamPro-Regular",
303
+ "fontSize": 14,
304
+ "letterSpacing": 0.42,
305
+ "lineHeight": 22,
306
+ },
307
+ Array [
308
+ Object {
309
+ "fontFamily": "RebondGrotesque-SemiBold",
310
+ "fontSize": 36,
311
+ "lineHeight": 44,
312
+ "marginBottom": 16,
313
+ "marginTop": 8,
314
+ },
315
+ undefined,
316
+ ],
317
+ ]
318
+ }
319
+ themeFontSize="medium"
320
+ themeFontWeight="regular"
321
+ themeIntent="body"
322
+ themeTypeface="neutral"
323
+ >
324
+ Same app with a new look!
325
+ </Text>
326
+ <Text
327
+ style={
328
+ Array [
329
+ Object {
330
+ "color": "#001f23",
331
+ "fontFamily": "BeVietnamPro-Regular",
332
+ "fontSize": 14,
333
+ "letterSpacing": 0.42,
334
+ "lineHeight": 22,
335
+ },
336
+ undefined,
337
+ ]
338
+ }
339
+ themeFontSize="medium"
340
+ themeFontWeight="regular"
341
+ themeIntent="body"
342
+ themeTypeface="neutral"
343
+ >
344
+ Our app now has a new bright clean modern look and feel with the same great features.
345
+ </Text>
346
+ </View>
347
+ </View>
348
+ </View>
349
+ <View
350
+ onLayout={[Function]}
351
+ style={
352
+ Array [
353
+ Object {
354
+ "flexDirection": "row",
355
+ },
356
+ null,
357
+ ]
358
+ }
359
+ >
360
+ <View
361
+ style={
362
+ Array [
363
+ Object {},
364
+ Object {
365
+ "width": 750,
366
+ },
367
+ ]
368
+ }
369
+ >
370
+ <Image
371
+ source={
372
+ Object {
373
+ "uri": "https://picsum.photos/800/1200",
374
+ }
375
+ }
376
+ style={
377
+ Array [
378
+ Object {
379
+ "borderRadius": 0,
380
+ "height": 72,
381
+ "width": 72,
382
+ },
383
+ Array [
384
+ Object {
385
+ "flex": 1,
386
+ "resizeMode": "contain",
387
+ "width": "100%",
388
+ },
389
+ undefined,
390
+ ],
391
+ ]
392
+ }
393
+ />
394
+ <View
395
+ marginTop="large"
396
+ paddingHorizontal="large"
397
+ style={
398
+ Array [
399
+ Object {
400
+ "marginTop": 24,
401
+ "paddingHorizontal": 24,
402
+ },
403
+ Array [
404
+ Object {
405
+ "width": 750,
406
+ },
407
+ undefined,
408
+ ],
409
+ ]
410
+ }
411
+ width={750}
412
+ >
413
+ <Text
414
+ style={
415
+ Array [
416
+ Object {
417
+ "color": "#001f23",
418
+ "fontFamily": "BeVietnamPro-Regular",
419
+ "fontSize": 14,
420
+ "letterSpacing": 0.42,
421
+ "lineHeight": 22,
422
+ },
423
+ Array [
424
+ Object {
425
+ "fontFamily": "RebondGrotesque-SemiBold",
426
+ "fontSize": 36,
427
+ "lineHeight": 44,
428
+ "marginBottom": 16,
429
+ "marginTop": 8,
430
+ },
431
+ undefined,
432
+ ],
433
+ ]
434
+ }
435
+ themeFontSize="medium"
436
+ themeFontWeight="regular"
437
+ themeIntent="body"
438
+ themeTypeface="neutral"
439
+ >
440
+ Easier to get around
441
+ </Text>
442
+ <Text
443
+ style={
444
+ Array [
445
+ Object {
446
+ "color": "#001f23",
447
+ "fontFamily": "BeVietnamPro-Regular",
448
+ "fontSize": 14,
449
+ "letterSpacing": 0.42,
450
+ "lineHeight": 22,
451
+ },
452
+ undefined,
453
+ ]
454
+ }
455
+ themeFontSize="medium"
456
+ themeFontWeight="regular"
457
+ themeIntent="body"
458
+ themeTypeface="neutral"
459
+ >
460
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae pulvinar quam, ac facilisis massa. Aliquam facilisis nisi eu justo dignissim, vel tempus justo iaculis.
461
+ </Text>
462
+ </View>
463
+ </View>
464
+ </View>
465
+ </View>
466
+ </RCTScrollView>
467
+ <View
468
+ style={
469
+ Array [
470
+ Object {
471
+ "flexDirection": "row",
472
+ "justifyContent": "space-between",
473
+ "marginBottom": 24,
474
+ "paddingHorizontal": 24,
475
+ "paddingVertical": 16,
476
+ },
477
+ undefined,
478
+ ]
479
+ }
480
+ >
481
+ <View
482
+ accessibilityState={
483
+ Object {
484
+ "disabled": false,
485
+ }
486
+ }
487
+ accessible={true}
488
+ collapsable={false}
489
+ focusable={true}
490
+ onClick={[Function]}
491
+ onResponderGrant={[Function]}
492
+ onResponderMove={[Function]}
493
+ onResponderRelease={[Function]}
494
+ onResponderTerminate={[Function]}
495
+ onResponderTerminationRequest={[Function]}
496
+ onStartShouldSetResponder={[Function]}
497
+ style={
498
+ Object {
499
+ "alignItems": "center",
500
+ "alignSelf": "stretch",
501
+ "backgroundColor": "#401960",
502
+ "borderRadius": 32,
503
+ "flexDirection": "row",
504
+ "justifyContent": "center",
505
+ "opacity": 1,
506
+ "padding": 16,
507
+ }
508
+ }
509
+ >
510
+ <Text
511
+ disabled={false}
512
+ ellipsizeMode="tail"
513
+ numberOfLines={1}
514
+ style={
515
+ Array [
516
+ Object {
517
+ "color": "#001f23",
518
+ "fontFamily": "BeVietnamPro-Regular",
519
+ "fontSize": 14,
520
+ "letterSpacing": 0.42,
521
+ "lineHeight": 22,
522
+ },
523
+ Array [
524
+ Object {
525
+ "color": "#ffffff",
526
+ "flexShrink": 1,
527
+ "fontFamily": "BeVietnamPro-SemiBold",
528
+ "fontSize": 18,
529
+ "lineHeight": 24,
530
+ "textAlign": "center",
531
+ },
532
+ undefined,
533
+ ],
534
+ ]
535
+ }
536
+ themeFontSize="medium"
537
+ themeFontWeight="regular"
538
+ themeIntent="body"
539
+ themeTypeface="neutral"
540
+ themeVariant="filled-primary"
541
+ >
542
+ Skip
543
+ </Text>
544
+ </View>
545
+ <View
546
+ style={
547
+ Array [
548
+ Object {
549
+ "alignItems": "center",
550
+ "flexDirection": "row",
551
+ "marginStart": "auto",
552
+ },
553
+ undefined,
554
+ ]
555
+ }
556
+ >
557
+ <View
558
+ collapsable={false}
559
+ style={
560
+ Object {
561
+ "backgroundColor": "#401960",
562
+ "borderRadius": 999,
563
+ "height": 8,
564
+ "marginHorizontal": 8,
565
+ "opacity": 0.9993342210386151,
566
+ "width": 23.978695073235684,
567
+ }
568
+ }
569
+ />
570
+ <View
571
+ collapsable={false}
572
+ style={
573
+ Object {
574
+ "backgroundColor": "#401960",
575
+ "borderRadius": 999,
576
+ "height": 8,
577
+ "marginHorizontal": 8,
578
+ "opacity": 0.5006666666666667,
579
+ "width": 8.021333333333333,
580
+ }
581
+ }
582
+ />
583
+ <View
584
+ collapsable={false}
585
+ style={
586
+ Object {
587
+ "backgroundColor": "#401960",
588
+ "borderRadius": 999,
589
+ "height": 8,
590
+ "marginHorizontal": 8,
591
+ "opacity": 0.5,
592
+ "width": 8,
593
+ }
594
+ }
595
+ />
596
+ </View>
597
+ </View>
598
+ </View>
599
+ </View>
600
+ `;
package/src/components/Carousel/__tests__/index.spec.tsx CHANGED
@@ -5,6 +5,7 @@ import renderWithTheme from '../../../testHelpers/renderWithTheme';
5
5
  import Carousel from '..';
6
6
  import Image from '../../Image';
7
7
  import { theme } from '../../..';
8
+ import Button from '../../Button/Button';
8
9
 
9
10
  const carouselData = [
10
11
  {
@@ -30,15 +31,14 @@ const carouselData = [
30
31
 
31
32
  describe('Carousel', () => {
32
33
  it('renders basic carousel', async () => {
33
- const onSkip = jest.fn();
34
- const onFinish = jest.fn();
35
-
36
- const { getByTestId, queryByText } = renderWithTheme(
34
+ const onPress = jest.fn();
35
+ const { getByTestId, queryByText, toJSON } = renderWithTheme(
37
36
  <Carousel
38
37
  testID="carousel"
39
38
  items={carouselData}
40
- onSkipPress={onSkip}
41
- onFinishPress={onFinish}
39
+ renderActions={(_) => {
40
+ return <Button text="Skip" onPress={onPress} />;
41
+ }}
42
42
  />
43
43
  );
44
44
 
@@ -69,13 +69,21 @@ describe('Carousel', () => {
69
69
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae pulvinar quam, ac facilisis massa. Aliquam facilisis nisi eu justo dignissim, vel tempus justo iaculis.'
70
70
  )
71
71
  ).toBeTruthy();
72
+
73
+ expect(toJSON()).toMatchSnapshot();
72
74
  });
73
75
 
74
76
  it('should call skip call back when press skip', () => {
75
77
  const onSkip = jest.fn();
76
78
 
77
79
  const { queryByText } = renderWithTheme(
78
- <Carousel testID="carousel" items={carouselData} onSkipPress={onSkip} />
80
+ <Carousel
81
+ testID="carousel"
82
+ items={carouselData}
83
+ renderActions={(_) => {
84
+ return <Button text="Skip" onPress={onSkip} />;
85
+ }}
86
+ />
79
87
  );
80
88
 
81
89
  expect(queryByText('Skip')).toBeTruthy();