added autocomplete component

stories/Form/Input.stories.mdx

@@ -118,6 +118,17 @@ Cerca una regione italiana per verificarne il comportamento.
   <Story id='componenti-form-input--input-autocomplete-con-dati' />
 </Canvas>
 
+### Autocompletamento Accessibile con dati
+
+Il completamento automatico è un componente che aiuta gli utenti a scegliere le risposte da un elenco fornito.
+
+Per la creazione del componente, è stato utilizzato il plugin <a target="_blank" href="https://github.com/alphagov/accessible-autocomplete">Accessible autocomplete</a>.
+
+Per una corretta implementazione si consiglia di consultare la <a target="_blank" href="https://alphagov.github.io/accessible-autocomplete/">documentazione</a>.
+<Canvas>
+  <Story id='componenti-form-input--input-autocomplete-con-dati-accessibile' />
+</Canvas>
+
 ## Area di testo
 
 Per permettere agli utenti di inserire del testo (ad esempio per lasciare commenti o informazioni), è bene utilizzare un elemento di tipo `<textarea>` ridimensionabile.

stories/Form/Input.stories.tsx

@@ -9,6 +9,9 @@ import { multiOptions } from './Autocomplete/AutocompleteExample';
 
 import { Input, TimeInput, Icon, TextArea, FormGroup } from '../../src';
 
+import Autocomplete from 'accessible-autocomplete/react';
+import 'accessible-autocomplete/dist/accessible-autocomplete.min.css';
+
 export default {
   title: 'Componenti/Form/Input'
 };
@@ -36,6 +39,7 @@ export const EsempiDiCampiDiInput = () => {
       isValid ? 'Campo di tipo ora - dark' : 'Formato ora non valido (hh:mm)'
     );
   };
+
   return (
     <div>
       <Input type='text' label='Campo di tipo testuale' id='exampleInputText' />
@@ -356,6 +360,38 @@ export const _InputAutocompleteConDati = () => {
 
 _InputAutocompleteConDati.storyName = 'Input autocomplete';
 
+export const _InputAutocompleteConDatiAccessibile = () => {
+  // @ts-ignore
+  const suggest = (query, populateResults) => {
+    const filteredResults = multiOptions.filter((i) =>
+      i.label.toLowerCase().includes(query.toLowerCase())
+    );
+    let data = filteredResults.map((item) => {
+      return item.label;
+    });
+    populateResults(data);
+  };
+
+  return (
+    <FormGroup>
+      <label htmlFor='autocomplete'>Provincia</label>
+      <Autocomplete
+        id='autocomplete'
+        source={suggest}
+        autoselect
+        placeholder={'Testo da cercare'}
+        defaultValue={''}
+        className={''}
+        displayMenu={'overlay'}
+        tNoResults={() => 'Nessun risultato'}
+      />
+    </FormGroup>
+  );
+};
+
+_InputAutocompleteConDatiAccessibile.storyName =
+  'Input autocomplete accessibile';
+
 export const AreaDiTesto = () => (
   <TextArea label='Esempio di area di testo' rows={3} />
 );