Skip to content

Update wizard api.json #3392

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 14, 2024
Merged

Update wizard api.json #3392

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
196 changes: 192 additions & 4 deletions src/components/wizard/wizard.api.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,11 @@
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Wizard/WizardPresets.png?raw=true"
],
"props": [
{"name": "activeIndex", "type": "number", "description": "The active step's index"},
{
"name": "activeIndex",
"type": "number",
"description": "The active step's index"
},
{
"name": "activeConfig",
"type": "WizardStepProps",
Expand All @@ -20,14 +24,198 @@
"type": "(index: number) => void",
"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"
},
{"name": "containerStyle", "type": "ViewStyle", "description": "Add or override style of the container"},
{"name": "testID", "type": "string", "description": "The component test id"}
{
"name": "containerStyle",
"type": "ViewStyle",
"description": "Add or override style of the container"
},
{
"name": "testID",
"type": "string",
"description": "The component test id"
}
],
"snippet": [
"<Wizard activeIndex={0$1} onActiveIndexChanged={() => console.log('changed')$2}>",
" {_.map(items, item => (",
" return renderItem(item, index);",
" ))$3}",
"</Wizard>"
]
],
"docs": {
"hero": {
"title": "Wizard",
"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.",
"type": "hero",
"layout": "horizontal",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_hero.png"
}
]
},
"tabs": [
{
"title": "Overview",
"sections": [
{
"type": "section",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_overview_section_01.png"
}
],
"title": "Product Examples",
"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. "
},
{
"type": "section",
"layout": "horizontal",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_overview_section_02.png"
}
],
"title": "Wizard Alternative",
"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."
},
{
"type": "table",
"columns": [
"Steps number",
"Component"
],
"items": [
{
"title": "3 Steps (1st active)",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_overview_table_01.png"
}
],
"description": ""
},
{
"title": "4 Steps (3rd active)",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_overview_table_02.png"
}
]
},
{
"title": "5 Steps (4th active)",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_overview_table_03.png"
}
]
},
{
"title": "6 Steps (6th active)",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_overview_table_04.png"
}
]
}
]
},
{
"type": "table",
"columns": [
"State",
"Component"
],
"items": [
{
"title": "**Active**",
"description": "Border: $outlinePrimary \nNumber: subtext, $textPrimary \nStep label: bodySmallBold, $textNuetralHeavy ",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_overview_table_step01.png"
}
]
},
{
"title": "**Next (enabled)**",
"description": "Border: $outlineDisabled \nNumber: subtext, $textNuetralHeavy ",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_overview_table_step02.png"
}
]
},
{
"title": "**Next (disabled)** ",
"description": "Border: $outlineDisabled \nNumber: subtext, $textDisabled ",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_overview_table_step03.png"
}
]
},
{
"title": "**Completed** ",
"description": "Border: $outlineDisabled \nIcon: $iconNuetral ",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_overview_table_step04.png"
}
]
},
{
"title": "**Skipped** ",
"description": "Border: $outlineDanger \nNumber: subtext, $textDangerLight ",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_overview_table_step05.png"
}
]
},
{
"title": "**Error** ",
"description": "Border: $outlineDanger \nIcon: $iconDangerLight",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_overview_table_step06.png"
}
]
}
]
},
{
"type": "section",
"layout": "horizontal",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_overview_section_spec.png"
}
],
"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"
},
{
"type": "section",
"title": "Steps spacing",
"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)",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_overview_section_tablet01.png"
}
]
},
{
"type": "section",
"title": "Maximum step width",
"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",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Wizard/wizard_overview_section_tablet02.png"
}
]
}
]
}
]
}
}