feat(autocomplete): create component

[Leotheluck]

Description

OsdsAutocomplete is a new component that allows users to type into an input that will open a dropdown displaying a list of selectable options from which the user can choose from.

Keep in mind the OsdsAutocomplete component is not meant to implement the logic of sorting or filtering the elements that we put inside it. Example of one possible filtering logic is to be found in the index.html but is only for testing purpose.

Content

• New component OsdsAutocomplete
• Documentation
• Storybook stories

To review

Check if the component works properly in multiple environments and situations. Also make sure that documentation is up to the requirements. Look for any potential mistakes or improvements we could address.

To be added

• Loading state
• BEM SCSS & remove !important (there was an issue with linters being investigated)
• Add a "With logic" page to Storybook

[dpellier]

Issue when doing the following (tested on FF):

• on Demo page, click on input
• click on Bonjour
• click on the clearable icon
• click on input to reopen the list
• click on Bonjour
  ==> Empty input

[dpellier]

Inline is set twice

[astagnol]

Global
There is no 'no results found' text to display for the Autocomplete component but it would be great to show how to integrate this in the example with logic

Keyboard navigation
We should not have to 'Tab' twice to be able to type in the field (careful with Safari, currently there is no focus at all on 'Tab', it exits the field)

When the dropdown is displayed, 'Tab' should enable focus on the next element but not the options:

• if the user has moved forward through the list of options with 'arrow', the focused option = selected value & the dropdown is closed on 'Tab'. Since an option is selected, we should focus on clearable Icon.
• if no option is focused yet, the dropdown is closed & the next focusable element is focused on 'Tab'

When the user selects an option on 'Enter', dropdown is closed & the field is in state 'focus'.

Mouse
The dropdown is closed & the field is in state 'focus' when the user clicks on an option