Component: Create Input component

[Aveline-art]

Overview

As a developer we need to develop components that help us reuse code. For this issue, we will make the input component on the login page.

Action Items

• [x] Find input in figma
• [x] Create it
• [x] Make sure it is accessible
• [x] Make sure it is reusable

Designers

• [ ] Add textfield to Figma's design system

Resources/Instructions

Resources

[Aveline-art]

@jenchuu Hi jen! I did not see the component in the design system in Figma, so I am not sure if it is finalized. Once it is, feel free to swap the role labels back and throw this back to development.

[kcoronel]

Hey @fenglugithub, can you help me with this issue. Are the components that Ava is referring to in the Design System on Figma? I looked but I couldn't be 100% sure. TY!

[LoTerence]

I was going through the questions/review column of the project board and was curious about this task so I investigated it.

Not sure how up to date this is, but I found an input component in the figma design system here:

• https://www.figma.com/design/G5bOqhud6azbxyR9El9Ygp/Civic-Tech-Jobs?node-id=114-19571&t=gih8TrCJsMbnfip4-4
• Note: In the figma, the CSS and classnames are not exactly the same as the ones used in the code right now. Probably not a huge priority issue though. I think they look similar enough. Just something to note.

Here is a screenshot of the Input component Ava is referring to:

Notes

• Ava's Input component (aka TextField) is only used in the /demo page.
  • (frontend/src/pages/Demo.tsx)
  • http://localhost:8000/demo
  • The demo page is only there to test frontend components. It is not a real page we would show to users.
• Currently we are using a tailwind TextField component for the Login and Signup forms.
  • It is located in frontend/src/tw-components/TextField.tsx
  • It was made by Matt Pereira a year ago.
  • This is different from Ava's TextField component. Hers was made with SCSS. It is located in frontend/src/components/Inputs/Textfield.tsx
• Not sure if Matt used the figma design system to create the component. Maybe we should have one frontend dev and one designer team up to verify if they are similar enough and figure out how important it is for them to be in sync?

In my opinion, we should just remove Ava's TextField component entirely from the frontend and use the tw-component Matt made. We only need one and the tailwind one is better, plus we are already using it.

Removing Ava's component to reduce redundancy would be a good first issue for a frontend developer. This would remove unnecessary code and shrink our final frontend application bundle size.

Removing any old, unneeded, non-tailwind components (in the frontend/src/components folder) would be helpful to clean up the codebase. It should be okay to remove them if they are not used anywhere else, and if there is already a tw-component for it. This can be another potential first issue for a frontend developer.

• Another idea is if there is not an equivalent tw-component for it already, we can have a frontend dev make it, so we can fully migrate all components to tailwind

Eventually we also want to make sure the final build does not include the demo route. We can either remove it entirely or maybe comment it out of the react router if we want to keep it.

[nooriaali9]

@LoTerence Would you like this issue, to be left in the review section for now? Or do you want to move it to done?

[LoTerence]

I'll move it to done since the input component already exists in the code base and the design system.