FormSelect - Add class selectors in order to create a plug and play styling package

[mmirca]

Is your feature request related to a problem? Please describe.

After talks between DCX Spain and DCX UK a new repository has been created in order to provide a plug-and-play styling for the components for a design system based on tokens.

Describe the solution you'd like

For this approach to work we need to have selectors in each component more specific than HTML tags.

• the ErrorMessage base component should provide a default className called dcx-error-message
• the Hint base component should provide a default className called dcx-hint

the FormSelect component needs to provide:

• a default dcx-formselect class name if nothing else is specified

  <div class="dcx-formselect"></div>

• a default dcx-formselect class name and a user based className if specified by the containerClassName (optional) props

  <div class="dcx-formselect user-className"></div>

• a default dcx-formselect--error in case of errorMessage is provided

  <div class="dcx-formselect user-className dcx-formselect--error"></div>

• a className called dcx-floating-label if a new property called variant (floating) will be passed

  <div class="dcx-formselect dcx-floating-label"></div>

• a className called dcx-formselect--filled if theres a value selected

  <div class="dcx-formselect dcx-formselect--filled"></div>

• a className if there's a value selected chosen by the devs

  <div class="dcx-formselect dcx-formselect--filled selectedClassName"></div>

[daniele-zurico]

closed by PR