Background
Both for the new cba-list and new cba-table we need to implement kebab menu, which should open a menu with the various selectable items.
What to change
Create cba-menu component that can be programmatically triggered to open and closed when clicked/navigated out or by selecting item inside.
Additional notes
- The changes to
cba-menu should be WCAG compliant.
cba-menu menu appearance should be programmatically calculated similar to cba-tooltip.
cba-menu.items should accept array with id, text and href(optional).
- When href is not specified clicking item should trigger
menu-select event.
- When href is specified open link in the href in a new tab.
cba-menu.show() should open the menu.
cba-menu.hide() should close/hide the menu.
cba-menu.toggle() should toggle the visibility
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.).
Background
Both for the new cba-list and new cba-table we need to implement kebab menu, which should open a menu with the various selectable items.
What to change
Create
cba-menucomponent that can be programmatically triggered to open and closed when clicked/navigated out or by selecting item inside.Additional notes
cba-menushould be WCAG compliant.cba-menumenu appearance should be programmatically calculated similar to cba-tooltip.cba-menu.itemsshould accept array withid,textandhref(optional).menu-selectevent.cba-menu.show()should open the menu.cba-menu.hide()should close/hide the menu.cba-menu.toggle()should toggle the visibilityTests