feat: updated the validation forms in templates

[balco0110]

Description:

Closes: #2309

Definition of Reviewable:

• Documentation is created/updated

• E2E tests (features, a11y, bug fixes) are created/updated

• Stories (features, a11y) are created/updated
• relevant tickets are linked

[changeset-bot]

🦋 Changeset detected

Latest commit: 4d18484

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

🚀 Storybook has been deployed for branch feat_update-validation-in-forms-templates

• View Storybook

[MartaPintoTeixeira]

Please read again the ticket because the current branch is not solving the issue.
I can provide you more info via call to be faster.

But in resume:

1. The goal of this ticket is that we have either help-text or error-text. never both. In other words, when used in forms, if a components has help-text and is marked as required and the user submits form before completing the field the error text should appear but the help-text should be removed.
   When i go to screenshots validation this is not happening in the current testing environment.

2 ) Also I see in Cromatic some broken things.
Please compare screenshots tests from the live version and the new as I see some help-text are gone.

3 ) Another thing I saw that we need to fix is that in the input valitation screenshots the 1st sample turns to valid when we submit it (even if empty). All required fields that are empty when user submits should get error text. if before submiting the put something in the input field, then it should show as valid state once submited. this logic should apply to all form fields.

4 ) Please make sure you do the "Docs tasks:" that are described in the ticket as well.

Any questions give me a call

[MartaPintoTeixeira]

Will remove my assignment. As comment above is not yet finished.
Assign me again once ready to review.

[MartaPintoTeixeira]

Good:
Whenever a component is in an invalid state, the help-text should not be rendered. Show only one message at a time under the input
Helper text should start with a capital letter.

Not good:
Check all components validation screenshot tests to change the error text "Fill out this field". It does not comply with WCAG.

::

:::

A ) @balco0110 the requests from @dpuetzdw are not finished. Please double check:

1 )
sd-combobox - "Sample: Form" screenshot

Requiered:
Error: Please select an option.

Requiered multiple:
Error: Please select at least one option.

Required multiple w/ tags:
Error: Please select at least one option.

2 ) sd-radio-group - "Invalid" screenshot

Error: Please select an option.

::

B ) Why do we have "Radio Buttons" and "Mouseless with Radio Buttons" stories in the screenshots of sd-radio-group. And btw they are broken.

[balco0110]

@MartaPintoTeixeira i've fixed the sd-combobox and sd-radio-group error messages and for the "Radio Buttons" and "Mouseless with Radio Buttons" I'm not sure why are we have this, but with the keayboard they are working fine

[MartaPintoTeixeira]

Please double check the comments on the screenshot tests.

Also regarding this "...and "Mouseless with Radio Buttons" I'm not sure why are we have this, but with the keayboard they are working fine" can you check with another dev? thanks