JUIP-128 crear componente carousel

[dam788]

LINK DE TICKET:

Contexto:
Actualmente en las 3 apps, vamos a necesitar implementar un onboarding el cual tiene indicaciones de como utilizar la app. En el caso de picking hay un componente que utiliza un carousel de otra forma por lo que las necesidades son varias

Necesidad:
Crear un componente carousel que renderice cualquier componente que le pases, y te lo muestre como un componente swipeable.

DESCRIPCIÓN DEL REQUERIMIENTO:

Prop	Default	Requerido	Tipo	Obs.
pages	null	true	React.Component	si no pasas un array de componentes no renderiza nada.Recibe un array de componentes, cada uno de éstos es una página que se renderiza en el carrouselconst pages = [ , , … ];
autoPlay	false	false	boolean	reproduce de forma automatica el carousel
autoPlayReverse	false	false	boolean	reproduce de forma automatica el carousel en sentido inverso
isLoop	false	false	boolean	vuelve a comenzar cuando esta en la ultima pagina
intervalTime	2000	false	boolean	tiempo de cambio de pagina cuando se utiliza autoplay
buttonsCallback	() => {}	false	function	devuelve por props: goPrev (pagina anterior)goNext (pagina siguiente)
callback	() => {}	false	function	devuelve por props:activePage (pagina actual)PagesLength (total de paginas)

Acceptance criteria

• Debe renderizar cualquier componente que le pases
• Debe tener métodos para controlar el carousel externamente

DESCRIPCIÓN DE LA SOLUCIÓN:

• Se creo componente
• se creo archivo de storybooks, fixeando el Carousel usando una medida custom para que funcionara en web.

CÓMO SE PUEDE PROBAR?

SCREENSHOTS:

LINK PR QA:

DATOS EXTRA A TENER EN CUENTA:

[pablonortiz]

@dam788 lo estuve probando en Storybook y la app de Delivery y anda joya! Lo único, capaz que para que no crashee cuándo no le pasas la prop pages al componente, directamente que el componente no se rendericé, con un

if (!pages || !pages.length) return null;

Después el resto todo perfecto.

[github-actions]

Pull Request Test Coverage Report for Build 6619375813

• 47 of 47 (100.0%) changed or added relevant lines in 2 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 100.0%

---

Totals
Change from base Build 6562751085:	0.0%
Covered Lines:	213
Relevant Lines:	213

---

💛 - Coveralls