feat(button menu): final updates to button menu and adjust page heade…

…r actions

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; */
-/*     } */
-/*   } */
-/* } */

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);
     }

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;
-  }
-
 }
-

src/moj/components/page-header-actions/template.njk

@@ -1,20 +1,19 @@
 {%- from "moj/components/button-menu/macro.njk" import mojButtonMenu %}
-
-<div class="moj-page-header-actions {{- ' ' + params.classes if params.classes}}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-
-  <div class="moj-page-header-actions__title">
-    <h{{ params.heading.level | default(1) }} class="{{params.heading.classes | default('govuk-heading-xl')}}">
-      {{- params.heading.html | safe if params.heading.html else params.heading.text -}}
-    </h{{ params.heading.level | default(1) }}>
-  </div>
-
-  {% if params.items %}
-    <div class="moj-page-header-actions__actions">
-      {{mojButtonMenu({
-        buttonClasses: 'moj-page-header-actions__action',
-        items: params.items
-      })}}
+<div class="moj-page-header-actions {{- ' ' + params.classes if params.classes}}" {%- for attribute, value in params.attributes %}{{ attribute }}="{{ value }}"{% endfor %}>
+    <div class="moj-page-header-actions__title">
+        <h {{ params.heading.level | default(1) }} class="{{ params.heading.classes | default("govuk-heading-xl") }}">
+        {{- params.heading.html | safe if params.heading.html else params.heading.text -}}
+        </h {{ params.heading.level | default(1) }}>
     </div>
-  {% endif %}
-
+    {% if params.items %}
+        <div class="moj-page-header-actions__actions">
+            {{ mojButtonMenu({
+                        button: {
+                        classes: "moj-page-header-actions__action"
+                        },
+                        alignMenu: "right",
+                        items: params.items
+                        }) }}
+        </div>
+    {% endif %}
 </div>