cba-actions component

[Manvel]

Background

For the new CBA UI, we need to introduce new cba-actions component as shown in the image below:

For the project it might be wise to reuse already implemented cba-table component and ideally migrate to using <ul> instead of <table>, to be consistent with other elements and simplicity(can be done separately).

What to change

Implement new cba-actions by extending the existing cba-table component.

Additional info

• The new cba-actions component should mostly be WCAG compliant.
• Keyboard naviations, reordering, dragNdrop and other similar implementation details are covered already by cba-table, so when in doubt about implementation, please refer to it first and ensure no regression is provided regarding existing functionality.
• Add cba-select component to the event cells.
  • select the event provided in data model for specific action.
  • on change event update event type for the item the change was fired for.
• On hover or when action item is selected current control items should appear:
  • Edit(edit icon in UI screenshot) - Clicking item opens prepopulated popup by input1(data in old version) and input2(value in old version).
    • 
    • Clicking confirm button or focusing and hitting Enter closes popup, saves changes for action and triggers change event on cba-actions component.
    • Clicking cancel button or focusing and hitting Enter closes popup.
  • Add action(+ icon)
    • adds action right below the targeted one trigger change event on cba-actions component.
  • Kebab menu
    • opens cba-menu with item below:
      • Delete - deletes current action and trigger change event on the cba-actions component.
• Hitting Delete button on selected action should delete action trigger change event.
• Hitting Enter button on selected action should open cba-popup.
• Hitting tab on selected item should first focus on cba-select -> edit button -> add button -> kebab -> navigate out of the component.
• Ignore target icon that is in between of edit and add in the screenshot - we don't have yet functionality for that

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.).