naveteam / saturn Goto Github PK

Feature
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Create Label + Text component

Figma

Figma

Feature request
Create the Alert component present in the Figma

Figma

[Core] Upload em formato de botão com os attachments em baixo

Comportamento Esperado: O comportamento completo do componente está disponível na Documentação

Critérios de Aceite:

O componente está seguindo os padrões de design definidos no Figma do projeto;

O componente está seguindo os padrões de código definidos pelo Nave Guides;

O componente precisa utilizar as propriedades definidas na Descrição do Componente;

Descrição do Componente:

O componente de Link é uma das variações do componente de Typography, com um grande diferencial: ele precisa ser utilizado com qualquer tipo de link, seja ele um a, ou um Link do Gatsby ou do Next. Pra isso, o importante é criarmos a estilização desse componente dentro do Design System, e passarmos qual componente deve ser renderizado com essa estilização. Para isso, teremos:

Propriedades necessárias para definição do componente: As seguintes props devem existir no componente

component: Essa prop receberá o componente que deve ser renderizado (por exemplo, o Link do Gatsby). Por default, o link renderizado será uma tag a, mas caso ele receba algum componente nessa prop, o comportamento deverá ser sobrescrito.

path: A prop path definirá para onde o link deve redirecionar (similar ao href da tag a e ao to do componente Link).

propPath: Essa prop será necessária para que o componente saiba qual propriedade deve receber o valor de path. (para a tag a, o valor de propPath deve ser href, por exemplo, indicando que o valor que for passado para path será aplicado em href ao final da criação do componente).

Por se tratar de uma variação do componente Typography, é importante que as demais props de estilização sejam passadas adiante para ele, para que todas as mudanças de tamanho de fonte, cor, e etc. sejam aplicadas

Comportamento Esperado: O comportamento completo do componente está disponível na Documentação

Critérios de Aceite:

O componente está seguindo os padrões de design definidos no Figma do projeto;

O componente está seguindo os padrões de código definidos pelo Nave Guides;

O componente precisa utilizar as propriedades definidas na Descrição do Componente;

Descrição do Componente:

Esse componente geralmente andará junto com o componente de tabela, mas pode ser aplicado também em páginas completas ou qualquer outra estrutura que receba uma paginação. A ideia do componente Pagination é entender (juntamente com o back-end) como a paginação é retornada por padrão pelo boilerplate de back da Nave e fazer com que o controle de paginação no front seja condizente com esse padrão. Ele vai possuir duas variants, uma apenas com botões com a numeração das páginas e outra com um input onde o usuário pode digitar a página que ele quiser

Propriedades necessárias para definição do componente: As seguintes props devem existir no componente

page

pageSize

onPageChange

onPageSizeChange

variant

Figma

Is your feature request related to a problem? Please describe.
Yes, the TextField documentation is missing a lot of things.

Describe the solution you'd like
An update in the docs

Comportamento Esperado: O comportamento completo do componente está disponível na Documentação

Critérios de Aceite:

O componente está seguindo os padrões de design definidos no Figma do projeto;

O componente está seguindo os padrões de código definidos pelo Nave Guides;

O componente precisa utilizar as propriedades definidas na Descrição do Componente;

Descrição do Componente:

Propriedades necessárias para definição do componente: As seguintes props devem existir no componente

• name
• link
• onDownload
• onView
• onDelete
• file
• backgroundColor
• error: responsável pela cor vermelha do texto
• variant

Pontos importantes a serem destacados:

• Não necessita do tooltip de erro
• Não necessita da variação de loading

O campo de file é opcional. Caso ele seja passado, usar o file.name e o size baseado nesse arquivo

Definição das variações no Storybook: As seguintes variantes do componente devem estar documentadas no Storybook

• Variação com file
• Variação sem file
• Variação com file e error
• Variação sem file error

Figma

[Core] Avatar simples (circular e quadrado) com placeholder e tooltip

Descrição do problema
Link da documentação errado no README.md

Para reproduzir
Passos para reproduzir o erro

1. Clique aqui
2. Em "💡 Utilizaçã" clique em Storybook
3. Veja o erro

Comportamento esperado
Provavelmente deveriamos ser redirecionados a este link (https://naveteam.github.io/saturn) e não "https://naveteam.github.io/saturn-system"

Screenshots

Desktop

• OS: Linux Deepin
• Browser: Google Chrome
• Version: 83.0.4103.116 (Versão oficial) 64 bits

[Core] Input com todos os estados e possibilidade de adicionar prefixo e sufixo

Colocar o Styled-system facilitando o uso de modificadores dentro dos componentes

[Core] Select single

Feature
TextField with masks

Figma

Descrição da inconsistência
Saturn não possuí mais o elemento Input, o mesmo é TextField, e no README.md está alegando que deve ser utilizado o Input

Para reproduzir
Siga as etapas a seguir:

1. Vá até o README.md
2. Observe o código e veja a inconsistência

Resultado esperado
Que o README.md oriente a usar o TextField.

Remover todos os testes e scripts de execução

Traduzir o readme para maior engajamento da comunidade

Foram adicionadas algumas props no componente de select que não foram documentadas no storybook. É importante que se mantenha a documentação atualizada para que os próximos devs que forem usar o saturn terem noção do poder do componente. Atualmente ele está recebendo as seguintes props:

{
      clearValue,
      onClearSelect,
      name,
      label,
      options,
      optionLabel,
      optionValue,
      onOptionSelected,
      placeholder,
      caption,
      error,
      disabled,
      quiet,
      defaultValue,
      resetValue,
}

O que está documentado é:

É necessário que seja adicionado as novas props e que também seja documentado com um exemplo e descrição a funcionalidade de cada uma.