Casos de uso

Este es un listado de casos de uso realizado para pruebas de la API. Para tener más información sobre el comportamiento de la configuración de marca de un checkout, se recomienda leer acerca de las convenciones de configuración de marca

Casos de Uso para Configuración de Marca

1. Configurar un Tema Completo con Fondo y Encabezado

Para configurar una marca con un tema completo que incluya tanto el fondo como el encabezado, puedes cargar ambas propiedades:

header	logo-image	title	Resultado a mostrar
✅	✅	✅	header
✅	⛔	⛔	header

Explicación: Si se proporciona una imagen para el header y el logo-image no está disponible, el sistema mostrará el encabezado (header) como imagen principal.

2. Configurar Solo el Logo y el Título

Si deseas mostrar solo el logo y el título, puedes configurar de esta manera:

header	logo-image	title	Resultado a mostrar
⛔	✅	✅	logo-image + title

Explicación: Si el header no está cargado, pero el logo-image y title están configurados, se mostrarán juntos, con el logo-image primero.

3. Mostrar Solo el Título de la Marca

Para una configuración más simple en la que solo se necesita mostrar el title (el eslogan o razón social), este es el caso:

header	logo-image	title	Resultado a mostrar
⛔	⛔	✅	title

Explicación: Cuando no se carga ni el header ni el logo-image, el sistema mostrará únicamente el title.

4. Mostrar Solo el Logo

Si solo se desea mostrar el logo-image, sin el encabezado ni el título, esta es la configuración:

header	logo-image	title	Resultado a mostrar
⛔	✅	⛔	logo-image

Explicación: Si solo se proporciona el logo-image, el sistema mostrará solo el logo.

5. No Mostrar Imágenes (Error de Configuración)

Si no se proporciona ninguna de las imágenes clave (header, logo-image, title), el sistema generará un error o no mostrará ninguna imagen:

header	logo-image	title	Resultado a mostrar
⛔	⛔	⛔	none (error)

Explicación: Este caso ocurre si todas las propiedades de imágenes están ausentes, y el sistema no puede mostrar ningún elemento visual relacionado con las imágenes.

6. Configurar Solo Colores de Fondo

Si solo necesitas cambiar los colores de fondo, puedes hacerlo de esta manera:

primary	secondary	background-color	Resultados posibles
✅	✅	✅	Fondo con colores configurados según las propiedades de fondo

Explicación: Se mostrarán los colores de fondo configurados para cada propiedad, como primary, secondary o el background-color principal.

7. Configurar Colores de Texto y Fondo

Si deseas personalizar los colores de fondo junto con los colores de texto (primer plano), puedes hacerlo de esta forma:

primary	primary-foreground	secondary	secondary-foreground	Resultados posibles
✅	✅	✅	✅	Fondo y texto ajustados según las propiedades configuradas

Explicación: Este caso te permite configurar colores tanto de fondo como de texto para garantizar un contraste adecuado entre ambos.

8. Desactivar el Tema Completo

Si en algún momento deseas desactivar todo el tema, la propiedad enabled se puede ajustar para ello:

enabled
false

Explicación: Si el valor de enabled es false, el tema será desactivado y no se aplicarán configuraciones de color, imagen ni de estilo.

9. Configurar Colores de Bordes y Radios

Para una personalización de bordes y radios, puedes modificar las propiedades relacionadas con estos elementos visuales:

border	radius	ring	Resultados posibles
✅	✅	✅	Bordes, radios y anillos configurados con los colores y tamaños deseados

Explicación: Esto permitirá que los bordes, radios (bordes redondeados) y anillos (bordes cuando están enfocados) tengan el estilo y color deseado.

10. Configurar Solo Elementos Destructivos

Si deseas que los botones destructivos (como eliminar o borrar) se configuren con colores específicos, puedes hacerlo así:

destructive	destructive-foreground	Resultados posibles
✅	✅	Botones destructivos con colores configurados

Explicación: Este caso aplica solo para los botones y acciones destructivas, donde se establece un color específico para el fondo y el texto de esos elementos.

11. Configurar Colores de Popovers y Tarjetas

Si deseas personalizar los popovers (ventanas emergentes) y las tarjetas, puedes hacerlo:

popover	popover-foreground	card	card-foreground	Resultados posibles
✅	✅	✅	✅	Colores y estilos personalizados para popovers y tarjetas

Explicación: Permite personalizar completamente los colores de fondo y texto de los popovers y las tarjetas, asegurando que estén alineados con el diseño general del tema.

12. Configurar Colores de Fondo y Bordes con Radius

Para probar la interacción entre los colores de fondo, los bordes y los radios, puedes hacer la siguiente configuración:

background-color	border	radius	Resultados posibles
✅	✅	✅	Fondo, bordes y radios aplicados correctamente

Explicación: Asegura que los bordes y radios se apliquen junto con el color de fondo para mantener una apariencia coherente.

13. Configurar Solo el Fondo de Popovers y Tarjetas

Si solo se configuran los colores de fondo para popovers y tarjetas sin afectar los textos:

popover	card	Resultados posibles
✅	✅	Fondo de popovers y tarjetas aplicados correctamente

Explicación: Este caso asegura que los fondos de popovers y tarjetas se apliquen sin necesidad de modificar el color de los textos.

14. Configurar Solo los Colores de Texto (Primer Plano)

Probar solo los colores de texto sin modificar los fondos ni los bordes:

primary-foreground	secondary-foreground	popover-foreground	Resultados posibles
✅	✅	✅	Colores de texto aplicados correctamente

Explicación: Asegura que los colores de texto se apliquen correctamente sin cambios en los fondos.

15. Configurar el Tema con Solo el Color Primario de Fondo y el Color de Texto Primario

Este caso de uso valida la combinación del color principal de fondo y el texto principal:

primary	primary-foreground	Resultados posibles
✅	✅	Fondo y texto primarios aplicados correctamente

Explicación: Valida que el fondo principal y el texto se apliquen correctamente según la configuración.

16. Configurar Solo el Título de la Marca con Fondo y Color de Texto

Configurar el title junto con el fondo y el color de texto:

title	background-color	primary-foreground	Resultados posibles
✅	✅	✅	Título, fondo y texto aplicados correctamente

Explicación: Asegura que el title se muestre correctamente con el fondo y el color de texto configurados.

17. Configurar el Logo con Fondo y Colores de Texto

Probar la configuración de un logo-image junto con el fondo y el color de texto:

logo-image	background-color	primary-foreground	Resultados posibles
✅	✅	✅	Logo, fondo y texto aplicados correctamente

Explicación: Valida que el logo-image se aplique correctamente con el fondo y el texto configurados.

18. Probar Configuración de Elementos Destructivos con Color de Fondo y Texto

Probar elementos destructivos como botones de eliminación con fondo y texto configurados:

destructive	destructive-foreground	background-color	primary-foreground	Resultados posibles
✅	✅	✅	✅	Elementos destructivos con fondo y texto aplicados correctamente

Explicación: Asegura que los colores de los elementos destructivos (como botones de eliminación) se apliquen correctamente.

19. Configurar Todo el Tema con Colores de Fondo y Bordes

Si se configura el tema con solo colores de fondo y bordes, sin involucrar imágenes ni textos:

background-color	border	Resultados posibles
✅	✅	Fondo y bordes aplicados correctamente

Explicación: Verifica que los colores de fondo y los bordes se apliquen correctamente sin tocar otros elementos visuales.

20. Configurar Tema con Color de Fondo y Propiedades de Anillos (Ring)

Probar la configuración de un color de fondo junto con los anillos (bordes enfocados) de los elementos:

background-color	ring	Resultados posibles
✅	✅	Fondo y anillo aplicado correctamente

Explicación: Asegura que el color de fondo se aplique correctamente con los bordes de enfoque (ring).

21. Configurar Tema con Estado Desactivado (enabled: false)

Probar la desactivación total del tema configurando la propiedad enabled a false:

enabled
false

Explicación: Verifica que, cuando el estado enabled está desactivado, no se apliquen los estilos y configuraciones de tema.

22. Probar Configuración de Colores Muted y Textos Muted

Validar que los colores de fondo y texto “muted” (menos destacados) se apliquen correctamente:

muted	muted-foreground	Resultados posibles
✅	✅	Fondo y texto “muted” aplicados correctamente

Explicación: Asegura que los colores “muted” (menos destacados) se apliquen de manera efectiva en la interfaz.

23. Probar Configuración de Colores de Bordes en un Componente Específico (Card)

Si solo deseas configurar los bordes de un componente específico como card:

card	border	Resultados posibles
✅	✅	Bordes de la tarjeta aplicados correctamente

Explicación: Valida que los bordes de las tarjetas (card) se configuren correctamente sin afectar otros elementos.

Configurar los popovers con su color de fondo, texto, bordes y radios:

popover	popover-foreground	border	radius	Resultados posibles
✅	✅	✅	✅	Popover con colores y bordes configurados correctamente

Explicación: Asegura que todos los elementos visuales de los popovers se configuren correctamente con todos los parámetros.

25. Comprobación Completa con Todos los Elementos Visuales

Probar la combinación de todos los elementos de fondo, texto, bordes, imágenes, y estado activado:

header	logo-image	title	primary	primary-foreground	border	radius	ring	enabled	Resultados posibles
✅	✅	✅	✅	✅	✅	✅	✅	true	Tema completo aplicado correctamente

Explicación: Verifica que todos los elementos visuales se configuren correctamente con sus respectivas propiedades de fondo, texto, bordes, imágenes y estado.

26. Probar Configuración de Popovers con Elementos Destructivos

Probar cómo los popovers y los elementos destructivos se comportan juntos:

popover	popover-foreground	destructive	destructive-foreground	Resultados posibles
✅	✅	✅	✅	Popover y elementos destructivos aplicados correctamente

Explicación: Verifica la interacción entre popovers y elementos destructivos, asegurando que se apliquen los colores correctamente.