Repository: woylie/doggo
Pull request #211 (2024-01-13 23:23:53)

rename drawer nav
- update groups in documentation and storybook
- rename drawer slots to header, main, and footer
- rename drawer nav components to vertical nav



Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index fd2f53d..a383cd4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,6 +25,10 @@
 - Use `button` for close button in `Doggo.modal/1`.
 - Add `dismissable` attribute to `Doggo.modal/1`.
 - Remove `role` from `button_link/1`, add `class`.
+- Rename `Doggo.drawer/1` slots to `header`, `main`, and `footer`.
+- Rename `Doggo.drawer_nav/1`, `Doggo.drawer_nav_nested/1` and
+  `Doggo.drawer_nav_section` to `Dogger.vertical_nav/1`,
+  `Doggo.vertical_nav_nested/1` and `Doggo.vertical_nav_section/1`.
 - Depend on `phoenix_storybook ~> 0.6.0`.
 
 ## [0.4.0] - 2023-12-31
diff --git a/lib/doggo.ex b/lib/doggo.ex
index 01a51a3..593c75b 100644
--- a/lib/doggo.ex
+++ b/lib/doggo.ex
@@ -473,7 +473,7 @@ defmodule Doggo do
   </Doggo.bottom_navigation>
   ```
   """
-  @doc type: :component
+  @doc type: :navigation
 
   attr :label, :string,
     default: nil,
@@ -643,7 +643,7 @@ defmodule Doggo do
   </Doggo.breadcrumb>
   ```
   """
-  @doc type: :component
+  @doc type: :navigation
 
   attr :label, :string,
     default: "Breadcrumb",
@@ -735,7 +735,7 @@ defmodule Doggo do
   </Doggo.button>
   ```
   """
-  @doc type: :component
+  @doc type: :button
 
   attr :type, :string, values: ["button", "reset", "submit"], default: "button"
   attr :variant, :atom, values: @variants, default: :primary
@@ -788,7 +788,7 @@ defmodule Doggo do
   </Doggo.button_link>
   ```
   """
-  @doc type: :component
+  @doc type: :button
 
   attr :variant, :atom, values: @variants, default: :primary
   attr :fill, :atom, values: @fills, default: :solid
@@ -897,6 +897,7 @@ defmodule Doggo do
   </Doggo.carousel>
   ```
   """
+  @doc type: :component
 
   attr :id, :string, required: true
 
@@ -1450,7 +1451,7 @@ defmodule Doggo do
   <table id="data-table" hidden></table>
   ```
   """
-  @doc type: :component
+  @doc type: :button
 
   attr :controls, :string,
     required: true,
@@ -1474,8 +1475,8 @@ defmodule Doggo do
   Renders a drawer with a `brand`, `top`, and `bottom` slot.
 
   All slots are optional, and you can render any content in them. If you want
-  to use the drawer as a sidebar, you can use the `drawer_nav/1` and
-  `drawer_section/1` components.
+  to use the drawer as a sidebar, you can use the `vertical_nav/1` and
+  `vertical_nav_section/1` components.
 
   ## Example
 
@@ -1483,7 +1484,7 @@ defmodule Doggo do
 
   ```heex
   <Doggo.drawer>
-    <:top>Content</:top>
+    <:main>Content</:main>
   </Doggo.drawer>
   ```
 
@@ -1491,9 +1492,9 @@ defmodule Doggo do
 
   ```heex
   <Doggo.drawer>
-    <:brand>Doggo</:brand>
-    <:top>Content at the top</:top>
-    <:bottom>Content at the bottom</:bottom>
+    <:header>Doggo</:header>
+    <:main>Content at the top</:main>
+    <:footer>Content at the bottom</:footer>
   </Doggo.drawer>
   ```
 
