feat(tailwind-components): add form legend component

[connoratrug]

What are the main changes you did

• Added a legend component
• Added legend to form demo page
• Added temp code to show the number of errors per chapter ( for now via the demo page, eventually this can be wrapped in a 'Form' component
• Added temp code to set the active chapter

How to test

• explain here what to do to test this (or point to unit tests)

Checklist

• updated docs in case of new feature
• added/updated tests
• added/updated testplan to include a test for this fix, including ref to bug using # notation

[mswertz]

looks good, only links are breaking

[connoratrug]

looks good, only links are breaking

there are no links ( yet)

[chinook25]

Code: Just some nitpicks, looks good.
Functional:

• error bubbles in the legend don't look right (firefox, chrome looks ok)
• in the form the error counts don't show (firefox/chrome)
• The current chapter is not being highlighted (firefox/chrome) initially, does after switching to the complex form.

[connoratrug]

Code: Just some nitpicks, looks good. Functional:

• error bubbles in the legend don't look right (firefox, chrome looks ok)

fixed by switching to styled div instead of svg ( svg v-align has issue in firefox)

• in the form the error counts don't show (firefox/chrome)

can not reproduce , can you add steps

• The current chapter is not being highlighted (firefox/chrome) initially, does after switching to the complex form.

can not reproduce , can you add steps ( note the 'simple' form does not start with a chapter ( not sure if this should be allows , or if we should use a 'default' chapter name if the field list does not start with a chpater)

[chinook25]

• in the form the error counts don't show (firefox/chrome)
  can not reproduce , can you add steps

• Go to the simple form
• Type in a name
• Delete the name
• I expect the required error to give an error count in the legend

Ok while writing this I understand why it doesn't show. There is no heading for the unheaded first chapter. I think we should add something for this. Maybe a "Top of form" or something in case there the top field is not a header. I believe in the old forms we had something like this.

yes, maybe but suggest not to put it in this pr, the final form has more options to show the error state , and i would like to discuss maken a chapter ( if any) madatory

• The current chapter is not being highlighted (firefox/chrome) initially, does after switching to the complex form.

can not reproduce , can you add steps ( note the 'simple' form does not start with a chapter ( not sure if this should be allows , or if we should use a 'default' chapter name if the field list does not start with a chapter)

• Go to the simple form
• Scroll down or click on a chapter
• I expect the chapter to be highlighted but it doesn't
• Switch to extended form
• It works now
• Switch back to simple
• It keeps working, sort of. I think there is still room for (future) improvement on the behaviour if there are 2 headings on the screen.

yes , i would depend on things like the viewport size en size of the elements between 2 headers , imo the current setup is a good start, not this is not part of the components but the story , a final version may need to be tweaked depending its context ( modal , page ) i would like to do that once we have most form elements working.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud