Add a 'footer' slot

[rminderhoud]

I'm currently using the wizard but I have some strict styling requirements that make styling difficult if I nest nest components inside the step and not at the same depth as the Nav component. Unfortunately there's currently no way to nest any components except Nav inside the inner div so I can't align them. My workaround for this was to use the instance prop and pull the Nav component out of the StepWizard component and do some things manually and keep all the components at the same depth. It would be great if I didn't have to do that but could nest an arbitrary amount of components to a "footer slot" or something like this.

My current work around:

            <div id={styles.wizard}>
                <Nav {...stepProps} {...this.props} data={navData} />
                <StepWizard
                    onStepChange={this.onStepChange}
                    instance={this.setWizardInstance}
                    className={styles['wizard-content']}
                >
                    <StepOne {...this.props} />
                    <StepTwo {...this.props} />
                    <StepThree {...this.props} />
                    <StepFour {...this.props} />
                </StepWizard>
                <Controls {...stepProps} {...this.props} />
            </div>

Unfortunately this results some additional work since I have to recreate the step props for those Nav and Controls components and then I have to do some extra re-rendering based on the wizard instance state.

It would be a bit nicer if I could do something like this instead:

<StepWizard nav={<Nav />} slots={[<Component1 />, <Component 2 />]} />

Not sure about the feasibility of this but just another enhancement suggestion. I am thankful for the instance addition because it at least allows me to work around it.

Thanks for your hard-work on this library!

[JaKXz]

FWIW I also tried column-direction: reverse with no success, but I might have gotten something wrong in the way I was setting things up.