Skip to content

Commit 2918584

Browse files
rnuinoci[bot]rnuinoci[bot]
authored
wix-noci: update api.json (#3392)
Co-authored-by: rnuinoci[bot] <182611266+rnuinoci[bot]@users.noreply.github.com>
1 parent 8e49f02 commit 2918584

File tree

1 file changed

+192
-4
lines changed

1 file changed

+192
-4
lines changed

‎src/components/wizard/wizard.api.json

Lines changed: 192 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,11 @@
99
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Wizard/WizardPresets.png?raw=true"
1010
],
1111
"props": [
12-
{"name": "activeIndex", "type": "number", "description": "The active step's index"},
12+
{
13+
"name": "activeIndex",
14+
"type": "number",
15+
"description": "The active step's index"
16+
},
1317
{
1418
"name": "activeConfig",
1519
"type": "WizardStepProps",
@@ -20,14 +24,198 @@
2024
"type": "(index: number) => void",
2125
"description": "Callback that is called when the active step is changed (i.e. a step was clicked on). The new activeIndex will be the input of the callback"
2226
},
23-
{"name": "containerStyle", "type": "ViewStyle", "description": "Add or override style of the container"},
24-
{"name": "testID", "type": "string", "description": "The component test id"}
27+
{
28+
"name": "containerStyle",
29+
"type": "ViewStyle",
30+
"description": "Add or override style of the container"
31+
},
32+
{
33+
"name": "testID",
34+
"type": "string",
35+
"description": "The component test id"
36+
}
2537
],
2638
"snippet": [
2739
"<Wizard activeIndex={0$1} onActiveIndexChanged={() => console.log('changed')$2}>",
2840
" {_.map(items, item => (",
2941
" return renderItem(item, index);",
3042
" ))$3}",
3143
"</Wizard>"
32-
]
44+
],
45+
"docs": {
46+
"hero": {
47+
"title": "Wizard",
48+
"description": "A wizard presents a series of steps in a prescribed order that the user needs to complete in order to accomplish a goal (e.g. purchase a product). \nThe wizard must be included only in modal screens. \n \nWizards can be helpful in the following situations: \n- When you want to simplify a complex task. \n- When the user must complete steps in a specific sequence.",
49+
"type": "hero",
50+
"layout": "horizontal",
51+
"content": [
52+
{
53+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_hero.png"
54+
}
55+
]
56+
},
57+
"tabs": [
58+
{
59+
"title": "Overview",
60+
"sections": [
61+
{
62+
"type": "section",
63+
"content": [
64+
{
65+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_overview_section_01.png"
66+
}
67+
],
68+
"title": "Product Examples",
69+
"description": "In the example below the user has to go through a checkout process of 3 steps. 
Wizard is being used here to guide the user through the process. "
70+
},
71+
{
72+
"type": "section",
73+
"layout": "horizontal",
74+
"content": [
75+
{
76+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_overview_section_02.png"
77+
}
78+
],
79+
"title": "Wizard Alternative",
80+
"description": "Steps can be also represented with a counter in the TopBar subtitle, without a Wizard.\n\nThe Wizard is more fitting for guide-through, more interactive flows. For simpler, more conventional flows- a simple counter will be more fitting."
81+
},
82+
{
83+
"type": "table",
84+
"columns": [
85+
"Steps number",
86+
"Component"
87+
],
88+
"items": [
89+
{
90+
"title": "3 Steps (1st active)",
91+
"content": [
92+
{
93+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_overview_table_01.png"
94+
}
95+
],
96+
"description": ""
97+
},
98+
{
99+
"title": "4 Steps (3rd active)",
100+
"content": [
101+
{
102+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_overview_table_02.png"
103+
}
104+
]
105+
},
106+
{
107+
"title": "5 Steps (4th active)",
108+
"content": [
109+
{
110+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_overview_table_03.png"
111+
}
112+
]
113+
},
114+
{
115+
"title": "6 Steps (6th active)",
116+
"content": [
117+
{
118+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_overview_table_04.png"
119+
}
120+
]
121+
}
122+
]
123+
},
124+
{
125+
"type": "table",
126+
"columns": [
127+
"State",
128+
"Component"
129+
],
130+
"items": [
131+
{
132+
"title": "**Active**",
133+
"description": "Border: $outlinePrimary \nNumber: subtext, $textPrimary \nStep label: bodySmallBold, $textNuetralHeavy ",
134+
"content": [
135+
{
136+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_overview_table_step01.png"
137+
}
138+
]
139+
},
140+
{
141+
"title": "**Next (enabled)**",
142+
"description": "Border: $outlineDisabled \nNumber: subtext, $textNuetralHeavy ",
143+
"content": [
144+
{
145+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_overview_table_step02.png"
146+
}
147+
]
148+
},
149+
{
150+
"title": "**Next (disabled)** ",
151+
"description": "Border: $outlineDisabled \nNumber: subtext, $textDisabled ",
152+
"content": [
153+
{
154+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_overview_table_step03.png"
155+
}
156+
]
157+
},
158+
{
159+
"title": "**Completed** ",
160+
"description": "Border: $outlineDisabled \nIcon: $iconNuetral ",
161+
"content": [
162+
{
163+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_overview_table_step04.png"
164+
}
165+
]
166+
},
167+
{
168+
"title": "**Skipped** ",
169+
"description": "Border: $outlineDanger \nNumber: subtext, $textDangerLight ",
170+
"content": [
171+
{
172+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_overview_table_step05.png"
173+
}
174+
]
175+
},
176+
{
177+
"title": "**Error** ",
178+
"description": "Border: $outlineDanger \nIcon: $iconDangerLight",
179+
"content": [
180+
{
181+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_overview_table_step06.png"
182+
}
183+
]
184+
}
185+
]
186+
},
187+
{
188+
"type": "section",
189+
"layout": "horizontal",
190+
"content": [
191+
{
192+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_overview_section_spec.png"
193+
}
194+
],
195+
"description": "**Spacing Between Steps** \nAll steps are distributed evenly, leaving S5 margins. \nMin spacing between steps: S3 \n\n**Maximum Step Width** \nCurrent step’s text box shouldnt be larger than 40% of the screen’s width. \nIf the label will be larger it will get ellipsis. \ne.g. : For 375px screen : 40% = 150px"
196+
},
197+
{
198+
"type": "section",
199+
"title": "Steps spacing",
200+
"description": "All steps are distributed evenly, leaving 180px margins. \nMin spacing between steps: S9 \n \nIn case the steps does not fit with text, only the current step title should show (like in Mobile)",
201+
"content": [
202+
{
203+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_overview_section_tablet01.png"
204+
}
205+
]
206+
},
207+
{
208+
"type": "section",
209+
"title": "Maximum step width",
210+
"description": "Current step’s text box shouldnt be larger than 20% of the screen’s width. (26% in portrait)\nIf the label will be larger it will get ellipsis.\n\ne.g. : For 1112px screen : 20% = 222.4px",
211+
"content": [
212+
{
213+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_overview_section_tablet02.png"
214+
}
215+
]
216+
}
217+
]
218+
}
219+
]
220+
}
33221
}

0 commit comments

Comments
 (0)