@@ -1501,16 +1502,16 @@ defmodule Doggo do
 
   ```heex
   <Doggo.drawer>
-    <:brand>
+    <:header>
       <.link navigate={~p"/"}>App</.link>
-    </:brand>
-    <:top>
-      <Doggo.drawer_nav label="Main">
+    </:header>
+    <:main>
+      <Doggo.vertical_nav label="Main">
         <:item>
           <.link navigate={~p"/dashboard"}>Dashboard</.link>
         </:item>
         <:item>
-          <Doggo.drawer_nested_nav>
+          <Doggo.vertical_nav_nested>
             <:title>Content</:title>
             <:item current_page>
               <.link navigate={~p"/posts"}>Posts</.link>
@@ -1518,28 +1519,28 @@ defmodule Doggo do
             <:item>
               <.link navigate={~p"/comments"}>Comments</.link>
             </:item>
-          </Doggo.drawer_nested_nav>
+          </Doggo.vertical_nav_nested>
         </:item>
-      </.drawer_nav>
-      <Doggo.drawer_section>
+      </.vertical_nav>
+      <Doggo.vertical_nav_section>
         <:title>Search</:title>
         <:item><input type="search" placeholder="Search" /></:item>
-      </Doggo.drawer_section>
-    </:top>
-    <:bottom>
-      <Doggo.drawer_nav label="User menu">
+      </Doggo.vertical_nav_section>
+    </:main>
+    <:footer>
+      <Doggo.vertical_nav label="User menu">
         <:item>
           <.link navigate={~p"/settings"}>Settings</.link>
         </:item>
         <:item>
           <.link navigate={~p"/logout"}>Logout</.link>
         </:item>
-      </Doggo.drawer_nav>
-    </:bottom>
+      </Doggo.vertical_nav>
+    </:footer>
   </Doggo.drawer>
   ```
   """
-  @doc type: :component
+  @doc type: :navigation
 
   attr :class, :any,
     default: [],
@@ -1547,57 +1548,57 @@ defmodule Doggo do
 
   attr :rest, :global, doc: "Any additional HTML attributes."
 
-  slot :brand, doc: "Optional slot for the brand name or logo."
+  slot :header, doc: "Optional slot for the brand name or logo."
 
-  slot :top,
+  slot :main,
     doc: """
     Slot for content that is rendered after the brand, at the start of the
     side bar.
     """
 
-  slot :bottom,
+  slot :footer,
     doc: """
-    Slot for content that is rendered at the end of the drawer, pinned to the
-    bottom, if there is enough room.
+    Slot for content that is rendered at the end of the drawer, potentially
+    pinned to the bottom, if there is enough room.
     """
 
   def drawer(assigns) do
     ~H"""
     <aside class={["drawer" | List.wrap(@class)]} {@rest}>
-      <div :if={@brand != []} class="drawer-brand">
-        <%= render_slot(@brand) %>
+      <div :if={@header != []} class="drawer-header">
+        <%= render_slot(@header) %>
       </div>
-      <div :if={@top != []} class="drawer-top">
-        <%= render_slot(@top) %>
+      <div :if={@main != []} class="drawer-main">
+        <%= render_slot(@main) %>
       </div>
-      <div :if={@bottom != []} class="drawer-bottom">
-        <%= render_slot(@bottom) %>
+      <div :if={@footer != []} class="drawer-footer">
+        <%= render_slot(@footer) %>
       </div>
     </aside>
     """
   end
 
   @doc """
-  Renders a navigation menu as a drawer section.
+  Renders a vertical navigation menu.
 
-  This component must be placed within the `:top` or `:bottom` slot of the
-  `drawer/1` component.
+  It is commonly placed within drawers or sidebars.
 
-  To nest the navigation, use the `drawer_nested_nav/1` component within the
+  For hierarchical menu structures, use `vertical_nav_nested/1` within the
   `:item` slot.
 
