Merge pull request #2853 from tvdeyen/growl-component-slot

feat(alchemy-growl): Allow innerHTML as message

app/javascript/alchemy_admin/components/growl.js

@@ -2,7 +2,11 @@ import { growl } from "alchemy_admin/growler"
 
 class Growl extends HTMLElement {
   connectedCallback() {
-    growl(this.getAttribute("message"), this.getAttribute("type") || "notice")
+    growl(this.message, this.getAttribute("type") || "notice")
+  }
+
+  get message() {
+    return this.getAttribute("message") || this.innerHTML
   }
 }
 

spec/javascript/alchemy_admin/components/growl.spec.js

@@ -0,0 +1,24 @@
+import "alchemy_admin/components/growl"
+import { renderComponent } from "./component.helper"
+
+describe("alchemy-growl", () => {
+  it("should have the given message from attribute", () => {
+    const html = `
+      <div id="flash_notices"></div>
+      <alchemy-growl message="Foo Bar"></alchemy-growl>
+    `
+    renderComponent("alchemy-growl", html)
+    const message = document.querySelector("alchemy-message")
+    expect(message.textContent).toMatch("Foo Bar")
+  })
+
+  it("should have the given message from innerHTML", () => {
+    const html = `
+      <div id="flash_notices"></div>
+      <alchemy-growl>Foo Bar</alchemy-growl>
+    `
+    renderComponent("alchemy-growl", html)
+    const message = document.querySelector("alchemy-message")
+    expect(message.textContent).toMatch("Foo Bar")
+  })
+})