react-native-ui-lib/src/components/wizard/wizard.api.json

[](https://stand-with-ukraine.pp.ua)

{
  "name": "Wizard",
  "category": "navigation",
  "description": "A wizard presents a series of steps in  prescribed order. That the user needs to complete in order to accomplish a goal (e.g. purchase a product)",
  "note": "Use Wizard with nested Wizard.Step(s) to achieve the desired result.",
  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/WizardScreen.tsx",
  "images": [
    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Wizard/Wizard.gif?raw=true",
    "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": "activeConfig",
      "type": "WizardStepProps",
      "description": "The configuration of the active step (see Wizard.Step.propTypes)"
    },
    {
      "name": "onActiveIndexChanged",
      "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"
    }
  ],
  "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://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=10116-50439&embed-host=share"
              }
            ],
            "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://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=10116-104277&embed-host=share"
              }
            ],
            "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": "markdown: **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"
              }
            ]
          }
        ]
      }
    ]
  }
}