-  To render a drawer section that is not a navigation menu, use
-  `drawer_section/1` instead.
+  To include sections in your drawer or sidebar that are not part of the
+  navigation menu (like informational text or a site search), use the
+  `vertical_nav_section/1` component.
 
   ## Example
 
   ```heex
-  <Doggo.drawer_nav label="Main">
+  <Doggo.vertical_nav label="Main">
     <:item>
       <.link navigate={~p"/dashboard"}>Dashboard</.link>
     </:item>
     <:item>
-      <Doggo.drawer_nested_nav>
+      <Doggo.vertical_nav_nested>
         <:title>Content</:title>
         <:item current_page>
           <.link navigate={~p"/posts"}>Posts</.link>
@@ -1605,12 +1606,12 @@ defmodule Doggo do
         <:item>
           <.link navigate={~p"/comments"}>Comments</.link>
         </:item>
-      </Doggo.drawer_nested_nav>
+      </Doggo.vertical_nav_nested>
     </:item>
-  </Doggo.drawer_nav>
+  </Doggo.vertical_nav>
   ```
   """
-  @doc type: :component
+  @doc type: :navigation
 
   attr :id, :string, default: nil
   attr :label, :string, required: true
@@ -1624,7 +1625,7 @@ defmodule Doggo do
     attr :current_page, :boolean
   end
 
-  def drawer_nav(assigns) do
+  def vertical_nav(assigns) do
     ~H"""
     <nav id={@id} aria-label={@label} {@rest}>
       <div :if={@title != []} class="drawer-nav-title">
@@ -1644,15 +1645,15 @@ defmodule Doggo do
   end
 
   @doc """
-  Renders nested navigation items within the `:item` slot of the `drawer_nav/1`
-  component.
+  Renders nested navigation items within the `:item` slot of the
+  `vertical_nav/1` component.
 
   ## Example
 
   ```heex
-  <Doggo.drawer_nav label="Main">
+  <Doggo.vertical_nav label="Main">
     <:item>
-      <Doggo.drawer_nested_nav>
+      <Doggo.vertical_nav_nested>
         <:title>Content</:title>
         <:item current_page>
           <.link navigate={~p"/posts"}>Posts</.link>
@@ -1660,12 +1661,12 @@ defmodule Doggo do
         <:item>
           <.link navigate={~p"/comments"}>Comments</.link>
         </:item>
-      </Doggo.drawer_nested_nav>
+      </Doggo.vertical_nav_nested>
     </:item>
-  </Doggo.drawer_nav>
+  </Doggo.vertical_nav>
   ```
   """
-  @doc type: :component
+  @doc type: :navigation
 
   attr :id, :string, required: true
 
@@ -1676,7 +1677,7 @@ defmodule Doggo do
     attr :current_page, :boolean
   end
 
-  def drawer_nested_nav(assigns) do
+  def vertical_nav_nested(assigns) do
     ~H"""
     <div :if={@title != []} id={"#{@id}-title"} class="drawer-nav-title">
       <%= render_slot(@title) %>
@@ -1694,21 +1695,21 @@ defmodule Doggo do
   end
 
   @doc """
-  Renders a section in a drawer that contains one or more items, which are not
-  navigation links.
+  Renders a section within a sidebar or drawer that contains one or more
+  items which are not navigation links.
 
-  To render a drawer navigation, use `drawer_nav/1` instead.
+  To render navigation links, use `vertical_nav/1` instead.
 
   ## Example
 
   ```heex
-  <Doggo.drawer_section>
+  <Doggo.vertical_nav_section>
     <:title>Search</:title>
     <:item><input type="search" placeholder="Search" /></:item>
-  </Doggo.drawer_section>
+  </Doggo.vertical_nav_section>
   ```
   """
-  @doc type: :component
+  @doc type: :navigation
 
   attr :id, :string, required: true
 
@@ -1725,7 +1726,7 @@ defmodule Doggo do
       doc: "Additional CSS classes. Can be a string or a list of strings."
   end
 
-  def drawer_section(assigns) do
+  def vertical_nav_section(assigns) do
     ~H"""
     <div
       id={@id}
