3.1 Criar componente de botão de interesses
Na tela de seleção de interesses (#23 (closed)) cada interesse tem um botão próprio. A página irá receber os valores esperados e utilizar para criar os botões. Devemos ter um componente para facilitar esta criação.
ALTERAÇÃO: Conversamos com as stakeholders e vamos alterara a tela de definição de interesses e seus componentes. Os botões da tela terão cor de borda neutra (cinza) enquanto não selecionados em vez das cores preestabelecidas. Ao serem selecionados, os botões devem receber uma das três cores (azul, verde ou rosa) sem repetição. A cor depende da ordem de seleção (Ex: primeiro é azul, segundo é verde e terceiro é rosa).
Sobre a cor da borda do botão enquanto inativo, usar o Cinza 2 LM previsto no Figma, em style guide.
O componente deve receber como parâmetros:
- color (pink, blue, green);
- size (small, medium, large);
- text (nome do interesse);
- icon.
A seguir, exemplos de como os botões devem se parecer:
No Figma, na aba style guide, tem a referencia dos ícones, que podem ser exportados em SVG.
Quando selecionado, o icone deve ficar preenchido. Neste momento, o fundo assume a cor da borda. O texto e o ícone assumem a cor do background.
Critérios de Aceitação:
- As cores e ícones de cada botão devem estar de acordo com os indicados no Figma;
- Ao serem clicados, os botões devem ficar preenchidos, como indicado no Figma;
- Os ícones devem estar em SVG;
- Os botões devem ser genéricos e receber (via props) o ícone, texto, cor e tamanho necessários.