react-native-ui-lib 7.38.1-snapshot.6377 → 7.38.1-snapshot.6381
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
|
@@ -177,7 +177,8 @@
|
|
|
177
177
|
"avatar": {
|
|
178
178
|
"source": {
|
|
179
179
|
"uri": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/icons/icon%20examples%20for%20docs/avatar_1.jpg"
|
|
180
|
-
}
|
|
180
|
+
},
|
|
181
|
+
"size": "XLarge"
|
|
181
182
|
}
|
|
182
183
|
}
|
|
183
184
|
}
|
|
@@ -185,10 +186,179 @@
|
|
|
185
186
|
},
|
|
186
187
|
{
|
|
187
188
|
"title": "Custom component",
|
|
188
|
-
"description": "(renderCustomItem)"
|
|
189
|
+
"description": "(renderCustomItem)",
|
|
190
|
+
"content": [
|
|
191
|
+
{
|
|
192
|
+
"props": {
|
|
193
|
+
"itemSize": 124,
|
|
194
|
+
"title": "Title",
|
|
195
|
+
"subtitle": "Subtitle",
|
|
196
|
+
"thumbnail": {
|
|
197
|
+
"source": {
|
|
198
|
+
"uri": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/icons/icon%20examples%20for%20docs/CustomComponent_Square.png"
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
]
|
|
189
204
|
}
|
|
190
205
|
],
|
|
191
206
|
"title": "Media Types"
|
|
207
|
+
},
|
|
208
|
+
{
|
|
209
|
+
"type": "table",
|
|
210
|
+
"columns": [
|
|
211
|
+
"Property",
|
|
212
|
+
"Preview"
|
|
213
|
+
],
|
|
214
|
+
"items": [
|
|
215
|
+
{
|
|
216
|
+
"title": "Text under image (default)",
|
|
217
|
+
"content": [
|
|
218
|
+
{
|
|
219
|
+
"props": {
|
|
220
|
+
"itemSize": 124,
|
|
221
|
+
"title": "Title",
|
|
222
|
+
"subtitle": "Subtitle"
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
]
|
|
226
|
+
},
|
|
227
|
+
{
|
|
228
|
+
"title": "OverlayText",
|
|
229
|
+
"content": [
|
|
230
|
+
{
|
|
231
|
+
"props": {
|
|
232
|
+
"itemSize": 124,
|
|
233
|
+
"title": "Title",
|
|
234
|
+
"subtitle": "Subtitle",
|
|
235
|
+
"overlayText": true
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
]
|
|
239
|
+
}
|
|
240
|
+
],
|
|
241
|
+
"title": "Layout"
|
|
242
|
+
},
|
|
243
|
+
{
|
|
244
|
+
"type": "table",
|
|
245
|
+
"columns": [
|
|
246
|
+
"Property",
|
|
247
|
+
"Preview"
|
|
248
|
+
],
|
|
249
|
+
"items": [
|
|
250
|
+
{
|
|
251
|
+
"title": "Title (default)",
|
|
252
|
+
"content": [
|
|
253
|
+
{
|
|
254
|
+
"props": {
|
|
255
|
+
"itemSize": 124,
|
|
256
|
+
"title": "Title"
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
]
|
|
260
|
+
},
|
|
261
|
+
{
|
|
262
|
+
"title": "Subtitle",
|
|
263
|
+
"content": [
|
|
264
|
+
{
|
|
265
|
+
"props": {
|
|
266
|
+
"itemSize": 124,
|
|
267
|
+
"title": "Title",
|
|
268
|
+
"subtitle": "Subtitle"
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
]
|
|
272
|
+
},
|
|
273
|
+
{
|
|
274
|
+
"title": "Description",
|
|
275
|
+
"content": [
|
|
276
|
+
{
|
|
277
|
+
"props": {
|
|
278
|
+
"itemSize": 124,
|
|
279
|
+
"title": "Title",
|
|
280
|
+
"subtitle": "Subtitle",
|
|
281
|
+
"description": "Description"
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
]
|
|
285
|
+
}
|
|
286
|
+
],
|
|
287
|
+
"title": "Text Types"
|
|
288
|
+
},
|
|
289
|
+
{
|
|
290
|
+
"type": "table",
|
|
291
|
+
"columns": [
|
|
292
|
+
"Property",
|
|
293
|
+
"Preview"
|
|
294
|
+
],
|
|
295
|
+
"items": [
|
|
296
|
+
{
|
|
297
|
+
"title": "Text alignment",
|
|
298
|
+
"description": "horizontalAlignment",
|
|
299
|
+
"content": [
|
|
300
|
+
{
|
|
301
|
+
"props": {
|
|
302
|
+
"itemSize": 124,
|
|
303
|
+
"title": "Title",
|
|
304
|
+
"horizontalAlignment": "center"
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
]
|
|
308
|
+
},
|
|
309
|
+
{
|
|
310
|
+
"title": "Max lines number",
|
|
311
|
+
"description": "markdown:\ntitleLines
\nsubtitleLines
\ndescriptionLines ",
|
|
312
|
+
"content": [
|
|
313
|
+
{
|
|
314
|
+
"props": {
|
|
315
|
+
"itemSize": 124,
|
|
316
|
+
"title": "This text shows a long text example",
|
|
317
|
+
"subtitle": "This text shows a long text example",
|
|
318
|
+
"description": "This text shows a long text example",
|
|
319
|
+
"titleLines": 2,
|
|
320
|
+
"subtitleLines": 2,
|
|
321
|
+
"descriptionLines": 2
|
|
322
|
+
}
|
|
323
|
+
}
|
|
324
|
+
]
|
|
325
|
+
},
|
|
326
|
+
{
|
|
327
|
+
"title": "Text color",
|
|
328
|
+
"description": "titleColor
\nsubtitleColor
\ndescriptionColor",
|
|
329
|
+
"content": [
|
|
330
|
+
{
|
|
331
|
+
"props": {
|
|
332
|
+
"itemSize": 124,
|
|
333
|
+
"title": "Title",
|
|
334
|
+
"subtitle": "Subtitle",
|
|
335
|
+
"description": "Description",
|
|
336
|
+
"titleColor": "#9A27D5",
|
|
337
|
+
"subtitleColor": "#116DFF",
|
|
338
|
+
"descriptionColor": "#008563"
|
|
339
|
+
}
|
|
340
|
+
}
|
|
341
|
+
]
|
|
342
|
+
},
|
|
343
|
+
{
|
|
344
|
+
"title": "Text styles",
|
|
345
|
+
"description": "titleTypography \nsubtitleTypography \ndescriptionTypography",
|
|
346
|
+
"content": [
|
|
347
|
+
{
|
|
348
|
+
"props": {
|
|
349
|
+
"itemSize": 124,
|
|
350
|
+
"title": "Title",
|
|
351
|
+
"subtitle": "Subtitle",
|
|
352
|
+
"description": "Description",
|
|
353
|
+
"titleTypography": "headingL",
|
|
354
|
+
"subtitleTypography": "bodyMedium",
|
|
355
|
+
"descriptionTypography": "bodyMedium"
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
]
|
|
359
|
+
}
|
|
360
|
+
],
|
|
361
|
+
"title": "Styling Options"
|
|
192
362
|
}
|
|
193
363
|
]
|
|
194
364
|
}
|
|
@@ -2,12 +2,20 @@
|
|
|
2
2
|
"name": "Timeline",
|
|
3
3
|
"category": "lists",
|
|
4
4
|
"description": "A timeline item to render as part of a timeline list",
|
|
5
|
-
"extends": [
|
|
6
|
-
|
|
5
|
+
"extends": [
|
|
6
|
+
"View"
|
|
7
|
+
],
|
|
8
|
+
"extendsLink": [
|
|
9
|
+
"https://reactnative.dev/docs/view"
|
|
10
|
+
],
|
|
7
11
|
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TimelineScreen.tsx",
|
|
8
12
|
"images": [],
|
|
9
13
|
"props": [
|
|
10
|
-
{
|
|
14
|
+
{
|
|
15
|
+
"name": "backgroundColor",
|
|
16
|
+
"type": "string",
|
|
17
|
+
"description": "Background color for the item"
|
|
18
|
+
},
|
|
11
19
|
{
|
|
12
20
|
"name": "renderContent",
|
|
13
21
|
"type": "any",
|
|
@@ -35,7 +43,9 @@
|
|
|
35
43
|
"description": "The point props"
|
|
36
44
|
},
|
|
37
45
|
{
|
|
38
|
-
"name": "testID",
|
|
46
|
+
"name": "testID",
|
|
47
|
+
"type": "string",
|
|
48
|
+
"description": "The test id for e2e tests"
|
|
39
49
|
}
|
|
40
50
|
],
|
|
41
51
|
"snippet": [
|
|
@@ -57,5 +67,266 @@
|
|
|
57
67
|
" alignmentTargetRef: target",
|
|
58
68
|
" }$5}",
|
|
59
69
|
"/>"
|
|
70
|
+
],
|
|
71
|
+
"docs": {
|
|
72
|
+
"hero": {
|
|
73
|
+
"title": "Timeline",
|
|
74
|
+
"description": "markdown:\nThe timeline displays a vertical list of events or steps. \nIt provides the user with a sense of awareness around the progress and the remaining steps.",
|
|
75
|
+
"type": "hero",
|
|
76
|
+
"layout": "horizontal",
|
|
77
|
+
"content": [
|
|
78
|
+
{
|
|
79
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Timeline/timeline_overview_cover.png"
|
|
80
|
+
}
|
|
81
|
+
]
|
|
82
|
+
},
|
|
83
|
+
"tabs": [
|
|
84
|
+
{
|
|
85
|
+
"title": "Overview",
|
|
86
|
+
"sections": [
|
|
87
|
+
{
|
|
88
|
+
"type": "list",
|
|
89
|
+
"items": [
|
|
90
|
+
{
|
|
91
|
+
"title": "Log Timeline",
|
|
92
|
+
"description": "A log of past and future activities or events.
The list starts with an empty state, and it keeps on updating and changing.",
|
|
93
|
+
"content": [
|
|
94
|
+
{
|
|
95
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Timeline/timeline_overview_usageExamples1.png"
|
|
96
|
+
}
|
|
97
|
+
]
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"title": "Steps Timeline",
|
|
101
|
+
"description": "A list of suggested steps to take to achieve a certain goal.
Users usually need to take action with these steps.
The steps are usually decided in advance, meaning that the initial state is not empty.",
|
|
102
|
+
"content": [
|
|
103
|
+
{
|
|
104
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Timeline/timeline_overview_usageExamples2.png"
|
|
105
|
+
}
|
|
106
|
+
]
|
|
107
|
+
}
|
|
108
|
+
],
|
|
109
|
+
"title": "Usage Examples",
|
|
110
|
+
"description": "The timeline displays a vertical list of events or steps. \nIt provides the user with a sense of awareness around the progress and the remaining steps.",
|
|
111
|
+
"layout": "horizontal"
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"type": "section",
|
|
115
|
+
"title": "Structure",
|
|
116
|
+
"description": "markdown:\nThe Timeline consists of points and lines, each with different styles and states. These elements can be combined in various ways to suit different product goals. \nPoints create visual breakpoints that make your timeline easier to read, they act as bullet points, representing each step or activity. The icons and colors can be customized. \nLines can either match the state and color of the points or be styled differently or in neutral tokens to emphasize the points.",
|
|
117
|
+
"layout": "horizontal",
|
|
118
|
+
"content": [
|
|
119
|
+
{
|
|
120
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Timeline/timeline_overview_structure.png"
|
|
121
|
+
}
|
|
122
|
+
]
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
"type": "table",
|
|
126
|
+
"columns": [
|
|
127
|
+
"State",
|
|
128
|
+
"Preview",
|
|
129
|
+
"DELETE ME"
|
|
130
|
+
],
|
|
131
|
+
"items": [
|
|
132
|
+
{
|
|
133
|
+
"title": "Current",
|
|
134
|
+
"content": [
|
|
135
|
+
{
|
|
136
|
+
"props": {
|
|
137
|
+
"state": "current",
|
|
138
|
+
"point": {
|
|
139
|
+
"type": {
|
|
140
|
+
"type": "bullet"
|
|
141
|
+
}
|
|
142
|
+
},
|
|
143
|
+
"bottomLine": {
|
|
144
|
+
"type": {
|
|
145
|
+
"type": "solid"
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
"props": {
|
|
152
|
+
"point": {
|
|
153
|
+
"type": {
|
|
154
|
+
"type": "bullet",
|
|
155
|
+
"color": "#116DFF"
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
]
|
|
161
|
+
},
|
|
162
|
+
{
|
|
163
|
+
"title": "Next",
|
|
164
|
+
"content": [
|
|
165
|
+
{
|
|
166
|
+
"props": {
|
|
167
|
+
"state": "next",
|
|
168
|
+
"point": {
|
|
169
|
+
"type": {
|
|
170
|
+
"type": "bullet"
|
|
171
|
+
}
|
|
172
|
+
},
|
|
173
|
+
"bottomLine": {
|
|
174
|
+
"type": {
|
|
175
|
+
"type": "solid"
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
]
|
|
181
|
+
},
|
|
182
|
+
{
|
|
183
|
+
"title": "Error",
|
|
184
|
+
"content": [
|
|
185
|
+
{
|
|
186
|
+
"props": {
|
|
187
|
+
"state": "error",
|
|
188
|
+
"point": {
|
|
189
|
+
"type": {
|
|
190
|
+
"type": "bullet"
|
|
191
|
+
}
|
|
192
|
+
},
|
|
193
|
+
"bottomLine": {
|
|
194
|
+
"type": {
|
|
195
|
+
"type": "solid"
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
]
|
|
201
|
+
},
|
|
202
|
+
{
|
|
203
|
+
"title": "Success",
|
|
204
|
+
"content": [
|
|
205
|
+
{
|
|
206
|
+
"props": {
|
|
207
|
+
"state": "success",
|
|
208
|
+
"point": {
|
|
209
|
+
"type": {
|
|
210
|
+
"type": "bullet"
|
|
211
|
+
}
|
|
212
|
+
},
|
|
213
|
+
"bottomLine": {
|
|
214
|
+
"type": {
|
|
215
|
+
"type": "solid"
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
]
|
|
221
|
+
}
|
|
222
|
+
],
|
|
223
|
+
"title": "States",
|
|
224
|
+
"name": ""
|
|
225
|
+
},
|
|
226
|
+
{
|
|
227
|
+
"type": "table",
|
|
228
|
+
"columns": [
|
|
229
|
+
"Style",
|
|
230
|
+
"Preview"
|
|
231
|
+
],
|
|
232
|
+
"items": [
|
|
233
|
+
{
|
|
234
|
+
"title": "Bullet"
|
|
235
|
+
},
|
|
236
|
+
{
|
|
237
|
+
"title": "New Item"
|
|
238
|
+
},
|
|
239
|
+
{
|
|
240
|
+
"title": "New Item"
|
|
241
|
+
},
|
|
242
|
+
{
|
|
243
|
+
"title": "New Item"
|
|
244
|
+
},
|
|
245
|
+
{
|
|
246
|
+
"title": "New Item"
|
|
247
|
+
}
|
|
248
|
+
],
|
|
249
|
+
"title": "Styles",
|
|
250
|
+
"name": "Point"
|
|
251
|
+
},
|
|
252
|
+
{
|
|
253
|
+
"type": "table",
|
|
254
|
+
"columns": [
|
|
255
|
+
"Style",
|
|
256
|
+
"Preview"
|
|
257
|
+
],
|
|
258
|
+
"items": [
|
|
259
|
+
{
|
|
260
|
+
"title": "Solid",
|
|
261
|
+
"content": [
|
|
262
|
+
{
|
|
263
|
+
"props": {
|
|
264
|
+
"state": "current",
|
|
265
|
+
"bottomLine": {
|
|
266
|
+
"type": {
|
|
267
|
+
"type": "solid"
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
]
|
|
273
|
+
},
|
|
274
|
+
{
|
|
275
|
+
"title": "Dashed",
|
|
276
|
+
"content": [
|
|
277
|
+
{
|
|
278
|
+
"props": {
|
|
279
|
+
"state": "current",
|
|
280
|
+
"bottomLine": {
|
|
281
|
+
"type": {
|
|
282
|
+
"type": "dashed"
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
]
|
|
288
|
+
}
|
|
289
|
+
],
|
|
290
|
+
"name": "Line"
|
|
291
|
+
},
|
|
292
|
+
{
|
|
293
|
+
"type": "section",
|
|
294
|
+
"title": "Orientation",
|
|
295
|
+
"description": "markdown:\nThe Timeline can be displayed in either ascending or descending order, depending on the context: \n\n - **Ascending:** Numbers increase as you move forward. \n - **Descending:** Numbers decrease as you move forward.",
|
|
296
|
+
"content": [
|
|
297
|
+
{
|
|
298
|
+
"value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=2325-449060&embed-host=share"
|
|
299
|
+
}
|
|
300
|
+
]
|
|
301
|
+
},
|
|
302
|
+
{
|
|
303
|
+
"type": "list",
|
|
304
|
+
"items": [
|
|
305
|
+
{
|
|
306
|
+
"title": "Aligned to top",
|
|
307
|
+
"description": "The Timeline can be configured to align its points with the top of a specific group of elements on the right. In the example, the points are aligned with the top of the first element within the Card.",
|
|
308
|
+
"content": [
|
|
309
|
+
{
|
|
310
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Timeline/timeline_overview_spec1.png"
|
|
311
|
+
}
|
|
312
|
+
]
|
|
313
|
+
},
|
|
314
|
+
{
|
|
315
|
+
"title": "Aligned to center",
|
|
316
|
+
"description": "The timeline points are aligned with the center of the element on the right.",
|
|
317
|
+
"content": [
|
|
318
|
+
{
|
|
319
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Timeline/timeline_overview_spec2.png"
|
|
320
|
+
}
|
|
321
|
+
]
|
|
322
|
+
}
|
|
323
|
+
],
|
|
324
|
+
"layout": "horizontal",
|
|
325
|
+
"title": "Spec",
|
|
326
|
+
"description": "markdown:\n**Key rules:** \n- Maintain a minimum distance of S2 between the Timeline and the elements on the right. \n- Points can be aligned either to the top or the center of the elements on the right. \n- When points are center-aligned with the elements, set the line length to auto, with a minimum of 20px."
|
|
327
|
+
}
|
|
328
|
+
]
|
|
329
|
+
}
|
|
60
330
|
]
|
|
331
|
+
}
|
|
61
332
|
}
|