@jobber/components-native 0.1.3 → 0.1.4

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jobber/components-native",
3
- "version": "0.1.3",
3
+ "version": "0.1.4",
4
4
  "license": "MIT",
5
5
  "main": "dist/src/index.js",
6
6
  "module": "dist/src/index.js",
@@ -26,6 +26,8 @@
26
26
  "ts-xor": "^1.1.0"
27
27
  },
28
28
  "devDependencies": {
29
+ "@testing-library/jest-native": "^5.4.2",
30
+ "@testing-library/react-native": "^12.0.1",
29
31
  "@types/react": "^18.0.28",
30
32
  "@types/react-native": "^0.71.6",
31
33
  "metro-react-native-babel-preset": "^0.76.0",
@@ -36,5 +38,5 @@
36
38
  "react": "^18",
37
39
  "react-native": ">=0.69.2"
38
40
  },
39
- "gitHead": "ee6d0ff34cc6b097c94a320e6b0391fc83907c66"
41
+ "gitHead": "67a8aae8b181f43f4eef5d579ae28959d5b4b19f"
40
42
  }
@@ -0,0 +1,34 @@
1
+ import React from "react";
2
+ import { cleanup, render } from "@testing-library/react-native";
3
+ import { Divider } from "./Divider";
4
+ import { styles } from "./Divider.style";
5
+
6
+ afterEach(cleanup);
7
+
8
+ const dividerTestId = "Divider";
9
+
10
+ describe("Divider", () => {
11
+ it("renders a default Divider", () => {
12
+ const { getByTestId } = render(<Divider />);
13
+ const dividerStyle = getByTestId(dividerTestId).props.style;
14
+ expect(dividerStyle).toContainEqual(styles.base);
15
+ expect(dividerStyle).not.toContainEqual(styles.large);
16
+ expect(dividerStyle).not.toContainEqual(styles.largest);
17
+ });
18
+
19
+ it("renders a large Divider", () => {
20
+ const { getByTestId } = render(<Divider size="large" />);
21
+ const dividerStyle = getByTestId(dividerTestId).props.style;
22
+ expect(dividerStyle).toContainEqual(styles.base);
23
+ expect(dividerStyle).toContainEqual(styles.large);
24
+ expect(dividerStyle).not.toContainEqual(styles.largest);
25
+ });
26
+
27
+ it("renders a largest Divider", () => {
28
+ const { getByTestId } = render(<Divider size="largest" />);
29
+ const dividerStyle = getByTestId(dividerTestId).props.style;
30
+ expect(dividerStyle).toContainEqual(styles.base);
31
+ expect(dividerStyle).not.toContainEqual(styles.large);
32
+ expect(dividerStyle).toContainEqual(styles.largest);
33
+ });
34
+ });
@@ -0,0 +1,39 @@
1
+ import React from "react";
2
+ import { render } from "@testing-library/react-native";
3
+ import { Icon } from ".";
4
+
5
+ it("renders home icon", () => {
6
+ const tree = render(<Icon name="home" />).toJSON();
7
+ expect(tree).toMatchSnapshot();
8
+ });
9
+
10
+ it("renders apple icon", () => {
11
+ const tree = render(<Icon name="apple" />).toJSON();
12
+ expect(tree).toMatchSnapshot();
13
+ });
14
+
15
+ it("renders large arrowDown icon", () => {
16
+ const tree = render(<Icon name="arrowDown" size="large" />).toJSON();
17
+ expect(tree).toMatchSnapshot();
18
+ });
19
+
20
+ it("renders thumbsDown icon", () => {
21
+ const tree = render(<Icon name="thumbsDown" />).toJSON();
22
+ expect(tree).toMatchSnapshot();
23
+ });
24
+
25
+ it("renders small more icon", () => {
26
+ const tree = render(<Icon name="more" size="small" />).toJSON();
27
+ expect(tree).toMatchSnapshot();
28
+ });
29
+
30
+ it("renders star icon with custom color", () => {
31
+ const tree = render(<Icon name="star" customColor="#f33323" />).toJSON();
32
+ expect(tree).toMatchSnapshot();
33
+ });
34
+
35
+ it("renders quote icon with themed color", () => {
36
+ // The intention is to make sure the color prop can be applied to an icon with a built-in default color
37
+ const tree = render(<Icon name="quote" color="brand" />).toJSON();
38
+ expect(tree).toMatchSnapshot();
39
+ });
@@ -0,0 +1,403 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`renders apple icon 1`] = `
4
+ <RNSVGSvgView
5
+ align="xMidYMid"
6
+ bbHeight={24}
7
+ bbWidth={24}
8
+ focusable={false}
9
+ meetOrSlice={0}
10
+ minX={0}
11
+ minY={0}
12
+ style={
13
+ [
14
+ {
15
+ "backgroundColor": "transparent",
16
+ "borderWidth": 0,
17
+ },
18
+ {
19
+ "display": "flex",
20
+ "fill": "rgba(101, 120, 132, 1)",
21
+ "height": 24,
22
+ "verticalAlign": "middle",
23
+ "width": 24,
24
+ },
25
+ {
26
+ "flex": 0,
27
+ "height": 24,
28
+ "width": 24,
29
+ },
30
+ ]
31
+ }
32
+ testID="apple"
33
+ vbHeight={24}
34
+ vbWidth={24}
35
+ >
36
+ <RNSVGGroup
37
+ fill={4284840068}
38
+ propList={
39
+ [
40
+ "fill",
41
+ ]
42
+ }
43
+ >
44
+ <RNSVGPath
45
+ d="M18.467 12.754c-.027-2.996 2.453-4.453 2.566-4.52-1.404-2.048-3.581-2.328-4.346-2.35-1.828-.193-3.601 1.094-4.533 1.094-.95 0-2.384-1.076-3.93-1.044-1.988.03-3.849 1.182-4.87 2.97C1.25 12.55 2.82 17.91 4.838 20.856c1.01 1.443 2.189 3.055 3.733 2.998 1.51-.062 2.074-.963 3.897-.963 1.806 0 2.335.963 3.91.927 1.62-.026 2.641-1.45 3.615-2.907 1.166-1.654 1.635-3.283 1.653-3.367-.038-.013-3.147-1.2-3.178-4.79Zm-2.974-8.81c.812-1.015 1.368-2.397 1.213-3.8-1.175.053-2.646.814-3.492 1.807-.75.876-1.418 2.31-1.246 3.66 1.321.099 2.677-.666 3.525-1.666Z"
46
+ fill={4284840068}
47
+ propList={
48
+ [
49
+ "fill",
50
+ ]
51
+ }
52
+ />
53
+ </RNSVGGroup>
54
+ </RNSVGSvgView>
55
+ `;
56
+
57
+ exports[`renders home icon 1`] = `
58
+ <RNSVGSvgView
59
+ align="xMidYMid"
60
+ bbHeight={24}
61
+ bbWidth={24}
62
+ focusable={false}
63
+ meetOrSlice={0}
64
+ minX={0}
65
+ minY={0}
66
+ style={
67
+ [
68
+ {
69
+ "backgroundColor": "transparent",
70
+ "borderWidth": 0,
71
+ },
72
+ {
73
+ "display": "flex",
74
+ "fill": "rgba(101, 120, 132, 1)",
75
+ "height": 24,
76
+ "verticalAlign": "middle",
77
+ "width": 24,
78
+ },
79
+ {
80
+ "flex": 0,
81
+ "height": 24,
82
+ "width": 24,
83
+ },
84
+ ]
85
+ }
86
+ testID="home"
87
+ vbHeight={24}
88
+ vbWidth={24}
89
+ >
90
+ <RNSVGGroup
91
+ fill={4284840068}
92
+ propList={
93
+ [
94
+ "fill",
95
+ ]
96
+ }
97
+ >
98
+ <RNSVGPath
99
+ d="M13.147 3.582a2 2 0 0 0-2.294 0l-9.426 6.599a1 1 0 1 0 1.147 1.638L5 10.121V18a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-7.88l2.427 1.7a1 1 0 0 0 1.146-1.64l-9.426-6.598ZM17 8.721V18a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V8.72l5-3.5 5 3.5Z"
100
+ fill={4284840068}
101
+ propList={
102
+ [
103
+ "fill",
104
+ ]
105
+ }
106
+ />
107
+ </RNSVGGroup>
108
+ </RNSVGSvgView>
109
+ `;
110
+
111
+ exports[`renders large arrowDown icon 1`] = `
112
+ <RNSVGSvgView
113
+ align="xMidYMid"
114
+ bbHeight={32}
115
+ bbWidth={32}
116
+ focusable={false}
117
+ meetOrSlice={0}
118
+ minX={0}
119
+ minY={0}
120
+ style={
121
+ [
122
+ {
123
+ "backgroundColor": "transparent",
124
+ "borderWidth": 0,
125
+ },
126
+ {
127
+ "display": "flex",
128
+ "fill": "rgba(101, 120, 132, 1)",
129
+ "height": 32,
130
+ "verticalAlign": "middle",
131
+ "width": 32,
132
+ },
133
+ {
134
+ "flex": 0,
135
+ "height": 32,
136
+ "width": 32,
137
+ },
138
+ ]
139
+ }
140
+ testID="arrowDown"
141
+ vbHeight={24}
142
+ vbWidth={24}
143
+ >
144
+ <RNSVGGroup
145
+ fill={4284840068}
146
+ propList={
147
+ [
148
+ "fill",
149
+ ]
150
+ }
151
+ >
152
+ <RNSVGPath
153
+ d="M7.703 8.291a.996.996 0 0 0-1.41.001.994.994 0 0 0 0 1.41l5 5.005a.998.998 0 0 0 1.415 0l5-5a.994.994 0 0 0 0-1.41.995.995 0 0 0-1.411-.001L12 12.584 7.703 8.291Z"
154
+ fill={4284840068}
155
+ propList={
156
+ [
157
+ "fill",
158
+ ]
159
+ }
160
+ />
161
+ </RNSVGGroup>
162
+ </RNSVGSvgView>
163
+ `;
164
+
165
+ exports[`renders quote icon with themed color 1`] = `
166
+ <RNSVGSvgView
167
+ align="xMidYMid"
168
+ bbHeight={24}
169
+ bbWidth={24}
170
+ focusable={false}
171
+ meetOrSlice={0}
172
+ minX={0}
173
+ minY={0}
174
+ style={
175
+ [
176
+ {
177
+ "backgroundColor": "transparent",
178
+ "borderWidth": 0,
179
+ },
180
+ {
181
+ "display": "flex",
182
+ "fill": "rgb(125, 176, 14)",
183
+ "height": 24,
184
+ "verticalAlign": "middle",
185
+ "width": 24,
186
+ },
187
+ {
188
+ "flex": 0,
189
+ "height": 24,
190
+ "width": 24,
191
+ },
192
+ ]
193
+ }
194
+ testID="quote"
195
+ vbHeight={24}
196
+ vbWidth={24}
197
+ >
198
+ <RNSVGGroup
199
+ fill={4286427150}
200
+ propList={
201
+ [
202
+ "fill",
203
+ ]
204
+ }
205
+ >
206
+ <RNSVGPath
207
+ d="M14 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm-2 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0Z"
208
+ fill={4286427150}
209
+ propList={
210
+ [
211
+ "fill",
212
+ ]
213
+ }
214
+ />
215
+ <RNSVGPath
216
+ d="M3.586 6C3.196 6.39 3 6.902 3 7.414c0 .512.195 1.024.586 1.414l.99.991C4.315 10.554 4 11.175 4 12a7 7 0 0 0 7 7h9v1a1 1 0 1 0 2 0v-2a1 1 0 0 0-1-1h-3v-5a7 7 0 0 0-7-7c-.825 0-1.446.314-2.18.577l-.992-.991A1.994 1.994 0 0 0 6.414 4c-.512 0-1.023.195-1.414.586L3.586 6Zm3.393.565A7.041 7.041 0 0 0 5.565 7.98L5 7.414 6.414 6l.565.565ZM11 7a5 5 0 0 1 5 5v5h-5a5 5 0 0 1 0-10Z"
217
+ fill={4286427150}
218
+ propList={
219
+ [
220
+ "fill",
221
+ ]
222
+ }
223
+ />
224
+ </RNSVGGroup>
225
+ </RNSVGSvgView>
226
+ `;
227
+
228
+ exports[`renders small more icon 1`] = `
229
+ <RNSVGSvgView
230
+ align="xMidYMid"
231
+ bbHeight={16}
232
+ bbWidth={16}
233
+ focusable={false}
234
+ meetOrSlice={0}
235
+ minX={0}
236
+ minY={0}
237
+ style={
238
+ [
239
+ {
240
+ "backgroundColor": "transparent",
241
+ "borderWidth": 0,
242
+ },
243
+ {
244
+ "display": "flex",
245
+ "fill": "rgba(101, 120, 132, 1)",
246
+ "height": 16,
247
+ "verticalAlign": "middle",
248
+ "width": 16,
249
+ },
250
+ {
251
+ "flex": 0,
252
+ "height": 16,
253
+ "width": 16,
254
+ },
255
+ ]
256
+ }
257
+ testID="more"
258
+ vbHeight={24}
259
+ vbWidth={24}
260
+ >
261
+ <RNSVGGroup
262
+ fill={4284840068}
263
+ propList={
264
+ [
265
+ "fill",
266
+ ]
267
+ }
268
+ >
269
+ <RNSVGPath
270
+ d="M4 12a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm6 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm8-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"
271
+ fill={4284840068}
272
+ propList={
273
+ [
274
+ "fill",
275
+ ]
276
+ }
277
+ />
278
+ </RNSVGGroup>
279
+ </RNSVGSvgView>
280
+ `;
281
+
282
+ exports[`renders star icon with custom color 1`] = `
283
+ <RNSVGSvgView
284
+ align="xMidYMid"
285
+ bbHeight={24}
286
+ bbWidth={24}
287
+ focusable={false}
288
+ meetOrSlice={0}
289
+ minX={0}
290
+ minY={0}
291
+ style={
292
+ [
293
+ {
294
+ "backgroundColor": "transparent",
295
+ "borderWidth": 0,
296
+ },
297
+ {
298
+ "display": "flex",
299
+ "fill": "rgba(101, 120, 132, 1)",
300
+ "height": 24,
301
+ "verticalAlign": "middle",
302
+ "width": 24,
303
+ },
304
+ {
305
+ "flex": 0,
306
+ "height": 24,
307
+ "width": 24,
308
+ },
309
+ ]
310
+ }
311
+ testID="star"
312
+ vbHeight={24}
313
+ vbWidth={24}
314
+ >
315
+ <RNSVGGroup
316
+ fill={4284840068}
317
+ propList={
318
+ [
319
+ "fill",
320
+ ]
321
+ }
322
+ >
323
+ <RNSVGPath
324
+ d="m15.673 13.337 3.673-3.58-5.076-.738-2.27-4.6-2.27 4.6-5.076.738 3.673 3.58-.867 5.176L12 16.006l4.54 2.386-.867-5.055ZM12 18.335l-4.505 2.49a1.546 1.546 0 0 1-2.244-1.63l.86-5.137-3.644-3.553a1.546 1.546 0 0 1 .857-2.637l5.037-.732 2.252-4.273a1.547 1.547 0 0 1 2.774 0l2.252 4.273 5.037.732a1.546 1.546 0 0 1 .857 2.637l-3.645 3.553.86 5.139a1.547 1.547 0 0 1-2.243 1.63L12 18.334Z"
325
+ fill={4294128419}
326
+ propList={
327
+ [
328
+ "fill",
329
+ ]
330
+ }
331
+ />
332
+ </RNSVGGroup>
333
+ </RNSVGSvgView>
334
+ `;
335
+
336
+ exports[`renders thumbsDown icon 1`] = `
337
+ <RNSVGSvgView
338
+ align="xMidYMid"
339
+ bbHeight={24}
340
+ bbWidth={24}
341
+ focusable={false}
342
+ meetOrSlice={0}
343
+ minX={0}
344
+ minY={0}
345
+ style={
346
+ [
347
+ {
348
+ "backgroundColor": "transparent",
349
+ "borderWidth": 0,
350
+ },
351
+ {
352
+ "display": "flex",
353
+ "fill": "rgba(101, 120, 132, 1)",
354
+ "height": 24,
355
+ "transform": [
356
+ {
357
+ "scaleY": -1,
358
+ },
359
+ ],
360
+ "verticalAlign": "middle",
361
+ "width": 24,
362
+ },
363
+ {
364
+ "flex": 0,
365
+ "height": 24,
366
+ "width": 24,
367
+ },
368
+ ]
369
+ }
370
+ testID="thumbsDown"
371
+ vbHeight={24}
372
+ vbWidth={24}
373
+ >
374
+ <RNSVGGroup
375
+ fill={4284840068}
376
+ matrix={
377
+ [
378
+ 1,
379
+ 0,
380
+ 0,
381
+ 1,
382
+ 0,
383
+ 0,
384
+ ]
385
+ }
386
+ propList={
387
+ [
388
+ "fill",
389
+ ]
390
+ }
391
+ >
392
+ <RNSVGPath
393
+ d="M8 11.78V19h8l3-5.76v-1.29h-7.639l1.036-7.944L8 11.78ZM6.134 11l4.555-8.034c1.124-1.846 3.971-.844 3.691 1.299l-.74 5.685h6.86a.5.5 0 0 1 .5.5v3a1 1 0 0 1-.084.4l-3.276 6.648a.95.95 0 0 1-.44.453c-.132.065-.276.049-.423.049H4c-1.105 0-2-1.045-2-2.15V13a2 2 0 0 1 2-2h2.134ZM6 13H4v6h2v-6Z"
394
+ fill={4284840068}
395
+ propList={
396
+ [
397
+ "fill",
398
+ ]
399
+ }
400
+ />
401
+ </RNSVGGroup>
402
+ </RNSVGSvgView>
403
+ `;