@@ -1757,7 +1758,7 @@ defmodule Doggo do
   </Doggo.fab>
   ```
   """
-  @doc type: :component
+  @doc type: :button
 
   attr :label, :string, required: true
   attr :variant, :atom, values: @variants, default: :primary
@@ -3640,7 +3641,7 @@ defmodule Doggo do
   </Doggo.navbar>
   ```
   """
-  @doc type: :component
+  @doc type: :navigation
 
   attr :label, :string,
     required: true,
@@ -4149,7 +4150,7 @@ defmodule Doggo do
   </Doggo.steps>
   ```
   """
-  @doc type: :component
+  @doc type: :navigation
 
   attr :label, :string, default: "Form steps"
 
@@ -4449,7 +4450,7 @@ defmodule Doggo do
   </Doggo.tab_navigation>
   ```
   """
-  @doc type: :component
+  @doc type: :navigation
 
   attr :label, :string,
     default: "Tabs",
@@ -4693,7 +4694,7 @@ defmodule Doggo do
   button[aria-pressed="true"] {}
   ```
   """
-  @doc type: :component
+  @doc type: :button
 
   attr :pressed, :boolean, default: false
 
diff --git a/mix.exs b/mix.exs
index d319ac7..ca71cc8 100644
--- a/mix.exs
+++ b/mix.exs
@@ -88,7 +88,9 @@ defmodule Doggo.MixProject do
       skip_undefined_reference_warnings_on: ["CHANGELOG.md"],
       groups_for_functions: [
         Components: &(&1[:type] == :component),
-        Form: &(&1[:type] == :form)
+        Buttons: &(&1[:type] == :button),
+        Form: &(&1[:type] == :form),
+        Navigation: &(&1[:type] == :navigation)
       ]
     ]
   end
diff --git a/priv/storybook/components/button.story.exs b/priv/storybook/buttons/button.story.exs
similarity index 100%
rename from priv/storybook/components/button.story.exs
rename to priv/storybook/buttons/button.story.exs
diff --git a/priv/storybook/components/button_link.story.exs b/priv/storybook/buttons/button_link.story.exs
similarity index 100%
rename from priv/storybook/components/button_link.story.exs
rename to priv/storybook/buttons/button_link.story.exs
diff --git a/priv/storybook/components/disclosure_button.story.exs b/priv/storybook/buttons/disclosure_button.story.exs
similarity index 100%
rename from priv/storybook/components/disclosure_button.story.exs
rename to priv/storybook/buttons/disclosure_button.story.exs
diff --git a/priv/storybook/components/fab.story.exs b/priv/storybook/buttons/fab.story.exs
similarity index 100%
rename from priv/storybook/components/fab.story.exs
rename to priv/storybook/buttons/fab.story.exs
diff --git a/priv/storybook/components/toggle_button.story.exs b/priv/storybook/buttons/toggle_button.story.exs
similarity index 100%
rename from priv/storybook/components/toggle_button.story.exs
rename to priv/storybook/buttons/toggle_button.story.exs
diff --git a/priv/storybook/components/drawer.story.exs b/priv/storybook/components/drawer.story.exs
index 08be25a..2d45db2 100644
--- a/priv/storybook/components/drawer.story.exs
+++ b/priv/storybook/components/drawer.story.exs
@@ -9,22 +9,22 @@ defmodule Storybook.Components.Drawer do
         id: :default,
         slots: [
           """
-          <:brand>
+          <:header>
             <Phoenix.Component.link navigate="/">
               Pet Clinic
             </Phoenix.Component.link>
-          </:brand>
+          </:header>
           """,
           """
-          <:top>
-            <Doggo.drawer_nav id="main-nav" label="Main">
+          <:main>
+            <Doggo.vertical_nav id="main-nav" label="Main">
               <:item>
                 <Phoenix.Component.link navigate="/dashboard">
                   Dashboard
                 </Phoenix.Component.link>
               </:item>
               <:item>
-                <Doggo.drawer_nested_nav id="main-nav-content">
+                <Doggo.vertical_nav_nested id="main-nav-content">
                   <:title>Content</:title>
                   <:item current_page>
                     <Phoenix.Component.link navigate="/posts">
