La tarea consiste en realizar la implementación visual de la FAQ card. Recuerda que esta tiene unas propiedades definidas dentro del componente, a la hora de clicar encima de una de estas preguntas deben de desplegarse estilo "Accordion" y mostrar la respuesta a la pregunta.
OJO! La respuesta a la pregunta es una string en formato HTML, para insertar este html dentro del componente puedes, o bien, usar la prop _setInnerDangerousHtml o buscar alguna librería que permita mostrar este html parseandolo.
Para llevar a cabo esta tarea solo es necesario editar el fichero src/dcomponents/faqs/FaqCard/index.tsx
Requisitos de validación
[ ] El componente implementado corresponde visualmente con los diseños
[ ] El componente debe mostrar la respuesta desplegandose una vez el usuario clique.
[ ] El HTML que se coloca en la respuesta de un FAQ se purifica adecuadamente (Para más información ver la descripción de esta issue)
[ ] Solo se debe mostrar un FAQ abierto a la vez (Esta parece un comportamiento por defecto del componente Accordion de Chakraui)
[ ] Se hace uso de la librería chakraui para implementar el componente, no se puede usar CSS ni ninguna otra librería ni etiquetas básicas de html. Más información
Resolución de dudas y entrega de tareas
Sube tu rama haciendo uso de git push
Navega hasta la página del issue en GitHub.
Agrega un comentario nuevo haciendo clic en el botón "Comment" (Comentar).
Menciona al encargado del proyecto utilizando la sintaxis @nombredeusuario y adjunta tu duda o solicitud de revisión.
Escribe cualquier mensaje adicional que desees transmitir al encargado del proyecto, explicando claramente que deseas que revise el issue.
Haz clic en el botón "Comment" (Comentar) para publicar tu comentario.
No sabes por dónde empezar?
1. Prepara el entorno de desarrollo.
Utiliza la guía de configuración para preparar el entorno de desarrollo si no lo has hecho ya.
2. Clonar el repositorio de GitHub
Existen dos formas de descargar y subir cambios a github: HTTP y SSH. Nosotros recomendamos el uso de SSH y dejamos aquí una guía de cómo configurarlo. Si por el contrario decides utilzar HTTP necesitarás configurar un token de github para poder subir tus cambios.
Después de considerar esto puedes utilizar alguna de las dos siguientes órdenes para clonar (Crear una copia en tú máquina) del repositorio.
Desde una terminal y dentro del proyecto, es conveniente que instales las dependencias del proyecto para que tu editor te pueda autocompletar código y encontrar errores haciendo uso del siguiente comando:
npm install
Posteriormente es importante que arranques los distintos servicios que se utilizarán durante el desarrollo. Para ello basta con ejecutar la siguiente orden:
Permite ver los cambios realizados en tiempo real sobre un componente en particular además de cambiar los parámetros que recibe para asegurarse de que funciona adecuadamente.
Almacena información de ejemplo que se utilizará durante el desarrollo de la página. Puesto que cada desarrollador tiene su copia propia de esta base de datos y los cambios se revierten cada vez que se apaga el servicio te invitamos a que la modifiques como consideres apropiado. Para poder acceder necesitarás los siguientes credenciales:
email: dev@deii.com
pass: devpassword
Familiarizate con estos servicios que te serán de gran ayuda.
4. Cambiar a la branch del issue
Ahora que ya estás listo para empezar a trabajar es conveniente que te crees tu propia rama independiente dónde empezar a trabajar. Para ello basta con que ejecutes los siguientes comandos.
git checkout dev
git pull
git checkout -b @feature/[nombre-del-componente]
Creación del componente FAQ Card
Se trata de llevar a cabo la implementación visual de la FAQ Card de la página de FAQs.
Diseños
Enlace al Figma
Aquí puedes explorar más detalladamente el diseño. (Los diseños finales se encuentran en la sección ("Ready for development")
Figma - FAQS
Realización de la tarea
La tarea consiste en realizar la implementación visual de la FAQ card. Recuerda que esta tiene unas propiedades definidas dentro del componente, a la hora de clicar encima de una de estas preguntas deben de desplegarse estilo "Accordion" y mostrar la respuesta a la pregunta.
OJO! La respuesta a la pregunta es una string en formato HTML, para insertar este html dentro del componente puedes, o bien, usar la prop _setInnerDangerousHtml o buscar alguna librería que permita mostrar este html parseandolo.
Posible librería: https://www.npmjs.com/package/react-render-html
Para llevar a cabo esta tarea solo es necesario editar el fichero
src/dcomponents/faqs/FaqCard/index.tsxRequisitos de validación
Resolución de dudas y entrega de tareas
git push@nombredeusuarioy adjunta tu duda o solicitud de revisión.No sabes por dónde empezar?
1. Prepara el entorno de desarrollo.
Utiliza la guía de configuración para preparar el entorno de desarrollo si no lo has hecho ya.
2. Clonar el repositorio de GitHub
Existen dos formas de descargar y subir cambios a github: HTTP y SSH. Nosotros recomendamos el uso de SSH y dejamos aquí una guía de cómo configurarlo. Si por el contrario decides utilzar HTTP necesitarás configurar un token de github para poder subir tus cambios.
Después de considerar esto puedes utilizar alguna de las dos siguientes órdenes para clonar (Crear una copia en tú máquina) del repositorio.
Si usas HTTP:
Si tienes configurado el token SSH:
3. Arrancar el entorno de desarrollo
Desde una terminal y dentro del proyecto, es conveniente que instales las dependencias del proyecto para que tu editor te pueda autocompletar código y encontrar errores haciendo uso del siguiente comando:
Posteriormente es importante que arranques los distintos servicios que se utilizarán durante el desarrollo. Para ello basta con ejecutar la siguiente orden:
Esto inicializará 3 servicios distintos:
Página web de desarrollo
Storybook
Base de datos de desarrollo
Familiarizate con estos servicios que te serán de gran ayuda.
4. Cambiar a la branch del issue
Ahora que ya estás listo para empezar a trabajar es conveniente que te crees tu propia rama independiente dónde empezar a trabajar. Para ello basta con que ejecutes los siguientes comandos.