feat(button menu): wip - continued work on updated button menu

ministryofjustice · Oct 8, 2024 · c8fa1f6 · c8fa1f6
1 parent d80fb39
commit c8fa1f6
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 6 deletions.
diff --git a/docs/examples/button-menu/index.njk b/docs/examples/button-menu/index.njk
@@ -6,8 +6,56 @@ figma_link: https://www.figma.com/file/N2xqOFkyehXwcD9DxU1gEq/MoJ-Figma-Kit?type
 ---
 
 {%- from "moj/components/button-menu/macro.njk" import mojButtonMenu -%}
+{%- from "govuk/components/button/macro.njk" import govukButton %}
 
+
+<h3>Single button</h3>
+{{ mojButtonMenu({
+  items: [{
+    text: "Primary action",
+    href: "#"
+  }]
+}) }}
+
+<h3>Default</h3>
+{{ mojButtonMenu({
+  items: [{
+    text: "Primary action",
+    href: "#"
+  }, {
+    text: "Second action",
+    href: "#"
+  }, {
+    text: "Third action",
+    href: "#"
+  }]
+}) }}
+
+<h3>Secondary button</h3>
+{{ mojButtonMenu({
+  button: {
+    text: "Print options",
+    classes: "govuk-button--secondary"
+  },
+  items: [{
+    text: "Primary action",
+    href: "#"
+  }, {
+    text: "Second action",
+    href: "#"
+  }, {
+    text: "Third action",
+    href: "#"
+  }]
+}) }}
+
+<h3>Right aligned</h3>
 {{ mojButtonMenu({
+  button: {
+    text: "Print options",
+    classes: "govuk-button--secondary"
+  },
+  alignMenu: "right",
   items: [{
     text: "Primary action",
     href: "#"
@@ -19,3 +67,27 @@ figma_link: https://www.figma.com/file/N2xqOFkyehXwcD9DxU1gEq/MoJ-Figma-Kit?type
     href: "#"
   }]
 }) }}
+
+
+<h3>Button group</h3>
+<div class="govuk-button-group">
+    {{ govukButton({
+      text: "Primary action"
+    })}}
+    {{ mojButtonMenu({
+  button: {
+    text: "Print options",
+    classes: "govuk-button--secondary"
+  },
+  items: [{
+    text: "Action",
+    href: "#"
+  }, {
+    text: "Second action",
+    href: "#"
+  }, {
+    text: "Third action",
+    href: "#"
+  }]
+}) }}
+</div>
diff --git a/src/moj/components/button-menu/_button-menu.scss b/src/moj/components/button-menu/_button-menu.scss
@@ -84,6 +84,27 @@
 	}
 }
 
+.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
@@ -13,7 +13,8 @@ MOJFrontend.ButtonMenu = function($module, config) {
 
   const defaults = {
     buttonText: "Actions",
-    alignMenu: "left"
+    alignMenu: "left",
+    buttonClasses: ""
   }
 
   // data attributes override JS config, which overrides defaults
@@ -27,10 +28,12 @@ MOJFrontend.ButtonMenu = function($module, config) {
 }
 
 MOJFrontend.ButtonMenu.prototype.init = function() {
-  if (this.$module.childNodes.length == 1) {
-
+  if (this.$module.children.length == 1) {
+    if(this.config.buttonClasses) {
+      this.$module.children[0].classList.add(...this.config.buttonClasses.split(" "))
+    }
   }
-  if (this.$module.childNodes.length > 1) {
+  if (this.$module.children.length > 1) {
     this.initMenu()
   }
 }

diff --git a/src/moj/components/button-menu/template.njk b/src/moj/components/button-menu/template.njk
@@ -3,6 +3,7 @@
 
 {#- Set classes for this component #}
 {%- set classNames = "moj-button-menu" -%}
+{%- set itemClassNames = "moj-button-menu__item govuk-button--secondary" %}
 
 {%- if params.classes %}
   {% set classNames = classNames + " " + params.classes %}
@@ -24,9 +25,12 @@
 
 <div class="{{- classNames -}}" data-module="moj-button-menu" {{- govukAttributes(params.attributes) -}}  {{- govukAttributes(buttonAttributes) -}}>
     {%- for item in params.items %}
-      {{ govukButton({
+      {%- if item.classes %}
+      {% set itemClassNames = fitemClassNames + " " + item.classes %}
+  {% endif %}
+  {{ govukButton({
           element: item.element,
-          classes: 'moj-button-menu__item ' + (item.classes if item.classes),
+          classes: itemClassNames,
           text: item.text,
           html: item.html,
           name: item.name,