From d4568c1e62d2eb51f1395fb9d0a46d4091ed6307 Mon Sep 17 00:00:00 2001
From: Matt Mo <matt@montoyatech.com>
Date: Fri, 18 Sep 2020 17:02:02 -0700
Subject: [PATCH] Working on bootstrap menu components.

---
 dropdown-button.js  | 15 +++++++++++++++
 dropdown-menu.js    | 30 ++++++++++++++++++++++++++----
 ignite-bootstrap.js |  6 +++++-
 3 files changed, 46 insertions(+), 5 deletions(-)
 create mode 100644 dropdown-button.js

diff --git a/dropdown-button.js b/dropdown-button.js
new file mode 100644
index 0000000..ca07cdd
--- /dev/null
+++ b/dropdown-button.js
@@ -0,0 +1,15 @@
+import { IgniteElement } from "../ignite-html/ignite-element.js";
+import { IgniteTemplate, button } from "../ignite-html/ignite-template.js";
+
+class DropdownButtonTemplate extends IgniteTemplate {
+    constructor(...children) {
+        super("button", children);
+
+        this.class("dropdown-item");
+        this.type("button");
+    }
+}
+
+export {
+    DropdownButtonTemplate as DropdownButton
+};
\ No newline at end of file
diff --git a/dropdown-menu.js b/dropdown-menu.js
index 54f2efb..94cbade 100644
--- a/dropdown-menu.js
+++ b/dropdown-menu.js
@@ -6,12 +6,34 @@ class DropdownMenu extends IgniteElement {
         super();
     }
 
+    get properties() {
+        return {
+            button: null,
+            buttonClass: "btn btn-simple",
+            placement: "right",
+            minWidth: null
+        };
+    }
+
+    get styles() {
+        return `
+            .btn-simple {
+                border: none;
+                background-color: transparent;
+            }
+        `;
+    }
+
     render() {
         return this.template.child(
-            new button().class("dropdown-toggle").attribute("data-toggle", "dropdown").child("menu click"),
-            new ul().class("dropdown-menu").child(
-                new slot(this)
-            )
+            new button().class(this.buttonClass).data("toggle", "dropdown").child(this.button),
+            new ul()
+                .class("dropdown-menu")
+                .class(this.placement, (value) => { return `dropdown-menu-${value}`; })
+                .style("min-width", this.minWidth, "important", (value) => { return value ? value : "unset"; })
+                .child(
+                    new slot(this)
+                )
         );
     }
 }
diff --git a/ignite-bootstrap.js b/ignite-bootstrap.js
index 8054835..3bfe541 100644
--- a/ignite-bootstrap.js
+++ b/ignite-bootstrap.js
@@ -1,3 +1,7 @@
 import { DropdownMenu } from "./dropdown-menu.js";
+import { DropdownButton } from "./dropdown-button.js";
 
-export { DropdownMenu }
\ No newline at end of file
+export {
+    DropdownMenu,
+    DropdownButton
+}
\ No newline at end of file