new component infoBanner

[Daniel-Sainero]

Goal

Poder usar componentes de mística para estos casos

Context

Desde O2, estamos usando componentes custom para mostrar información al usuario. Dadas las características de las aplicaciones, no es posible usar el componente nativo de mística FeedBack.

El componente que estamos usando es:

Impact

Actualmente estos componentes se están usando en varios proyectos y nos gustaría poder tener un componente en mística para solventar estos casos y tener componentes duplicados en varios proyectos

Discussion Questions

¿Cómo debería manejarse el bg color?

Additional considerations

Las props que recibe el componente, por si pudiera servir de base y hacerlo genérico para su uso en más casos:

type InfoBannerProps = {
texts: string[];
type: 'error' | 'info' | 'success' | 'warning'
icon?: React.ReactNode;
};

Do you have a visual proposal?

No response

[andredelramo-hm]

Buenas, Daniel. Te dejo a continuación unas preguntas para entender mejor las necesidades:

¿A qué componente de Mística te refieres? El componente de Mística que puede ser más similar es el Callout. ¿Te refieres a ese? ¿Qué sería lo que no te funciona? ¿El color de fondo o algo más?

Por otro lado, si no puedes adjuntar ejemplos de uso de vuestro componente contextualizado en una pantalla, para que entendamos bien el uso, ¿puedes añadir ejemplos de cada estado?

Con respecto a cómo debería manejarse el background color, ¿te refieres a que se pueda cambiar el fondo, pero no el estado, darle severidad al estado con el fondo?

[Daniel-Sainero]

Hola Andrea, te respondo punto por punto:

1.- Nos referiamos al pattern Feedback, https://mistica-web.vercel.app/?path=/story/patterns-feedback-successfeedbackscreen--success
Efectivamente, con el componente Callout no tenemos la posibilidad de modificar el color del background no el color del texto, dependiendo del tipo de información que tengamos que mostrar.

2.- Os paso algunas capturas para que se aprecie el contexto, básicamente son cajas informativas que dependiendo de la información se muestra un color u otro, adicionalmente algunas pueden tener un botón de acción. En las capturas, es un ejemplo de uso, pero tenemos más casos de uso (icono + texto, icono + texto + botón, texto + botón)

3.- No exactamente, nos referimos a que podamos pasarle un tipo 'error' | 'info' | 'success' | 'warning' y en base a eso tenga un valor para el color del background, un icono y un color de texto asociado a cada tipo. Otra opción sería hacer algo genérico y que se le pueda pasar todos esos valores de forma independiente, pero creo que esto sería dejar demasiado abierto un componente de una librería común.