Creates a vertical-ellipsis-menu component

app/webpacker/controllers/vertical_ellipsis_menu_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+  static targets = ["content"];
+
+  connect() {
+    super.connect();
+    window.addEventListener("click", (e) => {
+      if (this.element.contains(e.target)) return;
+      this.#hide();
+    });
+  }
+
+  toggle() {
+    this.contentTarget.classList.toggle("show");
+  }
+
+  #hide() {
+    this.contentTarget.classList.remove("show");
+  }
+}

app/webpacker/css/admin_v3/all.scss

@@ -113,6 +113,7 @@
 @import "../admin/reports";
 @import "components/select2"; // admin_v3
 @import "components/sidebar-item"; // admin_v3
+@import "components/vertical_ellipsis_menu"; // admin_v3 and only V3
 @import "../admin/side_menu";
 @import "../admin/tables";
 @import "../admin/tag_rules";

app/webpacker/css/admin_v3/components/vertical_ellipsis_menu.scss

@@ -0,0 +1,62 @@
+.vertical-ellipsis-menu {
+  position: relative;
+  width: $btn-relaxed-height;
+
+  i.fa-ellipsis-v {
+    cursor: pointer;
+    display: block;
+    height: $btn-relaxed-height;
+    width: $btn-relaxed-height;
+    line-height: $btn-relaxed-height;
+    text-align: center;
+    border-radius: 3px;
+    background-color: white;
+  }
+
+  .vertical-ellipsis-menu-content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    background-color: white;
+    @include defaultBoxShadow;
+    border-radius: 3px;
+    min-width: 80px;
+    display: none;
+    z-index: 100;
+
+    &.show {
+      display: block;
+    }
+
+    .vertical-ellipsis-menu-content-item {
+      display: block;
+      padding: 5px 10px;
+      cursor: pointer;
+      text-align: left;
+      border-left: 3px solid white;
+      color: $near-black;
+      text-decoration: none;
+      border-bottom: none;
+
+      &:hover {
+        background-color: $light-grey;
+        border-left: 3px solid $spree-blue;
+      }
+
+      &.delete {
+        color: $red;
+
+        &:hover {
+          border-left: 3px solid $red;
+          background-color: $fair-pink;
+        }
+      }
+    }
+  }
+}
+
+table.products td .vertical-ellipsis-menu {
+  float: right;
+}

spec/javascripts/stimulus/vertical_ellipsis_menu_controller_test.js

@@ -0,0 +1,55 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { Application } from "stimulus";
+import vertical_ellipsis_menu_controller from "../../../app/webpacker/controllers/vertical_ellipsis_menu_controller";
+
+describe("VerticalEllipsisMenuController test", () => {
+  beforeAll(() => {
+    const application = Application.start();
+    application.register("vertical-ellipsis-menu", vertical_ellipsis_menu_controller);
+  });
+
+  beforeEach(() => {
+    document.body.innerHTML = `
+      <div data-controller="vertical-ellipsis-menu" id="root">
+        <div data-action="click->vertical-ellipsis-menu#toggle" id="button">...</div>
+        <div data-vertical-ellipsis-menu-target="content" id="content">
+          
+        </div>
+      </div>
+    `;
+  });
+
+  it("add show class to content when toggle is called", () => {
+    const button = document.getElementById("button");
+    const content = document.getElementById("content");
+
+    expect(content.classList.contains("show")).toBe(false);
+    button.click();
+    expect(content.classList.contains("show")).toBe(true);
+  });
+
+
+  it("remove show class from content when clicking button", () => {
+    const button = document.getElementById("button");
+    const content = document.getElementById("content");
+
+    button.click();
+    expect(content.classList.contains("show")).toBe(true);
+    button.click();
+    expect(content.classList.contains("show")).toBe(false);
+  });
+
+  
+  it("remove show class from content when clicking outside", () => {
+    const button = document.getElementById("button");
+    const content = document.getElementById("content");
+
+    button.click();
+    expect(content.classList.contains("show")).toBe(true);
+    document.body.click();
+    expect(content.classList.contains("show")).toBe(false);
+  });
+});