add svgs to stories

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

Hide file tree

Showing 2 changed files with 137 additions and 10 deletions.
diff --git a/priv/storybook/components/action_bar.story.exs b/priv/storybook/components/action_bar.story.exs
@@ -3,28 +3,90 @@ defmodule Storybook.Components.ActionBar do
 
   def function, do: &Doggo.action_bar/1
 
+  def edit_svg do
+    """
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="lucide lucide-pencil"
+      aria-hidden="true"
+    >
+      <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" /><path d="m15 5 4 4" />
+    </svg>
+    """
+  end
+
+  def move_svg do
+    """
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="lucide lucide-move-right"
+      aria-hidden="true"
+    >
+      <path d="M18 8L22 12L18 16" /><path d="M2 12H22" />
+    </svg>
+    """
+  end
+
+  def archive_svg do
+    """
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="lucide lucide-archive"
+      aria-hidden="true"
+    >
+      <rect width="20" height="5" x="2" y="3" rx="1" /><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" /><path d="M10 12h4" />
+    </svg>
+    """
+  end
+
   def variations do
     [
       %Variation{
         id: :default,
-        description: """
-        Note that the actual icons have been omitted from this example,
-        since Doggo does not ship with a default icon library.
-        """,
         slots: [
           """
           <:item label="Edit" on_click={JS.push("edit")}>
-            <Doggo.icon size={:small}>Edit</Doggo.icon>
+            <Doggo.icon label="Edit" size={:small}>
+              #{edit_svg()}
+            </Doggo.icon>
           </:item>
           """,
           """
           <:item label="Move" on_click={JS.push("move")}>
-            <Doggo.icon size={:small}>Move</Doggo.icon>
+            <Doggo.icon label="Move" size={:small}>
+              #{move_svg()}
+            </Doggo.icon>
           </:item>
           """,
           """
           <:item label="Archive" on_click={JS.push("archive")}>
-            <Doggo.icon size={:small}>Archive</Doggo.icon>
+            <Doggo.icon label="Archive" size={:small}>
+              #{archive_svg()}
+            </Doggo.icon>
           </:item>
           """
         ]

diff --git a/priv/storybook/components/app_bar.story.exs b/priv/storybook/components/app_bar.story.exs
@@ -3,6 +3,71 @@ defmodule Storybook.Components.AppBar do
 
   def function, do: &Doggo.app_bar/1
 
+  def menu_svg do
+    """
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="lucide lucide-menu"
+      aria-hidden="true"
+    >
+      <line x1="4" x2="20" y1="12" y2="12" /><line x1="4" x2="20" y1="6" y2="6" /><line
+        x1="4"
+        x2="20"
+        y1="18"
+        y2="18"
+      />
+    </svg>
+    """
+  end
+
+  def search_svg do
+    """
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="lucide lucide-search"
+      aria-hidden="true"
+    >
+      <circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" />
+    </svg>
+    """
+  end
+
+  def like_svg do
+    """
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="lucide lucide-heart"
+      aria-hidden="true"
+    >
+      <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
+    </svg>
+    """
+  end
+
   def variations do
     [
       %Variation{
@@ -17,17 +82,17 @@ defmodule Storybook.Components.AppBar do
         slots: [
           """
           <:navigation label="Open menu" on_click={JS.push("toggle-menu")}>
-            <Doggo.icon>Menu</Doggo.icon>
+            <Doggo.icon label="Menu">#{menu_svg()}</Doggo.icon>
           </:navigation>
           """,
           """
           <:action label="Search" on_click={JS.push("search")}>
-            <Doggo.icon>Search</Doggo.icon>
+            <Doggo.icon label="Search">#{search_svg()}</Doggo.icon>
           </:action>
           """,
           """
           <:action label="Like" on_click={JS.push("like")}>
-            <Doggo.icon>Like</Doggo.icon>
+            <Doggo.icon label="Like">#{like_svg()}</Doggo.icon>
           </:action>
           """
         ]