Button menu updates

docs/examples/button-menu-all/index.njk

@@ -0,0 +1,145 @@
+---
+layout: layouts/example.njk
+title: Button menu (example)
+arguments: button-menu
+figma_link: https://www.figma.com/file/N2xqOFkyehXwcD9DxU1gEq/MoJ-Figma-Kit?type=design&node-id=66-5816&mode=design
+---
+
+{%- 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>
+<div style="display: flex; flex-direction: row-reverse;">
+{{ mojButtonMenu({
+  button: {
+    text: "Print options",
+    classes: "govuk-button--secondary"
+  },
+  alignMenu: "right",
+  items: [{
+    text: "Primary action",
+    href: "#"
+  }, {
+    text: "Second action",
+    href: "#"
+  }, {
+    text: "Third action",
+    href: "#"
+  }]
+}) }}
+</div>
+
+<h3>Inverse</h3>
+<div style="background-color: #1d70b8; padding: 30px 30px 20px 30px;">
+    {{ mojButtonMenu({
+  button: {
+    text: "Print options",
+    classes: "govuk-button--inverse"
+  },
+  items: [{
+    text: "Primary action",
+    href: "#"
+  }, {
+    text: "Second action",
+    href: "#"
+  }, {
+    text: "Third action",
+    href: "#"
+  }]
+}) }}
+</div>
+
+
+<h3>Govuk button group</h3>
+<div class="govuk-button-group">
+    {{ govukButton({
+      text: "Primary action"
+    })}}
+    {{ govukButton({
+      text: "Another action",
+      classes: "govuk-button--secondary"
+    })}}
+    {{ govukButton({
+      text: "Click  me!",
+      classes: "govuk-button--secondary"
+    })}}
+</div>
+
+<h3>MoJ button group</h3>
+<div class="moj-button-group">
+    {{ govukButton({
+      text: "Primary action"
+    })}}
+    {{ govukButton({
+      text: "Another action",
+      classes: "govuk-button--secondary"
+    })}}
+    {{ govukButton({
+      text: "Click  me!",
+      classes: "govuk-button--secondary"
+    })}}
+</div>
+
+<h3>MoJ button group inline (with button menu)</h3>
+<div class="moj-button-group moj-button-group--inline">
+    {{ 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>

docs/examples/button-menu/index.njk

@@ -6,18 +6,88 @@ 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: "#",
+    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: "#",
+    href: "#"
+  }]
+}) }}
+
+<h3>Right aligned</h3>
+{{ mojButtonMenu({
+  button: {
+    text: "Print options",
+    classes: "govuk-button--secondary"
+  },
+  alignMenu: "right",
+  items: [{
+    text: "Primary action",
+    href: "#"
+  }, {
+    text: "Second action",
+    href: "#"
+  }, {
+    text: "Third action",
+    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>

gulpfile.js

@@ -38,7 +38,7 @@ gulp.task(
 gulp.task(
   "watch:styles",  () => {
     gulp.watch(
-      ["docs/assets/**/*.scss", "src/moj/components/**/*.scss"],
+      ["docs/assets/**/*.scss", "src/moj/**/*.scss"],
       gulp.series(["docs:styles"]),
     )
   }

jest.config.js

@@ -1,5 +1,8 @@
 const config = {
   testEnvironment: "jsdom",
+  testEnvironmentOptions: {
+    url: "https://design-patterns.service.juice.gov.uk",
+  },
   setupFilesAfterEnv: ["./jest.setup.js"],
 };
 module.exports = config;

src/moj/all.js

@@ -71,4 +71,10 @@ MOJFrontend.initAll = function (options) {
   MOJFrontend.nodeListForEach($datepickers, function ($datepicker) {
     new MOJFrontend.DatePicker($datepicker, {}).init();
   })
+
+  const $buttonMenus = scope.querySelectorAll('[data-module="moj-button-menu"]')
+  MOJFrontend.nodeListForEach($buttonMenus, function ($buttonmenu) {
+    new MOJFrontend.ButtonMenu($buttonmenu, {}).init();
+  })
+
 }