@ministryofjustice/frontend 2.2.3 → 3.0.0

package/moj/components/page-header-actions/_page-header-actions.scss

@@ -1,54 +1,24 @@
 .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-button-group {
     margin-bottom: 0;
   }
-
-  @include govuk-media-query($from: tablet) {
+  .govuk-button {
     margin-bottom: 0;
   }
-
 }
-

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

@@ -1,20 +1,20 @@
 {%- from "moj/components/button-menu/macro.njk" import mojButtonMenu %}
+{% from "govuk/macros/attributes.njk" import govukAttributes %}
+{%- from "govuk/components/button/macro.njk" import govukButton %}
 
-<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}}" {{- govukAttributes(params.attributes) -}}>
+    <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">
+            <div class="moj-button-group moj-button-group--inline">
+                {% for button in params.items %}
+                    {{ govukButton(button) }}
+                {% endfor %}
+            </div>
+        </div>
+    {% endif %}
 </div>

package/moj/components/password-reveal/password-reveal.js

@@ -29,3 +29,4 @@ MOJFrontend.PasswordReveal.prototype.onButtonClick = function() {
     this.button.html('Show <span class="govuk-visually-hidden">password</span>');
   }
 };
+

package/moj/components/password-reveal/password-reveal.spec.js

@@ -0,0 +1,46 @@
+const { getByDisplayValue, getByText } = require("@testing-library/dom");
+const { axe } = require("jest-axe");
+
+require("./password-reveal.js");
+
+describe("Password reveal", () => {
+  let container;
+
+  beforeEach(() => {
+    const input = document.createElement("input");
+    input.type = "password";
+    input.value = "password";
+
+    new MOJFrontend.PasswordReveal(input);
+
+    container = input.parentNode;
+  });
+
+  test("initialises container", () => {
+    expect(container).toHaveClass("moj-password-reveal");
+    expect(container).toContainElement(getByText(container, "Show"));
+  });
+
+  test("toggle reveal", () => {
+    const input = getByDisplayValue(container, "password");
+    const button = getByText(container, "Show");
+
+    button.click();
+
+    expect(input).toHaveAttribute("type", "text");
+    expect(button).toHaveTextContent("Hide");
+
+    button.click();
+
+    expect(input).toHaveAttribute("type", "password");
+    expect(button).toHaveTextContent("Show");
+  });
+
+  test("accessibility", async () => {
+    const button = getByText(container, "Show");
+
+    expect(await axe(document.body)).toHaveNoViolations();
+    button.click();
+    expect(await axe(document.body)).toHaveNoViolations();
+  });
+});

package/moj/objects/_all.scss

@@ -1,3 +1,4 @@
 @import "width-container";
 @import "filter-layout";
 @import "scrollable-pane";
+@import "button-group";

package/moj/objects/_button-group.scss

@@ -0,0 +1,37 @@
+
+.moj-button-group {
+  $horizontal-gap: govuk-spacing(3);
+  $vertical-gap: govuk-spacing(3);
+  $button-shadow-size: $govuk-border-width-form-element;
+
+  @extend .govuk-button-group;
+
+
+  &--inline {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: baseline;
+    gap: $horizontal-gap;
+    margin-right: 0;
+
+  .moj-button-menu {
+      margin-bottom: $vertical-gap + $button-shadow-size;
+    }
+
+  .moj-button-menu .moj-button-menu__toggle-button {
+      vertical-align: baseline;
+    }
+
+  .moj-button-menu,
+  .govuk-button,
+  .govuk-link {
+    width: auto;
+    margin-right: 0;
+      margin-bottom: 0;
+    }
+
+  /* :is(.govuk, .moj-button-menu, .govuk-link) + :is(.govuk, .moj-button-menu, .govuk-link) { */
+  /*     margin-top: $horizontal-gap; */
+  /*   } */
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ministryofjustice/frontend",
   "description": "The MOJ Frontend contains the code you need to start building user interfaces for UK Ministry of Justice government services.",
-  "version": "2.2.3",
+  "version": "3.0.0",
   "main": "moj/all.js",
   "sass": "moj/all.scss",
   "engines": {