add tag component

lib/doggo.ex

@@ -2721,6 +2721,61 @@ defmodule Doggo do
     """
   end
 
+  @doc """
+  Renders a tag, typically used for displaying labels, categories, or keywords.
+
+  ## Examples
+
+  Plain tag:
+
+      <.tag>Well-Trained</.tag>
+
+  With icon:
+
+      <.tag>
+        Puppy
+        <.icon><Heroicons.edit /></icon>
+      </.tag>
+
+  With delete button:
+
+      <.tag>
+        High Energy
+        <button
+          phx-click="remove-tag"
+          phx-value-tag="high-energy"
+          aria-label="Remove tag"
+        >
+          <.icon><Heroicons.x /></icon>
+        </button>
+      </.tag>
+  """
+
+  attr :size, :atom,
+    values: [:small, :normal, :medium, :large],
+    default: :normal
+
+  attr :variant, :atom,
+    values: [nil, :primary, :secondary, :info, :success, :warning, :danger],
+    default: nil
+
+  attr :shape, :atom, values: [nil, :pill], default: nil
+
+  slot :inner_block, required: true
+
+  def tag(assigns) do
+    ~H"""
+    <span class={[
+      "tag",
+      size_class(@size),
+      variant_class(@variant),
+      shape_class(@shape)
+    ]}>
+      <%= render_slot(@inner_block) %>
+    </span>
+    """
+  end
+
   ## Helpers
 
   defp humanize(atom) when is_atom(atom) do

priv/storybook/components/tag.story.exs

@@ -0,0 +1,48 @@
+defmodule Storybook.Components.Tag do
+  use PhoenixStorybook.Story, :component
+
+  def function, do: &Doggo.tag/1
+
+  def variations do
+    [
+      %Variation{
+        id: :default,
+        slots: ["puppy"]
+      },
+      %Variation{
+        id: :pill,
+        attributes: %{shape: :pill},
+        slots: ["puppy"]
+      },
+      %VariationGroup{
+        id: :variants,
+        variations:
+          for variant <- [
+                :primary,
+                :secondary,
+                :info,
+                :success,
+                :warning,
+                :danger
+              ] do
+            %Variation{
+              id: variant,
+              attributes: %{variant: variant},
+              slots: [to_string(variant)]
+            }
+          end
+      },
+      %VariationGroup{
+        id: :sizes,
+        variations:
+          for size <- [:small, :normal, :medium, :large] do
+            %Variation{
+              id: size,
+              attributes: %{size: size},
+              slots: [to_string(size)]
+            }
+          end
+      }
+    ]
+  end
+end