create cba-select component

[Manvel]

Background

For the new CBA design we will need a new type of select box which will provide info for each of the separate items. See:

What to change

Implement new cba-select component, with the information about each of selecting item next to it.

Additional notes

• The new cba-select element should be WCAG compliant.
  • See reference for the best practices -> https://www.w3.org/TR/wai-aria-practices/#Listbox .
• cba-select will be integrated in cba-table eventually, see -> cba-actions component #44 .
• Hovering info icon next to each list item should show popup with the information, see screenshot below or refer to the action section in the current CBA version:
  • 
  • cba-tooltip can be reused for that reason.
• Selecting item should trigger change event and event may contain new selected item.
• it should be possible to specify the model using cba-select.items, item should contain:
  • id/value.
  • text one that will be displayed as textContent.
  • tooltip/info, data that will be displayed in the info tooltip.
• using cba-select.value should be possible to get current value.
• Ensure that component UI is flexible:
  • If there is not enough space below, open upwards(consider that this item will go into the extension popup).

Tests

• Ensure to create smoke test with information about how to use the component.
• Ensure that the functionality explained above are covered by puppeteer where possible(i.e. custom methods, parameters, keyboard and mouse navigation and etc.).