Bloque iniciar trámite
Closed this issue · 12 comments
Nombre en Obelisco: bloque_iniciar_tramite
Descripción:
Tipo de componente: Está dentro de Organismos - Trámites
Ejemplo en boostrap:
Ejemplo de aplicación en BA:
Necesidad solicitada por: diseño
Hay que evaluar si este componente amerita que tenga un tamaño fijo en desktop y otro en mobile o si puede ser un componente adaptable a distintas grillas y necesidades
Con @JuaneRambosio creamos una nueva branch para trabajar sobre el componente llamada "Bloque iniciar trámite".
- Ajustamos las variantes para que el componente tenga tamaño fijo para Desktop y para Mobile. En Mobile, el componente no existía así que lo creamos con sus variantes con un ancho de 328px. Para los títulos y subtítulos utilizamos los estilos de Mobile.
- Encontramos que en la variante "Con barra de progreso" contenía dos barras, una de ellas oculta. Decidimos eliminarla ya que no cumple ninguna función.
- Modificamos la nomenclatura de las propiedades para que se entiendan con más claridad.
Queda pendiente analizar en qué ficha iría este componente, como así también si hay algún otro que podría pertenecer a la misma tipología.
Propiedades
Tipo
- Por defecto (título + botón)
- Con descripción (título + descripción+ botón)
- Con barra de progreso (título + barra de progreso + botón)
Dispositivo
- Desktop (340px de ancho, estilo de texto de Desktop, padding 24px)
- Mobile (328px de ancho, estilo de texto de Mobile, padding 16px)
Queda pendiente para revisión @camilembo
Lo veo bárbaro!!
2 cosillas nada más:
- Saquemos el "versión 2.0" del header que estamos usando para las mesas de trabajo de los componentes (para este y el resto de componentes que hagamos)
- Y mañana hablamos con desarrollo a ver si ellos lo tienen así en estos tamaños, si ellos lo tienen ok en el storybook lo dejamos como listo porque solo era problema nuestro de diseño, sino lo pasamos a listo para maquetar.
Listorti! @camilembo
Realizado el 21/07/2023 el merge en Figma.
Sobre el tema de la ficha, entendemos que probablemente entre en lo que venimos analizando de panel/tarjetas
Se reabre la tarjeta para trabajar una variable del bloque con background de color #f3f6f9
¡Hola! Estuve trabajando en la actualización del componente "Bloque de Iniciar trámite" dentro de una nueva branch llamada Bloque de Iniciar trámite en el UI Kit.
¿Qué se hizo?
- Agregué una nueva variante al componente para registrar la opción solo con borde y sumar la opción con fondo.
Muestra del componente
Muestra de las propiedades
Estamos ok con esto Die! @Diehault
Seguramente volveremos a abrir esta tarjeta cuando analicemos panel y veamos si es parte de eso como para hacer la ficha, queda en stand by eso pero estamos ok para usarlo en el template de trámites :D
¡Hola! Sumo los colores de cómo quedaría entonces el componente:
-
Con borde
Borde: #E6EBF0 -
Relleno
Borde: #E6EBF0
Relleno: #F3F6F9
A partir del relevamiento de panel, surgieron preguntas sobre funcionar el componente de bloque iniciar trámite con el destacado lateral.
Desde desarrollo comentaron que la fusión sería complicada porque tienen distintas clases y eliminarlo al estar en uso puede traer problemas, por lo que se decidió conservar al bloque iniciar trámite como independiente del destacado.
- Se cambió el nombre del componente de "Bloque iniciar trámite" a "Bloque de trámite"
- Se pasó de la sección de organismos a la sección de componentes en Storybook (porque el componente es una molécula)
- Se armó una ficha para el componente en la cual se establecen las diferencias de uso con el destacado. En resumen, el bloque de trámite sólo se usaría en el template de trámites.
Dejamos captura de la ficha que construimos con @Diehault en Análisis de componentes para luego incorporar en la branch que se cree de fichas de bloque de trámite. @camilembo
¡Hola! 🤠 Hacemos una actualización del componente en Figma porque había un problemilla con el componente "Botón", que no era el correcto y utilizábamos uno que ya no existe más.
Requerimiento
- Cambiar el componente "botón_ancho" por el componente "Botón".
- Actualizar la ficha del componente en nuestro UI Kit.
¿Cómo se veía antes?
¿Cómo se ve ahora?
Se actualizaron los estilos de texto del componente según la nueva escala tipográfica.
📢 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 | En tablet, el componente toma el 100 % del contenedor y se ubica justo debajo del encabezado. |
| Arreglado | |
| Eliminado | |
| Obsoleto | |
| Cambiado | Width de la variante desktop a 348px. |
✏️ Notas
- [EV]: sumar la modulación de tablet en la ficha del componente.