Modelo de documentação
🔸 = Obrigatório
[🗑️] Imagem de topo demonstrando o componente aplicado em um layout. Uso de mockup preferencialmente sempre em formato Mobile. Caso o componente não contenha versão Mobile, ai sim aplicar em versão Desktop.
[🗑️] Topo 🔸
[🗑️] Nome do componente
[📝] Descrição resumida sobre o que este componente permite fazer em uma interface;
Histórico de Atualizações (H1) 🔸
Sobre (H1) 🔸
[📝] Uma frase falando quantos tipos variantes o componente contem e quais são elas.
[🗑️] Figma Embed com o link do componente no arquivo Kósmos - UI Kit
Observações adicionais (H1)
[📝] Tópicos mais importantes para se saber sobre o componente.
Uso (H1) 🔸
[📝] Escrever de forma reduzida, os principais pontos de uso desse componente para o usuário e onde.
[🗑️] Do & Don'ts (Não obrigatório para as primeiras documentações do componente) • Adicionar um caso de uso extremo bom e um caso de uso extremo ruim • Caso identifique necessidade, pode adicionar mais
✅ Do
❌ Don't
Anatomia (H1) 🔸
[🗑️] Demonstração de elementos e estrutura
[📝] <#.> <Elemento do componente> <(Opcional)> (H2)*
[🗑️] Explicar:
[📝] Que informações esse elemento do componente recebe.
[📝/🗑️] Se é obrigatório receber alguma informação (Em casos de texto ou imagem).
[📝] Como ele deve se comportar em diferentes casos de uso.
✅ Do
❌ Don't
Variantes (H1) 🔸
[🗑️] Para um melhor consumo do time de desenvolvimento mobile, separar as variantes de plataform em blocos de “Mobile” e “Desktop”
[📝] <Varint Type> (H2)
[🗑️] Repetir a documentação de abaixo para todas Variant Type que necessitarem de uma explicação
[📝] Explica como esse tipo do componente deve ser aplicado e se comportar em diferentes casos de uso
✅ Do
❌ Don't
Posicionamento (H1)
[📝] Explica como esse componente deveria estar posicionado no layout em relação a ele mesmo caso tenha multiplos juntos + como ele se comporta com interação/comportamento em outros componentes
Layout responsivo (H1)
[📝] Explica como esse componente se comporta em diferentes posições do layout + em quebras de breakpoints em grids
✅ Do
❌ Don't
Comportamento (H1)
[📝] Explica como esse componente deveria se comportar em diferentes interações com o conteúdo da tela. Exemplo: scroll, transições e etc
✅ Do
❌ Don't
Use cases (H1) 🔸
[📝] <Use case name> (H2)
Atualizado