RFC : Stepper

[phelpa]

O que é : O Stepper tem como objetivo mostrar ao usuário a quantidade de etapas dentro de um fluxo, bem como indicar qualquer etapa que está sendo apresentada.

Figma : https://www.figma.com/file/WJWEph4jRV7uuVe4e9Pj13/Core-components-handoff?node-id=5200%3A103110

RFC :

import Stepper from '@eduzz/houston-ui/Stepper';

const [finished,setFinished] = useState([]) // finished = [0,1] se fosse a imagem acima

<Stepper finished={finished} onChange={finished=>setFinished(finished)} active={2}  > //opcionais
    <Step label='Básico'>
       <div>Conteúdo1</div>
    </Step>

    <Step label='Personalização' description='Personalize seu produto'>
       <div>Conteúdo2</div>
    </Step>

     <Step label='Comunicação' >
       <div>Conteúdo3</div>
    </Step>

    <Step label='Avançado' error>
       <div>Conteúdo3</div>
    </Step>

</Stepper>

Se o cara quiser o Stepper somente para se localizar na página (sem conteúdo) :

import Stepper from '@eduzz/houston-ui/Stepper';

const [finished,setFinished] = useState([]) // finished = [0,1] se fosse a imagem acima

<Stepper finished={finished} active={2}  > //opcionais
    <Step label='Básico'/>
    <Step label='Personalização' description='Personalize seu produto'/>
    <Step label='Comunicação' />
    <Step label='Avançado' error />
</Stepper>

Stepper props

prop	type	required	default	description
finished	number[]	false	-	Índices dos Steps já finalizados.
onChange	(finished: number[]) => void	false	-	Passa pelo callback os índices dos Steps já finalizados.
active	number	false	`false	Índice do Step ativo
children	React.ReactNode	true	-

Step props

prop	type	required	default	description
children	React.ReactNode	false	-
error	booolean	false	false
label	string	true	-
description	string	false	-

[ffernandomoraes]

Fala Pliniot, não seria mais fácil controlar os steppers concluídos por uma lógica mais simples? Por exemplo: step 3 está ativo, podemos assumir que o 1 e o 2 estão concluídos. Sacou?

Eu pensaria em algo mais simples assim:

Stepper props

prop	type	required	default	description
current	number	false	-	-
onChange	(step: number, ev: 'next', 'prev') => void	false	-	-

Ou dá pra dividir em duas funções o onChange: onNext, onPrev.

De resto, não tem muito segredo, o componente está bem simples =|

[phelpa]

Se a regra for :

Só da pra clicar no item que vem antes ou no que vem depois, não dá pra clicar em um cara 2 passos antes ou depois por exemplo. Aí acho que seu esquema funciona.

E to achando que a regra é essa mesma né? Então vou seguir o jogo na sua ideia.

Gostei também do onNext, onPrev

[ffernandomoraes]

Então, tem que validar isso com o designer, "Eu posso sair da etapa 3 e ir para 1 direto ou tenho que passar pela 2?".

Mas mesmo se for possível isso, da pra manter as mesmas props, não influencia em nada.

[phelpa]

É, pensei aqui e não mudaria as props mesmo, podecrer. E vou validar com o designer isso.

Atualizado :

RFC :

import Stepper from '@eduzz/houston-ui/Stepper';

const [current, setCurrent] = useState(2)

<Stepper current={current}  onPrev={(prev) => setCurrent(prev)} onNext={(next)=> setCurrent(next)} > //opcional
    <Step label='Básico'>
       <div>Conteúdo1</div>
    </Step>

    <Step label='Personalização' description='Personalize seu produto'>
       <div>Conteúdo2</div>
    </Step>

     <Step label='Comunicação' >
       <div>Conteúdo3</div>
    </Step>

    <Step label='Avançado' error>
       <div>Conteúdo3</div>
    </Step>

</Stepper>

Se o cara quiser o Stepper somente para se localizar na página (sem conteúdo) :

import Stepper from '@eduzz/houston-ui/Stepper';

const [finished,setFinished] = useState([]) 

<Stepper current={2}  > //opcionais
    <Step label='Básico'/>
    <Step label='Personalização' description='Personalize seu produto'/>
    <Step label='Comunicação' />
    <Step label='Avançado' error />
</Stepper>

Stepper props

prop	type	required	default	description
onPrev	(number) => void	false	-	Passa pelo callback o índice do Step atual
onNext	(number) => void	false	-	Passa pelo callback o índice do Step atual
current	number	false	`false	Índice do Step atual
children	React.ReactNode	true	-

Step props

prop	type	required	default	description
children	React.ReactNode	false	-
error	booolean	false	false
label	string	true	-
description	string	false	-