new cba-list-new component

[Manvel]

Background

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

For the project it might be wise to reuse already implemented cba-list component, as in the future this component is going to replace it.

What to change

Introduce new cba-list-new component by extending the existing cba-list component.

Additional info

• The new cba-list-new component should mostly be WCAG compliant.
• Keyboard naviations, sub-items, expansions and other similar implementation details are covered already by cba-list, so when in doubt about implementation, please refer to it first and ensure no regression is provided.
• Replace subHeading with group and add + button to the end of the line.
  • Clicking + button should trigger addItem event on the cba-list component and in smoke test we need to use the event to add new group to the end of the list.
• Hovering or selecting list item should show + button.
  • Clicking + button should trigger addSubitem event and in the smoke test add element to the end of the group the project(s) is located.
• Hovering or selecting list item should show kebab menu.
  • Clicking or focusing and hitting enter on kebab menu should open cba-menu with items below:
    • Rename - trigger rename for current item.
      • hitting enter saves changes and trigger change event on the cba-list component.
    • Delete - deletes current item and trigger change event on the cba-list component.
• Hitting Tab button on the selected item should move focus to +, then to kebab menu if exist and only then move out of the component.

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