@@ -36,18 +36,18 @@ defmodule Storybook.Components.Drawer do
                       Comments
                     </Phoenix.Component.link>
                   </:item>
-                </Doggo.drawer_nested_nav>
+                </Doggo.vertical_nav_nested>
               </:item>
-            </Doggo.drawer_nav>
-            <Doggo.drawer_section id="drawer-search">
+            </Doggo.vertical_nav>
+            <Doggo.vertical_nav_section id="drawer-search">
               <:title>Search</:title>
               <:item><input type="search" placeholder="Search" /></:item>
-            </Doggo.drawer_section>
-          </:top>
+            </Doggo.vertical_nav_section>
+          </:main>
           """,
           """
-          <:bottom>
-            <Doggo.drawer_nav id="user-menu" label="User menu">
+          <:footer>
+            <Doggo.vertical_nav id="user-menu" label="User menu">
               <:item>
                 <Phoenix.Component.link navigate="/settings">
                   Settings
@@ -58,8 +58,8 @@ defmodule Storybook.Components.Drawer do
                   Logout
                 </Phoenix.Component.link>
               </:item>
-            </Doggo.drawer_nav>
-          </:bottom>
+            </Doggo.vertical_nav>
+          </:footer>
           """
         ]
       }
diff --git a/priv/storybook/components/field_description.story.exs b/priv/storybook/form/field_description.story.exs
similarity index 100%
rename from priv/storybook/components/field_description.story.exs
rename to priv/storybook/form/field_description.story.exs
diff --git a/priv/storybook/components/field_errors.story.exs b/priv/storybook/form/field_errors.story.exs
similarity index 100%
rename from priv/storybook/components/field_errors.story.exs
rename to priv/storybook/form/field_errors.story.exs
diff --git a/priv/storybook/components/field_group.story.exs b/priv/storybook/form/field_group.story.exs
similarity index 100%
rename from priv/storybook/components/field_group.story.exs
rename to priv/storybook/form/field_group.story.exs
diff --git a/priv/storybook/components/input.story.exs b/priv/storybook/form/input.story.exs
similarity index 100%
rename from priv/storybook/components/input.story.exs
rename to priv/storybook/form/input.story.exs
diff --git a/priv/storybook/components/label.story.exs b/priv/storybook/form/label.story.exs
similarity index 100%
rename from priv/storybook/components/label.story.exs
rename to priv/storybook/form/label.story.exs
diff --git a/priv/storybook/components/bottom_navigation.story.exs b/priv/storybook/navigation/bottom_navigation.story.exs
similarity index 100%
rename from priv/storybook/components/bottom_navigation.story.exs
rename to priv/storybook/navigation/bottom_navigation.story.exs
diff --git a/priv/storybook/components/breadcrumb.story.exs b/priv/storybook/navigation/breadcrumb.story.exs
similarity index 100%
rename from priv/storybook/components/breadcrumb.story.exs
rename to priv/storybook/navigation/breadcrumb.story.exs
diff --git a/priv/storybook/components/navbar.story.exs b/priv/storybook/navigation/navbar.story.exs
similarity index 100%
rename from priv/storybook/components/navbar.story.exs
rename to priv/storybook/navigation/navbar.story.exs
diff --git a/priv/storybook/components/steps.story.exs b/priv/storybook/navigation/steps.story.exs
similarity index 100%
rename from priv/storybook/components/steps.story.exs
rename to priv/storybook/navigation/steps.story.exs
diff --git a/priv/storybook/components/tab_navigation.story.exs b/priv/storybook/navigation/tab_navigation.story.exs
similarity index 100%
rename from priv/storybook/components/tab_navigation.story.exs
rename to priv/storybook/navigation/tab_navigation.story.exs
diff --git a/priv/storybook/navigation/vertical_nav.story.exs b/priv/storybook/navigation/vertical_nav.story.exs
new file mode 100644
index 0000000..479c34d
--- /dev/null
+++ b/priv/storybook/navigation/vertical_nav.story.exs
@@ -0,0 +1,43 @@
+defmodule Storybook.Components.VerticalNav do
+  use PhoenixStorybook.Story, :component
+
+  def function, do: &Doggo.vertical_nav/1
+
+  def variations do
+    [
+      %Variation{
+        id: :default,
+        attributes: %{
+          id: "main-nav",
+          label: "Main"
+        },
+        slots: [
+          """
+          <:item>
+            <Phoenix.Component.link navigate="/dashboard">
+              Dashboard
+            </Phoenix.Component.link>
+          </:item>
+          """,
+          """
+          <:item>
+            <Doggo.vertical_nav_nested id="main-nav-content">
+              <:title>Content</:title>
+              <:item current_page>
+                <Phoenix.Component.link navigate="/posts">
+                  Posts
+                </Phoenix.Component.link>
+              </:item>
+              <:item>
+                <Phoenix.Component.link navigate="/comments">
+                  Comments
+                </Phoenix.Component.link>
+              </:item>
+            </Doggo.vertical_nav_nested>
+          </:item>
+          """
+        ]
+      }
+    ]
+  end
+end
diff --git a/priv/storybook/navigation/vertical_nav_section.story.exs b/priv/storybook/navigation/vertical_nav_section.story.exs
new file mode 100644
index 0000000..ddcb8df
--- /dev/null
+++ b/priv/storybook/navigation/vertical_nav_section.story.exs
@@ -0,0 +1,24 @@
+defmodule Storybook.Components.VerticalNavSection do
+  use PhoenixStorybook.Story, :component
+
+  def function, do: &Doggo.vertical_nav_section/1
+
+  def variations do
+    [
+      %Variation{
+        id: :default,
+        attributes: %{
+          id: "site-search"
+        },
+        slots: [
+          """
+          <:title>Search</:title>
+          """,
+          """
+          <:item><input type="search" placeholder="Search" /></:item>
+          """
+        ]
+      }
+    ]
+  end
+end


Test patch:
diff --git a/test/doggo_test.exs b/test/doggo_test.exs
index 3d7731d..31b66f6 100644
--- a/test/doggo_test.exs
+++ b/test/doggo_test.exs
@@ -2074,43 +2074,43 @@ defmodule DoggoTest do
       assert Floki.children(aside) == []
     end
 
-    test "with brand" do
+    test "with header" do
       assigns = %{}
 
       html =
         parse_heex(~H"""
         <Doggo.drawer>
