add story for navbar component

woylie · Dec 16, 2023 · 74002cc · 74002cc
1 parent 5c07903
commit 74002cc
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 1 deletion.
diff --git a/lib/doggo.ex b/lib/doggo.ex
@@ -1755,7 +1755,7 @@ defmodule Doggo do
         </Doggo.navbar_items>
         <Doggo.navbar_items class="navbar-user-menu">
           <:item>
-            <.link navigate={~p"/login"} class="button">Log in</.link>
+            <.button_link navigate={~p"/login"}>Log in</button_link>
           </:item>
         </Doggo.navbar_items>
       </Doggo.navbar>

diff --git a/priv/storybook/components/navbar.story.exs b/priv/storybook/components/navbar.story.exs
@@ -0,0 +1,72 @@
+defmodule Storybook.Components.Navbar do
+  use PhoenixStorybook.Story, :component
+
+  def function, do: &Doggo.navbar/1
+
+  def variations do
+    [
+      %Variation{
+        id: :default,
+        slots: [
+          """
+          <:brand>
+            <Phoenix.Component.link navigate="/">
+              Pet Clinic
+            </Phoenix.Component.link>
+          </:brand>
+          """,
+          """
+          <Doggo.navbar_items>
+            <:item>
+              <Phoenix.Component.link navigate="/about">
+                About
+              </Phoenix.Component.link>
+            </:item>
+            <:item>
+              <Phoenix.Component.link navigate="/services">
+                services
+              </Phoenix.Component.link>
+            </:item>
+            <:item>
+              <Phoenix.Component.link navigate="/login">
+                Log in
+              </Phoenix.Component.link>
+            </:item>
+          </Doggo.navbar_items>
+          """
+        ]
+      },
+      %Variation{
+        id: :multiple_navigation_sections,
+        slots: [
+          """
+          <:brand>
+            <Phoenix.Component.link navigate="/">
+              Pet Clinic
+            </Phoenix.Component.link>
+          </:brand>
+          """,
+          """
+          <Doggo.navbar_items>
+            <:item>
+              <Phoenix.Component.link navigate="/about">
+                About
+              </Phoenix.Component.link>
+            </:item>
+            <:item>
+              <Phoenix.Component.link navigate="/services">
+                services
+              </Phoenix.Component.link>
+            </:item>
+          </Doggo.navbar_items>
+          <Doggo.navbar_items>
+            <:item>
+              <Doggo.button_link navigate="/login">Log in</Doggo.button_link>
+            </:item>
+          </Doggo.navbar_items>
+          """
+        ]
+      }
+    ]
+  end
+end