feat: add icon and button to input

[Virtute90]

PR Checklist

• [x] My branch is up-to-date with the Upstream main branch.
• [x] The unit tests pass locally with my changes (if applicable).
• [x] I have added tests that prove my fix is effective or that my feature works (if applicable).
• [x] I have added necessary documentation (if appropriate).

Short description of what this resolves:

Aggiunta della icona a sinistra e del bottone a destra del componente input. Al momento lascio in draft perchè mancano i test.

Changes proposed in this Pull Request:

***Prima Codice:

const [isFocused1, toggleFocus1] = useState(false);
const [isFocused2, toggleFocus2] = useState(false);
const [isFocused3, toggleFocus3] = useState(false);

const toggleFocusLabel1 = () => toggleFocus1(true);
// @ts-ignore: ignore types for now
const toggleBlurLabel1 = (e) => {
  if (e.target.value === '') {
    toggleFocus1(!isFocused1);
  }
};
const toggleFocusLabel2 = () => toggleFocus2(true);
// @ts-ignore: ignore types for now
const toggleBlurLabel2 = (e) => {
  if (e.target.value === '') {
    toggleFocus2(!isFocused2);
  }
};
const toggleFocusLabel3 = () => toggleFocus3(true);
// @ts-ignore: ignore types for no}w
const toggleBlurLabel3 = (e) => {
  if (e.target.value === '') {
    toggleFocus3(!isFocused3);
  }
};
return (
  <div>
    <div className='form-group'>
      <div className='input-group'>
        <span className='input-group-text'>
          <Icon icon='it-pencil' aria-hidden size='sm' />
        </span>
        <label htmlFor='input-group-1' className={isFocused1 ? 'active' : ''}>
          Con Etichetta
        </label>
        <input
          type='text'
          className={isFocused1 ? 'form-control focus--mouse' : 'form-control'}
          onFocus={toggleFocusLabel1}
          onBlur={toggleBlurLabel1}
          id='input-group-1'
          name='input-group-1'
        />
      </div>
    </div>
    <div className='form-group'>
      <div className='input-group'>
        <span className='input-group-text'>
          <Icon icon='it-pencil' color='danger' aria-hidden size='sm' />
        </span>
        <label htmlFor='input-group-2' className='active'>
          Con Etichetta e placeholder
        </label>
        <input
          type='text'
          className={isFocused2 ? 'form-control focus--mouse' : 'form-control'}
          onFocus={toggleFocusLabel2}
          onBlur={toggleBlurLabel2}
          id='input-group-2'
          name='input-group-2'
          placeholder='Lorem Ipsum'
        />
      </div>
    </div>
    <div className='form-group'>
      <div className='input-group'>
        <span className='input-group-text'>
          <Icon icon='it-pencil' color='primary' aria-hidden size='sm' />
        </span>
        <label htmlFor='input-group-3' className={isFocused3 ? 'active' : ''}>
          Con Etichetta e bottone di tipo primary
        </label>
        <input
          type='text'
          className={isFocused3 ? 'form-control focus--mouse' : 'form-control'}
          onFocus={toggleFocusLabel3}
          onBlur={toggleBlurLabel3}
          id='input-group-3'
          name='input-group-3'
        />
        <div className='input-group-append'>
          <button className='btn btn-primary' type='button' id='button-3'>
            Invio
          </button>
        </div>
      </div>
    </div>
  </div>
);

Ora:

<>
  <Input
    hasIconLeft
    iconLeft={<Icon aria-hidden icon="it-pencil" size="sm"/>}
    id="exampleInputIcon"
    label="Campo di tipo testuale"
    type="text"
  />
  <Input
    hasIconLeft
    iconLeft={<Icon aria-hidden color="danger" icon="it-pencil" size="sm"/>}
    id="exampleInputIconDanger"
    label="Con etichetta e placeholder"
    placeholder="Lorem Ipsum"
    type="text"
  />
  <Input
    buttonRight={<Button color="primary">Invio</Button>}
    hasButtonRight
    hasIconLeft
    iconLeft={<Icon aria-hidden color="primary" icon="it-pencil" size="sm"/>}
    id="exampleInputButton"
    label="Con etichetta e bottone di tipo primary"
    type="text"
  />
</>

Ma il render non cambia:

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
design-react-kit	✅ Ready (Inspect)	Visit Preview	Jul 2, 2024 10:02am

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 79.56989% with 19 lines in your changes missing coverage. Please review.

Project coverage is 97.30%. Comparing base (39821d9) to head (8329606).

:exclamation: Current head 8329606 differs from pull request most recent head ba8ad1a

Please upload reports for the commit ba8ad1a to get more accurate results.

Files	Patch %	Lines
src/Input/InputContainer.tsx	42.42%	19 Missing :warning:

Additional details and impacted files

```diff @@ Coverage Diff @@ ## main #1066 +/- ## ========================================== - Coverage 97.35% 97.30% -0.05% ========================================== Files 354 354 Lines 25444 25420 -24 Branches 1670 1665 -5 ========================================== - Hits 24770 24736 -34 - Misses 672 682 +10 Partials 2 2 ``` | [Flag](https://app.codecov.io/gh/italia/design-react-kit/pull/1066/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=italia) | Coverage Δ | | |---|---|---| | [unittests](https://app.codecov.io/gh/italia/design-react-kit/pull/1066/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=italia) | `97.30% <79.56%> (-0.05%)` | :arrow_down: | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=italia#carryforward-flags-in-the-pull-request-comment) to find out more.

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[Virtute90]

Aggiunti test