Updates to mojMenu (Fix #62)

app/assets/sass/application.scss

@@ -20,3 +20,11 @@ body {
   }
 
 }
+
+code {
+  padding: 0 5px;
+  color: #c62950;
+  background-color: #f3f2f1;
+  font-family: monospace, monospace;
+  font-size: 1em;
+}

app/views/components/README.md

@@ -3,13 +3,13 @@
 - [Add another](/add-another)
 - [Badge](/badge)
 - [Banner](/banner)
+- [Button menu](/button-menu)
 - [Currency input](/currency-input)
-- [Filter](/filter)
 - [Filter layout](/filter-layout)
+- [Filter](/filter)
 - [Form validator](/form-validator)
 - [Header](/header)
 - [Identity bar](/identity-bar)
-- [Menu](/menu)
 - [Messages](/messages)
 - [Multi file upload](/multi-file-upload)
 - [Multi select](/multi-select)

app/views/components/button-menu/index.html

@@ -0,0 +1,143 @@
+{% extends "layouts/base.html" %}
+
+{% block body %}
+
+  <div class="govuk-grid-row">
+
+    <div class="govuk-grid-column-full">
+
+      {{ govukBackLink({
+        text: "Back",
+        href: "../"
+      }) }}
+
+      <h1 class="govuk-heading-xl">
+        <span class="govuk-caption-xl">Components</span> Button menu
+      </h1>
+
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-full">
+
+          <h2 class="govuk-heading-m">Example 1</h2>
+          <p>Using anchors (<code>a</code>)</p>
+
+          {{ mojButtonMenu({
+            classes: 'button-menu-1',
+            items: [{
+              text: 'Archive',
+              classes: 'govuk-button--secondary',
+              href: '#'
+            }, {
+              text: 'Reassign',
+              classes: 'govuk-button--secondary',
+              href: '#'
+            }, {
+              text: 'Delete',
+              classes: 'govuk-button--secondary',
+              href: '#'
+            }]
+          }) }}
+
+        </div>
+      </div>
+
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-full">
+
+          <h2 class="govuk-heading-m govuk-!-margin-top-5">Example 2</h2>
+          <p>Using <code>input type=submit</code></p>
+
+          {{ mojButtonMenu({
+            classes: 'button-menu-2',
+            items: [{
+              element: 'input',
+              type: 'submit',
+              text: 'Make decision'
+            }, {
+              element: 'input',
+              type: 'submit',
+              text: 'List for hearing',
+              classes: 'govuk-button--secondary'
+            }]
+          }) }}
+
+        </div>
+      </div>
+
+
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-full">
+
+          <h2 class="govuk-heading-m govuk-!-margin-top-5">Example 3</h2>
+          <p>Using <code>button</code></p>
+
+          {{ mojButtonMenu({
+            classes: 'button-menu-3',
+            items: [{
+              text: 'Save and continue'
+            }, {
+              text: 'Save as draft',
+              classes: 'govuk-button--secondary'
+            }, {
+              text: 'Delete claim',
+              classes: 'govuk-button--warning'
+            }]
+          }) }}
+
+        </div>
+      </div>
+
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-full">
+
+          <h2 class="govuk-heading-m govuk-!-margin-top-5">Example 4</h2>
+
+          {{ mojButtonMenu({
+            classes: 'button-menu-4',
+            items: [{
+              text: 'Make decision'
+            }, {
+              text: 'List for hearing',
+              classes: 'govuk-button--secondary'
+            }]
+          }) }}
+
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+
+{% endblock %}
+
+{% block pageScripts %}
+  <script>
+    new MOJFrontend.ButtonMenu({
+      container: $('.button-menu-1'),
+      mq: '(min-width: 45em)',
+      buttonText: 'Actions'
+    });
+
+    new MOJFrontend.ButtonMenu({
+      container: $('.button-menu-2'),
+      mq: '(min-width: 35em)',
+      buttonText: 'Actions',
+      buttonClasses: 'govuk-button--secondary moj-button-menu__toggle-button--secondary'
+    });
+
+    new MOJFrontend.ButtonMenu({
+      container: $('.button-menu-3'),
+      mq: '(min-width: 45em)',
+      buttonText: 'Actions',
+      buttonClasses: 'govuk-button--secondary moj-button-menu__toggle-button--secondary',
+    });
+
+    new MOJFrontend.ButtonMenu({
+      container: $('.button-menu-4'),
+      buttonText: 'Actions',
+      buttonClasses: 'govuk-button--secondary moj-button-menu__toggle-button--secondary'
+    });
+
+  </script>
+{% endblock %}

app/views/includes/scripts.html

@@ -2,12 +2,12 @@
 <script src="/public/javascripts/namespace.js"></script>
 <script src="/public/javascripts/helpers.js"></script>
 <script src="/public/javascripts/components/add-another/add-another.js"></script>
