Draft: POC - Add form input and form group components

Related to #360975

Adds FormInputComponent and FormGroupComponent ViewComponents. These components can also be used inside of the GitLab UI form builder.

Form input

Before

.form-group.gl-form-group
  = f.label :pronouns, s_('Profiles|Pronouns')
  = f.text_field :pronouns, class: 'gl-form-input form-control gl-md-form-input-lg'
  %small.form-text.text-gl-muted
    = s_("Profiles|Enter your pronouns to let people know how to refer to you")

After

= f.gitlab_ui_form_group :pronouns, s_('Profiles|Pronouns'), help_text: s_("Profiles|Enter your pronouns to let people know how to refer to you") do
  = f.gitlab_ui_form_input :pronouns, size: { md: 'lg' }

HTML output

<div class="form-group gl-form-group" role="group">
  <label class="d-block col-form-label" for="user_pronouns">
    <span>Pronouns</span>
  </label>
  <input
    aria-describedby="b80f36e2-4f37-4e99-bf0f-ab81c816611b-help-text"
    class="gl-form-input form-control gl-md-form-input-lg"
    type="text"
    value=""
    name="user[pronouns]"
    id="user_pronouns"
  />
  <small
    class="form-text text-gl-muted"
    id="b80f36e2-4f37-4e99-bf0f-ab81c816611b-help-text"
  >
    Enter your pronouns to let people know how to refer to you
  </small>
</div>

Radio buttons or checkboxes

Before

%fieldset.form-group.gl-form-group
  %legend.col-form-label.col-form-label
    = s_("Profiles|Private contributions")
   = f.gitlab_ui_checkbox_component :include_private_contributions,
     s_('Profiles|Include private contributions on my profile'),
     help_text: s_("Profiles|Choose to show contributions of private projects on your public profile without any project, repository or organization information")

After

= f.gitlab_ui_form_group nil, s_("Profiles|Private contributions") do
  = f.gitlab_ui_checkbox_component :include_private_contributions,
    s_('Profiles|Include private contributions on my profile'),
    help_text: s_("Profiles|Choose to show contributions of private projects on your public profile without any project, repository or organization information")

HTML output

<fieldset class="form-group gl-form-group">
  <legend class="bv-no-focus-ring col-form-label pt-0 col-form-label">
    Private contributions
  </legend>
  <div class="gl-form-checkbox custom-control custom-checkbox">
    <input name="user[include_private_contributions]" type="hidden" value="0" />
    <input
      class="custom-control-input"
      type="checkbox"
      value="1"
      name="user[include_private_contributions]"
      id="user_include_private_contributions"
    />
    <label
      class="custom-control-label"
      for="user_include_private_contributions"
    >
      <span>Include private contributions on my profile</span>
      <p class="help-text">
        Choose to show contributions of private projects on your public profile
        without any project, repository or organization information
      </p>
    </label>
  </div>
</fieldset>