refactor: layers and overlay components

Changes the set of components used to produce various types of overlays:
- `Layer` is an overlay component that fills the entire screen/page. Besides that it is also a key component to stack various components on top of one another.
- `ComponentCover` is a similar component that only fills its parent, provided that has a non-static position.
- Both the `Layer` and the `ComponentCover` can be blocking or non-blocking, accept an `onClick` and a `translucent` prop.
- `CenterContent` is a component that does exactly what it says on the tin. It also has a `position` prop which can be used to vertically align the content at the `top`, `middle` (default), or `bottom`.

BREAKING CHANGE:
These new components replace the `Backdrop` and the `ScreenCover`, which had a slightly unclear scope and have now been removed.

cypress/integration/ComponentCover/accepts_children/index.js

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

cypress/integration/ComponentCover/click_behavior.feature

@@ -0,0 +1,22 @@
+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
+        Then the onClick handler of the button is not called
+
+    Scenario: A blocking ComponentCover with an onClick handler
+        Given a ComponentCover with a button in it is rendered
+        When the user clicks on the ComponentCover
+        Then the onClick handler of the ComponentCover is called
+
+    Scenario: Clicks orginating from children are ignored
+        Given a ComponentCover with a button in it is rendered
+        When the user clicks the button
+        Then the onClick handler of the button is called
+        But the onClick handler of the ComponentCover is not called

cypress/integration/ComponentCover/click_behavior/index.js

@@ -0,0 +1,59 @@
+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')
+})
+
+Given('a ComponentCover with a button in it is rendered', () => {
+    cy.visitStory('ComponentCover', 'With Click Handler')
+})
+
+When('the user clicks the button', () => {
+    cy.get('button').click()
+})
+
+When('the user clicks on the ComponentCover', () => {
+    cy.get('[data-test="dhis2-uicore-componentcover"]').click()
+})
+
+When('the user clicks on the button coordinates', () => {
+    cy.getPositionsBySelectors('button').then(([rect]) => {
+        // Get button center coordinates
+        const buttonCenterX = rect.left + rect.width / 2
+        const buttonCenterY = rect.top + rect.height / 2
+
+        // click body on the button center
+        cy.get('body').click(buttonCenterX, buttonCenterY)
+    })
+})
+
+Then('the onClick handler of the button is called', () => {
+    cy.window().then(win => {
+        expect(win.onButtonClick).to.be.calledOnce
+    })
+})
+
+Then('the onClick handler of the ComponentCover is called', () => {
+    cy.window().then(win => {
+        expect(win.onComponentCoverClick).to.be.calledOnce
+    })
+})
+
+Then('the onClick handler of the button is not called', () => {
+    cy.window().then(win => {
+        expect(win.onButtonClick).to.have.callCount(0)
+    })
+})
+
+Then('the onClick handler of the ComponentCover is not called', () => {
+    cy.window().then(win => {
+        expect(win.onComponentCoverClick).to.have.callCount(0)
+    })
+})

cypress/integration/DropdownButton/opens_a_dropdown.feature

@@ -7,5 +7,5 @@ Feature: The DropdownButton renders a dropdown
 
     Scenario: The user closes the dropdown
         Given a DropdownButton with opened dropdown is rendered
-        When the Backdrop is clicked
+        When the user clicks the backdrop Layer
         Then the dropdown is not rendered

cypress/integration/DropdownButton/opens_a_dropdown/index.js

@@ -12,8 +12,8 @@ Given('a DropdownButton with opened dropdown is rendered', () => {
     cy.get('[data-test="dhis2-uicore-dropdownbutton-popper"]').should('exist')
 })
 
-When('the Backdrop is clicked', () => {
-    cy.get('[data-test="dhis2-uicore-backdrop"]').click()
+When('the user clicks the backdrop Layer', () => {
+    cy.get('[data-test="dhis2-uicore-layer"]').click()
 })
 
 Then('the dropdown is not rendered', () => {

cypress/integration/Layer/accepts_children.feature

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

cypress/integration/Layer/accepts_children/index.js

@@ -0,0 +1,8 @@
+import { Given, Then } from 'cypress-cucumber-preprocessor/steps'
+
+Given('a Layer with children is rendered', () => {
+    cy.visitStory('Layer', 'Default')
+})
+Then('the children are visible', () => {
+    cy.contains('I am a child').should('be.visible')
+})

cypress/integration/Layer/click_behavior.feature

@@ -0,0 +1,22 @@
+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
+        Then the onClick handler of the button is not called
+
+    Scenario: A blocking layer with an onClick handler
+        Given a Layer with a button in it is rendered
+        When the user clicks on the layer
+        Then the onClick handler of the layer is called
+
+    Scenario: Clicks orginating from children are ignored
+        Given a Layer with a button in it is rendered
+        When the user clicks the button
+        Then the onClick handler of the button is called
+        But the onClick handler of the layer is not called

cypress/integration/Layer/click_behavior/index.js

@@ -0,0 +1,59 @@
+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')
+})
+
+Given('a Layer with a button in it is rendered', () => {
+    cy.visitStory('Layer', 'With Click Handler')
+})
+
+When('the user clicks the button', () => {
+    cy.get('button').click()
+})
+
+When('the user clicks on the layer', () => {
+    cy.get('[data-test="dhis2-uicore-layer"]').click()
+})
+
+When('the user clicks on the button coordinates', () => {
+    cy.getPositionsBySelectors('button').then(([rect]) => {
+        // Get button center coordinates
+        const buttonCenterX = rect.left + rect.width / 2
+        const buttonCenterY = rect.top + rect.height / 2
+
+        // click body on the button center
+        cy.get('body').click(buttonCenterX, buttonCenterY)
+    })
+})
+
+Then('the onClick handler of the button is called', () => {
+    cy.window().then(win => {
+        expect(win.onButtonClick).to.be.calledOnce
+    })
+})
+
+Then('the onClick handler of the layer is called', () => {
+    cy.window().then(win => {
+        expect(win.onLayerClick).to.be.calledOnce
+    })
+})
+
+Then('the onClick handler of the button is not called', () => {
+    cy.window().then(win => {
+        expect(win.onButtonClick).to.have.callCount(0)
+    })
+})
+
+Then('the onClick handler of the layer is not called', () => {
+    cy.window().then(win => {
+        expect(win.onLayerClick).to.have.callCount(0)
+    })
+})