-          <:brand>Doggo</:brand>
+          <:header>Doggo</:header>
         </Doggo.drawer>
         """)
 
-      assert text(html, "aside > div.drawer-brand") == "Doggo"
+      assert text(html, "aside > div.drawer-header") == "Doggo"
     end
 
-    test "with top slot" do
+    test "with main slot" do
       assigns = %{}
 
       html =
         parse_heex(~H"""
         <Doggo.drawer>
-          <:top>Doggo</:top>
+          <:main>Doggo</:main>
         </Doggo.drawer>
         """)
 
-      assert text(html, "aside > div.drawer-top") == "Doggo"
+      assert text(html, "aside > div.drawer-main") == "Doggo"
     end
 
-    test "with bottom slot" do
+    test "with footer slot" do
       assigns = %{}
 
       html =
         parse_heex(~H"""
         <Doggo.drawer>
-          <:bottom>Doggo</:bottom>
+          <:footer>Doggo</:footer>
         </Doggo.drawer>
         """)
 
-      assert text(html, "aside > div.drawer-bottom") == "Doggo"
+      assert text(html, "aside > div.drawer-footer") == "Doggo"
     end
 
     test "with additional class as string" do
@@ -2147,15 +2147,15 @@ defmodule DoggoTest do
     end
   end
 
-  describe "drawer_nav/1" do
+  describe "vertical_nav/1" do
     test "default" do
       assigns = %{}
 
       html =
         parse_heex(~H"""
