refactor: make menu click-based and reorganise related components

cypress/integration/ComponentCover/click_behavior.feature

@@ -1,10 +1,5 @@
 Feature: The ComponentCover has configurable click behaviour
 
-    Scenario: A non-blocking ComponentCover
-        Given a ComponentCover with pointerEvents none and a button below it is rendered
-        When the user clicks the button
-        Then the onClick handler of the button is called
-
     Scenario: A blocking ComponentCover
         Given a ComponentCover with a button below it is rendered
         When the user clicks on the button coordinates

cypress/integration/ComponentCover/click_behavior/index.js

@@ -1,12 +1,5 @@
 import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
 
-Given(
-    'a ComponentCover with pointerEvents none and a button below it is rendered',
-    () => {
-        cy.visitStory('ComponentCover', 'Non Blocking')
-    }
-)
-
 Given('a ComponentCover with a button below it is rendered', () => {
     cy.visitStory('ComponentCover', 'Blocking')
 })

cypress/integration/FlyoutMenu/accepts_children.feature

@@ -0,0 +1,5 @@
+Feature: The FlyoutMenu renders children
+
+    Scenario: A FlyoutMenu with children
+        Given a FlyoutMenu with children is rendered
+        Then the children are visible

cypress/integration/FlyoutMenu/accepts_children/index.js

@@ -0,0 +1,10 @@
+import { Given, Then } from 'cypress-cucumber-preprocessor/steps'
+
+Given('a FlyoutMenu with children is rendered', () => {
+    cy.visitStory('FlyoutMenu', 'With Children')
+    cy.get('[data-test="dhis2-uicore-menu"]').should('be.visible')
+})
+
+Then('the children are visible', () => {
+    cy.contains('I am a child').should('be.visible')
+})

cypress/integration/MenuItem/position.feature → cypress/integration/FlyoutMenu/position.feature

@@ -1,18 +1,18 @@
-Feature: Position of a MenuItem component
+Feature: Position of a SubMenu component
     Scenario: Default rendering
         Given there is enough space to the right of the MenuItem to fit the SubMenu
-        When the user hovers over the MenuItem
+        When the user clicks on the MenuItem
         Then the right of the MenuItem is aligned with the left of the SubMenu
         And the top of the MenuItem is aligned with the top of the SubMenu wrapper
 
     Scenario: Flipped rendering when insufficient space to the right of
         Given there is not enough space to the right of the MenuItem to fit the SubMenu
-        When the user hovers over the MenuItem
+        When the user clicks on the MenuItem
         Then the left of the MenuItem is aligned with the right of the SubMenu
         And the top of the MenuItem is aligned with the top of the SubMenu wrapper
 
     Scenario: Shifting into view when insufficient space to the right of and above
         Given there is not enough space to the right or the left of the MenuItem to fit the SubMenu
-        When the user hovers over the MenuItem
+        When the user clicks on the MenuItem
         Then the SubMenu is rendered on top of the MenuItem
         And the top of the MenuItem is aligned with the top of the SubMenu wrapper

cypress/integration/MenuItem/position/index.js → cypress/integration/FlyoutMenu/position/index.js

@@ -3,26 +3,26 @@ import { Given, Then, When } from 'cypress-cucumber-preprocessor/steps'
 Given(
     'there is enough space to the right of the MenuItem to fit the SubMenu',
     () => {
-        cy.visitStory('MenuItem', 'Default position')
+        cy.visitStory('FlyoutMenu', 'Default Position')
     }
 )
 
 Given(
     'there is not enough space to the right of the MenuItem to fit the SubMenu',
     () => {
-        cy.visitStory('MenuItem', 'Flipped position')
+        cy.visitStory('FlyoutMenu', 'Flipped Position')
     }
 )
 
 Given(
     'there is not enough space to the right or the left of the MenuItem to fit the SubMenu',
     () => {
-        cy.visitStory('MenuItem', 'Shift into view')
+        cy.visitStory('FlyoutMenu', 'Shift Into View')
     }
 )
 
