const Step = ({ title }) => {
return (
<Wizard.Step aria-label={`Edit button wizard: ${title}`} title={title}>
<Form.Card>
<P>Contents</P>
</Form.Card>
<Wizard.Buttons />
</Wizard.Step>
)
}
const Summary = () => {
const { summaryTitle } = Form.useTranslation().Step
return (
<Wizard.Step
aria-label={`Edit button wizard: ${summaryTitle}`}
title={summaryTitle}
>
<Form.Card>
<Value.SummaryList>
<Value.Name.First path="/firstName" />
</Value.SummaryList>
<Wizard.EditButton toStep={0} />
</Form.Card>
</Wizard.Step>
)
}
render(
<Form.Handler
data={{
firstName: 'John',
}}
>
<Provider
StepIndicator={{
overviewTitle: 'Edit button wizard steps',
}}
>
<Wizard.Container initialActiveIndex={1}>
<Step title="Step" />
<Summary />
</Wizard.Container>
</Provider>
</Form.Handler>
)