1import { tintColor, tintColor2 } from './constants';
2import { images } from '../images';
3import { ImageTestGroup, ImageTestPropsFnInput } from '../types';
4
5const imageTests: ImageTestGroup = {
6  name: 'Borders',
7  tests: [
8    {
9      name: 'Border color',
10      props: {
11        style: {
12          borderWidth: 5,
13          borderColor: tintColor,
14        },
15      },
16    },
17    {
18      name: 'Border width',
19      props: ({ range }: ImageTestPropsFnInput) => ({
20        style: {
21          borderWidth: range(0, 20),
22          borderColor: tintColor,
23        },
24      }),
25    },
26    {
27      name: 'Border radius',
28      props: ({ range }: ImageTestPropsFnInput) => ({
29        style: {
30          borderWidth: 5,
31          borderColor: tintColor,
32          borderRadius: range(0, 100),
33        },
34      }),
35    },
36    {
37      name: 'Dotted border',
38      props: ({ range }: ImageTestPropsFnInput) => ({
39        style: {
40          borderWidth: range(0, 50),
41          borderColor: tintColor,
42          borderStyle: 'dotted',
43        },
44      }),
45    },
46    {
47      name: 'Dashed border',
48      props: ({ range }: ImageTestPropsFnInput) => ({
49        style: {
50          borderWidth: range(0, 50),
51          borderColor: tintColor,
52          borderStyle: 'dashed',
53        },
54      }),
55    },
56    {
57      name: 'Separate border radius',
58      props: ({ range }: ImageTestPropsFnInput) => ({
59        source: images.require_jpg1,
60        style: {
61          borderTopLeftRadius: range(0, 25),
62          borderTopRightRadius: range(0, 50),
63          borderBottomLeftRadius: range(0, 75),
64          borderBottomRightRadius: range(0, 200),
65          borderWidth: 20,
66          borderColor: tintColor,
67        },
68      }),
69    },
70    {
71      name: 'Separate border radius dotted',
72      props: ({ range }: ImageTestPropsFnInput) => ({
73        source: images.require_jpg1,
74        style: {
75          borderTopLeftRadius: range(0, 25),
76          borderTopRightRadius: range(0, 50),
77          borderBottomLeftRadius: range(0, 75),
78          borderBottomRightRadius: range(0, 200),
79          borderWidth: 15,
80          borderColor: tintColor,
81          borderStyle: 'dotted',
82        },
83      }),
84    },
85    {
86      name: 'Separate border radius dashed',
87      props: ({ range }: ImageTestPropsFnInput) => ({
88        source: images.require_jpg1,
89        style: {
90          borderTopLeftRadius: range(0, 25),
91          borderTopRightRadius: range(0, 50),
92          borderBottomLeftRadius: range(0, 75),
93          borderBottomRightRadius: range(0, 200),
94          borderWidth: 10,
95          borderColor: tintColor,
96          borderStyle: 'dashed',
97        },
98      }),
99    },
100    {
101      name: 'Top border',
102      props: ({ range }: ImageTestPropsFnInput) => ({
103        source: images.require_jpg1,
104        style: {
105          borderTopWidth: range(0, 25),
106          borderTopColor: tintColor,
107          borderTopLeftRadius: 10,
108          borderTopRightRadius: 10,
109        },
110      }),
111    },
112    {
113      name: 'Right border',
114      props: ({ range }: ImageTestPropsFnInput) => ({
115        source: images.require_jpg1,
116        style: {
117          borderRightWidth: range(0, 25),
118          borderRightColor: tintColor,
119          borderTopRightRadius: 10,
120          borderBottomRightRadius: 10,
121        },
122      }),
123    },
124    {
125      name: 'Bottom border',
126      props: ({ range }: ImageTestPropsFnInput) => ({
127        source: images.require_jpg1,
128        style: {
129          borderBottomWidth: range(0, 25),
130          borderBottomColor: tintColor,
131          borderBottomRightRadius: 10,
132          borderBottomLeftRadius: 10,
133        },
134      }),
135    },
136    {
137      name: 'Left border',
138      props: ({ range }: ImageTestPropsFnInput) => ({
139        source: images.require_jpg1,
140        style: {
141          borderLeftWidth: range(0, 25),
142          borderLeftColor: tintColor,
143          borderTopLeftRadius: 10,
144          borderBottomLeftRadius: 10,
145        },
146      }),
147    },
148    {
149      name: 'Exclude border',
150      props: ({ range }: ImageTestPropsFnInput) => ({
151        source: images.require_jpg1,
152        style: {
153          borderWidth: 12,
154          borderColor: tintColor,
155          borderRadius: 20,
156          borderBottomWidth: 0,
157          borderBottomLeftRadius: 0,
158        },
159      }),
160    },
161    {
162      name: 'Different colors',
163      props: ({ range }: ImageTestPropsFnInput) => ({
164        source: images.require_jpg1,
165        style: {
166          borderTopLeftRadius: range(0, 25),
167          borderTopRightRadius: range(0, 50),
168          borderBottomLeftRadius: range(0, 75),
169          borderBottomRightRadius: range(0, 200),
170          borderTopColor: tintColor,
171          borderRightColor: tintColor2,
172          borderBottomColor: tintColor,
173          borderLeftColor: tintColor2,
174          borderWidth: 20,
175          shadowColor: '#000',
176          shadowOffset: {
177            width: 0,
178            height: 5,
179          },
180          shadowOpacity: 0.5,
181          shadowRadius: 10,
182          elevation: 10,
183        },
184      }),
185    },
186    {
187      name: 'All different borders',
188      props: ({ range }: ImageTestPropsFnInput) => ({
189        source: images.require_jpg1,
190        style: {
191          borderTopLeftRadius: range(0, 25),
192          borderTopRightRadius: range(0, 50),
193          borderBottomLeftRadius: range(0, 75),
194          borderBottomRightRadius: range(0, 200),
195          borderTopColor: tintColor,
196          borderTopWidth: 3,
197          borderRightColor: tintColor2,
198          borderRightWidth: 5,
199          borderBottomColor: tintColor,
200          borderBottomWidth: 10,
201          borderLeftColor: tintColor2,
202          borderLeftWidth: 20,
203        },
204      }),
205    },
206    {
207      name: 'Start border (left on non RTL)',
208      props: ({ range }: ImageTestPropsFnInput) => ({
209        source: images.require_jpg1,
210        style: {
211          borderStartWidth: range(0, 25),
212          borderStartColor: tintColor,
213          borderTopStartRadius: 10,
214          borderBottomStartRadius: 10,
215        },
216      }),
217    },
218    {
219      name: 'End border (right on non RTL)',
220      props: ({ range }: ImageTestPropsFnInput) => ({
221        source: images.require_jpg1,
222        style: {
223          borderEndWidth: range(0, 25),
224          borderEndColor: tintColor,
225          borderTopEndRadius: 10,
226          borderBottomEndRadius: 10,
227        },
228      }),
229    },
230  ],
231};
232
233export default imageTests;
234