-When('the user hovers over the MenuItem', () => {
-    cy.get('[data-test="dhis2-uicore-menuitem"]').trigger('mouseover')
+When('the user clicks on the MenuItem', () => {
+    cy.get('[data-test="dhis2-uicore-menuitem"]').click()
 })
 
 Then(
@@ -65,6 +65,6 @@ Then(
 function getMenuItemAndSubMenuRects() {
     return cy.getPositionsBySelectors(
         '[data-test="dhis2-uicore-menuitem"]',
-        '[data-test="submenu"]'
+        '[data-test="dhis2-uicore-popper"]'
     )
 }

cypress/integration/FlyoutMenu/toggles_submenus.feature

@@ -0,0 +1,9 @@
+Feature: The FlyoutMenu toggles SubMenus
+
+    Scenario: a FlyoutMenu with two SubMenus
+        Given a FlyoutMenu with two SubMenus is rendered
+        When the user clicks the first SubMenu anchor
+        Then first SubMenu is visible
+        When the user clicks the second SubMenu anchor
+        Then second SubMenu is visible
+        And the first SubMenu is not visible

cypress/integration/FlyoutMenu/toggles_submenus/index.js

@@ -0,0 +1,26 @@
+import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
+
+Given('a FlyoutMenu with two SubMenus is rendered', () => {
+    cy.visitStory('FlyoutMenu', 'Toggles Sub Menus')
+    cy.get('[data-test="dhis2-uicore-menu"]').should('be.visible')
+})
+
+When('the user clicks the first SubMenu anchor', () => {
+    cy.contains('Item 1').click()
+})
+
+Then('first SubMenu is visible', () => {
+    cy.contains('SubMenu 1').should('be.visible')
+})
+
+When('the user clicks the second SubMenu anchor', () => {
+    cy.contains('Item 2').click()
+})
+
+Then('second SubMenu is visible', () => {
+    cy.contains('SubMenu 2').should('be.visible')
+})
+
+Then('the first SubMenu is not visible', () => {
+    cy.contains('SubMenu 1').should('not.be.visible')
+})

cypress/integration/Layer/click_behavior.feature

@@ -1,10 +1,5 @@
 Feature: The Layer has configurable click behaviour
 
-    Scenario: A non-blocking layer
-        Given a Layer with pointerEvents none and a button below it is rendered
-        When the user clicks the button
-        Then the onClick handler of the button is called
-
     Scenario: A blocking layer
         Given a Layer with a button below it is rendered
         When the user clicks on the button coordinates

cypress/integration/Layer/click_behavior/index.js

@@ -1,12 +1,5 @@
 import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
 
-Given(
-    'a Layer with pointerEvents none and a button below it is rendered',
-    () => {
-        cy.visitStory('Layer', 'Non Blocking')
-    }
-)
-
 Given('a Layer with a button below it is rendered', () => {
     cy.visitStory('Layer', 'Blocking')
 })

cypress/integration/Menu/accepts_children/index.js

@@ -2,7 +2,7 @@ import { Given, Then } from 'cypress-cucumber-preprocessor/steps'
 
 Given('a Menu with children is rendered', () => {
     cy.visitStory('Menu', 'With children')
-    cy.get('[data-test="dhis2-uicore-menu"]').should('be.visible')
+    cy.get('[data-test="dhis2-uicore-menulist"]').should('be.visible')
 })
 
 Then('the children are visible', () => {

cypress/integration/MenuItem/accepts_href/index.js

@@ -1,7 +1,7 @@
 import { Given, Then } from 'cypress-cucumber-preprocessor/steps'
 
 Given('a MenuItem with href is rendered', () => {
-    cy.visitStory('MenuItem', 'With href')
+    cy.visitStory('MenuItem', 'With Href')
 })
 
 Then('a link is rendered with the href', () => {

cypress/integration/MenuItem/accepts_icon/index.js

@@ -1,7 +1,7 @@
 import { Given, Then } from 'cypress-cucumber-preprocessor/steps'
 
 Given('a MenuItem supplied with an icon is rendered', () => {
-    cy.visitStory('MenuItem', 'With icon')
+    cy.visitStory('MenuItem', 'With Icon')
     cy.get('[data-test="dhis2-uicore-menuitem"]').should('be.visible')
 })
 

cypress/integration/MenuItem/accepts_label.feature

@@ -2,4 +2,4 @@ Feature: The MenuItem accepts a label prop
 
     Scenario: MenuItem renders supplied label
         Given a MenuItem supplied with a label is rendered
-        Then the label will be visible
+        Then the label is visible

cypress/integration/MenuItem/accepts_label/index.js

@@ -1,10 +1,10 @@
 import { Given, Then } from 'cypress-cucumber-preprocessor/steps'
 
 Given('a MenuItem supplied with a label is rendered', () => {
-    cy.visitStory('MenuItem', 'With label')
+    cy.visitStory('MenuItem', 'With Label')
     cy.get('[data-test="dhis2-uicore-menuitem"]').should('be.visible')
 })
 
-Then('the label will be visible', () => {
-    cy.contains('Label').should('be.visible')
+Then('the label is visible', () => {
+    cy.contains('label').should('be.visible')
 })

cypress/integration/MenuItem/accepts_target/index.js

@@ -1,7 +1,7 @@
 import { Given, Then } from 'cypress-cucumber-preprocessor/steps'
 
 Given('a MenuItem with target is rendered', () => {
-    cy.visitStory('MenuItem', 'With target')
+    cy.visitStory('MenuItem', 'With Target')
 })
 
 Then('a link is rendered with the target', () => {

cypress/integration/MenuItem/is_clickable/index.js

@@ -1,7 +1,7 @@
 import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
 
 Given('a MenuItem with onClick handler and value is rendered', () => {
-    cy.visitStory('MenuItem', 'With onClick and value')
+    cy.visitStory('MenuItem', 'With On Click And Value')
 })
 
 When('the MenuItem is clicked', () => {

cypress/integration/MenuSectionHeader/accepts_label.feature

@@ -0,0 +1,5 @@
+Feature: The MenuSectionHeader accepts a label prop
+
+    Scenario: MenuSectionHeader renders supplied label
+        Given a MenuSectionHeader supplied with a label is rendered
+        Then the label is visible

cypress/integration/MenuSectionHeader/accepts_label/index.js

@@ -0,0 +1,10 @@
+import { Given, Then } from 'cypress-cucumber-preprocessor/steps'
+
+Given('a MenuSectionHeader supplied with a label is rendered', () => {
+    cy.visitStory('MenuSectionHeader', 'With Label')
+    cy.get('[data-test="dhis2-uicore-menusectionheader"]').should('be.visible')
+})
+
+Then('the label is visible', () => {
+    cy.contains('label').should('be.visible')
+})

packages/core/src/ComponentCover/ComponentCover.js

@@ -23,7 +23,6 @@ const ComponentCover = ({
     className,
     dataTest,
     onClick,
-    pointerEvents,
     translucent,
 }) => (
     <div
@@ -40,7 +39,6 @@ const ComponentCover = ({
                 bottom: 0;
                 left: 0;
                 z-index: ${layers.applicationTop};
-                pointer-events: ${pointerEvents};
             }
             div.translucent {
                 background: rgba(33, 43, 54, 0.4);
@@ -51,7 +49,6 @@ const ComponentCover = ({
 
 ComponentCover.defaultProps = {
     dataTest: 'dhis2-uicore-componentcover',
-    pointerEvents: 'all',
 }
 
 /**
@@ -60,15 +57,13 @@ ComponentCover.defaultProps = {
  * @prop {string} [className]
  * @prop {Node} [children]
  * @prop {string} [dataTest=dhis2-uicore-componentcover]
- * @prop {string} [pointerEvents=all] - One of 'all', 'none'
  * @prop {boolean} [translucent] - When true a semi-transparent background is added
  * @prop {function} [onClick]
  */
 ComponentCover.propTypes = {
     children: propTypes.node,
     className: propTypes.string,
     dataTest: propTypes.string,
-    pointerEvents: propTypes.oneOf(['all', 'none']),
     translucent: propTypes.bool,
     onClick: propTypes.func,
 }

packages/core/src/ComponentCover/ComponentCover.stories.e2e.js

@@ -30,13 +30,6 @@ export const WithChildren = () => (
     </ComponentCover>
 )
 
-export const NonBlocking = () => (
-    <>
-        <button onClick={window.onButtonClick}>Test</button>
-        <ComponentCover pointerEvents="none" />
-    </>
-)
-
 export const Blocking = () => (
     <>
         <button onClick={window.onButtonClick}>Test</button>

packages/core/src/ComponentCover/ComponentCover.stories.js

@@ -49,18 +49,6 @@ export const WithClickHandler = () => (
     </>
 )
 
-export const NonBlocking = () => (
-    <>
-        <ComponentCover translucent pointerEvents="none" />
-
-        <h1>Text behind the cover</h1>
-        <p>
-            You can still select this text because the cover has pointer-event:
-            none.
-        </p>
-    </>
-)
-
 export const WithCenteredContentCircularLoader = () => (
     <>
         <ComponentCover translucent>