+<script src="/public/javascripts/components/button-menu/button-menu.js"></script>
+<script src="/public/javascripts/components/filter-toggle-button/filter-toggle-button.js"></script>
 <script src="/public/javascripts/components/form-validator/form-validator.js"></script>
-<script src="/public/javascripts/components/menu/menu.js"></script>
 <script src="/public/javascripts/components/multi-file-upload/multi-file-upload.js"></script>
 <script src="/public/javascripts/components/multi-select/multi-select.js"></script>
 <script src="/public/javascripts/components/password-reveal/password-reveal.js"></script>
 <script src="/public/javascripts/components/rich-text-editor/rich-text-editor.js"></script>
 <script src="/public/javascripts/components/search-toggle/search-toggle.js"></script>
 <script src="/public/javascripts/components/sortable-table/sortable-table.js"></script>
-<script src="/public/javascripts/components/filter-toggle-button/filter-toggle-button.js"></script>

app/views/index.html

@@ -6,20 +6,20 @@ <h1 class="govuk-heading-l">MOJ Frontend</h1>
     <li><a href="/components/add-another">Add another</a></li>
     <li><a href="/components/badge">Badge</a></li>
     <li><a href="/components/banner">Banner</a></li>
+    <li><a href="/components/button-menu">Button menu</a></li>
     <li><a href="/components/currency-input">Currency input</a></li>
     <li><a href="/components/filter">Filter</a></li>
     <li><a href="/components/filter-layout">Filter layout</a></li>
     <li><a href="/components/form-validator">Form validator</a></li>
-    <li><a href="/components/menu">Menu</a></li>
+    <li><a href="/components/header">Header</a></li>
+    <li><a href="/components/identity-bar">Identity bar</a></li>
     <li><a href="/components/messages">Messages</a></li>
     <li><a href="/components/multi-file-upload">Multi file upload</a></li>
     <li><a href="/components/multi-select">Multi-select</a></li>
-    <li><a href="/components/header">Header</a></li>
-    <li><a href="/components/identity-bar">Identity bar</a></li>
     <li><a href="/components/notification-badge">Notification badge</a></li>
     <li><a href="/components/organisation-switcher">Organisation switcher</a></li>
-    <li><a href="/components/pagination">Pagination</a></li>
     <li><a href="/components/page-header-actions">Page header actions</a></li>
+    <li><a href="/components/pagination">Pagination</a></li>
     <li><a href="/components/password-reveal">Password reveal</a></li>
     <li><a href="/components/primary-navigation">Primary navigation</a></li>
     <li><a href="/components/progress-bar">Progress bar</a></li>

app/views/layouts/base.html

@@ -23,23 +23,23 @@
 
 {%- from "moj/components/badge/macro.njk" import mojBadge %}
 {%- from "moj/components/banner/macro.njk" import mojBanner %}
+{%- from "moj/components/button-menu/macro.njk" import mojButtonMenu %}
 {%- from "moj/components/currency-input/macro.njk" import mojCurrencyInput %}
 {%- from "moj/components/filter/macro.njk" import mojFilter %}
 {%- from "moj/components/header/macro.njk" import mojHeader %}
 {%- from "moj/components/identity-bar/macro.njk" import mojIdentityBar %}
-{%- from "moj/components/menu/macro.njk" import mojMenu %}
 {%- from "moj/components/messages/macro.njk" import mojMessages %}
 {%- from "moj/components/multi-file-upload/macro.njk" import mojMultiFileUpload %}
 {%- from "moj/components/notification-badge/macro.njk" import mojNotificationBadge %}
 {%- from "moj/components/organisation-switcher/macro.njk" import mojOrganisationSwitcher %}
+{%- from "moj/components/page-header-actions/macro.njk" import mojPageHeaderActions %}
 {%- from "moj/components/pagination/macro.njk" import mojPagination %}
 {%- from "moj/components/primary-navigation/macro.njk" import mojPrimaryNavigation %}
 {%- from "moj/components/progress-bar/macro.njk" import mojProgressBar %}
 {%- from "moj/components/search/macro.njk" import mojSearch %}
 {%- from "moj/components/side-navigation/macro.njk" import mojSideNavigation %}
 {%- from "moj/components/sub-navigation/macro.njk" import mojSubNavigation %}
 {%- from "moj/components/timeline/macro.njk" import mojTimeline %}
-{%- from "moj/components/page-header-actions/macro.njk" import mojPageHeaderActions %}
 
 <!DOCTYPE html>
 <!--[if lt IE 9]><html class="lte-ie8" lang="en"><![endif]-->

src/moj/components/_all.scss

@@ -2,11 +2,11 @@
 @import "add-another/add-another";
 @import "badge/badge";
 @import "banner/banner";
+@import "button-menu/button-menu";
 @import "currency-input/currency-input";
 @import "filter/filter";
 @import "header/header";
 @import "identity-bar/identity-bar";
-@import "menu/menu";
 @import "messages/messages";
 @import "multi-file-upload/multi-file-upload";
 @import "multi-select/multi-select";