# BBStickyFooter – Proposta de criação de componente

<!--  -->

# Objetivo

Essa issue propõe a criação do componente Sticky Footer, um elemento que permanece sempre fixo na base da interface, independente do comprimento ou da posição da rolagem. Ele é útil quando precisamos que alguma informações chave fique visível o tempo inteiro para o usuário.

Exemplos de casos de uso:
* Exibir informações de natureza legal de um produto, como termos de uso ou política de privacidade, para garantir que o usuário tenha ciência das condições antes de continuar.
* Exibir um resumo dos itens selecionados pelo usuário na tela — um exemplo clássico é o de exibir o número de mensagens selecionadas em uma lista.
* Exibir o saldo da conta do cliente em situações em que o dado é de alta relevância para tomada de decisão, como em uma transferência ou pagamento de contas.
* Exibir o valor a pagar atualizado em processos de compra de produtos, especialmente em situações que permitam a personalização da compra, como seguros, empréstimos, passagens aéreas ou aluguel de veículos.

O conteúdo e as especificação a seguir são baseadas nas discussões dos últimos dias entre os times UX e MOV.

## Templates

### Simples ([Spec](https://marvelapp.com/prototype/679ajg3/screen/71203721))
É útil para exibir dados simples, como o resumo dos itens selecionados numa lista, o valor a pagar atualizado de uma compra ou saldo da conta.
* O ícone é opcional
* O valor à direita é opcional

### Multiline ([Spec](https://marvelapp.com/prototype/679ajg3/screen/71203712))
Tem uso similar ao template anterior, mas com a inclusão de até duas linhas adicionais para dados complementares.
* O ícone é opcional
* O valor à direita é opcional
* Pode ter no máximo duas linhas de informações adicionais abaixo do título

### Texto livre ([Spec](https://marvelapp.com/prototype/679ajg3/screen/71203719))
Usado em situações em que é preciso exibir um texto livre – normalmente termos de uso ou outros dados contratuais.
* O título é opcional
* O texto pode conter links

### Legenda ([Spec](https://marvelapp.com/prototype/679ajg3/screen/71203723))
Funciona para situações em que é importante apresentar uma legenda a fim de auxiliar o usuário a completar uma tarefa. Um exemplo clássico é o de legendas para mapa de assentos de um avião (livre, ocupado ou selecionado).

Note que o Sticky Footer não deve ser usado para legendas de gráficos. Nesses casos, a legenda deve ficar associada diretamente ao elemento.

* Os itens da legenda devem ter um ícone e o label

### Composto ([Spec](https://marvelapp.com/prototype/679ajg3/screen/71203717))
Útil em situações em que é preciso combinar um texto livre – normalmente termos de uso ou outros dados contratuais – com um dos outros templates acima.
* O título é opcional
* O texto pode conter links

---

## Considerações
* Em telas que tenham um botão fixo na base, o Sticky Footer fica acima do botão. Ele nunca deve sobrepor o botão ou ficar abaixo dele.
* O Sticky Footer pode ser temporariamente coberto por alertas, bottom sheets ou teclados do sistema operacional.
* Não deve ser possível exibir mais de um Sticky Footer simultaneamente.