Input component

[sandrely2611-zz]

Description

Based on the Ctrl project needs, we detect some inconsistencies in the INPUT 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://michelada.slack.com/archives/C0279KDU485/p1643667745441619?thread_ts=1643666990.610879&cid=C0279KDU485

Related issues from Gitlab Ctrl project

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

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. Support multiple behavior of an input
   • Normal
   • Hover
   • Active
2. Update placeholder, value text and label colors to match de DS.
3. Support mobile, tablet and desktop breakpoints.
4. In mobile and tablet versions the behavior is the same.
   • full-width

[sandrely2611-zz]

THIS TICKET IS PART OF THE IMPROVEMENTS FOR THE DESIGN SYSTEM PROJECT

This ticket covers the improvements of the input fields color palette. In staging we have some inconsistencies with the value and placeholder text colors. The modifications should be applied to all different fields that are presented in a form.

Inputs that have color issues:

1. Text area
2. Type=tel

Description

The inputs:

• Primary tech skills in the work information section
• Secondary tech skills in the work information section
• Summary input in "My projects at michelada" section

Have a different text value color than the mockup in Figma.

And the input Phone number in Personal information has a different color for the placeholder.

Pre-requirements:

• Open a web browser
• Be log in: https://ctrl-staging.herokuapp.com/

---

Steps to reproduce

1. Go to https://ctrl-staging.herokuapp.com/user-name This link change with each user
2. Open the inspector tool.
3. Click the edit icon next to "Work Information" (it's the pencil drawing)
4. Inspect the input "Primary tech skills"
5. Verify the color of the text values in the inputs is: #15162F
6. Inspect the input "Secondary tech skills"
7. Verify the color of the text values in the inputs is: #15162F
8. Click the plus icon next to " My projects at michelada"
9. Inspect the input "Summary"
10. Verify the color of the text values in the input is: #15162F
11. Go to https://ctrl-staging.herokuapp.com/profile
12. Click the edit icon next to "Personal Information" (it's the pencil drawing)
13. Inspect the input "Phone Number"
14. Verify the color of the placeholder is the same as in the mockup in figma

---

Actual results

The inputs in the professional profile have a text value color of #575f65

The input in the personal profile have a placeholder color of #6b7280

---

Expected result:

The inputs must have a text value color of #15162F

And the placeholder should have the same color as in the mockup

---

Component/view

Professional Profile > Work information

Professional Profile > My projects at michelada

Personal Profile > Personal information

---

Environment

Staging

[sandrely2611-zz]

Component/view
Professional Profile > Work information
Professional Profile > My projects at michelada
Personal Profile > Personal information

Environment
Staging