Card Option
É um componente de card feito especificamente para o 'Módulo de Oferta', onde adquire uma aparência específica para esse contexto.
Uso
O principal uso é no onboarding do produto, onde cada etapa apresenta uma pergunta com opções de seleção (que são os Card Options).
✅ Do
Usar como um item de seleção em uma lista de opções (ex: perguntas de onboarding, seleção de filtros).
❌ Don't
Não usar como um botão de ação primária (ex: "Salvar", "Confirmar") ou para navegação (ex: "Ir para Home").
Variantes
Rest
❖. Container
Serve como agrupamento e área de clique do componente.
1. Slot Left (Opcional)
Serve como uma área para encaixar outro componente. Thumbnail, checkbox, radio button, icon, o que for necessário para o contexto.
2. Labels
Utiliza o componente "Labels" embarcado. Isso permite que o Card Option se adapte ao contexto, exibindo labels primary, secondary e/ou tertiary, conforme a necessidade e a configuração do componente "Labels" interno.
3. Slot Right
Serve como uma área, visualmente posicionada à direita, para encaixar um componente de controle de seleção. É obrigatório que este slot contenha um elemento de seleção (como switch, checkbox ou radio button), pois o componente serve para selecionar opções.
Actived
❖. Container
Serve como agrupamento e área de clique do componente.
1. Slot Left (Opcional)
Serve como uma área para encaixar outro componente. Thumbnail, checkbox, radio button, icon, o que for necessário para o contexto.
2. Labels
Utiliza o componente "Labels" embarcado. Isso permite que o Card Option se adapte ao contexto, exibindo labels primary, secondary e/ou tertiary, conforme a necessidade e a configuração do componente "Labels" interno.
3. Slot Right
Serve como uma área, visualmente posicionada à direita, para encaixar um componente de controle de seleção. É obrigatório que este slot contenha um elemento de seleção (como switch, checkbox ou radio button), pois o componente serve para selecionar opções.
4. Text field area (Opcional)
É uma área que contem um text field para complementar a opção selecionada. É usado, por exemplo, em uma opção "Outros", permitindo ao usuário escrever um input que não estava na lista.
❌ Don't
Não usar o 'Text field area' para opções que não sejam de input customizado (ex: não colocar um campo de texto na opção 'Inglês').
Layout responsivo
O comportamento responsivo do componente (como quebras e posicionamento) é contextual e deve seguir as regras de Grid definidas no layout onde ele é aplicado.
Comportamento
Tipos de Seleção: O componente é agnostico e suporta tanto seleção única (contexto de Radio Button) quanto seleção múltipla (contexto de Checkbox).
Transição de Estado:
Ao clicar em um card na variante 'Rest', ele deve transicionar para a variante 'Actived'.
Se o contexto for de seleção múltipla (checkbox), clicar em um card 'Actived' o reverte para o estado 'Rest'.
Se o contexto for de seleção única (radio), clicar em um card 'Actived' não altera seu estado (a seleção é gerenciada pelo grupo de opções).
Histórico de Atualizações
Atualizado