docs: adiciona todas os requerimentos que faltavam
This commit is contained in:
parent
b1b98049ad
commit
e8e7476c59
149
REQUISITOS.md
149
REQUISITOS.md
@ -2,35 +2,29 @@
|
||||
|
||||
Aqui estão os requisitos que serão avaliados:
|
||||
|
||||
## Header
|
||||
|
||||
# Requisitos obrigatórios para todos os componentes:
|
||||
- [ ] Replicar os estilos do layout no Figma em cada breakpoint
|
||||
- [ ] ultra wide
|
||||
- [ ] desktop
|
||||
- [ ] tablet
|
||||
- [ ] mobile
|
||||
- [ ] deve manter a responsividade entre os breakpoints
|
||||
- [ ] deve manter a responsividade entre os breakpoints
|
||||
- [ ] os textos devem estar iguais ao layout
|
||||
- [ ] Se no layout conter algum efeito de hover ou focus, deve ser replicado. Porem qualquer elemento que seja interativo deve ter um efeito
|
||||
- [ ] Os seletores de test-id deve estar nos elementos html que cotem o estilo e funcionalidade esperada (ex: se voce esta desenvolvendo um link, o test-id deve estar na tag `<a data-testid="link">` e todos os estilos e funcionalidades devem ser aplicados nessa tag, se for um campo de formulario o test-id deve estar na tag `<input data-testid="input...">` e assim por diante)
|
||||
|
||||
## Header
|
||||
|
||||
- [ ] todos os requisitos obrigatórios
|
||||
### Header - Logo
|
||||
- [ ] Replicar o tamanho para cada breakpoint
|
||||
- [ ] ultra wide
|
||||
- [ ] desktop
|
||||
- [ ] tablet
|
||||
- [ ] mobile
|
||||
|
||||
- [ ] todos os requisitos obrigatórios
|
||||
- [ ] deve conter textos alternativos para a logo
|
||||
- [ ] deve conter um link para a home ("/")
|
||||
- [ ] algum efeito de hover ao passar o mouse sobre a logo
|
||||
|
||||
### Header - Search Bar
|
||||
- [ ] Replicar os estilos do layout no Figma em cada breakpoint
|
||||
- [ ] ultra wide
|
||||
- [ ] desktop
|
||||
- [ ] tablet
|
||||
- [ ] mobile
|
||||
- [ ] a estilização deve ser feita no tag input (textos, cores, espaçamentos)
|
||||
- [ ] todos os requisitos obrigatórios
|
||||
- [ ] texto de placeholder deve ser o mesmo do layout
|
||||
- [ ] deve manter a responsividade entre os breakpoints
|
||||
- [ ] ao passar o mouse sobre o ícone de busca, deve haver um efeito.
|
||||
- [ ] devo conseguir fazer a submissão do formulário clicando no o botão de busca ou com o apertando da tecla enter
|
||||
- [ ] ao fazer a busca o usuário deve ser redirecionado para a página com o resultado da busca
|
||||
- nao precisa implementar a pagina de resultado, apenas o redirecionar com a url correta
|
||||
@ -40,34 +34,115 @@ Aqui estão os requisitos que serão avaliados:
|
||||
- esse padrão e' conhecido como query string
|
||||
|
||||
### Header - Login
|
||||
- [ ] Replicar os estilos do layout no Figma em cada breakpoint
|
||||
- [ ] ultra wide
|
||||
- [ ] desktop
|
||||
- [] tablet
|
||||
- [ ] mobile
|
||||
- [ ] deve manter a responsividade entre os breakpoints
|
||||
|
||||
- [ ] todos os requisitos obrigatórios
|
||||
- [ ] deve conter um link para a página de login (`"/login"`)
|
||||
- [ ] dever ter um efeito de hover ao passar o mouse sobre o link
|
||||
|
||||
### Header - Cart
|
||||
- [ ] Replicar os estilos do layout no Figma em cada breakpoint
|
||||
- [ ] ultra wide
|
||||
- [ ] desktop
|
||||
- [ ] tablet
|
||||
- [ ] mobile
|
||||
- [ ] deve manter a responsividade entre os breakpoints
|
||||
|
||||
- [ ] todos os requisitos obrigatórios
|
||||
- [ ] ao clicar no botão de carrinho, deve redirecionar para a página de carrinho (`"/cart"`)
|
||||
- [ ] dever ter um efeito de hover ao passar o mouse sobre o botão
|
||||
|
||||
### Header - menuBottom
|
||||
- [ ] Replicar os estilos do layout no Figma em cada breakpoint
|
||||
- [ ] ultra wide
|
||||
- [ ] desktop
|
||||
- [ ] tablet
|
||||
- [ ] mobile
|
||||
- [ ] deve manter a responsividade entre os breakpoints
|
||||
|
||||
- [ ] todos os requisitos obrigatórios
|
||||
- [ ] Os links devem conter efeitos de hover
|
||||
- [ ] A url para os textos deve ser:
|
||||
- [ ] "Cursos" -> "/Cursos"
|
||||
- [ ] "Saiba mais" -> "/saiba-mais"
|
||||
- [ ] "Institucional" -> "/institucional"
|
||||
|
||||
## BreadCrumb
|
||||
|
||||
- [ ] todos os requisitos obrigatórios
|
||||
- [ ] o link da home deve conter um link para a home ("/")
|
||||
- [ ] o ultimo deve ser o nome da categoria atual ( ex: se estamos na pagina de contato, o ultimo link deve ser "Contato" )
|
||||
|
||||
## Titulo da pagina
|
||||
|
||||
- [ ] todos os requisitos obrigatórios
|
||||
## Menu Lateral
|
||||
|
||||
- [ ] todos os requisitos obrigatórios
|
||||
- [ ] cada um dos links um link para cada pagina sendo:
|
||||
- [ ] sobre -> "/institucional/sobre"
|
||||
- [ ] Fomas de pagamento -> "/institucional/formas-de-pagamento"
|
||||
- [ ] Entrega -> "/institucional/entrega"
|
||||
- [ ] Trocas e devoluções -> "/institucional/trocas-e-devolucoes"
|
||||
- [ ] Segurança e privacidade -> "/institucional/seguranca-e-privacidade"
|
||||
- [ ] contato -> "/institucional/contato"
|
||||
- [ ] deve ficar selecionado o link da pagina atual
|
||||
|
||||
## Textos das paginas
|
||||
|
||||
- [ ] todos os requisitos obrigatórios
|
||||
- [ ] o titulo deve se atualizar de acordo com a pagina
|
||||
- [ ] o texto poder ser o lorem ipsum
|
||||
|
||||
## Formulario de contato
|
||||
|
||||
- [ ] todos os requisitos obrigatórios
|
||||
- [ ] os placeholders devem ser os mesmos do layout
|
||||
- [ ] deve validar para todos os campos serem obrigatórios
|
||||
- [ ] deve existir algum tipo de mascara nos campos (cpf, data de nascimento, telefone, Instagram) onde a pessoa nao tenha que digitar os caracteres especiais
|
||||
- [ ] Em caso de erro, deve exibir uma mensagem de erro como no layout
|
||||
- [ ] Em caso de sucesso, deve limpar os campos e exibir uma mensagem de sucesso como no layout
|
||||
- [ ] Deve escolher o melhor tipo de input para cada campo
|
||||
|
||||
## Newsletter
|
||||
|
||||
- [ ] todos os requisitos obrigatórios
|
||||
- [ ] ao submeter o formulário, deve exibir uma mensagem de sucesso como um alert
|
||||
- [ ] deve validar para o campo ser obrigatório
|
||||
- [ ] deve validar para o campo ser um email valido
|
||||
- [ ] caso o email seja invalido, deve exibir uma mensagem de erro como no layout
|
||||
|
||||
## Footer
|
||||
|
||||
- [ ] todos os requisitos obrigatórios
|
||||
### Footer - menu
|
||||
|
||||
- [ ] todos os requisitos obrigatórios
|
||||
- [ ] os seguintes textos devem ter os seguintes links
|
||||
- [ ] "Institucional" -> "/institucional"
|
||||
- [ ] "Quem somos" -> "/institucional/quem-somos"
|
||||
- [ ] "Política de privacidade" -> "/institucional/politica-de-privacidade"
|
||||
- [ ] "Segurança" -> "/institucional/seguranca"
|
||||
- [ ] "seja um vendedor" -> "/institucional/seja-um-vendedor"
|
||||
- [ ] "Entrega" -> "/institucional/entrega"
|
||||
- [ ] "Pagamento" -> "/institucional/pagamento"
|
||||
- [ ] "Trocas e devoluções" -> "/institucional/trocas-e-devolucoes"
|
||||
- [ ] "Dúvidas frequentes" -> "/institucional/duvidas-frequentes"
|
||||
- [ ] Os dois números de telefone devem ter o link para num formato dinâmico. Sendo o numero Atendimento ao consumidor num formato de ligação e o numero de atendimento online num formato de link para o WhatsApp
|
||||
- [ ] Na versão mobile deve transformar o menu em um toggle. Ao clicar no texto ou no icone, deve abrir o menu com as opções
|
||||
|
||||
### Footer - social
|
||||
|
||||
- [ ] todos os requisitos obrigatórios
|
||||
- [ ] os links devem ser:
|
||||
- [ ] "Facebook" -> "https://www.facebook.com/m3Academy"
|
||||
- [ ] "Instagram" -> "https://www.instagram.com/m3Academy/"
|
||||
- [ ] "Twitter" -> "https://twitter.com/m3Academy"
|
||||
- [ ] "Youtube" -> "https://www.youtube.com/@m3academy392"
|
||||
- [ ] "Linkedin" -> "https://www.linkedin.com/m3Academy"
|
||||
- [ ] os site deve abrir em uma nova aba ao serem clicados
|
||||
- [ ] cada um dos socialIcon deve ter a sua variacao de test id com o nome nome da rede social (ex: testid="footer_socialIcon--facebook", ou testid="footer_socialIcon--instagram")
|
||||
|
||||
### Footer - Bottom
|
||||
|
||||
- [ ] todos os requisitos obrigatórios
|
||||
|
||||
### Footer - Bottom - CopyRight
|
||||
|
||||
- [ ] todos os requisitos obrigatórios
|
||||
|
||||
### Footer - Bottom - Payment
|
||||
|
||||
- [ ] todos os requisitos obrigatórios
|
||||
|
||||
### Footer - Bottom - Autores
|
||||
|
||||
- [ ] todos os requisitos obrigatórios
|
||||
- [ ] os links devem ser:
|
||||
- [ ] "powered by vtex" -> "https://vtex.com/br-pt/"
|
||||
- [ ] "Developed by m3" -> "https://m3ecommerce.com/"
|
||||
Loading…
Reference in New Issue
Block a user