diff --git a/src/moj/components/button-menu/_button-menu.scss b/src/moj/components/button-menu/_button-menu.scss index 6c819ed3..0f8a9f0b 100644 --- a/src/moj/components/button-menu/_button-menu.scss +++ b/src/moj/components/button-menu/_button-menu.scss @@ -2,9 +2,11 @@ display: inline-block; position: relative; } + .moj-button-menu__toggle-button { display: inline; } + .moj-button-menu__toggle-button span { display: inline-flex; align-items: center; @@ -74,25 +76,3 @@ z-index: 10; } } - -/* .govuk-button-group { */ -/* $horizontal-gap: govuk-spacing(3); */ -/* $vertical-gap: govuk-spacing(3); */ -/* $button-shadow-size: $govuk-border-width-form-element; */ -/**/ -/* .moj-button-menu { */ -/* margin-bottom: $vertical-gap + $button-shadow-size; */ -/* } */ -/**/ -/* .moj-button-menu .moj-button-menu__toggle-button { */ -/* margin-bottom: 0; */ -/* margin-right: 0; */ -/* vertical-align: baseline */ -/* } */ -/**/ -/* @include govuk-media-query($from: tablet) { */ -/* .moj-button-menu { */ -/* margin-right: $horizontal-gap; */ -/* } */ -/* } */ -/* } */ diff --git a/src/moj/components/button-menu/button-menu.js b/src/moj/components/button-menu/button-menu.js index 8a289f00..264ab14f 100644 --- a/src/moj/components/button-menu/button-menu.js +++ b/src/moj/components/button-menu/button-menu.js @@ -75,7 +75,7 @@ MOJFrontend.ButtonMenu.prototype.initMenu = function () { this.handleKeyDown(event); }); - document.body.addEventListener("click", (event) => { + document.addEventListener("click", (event) => { if (!this.$module.contains(event.target)) { this.closeMenu(false); } diff --git a/src/moj/components/page-header-actions/_page-header-actions.scss b/src/moj/components/page-header-actions/_page-header-actions.scss index fd8eb225..e8e32f4d 100644 --- a/src/moj/components/page-header-actions/_page-header-actions.scss +++ b/src/moj/components/page-header-actions/_page-header-actions.scss @@ -1,54 +1,21 @@ .moj-page-header-actions { - @include govuk-clearfix; - font-size: 0; // Hide whitespace between elements + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + gap: govuk-spacing(2); margin-bottom: govuk-spacing(7); min-height: govuk-spacing(7); // Match button height - text-align: justify; // Trick to remove the need for floats - &:after { - content: ''; - display: inline-block; - width: 100%; - } - } - .moj-page-header-actions__title { - - [class^=govuk-heading-] { - margin-bottom: govuk-spacing(2); - text-align: left; - @include govuk-media-query($from: tablet) { - margin-bottom: 0; - } - } - - @include govuk-media-query($from: tablet) { - display: inline-block; - vertical-align: middle; + [class^="govuk-heading-"] { + margin-bottom: 0; } - } - .moj-page-header-actions__actions { - - @include govuk-media-query($from: tablet) { - display: inline-block; - vertical-align: middle; - } - -} - -.moj-page-header-actions__action { - - &:last-child { + .moj-page-header-actions__action { margin-bottom: 0; } - - @include govuk-media-query($from: tablet) { - margin-bottom: 0; - } - } - diff --git a/src/moj/components/page-header-actions/template.njk b/src/moj/components/page-header-actions/template.njk index 17d60af1..366f74e5 100644 --- a/src/moj/components/page-header-actions/template.njk +++ b/src/moj/components/page-header-actions/template.njk @@ -1,20 +1,19 @@ {%- from "moj/components/button-menu/macro.njk" import mojButtonMenu %} - -
- -
- - {{- params.heading.html | safe if params.heading.html else params.heading.text -}} - -
- - {% if params.items %} -
- {{mojButtonMenu({ - buttonClasses: 'moj-page-header-actions__action', - items: params.items - })}} +
+
+ + {{- params.heading.html | safe if params.heading.html else params.heading.text -}} +
- {% endif %} - + {% if params.items %} +
+ {{ mojButtonMenu({ + button: { + classes: "moj-page-header-actions__action" + }, + alignMenu: "right", + items: params.items + }) }} +
+ {% endif %}