Merge pull request #404 from petalframework/slide_over_id

Allow for multiple instances of the `slide_over` component

Author: mitkins

lib/petal_components/slide_over.ex

@@ -2,6 +2,8 @@ defmodule PetalComponents.SlideOver do
   use Phoenix.Component
   alias Phoenix.LiveView.JS
 
+  attr :id, :string, default: "slide-over"
+
   attr(:origin, :string,
     default: "right",
     values: ["left", "right", "top", "bottom"],
@@ -41,12 +43,12 @@ defmodule PetalComponents.SlideOver do
     ~H"""
     <div
       {@rest}
-      phx-mounted={!@hide && show_slide_over(@origin)}
-      phx-remove={hide_slide_over(@origin, @close_slide_over_target)}
+      phx-mounted={!@hide && show_slide_over(@origin, @id)}
+      phx-remove={hide_slide_over(@origin, @id, @close_slide_over_target)}
       class="hidden pc-slide-over"
-      id="slide-over"
+      id={@id}
     >
-      <div id="slide-over-overlay" class="hidden pc-slideover__overlay" aria-hidden="true"></div>
+      <div id={"#{@id}-overlay"} class="hidden pc-slideover__overlay" aria-hidden="true"></div>
 
       <div
         class={["pc-slideover__wrapper", get_margin_classes(@origin), @class]}
@@ -55,22 +57,26 @@ defmodule PetalComponents.SlideOver do
         aria-modal="true"
       >
         <div
-          id="slide-over-content"
+          id={"#{@id}-content"}
           class={get_classes(@max_width, @origin, @class)}
-          phx-click-away={@close_on_click_away && hide_slide_over(@origin, @close_slide_over_target)}
-          phx-window-keydown={@close_on_escape && hide_slide_over(@origin, @close_slide_over_target)}
+          phx-click-away={
+            @close_on_click_away && hide_slide_over(@origin, @id, @close_slide_over_target)
+          }
+          phx-window-keydown={
+            @close_on_escape && hide_slide_over(@origin, @id, @close_slide_over_target)
+          }
           phx-key="escape"
         >
           <!-- Header -->
           <div class="pc-slideover__header">
             <div class="pc-slideover__header__container">
-              <div class="pc-slideover__header__text">
+              <div :if={@title} class="pc-slideover__header__text">
                 {@title}
               </div>
 
               <button
                 type="button"
-                phx-click={hide_slide_over(@origin, @close_slide_over_target)}
+                phx-click={hide_slide_over(@origin, @id, @close_slide_over_target)}
                 class="pc-slideover__header__button"
               >
                 <div class="sr-only">Close</div>
@@ -90,43 +96,43 @@ defmodule PetalComponents.SlideOver do
     """
   end
 
-  def show_slide_over(origin) do
+  def show_slide_over(origin, id \\ "slide-over") do
     {start_class, end_class} = get_transition_classes(origin)
 
     %JS{}
-    |> JS.show(to: "#slide-over")
+    |> JS.show(to: "##{id}")
     |> JS.show(
-      to: "#slide-over-overlay",
+      to: "##{id}-overlay",
       time: 300,
       transition: {"transition-all transform ease-out duration-300", "opacity-0", "opacity-100"}
     )
     |> JS.show(
-      to: "#slide-over-content",
+      to: "##{id}-content",
       time: 300,
       transition: {"transition-all transform ease-out duration-300", start_class, end_class}
     )
     |> JS.add_class("overflow-hidden", to: "body")
-    |> JS.focus_first(to: "#slide-over-content")
+    |> JS.focus_first(to: "##{id}-content")
   end
 
   # The live view that calls <.slide_over> will need to handle the "close_slide_over" event. eg:
   # def handle_event("close_slide_over", _, socket) do
   #   {:noreply, push_patch(socket, to: Routes.moderate_users_path(socket, :index))}
   # end
-  def hide_slide_over(origin, close_slide_over_target \\ nil) do
+  def hide_slide_over(origin, id \\ "slide-over", close_slide_over_target \\ nil) do
     {end_class, start_class} = get_transition_classes(origin)
 
     js =
       JS.remove_class("overflow-hidden", to: "body")
       |> JS.hide(
         transition: {"ease-in duration-200", "opacity-100", "opacity-0"},
-        to: "#slide-over-overlay"
+        to: "##{id}-overlay"
       )
       |> JS.hide(
         transition: {"ease-in duration-200", start_class, end_class},
-        to: "#slide-over-content"
+        to: "##{id}-content"
       )
-      |> JS.hide(to: "#slide-over", transition: {"duration-200", "", ""})
+      |> JS.hide(to: "##{id}", transition: {"duration-200", "", ""})
 
     if close_slide_over_target do
       JS.push(js, "close_slide_over", target: close_slide_over_target)

test/petal/slide_over_test.exs

@@ -21,6 +21,10 @@ defmodule PetalComponents.SlideOverTest do
       </.slide_over>
       """)
 
+    assert html =~ "id=\"slide-over\""
+    assert html =~ "slide-over-overlay"
+    assert html =~ "slide-over-content"
+
     assert html =~ "data-phx-link"
     assert html =~ "phx-click"
     assert html =~ "translate-x-0"
@@ -81,6 +85,50 @@ defmodule PetalComponents.SlideOverTest do
     assert html =~ "fixed inset-x-0 bottom-0"
   end
 
+  test "slide_over with default id" do
+    assigns = %{}
+
+    html =
+      rendered_to_string(~H"""
+      <.button label="left" link_type="live_patch" to="/live" />
+
+      <.slide_over title="SlideOver" origin="left">
+        <div class="gap-5 text-sm">
+          <.form_label label="Add some text here." />
+          <div class="flex justify-end">
+            <.button label="close" phx-click={PetalComponents.SlideOver.hide_slide_over("left")} />
+          </div>
+        </div>
+      </.slide_over>
+      """)
+
+    assert html =~ "id=\"slide-over\""
+    assert html =~ "slide-over-overlay"
+    assert html =~ "slide-over-content"
+  end
+
+  test "slide_over with custom id" do
+    assigns = %{}
+
+    html =
+      rendered_to_string(~H"""
+      <.button label="left" link_type="live_patch" to="/live" />
+
+      <.slide_over id="bert" title="SlideOver" origin="left">
+        <div class="gap-5 text-sm">
+          <.form_label label="Add some text here." />
+          <div class="flex justify-end">
+            <.button label="close" phx-click={PetalComponents.SlideOver.hide_slide_over("left")} />
+          </div>
+        </div>
+      </.slide_over>
+      """)
+
+    assert html =~ "id=\"bert\""
+    assert html =~ "bert-overlay"
+    assert html =~ "bert-content"
+  end
+
   test "dark mode" do
     assigns = %{}