Implement menu-button

Gemfile.lock

@@ -1,9 +1,9 @@
 PATH
   remote: .
   specs:
-    turbo_material (0.1.0)
+    turbo_material (0.1.1)
       importmap-rails (~> 2.0.1)
-      rails (>= 7.1.2)
+      rails (~> 7.1, >= 7.1.2)
       stimulus-rails (~> 1.3)
       tailwindcss-rails (~> 2.0, >= 2.0.33)
 

app/assets/javascripts/turbo_material/material_menu_button_controller.js

@@ -0,0 +1,43 @@
+import { Controller } from "@hotwired/stimulus";
+import { useClickOutside } from 'stimulus-use';
+export default class extends Controller {
+    menu = undefined;
+
+    connect() {
+        mdc.ripple.MDCRipple.attachTo(this.element);
+        this.menu = mdc.menu.MDCMenu.attachTo(this.element.querySelector('.mdc-menu-surface'));
+        const button = this.element.querySelector('.menu-button');
+        this.menu.setAnchorElement(button);
+        this.menu.setAnchorCorner(mdc.menu.Corner.BOTTOM_START);
+        this.menu.setFixedPosition(true);
+        useClickOutside(this);
+    }
+
+    disconnect() {
+    }
+
+    click(event) {
+        if (this.menu.open) {
+            this.close();
+        } else {
+            this.open();
+        }
+    }
+
+    open() {
+        this.menu.open = true;
+    }
+
+    close() {
+        this.menu.open = false;
+    }
+
+    clickOutside(event) {
+        if (!this.menu.open) {
+            return;
+        } else {
+            event.preventDefault();
+            this.close();
+        }
+    }
+}

app/helpers/turbo_material/input_helper.rb

@@ -1,5 +1,5 @@
 module TurboMaterial
-  module InputHelper
+module InputHelper
     def material_input(kwargs = {})
       render "components/input", **kwargs
     end

app/helpers/turbo_material/menu_button_helper.rb

@@ -0,0 +1,7 @@
+module TurboMaterial
+module MenuButtonHelper
+    def material_menu_button(kwargs = {})
+      render "components/menu_button", **kwargs
+    end
+  end
+end

app/views/components/_menu_button.html.erb

@@ -0,0 +1,15 @@
+<%# locals: (button_text:, menu_contents_partial:) %>
+<div data-controller="material-menu-button" class="!z-100">
+  <button class="mdc-button mdc-button--touch menu-item menu-button"
+          data-action="click->material-menu-button#click">
+    <span class="mdc-button__ripple"></span>
+    <span class="mdc-button__focus-ring"></span>
+    <span class="mdc-button__label flex items-center">
+      <span class="hidden lg:inline"><%= button_text %></span>
+      <span class="material-icons">expand_more</span>
+    </span>
+  </button>
+  <div class="mdc-menu mdc-menu-surface !w-auto">
+    <%= render partial: menu_contents_partial %>
+  </div>
+</div>

lib/turbo_material/engine.rb

@@ -11,6 +11,7 @@ class Engine < ::Rails::Engine
         helper TurboMaterial::CheckboxHelper
         helper TurboMaterial::ChipsInputHelper
         helper TurboMaterial::ChipsSelectHelper
+        helper TurboMaterial::MenuButtonHelper
         helper TurboMaterial::ModalHelper
         helper TurboMaterial::RadioHelper
         helper TurboMaterial::SelectHelper

test/dummy/app/views/common/_menu_contents.html.erb

@@ -0,0 +1,13 @@
+<ul class="mdc-deprecated-list mdc-deprecated-list--icon-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
+  <li class="mdc-deprecated-list-item" role="menuitem">
+    <span class="mdc-deprecated-list-item__ripple"></span>
+    <span class="mdc-deprecated-list-item__icon material-icons">person</span>
+    <span class="mdc-deprecated-list-item__text pl-2">My Profile</span>
+  </li>
+  <li class="mdc-list-divider" role="separator"></li>
+  <li class="mdc-deprecated-list-item" role="menuitem">
+    <span class="mdc-deprecated-list-item__ripple"></span>
+    <span class="mdc-deprecated-list-item__icon material-icons">logout</span>
+    <span class="mdc-deprecated-list-item__text pl-2">Logout</span>
+  </li>
+</ul>

test/dummy/lookbook/menu_button_preview.rb

@@ -0,0 +1,7 @@
+class MenuButtonPreview < Lookbook::Preview
+
+  # @param button_text text
+  def default(button_text: 'Menu')
+    render 'common/standalone', helper_name: 'material_menu_button', button_text:, menu_contents_partial: 'common/menu_contents'
+  end
+end