Skip to content

Commit 4bb8175

Browse files
ethansharethanshar
authored
Fix timeline docs (#3592)
1 parent bd7c428 commit 4bb8175

File tree

1 file changed

+47
-104
lines changed

1 file changed

+47
-104
lines changed

‎src/components/timeline/timeline.api.json

Lines changed: 47 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,8 @@
22
"name": "Timeline",
33
"category": "lists",
44
"description": "A timeline item to render as part of a timeline list",
5-
"extends": [
6-
"View"
7-
],
8-
"extendsLink": [
9-
"https://reactnative.dev/docs/view"
10-
],
5+
"extends": ["View"],
6+
"extendsLink": ["https://reactnative.dev/docs/view"],
117
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TimelineScreen.tsx",
128
"images": [],
139
"props": [
@@ -111,23 +107,42 @@
111107
"layout": "horizontal"
112108
},
113109
{
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": [
110+
"type": "list",
111+
"items": [
119112
{
120-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Timeline/timeline_overview_structure.png"
113+
"title": "",
114+
"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.",
115+
"content": [
116+
{
117+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Timeline/timeline_structure.png"
118+
}
119+
]
120+
},
121+
{
122+
"title": "Points aligned to center (default)",
123+
"description": "The timeline points are aligned with the center of the element on the right.",
124+
"content": [
125+
{
126+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Timeline/timeline_structure_center.png"
127+
}
128+
]
129+
},
130+
{
131+
"title": "Points aligned to anchor ref",
132+
"description": "The Timeline can be configured to align its points to one of the elements on the right. In the example, the points are aligned with the titles in the cards.",
133+
"content": [
134+
{
135+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Timeline/timeline_structure_anchorRef.png"
136+
}
137+
]
121138
}
122-
]
139+
],
140+
"layout": "horizontal",
141+
"title": "Structure"
123142
},
124143
{
125144
"type": "table",
126-
"columns": [
127-
"Property",
128-
"Preview",
129-
"DELETE ME"
130-
],
145+
"columns": ["Property", "Preview"],
131146
"items": [
132147
{
133148
"title": "Current",
@@ -229,10 +244,7 @@
229244
},
230245
{
231246
"type": "table",
232-
"columns": [
233-
"Property",
234-
"Preview"
235-
],
247+
"columns": ["Property", "Preview"],
236248
"items": [
237249
{
238250
"title": "Bullet",
@@ -252,10 +264,7 @@
252264
},
253265
{
254266
"type": "table",
255-
"columns": [
256-
"Property",
257-
"Preview"
258-
],
267+
"columns": ["Property", "Preview"],
259268
"items": [
260269
{
261270
"title": "Text",
@@ -296,82 +305,9 @@
296305
],
297306
"name": "Point Accessories"
298307
},
299-
{
300-
"type": "section",
301-
"title": "Orientation",
302-
"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.",
303-
"content": [
304-
{
305-
"value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=2325-449060&embed-host=share"
306-
}
307-
]
308-
},
309-
{
310-
"type": "list",
311-
"items": [
312-
{
313-
"title": "Aligned to top",
314-
"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.",
315-
"content": [
316-
{
317-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Timeline/timeline_overview_spec1.png"
318-
}
319-
]
320-
},
321-
{
322-
"title": "Aligned to center",
323-
"description": "The timeline points are aligned with the center of the element on the right.",
324-
"content": [
325-
{
326-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Timeline/timeline_overview_spec2.png"
327-
}
328-
]
329-
}
330-
],
331-
"layout": "horizontal",
332-
"title": "Spec",
333-
"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."
334-
},
335-
{
336-
"type": "list",
337-
"items": [
338-
{
339-
"title": "",
340-
"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.",
341-
"content": [
342-
{
343-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Timeline/timeline_structure.png"
344-
}
345-
]
346-
},
347-
{
348-
"title": "Points aligned to center (default)",
349-
"description": "The timeline points are aligned with the center of the element on the right.",
350-
"content": [
351-
{
352-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Timeline/timeline_structure_center.png"
353-
}
354-
]
355-
},
356-
{
357-
"title": "Points aligned to anchor ref",
358-
"description": "The Timeline can be configured to align its points to one of the elements on the right. In the example, the points are aligned with the titles in the cards.",
359-
"content": [
360-
{
361-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Timeline/timeline_structure_anchorRef.png"
362-
}
363-
]
364-
}
365-
],
366-
"layout": "horizontal",
367-
"title": "Structure"
368-
},
369308
{
370309
"type": "table",
371-
"columns": [
372-
"Property",
373-
"Preview"
374-
],
310+
"columns": ["Property", "Preview"],
375311
"items": [
376312
{
377313
"title": "Solid",
@@ -387,10 +323,7 @@
387323
},
388324
{
389325
"type": "table",
390-
"columns": [
391-
"Property",
392-
"Preview"
393-
],
326+
"columns": ["Property", "Preview"],
394327
"items": [
395328
{
396329
"title": "Entry",
@@ -399,6 +332,16 @@
399332
],
400333
"name": "Line Accessories"
401334
},
335+
{
336+
"type": "section",
337+
"title": "Orientation",
338+
"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.",
339+
"content": [
340+
{
341+
"value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=2325-449060&embed-host=share"
342+
}
343+
]
344+
},
402345
{
403346
"type": "section",
404347
"title": "Spec",

0 commit comments

Comments
 (0)