Button component

[sandrely2611-zz]

Description

Based on the Ctrl project needs, we detect some inconsistencies in the button component.
Our goal with this ticket is to fix how this component looks, remove the unnecessary code from Ctrl.
And be able to consume the component from the DS without adding extra css or js to make it work in Ctrl.

Narrative

Design System: https://www.figma.com/file/c1SBfQGUU3twlW3YjeL8Sx/michelada_DS?node-id=0%3A1
Control project: https://www.figma.com/file/TmTjBO1Ua93cm6B978ErDw/ControlMocks_21-0ct-2020?node-id=3456%3A0

Video explanation
https://user-images.githubusercontent.com/9082790/152256179-fc3e5fde-6956-4da5-b816-c03e9f65c88b.mp4

Related issues from Gitlab Ctrl project

https://git.michelada.io/products/ctrl/-/issues/275

Definition of done

1. Code review approved
2. Remove CSS/JS/HTML code related to the component from Ctrl
3. Deployed to production
4. Deployed to NPM library

Acceptance criteria

1. Correct styles for primary, secondary and disabled buttons.
2. Add behaviors: active, focus and hover statuses.
3. Correct border radius
4. Support mobile, tablet and desktop breakpoints.
5. In mobile and tablet versions the behavior is the same.
   • full-width

[sandrely2611-zz]

Narrative

This ticket covers the improvement of the Button component that was built in the design system.

Items to improve:

1. Button border radius
2. Button color palette on hover.
3. Primary button styles when hovering, focus or active.
4. Secondary button styles when hovering, focus, or active.
5. Button cursor pointer on hover.

Figma: https://www.figma.com/file/TmTjBO1Ua93cm6B978ErDw/ControlMocks_21-0ct-2020?node-id=6107%3A20420

Acceptance criteria

1. Improve primary and secondary buttons in the DS to render properly in Ctrl.