-        <Doggo.drawer_nav id="main-nav" label="Main">
+        <Doggo.vertical_nav id="main-nav" label="Main">
           <:item>item</:item>
-        </Doggo.drawer_nav>
+        </Doggo.vertical_nav>
         """)
 
       div = find_one(html, "nav:root")
@@ -2170,9 +2170,9 @@ defmodule DoggoTest do
 
       html =
         parse_heex(~H"""
-        <Doggo.drawer_nav id="main-nav" label="Main">
+        <Doggo.vertical_nav id="main-nav" label="Main">
           <:item current_page>item</:item>
-        </Doggo.drawer_nav>
+        </Doggo.vertical_nav>
         """)
 
       assert attribute(html, ":root > ul > li", "aria-current") == "page"
@@ -2183,10 +2183,10 @@ defmodule DoggoTest do
 
       html =
         parse_heex(~H"""
-        <Doggo.drawer_nav id="main-nav" label="Main">
+        <Doggo.vertical_nav id="main-nav" label="Main">
           <:title>some title</:title>
           <:item>item</:item>
-        </Doggo.drawer_nav>
+        </Doggo.vertical_nav>
         """)
 
       assert text(html, ":root > div.drawer-nav-title") == "some title"
@@ -2197,9 +2197,9 @@ defmodule DoggoTest do
 
       html =
         parse_heex(~H"""
-        <Doggo.drawer_nav id="main-nav" label="Main">
+        <Doggo.vertical_nav id="main-nav" label="Main">
           <:item class="is-rad">item</:item>
-        </Doggo.drawer_nav>
+        </Doggo.vertical_nav>
         """)
 
       assert attribute(html, "li", "class") == "is-rad"
@@ -2210,9 +2210,9 @@ defmodule DoggoTest do
 
       html =
         parse_heex(~H"""
-        <Doggo.drawer_nav id="main-nav" label="Main" class="is-rad">
+        <Doggo.vertical_nav id="main-nav" label="Main" class="is-rad">
           <:item>item</:item>
-        </Doggo.drawer_nav>
+        </Doggo.vertical_nav>
         """)
 
       assert attribute(html, ":root", "class") == "is-rad"
@@ -2223,9 +2223,9 @@ defmodule DoggoTest do
 
       html =
         parse_heex(~H"""
-        <Doggo.drawer_nav id="main-nav" label="Main" class={["hey", "ho"]}>
+        <Doggo.vertical_nav id="main-nav" label="Main" class={["hey", "ho"]}>
           <:item>item</:item>
-        </Doggo.drawer_nav>
+        </Doggo.vertical_nav>
         """)
 
       assert attribute(html, ":root", "class") == "hey ho"
@@ -2236,24 +2236,24 @@ defmodule DoggoTest do
 
       html =
         parse_heex(~H"""
-        <Doggo.drawer_nav id="main-nav" label="Main" data-test="hello">
+        <Doggo.vertical_nav id="main-nav" label="Main" data-test="hello">
           <:item>item</:item>
-        </Doggo.drawer_nav>
+        </Doggo.vertical_nav>
         """)
 
       assert attribute(html, ":root", "data-test") == "hello"
     end
   end
 
-  describe "drawer_nested_nav/1" do
+  describe "vertical_nav_nested/1" do
     test "default" do
       assigns = %{}
 
       html =
         parse_heex(~H"""
-        <Doggo.drawer_nested_nav id="nested">
+        <Doggo.vertical_nav_nested id="nested">
           <:item>item</:item>
-        </Doggo.drawer_nested_nav>
+        </Doggo.vertical_nav_nested>
         """)
 
       assert attribute(html, "ul:root", "id") == "nested"
@@ -2268,9 +2268,9 @@ defmodule DoggoTest do
 
       html =
         parse_heex(~H"""
-        <Doggo.drawer_nested_nav id="nested">
+        <Doggo.vertical_nav_nested id="nested">
           <:item current_page>item</:item>
