feat(button menu): wip - work on styles and interaction details

ministryofjustice · Oct 9, 2024 · fecd754 · fecd754
1 parent c8fa1f6
commit fecd754
Show file tree

Hide file tree

Showing 7 changed files with 339 additions and 151 deletions.
diff --git a/docs/examples/button-menu-all/index.njk b/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>
diff --git a/gulpfile.js b/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"]),
     )
   }

diff --git a/src/moj/components/button-menu/_button-menu.scss b/src/moj/components/button-menu/_button-menu.scss
@@ -2,37 +2,28 @@
   display: inline-block;
   position: relative;
 }
-
 .moj-button-menu__toggle-button {
+  display: inline;
+}
+.moj-button-menu__toggle-button span {
   display: inline-flex;
   align-items: center;
-  margin-right: govuk-spacing(2);
-  margin-bottom: govuk-spacing(2);
-  width: auto; // Override GDS’s 100% width
   gap: 8px;
-
-  &:last-child {
-    margin-right: 0;
-  }
 }
 
 .moj-button-menu__toggle-button svg {
   transform: rotate(180deg);
   margin-top: 5%;
 }
 
-.moj-button-menu__toggle-button[aria-expanded="true"] {
-  margin-bottom: govuk-spacing(1);
-}
-
 .moj-button-menu__toggle-button[aria-expanded="true"] svg {
-    transform: rotate(0deg)
+  transform: rotate(0deg);
 }
 
-
-.moj-button-menu [role=menu] {
+.moj-button-menu [role="menu"] {
   position: absolute;
-  width: max-content;
+  width: 200px;
+  top: 43px; //38px button height, 2px shadow, 3px gap
   z-index: 10;
 }
 
@@ -52,7 +43,7 @@
 }
 
 /* Menu items with JS */
-.moj-button-menu [role=menuitem] {
+.moj-button-menu [role="menuitem"] {
   @include govuk-font(19);
   background-color: govuk-colour("light-grey");
   border: none;
@@ -79,34 +70,29 @@
     outline: 3px solid govuk-colour("yellow");
     background-color: govuk-colour("mid-grey");
     outline-offset: 0;
-		position: relative;
+    position: relative;
     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;
-    }
   }
 }
 
-
-
-
-
+/* .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; */
+/*     } */
+/*   } */
+/* } */