LF-4166 (2): [Layout] Implement end to end animal creation flow

[SayakaOno]

Description

Addressed all of Joyce's comments on #3370.

1. 16px padding
   • Resolved by refactoring MultiStepForm.
     Managing two different styles in one file made it difficult to read, so I separated them into two files. Sorry 🙏
2. Title
   • Updated StepperProgressBar to support the title. (story)
3. Weird layout
   • Automatically resolved by using the updated MultiStepForm.
4. The form buttons are overlapping the AddMoreAnimals button
   • Added padding to MultiStepForm (technically, to WithStepperProgressBar)

Other change:

• Disable the continue button when isValid is false

NOTE:

• We agreed to make the basics page full-with, but I would like to confirm with Loïc again since FixedHeaderContainer has a max-width: 1024px and the only full width page currently is the map page.

Jira link: https://lite-farm.atlassian.net/browse/LF-4166

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

• Passes test case
• UI components visually reviewed on desktop view
• UI components visually reviewed on mobile view
• Other (please explain)

Checklist:

• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• The precommit and linting ran successfully
• I have added or updated language tags for text that's part of the UI
• I have added "MISSING" for all new language tags to languages I don't speak
• I have added the GNU General Public License to all new files

[kathyavini]

It looks excellent, thank you!! And I love this separated organization of MultiStepForm!

We agreed to make the basics page full-with, but I would like to confirm with Loïc again since FixedHeaderContainer has a max-width: 1024px and the only full width page currently is the map page.

I was struggling with that too when I had FixedHeaderContainer in the container originally, but only because I had a Jira ticket requirement to make it three cards wide! I think the two card width doesn't look so bad -- curious what Loïc will decide 🙂

[SayakaOno]

@kathyavini I found this mockup 😅

[Duncan-Brain]

I think its really good idea to separate out those variants!

My questions are:

1. Is any form validation supposed to be working yet? isValid is always true for me despite validation errors or empty form:
   
2. Are we planning on ever using the other older variant? (should we delete it instead?)
   2b. I think I might normally expect that since it is a header variant, more so than a form variant, that there would be a subfolder for multi form header types. But as it is the only type of variant this makes sense !

For 2/3 I can approve!

[kathyavini]

@Duncan-Brain @SayakaOno in terms of point (1) above -- I was myself surprised to find that the error message that SexDetails displays was not hooked up to an actual form state error (it was just visual). I added it to form state validation in this commit of the details PR as I am adding all the validation there now

[SayakaOno]

@Duncan-Brain I had no doubt we would be using the older variant! Just to confirm, by "subfolder" do you mean creating a folder within MultiStepForm to place components like StepperProgressBar and PageTitle? I was expecting that StepperProgressBar might be used elsewhere!

[Duncan-Brain]

@SayakaOno and @kathyavini for 1) my main question is should any form validation be working? I saw that the isValid was added but an empty form also allows next button to be active. Feel free to merge if that is okay!

2. 👍 okay cool, curious where it will be used? I thought we are transitioning to new design slowly.

2b. Its great as is! Definitely page title and stepper can be their own reusable component outside of this that these components just use. I am just over thinking it the naming and folder structure 😂 . On second look I was seeing more of a 'Layout' instead of header. Since withPageTitle does not include any navigation "next" buttons, and withStepperProgressBar includes both updated header and new floating navigation. My original main thought was that form variants might be more like: reactHookMultiForm, vs reactReduxMultiForm or readonlyMultiForm ... that sort of thing.

[SayakaOno]

@Duncan-Brain No form validation has been implemented properly yet in this PR, so isValid is always true, which is expected!

2. I got the impression that we would ideally migrate the existing forms to the new one (withPageTitle variant), as Anto tried with the Expense category (was it?). It's very unlikely that we will have the time to work on it though!

2b. I think I understand! Let's revisit the naming and folder structure if it becomes confusing :)

I'll merge!