-        </Doggo.drawer_nested_nav>
+        </Doggo.vertical_nav_nested>
         """)
 
       assert attribute(html, "ul:root > li", "aria-current") == "page"
@@ -2281,10 +2281,10 @@ defmodule DoggoTest do
 
       html =
         parse_heex(~H"""
-        <Doggo.drawer_nested_nav id="nested">
+        <Doggo.vertical_nav_nested id="nested">
           <:title>some title</:title>
           <:item>item</:item>
-        </Doggo.drawer_nested_nav>
+        </Doggo.vertical_nav_nested>
         """)
 
       div = find_one(html, "div.drawer-nav-title")
@@ -2298,24 +2298,24 @@ defmodule DoggoTest do
 
       html =
         parse_heex(~H"""
-        <Doggo.drawer_nested_nav id="nested">
+        <Doggo.vertical_nav_nested id="nested">
           <:item class="is-rad">item</:item>
-        </Doggo.drawer_nested_nav>
+        </Doggo.vertical_nav_nested>
         """)
 
       assert attribute(html, "li", "class") == "is-rad"
     end
   end
 
-  describe "drawer_section/1" do
+  describe "vertical_nav_section/1" do
     test "default" do
       assigns = %{}
 
       html =
         parse_heex(~H"""
-        <Doggo.drawer_section id="my-drawer">
+        <Doggo.vertical_nav_section id="my-drawer">
           <:item>item</:item>
-        </Doggo.drawer_section>
+        </Doggo.vertical_nav_section>
         """)
 
       div = find_one(html, "div:root")
@@ -2331,10 +2331,10 @@ defmodule DoggoTest do
 
       html =
         parse_heex(~H"""
-        <Doggo.drawer_section id="my-drawer">
+        <Doggo.vertical_nav_section id="my-drawer">
           <:title>some title</:title>
           <:item>item</:item>
-        </Doggo.drawer_section>
+        </Doggo.vertical_nav_section>
         """)
 
       div = find_one(html, "div:root")
@@ -2350,9 +2350,9 @@ defmodule DoggoTest do
 
       html =
         parse_heex(~H"""
-        <Doggo.drawer_section id="my-drawer">
+        <Doggo.vertical_nav_section id="my-drawer">
           <:item class="is-rad">item</:item>
-        </Doggo.drawer_section>
+        </Doggo.vertical_nav_section>
         """)
 
       assert attribute(html, ":root > div", "class") == "drawer-item is-rad"
@@ -2363,9 +2363,9 @@ defmodule DoggoTest do
 
       html =
         parse_heex(~H"""
-        <Doggo.drawer_section id="my-drawer" class="is-narrow">
+        <Doggo.vertical_nav_section id="my-drawer" class="is-narrow">
           <:item>item</:item>
-        </Doggo.drawer_section>
+        </Doggo.vertical_nav_section>
         """)
 
       assert attribute(html, ":root", "class") == "drawer-section is-narrow"
@@ -2376,9 +2376,9 @@ defmodule DoggoTest do
 
       html =
         parse_heex(~H"""
-        <Doggo.drawer_section id="my-drawer" class={["is-narrow", "is-crisp"]}>
+        <Doggo.vertical_nav_section id="my-drawer" class={["is-narrow", "is-crisp"]}>
           <:item>item</:item>
-        </Doggo.drawer_section>
+        </Doggo.vertical_nav_section>
         """)
 
       assert attribute(html, ":root", "class") ==
@@ -2390,9 +2390,9 @@ defmodule DoggoTest do
 
       html =
         parse_heex(~H"""
-        <Doggo.drawer_section id="my-drawer" data-test="hello">
+        <Doggo.vertical_nav_section id="my-drawer" data-test="hello">
           <:item>item</:item>
-        </Doggo.drawer_section>
+        </Doggo.vertical_nav_section>
         """)
 
       assert attribute(html, ":root", "data-test") == "hello"