Listas - Lista informativa
Closed this issue · 11 comments
Nombre en Obelisco: Lista informativa
Tipo de componente: Molécula
Ejemplo en bootstrap:
Ejemplo de aplicación en BA: https://buenosaires.gob.ar/tramites/consulta-de-usos
Requerimiento: Construir componente de lista informativa (molécula) y una lista de ítems con subtítulo (organismo)
- Dispositivos: desktop y mobile
- Variantes: con check para requisitos y con bullet para información / con título y sin título para la lista como organismo.
Se creó una branch de Lista informativa y se trabajará dentro de la page "Listas"
🆕 Se comenzó a trabajar sobre el análisis e investigación del componente "Lista informativa"
Como punto de partida se tomaron los siguientes requisitos:
Dispositivos
- Mobile (2 col)
- Desktop (8 col máximo)
Variantes molécula (ítem)
- Con check (para requisitos)
- Con bullet (para otra información o recordatorios)
Variantes organismo (lista de ítems)
- Con subtítulo
- Sin subtítulo
🔍 Se mapearon casos en otros DS y se buscaron casos de uso actuales en la página de buenos aires
🧐 Temas para pensar a partir del análisis y ver el lunes en la daily:
- ¿Cuáles son las razones que existen para que el check de requisitos haya pasado del color activo a ser del mismo color del texto? ¿Sería relevante que tenga, por ejemplo, un color con una función semántica como el verde?
- ¿Sería relevante que exista, así como un check, un ícono de un requisito no necesario? (Ej. como utilizamos en las fichas de los componentes con buenas y malas prácticas)
- Dentro de la page de "Trámites" que tiene diferentes tipos de componentes, existe uno denominado "lista_punto_informacion". ¿Sería relevante crear una variante para estos casos? Entendiendo que no podría incorporarse a un organismo, sino que sería un ítem informativo individual.
👉 Se avanzó con la construcción del componente de "lista informativa"
Ítem de lista (molécula de ícono+texto)
- Dispositivo (desktop 8 col y mobile 2 col)
- Tipo ("de información" con bullet, "de requisito" con check) // queda en duda la nomenclatura, tal vez es mejor poner "con viñeta" y "con check" porque la lista es siempre informativa.
Lista informativa (organismo de ítems+subtítulo)
- Dispositivo (desktop 8 col y mobile 2 col)
- Tipo ("de información" con ítems con bullet, "de requisitos" con ítems con check) // decidí que sean 2 variantes para que no se mezclen los usos (o sea que alguien en la lista de requisitos incorpore un ítem con bullet)
- Mostrar subtítulo (propiedad booleana)
📌 Como conversamos en la daily, la opción de que el contenido pueda tener un enlace se va a mostrar en la ficha como un ejemplo de uso, pero no se incorpora al componente.
Queda a chequear por @camilembo y se puede comenzar con la ficha
Maruuu, coincido con la nomenclatura "con viñeta" y "con check"
🎯 Se avanzó con el armado de la ficha del componente de "Lista informativa"
💭 Observaciones
- Me queda la duda de si nomenclar los organismos a partir de los íconos que tienen los ítems. Es decir, quedaría por un lado "Lista con viñetas" y por el otro "Lista con checks". Considero que está bueno nomenclar a partir del uso a la lista, por ejemplo "Lista de requisitos" a la que tiene check, pero habría que ver en el caso de la lista con viñetas (podría ser "Lista general" o "lista desordenada" o "lista predeterminada")
- En rojo dejé un texto de las malas prácticas que me queda en duda. Estaría bueno una vez que tengamos una bajada de contenidos con respecto a cómo estructurar los requisitos la podamos linkear a la ficha. Por ahora lo dejé en rojo porque creo que no es el momento.
Adjunto la ficha para ir chequeando contenidos @camilembo
Se hizo merge el día 21/09/2023
Tenemos que ajustar y agregar instancia de texto en el componente :)
- Se incorporaron instancias de texto para los títulos del paso y sus descripciones dentro del UI Kit.
- Se incorporó descripción del componente y link a documentación
@camilembo con esto ya se puede pasar a completado
Gracias Maru!
Merge de estos ajustes hecho el 29/09 :)
¡Hola! 🦀
Se actualizaron los estilos de texto del componente con la nueva escala tipográfica y incorporó la nueva plantilla para el UI Kit separando los componentes base.
📢 Nuevo requerimiento
Issues relacionados
Qué
Actualizar el componente según el nuevo estilo de grillas de la v.2 de Obelisco.
Por qué
Para estandarizar tamaños, modulación y visualizaciones de todos los componentes.
Quién lo va a trabajar
Diseñadores
Quién lo va a revisar
PM + SGOs
Criterios de aceptación
- El componente se ajusta a la grilla 4px.
- El componente tiene una medida definida para mobile, tablet y desktop.
- El componente tiene una modulación definida para mobile, tablet y desktop.
- El componente tiene su handoff para desarrollo y está marcado como ready for dev.
- El componente está documentado.
🕰️ Changelog
| CHANGELOG | Descripción |
|---|---|
| Agregado | |
| Arreglado | |
| Eliminado | |
| Obsoleto | |
| Cambiado | Width de la variante desktop a 728px. |
✏️ Notas
- [EV]: se puede sumar una variante tablet, como para tener un tamaño predeterminado por dispositivo. Sin embargo, no es algo que consideremos necesario/obligatorio, porque se compra como texto en dispositivos móviles, al 100 %.